make settings editable

2017-11-13 02:09:39 +01:00 · 2017-11-13 02:09:39 +01:00 · 6cd899f32b
parent c1117a8ce5
commit 6cd899f32b
6 changed files with 251 additions and 63 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -2985,8 +2985,7 @@
    "lodash": {
      "version": "4.17.4",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-      "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
-      "dev": true
+      "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
    },
    "lodash.merge": {
      "version": "4.6.0",
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
  },
  "dependencies": {
    "@doodle3d/clipper-js": "^1.0.7",
+    "lodash": "^4.17.4",
    "material-ui": "^0.19.4",
    "proptypes": "^1.1.0",
    "react": "^16.1.0",
--- a/src/interface/FormComponents.js
+++ b/src/interface/FormComponents.js
@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import _ from 'lodash';
+import injectSheet from 'react-jss';
+import MaterialUISelectField from 'material-ui/SelectField'
+import MaterialUICheckbox from 'material-ui/Checkbox';
+import MaterialUITextField from 'material-ui/TextField';
+import { grey100, grey300, grey500 } from 'material-ui/styles/colors';
+
+const styles = {
+  fieldSet: {
+    border: 'none',
+    backgroundColor: grey100,
+    marginTop: '20px',
+    '& legend': {
+      border: `1px solid ${grey300}`,
+      backgroundColor: 'white',
+      padding: '3px 13px',
+      color: grey500
+    }
+  }
+};
+export const SettingsGroup = injectSheet(styles)(({ name, classes, children }) => (
+  <fieldset className={classes.fieldSet}>
+    <legend>{name}</legend>
+    {children}
+  </fieldset>
+));
+SettingsGroup.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
+  name: PropTypes.string.isRequired,
+  children: PropTypes.node
+};
+
+export const SelectField = (props, context) => (
+  <MaterialUISelectField
+    { ...props }
+    value={context.state[props.name]}
+    onChange={(event, index, value) => props.onChange(props.name, value)}
+  />
+);
+SelectField.contextTypes = { state: PropTypes.object };
+
+export const TextField = (props, context) => (
+  <MaterialUITextField
+    { ...props }
+    value={_.get(context.state, props.name)}
+    onChange={(event, value) => props.onChange(props.name, value)}
+  />
+);
+TextField.contextTypes = { state: PropTypes.object };
+
+export const Checkbox = (props, context) => (
+  <MaterialUICheckbox
+    { ...props }
+    checked={_.get(context.state, props.name)}
+    onCheck={(event, value) => props.onChange(props.name, value)}
+  />
+);
+Checkbox.contextTypes = { state: PropTypes.object };
--- a/src/interface/Settings.js
+++ b/src/interface/Settings.js
@ -0,0 +1,175 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import _ from 'lodash';
+import baseSettings from '../settings/default.yml';
+import printerSettings from '../settings/printer.yml';
+import materialSettings from '../settings/material.yml';
+import qualitySettings from '../settings/quality.yml';
+import { Tabs, Tab } from 'material-ui/Tabs';
+import MenuItem from 'material-ui/MenuItem';
+import injectSheet from 'react-jss';
+import { SettingsGroup, SelectField, TextField, Checkbox } from './FormComponents.js';
+import { grey500 } from 'material-ui/styles/colors';
+
+const styles = {
+  textFieldRow: {
+    display: 'flex'
+  },
+  content: {
+    maxHeight: '300px',
+    overflowY: 'scroll'
+  }
+};
+
+const DEFAULT_PRINTER = 'ultimaker2';
+const DEFAULT_MATERIAL = 'pla';
+const DEFAULT_QUALITY = 'medium';
+
+const DEFAULT_SETTINGS = {
+  'printer': printerSettings,
+  'quality': qualitySettings,
+  'material': materialSettings
+};
+
+class Settings extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      settings: {
+        ...baseSettings,
+        ...printerSettings[DEFAULT_PRINTER],
+        ...qualitySettings[DEFAULT_MATERIAL],
+        ...materialSettings[DEFAULT_MATERIAL],
+        title: null
+      },
+      printer: DEFAULT_PRINTER,
+      quality: DEFAULT_QUALITY,
+      material: DEFAULT_MATERIAL
+    };
+  }
+
+  changeSettings = (fieldName, value) => {
+    switch (fieldName) {
+      case 'printer':
+      case 'quality':
+      case 'material':
+        this.setState({
+          [fieldName]: value,
+          settings: {
+            ...this.state.settings,
+            ...DEFAULT_SETTINGS[fieldName][value],
+            title: null
+          }
+        });
+        break;
+
+      default:
+        this.setState(_.set(this.state, fieldName, value));
+        break;
+    }
+  };
+
+  getChildContext() {
+    return { state: this.state };
+  }
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <Tabs>
+        <Tab label="basic settings">
+          <div className={classes.content}>
+            <SelectField name="printer" floatingLabelText="Printer" fullWidth onChange={this.changeSettings}>
+              {Object.entries(printerSettings).map(([value, { title }]) => (
+                <MenuItem key={value} value={value} primaryText={title} />
+              ))}
+            </SelectField>
+            <SelectField name="quality" floatingLabelText="Quality" fullWidth onChange={this.changeSettings}>
+              {Object.entries(qualitySettings).map(([value, { title }]) => (
+                <MenuItem key={value} value={value} primaryText={title} />
+              ))}
+            </SelectField>
+            <SelectField name="material" floatingLabelText="Material" fullWidth onChange={this.changeSettings}>
+              {Object.entries(materialSettings).map(([value, { title }]) => (
+                <MenuItem key={value} value={value} primaryText={title} />
+              ))}
+            </SelectField>
+          </div>
+        </Tab>
+        <Tab label="advanced settings">
+          <div className={classes.content}>
+            <SettingsGroup name="Printer dimensions">
+              <div className={classes.textFieldRow}>
+                <TextField name="settings.dimensions.x" fullWidth floatingLabelText="X" type="number" onChange={this.changeSettings} />
+                <TextField name="settings.dimensions.y" fullWidth floatingLabelText="Y" type="number" onChange={this.changeSettings} />
+                <TextField name="settings.dimensions.z" fullWidth floatingLabelText="Z" type="number" onChange={this.changeSettings} />
+              </div>
+            </SettingsGroup>
+            <SettingsGroup name="Nozzle">
+              <TextField name="settings.nozzleDiameter" fullWidth floatingLabelText="Diameter" type="number" onChange={this.changeSettings} />
+            </SettingsGroup>
+            <SettingsGroup name="Bed">
+              <TextField name="settings.bedTemperature" fullWidth floatingLabelText="Temperature" type="number" onChange={this.changeSettings} />
+              <Checkbox name="settings.heatedBed" label="Heated" onChange={this.changeSettings} />
+            </SettingsGroup>
+            <SettingsGroup name="Material">
+              <TextField name="settings.filamentThickness" fullWidth floatingLabelText="Thickness" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.temperature" fullWidth floatingLabelText="Temperature" type="number" onChange={this.changeSettings} />
+            </SettingsGroup>
+            <SettingsGroup name="Thickness">
+              <TextField name="settings.thickness.top" fullWidth floatingLabelText="top" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.thickness.bottom" fullWidth floatingLabelText="bottom" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.thickness.shell" fullWidth floatingLabelText="shell" type="number" onChange={this.changeSettings} />
+            </SettingsGroup>
+            <SettingsGroup name="Retraction">
+              <Checkbox name="settings.retraction.enabled" label="Enabled" onChange={this.changeSettings} />
+              <TextField name="settings.retraction.amount" fullWidth floatingLabelText="Amount" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.retraction.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.retraction.minDistance" fullWidth floatingLabelText="Min distance" type="number" onChange={this.changeSettings} />
+            </SettingsGroup>
+            <SettingsGroup name="Travel">
+              <TextField name="settings.travel.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
+              <Checkbox name="settings.combing" label="Combing" />
+            </SettingsGroup>
+            <SettingsGroup name="Inner shell">
+              <TextField name="settings.innerShell.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.innerShell.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} />
+            </SettingsGroup>
+            <SettingsGroup name="Outer shell">
+              <TextField name="settings.outerShell.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.outerShell.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} />
+            </SettingsGroup>
+            <SettingsGroup name="Inner infill">
+              <TextField name="settings.innerInfill.gridSize" fullWidth floatingLabelText="Grid size" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.innerInfill.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.innerInfill.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} />
+            </SettingsGroup>
+            <SettingsGroup name="Outer infill">
+              <TextField name="settings.outerInfill.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.outerInfill.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} />
+            </SettingsGroup>
+            <SettingsGroup name="Brim">
+              <TextField name="settings.brim.offset" fullWidth floatingLabelText="Offset" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.brim.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.brim.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} />
+            </SettingsGroup>
+            <SettingsGroup name="First layer">
+              <TextField name="settings.firstLayer.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.firstLayer.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} />
+            </SettingsGroup>
+          </div>
+        </Tab>
+      </Tabs>
+    );
+  }
+}
+Settings.childContextTypes = {
+  state: PropTypes.object
+};
+Settings.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
+  onChange: PropTypes.func
+};
+
+export default injectSheet(styles)(Settings);
--- a/src/interface/index.js
+++ b/src/interface/index.js
@ -1,20 +1,15 @@
 import React from 'react';
 import * as THREE from 'three';
