-
-
Save bergie/efd306b5846c236998a63c535ceebed1 to your computer and use it in GitHub Desktop.
Webcam to palette
This file contains hidden or 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": "main", | |
| "environment": { | |
| "type": "noflo-browser", | |
| "content": "<video id=\"video\" autoplay loop style=\"max-width:100%;\"></video><br>\n<canvas id=\"colors\" width=\"640\" height=\"100\" style=\"max-width:100%;\"></canvas>\n<button id=\"start\">start camera</button>\n<p id=\"message\"></p>" | |
| }, | |
| "icon": "cog" | |
| }, | |
| "inports": {}, | |
| "outports": {}, | |
| "groups": [ | |
| { | |
| "name": "cam", | |
| "nodes": [ | |
| "#start", | |
| "#video", | |
| "listen click", | |
| "cam", | |
| "set src" | |
| ], | |
| "metadata": { | |
| "description": "" | |
| } | |
| }, | |
| { | |
| "name": "make squares", | |
| "nodes": [ | |
| "MakePoint", | |
| "MakeRange", | |
| "MakeRectangle" | |
| ], | |
| "metadata": { | |
| "description": "" | |
| } | |
| }, | |
| { | |
| "name": "draw palette", | |
| "nodes": [ | |
| "#colors", | |
| "to palette canvas", | |
| "fill" | |
| ], | |
| "metadata": { | |
| "description": "" | |
| } | |
| }, | |
| { | |
| "name": "cam to canvas", | |
| "nodes": [ | |
| "250ms", | |
| "drawImage", | |
| "offscreen canvas", | |
| "to canvas" | |
| ], | |
| "metadata": { | |
| "description": "" | |
| } | |
| } | |
| ], | |
| "processes": { | |
| "#video": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "label": "#video", | |
| "x": 612, | |
| "y": 252, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "cam": { | |
| "component": "gum/GetUserMedia", | |
| "metadata": { | |
| "label": "cam", | |
| "x": 612, | |
| "y": 396, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "#start": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "label": "#start", | |
| "x": 360, | |
| "y": 396, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "listen click": { | |
| "component": "dom/Listen", | |
| "metadata": { | |
| "label": "listen click", | |
| "x": 468, | |
| "y": 396, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "set src": { | |
| "component": "dom/SetAttribute", | |
| "metadata": { | |
| "label": "set src", | |
| "x": 720, | |
| "y": 396, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "drawImage": { | |
| "component": "canvas/DrawImage", | |
| "metadata": { | |
| "label": "drawImage", | |
| "x": 936, | |
| "y": 468, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "to canvas": { | |
| "component": "canvas/Draw", | |
| "metadata": { | |
| "label": "to canvas", | |
| "x": 1080, | |
| "y": 432, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "250ms": { | |
| "component": "core/RunInterval", | |
| "metadata": { | |
| "label": "250ms", | |
| "x": 936, | |
| "y": 324, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "fill": { | |
| "component": "canvas/Fill", | |
| "metadata": { | |
| "label": "fill", | |
| "x": 1404, | |
| "y": 180, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "MakeRectangle": { | |
| "component": "canvas/MakeRectangle", | |
| "metadata": { | |
| "label": "MakeRectangle", | |
| "x": 1152, | |
| "y": 108, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "MakeRange": { | |
| "component": "canvas/MakeRange", | |
| "metadata": { | |
| "label": "MakeRange", | |
| "x": 864, | |
| "y": 108, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "MakePoint": { | |
| "component": "canvas/MakePoint", | |
| "metadata": { | |
| "label": "MakePoint", | |
| "x": 1008, | |
| "y": 108, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "to palette canvas": { | |
| "component": "canvas/Draw", | |
| "metadata": { | |
| "label": "to palette canvas", | |
| "x": 1548, | |
| "y": 144, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "#colors": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "label": "#colors", | |
| "x": 1404, | |
| "y": 36, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "core/Drop_oi2nc": { | |
| "component": "core/Drop", | |
| "metadata": { | |
| "label": "core/Drop", | |
| "x": 1512, | |
| "y": 360, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "offscreen canvas": { | |
| "component": "canvas/CreateCanvas", | |
| "metadata": { | |
| "label": "offscreen canvas", | |
| "x": 936, | |
| "y": 612, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "image/GetColors_jpyf9": { | |
| "component": "image/GetColors", | |
| "metadata": { | |
| "label": "GetColors", | |
| "x": 1260, | |
| "y": 324, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "message": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "label": "message", | |
| "x": 360, | |
| "y": 576, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "writemessage": { | |
| "component": "dom/WriteHtml", | |
| "metadata": { | |
| "label": "writemessage", | |
| "x": 720, | |
| "y": 576, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| } | |
| }, | |
| "connections": [ | |
| { | |
| "src": { | |
| "process": "#start", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "listen click", | |
| "port": "element" | |
| }, | |
| "metadata": { | |
| "route": 9 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "listen click", | |
| "port": "event" | |
| }, | |
| "tgt": { | |
| "process": "cam", | |
| "port": "start" | |
| }, | |
| "metadata": { | |
| "route": 2 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "#video", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "set src", | |
| "port": "element" | |
| }, | |
| "metadata": { | |
| "route": 9 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "cam", | |
| "port": "url" | |
| }, | |
| "tgt": { | |
| "process": "set src", | |
| "port": "value" | |
| }, | |
| "metadata": { | |
| "route": 4 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "set src", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "drawImage", | |
| "port": "image" | |
| }, | |
| "metadata": { | |
| "route": 4 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "drawImage", | |
| "port": "drawimage" | |
| }, | |
| "tgt": { | |
| "process": "to canvas", | |
| "port": "commands" | |
| }, | |
| "metadata": { | |
| "route": 4 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "set src", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "250ms", | |
| "port": "start" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "250ms", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "to canvas", | |
| "port": "tick" | |
| }, | |
| "metadata": { | |
| "route": 2 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "MakeRange", | |
| "port": "range" | |
| }, | |
| "tgt": { | |
| "process": "MakePoint", | |
| "port": "x" | |
| }, | |
| "metadata": { | |
| "route": 3 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "MakePoint", | |
| "port": "point" | |
| }, | |
| "tgt": { | |
| "process": "MakeRectangle", | |
| "port": "point" | |
| }, | |
| "metadata": { | |
| "route": 3 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "MakeRectangle", | |
| "port": "rectangle" | |
| }, | |
| "tgt": { | |
| "process": "fill", | |
| "port": "items" | |
| }, | |
| "metadata": { | |
| "route": 3 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "fill", | |
| "port": "fill" | |
| }, | |
| "tgt": { | |
| "process": "to palette canvas", | |
| "port": "commands" | |
| }, | |
| "metadata": { | |
| "route": 7 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "#colors", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "to palette canvas", | |
| "port": "canvas" | |
| }, | |
| "metadata": { | |
| "route": 9 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "offscreen canvas", | |
| "port": "canvas" | |
| }, | |
| "tgt": { | |
| "process": "to canvas", | |
| "port": "canvas" | |
| }, | |
| "metadata": { | |
| "route": 9 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "to canvas", | |
| "port": "canvas" | |
| }, | |
| "tgt": { | |
| "process": "image/GetColors_jpyf9", | |
| "port": "canvas" | |
| }, | |
| "metadata": { | |
| "route": 4 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "image/GetColors_jpyf9", | |
| "port": "colors" | |
| }, | |
| "tgt": { | |
| "process": "fill", | |
| "port": "fillstyle" | |
| }, | |
| "metadata": { | |
| "route": 7 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "image/GetColors_jpyf9", | |
| "port": "canvas" | |
| }, | |
| "tgt": { | |
| "process": "core/Drop_oi2nc", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "cam", | |
| "port": "error" | |
| }, | |
| "tgt": { | |
| "process": "writemessage", | |
| "port": "html" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "message", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "writemessage", | |
| "port": "container" | |
| }, | |
| "metadata": { | |
| "route": 6 | |
| } | |
| }, | |
| { | |
| "data": "#video", | |
| "tgt": { | |
| "process": "#video", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": "#start", | |
| "tgt": { | |
| "process": "#start", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": "click", | |
| "tgt": { | |
| "process": "listen click", | |
| "port": "type" | |
| } | |
| }, | |
| { | |
| "data": "src", | |
| "tgt": { | |
| "process": "set src", | |
| "port": "attribute" | |
| } | |
| }, | |
| { | |
| "data": { | |
| "x": 0, | |
| "y": 0 | |
| }, | |
| "tgt": { | |
| "process": "drawImage", | |
| "port": "destpoint" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "MakeRange", | |
| "port": "from" | |
| } | |
| }, | |
| { | |
| "data": 640, | |
| "tgt": { | |
| "process": "MakeRange", | |
| "port": "to" | |
| } | |
| }, | |
| { | |
| "data": 11, | |
| "tgt": { | |
| "process": "MakeRange", | |
| "port": "count" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "MakePoint", | |
| "port": "y" | |
| } | |
| }, | |
| { | |
| "data": 64, | |
| "tgt": { | |
| "process": "MakeRectangle", | |
| "port": "width" | |
| } | |
| }, | |
| { | |
| "data": 64, | |
| "tgt": { | |
| "process": "MakeRectangle", | |
| "port": "height" | |
| } | |
| }, | |
| { | |
| "data": "#colors", | |
| "tgt": { | |
| "process": "#colors", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": true, | |
| "tgt": { | |
| "process": "to palette canvas", | |
| "port": "drawevery" | |
| } | |
| }, | |
| { | |
| "data": 250, | |
| "tgt": { | |
| "process": "250ms", | |
| "port": "interval" | |
| } | |
| }, | |
| { | |
| "data": 640, | |
| "tgt": { | |
| "process": "offscreen canvas", | |
| "port": "width" | |
| } | |
| }, | |
| { | |
| "data": 480, | |
| "tgt": { | |
| "process": "offscreen canvas", | |
| "port": "height" | |
| } | |
| }, | |
| { | |
| "data": true, | |
| "tgt": { | |
| "process": "image/GetColors_jpyf9", | |
| "port": "css" | |
| } | |
| }, | |
| { | |
| "data": 10, | |
| "tgt": { | |
| "process": "image/GetColors_jpyf9", | |
| "port": "colors" | |
| } | |
| }, | |
| { | |
| "data": "#message", | |
| "tgt": { | |
| "process": "message", | |
| "port": "selector" | |
| } | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment