jscut Wizard example

Hopefully someone will fork this and turn it into a complete box generation wizard

by Todd Fleming

HTML

<!-- Polymer Polyfill Libraries -->
<script src="http://api.jscut.org/bower_components/platform/platform.js"></script>

<!-- Polymer Components -->
<link rel="import" href="http://api.jscut.org/bower_components/paper-slider/paper-slider.html">

<!-- jscut Components -->
<link rel="import" href="http://api.jscut.org/api/jscut-app-layout.html">
<link rel="import" href="http://api.jscut.org/api/jscut-cam.html">
<link rel="import" href="http://api.jscut.org/api/jscut-simulate-gcode.html">
<link rel="import" href="http://api.jscut.org/api/jscut-stretch-svg.html">
<link rel="import" href="http://api.jscut.org/api/jscut-svg.html">
<link rel="import" href="http://api.jscut.org/api/jscut-tabbed-pages.html">
<link rel="import" href="http://api.jscut.org/api/jscut-tool-form.html">
<link rel="import" href="http://api.jscut.org/api/jscut-material-form.html">

<polymer-element name="main-page">
    <template>
        <jscut-app-layout>
            <jscut-form caption="Box" class="left">
                <jscut-unit-converter units="{{units}}" value0="{{boxWidth}}" value1="{{boxHeight}}"></jscut-unit-converter>
                <jscut-field-control><button on-click="{{generate}}">generate</button></jscut-field-control>
                <jscut-field-units label="Units" value="{{units}}"></jscut-field-units>
                <jscut-field-input label="Box Width" type="number" width="80px" step="any" value="{{boxWidth}}"></jscut-field-input>
                <jscut-field-input label="Box Height" type="number" width="80px" step="any" value="{{boxHeight}}"></jscut-field-input>
            </jscut-form>

            <jscut-form caption="Hardware" class="left">
                <jscut-unit-converter units="{{units}}" value0="{{screwDiameter}}" value1="{{nutWidth}}" value2="{{nutThickness}}"></jscut-unit-converter>
                <jscut-field-input label="Screw Diameter" type="number" width="80px" step="any" value="{{screwDiameter}}"></jscut-field-input>
                <jscut-field-input...

JavaScript

document.addEventListener('polymer-ready', function () {
    Polymer('main-page', {
        units: 'mm',
        boxWidth: 100,
        boxHeight: 100,
        nutWidth: 6,
        nutThickness: 5,
        nutSpacing: 4,
        screwDiameter: 4,
        jointSize: 15,
        jointDistFromEdge: 20,
        gcode: '',

        material: {
            units: "inch",
            thickness: ".25",
            clearance: "0.1",
        },

        operation: {
            camOp: "Outside",
        },

        ready: function () {
            this.update();
        },

        observe: {
            'material.thickness': 'update',
            'tool.diameter': 'update',
            boxWidth: 'update',
            boxHeight: 'update',
            nutWidth: 'update',
            nutThickness: 'update',
            nutSpacing: 'update',
            screwDiameter: 'update',
            jointSize: 'update',
            jointDistFromEdge: 'update',
        },

        update: function () {
            var boxWidth = jscut.data.toInch(this.boxWidth, this.units);
            var boxHeight = jscut.data.toInch(this.boxHeight, this.units);
            var nutWidth = jscut.data.toInch(this.nutWidth, this.units);
            var nutThickness = jscut.data.toInch(this.nutThickness, this.units);
            var nutSpacing = jscut.data.toInch(this.nutSpacing, this.units);
            var jointSize = jscut.data.toInch(this.jointSize, this.units);
            var jointDistFromEdge = jscut.data.toInch(this.jointDistFromEdge, this.units);
            var screwDiameter = jscut.data.toInch(this.screwDiameter, this.units);
            var thickness = jscut.data.toInch(this.material.thickness, this.material.units);
            var diameter = jscut.data.toInch(this.tool.diameter, this.tool.units);

            var reliefRadius = diameter * 1.1 / 2;

            var leftNutJoint = jscut.geometry.createRect(-diameter, -jointSize / 2, thickness, jointSize / 2, "inch");
            leftNutJoint =...