From 246522ee5fa15f7fe3d7dcce9212cbd01499af21 Mon Sep 17 00:00:00 2001 From: casperlamboo Date: Sun, 24 Dec 2017 17:18:33 +0100 Subject: [PATCH] Add download g-code button --- src/interface/index.js | 52 ++++++++++++++++++--- src/interface/utils.js | 104 +++++++++++++++++++++++++---------------- 2 files changed, 111 insertions(+), 45 deletions(-) diff --git a/src/interface/index.js b/src/interface/index.js index 873e13d..6fc92c9 100644 --- a/src/interface/index.js +++ b/src/interface/index.js @@ -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 {
{error &&

{error}

} {isSlicing &&

{progress.action}

} - {isSlicing && } + {isSlicing && }
{onCancel && } + + + this.slice('WIFI')} /> + this.slice('DOWNLOAD')} /> + +
diff --git a/src/interface/utils.js b/src/interface/utils.js index 4530e1f..492d26b 100644 --- a/src/interface/utils.js +++ b/src/interface/utils.js @@ -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 }) => {