NoFlo clock demo

noflo.json

{
  "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"
      }
    }
  ]
}