Page 1 of 1

Simple Stylish Clock

Posted: Thu Feb 18, 2021 4:09 pm
by Electroguard
This example brings HTML and CSS and Javascript all together to create a simple but stylish digital clock.


Most of the style is initially commented out, so uncomment a particular line to see how it affect the style.
Note that although style values are usually embedded in the HTML, the script shows how Annex can specify style values in variables if wished, so don't forget to uncomment the appropriate variables as well.
Obviously the specified font file will only display if it is available on the Annex device - you can find some font files and more detailed instructions in the Skin Clock project here...
[External Link Removed for Guests]

And here is a handy W3Schools page for selecting different colours...
[External Link Removed for Guests]

In the same way that some of the style lines are commented out, feel free to insert some of your own between lines 7 and 11 to add more style.
Note that the syntax to specify a style parameter and its value is... style-parameter : value ;
Notice that white space is optional, but a colon must follow the parameter, and a semicolon must follow the value, else the parameter will be ignored.

Don't forget to tick the Editors 'Stop Log' checkbox to prevent it clogging things up.
The simple example shows how a 'live' clock display might easily be incorporated into your own projects, with or without styling.

Code: [Local Link Removed for Guests]

'Simple Stylish Clock - uncomment lines below to add styles, and tailor style values to your own liking
'clocksize$ = "5"
'clockcol$ = "darkblue"
'clockbak$ = "lightyellow"
'fontfile$ = "/dig7monoitalic.ttf"        'filename.ext of optional font file
'a$ = a$ + |<style> @font-face { font-family: myfont; src: url('| + fontfile$ + |');} </style>|
a$ = a$ + |<div id='clock' style=' |
'$ = a$ + |font-family:myfont; background:|+clockbak$+|; color:|+clockcol$+|; font-size:|+clocksize$+|em; |
'a$ = a$ + |border:1px solid gray; border-radius:.3em; text-align:center;padding:.18em; |
'a$ = a$ + |display: table; margin-right:auto;margin-left: auto;padding-left:.4em; padding-right:.4em; |
a$ = a$ + |;'>| + time$ + |</div><br>|
html a$
timer0 1000,ticktock

jscall |_$('clock').innerHTML = "| + time$ + |"| 

'------- End ------