-
-
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