ZigZag Mixer

index.html

@@ -65,6 +65,15 @@
 
         <span class="mdl-layout-title">Select Layer</span>
 
+        <nav class="mdl-navigation" id="Mixer">
+            ...
+            <div class="button_row">
+                <a id="ZigZagMixer_button" class="mdl-button mdl-js-button
+                mdl-js-ripple-effect mdl-button--raised feature-button">Mixer</a>
+                <button id="ZigZagMixer_params_button" class="params-button
+                mdl-button mdl-js-button mdl-button--icon">
+                    <i class="material-icons">settings</i>
+                </button>
 
 
         <nav class="mdl-navigation" id="layer-controls">

src/app/featureSets/featureSet.js

@@ -1,5 +1,6 @@
 import Device from "../core/device";
 
+
 import Port from "../library/port";
 import Anode from "../library/anode"; //new from CK
 import Cathode from "../library/cathode"; //new from CK
@@ -29,6 +30,7 @@ import YTree from "../library/ytree";
 import LLChamber from "../library/llChamber";
 import ThreeDMixer from "../library/threeDMixer";
 import Via from "../library/via";
+import ZigZagMixer from "../ZigZagMixer";
 
 //new
 
@@ -123,7 +125,9 @@ export default class FeatureSet {
             DropletGenFlow: { object: new DropletGeneratorFlowFocus(), key: null },
             LogicArray: { object: new LogicArray(), key: "FLOW" },
             LogicArray_control: { object: new LogicArray(), key: "CONTROL" },
-            LogicArray_cell: { object: new LogicArray(), key: "CELL" }
+            LogicArray_cell: { object: new LogicArray(), key: "CELL" },
+            ZigZagMixer: { object: new ZigZagMixer(), key: "FLOW"}, 
+            ZigZagMixer_control: {object: new ZigZagMixer(), key: "CONTROL"}
         };
 
         // this.__checkDefinitions();

src/app/library/ZigZagMixer.js

