-
-
Save bergie/dc0414ecf989b4b130b119e948653350 to your computer and use it in GitHub Desktop.
Canvas pattern
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "caseSensitive": false, | |
| "properties": { | |
| "name": "Hello Canvas!", | |
| "environment": { | |
| "type": "noflo-browser", | |
| "content": "<canvas id=\"mycanvas\" width=\"200\" height=\"200\"></canvas>\n<br />\n<button id=\"mybutton\">Generate</button>" | |
| } | |
| }, | |
| "inports": {}, | |
| "outports": {}, | |
| "groups": [], | |
| "processes": { | |
| "canvas/Draw_ps7an": { | |
| "component": "canvas/Draw", | |
| "metadata": { | |
| "label": "canvas/Draw", | |
| "x": 972, | |
| "y": 324, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/Fill_cbdq5": { | |
| "component": "canvas/Fill", | |
| "metadata": { | |
| "label": "canvas/Fill", | |
| "x": 828, | |
| "y": 324, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakeRectangle_1rmr9": { | |
| "component": "canvas/MakeRectangle", | |
| "metadata": { | |
| "label": "canvas/MakeRectangle", | |
| "x": 468, | |
| "y": 324, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "dom/GetElement_an98u": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "label": "dom/GetElement", | |
| "x": 828, | |
| "y": 180, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakeRange_lb9hw": { | |
| "component": "canvas/MakeRange", | |
| "metadata": { | |
| "label": "canvas/MakeRange", | |
| "x": 180, | |
| "y": 324, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakeColor_pra9g": { | |
| "component": "canvas/MakeColor", | |
| "metadata": { | |
| "label": "canvas/MakeColor", | |
| "x": 648, | |
| "y": 36, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/Stroke_3m3hk": { | |
| "component": "canvas/Stroke", | |
| "metadata": { | |
| "label": "canvas/Stroke", | |
| "x": 648, | |
| "y": 324, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakeRandom_wcbwf": { | |
| "component": "canvas/MakeRandom", | |
| "metadata": { | |
| "label": "canvas/MakeRandom", | |
| "x": 468, | |
| "y": 180, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakeRandom_guh5x": { | |
| "component": "canvas/MakeRandom", | |
| "metadata": { | |
| "label": "canvas/MakeRandom", | |
| "x": 468, | |
| "y": -108, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "GetButton": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "label": "GetButton", | |
| "x": -144, | |
| "y": 108, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "ListenClick": { | |
| "component": "interaction/ListenMouse", | |
| "metadata": { | |
| "label": "ListenClick", | |
| "x": 0, | |
| "y": 108, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakeGrid_st846": { | |
| "component": "canvas/MakeGrid", | |
| "metadata": { | |
| "label": "canvas/MakeGrid", | |
| "x": 324, | |
| "y": 324, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "Send0": { | |
| "component": "math/SendNumber", | |
| "metadata": { | |
| "label": "Send0", | |
| "x": 324, | |
| "y": -144, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "Send100": { | |
| "component": "math/SendNumber", | |
| "metadata": { | |
| "label": "Send100", | |
| "x": 324, | |
| "y": -36, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "Send360": { | |
| "component": "math/SendNumber", | |
| "metadata": { | |
| "label": "Send360", | |
| "x": 324, | |
| "y": 72, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "Send500": { | |
| "component": "math/SendNumber", | |
| "metadata": { | |
| "label": "Send500", | |
| "x": 324, | |
| "y": 180, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "NewColors": { | |
| "component": "core/Split", | |
| "metadata": { | |
| "label": "NewColors", | |
| "x": 180, | |
| "y": 0, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "Start": { | |
| "component": "core/Repeat", | |
| "metadata": { | |
| "label": "Start", | |
| "x": 0, | |
| "y": -108, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| } | |
| }, | |
| "connections": [ | |
| { | |
| "src": { | |
| "process": "dom/GetElement_an98u", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Draw_ps7an", | |
| "port": "canvas" | |
| }, | |
| "metadata": { | |
| "route": 2 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakeRectangle_1rmr9", | |
| "port": "rectangle" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Stroke_3m3hk", | |
| "port": "items" | |
| }, | |
| "metadata": { | |
| "route": 9 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/Stroke_3m3hk", | |
| "port": "stroke" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Fill_cbdq5", | |
| "port": "items" | |
| }, | |
| "metadata": { | |
| "route": 9 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/Fill_cbdq5", | |
| "port": "fill" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Draw_ps7an", | |
| "port": "commands" | |
| }, | |
| "metadata": { | |
| "route": 9 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakeColor_pra9g", | |
| "port": "color" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Fill_cbdq5", | |
| "port": "fillstyle" | |
| }, | |
| "metadata": { | |
| "route": 9 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakeRandom_wcbwf", | |
| "port": "numbers" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeColor_pra9g", | |
| "port": "hue" | |
| }, | |
| "metadata": { | |
| "route": 5 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakeRandom_guh5x", | |
| "port": "numbers" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeColor_pra9g", | |
| "port": "saturation" | |
| }, | |
| "metadata": { | |
| "route": 5 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakeRandom_guh5x", | |
| "port": "numbers" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeColor_pra9g", | |
| "port": "lightness" | |
| }, | |
| "metadata": { | |
| "route": 5 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "GetButton", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "ListenClick", | |
| "port": "element" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakeRange_lb9hw", | |
| "port": "range" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeGrid_st846", | |
| "port": "x" | |
| }, | |
| "metadata": { | |
| "route": 5 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakeRange_lb9hw", | |
| "port": "range" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeGrid_st846", | |
| "port": "y" | |
| }, | |
| "metadata": { | |
| "route": 5 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakeGrid_st846", | |
| "port": "point" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeRectangle_1rmr9", | |
| "port": "point" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "Send0", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeRandom_guh5x", | |
| "port": "min" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "Send0", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeRandom_wcbwf", | |
| "port": "min" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "Send100", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeRandom_guh5x", | |
| "port": "max" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "Send100", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeRandom_guh5x", | |
| "port": "count" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "Send360", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeRandom_wcbwf", | |
| "port": "max" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "Send500", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeRandom_wcbwf", | |
| "port": "count" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "NewColors", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "Send0", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "NewColors", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "Send100", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "NewColors", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "Send360", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "NewColors", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "Send500", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "ListenClick", | |
| "port": "click" | |
| }, | |
| "tgt": { | |
| "process": "NewColors", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "Start", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "NewColors", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "data": "#mycanvas", | |
| "tgt": { | |
| "process": "dom/GetElement_an98u", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "canvas/MakeRange_lb9hw", | |
| "port": "from" | |
| } | |
| }, | |
| { | |
| "data": 10, | |
| "tgt": { | |
| "process": "canvas/MakeRectangle_1rmr9", | |
| "port": "width" | |
| } | |
| }, | |
| { | |
| "data": 10, | |
| "tgt": { | |
| "process": "canvas/MakeRectangle_1rmr9", | |
| "port": "height" | |
| } | |
| }, | |
| { | |
| "data": 2, | |
| "tgt": { | |
| "process": "canvas/Stroke_3m3hk", | |
| "port": "linewidth" | |
| } | |
| }, | |
| { | |
| "data": true, | |
| "tgt": { | |
| "process": "canvas/Draw_ps7an", | |
| "port": "drawevery" | |
| } | |
| }, | |
| { | |
| "data": true, | |
| "tgt": { | |
| "process": "canvas/Draw_ps7an", | |
| "port": "clearevery" | |
| } | |
| }, | |
| { | |
| "data": 200, | |
| "tgt": { | |
| "process": "canvas/MakeRange_lb9hw", | |
| "port": "to" | |
| } | |
| }, | |
| { | |
| "data": "30", | |
| "tgt": { | |
| "process": "canvas/MakeRange_lb9hw", | |
| "port": "count" | |
| } | |
| }, | |
| { | |
| "data": "#000000", | |
| "tgt": { | |
| "process": "canvas/Stroke_3m3hk", | |
| "port": "strokestyle" | |
| } | |
| }, | |
| { | |
| "data": "#mybutton", | |
| "tgt": { | |
| "process": "GetButton", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "Send0", | |
| "port": "number" | |
| } | |
| }, | |
| { | |
| "data": 100, | |
| "tgt": { | |
| "process": "Send100", | |
| "port": "number" | |
| } | |
| }, | |
| { | |
| "data": 360, | |
| "tgt": { | |
| "process": "Send360", | |
| "port": "number" | |
| } | |
| }, | |
| { | |
| "data": 500, | |
| "tgt": { | |
| "process": "Send500", | |
| "port": "number" | |
| } | |
| }, | |
| { | |
| "data": "true", | |
| "tgt": { | |
| "process": "Start", | |
| "port": "in" | |
| } | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment