{
  "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"
}
