Analog Clock: Need some JS help please


#1

Hey Guys,

need some help with a little project that is using JavaScript. Here is my hype project:

https://dl.dropboxusercontent.com/u/75478515/counter.zip

  1. the first scene is a simple count-up and it is working as expected. I just would need to format my numbers like “0019” and not “19”

  2. in the second screen I am trying to use a HTML widget inspiered by https://cssanimation.rocks/clocks/ – here the respective codepen http://codepen.io/donovanh/full/vEjywy/

I am pretty sure that I am doing the things right, but unfortunately I can not get it running. Any idea what I am doing wrong here?

Or any idea for a simpler analog clock where I can define different timezones?

Any help is greatly appreciated!

Cheers,

Sandor


World Clock Template/Symbol
(Mark Hunte) #2

I think you just need to write the counter text like this example.

$('.counter3').text("00" + (Math.ceil(this.countNum)));


#3

Thanks @MarkHunte. This is working “partly” – only if the number has less digits than 4. But probably my question was misleading :slight_smile: I try to be more precize: I would like to start with “0000” and end up with “9264”… Hope this is making now more sense :slight_smile:


#4

Nevermind! After experimenting a bit i came up with this. Semms to working fine:

   $({
    countNum: $('.counter2').text()
}).animate({
    countNum: 9730
}, {
    duration: 30000,
    easing: 'linear',
    step: function () {
        $('.counter2').text(("0000" + (Math.ceil(this.countNum))).slice(-4));
    },
    complete: function () {
        $('.counter2').text("9730");
    }
});

Anyone an idea for my problem with the analog clock? Or even better: an idea to build an analog clock that can display world-time completely in Hype?


(Mark Hunte) #5

Well to start, making a Clock is pretty easy in Hype.

Clock_MH2.hypetemplate.zip (32.0 KB)


#6

@MarkHunte – thank you VERY much Mark! Very cool! I will figure out some ways to setup different timezones :wink: Just one thing in the code – I think that hould be like this for the hours (h * 12) insted of (h * 6):

var hoursHand = document.getElementById('hoursHand');
hypeDocument.setElementProperty(hoursHand, 'rotateZ', (h * 12)) 

Thank you again for the great support!!!


(Mark Hunte) #7

Oops my bad… :dizzy_face:

will update the example above in a min…


(Mark Hunte) #8

Hmm, must admit my math is not always great, in my mind

(h * 12) should have done it. But it looked wrong to me when displaying. So I looked at how the hour was obtained in you example…

(h * 30) + (m / 2)

Which seems to put the hour hand in the right place.


(Mark Hunte) #9

So…

A world clock.


To add to it simply duplicate a clock Symbol & drag it onto the scene.
Gve the new Symbol an ID. The ID needs to the timezone name for the place you want the time for.

i.e

Europe/London

Place like the USA may do things slightly different.

i.e New York works as US/Eastern

You can see a list here https://en.wikipedia.org/wiki/List_of_tz_database_time_zones.

It may have a list for a city like America/New_York if a code like this does not work there probably is a second one in the database for it. America/New_York = US/Eastern

P.s I cannot swear to any consistency with this as time zones are like mine fields…


Project Example

World Clock MH1.hypetemplate.zip (76.6 KB)


Clock Symbol.

Clock_Symbol.hypesymbol.zip (68.6 KB)


(Mark Hunte) #10

I have posted slight updated version in the Template Gallery


#11

@MarkHunte Mark, this is simply AMAZING! Thank you very, very much for the outstanding support. Well, this is actually much more than support :slight_smile:

Cheers!


(Mark Hunte) #12

No problem. I liked the idea of this.