-import { placeOnGround, createScene, createGcodeGeometry } from './utils.js';
-import baseSettings from '../settings/default.yml';
-import printerSettings from '../settings/printer.yml';
-import materialSettings from '../settings/material.yml';
-import qualitySettings from '../settings/quality.yml';
 import PropTypes from 'proptypes';
+import { placeOnGround, createScene, createGcodeGeometry } from './utils.js';
 import injectSheet from 'react-jss';
 import { sliceGeometry } from '../slicer.js';
 import RaisedButton from 'material-ui/RaisedButton';
 import Paper from 'material-ui/Paper';
 import Slider from 'material-ui/Slider';
-import { Tabs, Tab } from 'material-ui/Tabs';
-import SelectField from 'material-ui/SelectField'
-import MenuItem from 'material-ui/MenuItem';
 import { grey50 } from 'material-ui/styles/colors';
+import Settings from './Settings.js';
+import baseSettings from '../settings/default.yml';

 const styles = {
  container: {
@ -59,12 +54,10 @@ class Interface extends React.Component {
    this.state = {
      controlMode: 'translate',
      isSlicing: false,
-      sliced: false,
-      printer: props.defaultPrinter
+      sliced: false
    };
  }

-
  componentDidMount() {
    const { canvas } = this.refs;
    const scene = createScene(canvas, this.props, this.state);
@ -97,14 +90,9 @@ class Interface extends React.Component {
  };

  slice = async () => {
-    const { mesh, render, scene, control, printer } = this.state;
-    const settings = {
-      ...baseSettings,
-      ...materialSettings.pla,
-      ...printerSettings[printer]
-    };
+    const { mesh, render, scene, control } = this.state;

-    const { dimensions } = settings;
+    const { dimensions } = baseSettings;
    const centerX = dimensions.x / 2;
    const centerY = dimensions.y / 2;

@ -114,7 +102,7 @@ class Interface extends React.Component {
    this.setState({ isSlicing: true, progress: { actions: [], percentage: 0 } });

    const matrix = new THREE.Matrix4().makeTranslation(centerY, 0, centerX).multiply(mesh.matrix);
-    const gcode = await sliceGeometry(settings, geometry, matrix, false, true, ({ progress }) => {
+    const gcode = await sliceGeometry(baseSettings, geometry, matrix, false, true, ({ progress }) => {
      this.setState({ progress: {
        actions: [...this.state.progress.actions, progress.action],
        percentage: progress.done / progress.total
@ -155,7 +143,7 @@ class Interface extends React.Component {

  render() {
    const { width, height, classes, onCompleteActions, printers, materials, quality } = this.props;
-    const { sliced, isSlicing, progress, gcode, controlMode, printer } = this.state;
+    const { sliced, isSlicing, progress, gcode, controlMode } = this.state;

    return (
      <div style={{ width, height }} className={classes.container}>
@ -178,31 +166,7 @@ class Interface extends React.Component {
          />
        </div>}
        {!sliced && <Paper className={classes.sliceBar}>
-          <Tabs>
-            <Tab label="basic settings">
-              <div>
-                <SelectField name="printer" value={printer} floatingLabelText="Printer" fullWidth>
-                  {Object.entries(printers).map(([value, { title }]) => (
-                    <MenuItem key={value} value={value} primaryText={title} />
-                  ))}
-                </SelectField>
-                <SelectField value="medium" floatingLabelText="Quality" fullWidth>
-                  {Object.entries(quality).map(([value, { title }]) => (
-                    <MenuItem key={value} value={value} primaryText={title} />
-                  ))}
-                </SelectField>
-                <SelectField value="pla" floatingLabelText="Material" fullWidth>
-                  {Object.entries(materials).map(([value, { title }]) => (
-                    <MenuItem key={value} value={value} primaryText={title} />
-                  ))}
-                </SelectField>
-              </div>
-            </Tab>
-            <Tab label="advanced settings">
-              <div>
-              </div>
-            </Tab>
-          </Tabs>
+          <Settings printers={printers} />
          <RaisedButton className={classes.button} fullWidth disabled={isSlicing} onTouchTap={this.slice} primary label="slice" />
        </Paper>}
        {sliced && <Paper className={classes.sliceBar}>
@ -223,13 +187,7 @@ class Interface extends React.Component {
 }
 Interface.defaultProps = {
  width: 720,
-  height: 480,
-  printers: printerSettings,
-  defaultPrinter: 'ultimaker2',
-  quality: qualitySettings,
-  defaultQuality: 'medium',
-  materials: materialSettings,
-  defaultMaterial: 'pla',
+  height: 480
 };
 Interface.propTypes = {
  geometry(props, propName) {
@ -240,12 +198,6 @@ Interface.propTypes = {
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  classes: PropTypes.objectOf(PropTypes.string),
-  printers: PropTypes.object.isRequired,
-  defaultPrinter: PropTypes.string.isRequired,
-  quality: PropTypes.object.isRequired,
-  defaultQuality: PropTypes.string.isRequired,
-  materials: PropTypes.object.isRequired,
-  defaultMaterial: PropTypes.string.isRequired,
  onCompleteActions: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string, callback: PropTypes.func })).isRequired,
 };

--- a/src/interface/utils.js
+++ b/src/interface/utils.js
@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import 'three/examples/js/controls/EditorControls';
 import 'three/examples/js/controls/TransformControls';
+import printerSettings from '../settings/printer.yml';

 export function placeOnGround(mesh) {
  const boundingBox = new THREE.Box3().setFromObject(mesh);
@ -10,8 +11,8 @@ export function placeOnGround(mesh) {
 }

 export function createScene(canvas, props, state) {
-  const { width, height, printers, geometry } = props;
-  const { controlMode, printer } = state;
+  const { width, height, geometry } = props;
+  const { controlMode } = state;

  // center geometry
  geometry.computeBoundingBox();
@ -68,7 +69,7 @@ export function createScene(canvas, props, state) {
  box.material.color.setHex(0x72bcd4);
  scene.add(box);

-  const { dimensions } = printers[printer];
+  const { dimensions } = printerSettings['ultimaker2'];
  box.scale.set(dimensions.y, dimensions.z, dimensions.x);

  render();