Skip to content

Commit

Permalink
Merge branch 'dev'
Browse files Browse the repository at this point in the history
  • Loading branch information
@cheton
cheton committed Jan 11, 2016
2 parents 7900b2b + 8f90ad6 commit 583c751
Show file tree
Hide file tree
Showing 9 changed files with 219 additions and 137 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "cncjs",
"version": "0.14.9",
"version": "0.14.10",
"description": "CNC.js is a web-based CNC milling controller for the Arduino running GRBL",
"dependencies": {
"html5shiv": "~3.7.3",
Expand Down
12 changes: 6 additions & 6 deletions dist/assets/app.js
View file

Large diffs are not rendered by default.

10 changes: 6 additions & 4 deletions dist/assets/app.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "cncjs",
"version": "0.14.9",
"version": "0.14.10",
"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>",
Expand Down
250 changes: 140 additions & 110 deletions web/components/widgets/grbl/Grbl.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,18 @@ import log from '../../../lib/log';
import socket from '../../../lib/socket';
import serialport from '../../../lib/serialport';
import { MODAL_GROUPS } from '../../../constants/modal-groups';
import {
ACTIVE_STATE_IDLE
} from './constants';

class Grbl extends React.Component {
state = {
port: '',
modes: {
}
activeState: ACTIVE_STATE_IDLE,
modes: {}
};
socketEventListener = {
'grbl:current-status': ::this.socketOnGrblCurrentStatus,
'grbl:gcode-modes': ::this.socketOnGrblGCodeModes
};

Expand Down Expand Up @@ -58,6 +62,11 @@ class Grbl extends React.Component {
socket.off(eventName, callback);
});
}
socketOnGrblCurrentStatus(data) {
this.setState({
activeState: data.activeState
});
}
socketOnGrblGCodeModes(modes) {
let state = {};

Expand Down Expand Up @@ -96,127 +105,148 @@ class Grbl extends React.Component {
return ! _.isEqual(nextState, this.state);
}
render() {
let { port, modes } = this.state;
let { port, activeState, modes } = this.state;
let canClick = !!port;

return (
<div>
<div className="form-group">
<div className="btn-group btn-group-justified" role="group" aria-label="...">
<DropdownButton bsSize="sm" bsStyle="default" title={i18n._('Real-Time Commands')} id="realtime-commands">
<MenuItem onSelect={() => serialport.write('~')} disabled={!canClick}>{i18n._('Cycle Start (~)')}</MenuItem>
<MenuItem onSelect={() => serialport.write('!')} disabled={!canClick}>{i18n._('Feed Hold (!)')}</MenuItem>
<MenuItem onSelect={() => serialport.write('?')} disabled={!canClick}>{i18n._('Current Status (?)')}</MenuItem>
<MenuItem onSelect={() => serialport.write('\x18')} disabled={!canClick}>{i18n._('Reset Grbl (Ctrl-X)')}</MenuItem>
</DropdownButton>
<DropdownButton bsSize="sm" bsStyle="default" title={i18n._('System Commands')} id="system-commands">
<MenuItem onSelect={() => serialport.writeln('$')} disabled={!canClick}>{i18n._('Grbl Help ($)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$$')} disabled={!canClick}>{i18n._('Grbl Settings ($$)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$#')} disabled={!canClick}>{i18n._('View G-code Parameters ($#)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$G')} disabled={!canClick}>{i18n._('View G-code Parser State ($G)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$I')} disabled={!canClick}>{i18n._('View Build Info ($I)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$N')} disabled={!canClick}>{i18n._('View Startup Blocks ($N)')}</MenuItem>
<MenuItem divider />
<MenuItem onSelect={() => serialport.writeln('$C')} disabled={!canClick}>{i18n._('Check G-code Mode ($C)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$X')} disabled={!canClick}>{i18n._('Kill Alarm Lock ($X)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$H')} disabled={!canClick}>{i18n._('Run Homing Cycle ($H)')}</MenuItem>
</DropdownButton>
</div>
</div>
<div className="row">
<div className="col col-xs-6">
{i18n._('Feed rate:')}
</div>
<div className="col col-xs-6">
{_.get(modes, 'feedrate')}
</div>
</div>
<div className="row">
<div className="col col-xs-6">
{i18n._('Spindle speed:')}
</div>
<div className="col col-xs-6">
{_.get(modes, 'spindle')}
</div>
</div>
<div className="row">
<div className="col col-xs-6">
{i18n._('Tool number:')}
</div>
<div className="col col-xs-6">
{_.get(modes, 'tool')}
</div>
</div>
<div className="row">
<div className="col col-xs-6">
{i18n._('Motion mode:')}
</div>
<div className="col col-xs-6">
{_.get(modes, 'modal.motion')}
</div>
</div>
<div className="row">
<div className="col col-xs-6">
{i18n._('Coordinate system select:')}
</div>
<div className="col col-xs-6">
{_.get(modes, 'modal.coordinate')}
</div>
<div className="btn-group btn-group-sm">
<button type="button"
className="btn btn-default"
onClick={() => serialport.write('~')}
disabled={!canClick}
>
<span className="code">~</span>&nbsp;{i18n._('Cycle Start')}
</button>
<button
type="button"
className="btn btn-default"
onClick={() => serialport.write('!')}
disabled={!canClick}
>
<span className="code">!</span>&nbsp;{i18n._('Feed Hold')}
</button>
<button
type="button"
className="btn btn-default"
onClick={() => serialport.write('\x18')}
disabled={!canClick}
>
<span className="code">Ctrl-X</span>&nbsp;{i18n._('Reset Grbl')}
</button>
<DropdownButton bsSize="sm" bsStyle="default" title="">
<MenuItem onSelect={() => serialport.writeln('$')} disabled={!canClick}>{i18n._('Grbl Help ($)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$$')} disabled={!canClick}>{i18n._('Grbl Settings ($$)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$#')} disabled={!canClick}>{i18n._('View G-code Parameters ($#)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$G')} disabled={!canClick}>{i18n._('View G-code Parser State ($G)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$I')} disabled={!canClick}>{i18n._('View Build Info ($I)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$N')} disabled={!canClick}>{i18n._('View Startup Blocks ($N)')}</MenuItem>
<MenuItem divider />
<MenuItem onSelect={() => serialport.writeln('$C')} disabled={!canClick}>{i18n._('Check G-code Mode ($C)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$X')} disabled={!canClick}>{i18n._('Kill Alarm Lock ($X)')}</MenuItem>
<MenuItem onSelect={() => serialport.writeln('$H')} disabled={!canClick}>{i18n._('Run Homing Cycle ($H)')}</MenuItem>
</DropdownButton>
</div>
<div className="row">
<div className="col col-xs-6">
{i18n._('Plane select:')}
<h6>{i18n._('Parser State')}</h6>
<div className="container-fluid">
<div className="row no-gutter">
<div className="col col-xs-3">
{i18n._('State')}
</div>
<div className="col col-xs-9">
<div className="well well-xs">{activeState}</div>
</div>
</div>
<div className="col col-xs-6">
{_.get(modes, 'modal.plane')}
<div className="row no-gutter">
<div className="col col-xs-3">
{i18n._('Feed Rate')}
</div>
<div className="col col-xs-3">
<div className="well well-xs">{_.get(modes, 'feedrate')}</div>
</div>
<div className="col col-xs-3">
{i18n._('Spindle')}
</div>
<div className="col col-xs-3">
<div className="well well-xs">{_.get(modes, 'spindle')}</div>
</div>
</div>
</div>
<div className="row">
<div className="col col-xs-6">
{i18n._('Distance mode:')}
</div>
<div className="col col-xs-6">
{_.get(modes, 'modal.distance')}
<div className="row no-gutter">
<div className="col col-xs-3">
{i18n._('Tool Number')}
</div>
<div className="col col-xs-3">
<div className="well well-xs">{_.get(modes, 'tool')}</div>
</div>
</div>
</div>
<div className="row">
<div className="col col-xs-6">
{i18n._('Feed rate mode:')}
<h6 className="modal-groups-header">
{i18n._('Modal Groups')}
</h6>
<div className="container-fluid">
<div className="row no-gutter">
<div className="col col-xs-3">
{i18n._('Motion')}
</div>
<div className="col col-xs-3">
<div className="well well-xs">{_.get(modes, 'modal.motion')}</div>
</div>
<div className="col col-xs-3">
{i18n._('WCS')}
</div>
<div className="col col-xs-3">
<div className="well well-xs">{_.get(modes, 'modal.coordinate')}</div>
</div>
</div>
<div className="col col-xs-6">
{_.get(modes, 'modal.feedrate')}
</div>
</div>
<div className="row">
<div className="col col-xs-6">
{i18n._('Units mode:')}
<div className="row no-gutter">
<div className="col col-xs-3">
{i18n._('Plane')}
</div>
<div className="col col-xs-3">
<div className="well well-xs">{_.get(modes, 'modal.plane')}</div>
</div>
<div className="col col-xs-3">
{i18n._('Distance')}
</div>
<div className="col col-xs-3">
<div className="well well-xs">{_.get(modes, 'modal.distance')}</div>
</div>
</div>
<div className="col col-xs-6">
{_.get(modes, 'modal.units')}
<div className="row no-gutter">
<div className="col col-xs-3">
{i18n._('Feed Rate')}
</div>
<div className="col col-xs-3">
<div className="well well-xs">{_.get(modes, 'modal.feedrate')}</div>
</div>
<div className="col col-xs-3">
{i18n._('Units')}
</div>
<div className="col col-xs-3">
<div className="well well-xs">{_.get(modes, 'modal.units')}</div>
</div>
</div>
</div>
<div className="row">
<div className="col col-xs-6">
{i18n._('Program mode:')}
</div>
<div className="col col-xs-6">
{_.get(modes, 'modal.program')}
</div>
</div>
<div className="row">
<div className="col col-xs-6">
{i18n._('Spindle state:')}
</div>
<div className="col col-xs-6">
{_.get(modes, 'modal.spindle')}
</div>
</div>
<div className="row">
<div className="col col-xs-6">
{i18n._('Coolant state:')}
<div className="row no-gutter">
<div className="col col-xs-3">
{i18n._('Program')}
</div>
<div className="col col-xs-3">
<div className="well well-xs">{_.get(modes, 'modal.program')}</div>
</div>
<div className="col col-xs-3">
{i18n._('Spindle')}
</div>
<div className="col col-xs-3">
<div className="well well-xs">{_.get(modes, 'modal.spindle')}</div>
</div>
</div>
<div className="col col-xs-6">
{_.get(modes, 'modal.coolant')}
<div className="row no-gutter">
<div className="col col-xs-3">
{i18n._('Coolant')}
</div>
<div className="col col-xs-3">
<div className="well well-xs">{_.get(modes, 'modal.coolant')}</div>
</div>
</div>
</div>
</div>
Expand Down
8 changes: 8 additions & 0 deletions web/components/widgets/grbl/constants.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// Grbl Active State
export const ACTIVE_STATE_IDLE = 'Idle';
export const ACTIVE_STATE_RUN = 'Run';
export const ACTIVE_STATE_HOLD = 'Hold';
export const ACTIVE_STATE_DOOR = 'Door';
export const ACTIVE_STATE_HOME = 'Home';
export const ACTIVE_STATE_ALARM = 'Alarm';
export const ACTIVE_STATE_CHECK = 'Check';
28 changes: 28 additions & 0 deletions web/components/widgets/grbl/index.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,33 @@
.widget-content {
position: relative;
padding: 10px;

.code {
background-color: #e6e6e6;
padding: 2px;
}
button:hover {
.code {
background-color: #ccc;
}
}

.row {
margin-bottom: 5px;
}

[class*="col-"]:nth-child(odd) {
padding-left: 10px;
}
[class*="col-"]:first-child {
padding-left: 0;
}

.well-xs {
padding: 0 5px;
border-radius: 3px;
margin-bottom: 0;
line-height: 18px;
}
}
}

0 comments on commit 583c751

Please sign in to comment.