Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Analogue Clock Dashboard Example

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.

[{"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"}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment