Last active
October 23, 2017 17:22
-
-
Save forresto/7135158 to your computer and use it in GitHub Desktop.
snapped to 30px for the-graph - NoFlo clock example
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
| { | |
| "properties": { | |
| "environment": { | |
| "runtime": "html", | |
| "content": "<div class='area' title='.area'>\n <img id='clock' src='https://i.imgur.com/0S7R8OU.png' style='position:absolute; width:300px; height:300px; top:0; left:0;' />\n <img id='hours' src='https://i.imgur.com/Fw8L3L1.png' style='position:absolute; top:50px; left:130px; height:200px;' />\n <img id='minutes' src='https://i.imgur.com/WtSz99Q.png' style='position:absolute; top:0; left:140px; height:300px;' />\n <img id='seconds' src='https://i.imgur.com/m2PQs6E.png' style='position:absolute; top:0; left:145px; height:300px;' />\n</div>", | |
| "width": 300, | |
| "height": 300, | |
| "src": "./preview/iframe.html" | |
| }, | |
| "name": "NoFlo" | |
| }, | |
| "exports": [], | |
| "processes": { | |
| "getTimezoneOffset": { | |
| "component": "objects/CallMethod", | |
| "metadata": { | |
| "x": 360, | |
| "y": 480 | |
| } | |
| }, | |
| "makeTimezoneAngle": { | |
| "component": "math/Divide", | |
| "metadata": { | |
| "x": 540, | |
| "y": 480 | |
| } | |
| }, | |
| "fixHourAngle": { | |
| "component": "math/Add", | |
| "metadata": { | |
| "x": 720, | |
| "y": 420 | |
| } | |
| }, | |
| "makeHourRotation": { | |
| "component": "math/Divide", | |
| "metadata": { | |
| "x": 360, | |
| "y": 360 | |
| } | |
| }, | |
| "rotateMinuteHand": { | |
| "component": "css/RotateElement", | |
| "metadata": { | |
| "x": 720, | |
| "y": 240 | |
| } | |
| }, | |
| "rotateHourHand": { | |
| "component": "css/RotateElement", | |
| "metadata": { | |
| "x": 900, | |
| "y": 360 | |
| } | |
| }, | |
| "getSecondHand": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "x": 540, | |
| "y": 60 | |
| } | |
| }, | |
| "getMinuteHand": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "x": 540, | |
| "y": 180 | |
| } | |
| }, | |
| "getHourHand": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "x": 540, | |
| "y": 300 | |
| } | |
| }, | |
| "makeSecondRotation": { | |
| "component": "math/Divide", | |
| "metadata": { | |
| "x": 360, | |
| "y": 120 | |
| } | |
| }, | |
| "rotateSecondHand": { | |
| "component": "css/RotateElement", | |
| "metadata": { | |
| "x": 720, | |
| "y": 120 | |
| } | |
| }, | |
| "split": { | |
| "component": "core/Split", | |
| "metadata": { | |
| "x": 180, | |
| "y": 300 | |
| } | |
| }, | |
| "animationFrame": { | |
| "component": "dom/RequestAnimationFrame", | |
| "metadata": { | |
| "x": 180, | |
| "y": 60 | |
| } | |
| }, | |
| "createDate": { | |
| "component": "objects/CreateDate", | |
| "metadata": { | |
| "x": 180, | |
| "y": 180 | |
| } | |
| }, | |
| "makeMinuteRotation": { | |
| "component": "math/Divide", | |
| "metadata": { | |
| "x": 360, | |
| "y": 240 | |
| } | |
| }, | |
| "core/Repeat_qr1da": { | |
| "component": "core/Repeat", | |
| "metadata": { | |
| "x": 60, | |
| "y": 60, | |
| "label": "loadbang" | |
| } | |
| } | |
| }, | |
| "connections": [ | |
| { | |
| "src": { | |
| "process": "createDate", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "split", | |
| "port": "in" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "split", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "makeSecondRotation", | |
| "port": "dividend" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "getSecondHand", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "rotateSecondHand", | |
| "port": "element" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "makeSecondRotation", | |
| "port": "quotient" | |
| }, | |
| "tgt": { | |
| "process": "rotateSecondHand", | |
| "port": "percent" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "split", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "makeMinuteRotation", | |
| "port": "dividend" | |
| }, | |
| "metadata": { | |
| "route": 5 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "split", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "makeHourRotation", | |
| "port": "dividend" | |
| }, | |
| "metadata": { | |
| "route": 10 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "getMinuteHand", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "rotateMinuteHand", | |
| "port": "element" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "makeMinuteRotation", | |
| "port": "quotient" | |
| }, | |
| "tgt": { | |
| "process": "rotateMinuteHand", | |
| "port": "percent" | |
| }, | |
| "metadata": { | |
| "route": 5 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "getHourHand", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "rotateHourHand", | |
| "port": "element" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "animationFrame", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "createDate", | |
| "port": "in" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "split", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "getTimezoneOffset", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "getTimezoneOffset", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "makeTimezoneAngle", | |
| "port": "dividend" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "makeHourRotation", | |
| "port": "quotient" | |
| }, | |
| "tgt": { | |
| "process": "fixHourAngle", | |
| "port": "augend" | |
| }, | |
| "metadata": { | |
| "route": 10 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "makeTimezoneAngle", | |
| "port": "quotient" | |
| }, | |
| "tgt": { | |
| "process": "fixHourAngle", | |
| "port": "addend" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "fixHourAngle", | |
| "port": "sum" | |
| }, | |
| "tgt": { | |
| "process": "rotateHourHand", | |
| "port": "percent" | |
| }, | |
| "metadata": { | |
| "route": 10 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "core/Repeat_qr1da", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "animationFrame", | |
| "port": "start" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "data": "#hours", | |
| "tgt": { | |
| "process": "getHourHand", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": "#minutes", | |
| "tgt": { | |
| "process": "getMinuteHand", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": "#seconds", | |
| "tgt": { | |
| "process": "getSecondHand", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": 60000, | |
| "tgt": { | |
| "process": "makeSecondRotation", | |
| "port": "divisor" | |
| } | |
| }, | |
| { | |
| "data": 3600000, | |
| "tgt": { | |
| "process": "makeMinuteRotation", | |
| "port": "divisor" | |
| } | |
| }, | |
| { | |
| "data": "getTimezoneOffset", | |
| "tgt": { | |
| "process": "getTimezoneOffset", | |
| "port": "method" | |
| } | |
| }, | |
| { | |
| "data": "43200000", | |
| "tgt": { | |
| "process": "makeHourRotation", | |
| "port": "divisor" | |
| } | |
| }, | |
| { | |
| "data": "-720", | |
| "tgt": { | |
| "process": "makeTimezoneAngle", | |
| "port": "divisor" | |
| } | |
| }, | |
| { | |
| "data": "start", | |
| "tgt": { | |
| "process": "core/Repeat_qr1da", | |
| "port": "in" | |
| } | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment