Page 1 of 1
Simple Clock & Minor Problems
Posted: Thu Aug 09, 2012 9:50 pm
by endernafi
Hello Dear LiveCoders,
I've coded a simple -maybe most simple- clock.
You can find the stack file attached.
But there are some problems.
How can they be solved?
* The hands {hour hand, minute hand, second hand} are rotating but they look fractured, not as a smooth line.
* The three png images {hour, minute and second} were 200*200 px at first, but as the clock works their size is constantly changing.
I couldn't understand why.
* Sometimes the images shift from their original position, then they come back. Again, I couldn't understand why, thus I couldn't solve it.
Any help and advice, even beyond these three problems, are much appreciated.
Cheers,
~ Ender Nafi Elekcioglu
Re: Simple Clock & Minor Problems
Posted: Fri Aug 10, 2012 12:41 am
by sturgis
To fix the fracturing go into the property inspector for each of your 3 images and for quality choose "best" This should lessen any loss of quality during transformations (such as angle changes)
That alone might be enough to solve your issues, but you can also add 3 lines to force each image back to the same exact spot. Remember, when you are rotating this, you're rotating a square image. with zero angle the image and the screen dimensions exactly line up. But as you change the angle the width and height coordinates must adjust to accomodate the new orientation. So at a 45 degree angle, the corners of the original image are now pointing up, down, right and left so the new width of the image object is the distance from corner to corner. During angle changes the width and height of the image is continually changing, then throw in rounding errors and you see the size/positioning issues you've run in to.
If you want the images to always be in the center of the card just add the following lines
set the loc of image 1 to the loc of this card
set the loc of image 2 to the loc of this card
set the loc of image 2 to the loc of this card
As for the changing of size, its the same issue as above. Dealing with rounding errors during transformations can cause minor positional errors.
To get around this problem you might try a couple things. First, a circle by itself as the clock image, then seperate images for each hand, then move only the hands. (the circle image could include the center post also) You'll probably want to go this way anyway since you'll most likely want a non-rotating clock face.
Another option is to overlay (or underlay) a grc with a border wide enough to account for the variations, and don't move the grc.
Re: Simple Clock & Minor Problems
Posted: Fri Aug 10, 2012 3:37 am
by sturgis
Just did some poking around in the script, looks like you were adjusting the angle using a calculation that ends up causing errors (hands pointing farther from the right spot over time) so I simplified the script.
Here is a modified card script.
Code: Select all
## Doesn't really matter, but its pretty common
## to use k names for constants
## s variable names for script locals (like these which are local to this whole script
## g variable names for globals
## t for temporary (1 pass through then gone)
## and I think l (L) for handler local variables
## properties often start with a c (_c_ ustom property)
## makes it a little easier for others to jump in to your code
## if its obvious what is what.
local kCounter, kClockTicking
local kHour0, kMinute0, kSecond0
on preOpenCard
## I set the layer mode for the 3 hands graphics to Dynamic
## so that they get the benefit of the accelerated rendering
## did this in the property inspector for each.
set the acceleratedRendering of this stack to true
end preOpenCard
on mouseUp
##Untouched
put the short name of the target into gObject
switch gObject
case "start"
startTicking
break
case "stop"
put false into kClockTicking
break
end switch
end mouseUp
on startTicking
## If the user clicked start multiple times there would be several
## loops running at the same time giving strange behavoir, and if they
## click it enough times could cause a system slowdown (cpu bind)
## So I check to see if the clock is already ticking and if it is, exit from startTicking
if kClockTicking then exit startTicking
put true into kClockTicking
## No need to use send for the first call
tickTheClock
end startTicking
on tickTheClock
## If you want the dissolve effect to work, you would need to change
## the lock screen line to "lock screen for visual effect"
lock screen
put the internet date into gInternetTime
## In this case no need to set the delimiter.
## if you use word chunks it will work the same
## as setting item delim to space and then getting item 5
put word 5 of gInternetTime into gInternetHour
## Since the time was just retrieved, might as well put it
## into the casio field, this way the time displayed and the
## time on the click will always be exactly the same.
set the text of field "casio" to gInternetHour
## Uses your calculate the angle function
## Changed the function to accept a paremeter
## as before it returns a comma delimited list of angles
put calculatetheangle(gInternetHour) into tAngles
## Sets the angles for each
set the angle of image "second" to item 3 of tAngles
set the angle of image "minute" to item 2 of tAngles
set the angle of image "hour" to item 1 of tAngles
unlock screen with visual effect dissolve very fast
if kClockTicking then send tickTheClock to me in 1 second
end tickTheClock
## Changed this function to accept a parameter g
function calculateTheAngle pVar
set the itemDelimiter to ":"
put item 1 of pVar into gHour
put item 2 of pVar into gMinute
put item 3 of pVar into gSecond
## Never was entirely sure what the kCounter stuff was for
## So its gone. Also, since I like seeing numbers
## in the 360 degree range, used mod 360 for
## the hour since it can be up to 24 which gives angles
## beyond 360.
put -((gHour / 12) * 360) mod 360 into gHourAngle
put -((gMinute / 60) * 360) into gMinuteAngle
put -((gSecond / 60) * 360) into gSecondAngle
## If you decide you want a sweeping second hand
## you would need to increase the frequency of the send
## in ticktheclock and then round or trunc the values, and use the milliseconds
## for the angle calculations for each hand.
## Since its incrementing to specific points that always hit
## integers its not necessary.
put gHourAngle & comma & gMinuteAngle & comma & gSecondAngle into gResult
return gResult
end calculateTheAngle
Here is a link to your modified stack.
https://dl.dropbox.com/u/11957935/clock.livecode (No guarantee it will stay there all that long though. )
Re: Simple Clock & Minor Problems
Posted: Fri Aug 10, 2012 7:38 am
by endernafi
Hi Sturgis,
Thanks for both your first explanatory reply and the poked script.
I've learned much.
And that four simple circles changed the look of clock significantly

Thanks again.
Cheers,
~ Ender Nafi Elekcioglu
Re: Simple Clock & Minor Problems
Posted: Fri Aug 10, 2012 2:40 pm
by sturgis
Ok, i'm a bit slow sometimes, it finally clicked what you're trying to do with the kCounter calculation. (Finally watched the clock long enough to see the problem, you want incremental moves of the minute and hour hands.)
Sorry it didn't click before. I've changed things to make that work using the new stack, think its working well. YOu can grab the updated stack at the above link, here are the changes though.
Code: Select all
## seconds calc is unchanged
put -((gSecond / 60) * 360) into gSecondAngle
## minutes calc adds a factor based on the current second hand angle / 60 to get the minutes adjustment
put -((gMinute / 60) * 360) + round(gSecondAngle / 60) into gMinuteAngle
## same for hour adjust based on the current minute hand angle.
put -((gHour / 12) * 360) + round(gMinuteAngle / 60 ) into gHourAngle
EDIT: *sigh* works great for seconds and minutes, but working with time just confuselates me. However, changing the last equation (for hours) to
put -((gHour / 12) * 360) + (round(gMinuteAngle /12)) into gHourAngle
Should FINALLY work correctly. (use 12 instead of 60 since its hours.)
Re: Simple Clock & Minor Problems
Posted: Sat Aug 11, 2012 5:23 pm
by endernafi
Hi Sturgis,
Yep, that was what I tried to do, incremental moves.
But your stack is even cooler now.
I'll play with
windowShape and
decorations properties,
and use it on my desktop as a widget

I'll share the final app here...
Cheers,
~ Ender Nafi