NoFlo clock demo
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
{ | |
"properties": { | |
"name": "Clock Example", | |
"environment": { | |
"type": "noflo-browser", | |
"content": "<div class='area' title='.area'><img id='clock' src='http://i.meemoo.me/v1/in/GJPUFPc8ThuRp9itdXC9_clock-face.png' style='position:absolute; width:300px; height:300px;' /><img id='hours' src='http://i.meemoo.me/v1/in/fRL213GT1uCRltIqXkK2_clock-hours.png' style='position:absolute; top:50px; left:130px; height:200px;' /><img id='minutes' src='http://i.meemoo.me/v1/in/23DZFKYoRTOIAjPA7sed_clock-minutes.png' style='position:absolute; top:0; left:140px; height:300px;' /><img id='seconds' src='http://i.meemoo.me/v1/in/VU2HqPmuTqucRpnUGGBj_clock-seconds.png' style='position:absolute; top:0; left:145px; height:300px;' /></div>", | |
"width": 300, | |
"height": 300 | |
} | |
}, | |
"exports": [], | |
"processes": { | |
"getTimezoneOffset": { | |
"component": "objects/CallMethod", | |
"metadata": { | |
"x": 414, | |
"y": 627 | |
} | |
}, | |
"makeTimezoneAngle": { | |
"component": "math/Divide", | |
"metadata": { | |
"x": 621, | |
"y": 625 | |
} | |
}, | |
"fixHourAngle": { | |
"component": "math/Add", | |
"metadata": { | |
"x": 845, | |
"y": 529 | |
} | |
}, | |
"makeHourRotation": { | |
"component": "math/Divide", | |
"metadata": { | |
"x": 621, | |
"y": 523.5 | |
} | |
}, | |
"rotateMinuteHand": { | |
"component": "css/RotateElement", | |
"metadata": { | |
"x": 1110, | |
"y": 275 | |
} | |
}, | |
"rotateHourHand": { | |
"component": "css/RotateElement", | |
"metadata": { | |
"x": 1116, | |
"y": 428 | |
} | |
}, | |
"getSecondHand": { | |
"component": "dom/GetElement", | |
"metadata": { | |
"x": 849, | |
"y": 100 | |
} | |
}, | |
"getMinuteHand": { | |
"component": "dom/GetElement", | |
"metadata": { | |
"x": 854, | |
"y": 259 | |
} | |
}, | |
"getHourHand": { | |
"component": "dom/GetElement", | |
"metadata": { | |
"x": 841, | |
"y": 416 | |
} | |
}, | |
"makeSecondRotation": { | |
"component": "math/Divide", | |
"metadata": { | |
"x": 615, | |
"y": 170 | |
} | |
}, | |
"rotateSecondHand": { | |
"component": "css/RotateElement", | |
"metadata": { | |
"x": 1105, | |
"y": 117 | |
} | |
}, | |
"split": { | |
"component": "core/Split", | |
"metadata": { | |
"x": 346, | |
"y": 319 | |
} | |
}, | |
"secondTick": { | |
"component": "core/RunInterval", | |
"metadata": { | |
"x": 341, | |
"y": 108 | |
} | |
}, | |
"startClock": { | |
"component": "core/Repeat", | |
"metadata": { | |
"x": 241, | |
"y": 108 | |
} | |
}, | |
"createDate": { | |
"component": "objects/CreateDate", | |
"metadata": { | |
"x": 339, | |
"y": 219 | |
} | |
}, | |
"makeMinuteRotation": { | |
"component": "math/Divide", | |
"metadata": { | |
"x": 617, | |
"y": 325 | |
} | |
} | |
}, | |
"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": "secondTick", | |
"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": "startClock", | |
"port": "out" | |
}, | |
"tgt": { | |
"process": "secondTick", | |
"port": "start" | |
} | |
}, | |
{ | |
"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": 20, | |
"tgt": { | |
"process": "secondTick", | |
"port": "interval" | |
} | |
}, | |
{ | |
"data": "getTimezoneOffset", | |
"tgt": { | |
"process": "getTimezoneOffset", | |
"port": "method" | |
} | |
}, | |
{ | |
"data": "43200000", | |
"tgt": { | |
"process": "makeHourRotation", | |
"port": "divisor" | |
} | |
}, | |
{ | |
"data": "-720", | |
"tgt": { | |
"process": "makeTimezoneAngle", | |
"port": "divisor" | |
} | |
}, | |
{ | |
"data": true, | |
"tgt": { | |
"process": "startClock", | |
"port": "in" | |
} | |
} | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment