Tutorial - Creating a Clock with an Image Strip

[DrewVosburg]

It has been done before, but this guide will help you create a clock using an image strip.
The idea here is to only have ten numbers in the strip, so that one might change the font
 easily.  This isn't something that may come up often, but it's useful to know if you want
to make a multicolored font for a clock.

Let's suppose we have a 6px wide image strip of numbers, 0-9 from top to bottom:

Code: [Select]

%xl(N,numbers.bmp,0,0,10)

We can use these numbers to fill in each digit for the clock.  The trickiest part about this
procedure is positioning the clock.  This clock will be 31 px wide, each digit being 6px, and
a colon in the center that is 3px wide.  Placement for this tutorial will be in the upper left
corner (0,0), but you can move the clock by adding to the X and Y of each viewport.

We will start with the hours.  I am using a 12 hour clock. The same principles apply with
a 24 hour clock, although a 12 hour clock begins at 1, while a 24 hour clock begins at 0. 
Remember that subimage "a" is the number zero, and "b" is one.  The first nine will be
nothing, and the last three will be a one.

Code: [Select]

#HOURS - Tens place
%V(0,0,6,-,-)
%?cl<|||||||||%xd(Nb)|%xd(Nb)|%xd(Nb)>

The ones place is a bit more complex:

Code: [Select]

#HOURS - Ones place
%V(6,0,6,-,-)
%?cl<%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Nj)|%xd(Na)|%xd(Nb)|%xd(Nc)>

This conditional has twelve values, one for each of the twelve hours.  The important thing
to remember with a 12 hour clock is that it begins counting at 1, not 0.  Thus, the first
entry is subimage "b", for 1.  Subimages "a", "b", and "c" round out the last three values
for 10, 11, and 12.

Let's add in a blinking colon to divide hours from minutes.  First, preload the image:

Code: [Select]

%xl(c,colon.bmp,0,0)

Now let's give it a viewport:

Code: [Select]

%V(12,0,3,-,-)

I'm going to use a %t tag to make it blink in half second intervals.

Code: [Select]

%t(0.5)%xd(c);%t(0.5);

The tens place for minutes is basically the same as the tens place for the hours, but
continued.  Because there are sixty values for minutes and the tens digit changes
every ten values, we must make 6 sets of 10 values.  The numbers 0-5 will be used,
which translates to subimages "a"-"f".

Code: [Select]

#MINUTES - Tens place
%V(15,0,6,-,-)
%?cM<%xd(Na)|%xd(Na)|%xd(Na)|%xd(Na)|%xd(Na)|%xd(Na)|%xd(Na)|%xd(Na)|%xd(Na)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)>

The ones place follows the same logic as the ones place for the hours.

Code: [Select]

#MINUTES - Ones place
%V(21,0,6,-,-)
%?cM<%xd(Na)|%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Na)|%xd(Na)|%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Na)|%xd(Na)|%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Na)|%xd(Na)|%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Na)|%xd(Na)|%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Na)|%xd(Na)|%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Nj)>

Seconds can be added by the same method, just changing the conditional.

Final code:

Code: [Select]

%wd
#PRELOAD IMAGES
%xl(N,numbers.bmp,0,0,10)
%xl(c,colon.bmp,0,0)

#HOURS - Tens place
%V(0,0,6,-,-)
%?cl<|||||||||%xd(Nb)|%xd(Nb)|%xd(Nb)>
#HOURS - Ones place
%V(6,0,6,-,-)
%?cl<%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Nj)|%xd(Na)|%xd(Nb)|%xd(Nc)>
#COLON
%V(12,0,3,-,-)
%t(0.5)%xd(c);%t(0.5);
#MINUTES - Tens place
%V(15,0,6,-,-)
%?cM<%xd(Na)|%xd(Na)|%xd(Na)|%xd(Na)|%xd(Na)|%xd(Na)|%xd(Na)|%xd(Na)|%xd(Na)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nb)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nc)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Nd)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Ne)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Nf)|%xd(Na)>
#MINUTES - Ones place
%V(21,0,6,-,-)
%?cM<%xd(Na)|%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Na)|%xd(Na)|%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Na)|%xd(Na)|%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Na)|%xd(Na)|%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Na)|%xd(Na)|%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Na)|%xd(Na)|%xd(Nb)|%xd(Nc)|%xd(Nd)|%xd(Ne)|%xd(Nf)|%xd(Ng)|%xd(Nh)|%xd(Ni)|%xd(Nj)>

Hope you found this useful!  I am planning on adding it to a theme I made in order
to avoid having to make a custom .fnt, although it will have to happen eventually...
Post Merge: January 12, 2011, 01:14:52 PMIf you want the files i used to play with:

http://dl.dropbox.com/u/2255413/clock.zip

[Giova]

This is great, but it also reveal a limit of the wps language: these long sequences of values.

Working on something similar a while ago but with volume (-73 to 6), I was thinking on something like 'to', for instance <%xd(Na)|---|%xd(Nz)> instead of the whole sequence.
Just an idea...
Anyway, good job!

[JdGordon]

Nice, except this can be alot simpler.
use %?if(), %xd(label, subimage_number) and %xd(label, other_tag)..

http://www.rockbox.org/wiki/Main/CustomWPS#A_37if_40_41_logical_comparison_tag
http://www.rockbox.org/wiki/CustomWPS#xd_45_Display_a_preloaded_40sub_41image


I could also add a tag so either allow simple maths, or simply to split up another tags number... eg %?xx(%cl, 1)<0|1|2>   <- that says "get the first digit" and use that for the conditional... although I'm not entirely sure how to make that sensible.

[DrewVosburg]

I would KILL to be able to get certain digits of numbers.  I've transitioned to using ifs for the tens digits and keeping the ones the way they are.

With volume, my Fuze has a minimum value of -81dB, but the simulator has a minimum value of -73.  I had to use ifs for the ones digit, which then resulted in a series of if statements which hung the device on theme loading.  I got it to work, but it's ugly as sin.  ANY kind of math would be greatly appreciated!

[Llorean]

If the simulator reports different values for the volume than the same build revision, for the same target, that's a bug and should be reported on flyspray.

[KiwiCam]

I'm trying to make a Clock, but rather than use all those conditions, I was hoping I could using the %ss function.
That's not working for me. I want to replace the numbers with Images. What's currently the best way to do this?

Code: [Select]

%Vl(k,0,21,13,21,-)
%ss(0,1,%cH)
#%xd(D,%ss(0,1,%cH))
%Vl(k,15,21,13,21,-)
%ss(1,1,%cH)
#%xd(D,%ss(1,1,%cH))
%Vl(k,0,43,13,21,-)
%ss(0,1,%cM)
#%xd(D,%ss(0,1,%cM))
%Vl(k,15,43,13,21,-)
%ss(1,1,%cM)
#%xd(D,%ss(1,1,%cM))