@@ -0,0 +1,199 @@
+import Template from "./template";
+import paper from "paper";
+import ComponentPort from "../core/componentPort";
+
+export default class  extends Template {
+    constructor() {
+        super();
+    }
+
+    __setupDefinitions() {
+        this.__unique = {
+            position: "Point"
+        };
+
+        this.__heritable = {
+            componentSpacing: "Float",
+            rotation: "Float",
+            bendSpacing: "Float",
+            numberofZigZags: "Float",
+            numberOfBends: "Float",
+            channelWidth: "Float",
+            bendLength: "Float",
+            rotation: "Float",
+            height: "Float"
+        };
+
+        this.__defaults = {
+            componentSpacing: 1000,
+            rotation: 0,
+            channelWidth: 0.8 * 1000,
+            bendSpacing: 1.23 * 1000,
+            numberOfBends: 1,
+            numberofZigZags: 1,
+            rotation: 0,
+            bendLength: 2.46 * 1000,
+            height: 250
+        };
+
+        this.__units = {
+            componentSpacing: "μm",
+            rotation: "°",
+            bendSpacing: "μm",
+            numberOfBends: "",
+            numberofZigZags: "",
+            channelWidth: "μm",
+            bendLength: "μm",
+            height: "μm"
+        };
+
+        this.__minimum = {
+            componentSpacing: 0,
+            rotation: 0,
+            channelWidth: 10,
+            bendSpacing: 10,
+            numberOfBends: 1,
+            numberofZigZags:1,
+            rotation: 0,
+            bendLength: 10,
+            height: 10
+        };
+
+        this.__maximum = {
+            componentSpacing: 10000,
+            rotation: 360,
+            channelWidth: 2000,
+            bendSpacing: 6000,
+            numberOfBends: 20,
+            numberofZigZags: 20,
+            rotation: 360,
+            bendLength: 12 * 1000,
+            height: 1200
+        };
+
+        this.__featureParams = {
+            componentSpacing: "componentSpacing",
+            position: "position",
+            channelWidth: "channelWidth",
+            bendSpacing: "bendSpacing",
+            numberOfBends: "numberOfBends",
+            numberofZigZags: "numberofZigZags",
+            rotation: "rotation",
+            bendLength: "bendLength"
+        };
+
+        this.__targetParams = {
+            componentSpacing: "componentSpacing",
+            channelWidth: "channelWidth",
+            bendSpacing: "bendSpacing",
+            numberOfBends: "numberOfBends",
+            numberofZigZags: "numberofZigZags",
+            rotation: "rotation",
+            bendLength: "bendLength"
+        };
+
+        this.__placementTool = "componentPositionTool";
+
+        this.__toolParams = {
+            position: "position"
+        };
+
+        this.__renderKeys = ["FLOW"];
+
+        this.__mint = "CURVED MIXER";
+    }
+
+    getPorts(params) {
+        let channelWidth = params["channelWidth"];
+        let bendLength = params["bendLength"];
+        let bendSpacing = params["bendSpacing"];
+        let numberOfBends = params["numberOfBends"];
+
+        let ports = [];
+
+        ports.push(new ComponentPort(bendLength / 2 + channelWidth, 0, "1", "FLOW"));
+
+        ports.push(new ComponentPort(bendLength / 2 + channelWidth, (2 * numberOfBends + 1) * channelWidth + 2 * numberOfBends * bendSpacing, "2", "FLOW"));
+
+        return ports;
+    }
+
+    render2D(params, key) {
+        let channelWidth = params["channelWidth"];
+        let bendLength = params["bendLength"];
+        let bendSpacing = params["bendSpacing"];
+        let rotation = params["rotation"];
+        let numBends = params["numberOfBends"];
+        let x = params["position"][0];
+        let y = params["position"][1];
+        let color = params["color"];
+        let segHalf = bendLength / 2 + channelWidth;
+        let segLength = bendLength + 2 * channelWidth;
+        let segBend = bendSpacing + 2 * channelWidth;
+        let vRepeat = 2 * bendSpacing + 2 * channelWidth;
+        let vOffset = bendSpacing + channelWidth;
+        let hOffset = bendLength / 2 + channelWidth / 2;
+        let serp = new paper.CompoundPath();
+
+        //draw first segment
+        let toprect = new paper.Path.Rectangle(x + channelWidth - 1, y, bendLength / 2 + channelWidth / 2 + 1, channelWidth);
+        toprect.closed = true;
+        for (let i = 0; i < numBends; i++) {
+            //draw left curved segment
+            let leftCurve = new paper.Path.Arc({
+                from: [x + channelWidth, y + vRepeat * i],
+                through: [x + channelWidth - (channelWidth + bendSpacing / 2), y + vRepeat * i + bendSpacing / 2 + channelWidth],
+                to: [x + channelWidth, y + vRepeat * i + bendSpacing + 2 * channelWidth]
+            });
+            leftCurve.closed = true;
+            let leftCurveSmall = new paper.Path.Arc({
+                from: [x + channelWidth, y + vRepeat * i + bendSpacing + channelWidth],
+                through: [x + channelWidth - bendSpacing / 2, y + vRepeat * i + bendSpacing / 2 + channelWidth],
+                to: [x + channelWidth, y + vRepeat * i + channelWidth]
+            });
+            leftCurveSmall.closed = true;
+            leftCurve = leftCurve.subtract(leftCurveSmall);
+            toprect = toprect.unite(leftCurve);
+            // serp.addChild(leftCurve);
+            //draw horizontal segment
+            let hseg = new paper.Path.Rectangle(x + channelWidth - 1, y + vOffset + vRepeat * i, bendLength + 2, channelWidth);
+            toprect = toprect.unite(hseg);
+            //draw right curved segment
+            let rightCurve = new paper.Path.Arc({
+                from: [x + channelWidth + bendLength, y + vOffset + vRepeat * i],
+                through: [x + channelWidth + bendLength + (channelWidth + bendSpacing / 2), y + vOffset + vRepeat * i + bendSpacing / 2 + channelWidth],
+                to: [x + channelWidth + bendLength, y + vOffset + vRepeat * i + bendSpacing + 2 * channelWidth]
+            });
+            rightCurve.closed = true;
+            let rightCurveSmall = new paper.Path.Arc({
+                from: [x + channelWidth + bendLength, y + vOffset + vRepeat * i + bendSpacing + channelWidth],
+                through: [x + channelWidth + bendLength + bendSpacing / 2, y + vOffset + vRepeat * i + bendSpacing / 2 + channelWidth],
+                to: [x + channelWidth + bendLength, y + vOffset + vRepeat * i + channelWidth]
+            });
+            rightCurveSmall.closed = true;
+            rightCurve = rightCurve.subtract(rightCurveSmall);
+            toprect = toprect.unite(rightCurve);
+
+            if (i == numBends - 1) {
+                //draw half segment to close
+                hseg = new paper.Path.Rectangle(x + channelWidth / 2 + bendLength / 2, y + vRepeat * (i + 1), (bendLength + channelWidth) / 2 + 1, channelWidth);
+                toprect = toprect.unite(hseg);
+            } else {
+                //draw full segment
+                hseg = new paper.Path.Rectangle(x + channelWidth - 1, y + vRepeat * (i + 1), bendLength + 2, channelWidth);
+                toprect = toprect.unite(hseg);
+            }
+            toprect = toprect.unite(hseg);
+        }
+        serp.addChild(toprect);
+
+        serp.fillColor = color;
+        return serp.rotate(rotation, x, y);;
+    }
+
+    render2DTarget(key, params) {
+        let render = this.render2D(params, key);
+        render.fillColor.alpha = 0.5;
+        return render;
+    }
+}

