From 0d5587a9c9b31d4fa555fcf9b13eaee63c83dc70 Mon Sep 17 00:00:00 2001 From: casperlamboo Date: Thu, 13 Oct 2016 16:33:40 +0200 Subject: [PATCH] implement better viewer as example --- example/SlicerViewer.js | 45 ++++++++ example/app.js | 22 ++-- example/generateRawData.js | 54 +++++++++ example/index.html | 4 +- example/main.css | 21 ++++ jspm.config.js | 228 +++++++++++++++++++++++++++---------- package.json | 25 +++- 7 files changed, 331 insertions(+), 68 deletions(-) create mode 100644 example/SlicerViewer.js create mode 100644 example/generateRawData.js create mode 100644 example/main.css diff --git a/example/SlicerViewer.js b/example/SlicerViewer.js new file mode 100644 index 0000000..d82fc44 --- /dev/null +++ b/example/SlicerViewer.js @@ -0,0 +1,45 @@ +import React from 'react'; + +export default class SlicerViewer extends React.Component { + state = { + slice: 0 + }; + + changeSlider = (event) => { + this.setState({ + ...this.state, + slice: parseInt(event.target.value) + }); + }; + + render() { + const { slice } = this.state; + const { layerIntersectionPoints, settings, layerShapes } = this.props; + + const numLayers = settings.dimensionsZ / settings.layerHeight; + + const intersectionPoints = layerIntersectionPoints[slice + 1]; + const shape = layerShapes[slice]; + + return ( +
+ + + {intersectionPoints.map(({ x, y }, i) => )} + {shape && shape.closedShapes.map((closedShape, i) => ( + `${x} ${y}`).join(' ')} + fill="rgba(255, 0, 0, 0.5)" + /> + ))} + + +
+ ); + } +} diff --git a/example/app.js b/example/app.js index f07c9c9..2f978b1 100644 --- a/example/app.js +++ b/example/app.js @@ -1,16 +1,24 @@ import THREE from 'three.js'; -import * as SLICER from 'src/index'; +import React from 'react'; +import ReactDOM, { render } from 'react-dom'; +import * as SLICER from 'src/index.js'; +import generateRawData from './generateRawData.js'; +import SlicerViewer from './SlicerViewer.js'; const settings = new SLICER.Settings({ ...SLICER.printerSettings['ultimaker2go'], ...SLICER.userSettings }); -const geometry = new THREE.TorusGeometry(20, 10, 30, 30); +const geometry = new THREE.TorusGeometry(20, 10, 30, 30).clone(); +geometry.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(60, 0, 60))); +geometry.mergeVertices(); +geometry.computeFaceNormals(); -const slicer = new SLICER.Slicer(); +const rawData = generateRawData(geometry, settings); -slicer.setGeometry(geometry); -slicer.slice(settings).then(gcode => { - document.getElementById('gcode').innerHTML = gcode.replace(/(?:\r\n|\r|\n)/g, '
'); -}); +render(, document.getElementById('container')); diff --git a/example/generateRawData.js b/example/generateRawData.js new file mode 100644 index 0000000..333a15a --- /dev/null +++ b/example/generateRawData.js @@ -0,0 +1,54 @@ +import calculateLayersIntersections from 'src/sliceActions/calculateLayersIntersections.js'; +import createLines from 'src/sliceActions/createLines.js'; +import generateInfills from 'src/sliceActions/generateInfills.js'; +import generateInnerLines from 'src/sliceActions/generateInnerLines.js'; +import generateSupport from 'src/sliceActions/generateSupport.js'; +import intersectionsToShapes from 'src/sliceActions/intersectionsToShapes.js'; +import addBrim from 'src/sliceActions/addBrim.js'; +import optimizePaths from 'src/sliceActions/optimizePaths.js'; +import shapesToSlices from 'src/sliceActions/shapesToSlices.js'; +import slicesToGCode from 'src/sliceActions/slicesToGCode.js'; +import applyPrecision from 'src/sliceActions/applyPrecision.js'; +import removePrecision from 'src/sliceActions/removePrecision.js'; + +export default function generateRawData(geometry, settings) { + const rawData = {}; + + const lines = createLines(geometry, settings); + + const { + layerIntersectionIndexes, + layerIntersectionPoints + } = calculateLayersIntersections(lines, settings); + + rawData.layerIntersectionPoints = layerIntersectionPoints + .map(intersectionPoints => intersectionPoints.map(intersectionPoint => intersectionPoint.clone())); + + const layerShapes = intersectionsToShapes(layerIntersectionIndexes, layerIntersectionPoints, lines, settings); + + rawData.layerShapes = layerShapes + .map(({ closedShapes, openShapes }) => ({ + closedShapes: closedShapes.map(closedShape => closedShape.map(vector => vector.clone())), + openShapes: openShapes.map(openShape => openShape.map(vector => vector.clone())) + })); + + + applyPrecision(layerShapes); + + const slices = shapesToSlices(layerShapes, settings); + + generateInnerLines(slices, settings); + generateInfills(slices, settings); + generateSupport(slices, settings); + addBrim(slices, settings); + optimizePaths(slices, settings); + removePrecision(slices); + + rawData.slices = slices; + + const gcode = slicesToGCode(slices, settings); + + rawData.gcode = gcode; + + return rawData; +} diff --git a/example/index.html b/example/index.html index f85f1ec..1d01f2c 100644 --- a/example/index.html +++ b/example/index.html @@ -13,6 +13,8 @@ + + @@ -21,7 +23,7 @@ -

+
diff --git a/example/main.css b/example/main.css new file mode 100644 index 0000000..03cce6d --- /dev/null +++ b/example/main.css @@ -0,0 +1,21 @@ +* { + margin: 0; + padding: 0; +} + +#container { + position: relative; +} + +#container, svg { + width: 100%; + height: 100%; +} + +svg, input { + position: absolute; +} + +input { + width: 100%; +} diff --git a/jspm.config.js b/jspm.config.js index 0a7e8d8..9276ab9 100644 --- a/jspm.config.js +++ b/jspm.config.js @@ -2,6 +2,7 @@ SystemJS.config({ paths: { "github:": "jspm_packages/github/", "npm:": "jspm_packages/npm/", + "example/": "example/", "slicer/": "src/" }, browserConfig: { @@ -11,11 +12,107 @@ SystemJS.config({ "map": { "babel-runtime": "npm:babel-runtime@5.8.38", "core-js": "npm:core-js@1.2.7", - "plugin-babel": "npm:systemjs-plugin-babel@0.0.12" + "plugin-babel": "npm:systemjs-plugin-babel@0.0.12", + "react": "npm:react@15.3.2", + "domain": "github:jspm/nodelibs-domain@0.2.0-alpha", + "zlib": "github:jspm/nodelibs-zlib@0.2.0-alpha", + "https": "github:jspm/nodelibs-https@0.2.0-alpha", + "react-dom": "npm:react-dom@15.3.2", + "babel-plugin-transform-react-jsx": "npm:babel-plugin-transform-react-jsx@6.8.0" }, "packages": { "npm:babel-runtime@5.8.38": { "map": {} + }, + "npm:react@15.3.2": { + "map": { + "object-assign": "npm:object-assign@4.1.0", + "loose-envify": "npm:loose-envify@1.2.0", + "fbjs": "npm:fbjs@0.8.5" + } + }, + "npm:fbjs@0.8.5": { + "map": { + "loose-envify": "npm:loose-envify@1.2.0", + "object-assign": "npm:object-assign@4.1.0", + "promise": "npm:promise@7.1.1", + "isomorphic-fetch": "npm:isomorphic-fetch@2.2.1", + "ua-parser-js": "npm:ua-parser-js@0.7.10", + "immutable": "npm:immutable@3.8.1", + "core-js": "npm:core-js@1.2.7" + } + }, + "npm:loose-envify@1.2.0": { + "map": { + "js-tokens": "npm:js-tokens@1.0.3" + } + }, + "npm:promise@7.1.1": { + "map": { + "asap": "npm:asap@2.0.5" + } + }, + "npm:isomorphic-fetch@2.2.1": { + "map": { + "whatwg-fetch": "npm:whatwg-fetch@1.0.0", + "node-fetch": "npm:node-fetch@1.6.3" + } + }, + "npm:node-fetch@1.6.3": { + "map": { + "encoding": "npm:encoding@0.1.12", + "is-stream": "npm:is-stream@1.1.0" + } + }, + "npm:encoding@0.1.12": { + "map": { + "iconv-lite": "npm:iconv-lite@0.4.13" + } + }, + "github:jspm/nodelibs-domain@0.2.0-alpha": { + "map": { + "domain-browserify": "npm:domain-browser@1.1.7" + } + }, + "github:jspm/nodelibs-zlib@0.2.0-alpha": { + "map": { + "zlib-browserify": "npm:browserify-zlib@0.1.4" + } + }, + "npm:browserify-zlib@0.1.4": { + "map": { + "readable-stream": "npm:readable-stream@2.1.5", + "pako": "npm:pako@0.2.9" + } + }, + "npm:babel-plugin-transform-react-jsx@6.8.0": { + "map": { + "babel-helper-builder-react-jsx": "npm:babel-helper-builder-react-jsx@6.9.0", + "babel-plugin-syntax-jsx": "npm:babel-plugin-syntax-jsx@6.13.0", + "babel-runtime": "npm:babel-runtime@6.11.6" + } + }, + "npm:babel-helper-builder-react-jsx@6.9.0": { + "map": { + "babel-runtime": "npm:babel-runtime@6.11.6", + "esutils": "npm:esutils@2.0.2", + "babel-types": "npm:babel-types@6.16.0", + "lodash": "npm:lodash@4.16.4" + } + }, + "npm:babel-runtime@6.11.6": { + "map": { + "core-js": "npm:core-js@2.4.1", + "regenerator-runtime": "npm:regenerator-runtime@0.9.5" + } + }, + "npm:babel-types@6.16.0": { + "map": { + "lodash": "npm:lodash@4.16.4", + "babel-runtime": "npm:babel-runtime@6.11.6", + "esutils": "npm:esutils@2.0.2", + "to-fast-properties": "npm:to-fast-properties@1.0.2" + } } } }, @@ -23,6 +120,21 @@ SystemJS.config({ packages: { "slicer": { "main": "index.js" + }, + "example": { + "main": "example/index.js", + "format": "esm", + "meta": { + "*.js": { + "loader": "plugin-babel", + "babelOptions": { + "stage1": true, + "plugins": [ + "babel-plugin-transform-react-jsx" + ] + } + } + } } }, map: { @@ -91,12 +203,12 @@ SystemJS.config({ }, "github:jspm/nodelibs-http@0.2.0-alpha": { "map": { - "http-browserify": "npm:stream-http@2.3.1" + "http-browserify": "npm:stream-http@2.4.0" } }, "npm:stream-browserify@2.0.1": { "map": { - "inherits": "npm:inherits@2.0.1", + "inherits": "npm:inherits@2.0.3", "readable-stream": "npm:readable-stream@2.1.5" } }, @@ -107,18 +219,9 @@ SystemJS.config({ }, "npm:buffer@4.9.1": { "map": { - "base64-js": "npm:base64-js@1.1.2", + "base64-js": "npm:base64-js@1.2.0", "isarray": "npm:isarray@1.0.0", - "ieee754": "npm:ieee754@1.1.6" - } - }, - "npm:stream-http@2.3.1": { - "map": { - "inherits": "npm:inherits@2.0.1", - "readable-stream": "npm:readable-stream@2.1.5", - "builtin-status-codes": "npm:builtin-status-codes@2.0.0", - "to-arraybuffer": "npm:to-arraybuffer@1.0.1", - "xtend": "npm:xtend@4.0.1" + "ieee754": "npm:ieee754@1.1.8" } }, "npm:url@0.11.0": { @@ -130,7 +233,7 @@ SystemJS.config({ "npm:readable-stream@2.1.5": { "map": { "string_decoder": "npm:string_decoder@0.10.31", - "inherits": "npm:inherits@2.0.1", + "inherits": "npm:inherits@2.0.3", "isarray": "npm:isarray@1.0.0", "buffer-shims": "npm:buffer-shims@1.0.0", "core-util-is": "npm:core-util-is@1.0.2", @@ -140,11 +243,11 @@ SystemJS.config({ }, "npm:crypto-browserify@3.11.0": { "map": { - "inherits": "npm:inherits@2.0.1", + "inherits": "npm:inherits@2.0.3", "browserify-cipher": "npm:browserify-cipher@1.0.0", "create-hash": "npm:create-hash@1.1.2", "browserify-sign": "npm:browserify-sign@4.0.0", - "pbkdf2": "npm:pbkdf2@3.0.4", + "pbkdf2": "npm:pbkdf2@3.0.9", "public-encrypt": "npm:public-encrypt@4.0.0", "randombytes": "npm:randombytes@2.0.3", "diffie-hellman": "npm:diffie-hellman@5.0.2", @@ -155,19 +258,19 @@ SystemJS.config({ "npm:browserify-sign@4.0.0": { "map": { "create-hash": "npm:create-hash@1.1.2", - "inherits": "npm:inherits@2.0.1", + "inherits": "npm:inherits@2.0.3", "create-hmac": "npm:create-hmac@1.1.4", "parse-asn1": "npm:parse-asn1@5.0.0", - "elliptic": "npm:elliptic@6.3.1", + "elliptic": "npm:elliptic@6.3.2", "bn.js": "npm:bn.js@4.11.6", "browserify-rsa": "npm:browserify-rsa@4.0.1" } }, "npm:create-hash@1.1.2": { "map": { - "inherits": "npm:inherits@2.0.1", + "inherits": "npm:inherits@2.0.3", "ripemd160": "npm:ripemd160@1.0.1", - "cipher-base": "npm:cipher-base@1.0.2", + "cipher-base": "npm:cipher-base@1.0.3", "sha.js": "npm:sha.js@2.4.5" } }, @@ -180,11 +283,6 @@ SystemJS.config({ "browserify-rsa": "npm:browserify-rsa@4.0.1" } }, - "npm:pbkdf2@3.0.4": { - "map": { - "create-hmac": "npm:create-hmac@1.1.4" - } - }, "npm:diffie-hellman@5.0.2": { "map": { "randombytes": "npm:randombytes@2.0.3", @@ -195,7 +293,7 @@ SystemJS.config({ "npm:create-hmac@1.1.4": { "map": { "create-hash": "npm:create-hash@1.1.2", - "inherits": "npm:inherits@2.0.1" + "inherits": "npm:inherits@2.0.3" } }, "npm:browserify-cipher@1.0.0": { @@ -207,23 +305,23 @@ SystemJS.config({ }, "npm:create-ecdh@4.0.0": { "map": { - "elliptic": "npm:elliptic@6.3.1", + "elliptic": "npm:elliptic@6.3.2", "bn.js": "npm:bn.js@4.11.6" } }, "npm:parse-asn1@5.0.0": { "map": { "create-hash": "npm:create-hash@1.1.2", - "pbkdf2": "npm:pbkdf2@3.0.4", + "pbkdf2": "npm:pbkdf2@3.0.9", "browserify-aes": "npm:browserify-aes@1.0.6", "evp_bytestokey": "npm:evp_bytestokey@1.0.0", - "asn1.js": "npm:asn1.js@4.8.0" + "asn1.js": "npm:asn1.js@4.8.1" } }, "npm:browserify-des@1.0.0": { "map": { - "inherits": "npm:inherits@2.0.1", - "cipher-base": "npm:cipher-base@1.0.2", + "inherits": "npm:inherits@2.0.3", + "cipher-base": "npm:cipher-base@1.0.3", "des.js": "npm:des.js@1.0.0" } }, @@ -236,27 +334,14 @@ SystemJS.config({ "map": { "create-hash": "npm:create-hash@1.1.2", "evp_bytestokey": "npm:evp_bytestokey@1.0.0", - "inherits": "npm:inherits@2.0.1", - "cipher-base": "npm:cipher-base@1.0.2", + "inherits": "npm:inherits@2.0.3", + "cipher-base": "npm:cipher-base@1.0.3", "buffer-xor": "npm:buffer-xor@1.0.3" } }, - "npm:elliptic@6.3.1": { - "map": { - "bn.js": "npm:bn.js@4.11.6", - "inherits": "npm:inherits@2.0.1", - "hash.js": "npm:hash.js@1.0.3", - "brorand": "npm:brorand@1.0.5" - } - }, - "npm:cipher-base@1.0.2": { - "map": { - "inherits": "npm:inherits@2.0.1" - } - }, "npm:sha.js@2.4.5": { "map": { - "inherits": "npm:inherits@2.0.1" + "inherits": "npm:inherits@2.0.3" } }, "npm:browserify-rsa@4.0.1": { @@ -268,31 +353,58 @@ SystemJS.config({ "npm:miller-rabin@4.0.0": { "map": { "bn.js": "npm:bn.js@4.11.6", - "brorand": "npm:brorand@1.0.5" + "brorand": "npm:brorand@1.0.6" } }, "npm:des.js@1.0.0": { "map": { - "inherits": "npm:inherits@2.0.1", - "minimalistic-assert": "npm:minimalistic-assert@1.0.0" - } - }, - "npm:asn1.js@4.8.0": { - "map": { - "bn.js": "npm:bn.js@4.11.6", - "inherits": "npm:inherits@2.0.1", + "inherits": "npm:inherits@2.0.3", "minimalistic-assert": "npm:minimalistic-assert@1.0.0" } }, "npm:hash.js@1.0.3": { "map": { - "inherits": "npm:inherits@2.0.1" + "inherits": "npm:inherits@2.0.3" } }, "github:jspm/nodelibs-os@0.2.0-alpha": { "map": { "os-browserify": "npm:os-browserify@0.2.1" } + }, + "npm:pbkdf2@3.0.9": { + "map": { + "create-hmac": "npm:create-hmac@1.1.4" + } + }, + "npm:elliptic@6.3.2": { + "map": { + "bn.js": "npm:bn.js@4.11.6", + "inherits": "npm:inherits@2.0.3", + "brorand": "npm:brorand@1.0.6", + "hash.js": "npm:hash.js@1.0.3" + } + }, + "npm:cipher-base@1.0.3": { + "map": { + "inherits": "npm:inherits@2.0.3" + } + }, + "npm:asn1.js@4.8.1": { + "map": { + "bn.js": "npm:bn.js@4.11.6", + "inherits": "npm:inherits@2.0.3", + "minimalistic-assert": "npm:minimalistic-assert@1.0.0" + } + }, + "npm:stream-http@2.4.0": { + "map": { + "inherits": "npm:inherits@2.0.3", + "readable-stream": "npm:readable-stream@2.1.5", + "to-arraybuffer": "npm:to-arraybuffer@1.0.1", + "builtin-status-codes": "npm:builtin-status-codes@2.0.0", + "xtend": "npm:xtend@4.0.1" + } } } }); diff --git a/package.json b/package.json index 1422898..5554c7d 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,15 @@ "worker": "github:casperlamboo/plugin-worker@master" }, "devDependencies": { + "babel-plugin-transform-react-jsx": "npm:babel-plugin-transform-react-jsx@^6.8.0", "babel-runtime": "npm:babel-runtime@^5.1.13", "core-js": "npm:core-js@^1.2.0", - "plugin-babel": "npm:systemjs-plugin-babel@^0.0.12" + "domain": "github:jspm/nodelibs-domain@^0.2.0-alpha", + "https": "github:jspm/nodelibs-https@^0.2.0-alpha", + "plugin-babel": "npm:systemjs-plugin-babel@^0.0.12", + "react": "npm:react@^15.3.2", + "react-dom": "npm:react-dom@^15.3.2", + "zlib": "github:jspm/nodelibs-zlib@^0.2.0-alpha" }, "peerDependencies": { "assert": "github:jspm/nodelibs-assert@^0.2.0-alpha", @@ -44,10 +50,25 @@ "core-js": "^1.2.0" } }, - "npm:inherits@2.0.1": { + "npm:browserify-zlib@0.1.4": { + "dependencies": { + "readable-stream": "^2.0.2", + "pako": "~0.2.0" + }, + "map": { + "_stream_transform": "readable-stream/transform" + } + }, + "npm:inherits@2.0.3": { "ignore": [ "test.js" ] + }, + "npm:lodash@4.16.4": { + "map": { + "buffer": "@empty", + "process": "@empty" + } } } },