Add download g-code button

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 {
         <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>

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,13 +143,19 @@ 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' });
+  switch (target) {
-  // fileSaver.saveAs(blob);
+    case 'DOWNLOAD': {
+      const blob = new File([gcode], `${name}.gcode`, { type: 'text/plain;charset=utf-8' });
+      fileSaver.saveAs(blob);
+      break;
+    }
 
+    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());
@@ -167,12 +187,18 @@ export async function slice(name, mesh, settings, printers, quality, material, u
       await fetchProgress(reservation.url, { method: 'POST', body }, (progess) => {
         updateProgress({
           action: 'Uploading',
-      uploading: progess.loaded / progess.total
+          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 }) => {