Analogue Clock Dashboard Example

README.md

As Dashboard includes JQuery as well as Angular, you can use the extensive collection of JQuery examples and tutorials with it.

Here is a simple CSS driven analogue clock that you could easily adapt. It is based on a example on the web Old School Clock with CSS3 and jQuery. You will need to download the image files that are part of the archive that page links to.

Make sure you have httpStatic set in your settings.js file and put the CSS3Clock folder from the downloaded archive into your static folder. Then import the flow below, deploy and enjoy.

flow.json

[{"id":"23bfaf6e.f4754","type":"inject","z":"fc7dbb1a.619c18","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":120,"wires":[["f8fad940.923238"]]},{"id":"bb4c0107.7cbda","type":"debug","z":"fc7dbb1a.619c18","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":850,"y":120,"wires":[]},{"id":"f8fad940.923238","type":"ui_template","z":"fc7dbb1a.619c18","group":"839180c0.aa62a","name":"","order":0,"width":0,"height":0,"format":"<!-- https://css-tricks.com/css3-clock/ -->\n<style>\n    #clock {\n        position: relative;\n        width: 600px;\n        height: 600px;\n        margin: 20px auto 0 auto;\n        background: url(/CSS3Clock/images/clockface.jpg);\n        list-style: none;\n    }\n    \n    #sec, #min, #hour {\n        position: absolute;\n        width: 30px;\n        height: 600px;\n        top: 0px;\n        left: 285px;\n    }\n    \n    #sec {\n        background: url(/CSS3Clock/images/sechand.png);\n        z-index: 3;\n    }\n       \n    #min {\n        background: url(/CSS3Clock/images/minhand.png);\n        z-index: 2;\n    }\n       \n    #hour {\n        background: url(/CSS3Clock/images/hourhand.png);\n        z-index: 1;\n    }\n</style>\n\n<ul id=\"clock\">\t\n    <li id=\"sec\"></li>\n    <li id=\"hour\"></li>\n    <li id=\"min\"></li>\n</ul>\n\n<script>\n    $(function() {\n \n        setInterval( function() {\n            var seconds = new Date().getSeconds();\n            var sdegree = seconds * 6;\n            var srotate = \"rotate(\" + sdegree + \"deg)\";\n            \n            $(\"#sec\").css({ \"transform\": srotate });\n          \n        }, 1000 );\n        \n        setInterval( function() {\n            var hours = new Date().getHours();\n            var mins = new Date().getMinutes();\n            var hdegree = hours * 30 + (mins / 2);\n            var hrotate = \"rotate(\" + hdegree + \"deg)\";\n            \n            $(\"#hour\").css({ \"transform\": hrotate});\n          \n        }, 1000 );\n        \n        setInterval( function() {\n            var mins = new Date().getMinutes();\n            var mdegree = mins * 6;\n            var mrotate = \"rotate(\" + mdegree + \"deg)\";\n            \n            $(\"#min\").css({ \"transform\" : mrotate });\n          \n        }, 1000 );\n \n});\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":480,"y":120,"wires":[["bb4c0107.7cbda"]]},{"id":"839180c0.aa62a","type":"ui_group","z":"","name":"Analogue","tab":"41040a3a.45c1c4","disp":true,"width":"16","collapse":false},{"id":"41040a3a.45c1c4","type":"ui_tab","z":"","name":"Clock","icon":"dashboard"}]