add download code

This commit is contained in:
casperlamboo 2017-11-12 01:15:38 +01:00
parent 3b4df148ed
commit ccc676ebd1
3 changed files with 19 additions and 6 deletions

View File

@ -3,9 +3,17 @@ import * as THREE from 'three';
import { Interface } from 'doodle3d-slicer'; import { Interface } from 'doodle3d-slicer';
import fileURL from '!url-loader!./models/shape.json'; import fileURL from '!url-loader!./models/shape.json';
import { render } from 'react-dom'; import { render } from 'react-dom';
// import fileSaver from 'file-saver'; import fileSaver from 'file-saver';
const downloadGCode = gcode => {
const file = new File([gcode], 'gcode.gcode', { type: 'text/plain' });
fileSaver.saveAs(file);
};
const jsonLoader = new THREE.JSONLoader(); const jsonLoader = new THREE.JSONLoader();
jsonLoader.load(fileURL, geometry => { jsonLoader.load(fileURL, geometry => {
render(<Interface geometry={geometry} />, document.getElementById('app')); render(<Interface
geometry={geometry}
onCompleteActions={[{ title: 'Download', callback: downloadGCode }]}
/>, document.getElementById('app'));
}); });

View File

@ -46,6 +46,7 @@ class Interface extends React.Component {
classes: PropTypes.objectOf(PropTypes.string), classes: PropTypes.objectOf(PropTypes.string),
printers: PropTypes.object.isRequired, printers: PropTypes.object.isRequired,
defaultPrinter: PropTypes.string.isRequired, defaultPrinter: PropTypes.string.isRequired,
onCompleteActions: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string, callback: PropTypes.func })).isRequired,
}; };
state = { state = {
controlMode: 'translate', controlMode: 'translate',
@ -126,8 +127,9 @@ class Interface extends React.Component {
} }
render() { render() {
const { width, height, classes } = this.props; const { width, height, classes, onCompleteActions } = this.props;
const { sliced } = this.state; const { sliced, gcode } = this.state;
return ( return (
<div style={{ width, height }} className={classes.container}> <div style={{ width, height }} className={classes.container}>
<canvas className={classes.canvas} ref="canvas" width={width} height={height} /> <canvas className={classes.canvas} ref="canvas" width={width} height={height} />
@ -142,7 +144,9 @@ class Interface extends React.Component {
</div>} </div>}
{sliced && <div className={classes.sliceBar}> {sliced && <div className={classes.sliceBar}>
<button onClick={this.reset}>Slice Again</button> <button onClick={this.reset}>Slice Again</button>
<button>Download</button> {onCompleteActions.map(({ title, callback }, i) => (
<button key={i} onClick={() => callback(gcode.gcode)}>{title}</button>
))}
</div>} </div>}
</div> </div>
); );

View File

@ -96,7 +96,7 @@ function gcodeToString(gcode) {
const value = command[action]; const value = command[action];
const currentValue = currentValues[action]; const currentValue = currentValues[action];
if (first) { if (first) {
string = action + value; string += action + value;
first = false; first = false;
} else if (currentValue !== value) { } else if (currentValue !== value) {
string += ` ${action}${value}`; string += ` ${action}${value}`;
@ -104,6 +104,7 @@ function gcodeToString(gcode) {
} }
} }
string += '\n'; string += '\n';
return string;
}, ''); }, '');
} }