The smoke clock’s digits scroll appropriately on each minute change, similar to a mechanical odometer. I chose the Andale Mono font because I wanted something thin and I liked the zeroes with the dot in the center, but any font can be used. Andale Mono might not be everybody’s taste so this is a short tutorial on how to change the clock’s font.
First a little background. In Enlightenment, this kind of rolling animation can be accomplished in a graphical element by a combination of relative positioning and clipping. Each digit in the smoke clock is actually a panel with the next digit underneath it but clipped so that only the upper part is viewed. The scroll animation is managed by moving the image containing the stacked digit underneath the scrolling area.
In the above illustration, the white area can be thought of as a clipping region. The part’s description on the left describes the first position, on the right is the description for the ending target of the transition. Note the change in the relative offsets that move the image along the y-axis.
If you want to change the fonts you will need to change each digit stack and, because this must be done accurately I use the ImageMagick utility to create all the digit images. [ n.b., a previous tutorial created a digit template in the GIMP and then manipulated it with ImageMagick. ]
Here are the basic steps,
- Decompile the theme (edje_decc)
- Create a set of digits in the appropriate format
- Create a new folder (smoke/your_clock) for your new clock images
- Modify smoke/smoke.edc to use the smoke/your_clock images
- Rebuild the theme (edje_cc or build.sh in the decompiled theme folder)
- Set the new theme
I am going to assume you can decompile/compile/set a theme. It is quite likely that if you don’t know how to do that or find out how to do that, you should defer doing this tutorial until then.
Using ImageMagick to create digit cells
ImageMagick is nothing more than a collection of graphic manipulation utilities folded into a cohesive interface. This process is encapsulated in a script called
smokeclock.pl and uses the ‘convert’ utility to create a transparent image then annotate that image with the digits in the font you specify.
glenl@lola$ ./smokeclock.pl --font=Utopia-Regular
The above command will create a folder called Utopia-Regular and fill it will all of the images necessary for the clock. To find a font that ImageMagick knows about you can use the command
glenl@lola$ convert -list type
Now you are ready to integrate your digits into the theme:
- move the folder containing your new digits under the main smoke folder that was created when you decompiled the theme
- edit smoke’s clock.edc file to point to your folder
- recompile smoke
- copy the resulting theme to ~/.e/e/themes
- select your new theme and check out the clock
I didn’t leave you out in the woods entirely here. The clock.edc file is written so that the only change you need for this modification is at the top of the file.
// Allow for user modification of clock images #ifndef CLOCK_IMAGES #define CLOCK_IMAGES "Utopia-Regular" #endif
What can go wrong?
Most problems will be with alignment and while the smokeclock script is reasonably flexible it is rather simple. While testing I encountered a problem with a variable width font so here is a short explanation by way of an example to show how this is debugged. Start by creating digits for two fonts, Andale-Mono-Regular (the default) and Utopia-Regular:
glenl@lola$ smokeclock.pl --font=Andale-Mono-Regular glenl@lola$ smokeclock.pl --font=Utopia-Regular
If you look at the first digit set from these and look at them side-by-side you can see that the Utopia-Regular digits are too close to the left edge of the cell:
The digit cells will work fine but because of the offset, the Utopia-Regular digits will not look precisely correct with respect to the blinking colon that separates the hours from minutes. There is no command line fix for this in the script. I have an excuse for this and it has to do with how many command line options I am willing to implement. The script is written so that all relevant details of positioning are located at the top of the script. This particular problem requires that the X-position be shifted to the right a few pixels and those variables are called $top_origin and $bottom_origin. The default lines look like this,
my $top_origin = '+0+39'; # origin of top annotation my $bottom_origin = '+0+78'; # origin of bottom annotation
This is ImageMagick notation for the text annotation and defines the X- and Y-positioning of the text. To move the digits along the X-axis the first digit is increased. To determine the precise increment needed to align correctly, the image can be loaded into the GIMP and measured, or you can just use trial and error. In this case an appropriate value appears to be 2 pixels (+2+39 and +2+78).
Here is the result of the preceding work using the Utopia-Regular font face for the smoke clock. Note that the colon separator aligns nicely and there are no artifacts at the top or bottom of the digit display.
