Analogue clock
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller
Analogue clock
My son came home today doing badly in a test in which he had to tell time on an analogue clock, so I figured I'll write a test he can do on his PC. What would be the best way to create an analogue clock in Livecode? - I was thinking of creating the face and the hands and then rotating the hands x degrees depending on the time I want to represent. Would that be the best way? - Is there some control I can insert/download that could do it for me?
Thanks,
Carel
Thanks,
Carel
Re: Analogue clock
I think that the best way to do this is to draw the big and little hands as line graphics, and delete and redraw them as needed on an existing clockface.
There is an issue with setting the "angle" property of a graphic (though not of an image) at least through v. 5.5, which is why I suggest redrawing from a fixed point (easy) to wherever you need to on a circle. This should not be too onerous even down to the minute.
You might be able to make this happen with an image, setting its angle property, but you will work hard to lock one end to the center of the clockface. Or (anyone?) is there a way to take a line graphic or image, set its angle and, well, what part of its extent that can be designated as a starting point? LC is not a CAD program, where this is an utterly basic tool.
Craig Newman
EDIT.
Thinking about images, you could create one that is centered on the clockface and has as its content a line running only half the image extent. That is, say, a square image area where there is a line running from the center to one side. You can then set the angle of that image, and the "foot" of the line will stay centered, and rotate as required.
There is an issue with setting the "angle" property of a graphic (though not of an image) at least through v. 5.5, which is why I suggest redrawing from a fixed point (easy) to wherever you need to on a circle. This should not be too onerous even down to the minute.
You might be able to make this happen with an image, setting its angle property, but you will work hard to lock one end to the center of the clockface. Or (anyone?) is there a way to take a line graphic or image, set its angle and, well, what part of its extent that can be designated as a starting point? LC is not a CAD program, where this is an utterly basic tool.
Craig Newman
EDIT.
Thinking about images, you could create one that is centered on the clockface and has as its content a line running only half the image extent. That is, say, a square image area where there is a line running from the center to one side. You can then set the angle of that image, and the "foot" of the line will stay centered, and rotate as required.
Re: Analogue clock
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!
Re: Analogue clock
Simon.
I thought so. Just could not remember.
Craig
I thought so. Just could not remember.
Craig
Re: Analogue clock
Hi,
for an analogue clock I would use an oval graphic set it's arcAngle to 1, its borderwidth to 2 or 3 and then move it by using the startAngle of the oval graphic.
Here is a simple stack with 2 hands and 2 sliders to move the hands around. One would have to script the "mechanics" of the clock though.
the clock face is also an oval with dashes set to 3,42 (at 3 o'clock it does not fit exactly)
Kind regards
Bernd
for an analogue clock I would use an oval graphic set it's arcAngle to 1, its borderwidth to 2 or 3 and then move it by using the startAngle of the oval graphic.
Here is a simple stack with 2 hands and 2 sliders to move the hands around. One would have to script the "mechanics" of the clock though.
the clock face is also an oval with dashes set to 3,42 (at 3 o'clock it does not fit exactly)
Kind regards
Bernd
- Attachments
-
- basicClockHands.livecode.zip
- (1.24 KiB) Downloaded 369 times
Re: Analogue clock
Thanks everyone! - What Bernd did is exactly what I had in mind.
Carel
Carel
Re: Analogue clock
Hi Carel,
here is a working analogue clock. Look at the comments in the button how it works. You could also put the script of the button into a openCard handler.
And added a seconds hand.
I post it because it can be a bit tricky to convert the time to angles.
Of course you can change the design to your wishes. I used a couple of dropshadows to make the hands a little 3D.
Kind regards
Bernd
here is a working analogue clock. Look at the comments in the button how it works. You could also put the script of the button into a openCard handler.
And added a seconds hand.
I post it because it can be a bit tricky to convert the time to angles.
Of course you can change the design to your wishes. I used a couple of dropshadows to make the hands a little 3D.
Kind regards
Bernd
- Attachments
-
- basicAnalogueClock.livecode.zip
- (2.08 KiB) Downloaded 398 times
Re: Analogue clock
Carel,
did you see the second stack I made for you and your son?
Kind regards
Bernd
did you see the second stack I made for you and your son?
Kind regards
Bernd
Re: Analogue clock
Hi Bernd,
Yes I did, it is awesome.
Thanks,
Carel
Yes I did, it is awesome.
Thanks,
Carel
Re: Analogue clock
Hi Carel,
I finally managed to upload a new version of the analogue clock to revOnline.
It is aptly named Clock.
It optionally displays numerals, even roman, is resizable and has a choice of time marks.
And it behaves on days with daylight saving changes.
I hope that your son does not need it anymore, but just in case....
Kind regards
Bernd
I finally managed to upload a new version of the analogue clock to revOnline.
It is aptly named Clock.
It optionally displays numerals, even roman, is resizable and has a choice of time marks.
And it behaves on days with daylight saving changes.
I hope that your son does not need it anymore, but just in case....
Kind regards
Bernd
Re: Analogue clock
Hi Bernd,bn wrote: ↑Sun Nov 17, 2013 8:03 pmHi Carel,
I finally managed to upload a new version of the analogue clock to revOnline.
It is aptly named Clock.
It optionally displays numerals, even roman, is resizable and has a choice of time marks.
And it behaves on days with daylight saving changes.
I hope that your son does not need it anymore, but just in case....
Kind regards
Bernd
I feel as though I'm starting to get a good handle on some of the LiveCode basics and now want to try something a little more ambitious, such as trying to code a working analogue clock....!
I've looked at your analogue clock code which you kindly shared, but even though you have comprehensively commented out the code, the complete clock is still beyond my understanding at the moment!
I think I need to start a lot simpler - I was thinking of coding just a single hand (a second hand) which sweeps around a circular graphic in 60 seconds.
I think I understand most of your code for the second hand
Code: Select all
-- Bernd's 'seconds' code
put the date && the long time into tDate -- we need this to adjust for daylight saving
convert tDate to dateItems
put tDate into tCurrDateItems
convert tDate to seconds
-- end adjust
put item 6 of tCurrDateItems into tSeconds -- this gives me the seconds of the current time
put tSeconds * 6 into tSecondsAngle --convert to angle in degrees (each move of the second hand is 6 degrees)
-- this bit is a bit more difficult for me to understand but with a working model I can probably figure it out by trial and error
put (360 - tSecondsAngle + 90) into tSecondsAngle -- adjust for clockwise increment and for 0 or 12 being at the top
set the startangle of grc "seconds" to tSecondsAngle
-- end seconds
I was hoping that you might have an early prototype of your clock that might help me at this stage??
Thanks for any help,
Kind regards,
Glenn
Re: Analogue clock
Glenn,
I think what is confusing about the seconds handle is that in Livecode 0 degrees point to the right and an increase in degrees moves counter clockwise.
That is what
is for.
I made a small stack that has a slider from 0 to 360 and that slider sets the startAngle of an oval graphic that has an arcAngle of 2.
If you move the slider you will notice it starts at "east" and moves counter clockwise. If you hold down the option key / alt key then 0 will be "north" and it moves clockwise.
I think this is the missing piece to understand the code.
Kind regards
Bernd
I think what is confusing about the seconds handle is that in Livecode 0 degrees point to the right and an increase in degrees moves counter clockwise.
That is what
Code: Select all
put (360 - tSecondsAngle + 90) into tSecondsAngle
I made a small stack that has a slider from 0 to 360 and that slider sets the startAngle of an oval graphic that has an arcAngle of 2.
If you move the slider you will notice it starts at "east" and moves counter clockwise. If you hold down the option key / alt key then 0 will be "north" and it moves clockwise.
I think this is the missing piece to understand the code.
Kind regards
Bernd
Re: Analogue clock
Many thanks Bernd,
this is very helpful, now I understand where the + 90 comes from!
Hopefully I can build on this now and eventually get the hand to rotate around in 60 seconds, and in sync with the current seconds - well, that's my aim - it might take me some time....!
Thanks again,
Regards,
Glenn
this is very helpful, now I understand where the + 90 comes from!
Hopefully I can build on this now and eventually get the hand to rotate around in 60 seconds, and in sync with the current seconds - well, that's my aim - it might take me some time....!
Thanks again,
Regards,
Glenn