Add download g-code button

This commit is contained in:
casperlamboo 2017-12-24 17:18:33 +01:00
parent c1cbe4f280
commit 246522ee5f
2 changed files with 111 additions and 45 deletions

View File

@ -11,6 +11,9 @@ import FlatButton from 'material-ui/FlatButton';
import Slider from 'material-ui/Slider';
import LinearProgress from 'material-ui/LinearProgress';
import { grey50, grey300, grey800, red500 } from 'material-ui/styles/colors';
import Popover from 'material-ui/Popover/Popover';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import { Tabs, Tab } from 'material-ui/Tabs';
import Settings from './Settings.js';
import defaultSettings from '../settings/default.yml';
@ -114,6 +117,10 @@ class Interface extends React.Component {
printers: defaultPrinter,
quality: defaultQuality,
material: defaultMaterial,
popover: {
element: null,
open: false
},
settings: _.merge(
{},
defaultSettings,
@ -177,19 +184,21 @@ class Interface extends React.Component {
}
};
slice = async () => {
slice = async (target) => {
const { isSlicing, settings, printers, quality, material, mesh: { matrix } } = this.state;
const { name, mesh } = this.props;
if (isSlicing) return;
this.setState({ isSlicing: true, progress: { action: '', slicing: 0, uploading: 0 }, error: null });
this.closePopover();
this.setState({ isSlicing: true, progress: { action: '', percentage: 0, step: 0 }, error: null });
const exportMesh = new Mesh(mesh.geometry, mesh.material);
exportMesh.applyMatrix(matrix);
try {
await slice(name, exportMesh, settings, printers, quality, material, progress => {
await slice(target, name, exportMesh, settings, printers, quality, material, progress => {
this.setState({ progress: { ...this.state.progress, ...progress } });
});
} catch (error) {
@ -200,6 +209,25 @@ class Interface extends React.Component {
}
};
openPopover = (event) => {
event.preventDefault();
this.setState({
popover: {
element: event.currentTarget,
open: true
}
});
};
closePopover = () => {
this.setState({
popover: {
element: null,
open: false
}
});
};
onChangeSettings = (settings) => {
this.setState(settings);
};
@ -238,7 +266,6 @@ class Interface extends React.Component {
const { classes, defaultPrinter, defaultQuality, defaultMaterial, onCancel } = this.props;
const { isSlicing, progress, settings, printers, quality, material, showFullScreen, error } = this.state;
const percentage = progress ? (progress.uploading + progress.slicing) / 2.0 * 100.0 : 0.0;
const style = { ...(showFullScreen ? {} : { maxWidth: 'inherit', width: '100%', height: '100%' }) };
const settingsPanel = (
@ -257,7 +284,7 @@ class Interface extends React.Component {
<div className={classes.sliceActions}>
{error && <p className={classes.error}>{error}</p>}
{isSlicing && <p>{progress.action}</p>}
{isSlicing && <LinearProgress mode="determinate" value={percentage} />}
{isSlicing && <LinearProgress mode="determinate" value={progress.percentage * 100.0} />}
<div className={classes.sliceButtons}>
{onCancel && <RaisedButton
label="Cancel"
@ -266,11 +293,24 @@ class Interface extends React.Component {
/>}
<RaisedButton
label="Print"
ref="button"
primary
className={`${classes.button}`}
onTouchTap={this.slice}
onTouchTap={this.openPopover}
disabled={isSlicing}
/>
<Popover
open={this.state.popover.open}
anchorEl={this.state.popover.element}
anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
targetOrigin={{horizontal: 'left', vertical: 'bottom'}}
onRequestClose={this.closePopover}
>
<Menu>
<MenuItem primaryText="Send over WiFi" onTouchTap={() => this.slice('WIFI')} />
<MenuItem primaryText="Download GCode" onTouchTap={() => this.slice('DOWNLOAD')} />
</Menu>
</Popover>
</div>
</div>
</div>

View File

@ -118,9 +118,23 @@ export function fetchProgress(url, { method = 'get', headers = {}, body = {} } =
const GCODE_SERVER_URL = 'https://gcodeserver.doodle3d.com';
const CONNECT_URL = 'http://connect.doodle3d.com/';
export async function slice(name, mesh, settings, printers, quality, material, updateProgress) {
export async function slice(target, name, mesh, settings, printers, quality, material, updateProgress) {
if (!printers) throw new Error('Please select a printer');
let steps;
let currentStep = 0;
switch (target) {
case 'DOWNLOAD':
steps = 1;
break;
case 'WIFI':
steps = 2;
break;
default:
steps = 1;
break;
}
const { dimensions } = settings;
const centerX = dimensions.x / 2;
const centerY = dimensions.y / 2;
@ -129,50 +143,62 @@ export async function slice(name, mesh, settings, printers, quality, material, u
const { gcode } = await sliceGeometry(settings, mesh.geometry, mesh.material, matrix, false, false, ({ progress }) => {
updateProgress({
action: progress.action,
slicing: progress.done / progress.total
percentage: currentStep / steps + progress.done / progress.total / steps
});
});
currentStep ++;
// const blob = new File([gcode], `${name}.gcode`, { type: 'text/plain;charset=utf-8' });
// fileSaver.saveAs(blob);
// upload G-code file to AWS S3
const { data: { reservation, id } } = await fetch(`${GCODE_SERVER_URL}/upload`, { method: 'POST' })
.then(response => response.json());
const body = new FormData();
const { fields } = reservation;
for (const key in fields) {
body.append(key, fields[key]);
}
const file = ';' + JSON.stringify({
name: `${name}.gcode`,
...settings,
printer: {
type: printers,
title: printerSettings[printers].title
},
material: {
type: material,
title: materialSettings[material].title
},
quality: {
type: quality,
title: qualitySettings[quality].title
switch (target) {
case 'DOWNLOAD': {
const blob = new File([gcode], `${name}.gcode`, { type: 'text/plain;charset=utf-8' });
fileSaver.saveAs(blob);
break;
}
}).trim() + '\n' + gcode;
body.append('file', file);
await fetchProgress(reservation.url, { method: 'POST', body }, (progess) => {
updateProgress({
action: 'Uploading',
uploading: progess.loaded / progess.total
});
});
case 'WIFI': {
// upload G-code file to AWS S3
const { data: { reservation, id } } = await fetch(`${GCODE_SERVER_URL}/upload`, { method: 'POST' })
.then(response => response.json());
const popup = window.open(`${CONNECT_URL}?uuid=${id}`, '_blank');
if (!popup) throw new Error('popup was blocked by browser');
const body = new FormData();
const { fields } = reservation;
for (const key in fields) {
body.append(key, fields[key]);
}
const file = ';' + JSON.stringify({
name: `${name}.gcode`,
...settings,
printer: {
type: printers,
title: printerSettings[printers].title
},
material: {
type: material,
title: materialSettings[material].title
},
quality: {
type: quality,
title: qualitySettings[quality].title
}
}).trim() + '\n' + gcode;
body.append('file', file);
await fetchProgress(reservation.url, { method: 'POST', body }, (progess) => {
updateProgress({
action: 'Uploading',
percentage: currentStep / steps + progess.loaded / progess.total / steps
});
});
currentStep ++;
const popup = window.open(`${CONNECT_URL}?uuid=${id}`, '_blank');
if (!popup) throw new Error('popup was blocked by browser');
}
default:
break;
}
}
export const TabTemplate = ({ children, selected, style }) => {