anime.js - Xara Watch Re-imagined

[Acorn]

In early Xara days, Xara included illustrations in their component library.

Some might recognise this, with one or two slight changes; https://shared.xara.com/x7x8xzWgLu

Not all animations need to be flashy.

Acorn

Afternote: I have got the maths wrong for the minute hand - working on it.
Perhaps not back in a mo though.

[Acorn]

In the end, it was easier to drop this approach and go back to JavaScript basics.

Essentially the seconds steps() is replaced with a setTimeout() call of a second.
All you need then do is calculate the angles of the three hands and rotate them incrementally every second.

The JavaScript code then simplifies to :

<script>
var sh = document.querySelector('.secondHand');
var mh = document.querySelector('.minuteHand');
var hh = document.querySelector('.hourHand');

var angS;
var angM;
var angH;
function startTime() {
const today = new Date();
let h = today.getHours();
let m = today.getMinutes();
let s = today.getSeconds();
angS = 6 * s;
angM = 6 * m + s / 10;
angH = h%12 * 30 + angM / 12;
sh.style.transform = 'rotate(' + angS + 'deg)';
mh.style.transform = 'rotate(' + angM + 'deg)';
hh.style.transform = 'rotate(' + angH + 'deg)';
setTimeout(startTime, 1000);
}

startTime();
</script>

The new Clock is here: https://shared.xara.com/inYj3EIGpy

I'll leave you to work out how I made the hands have a rotational symmetry.

The design file: JS - Simpler Xara Watch Re-imagined.xar

Acorn

[Egg Bramhill]

Argh! I was still trying to work out the problem with your first xar file were the minute hand didn't equate to the correct setting!

[Acorn]

Argh! I was still trying to work out the problem with your first xar file were the minute hand didn't equate to the correct setting!

Sorry about that Egg. Do persist.

I have added a modulus 12 calculation to the hour statement: angleHour = current.getHours()%12 * 30 + angleMinute / 12;
I think the angleMinute / 12 part has to be wrong.

I abandoned it as the maths was iffy, the CPU usage was excessive and the alternative is simpler.

Acorn

[ss-kalm]

The first version, was correct all the time.

The second version seems to pull the time when it's invoked, but does NOT seem to show the current time constantly. It doesn't update.

[Acorn]

The first version, was correct all the time.
The second version seems to pull the time when it's invoked, but does NOT seem to show the current time constantly. It doesn't update.

Keith, I disagreed on the first.
If you press the button, there is a minute hand jump.

On the second, i think Xara blocks long-running scripts.
I included the design file as it run perfectly locally.
Here it it published to Xara Hosting (Magix) instead: http://acorn.xara.hosting/Tick-tock/

I am glad you are interested.

Acorn

[bwood]

Cool @acorn. Maybe someday, I’ll be half a coder, and make one myself. Awesome creativity.

[Egg Bramhill]

Okay Acorn, this was a struggle but I've managed to finish my watch.

It was based on a watch that I took off my wrist over 30 years ago when I swallowed the anchor. I've never worn it since. In fact I didn't even know I'd lost it until I looked for it to base the drawing on.

The watch was an analogue/digital combination. The analogue part was fairly small but with my eye site then I had no difficulty reading it.

So okay, without the original I've created my version but it's nothing like my old one. This one looks far more like an iWatch than the one I disgarded in 1991. But I was more interested in creating a better digital version than the one I had. I wanted to show the day, month and year in full as well having a suffix on the date. Also the time-zone (currently Grenwich Mean Time - GMT).

I unashamedly plagerised your 're-imagened' version. I altered the second hand as it was far too small at this size.

I also had problems intergrating your

const today = new Date();

into my digital script so I cheated and loaded mine as a webpage in an iframe.

I'd like to find a better LCD font and also be able to alter the text-styles in my divs but that's beyond me at present.

Thanks for the inspiration

LINK

[Acorn]

Egg, nice watch. Can't help with the font.

You code seems to load a JavaScript instance for the timing twice, just above your IFRAME and at the body bottom.

Acorn