Merge branch 'dev'

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "cncjs",
-  "version": "0.14.4",
+  "version": "0.14.5",
   "description": "CNC.js is a web-based CNC milling controller for the Arduino running GRBL",
   "dependencies": {
     "html5shiv": "~3.7.3",

gulp/tasks/build.js

@@ -2,7 +2,13 @@ import gulp from 'gulp';
 import runSequence from 'run-sequence';
 
 export default (options) => {
-    gulp.task('b', ['browserify']);
+    gulp.task('b', (callback) => {
+        runSequence(
+            'styles',
+            'browserify'
+        );
+    });
+
     gulp.task('build', (callback) => {
         runSequence('clean',
             'bower',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cncjs",
-  "version": "0.14.4",
+  "version": "0.14.5",
   "description": "CNC.js is a web-based CNC milling controller for the Arduino running GRBL",
   "homepage": "https://github.com/cheton/cnc.js",
   "author": "Cheton Wu <cheton@gmail.com>",

web/components/widgets/axes/DisplayPanel.jsx

@@ -16,7 +16,7 @@ class DisplayPanel extends React.Component {
         activeState: React.PropTypes.string,
         machinePos: React.PropTypes.object,
         workingPos: React.PropTypes.object
-    }
+    };
 
     handleSelect(target, eventKey) {
         let data = eventKey;

web/components/widgets/probe/Probe.jsx

@@ -23,7 +23,7 @@ class Probe extends React.Component {
         probeFeedrate: store.getState('widgets.probe.probeFeedrate.mm', 20),
         tlo: store.getState('widgets.probe.tlo.mm', 10),
         retractionDistance: store.getState('widgets.probe.retractionDistance.mm', 2)
-    }
+    };
     socketEventListener = {
         'grbl:current-status': ::this.socketOnGrblCurrentStatus,
         'grbl:gcode-modes': ::this.socketOnGrblGCodeModes

web/components/widgets/spindle/Spindle.jsx

@@ -9,7 +9,7 @@ class Spindle extends React.Component {
         port: '',
         isCCWChecked: false,
         spindleSpeed: 0
-    }
+    };
 
     componentDidMount() {
         this.subscribe();

web/components/widgets/visualizer/helpers/CoordinateAxes.js → web/components/widgets/visualizer/CoordinateAxes.js

@@ -11,14 +11,14 @@ const buildAxis = (src, dst, color, dashed) => {
             color: color,
             dashSize: 1,
             gapSize: 1,
-            opacity: 0.5,
+            opacity: 0.8,
             transparent: true
         });
     } else {
         material = new THREE.LineBasicMaterial({
             linewidth: 1,
             color: color,
-            opacity: 0.5,
+            opacity: 0.8,
             transparent: true
         });
     }

web/components/widgets/visualizer/GridLine.js

@@ -0,0 +1,47 @@
+import THREE from 'three';
+
+class GridLine extends THREE.Line {
+    group = new THREE.Object3D();
+
+    colorCenterLine = new THREE.Color(0x444444);
+    colorGrid = new THREE.Color(0x888888);
+
+    constructor(sizeX, stepX, sizeY, stepY) {
+        let geometry = new THREE.Geometry();
+        let material = new THREE.LineBasicMaterial({
+            vertexColors: THREE.VertexColors
+        });
+
+        super(geometry, material);
+
+        sizeY = (typeof sizeY === 'undefined') ? sizeX : sizeY;
+        stepY = (typeof stepY === 'undefined') ? stepX : stepY;
+
+        for (let i = -1 * sizeX; i <= sizeX; i += stepX) {
+            geometry.vertices.push(
+                new THREE.Vector3(-sizeX, i, 0),
+                new THREE.Vector3(sizeX, i, 0),
+            );
+
+            let color = (i === 0) ? this.colorCenterLine : this.colorGrid;
+            geometry.colors.push(color, color, color, color);
+        }
+
+        for (let i = -1 * sizeY; i <= sizeY; i += stepY) {
+            geometry.vertices.push(
+                new THREE.Vector3(i, -sizeY, 0),
+                new THREE.Vector3(i, sizeY, 0),
+            );
+
+            let color = (i === 0) ? this.colorCenterLine : this.colorGrid;
+            geometry.colors.push(color, color, color, color);
+        }
+    }
+    setColors(colorCenterLine, colorGrid) {
+        this.colorCenterLine.set(colorCenterLine);
+        this.colorGrid.set(colorGrid);
+        this.geometry.colorsNeedUpdate = true;
+    }
+}
+
+export default GridLine;

web/components/widgets/visualizer/TextSprite.js

@@ -0,0 +1,61 @@
+import THREE from 'three';
+
+// TextSprite
+class TextSprite {
+    // @param {object} options The options object
+    // @param {number} [options.x] The point on the x-axis
+    // @param {number} [options.y] The point on the y-axis
+    // @param {number} [options.z] The point on the z-axis
+    // @param {string} [options.text] The text string
+    // @param {number} [options.size] The actual font size
+    // @param {number|string} [options.color] The color
+    // @param {number} [options.opacity] The opacity of text [0,1]
+    constructor(options) {
+        options = options || {};
+        let { opacity = 0.6, size = 10 } = options;
+
+        let textObject = new THREE.Object3D();
+        let textHeight = 100;
+        let textWidth = 0;
+
+        let canvas = document.createElement('canvas');
+        let context = canvas.getContext('2d');
+        context.font = 'normal ' + textHeight + 'px Arial';
+        let metrics = context.measureText(options.text);
+        textWidth = metrics.width;
+
+        canvas.width = textWidth;
+        canvas.height = textHeight;
+
+        context.font = 'normal ' + textHeight + 'px Arial';
+        context.textAlign = 'center';
+        context.textBaseline = 'middle';
+        context.fillStyle = options.color;
+        context.fillText(options.text, textWidth / 2, textHeight / 2);
+
+        let texture = new THREE.Texture(canvas);
+        texture.needsUpdate = true;
+        texture.minFilter = THREE.LinearFilter;
+
+        let material = new THREE.SpriteMaterial({
+            map: texture,
+            transparent: true,
+            opacity: opacity
+        });
+
+        textObject.position.x = options.x || 0;
+        textObject.position.y = options.y || 0;
+        textObject.position.z = options.z || 0;
+        textObject.textHeight = size;
+        textObject.textWidth = (textWidth / textHeight) * textObject.textHeight;
+
+        let sprite = new THREE.Sprite(material);
+        sprite.scale.set(textWidth / textHeight * size, size, 1);
+
+        textObject.add(sprite);
+
+        return textObject;
+    }
+}
+
+export default TextSprite;

web/components/widgets/visualizer/Visualizer.jsx

@@ -11,17 +11,21 @@ import socket from '../../../lib/socket';
 import Joystick from './Joystick';
 import Toolbar from './Toolbar';
 import FileUploader from './FileUploader';
-import {
-    fitCameraToObject, getBoundingBox, loadTexture,
-    CoordinateAxes, EngravingCutter, GridLine, PivotPoint3
-} from './helpers';
+import { fitCameraToObject, getBoundingBox, loadTexture } from './helpers';
+import CoordinateAxes from './CoordinateAxes';
+import EngravingCutter from './EngravingCutter';
+import GridLine from './GridLine';
+import PivotPoint3 from './PivotPoint3';
+import TextSprite from './TextSprite';
 import {
     COORDINATE_PLANE_XY,
     COORDINATE_PLANE_XZ,
     COORDINATE_PLANE_YZ,
-    AXIS_LINE_LENGTH,
-    GRID_LINE_LENGTH,
-    GRID_SPACING,
+    AXIS_LENGTH,
+    GRID_X_LENGTH,
+    GRID_Y_LENGTH,
+    GRID_X_SPACING,
+    GRID_Y_SPACING,
     ACTIVE_STATE_IDLE,
     ACTIVE_STATE_RUN,
     WORKFLOW_STATE_RUNNING,
@@ -297,19 +301,83 @@ class Visualizer extends React.Component {
         }
 
         { // Creating the coordinate grid
-            let colorCenterLine = null; // Set to null to keep it transparent
-            let colorGrid = colornames('gray 89');
-            let gridLine = new GridLine(GRID_LINE_LENGTH, GRID_SPACING, colorCenterLine, colorGrid);
+            let gridLine = new GridLine(GRID_X_LENGTH, GRID_X_SPACING * 2, GRID_Y_LENGTH, GRID_Y_SPACING * 2);
+            gridLine.setColors(colornames('blue'), colornames('gray 44'));
+            gridLine.material.opacity = 0.15;
+            gridLine.material.transparent = true;
+            gridLine.material.depthWrite = false;
             gridLine.name = 'GridLine';
             this.group.add(gridLine);
         }
 
-        { // Creating the coordinate axes
-            let coordinateAxes = new CoordinateAxes(AXIS_LINE_LENGTH);
+        { // Creating coordinate axes
+            let coordinateAxes = new CoordinateAxes(AXIS_LENGTH);
             coordinateAxes.name = 'CoordinateAxes';
             this.group.add(coordinateAxes);
         }
 
+        { // Creating axis labels
+            let axisXLabel = new TextSprite({
+                x: AXIS_LENGTH + 10,
+                y: 0,
+                z: 0,
+                size: 20,
+                text: 'X',
+                color: colornames('red')
+            });
+            let axisYLabel = new TextSprite({
+                x: 0,
+                y: AXIS_LENGTH + 10,
+                z: 0,
+                size: 20,
+                text: 'Y',
+                color: colornames('green')
+            });
+            let axisZLabel = new TextSprite({
+                x: 0,
+                y: 0,
+                z: AXIS_LENGTH + 10,
+                size: 20,
+                text: 'Z',
+                color: colornames('blue')
+            });
+
+            this.group.add(axisXLabel);
+            this.group.add(axisYLabel);
+            this.group.add(axisZLabel);
+
+            for (let i = -GRID_X_LENGTH; i <= GRID_X_LENGTH; i += 50) {
+                if (i === 0) {
+                    continue;
+                }
+                let textLabel = new TextSprite({
+                    x: i,
+                    y: 10,
+                    z: 0,
+                    size: 8,
+                    text: i,
+                    color: colornames('red'),
+                    opacity: 0.5
+                });
+                this.group.add(textLabel);
+            }
+            for (let i = -GRID_Y_LENGTH; i <= GRID_Y_LENGTH; i += 50) {
+                if (i === 0) {
+                    continue;
+                }
+                let textLabel = new TextSprite({
+                    x: -10,
+                    y: i,
+                    z: 0,
+                    size: 8,
+                    text: i,
+                    color: colornames('green'),
+                    opacity: 0.5
+                });
+                this.group.add(textLabel);
+            }
+        }
+
         { // Creating an engraving cutter
             let color = colornames('silver');
             let url = 'textures/brushed-steel-texture.jpg';
@@ -368,7 +436,7 @@ class Visualizer extends React.Component {
         let renderer = new THREE.WebGLRenderer({
             autoClearColor: true
         });
-        renderer.setClearColor(new THREE.Color(colornames('gray 94'), 1.0));
+        renderer.setClearColor(new THREE.Color(colornames('white'), 1.0));
         renderer.setSize(width, height);
         renderer.clear();
 

web/components/widgets/visualizer/constants.js

@@ -1,9 +1,11 @@
 export const COORDINATE_PLANE_XY = 'XY';
 export const COORDINATE_PLANE_XZ = 'XZ';
 export const COORDINATE_PLANE_YZ = 'YZ';
-export const AXIS_LINE_LENGTH = 1200;
-export const GRID_LINE_LENGTH = 1200;
-export const GRID_SPACING = 10;
+export const AXIS_LENGTH = 300;
+export const GRID_X_LENGTH = 600;
+export const GRID_Y_LENGTH = 600;
+export const GRID_X_SPACING = 10;
+export const GRID_Y_SPACING = 10;
 
 export const CAMERA_FOV = 50;
 export const CAMERA_ASPECT = 1;

web/components/widgets/visualizer/helpers/index.jsx → web/components/widgets/visualizer/helpers.js

@@ -1,9 +1,5 @@
 import _ from 'lodash';
 import THREE from 'three';
-import CoordinateAxes from './CoordinateAxes';
-import EngravingCutter from './EngravingCutter';
-import GridLine from './GridLine';
-import PivotPoint3 from './PivotPoint3';
 
 // Fits camera to object
 // @param {number} width The object width
@@ -87,13 +83,7 @@ export const loadTexture = (url, callback) => {
 };
 
 export {
-    // Function
     fitCameraToObject,
     getBoundingBox,
-    loadTexture,
-    // Class
-    CoordinateAxes,
-    EngravingCutter,
-    GridLine,
-    PivotPoint3
+    loadTexture
 };