add ip in settings config for the doodle3d printer

2024-12-22 19:13:50 +01:00 · 2018-01-23 12:19:43 +01:00 · 2018-01-23 12:19:43 +01:00 · d5ea670967
commit d5ea670967
parent 4dc5e4849e
4 changed files with 174 additions and 26 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -54,8 +54,8 @@
        "react-notification-system-redux": "1.2.0",
        "react-redux": "5.0.6",
        "react-resize-detector": "1.1.0",
-        "react-svg-inline": "2.0.1",
-        "redux-form": "7.2.0",
+        "react-svg-inline": "2.1.0",
+        "redux-form": "7.2.1",
        "redux-undo": "1.0.0-beta9-9-7",
        "reselect": "3.0.1",
        "semver": "5.4.1",
@ -6942,9 +6942,9 @@
      }
    },
    "react-svg-inline": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/react-svg-inline/-/react-svg-inline-2.0.1.tgz",
-      "integrity": "sha512-9YVqJ80g1gPWAvD9CS/z4cKPD45ZSMjjzwxFAmQJiMEoAo1Ajhz92WirXag3ftltDN5lPNkVWx/KOnEWB/PaMQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-svg-inline/-/react-svg-inline-2.1.0.tgz",
+      "integrity": "sha512-GzRID5IcEQ8dnnaUtTb9MDTAbhuaOiVKKAVLgrCNuehHsg3DuZbe82bjc9JhmPv0zsDWhDrJwzADNgzEvE6VeQ==",
      "requires": {
        "classnames": "2.2.5",
        "prop-types": "15.6.0"
@ -7058,9 +7058,9 @@
      }
    },
    "redux-form": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/redux-form/-/redux-form-7.2.0.tgz",
-      "integrity": "sha512-qbgeI19drwnm9FeGAotDA1vsZO8q94XF7IxPDuJmSXxDYX2rqzhND6NROahCBJfBK5xM1cchvmgscO2rry1EEw==",
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/redux-form/-/redux-form-7.2.1.tgz",
+      "integrity": "sha512-KWV+rq+L1QGoRSKoJXbGS8Mw2q4ta5FVyGxW5ZYnAEjXZAukvUCkqDUzobBmOqiRHvrZ3/ssEA7kJFdu7rV8+w==",
      "requires": {
        "deep-equal": "1.0.1",
        "es6-error": "4.1.1",
@ -8271,6 +8271,11 @@
      "resolved": "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz",
      "integrity": "sha1-HBRHm0DxOXp1eC8RXkCGRHQzogA="
    },
+    "validate-ip": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/validate-ip/-/validate-ip-1.0.1.tgz",
+      "integrity": "sha1-615PY+HRq8buRuGK4gaXv1vtBto="
+    },
    "validate-npm-package-license": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz",
--- a/package.json
+++ b/package.json
@ -33,6 +33,7 @@
    "react-resize-detector": "^1.1.0",
    "shortid": "^2.2.8",
    "three": "^0.88.0",
