Skip to content

Instantly share code, notes, and snippets.

@forresto

forresto/noflo.json

Last active October 24, 2017 08:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save forresto/3c0ffdf17195649a2d57 to your computer and use it in GitHub Desktop.
Save forresto/3c0ffdf17195649a2d57 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
noflo.json
{
"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"
},
"icon": ""
},
"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
}
},
"GetColors": {
"component": "image/GetColors",
"metadata": {
"label": "GetColors",
"x": 1260,
"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
}
}
},
"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": "to canvas",
"port": "canvas"
},
"tgt": {
"process": "GetColors",
"port": "canvas"
},
"metadata": {
"route": 4
}
},
{
"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": "GetColors",
"port": "colors"
},
"tgt": {
"process": "fill",
"port": "fillstyle"
},
"metadata": {
"route": 7
}
},
{
"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": "GetColors",
"port": "canvas"
},
"tgt": {
"process": "core/Drop_oi2nc",
"port": "in"
}
},
{
"src": {
"process": "offscreen canvas",
"port": "canvas"
},
"tgt": {
"process": "to canvas",
"port": "canvas"
},
"metadata": {
"route": 9
}
},
{
"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": 10,
"tgt": {
"process": "GetColors",
"port": "colors"
}
},
{
"data": 10,
"tgt": {
"process": "GetColors",
"port": "quality"
}
},
{
"data": true,
"tgt": {
"process": "GetColors",
"port": "css"
}
},
{
"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"
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment