Demo Canny Edges

noflo.json

{
    "properties": {
        "name": "main",
        "id": "canny/main",
        "project": "canny",
        "environment": {
            "type": "noflo-browser",
            "content": "<canvas id=\"can\" width=\"640\" height=\"480\"></canvas>\n<video id=\"vid\" width=\"640\" height=\"480\" autoplay></video>"
        },
        "changed": true,
        "icon": ""
    },
    "inports": {},
    "outports": {},
    "groups": [],
    "processes": {
        "canvas/Draw_691zq": {
            "component": "canvas/Draw",
            "metadata": {
                "label": "canvas/Draw",
                "x": 684,
                "y": 144,
                "width": 72,
                "height": 72
            }
        },
        "canvas/DrawImage_u9nqt": {
            "component": "canvas/DrawImage",
            "metadata": {
                "label": "canvas/DrawImage",
                "x": 540,
                "y": 216,
                "width": 72,
                "height": 72
            }
        },
        "dom/GetElement_izhdz": {
            "component": "dom/GetElement",
            "metadata": {
                "label": "dom/GetElement",
                "x": 540,
                "y": 72,
                "width": 72,
                "height": 72
            }
        },
        "gum/GetUserMedia_mq16x": {
            "component": "gum/GetUserMedia",
            "metadata": {
                "label": "gum/GetUserMedia",
                "x": -72,
                "y": 252,
                "width": 72,
                "height": 72
            }
        },
        "dom/GetElement_3laub": {
            "component": "dom/GetElement",
            "metadata": {
                "label": "dom/GetElement",
                "x": -72,
                "y": 144,
                "width": 72,
                "height": 72
            }
        },
        "dom/SetAttribute_4jr98": {
            "component": "dom/SetAttribute",
            "metadata": {
                "label": "dom/SetAttribute",
                "x": 72,
                "y": 180,
                "width": 72,
                "height": 72
            }
        },
        "image/CreateImage_drf28": {
            "component": "image/CreateImage",
            "metadata": {
                "label": "image/CreateImage",
                "x": -72,
                "y": 36,
                "width": 72,
                "height": 72
            }
        },
        "image/ImageToCanvas_485r9": {
            "component": "image/ImageToCanvas",
            "metadata": {
                "label": "image/ImageToCanvas",
                "x": 180,
                "y": 36,
                "width": 72,
                "height": 72
            }
        },
        "image/VideoToCanvas_7x215": {
            "component": "image/VideoToCanvas",
            "metadata": {
                "label": "image/VideoToCanvas",
                "x": 180,
                "y": 180,
                "width": 72,
                "height": 72
            }
        },
        "image/GetCannyEdges_5fyff": {
            "component": "image/GetCannyEdges",
            "metadata": {
                "label": "image/GetCannyEdges",
                "x": 360,
                "y": 108,
                "width": 72,
                "height": 72
            }
        }
    },
    "connections": [
        {
            "src": {
                "process": "canvas/DrawImage_u9nqt",
                "port": "drawimage"
            },
            "tgt": {
                "process": "canvas/Draw_691zq",
                "port": "commands"
            },
            "metadata": {}
        },
        {
            "src": {
                "process": "dom/GetElement_izhdz",
                "port": "element"
            },
            "tgt": {
                "process": "canvas/Draw_691zq",
                "port": "canvas"
            },
            "metadata": {}
        },
        {
            "src": {
                "process": "dom/GetElement_3laub",
                "port": "element"
            },
            "tgt": {
                "process": "dom/SetAttribute_4jr98",
                "port": "element"
            },
            "metadata": {}
        },
        {
            "src": {
                "process": "gum/GetUserMedia_mq16x",
                "port": "url"
            },
            "tgt": {
                "process": "dom/SetAttribute_4jr98",
                "port": "value"
            },
            "metadata": {}
        },
        {
            "src": {
                "process": "image/CreateImage_drf28",
                "port": "image"
            },
            "tgt": {
                "process": "image/ImageToCanvas_485r9",
                "port": "image"
            },
            "metadata": {
                "route": null
            }
        },
        {
            "src": {
                "process": "dom/SetAttribute_4jr98",
                "port": "element"
            },
            "tgt": {
                "process": "image/VideoToCanvas_7x215",
                "port": "image"
            },
            "metadata": {
                "route": null
            }
        },
        {
            "src": {
                "process": "image/ImageToCanvas_485r9",
                "port": "canvas"
            },
            "tgt": {
                "process": "image/GetCannyEdges_5fyff",
                "port": "canvas"
            },
            "metadata": {}
        },
        {
            "src": {
                "process": "image/GetCannyEdges_5fyff",
                "port": "canvas"
            },
            "tgt": {
                "process": "canvas/DrawImage_u9nqt",
                "port": "image"
            },
            "metadata": {}
        },
        {
            "data": {
                "x": 0,
                "y": 0
            },
            "tgt": {
                "process": "canvas/DrawImage_u9nqt",
                "port": "destpoint"
            }
        },
        {
            "data": "#can",
            "tgt": {
                "process": "dom/GetElement_izhdz",
                "port": "selector"
            }
        },
        {
            "data": "src",
            "tgt": {
                "process": "dom/SetAttribute_4jr98",
                "port": "attribute"
            }
        },
        {
            "data": "#vid",
            "tgt": {
                "process": "dom/GetElement_3laub",
                "port": "selector"
            }
        },
        {
            "data": true,
            "tgt": {
                "process": "gum/GetUserMedia_mq16x",
                "port": "video"
            }
        },
        {
            "data": "Anonymous",
            "tgt": {
                "process": "image/CreateImage_drf28",
                "port": "crossorigin"
            }
        },
        {
            "data": true,
            "tgt": {
                "process": "canvas/Draw_691zq",
                "port": "drawevery"
            }
        },
        {
            "data": true,
            "tgt": {
                "process": "canvas/Draw_691zq",
                "port": "clearevery"
            }
        },
        {
            "data": "http://i.imgur.com/jSGgm7Z.jpg",
            "tgt": {
                "process": "image/CreateImage_drf28",
                "port": "url"
            }
        }
    ]
}