add slice logging

This commit is contained in:
casperlamboo 2017-11-12 12:34:50 +01:00
parent 245e1b705a
commit 16158a3e3c

View File

@ -25,6 +25,18 @@ const styles = {
position: 'absolute', position: 'absolute',
top: 0, top: 0,
right: 0 right: 0
},
overlay: {
position: 'absolute',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
color: 'white',
top: 0,
right: 0,
bottom: 0,
left: 0
},
sliceActions: {
listStyleType: 'none'
} }
}; };
@ -50,6 +62,7 @@ class Interface extends React.Component {
}; };
state = { state = {
controlMode: 'translate', controlMode: 'translate',
isSlicing: false,
sliced: false sliced: false
}; };
@ -106,11 +119,18 @@ class Interface extends React.Component {
const geometry = mesh.geometry.clone(); const geometry = mesh.geometry.clone();
mesh.updateMatrix(); mesh.updateMatrix();
this.setState({ isSlicing: true, progress: { actions: [], percentage: 0 } });
const matrix = new THREE.Matrix4().makeTranslation(centerY, 0, centerX).multiply(mesh.matrix); const matrix = new THREE.Matrix4().makeTranslation(centerY, 0, centerX).multiply(mesh.matrix);
const gcode = await sliceGeometry(settings, geometry, matrix, false, true, (process) => { const gcode = await sliceGeometry(settings, geometry, matrix, false, true, ({ progress }) => {
console.log('process: ', process); this.setState({ progress: {
actions: [...this.state.progress.actions, progress.action],
percentage: progress.done / progress.total
} });
}); });
this.setState({ isSlicing: false });
// TODO // TODO
// can't disable control ui still interacts with mouse input // can't disable control ui still interacts with mouse input
control.visible = false; control.visible = false;
@ -142,7 +162,7 @@ class Interface extends React.Component {
render() { render() {
const { width, height, classes, onCompleteActions } = this.props; const { width, height, classes, onCompleteActions } = this.props;
const { sliced, gcode } = this.state; const { sliced, isSlicing, progress, gcode } = this.state;
return ( return (
<div style={{ width, height }} className={classes.container}> <div style={{ width, height }} className={classes.container}>
@ -172,6 +192,12 @@ class Interface extends React.Component {
<button key={i} onClick={() => callback(gcode.gcode)}>{title}</button> <button key={i} onClick={() => callback(gcode.gcode)}>{title}</button>
))} ))}
</div>} </div>}
{isSlicing && <div className={classes.overlay}>
<p>Slicing: {progress.percentage.toLocaleString(navigator.language, { style: 'percent' })}</p>
<ul className={classes.sliceActions}>
{progress.actions.map((action, i) => <li key={i}>{action}</li>)}
</ul>
</div>}
</div> </div>
); );
} }