+    "validate-ip": "^1.0.1",
    "webpack-bundle-analyzer": "^2.9.2"
  },
  "devDependencies": {
--- a/src/interface/Settings.js
+++ b/src/interface/Settings.js
@ -18,6 +18,7 @@ import materialSettings from '../settings/material.yml';
 import qualitySettings from '../settings/quality.yml';
 import update from 'react-addons-update';
 import SettingsIcon from 'material-ui-icons/Settings';
+import validateIp from 'validate-ip';

 const styles = {
  textFieldRow: {
@ -79,6 +80,7 @@ class Settings extends React.Component {
      open: false,
      name: '',
      printer: '',
+      ip: '',
      error: null
    },
    managePrinter: {
@ -102,25 +104,22 @@ class Settings extends React.Component {

    let state = _.cloneDeep(this.state);

-    const removeAddPrinterError = () => {
-      state = update(state, { addPrinter: { error: { $set: null } } });
-    };
-
    switch (fieldName) {
      case 'managePrinter.printer':
      case 'managePrinter.name':
+      case 'managePrinter.ip':
        state = _.set(state, fieldName, value);
+        state = update(state, { managePrinter: { error: { $set: null } } });
        break;

      case 'addPrinter.printer':
-        state = update(state, { addPrinter: { printer: { $set: value } } });
-        state = update(state, { addPrinter: { name: { $set: printerSettings[value].title } } });
-        removeAddPrinterError();
-        break;
-
      case 'addPrinter.name':
-        state = update(state, { addPrinter: { name: { $set: value } } });
-        removeAddPrinterError();
+      case 'addPrinter.ip':
+        state = _.set(state, fieldName, value);
+        if (fieldName === 'addPrinter.printer') {
+          state = update(state, { addPrinter: { name: { $set: printerSettings[value].title } } });
+        }
+        state = update(state, { addPrinter: { error: { $set: null } } });
        break;

      case 'activePrinter':
@ -204,12 +203,13 @@ class Settings extends React.Component {
  constructSettings(localStorage) {
    if (!localStorage.active) return defaultSettings;

-    const { printer, material, quality, advanced } = localStorage.printers[localStorage.active].settings;
+    const { ip, settings: { printer, material, quality, advanced } } = localStorage.printers[localStorage.active];
    let settings = {
      ...defaultSettings,
      printer,
      material,
      quality
+      ip
    };

    settings = _.merge({}, settings, printerSettings[printer]);
@ -225,10 +225,14 @@ class Settings extends React.Component {
  }

  addPrinter = () => {
-    const { name, printer } = this.state.addPrinter;
+    const { name, printer, ip } = this.state.addPrinter;

    if (!name || !printer) {
-      this.setState({ addPrinter: { ...this.state.addPrinter, error: 'Please enter a name and printer' } });
+      this.setState(update(this.state, { addPrinter: { error: { $set: 'Please enter a name and printer' } } }));
+      return;
+    }
+    if (printer === 'doodle3d_printer' && !validateIp(ip)) {
+      this.setState(update(this.state, { addPrinter: { error: { $set: 'Please enter a valid IP adress' } } }));
      return;
    }

@ -237,7 +241,7 @@ class Settings extends React.Component {
      active: id,
      printers: {
        ...this.state.localStorage.printers,
-        [id]: { name, settings: { printer, material: 'pla', quality: 'medium', advanced: {} } }
+        [id]: { name, ip, settings: { printer, material: 'pla', quality: 'medium', advanced: {} } }
      }
    };
    this.setState({ localStorage });
@ -250,11 +254,22 @@ class Settings extends React.Component {
  };

  editPrinter = () => {
-    const { localStorage: { active, printers }, managePrinter: { printer, name } } = this.state;
+    const { localStorage: { active, printers }, managePrinter: { printer, name, ip } } = this.state;
+
+    if (!name) {
+      this.setState(update(this.state, { managePrinter: { error: { $set: 'Please enter a name' } } }));
+      return;
+    }
+    if (printer === 'doodle3d_printer' && !validateIp(ip)) {
+      this.setState(update(this.state, { managePrinter: { error: { $set: 'Please enter a valid IP adress' } } }));
+      return;
+    }
+
    const localStorage = update(this.state.localStorage, {
      printers: {
        [active]: {
          name: { $set: name },
+          ip: { $set: ip },
          settings: {
            printer: { $set: printer }
          }
@ -288,7 +303,7 @@ class Settings extends React.Component {

  closeAddPrinterDialog = () => this.setAddPrinterDialog(false);
  openAddPrinterDialog = () => this.setAddPrinterDialog(true);
-  setAddPrinterDialog = (open) => this.setState({ addPrinter: { name: '', printer: '', error: null, open } });
+  setAddPrinterDialog = (open) => this.setState({ addPrinter: { ip: '', name: '', printer: '', error: null, open } });

  closeManagePrinterDialog = () => this.setManagePrinterDialog(false);
  openManagePrinterDialog = () => this.setManagePrinterDialog(true);
@ -299,7 +314,9 @@ class Settings extends React.Component {
      managePrinter: {
        open,
        name: printers[active].name,
-        printer: printers[active].settings.printer
+        ip: printers[active].ip,
+        printer: printers[active].settings.printer,
+        error: null
      }
    });
  }
@ -415,6 +432,7 @@ class Settings extends React.Component {
            ))}
          </SelectField>
          <TextField name="addPrinter.name" floatingLabelText="Name" fullWidth />
+          {(addPrinter.printer === 'doodle3d_printer') && <TextField name="addPrinter.ip" floatingLabelText="IP Adress" fullWidth />}
          {addPrinter.error && <p className={classes.error}>{addPrinter.error}</p>}
        </Dialog>
        <Dialog
@ -444,6 +462,8 @@ class Settings extends React.Component {
            ))}
          </SelectField>
          <TextField name="managePrinter.name" floatingLabelText="Name" fullWidth />
+          {(managePrinter.printer === 'doodle3d_printer') && <TextField name="managePrinter.ip" floatingLabelText="IP Adress" fullWidth />}
+          {managePrinter.error && <p className={classes.error}>{managePrinter.error}</p>}
        </Dialog>
      </div>
    );
--- a/test.js
+++ b/test.js
@ -0,0 +1,122 @@
+import 'babel-polyfill'
+import React from 'react';
+import { render } from 'react-dom';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+// import './fetch.js';
+
+injectTapEventPlugin();
+
+const IP = 'http://10.0.0.109';
+const DEFAULT_GCODE = `; Generated with Doodle3D Slicer V0.0.18
+G28
+G1 X30 Y30
+G1 X90 Y30
+G1 X30 Y30
+G1 X90 Y30
+G1 X30 Y30
+G1 X90 Y30
+G1 X30 Y30
+G1 X90 Y30
+G1 X30 Y30
+G1 X90 Y30
+G1 X30 Y30
+G1 X90 Y30
+; test
+`;
+
+const CIRCLE = `; Generated with Doodle3D Slicer V0.0.18
+G28
+G1 X50 Y70
+G1 X56.180339887498945 Y69.02113032590307
+G1 X61.75570504584947 Y66.18033988749895
+G1 X66.18033988749895 Y61.75570504584947
+G1 X69.02113032590307 Y56.180339887498945
+G1 X70 Y50
+G1 X69.02113032590307 Y43.819660112501055
+G1 X66.18033988749895 Y38.24429495415054
+G1 X61.75570504584947 Y33.819660112501055
+G1 X56.18033988749895 Y30.97886967409693
+G1 X50 Y30
+G1 X43.819660112501055 Y30.978869674096927
+G1 X38.24429495415054 Y33.819660112501055
+G1 X33.819660112501055 Y38.24429495415053
+G1 X30.97886967409693 Y43.81966011250105
+G1 X30 Y49.99999999999999
+G1 X30.978869674096927 Y56.180339887498945
+G1 X33.81966011250105 Y61.75570504584946
+G1 X38.24429495415053 Y66.18033988749895
+G1 X43.81966011250105 Y69.02113032590307
+; test
+`;
+
+// export function fetch(url, data = {}, onProgress) {
+//   return new Promise((resolve, reject) => {
+//     const request = new Request(url, data);
+//     const xhr = new XMLHttpRequest();
+//
+//     xhr.onload = () => {
+//       const { status, statusText, responseURL: url } = xhr;
+//       resolve(new Response(xhr.response, { status, statusText, url }));
+//     }
+//     xhr.onerror = () => reject(new TypeError('Network request failed'));
+//     xhr.ontimeout = () => reject(new TypeError('Network request failed'));
+//
+//     xhr.open(request.method, url);
+//
+//     if (request.credentials === 'include') {
+//       xhr.withCredentials = true
+//     } else if (request.credentials === 'omit') {
+//       xhr.withCredentials = false
+//     }
+//     if (xhr.upload && onProgress) xhr.upload.onprogress = onProgress;
+//     if (xhr.responseType) xhr.responseType = 'blob';
+//
+//     request.headers.forEach((value, name) => {
+//       xhr.setRequestHeader(name, value)
+//     });
+//
+//     xhr.send(data.body);
+//   });
+// }
+
+class Print extends React.Component {
+  home = () => fetch(`${IP}/set?code=G28`, { method: 'GET', mode: 'no-cors' });
+  status = () => fetch(`${IP}/inquiry`, { method: 'GET', mode: 'no-cors' })
+    .then(response => response.text())
+    .then(result => console.log('result: ', result));
+  start = () => fetch(`${IP}/set?code=M565`, { method: 'GET', mode: 'no-cors' });
+  stop = () => fetch(`${IP}/set?cmd={P:X}`, { method: 'GET', mode: 'no-cors' });
+  upload = async () => {
+    const gcode = this.refs.gcode.value;
+
+    const headers = new Headers();
+    headers.append('Content-Disposition', 'form-data; name="file"; filename="doodle.gcode"');
+    headers.append('Content-Type', 'application/octet-stream');
+    headers.append('Accept', 'application/json');
+
+    const body = new FormData();
+    const file = new File([gcode], 'doodle.gcode', { type: 'application/octet-stream' });
+    body.append('file', file);
+
+    const result = await fetch(`${IP}/upload`, { method: 'POST', mode: 'no-cors', headers, body });
+  };
+
+  render() {
+    return (
+      <span>
+        <button onTouchTap={this.home} type="button">Home</button>
+        <button onTouchTap={this.status} type="button">Status</button>
+        <button onTouchTap={this.start} type="button">Start</button>
+        <button onTouchTap={this.stop} type="button">Stop</button>
+        <div>
+          <textarea ref="gcode" cols="80" rows="20" defaultValue={CIRCLE} />
+          <button onTouchTap={this.upload} type="button">Upload</button>
+        </div>
+      </span>
+    );
+  }
+}
+
+render((
+  <Print />
+), document.getElementById('app'));