From 5e4aa7b1d484dcc88925fdbc844dff27894a0955 Mon Sep 17 00:00:00 2001 From: lxsang Date: Mon, 6 May 2019 20:31:20 +0200 Subject: [PATCH] add legend --- LuaPlayground/build/debug/main.js | 89 +++++++++++++++++++++---------- LuaPlayground/coffees/main.coffee | 71 +++++++++++++++--------- 2 files changed, 106 insertions(+), 54 deletions(-) diff --git a/LuaPlayground/build/debug/main.js b/LuaPlayground/build/debug/main.js index ac2271e..56ef7ff 100644 --- a/LuaPlayground/build/debug/main.js +++ b/LuaPlayground/build/debug/main.js @@ -5,7 +5,9 @@ constructor(data) { this.target = data; this.el = ($("")).attr("class", "viewer")[0]; - this.offset = 5; + this.offset = 10; + this.points = []; + this.preprocess(); this.getBound(); this.prepare(); this.render(); @@ -15,6 +17,10 @@ return new paper.Point(v[0] / this.target.resolution + this.base.x, -v[1] / this.target.resolution + this.base.y); } + preprocess() { + return this.points = this.target.data; + } + getBound() { var j, len, peak_rb, peak_tl, ref, start, v, x, y; peak_tl = { @@ -26,7 +32,7 @@ y: 0 }; start = null; - ref = this.target.data; + ref = this.points; for (j = 0, len = ref.length; j < len; j++) { v = ref[j]; x = v[0] / this.target.resolution; @@ -63,13 +69,13 @@ } drawGrid(size, color) { - var end, i, path, results, start, wgridsize; + var end, i, path, start, text, wgridsize; wgridsize = this.target.resolution * size; // draw y line - i = Math.ceil(this.bound[0].x / wgridsize); - while (i * wgridsize < this.bound[1].x) { - start = this.canvasPoint([i * wgridsize, this.bound[0].y]); - end = this.canvasPoint([i * wgridsize, this.bound[1].y]); + i = Math.ceil(this.bound[0].x / size); + while (i * size < this.bound[1].x) { + start = new paper.Point(i * size + this.base.x, -this.bound[0].y + this.base.y); + end = new paper.Point(i * size + this.base.x, -this.bound[1].y + this.base.y); path = new paper.Path(); path.strokeColor = color; path.moveTo(start); @@ -78,18 +84,22 @@ } // draw x line - i = Math.ceil(this.bound[0].y / wgridsize); - results = []; - while (i * wgridsize < this.bound[1].y) { - start = this.canvasPoint([this.bound[0].x, i * wgridsize]); - end = this.canvasPoint([this.bound[1].x, i * wgridsize]); + i = Math.ceil(this.bound[0].y / size); + while (i * size < this.bound[1].y) { + start = new paper.Point(this.bound[0].x + this.base.x, -i * size + this.base.y); + end = new paper.Point(this.bound[1].x + this.base.x, -i * size + this.base.y); path = new paper.Path(); path.strokeColor = color; path.moveTo(start); path.lineTo(end); - results.push(i++); + i++; } - return results; + + // draw text + text = new paper.PointText(this.bound[0].x + this.base.x, this.base.y - this.bound[1].y + this.offset); + text.justification = 'left'; + text.fillColor = '#494949'; + return text.content = `Resolution: ${this.target.resolution}, grid size: ${wgridsize} mm`; } drawAxis(color) { @@ -97,15 +107,15 @@ // x axis path = new paper.Path(); path.strokeColor = color; - start = this.canvasPoint([this.bound[0].x, 0]); - end = this.canvasPoint([this.bound[1].x, 0]); + start = new paper.Point(this.bound[0].x + this.base.x, this.base.y); + end = new paper.Point(this.bound[1].x + this.base.x, this.base.y); path.moveTo(start); path.lineTo(end); // y axis path = new paper.Path(); path.strokeColor = color; - start = this.canvasPoint([0, this.bound[0].y]); - end = this.canvasPoint([0, this.bound[1].y]); + start = new paper.Point(this.base.x, -this.bound[0].y + this.base.y); + end = new paper.Point(this.base.x, -this.bound[1].y + this.base.y); path.moveTo(start); path.lineTo(end); return this.drawPoint([0, 0], color, 3); @@ -141,26 +151,47 @@ super(data); } + p2c(length, angle) { + var rad; + rad = angle * Math.PI / 180; + return [length * Math.cos(rad), length * Math.sin(rad)]; + } + + preprocess() { + var i, j, len, ref, results, v; + if (this.target.coordinate !== "polar") { + return this.points = this.target.data; + } + this.point = []; + i = 0; + ref = this.target.data; + results = []; + for (j = 0, len = ref.length; j < len; j++) { + v = ref[j]; + this.points.push(this.p2c(v, this.target.start + i * this.target.angularResolution)); + results.push(i = i + 1); + } + return results; + } + // point clound render render() { - var j, len, path, point, ref, start, v; + var end, j, len, path, ref, start, v; this.drawGrid(20, "#DBDBDB"); // 20 px this.drawAxis("#0A84FF"); - path = new paper.Path(); - path.strokeColor = 'black'; - start = null; - ref = this.target.data; + ref = this.points; for (j = 0, len = ref.length; j < len; j++) { v = ref[j]; - point = this.canvasPoint(v); - if (!start) { - start = point; + if (this.target.coordinate === "polar") { + path = new paper.Path(); + path.strokeColor = '#c2a10e'; + start = this.canvasPoint([0, 0]); + end = this.canvasPoint(v); path.moveTo(start); - } else { - path.lineTo(point); + path.lineTo(end); } - this.drawPoint(v, "black", 4); + this.drawPoint(v, "red", 3); } return paper.view.draw(); } diff --git a/LuaPlayground/coffees/main.coffee b/LuaPlayground/coffees/main.coffee index 2dc9b02..2595932 100644 --- a/LuaPlayground/coffees/main.coffee +++ b/LuaPlayground/coffees/main.coffee @@ -2,7 +2,9 @@ class DataViewer constructor: (data) -> @target = data @el = ($ "").attr("class", "viewer")[0] - @offset = 5 + @offset = 10 + @points = [] + @preprocess() @getBound() @prepare() @render() @@ -10,11 +12,14 @@ class DataViewer canvasPoint: (v) -> return new paper.Point(v[0] / @target.resolution + @base.x, - v[1] / @target.resolution + @base.y) + preprocess: () -> + @points = @target.data + getBound: () -> peak_tl = { x:0, y:0} peak_rb = { x:0, y:0} start = null - for v in @target.data + for v in @points x = v[0] / @target.resolution y = v[1] / @target.resolution peak_tl.x = x if x < peak_tl.x @@ -37,10 +42,10 @@ class DataViewer drawGrid: (size, color) -> wgridsize = @target.resolution*size # draw y line - i = Math.ceil(@bound[0].x / wgridsize) - while i*wgridsize < @bound[1].x - start = @canvasPoint [i*wgridsize, @bound[0].y] - end = @canvasPoint [i*wgridsize, @bound[1].y] + i = Math.ceil(@bound[0].x / size) + while i*size < @bound[1].x + start = new paper.Point(i*size + @base.x, -@bound[0].y + @base.y ) + end = new paper.Point(i*size + @base.x, -@bound[1].y + @base.y ) path = new paper.Path() path.strokeColor = color path.moveTo start @@ -48,29 +53,35 @@ class DataViewer i++ # draw x line - i = Math.ceil(@bound[0].y / wgridsize) - while i*wgridsize < @bound[1].y - start = @canvasPoint [@bound[0].x,i*wgridsize] - end = @canvasPoint [@bound[1].x, i*wgridsize] + i = Math.ceil(@bound[0].y / size) + while i*size < @bound[1].y + start = new paper.Point(@bound[0].x + @base.x,-i*size + @base.y ) + end = new paper.Point(@bound[1].x + @base.x, -i*size + @base.y ) path = new paper.Path() path.strokeColor = color path.moveTo start path.lineTo end i++ + # draw text + text = new paper.PointText(@bound[0].x + @base.x, @base.y - @bound[1].y + @offset) + text.justification = 'left' + text.fillColor = '#494949' + text.content = "Resolution: #{@target.resolution}, grid size: #{wgridsize} mm" + drawAxis: (color) -> # x axis path = new paper.Path() path.strokeColor = color - start = @canvasPoint [@bound[0].x, 0] - end = @canvasPoint [@bound[1].x, 0] + start = new paper.Point( @bound[0].x + @base.x, @base.y) + end = new paper.Point( @bound[1].x + @base.x, @base.y) path.moveTo(start) path.lineTo(end) # y axis path = new paper.Path() path.strokeColor = color - start = @canvasPoint [0, @bound[0].y] - end = @canvasPoint [0, @bound[1].y] + start = new paper.Point(@base.x, -@bound[0].y + @base.y) + end = new paper.Point(@base.x, -@bound[1].y + @base.y) path.moveTo(start) path.lineTo(end) @drawPoint [0,0], color, 3 @@ -100,21 +111,31 @@ class PointCloudViewer extends DataViewer constructor: (data) -> super data + p2c: (length, angle) -> + rad = angle*Math.PI / 180 + return [length*Math.cos(rad), length*Math.sin(rad)] + + preprocess: () -> + return @points = @target.data unless @target.coordinate is "polar" + @point = [] + i = 0 + for v in @target.data + @points.push @p2c v, @target.start + i*@target.angularResolution + i = i+1 + # point clound render render: () -> @drawGrid 20, "#DBDBDB" # 20 px @drawAxis("#0A84FF") - path = new paper.Path() - path.strokeColor = 'black' - start = null - for v in @target.data - point = @canvasPoint v - if not start - start = point - path.moveTo(start) - else - path.lineTo point - @drawPoint v, "black", 4 + for v in @points + if @target.coordinate is "polar" + path = new paper.Path() + path.strokeColor = '#c2a10e' + start = @canvasPoint [0,0] + end = @canvasPoint v + path.moveTo start + path.lineTo end + @drawPoint v, "red", 3 paper.view.draw()