add legend

LuaPlayground/build/debug/main.js

@@ -5,7 +5,9 @@
     constructor(data) {
       this.target = data;
       this.el = ($("<canvas>")).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);
+      i = Math.ceil(this.bound[0].x / size);
-      while (i * wgridsize < this.bound[1].x) {
+      while (i * size < this.bound[1].x) {
-        start = this.canvasPoint([i * wgridsize, this.bound[0].y]);
+        start = new paper.Point(i * size + this.base.x, -this.bound[0].y + this.base.y);
-        end = this.canvasPoint([i * wgridsize, this.bound[1].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);
+      i = Math.ceil(this.bound[0].y / size);
-      results = [];
+      while (i * size < this.bound[1].y) {
-      while (i * wgridsize < this.bound[1].y) {
+        start = new paper.Point(this.bound[0].x + this.base.x, -i * size + this.base.y);
-        start = this.canvasPoint([this.bound[0].x, i * wgridsize]);
+        end = new paper.Point(this.bound[1].x + this.base.x, -i * size + this.base.y);
-        end = this.canvasPoint([this.bound[1].x, i * wgridsize]);
         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]);
+      start = new paper.Point(this.bound[0].x + this.base.x, this.base.y);
-      end = this.canvasPoint([this.bound[1].x, 0]);
+      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]);
+      start = new paper.Point(this.base.x, -this.bound[0].y + this.base.y);
-      end = this.canvasPoint([0, this.bound[1].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();
+      ref = this.points;
-      path.strokeColor = 'black';
-      start = null;
-      ref = this.target.data;
       for (j = 0, len = ref.length; j < len; j++) {
         v = ref[j];
-        point = this.canvasPoint(v);
+        if (this.target.coordinate === "polar") {
-        if (!start) {
+          path = new paper.Path();
-          start = point;
+          path.strokeColor = '#c2a10e';
+          start = this.canvasPoint([0, 0]);
+          end = this.canvasPoint(v);
           path.moveTo(start);
-        } else {
+          path.lineTo(end);
-          path.lineTo(point);
         }
-        this.drawPoint(v, "black", 4);
+        this.drawPoint(v, "red", 3);
       }
       return paper.view.draw();
     }

LuaPlayground/coffees/main.coffee

@@ -2,7 +2,9 @@ class DataViewer
     constructor: (data) ->
         @target = data
         @el =  ($ "<canvas>").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)
+        i = Math.ceil(@bound[0].x / size)
-        while i*wgridsize < @bound[1].x
+        while i*size < @bound[1].x
-            start = @canvasPoint [i*wgridsize, @bound[0].y]
+            start = new paper.Point(i*size + @base.x, -@bound[0].y + @base.y )
-            end = @canvasPoint [i*wgridsize, @bound[1].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)
+        i = Math.ceil(@bound[0].y / size)
-        while i*wgridsize < @bound[1].y
+        while i*size < @bound[1].y
-            start = @canvasPoint [@bound[0].x,i*wgridsize]
+            start = new paper.Point(@bound[0].x  + @base.x,-i*size + @base.y )
-            end = @canvasPoint [@bound[1].x, i*wgridsize]
+            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]
+        start = new paper.Point( @bound[0].x + @base.x, @base.y)
-        end = @canvasPoint [@bound[1].x, 0]
+        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]
+        start = new paper.Point(@base.x, -@bound[0].y + @base.y)
-        end = @canvasPoint [0, @bound[1].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()
+        for v in @points
-        path.strokeColor = 'black'
+            if @target.coordinate is "polar"
-        start = null
+                path = new paper.Path()
-        for v in @target.data
+                path.strokeColor = '#c2a10e'
-            point = @canvasPoint v
+                start = @canvasPoint [0,0]
-            if not start
+                end = @canvasPoint v
-                start = point
+                path.moveTo start
-                path.moveTo(start)
+                path.lineTo end
-            else
+            @drawPoint v, "red", 3
-                path.lineTo point
-            @drawPoint v, "black", 4
         paper.view.draw()