{ "draw2d": [ { "type": "shape_designer.figure.PolyRect", "id": "1b71bcf4-939c-5650-8a7e-68514e9d2149", "x": 7958, "y": 7965.5, "width": 84, "height": 69, "alpha": 1, "angle": 0, "userData": { "baseClass": "draw2d.SetFigure", "code": "/**\n * by 'Draw2D Shape Designer'\n *\n * Custom JS code to tweak the standard behaviour of the generated\n * shape. add your custome code and event handler here.\n *\n *\n */\ntestShape = testShape.extend({\n\n init: function(attr, setter, getter){\n var _this = this;\n \n this._super(attr, setter, getter);\n\n this.on(\"change:userData.delay\",function(emitter, event){\n var value = event.value;\n _this.delayedValues = []; \n _this.delayedValues.length = parseInt(parseInt(value)/10);\n _this.pointer=0;\n \n });\n this.attr({\n resizeable:false,\n \"userData.delay\":1500\n });\n this.installEditPolicy(new draw2d.policy.figure.AntSelectionFeedbackPolicy());\n },\n \n /**\n * called every '10 [ms]' from the application. do a little bit calculation\n * to change the state every 100ms (10Hz)\n * \n **/\n calculate:function()\n {\n this.getOutputPort(0).setValue(this.delayedValues[this.pointer]);\n this.delayedValues[this.pointer] = this.getInputPort(0).getValue();\n this.pointer = (this.pointer+1)%this.delayedValues.length; \n },\n \n onStart:function()\n {\n this.currentTimer=0;\n },\n \n onStop:function()\n {\n },\n\n getParameterSettings: function()\n {\n return [\n {\n name:\"delay\",\n label:\"Delay [ms]\",\n property:{\n type: \"integer\",\n min: 10,\n max: 100,\n increment:10\n }\n \n }];\n }\n\n});", "name": "Rectangle", "markdown": "# Clock Signal\n\nIn electronics and especially synchronous digital circuits, \na clock signal is a particular type of signal that \noscillates between a `high` and a `low` state and is \nutilized like a metronome to coordinate actions \nof digital circuits.\n\nThe hertz (symbol `Hz`) is the unit of frequency in the \nInternational System of Units (SI) and is defined as \none cycle per second. \n\nIt is named for Heinrich Rudolf Hertz, the first person \nto provide conclusive proof of the existence of \nelectromagnetic waves.", "type": "Output", "direction": 1 }, "cssClass": "shape_designer_figure_PolyRect", "ports": [], "bgColor": "#FFFFFF", "color": "#303030", "stroke": 1, "radius": 0, "dasharray": null, "vertices": [ { "x": 8042, "y": 8034.5 }, { "x": 7958, "y": 8034.5 }, { "x": 7958, "y": 7965.5 }, { "x": 8042, "y": 7965.5 } ], "blur": 0, "filters": [ { "name": "shape_designer.filter.PositionFilter" }, { "name": "shape_designer.filter.SizeFilter" }, { "name": "shape_designer.filter.StrokeFilter" }, { "name": "shape_designer.filter.FillColorFilter" } ] }, { "type": "shape_designer.figure.ExtLabel", "id": "3df4507b-1655-c9ae-1df0-94a0892e62df", "x": 7994.265625, "y": 7988.7265625, "width": 31.90625, "height": 21.203125, "alpha": 1, "angle": 0, "userData": { "name": "Label" }, "cssClass": "shape_designer_figure_ExtLabel", "ports": [], "bgColor": "none", "color": "#1B1B1B", "stroke": 0, "radius": 0, "dasharray": null, "text": "delay", "outlineStroke": 0, "outlineColor": "none", "fontSize": 13, "fontColor": "#D4D4D4", "fontFamily": null, "editor": "LabelInplaceEditor", "filters": [ { "name": "shape_designer.filter.PositionFilter" }, { "name": "shape_designer.filter.FontSizeFilter" }, { "name": "shape_designer.filter.FontColorFilter" } ] }, { "type": "shape_designer.figure.ExtPort", "id": "f4d5683a-7c42-8771-5df4-e4e9da5b8b46", "x": 8037.5, "y": 7996.45952, "width": 10, "height": 10, "alpha": 1, "angle": 0, "userData": { "baseClass": "draw2d.SetFigure", "code": "/**\n * by 'Draw2D Shape Designer'\n *\n * Custom JS code to tweak the standard behaviour of the generated\n * shape. add your custome code and event handler here.\n *\n *\n */\ntestShape = testShape.extend({\n\n init: function(attr, setter, getter){\n this._super(attr, setter, getter);\n\n this.attr({resizeable:false});\n this.installEditPolicy(new draw2d.policy.figure.AntSelectionFeedbackPolicy());\n\n this.currentTimer=0;\n },\n \n /**\n * called every '10 [ms]' from the application. do a little bit calculation\n * to change the state every 100ms (10Hz)\n * \n **/\n calculate:function()\n {\n // 10 ticks every 10ms => 10Hz \n this.currentTimer = (this.currentTimer+1)%10; \n if(this.currentTimer===0){\n this.value = !this.value;\n this.getOutputPort(0).setValue(this.value);\n }\n },\n \n onStart:function()\n {\n this.currentTimer=0;\n },\n \n onStop:function()\n {\n },\n\n getParameterSettings: function()\n {\n return [\n {\n name:\"delay\",\n label:\"Delay [ms]\",\n property:{\n type: \"integer\",\n min: 10,\n max: 100,\n increment:10\n }\n \n }];\n }\n\n});", "name": "Port", "markdown": "# Clock Signal\n\nIn electronics and especially synchronous digital circuits, \na clock signal is a particular type of signal that \noscillates between a `high` and a `low` state and is \nutilized like a metronome to coordinate actions \nof digital circuits.\n\nThe hertz (symbol `Hz`) is the unit of frequency in the \nInternational System of Units (SI) and is defined as \none cycle per second. \n\nIt is named for Heinrich Rudolf Hertz, the first person \nto provide conclusive proof of the existence of \nelectromagnetic waves.", "type": "Output", "direction": 1 }, "cssClass": "shape_designer_figure_ExtPort", "ports": [], "bgColor": "#1C9BAB", "color": "#1B1B1B", "stroke": 1, "dasharray": null, "filters": [ { "name": "shape_designer.filter.PositionFilter" }, { "name": "shape_designer.filter.FanoutFilter" }, { "name": "shape_designer.filter.PortDirectionFilter" }, { "name": "shape_designer.filter.PortTypeFilter" }, { "name": "shape_designer.filter.FillColorFilter" } ] }, { "type": "shape_designer.figure.ExtPort", "id": "3dce50be-cb62-93ee-6ae9-8a903ea77fae", "x": 7952, "y": 7996.45952, "width": 10, "height": 10, "alpha": 1, "angle": 0, "userData": { "name": "Port", "type": "Input", "direction": 3, "fanout": 20 }, "cssClass": "shape_designer_figure_ExtPort", "ports": [], "bgColor": "#37B1DE", "color": "#1B1B1B", "stroke": 1, "dasharray": null, "filters": [ { "name": "shape_designer.filter.PositionFilter" }, { "name": "shape_designer.filter.FanoutFilter" }, { "name": "shape_designer.filter.PortDirectionFilter" }, { "name": "shape_designer.filter.PortTypeFilter" } ] }, { "type": "shape_designer.figure.ExtLine", "id": "d3f4301d-7c4a-ed21-8251-50473ab0c628", "alpha": 1, "angle": 0, "userData": { "name": "Line" }, "cssClass": "shape_designer_figure_ExtLine", "stroke": 1, "color": "#000000", "outlineStroke": 0, "outlineColor": "none", "policy": "draw2d.policy.line.VertexSelectionFeedbackPolicy", "vertex": [ { "x": 7961.502237499999, "y": 7984.276879999998 }, { "x": 7965.155837499999, "y": 7984.276879999998 }, { "x": 7968.809437499999, "y": 7984.276879999998 }, { "x": 7968.809437499998, "y": 7970.506239999997 }, { "x": 7998.60790534, "y": 7970.658283519998 }, { "x": 7998.7756775, "y": 7983.492499999998 }, { "x": 8032.827721499999, "y": 7983.033747999996 } ], "router": "draw2d.layout.connection.VertexRouter", "radius": "", "filters": [ { "name": "shape_designer.filter.StrokeFilter" } ] }, { "type": "shape_designer.figure.ExtLine", "id": "67f7e37e-c165-3c63-63e0-b47dc000ed8f", "alpha": 1, "angle": 0, "userData": { "name": "Line" }, "cssClass": "shape_designer_figure_ExtLine", "stroke": 1, "color": "#000000", "outlineStroke": 0, "outlineColor": "none", "policy": "draw2d.policy.line.VertexSelectionFeedbackPolicy", "vertex": [ { "x": 7960.776317499996, "y": 8026.022479999996 }, { "x": 7993.8103296599975, "y": 8026.198116479995 }, { "x": 7993.642557499998, "y": 8012.907199999996 }, { "x": 8008.625677499997, "y": 8012.743359999996 }, { "x": 8023.608797499997, "y": 8012.579519999996 }, { "x": 8023.608797499997, "y": 8025.749280799996 }, { "x": 8036.492713499996, "y": 8025.500243999995 } ], "router": "draw2d.layout.connection.VertexRouter", "radius": "", "filters": [ { "name": "shape_designer.filter.StrokeFilter" } ] }, { "type": "shape_designer.figure.ExtLine", "id": "cb143409-9709-4790-4652-c8bad2c0e4ef", "alpha": 1, "angle": 0, "userData": { "name": "Line" }, "cssClass": "shape_designer_figure_ExtLine", "stroke": 2, "color": "#FF0569", "outlineStroke": 0, "outlineColor": "none", "policy": "draw2d.policy.line.VertexSelectionFeedbackPolicy", "vertex": [ { "x": 7967.586228750001, "y": 7995.718550000001 }, { "x": 7967.9139087500025, "y": 8012.430230000003 } ], "router": "draw2d.layout.connection.VertexRouter", "radius": "", "filters": [ { "name": "shape_designer.filter.StrokeFilter" } ] }, { "type": "shape_designer.figure.ExtLine", "id": "81ff2cc0-a962-2fcd-861e-3d9671384541", "alpha": 1, "angle": 0, "userData": { "name": "Line" }, "cssClass": "shape_designer_figure_ExtLine", "stroke": 2, "color": "#FF0569", "outlineStroke": 0, "outlineColor": "none", "policy": "draw2d.policy.line.VertexSelectionFeedbackPolicy", "vertex": [ { "x": 7990.752628750002, "y": 8004.00095 }, { "x": 7986.57470875, "y": 8011.373749999998 } ], "router": "draw2d.layout.connection.VertexRouter", "radius": "", "filters": [ { "name": "shape_designer.filter.StrokeFilter" } ] }, { "type": "shape_designer.figure.ExtLine", "id": "2c8a2e58-a4a1-1a9f-3db4-173a42aa8d6f", "alpha": 1, "angle": 0, "userData": { "name": "Line" }, "cssClass": "shape_designer_figure_ExtLine", "stroke": 2, "color": "#FF0569", "outlineStroke": 0, "outlineColor": "none", "policy": "draw2d.policy.line.VertexSelectionFeedbackPolicy", "vertex": [ { "x": 7967.171028750003, "y": 8003.667670000003 }, { "x": 7990.763988749999, "y": 8003.995350000001 } ], "router": "draw2d.layout.connection.VertexRouter", "radius": "", "filters": [ { "name": "shape_designer.filter.StrokeFilter" } ] }, { "type": "shape_designer.figure.ExtLine", "id": "68fbd21e-7171-5729-773d-887407bf5c72", "alpha": 1, "angle": 0, "userData": { "name": "Line" }, "cssClass": "shape_designer_figure_ExtLine", "stroke": 2, "color": "#FF0569", "outlineStroke": 0, "outlineColor": "none", "policy": "draw2d.policy.line.VertexSelectionFeedbackPolicy", "vertex": [ { "x": 7984.418204481202, "y": 7996.414574268801 }, { "x": 7990.57470875, "y": 8002.873749999998 } ], "router": "draw2d.layout.connection.VertexRouter", "radius": "", "filters": [ { "name": "shape_designer.filter.StrokeFilter" } ] }, { "type": "shape_designer.figure.ExtLine", "id": "f45ae44d-a82d-f2e6-28ae-59dde3f4c067", "alpha": 1, "angle": 0, "userData": { "name": "Line" }, "cssClass": "shape_designer_figure_ExtLine", "stroke": 2, "color": "#A8A8A8", "outlineStroke": 0, "outlineColor": "none", "policy": "draw2d.policy.line.VertexSelectionFeedbackPolicy", "vertex": [ { "x": 7968.9163485938825, "y": 7986.131087969916 }, { "x": 7968.654204593882, "y": 7993.847951969916 } ], "router": "draw2d.layout.connection.VertexRouter", "radius": "", "filters": [ { "name": "shape_designer.filter.StrokeFilter" } ] }, { "type": "shape_designer.figure.ExtLine", "id": "b4adf9ad-f0e9-fab0-f5a4-19740aa1fd89", "alpha": 1, "angle": 0, "userData": { "name": "Line" }, "cssClass": "shape_designer_figure_ExtLine", "stroke": 2, "color": "#C9C9C9", "outlineStroke": 0, "outlineColor": "none", "policy": "draw2d.policy.line.VertexSelectionFeedbackPolicy", "vertex": [ { "x": 7993.639804593882, "y": 8010.737551969915 }, { "x": 7993.8078126834835, "y": 7993.124751969915 } ], "router": "draw2d.layout.connection.VertexRouter", "radius": "", "filters": [ { "name": "shape_designer.filter.StrokeFilter" } ] } ], "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABZCAYAAADSOmGpAAABQUlEQVR4Xu3TQREAAAiEQK9/aWvsAxMw4O062sBouuCuQPgTFKhAuAEcrwUVCDeA47WgAuEGcLwWVCDcAI7XggqEG8DxWlCBcAM4XgsqEG4Ax2tBBcIN4HgtqEC4ARyvBRUIN4DjtaAC4QZwvBZUINwAjteCCoQbwPFaUIFwAzheCyoQbgDHa0EFwg3geC2oQLgBHK8FFQg3gOO1oALhBnC8FlQg3ACO14IKhBvA8VpQgXADOF4LKhBuAMdrQQXCDeB4LahAuAEcrwUVCDeA47WgAuEGcLwWVCDcAI7XggqEG8DxWlCBcAM4XgsqEG4Ax2tBBcIN4HgtqEC4ARyvBRUIN4DjtaAC4QZwvBZUINwAjteCCoQbwPFaUIFwAzheCyoQbgDHa0EFwg3geC2oQLgBHK8FFQg3gOO1oALhBnC8Bw5EAFqruYUfAAAAAElFTkSuQmCC" }