NoFlo clock example

noflo.json

{
  "properties": {
    "environment": {
      "type": "noflo-browser",
      "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>"
    },
    "name": "Clock"
  },
  "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"
      }
    }
  ]
}