src/app/view/ui/componentToolBar.js

@@ -4,6 +4,7 @@ import InsertTextDialog from "./insertTextDialog";
 import * as Colors from "../colors";
 import * as ParameterMenu from "./parameterMenu";
 import * as Registry from "../../core/registry";
+import ZigZagMixer from "../../library/ZigZagMixer";
 
 const inactiveBackground = GREY_200;
 const inactiveText = BLACK;
@@ -64,7 +65,7 @@ export default class ComponentToolBar {
         this.__dropletgenTButton = document.getElementById("dropletgenT_button");
         this.__dropletgenFlowButton = document.getElementById("dropletgenFlow_button");
         this.__logicarrayButton = document.getElementById("logicarray_button");
-
+        this.__ZigZagMixerButton = document.getElementById("ZigZagMixer_button")
         //Create all the parameter menu buttons
 
         this.__channelParams = document.getElementById("channel_params_button");
@@ -98,6 +99,7 @@ export default class ComponentToolBar {
         this.__alignmentMarksParams = document.getElementById("alignmentmarks_params_button");
         this.__llChamberParams = document.getElementById("llchamber_params_button");
         this.__threeDMixerParams = document.getElementById("3dmixer_params_button");
+        this.__ZigZagMixerParams = document.getElementById("ZigZagMixer_params_button");
 
         this.__insertTextDialog = new InsertTextDialog();
 
@@ -164,7 +166,8 @@ export default class ComponentToolBar {
             CapacitanceSensor: this.__capacitancesensorButton,
             DropletGenT: this.__dropletgenTButton,
             DropletGenFlow: this.__dropletgenFlowButton,
-            LogicArray: this.__logicarrayButton
+            LogicArray: this.__logicarrayButton,
+            ZigZagMixer: this.__ZigZagMixerButton
         };
 
 
@@ -474,6 +477,16 @@ export default class ComponentToolBar {
 
             ref.setActiveButton("LogicArray");
             ref.__viewManagerDelegate.switchTo2D();
+
+        this.__ZigZagMixerButton.onclick =function () {
+            Registry.viewManager.activateTool("ZigZagMixer"); 
+
+            ref.setActiveButton("ZigZagMixer");
+            ref.__viewManagerDelegate.switchTo2D();
+
+        }
+
+
         };
     }
 
@@ -541,6 +554,7 @@ export default class ComponentToolBar {
         this.__dropletgenTParams.onclick = ComponentToolBar.getParamsWindowCallbackFunction("DropletGenT", "Basic");
         this.__dropletgenFlowParams.onclick = ComponentToolBar.getParamsWindowCallbackFunction("DropletGenFlow", "Basic");
         this.__logicarrayParams.onclick = ComponentToolBar.getParamsWindowCallbackFunction("LogicArray", "Basic");
+        this.__ZigZagMixerParams.onclick = ComponentToolBar.getParamsWindowCallbackFunction("ZigZagMixer","Basic");
     }
 
     static getParamsWindowCallbackFunction(typeString, setString, isTranslucent = false) {

src/app/view/viewManager.js

@@ -1233,6 +1233,7 @@ export default class ViewManager {
         this.tools["DropletGenT"] = new ComponentPositionTool("DropletGenT", "Basic");
         this.tools["DropletGenFlow"] = new ComponentPositionTool("DropletGenFlow", "Basic");
         this.tools["LogicArray"] = new ControlCellPositionTool("LogicArray", "Basic");
+        this.tools["ZigZagMixer"] = new ComponentPositionTool ("ZigZagMixer", "Basic");
     }
 
     /**