Windows CE Programming

How to prepare and test a Zepp watchface

Done with Amazfit GTR 2E

Before you start, you need a lot of files prepared:

• A background image to be used as watchface
• A hour, minute and second dial, if you create an analog watchface
• Digits and symbols to be used, for example the digits 0-9, a period, a percent, a ‘°C’, a distance unit (km) and others as you like to place on your watch face.

The background watchface for the GTR2E is 454×454 pixels. You need to know, how to do precise pixel images. The hands have to be symmetric, so they can easily rotate.

The digits can be created one by one using your favorite painting tool (i.e. Paint.Net, Inkscape or Painter or even GIMP). Another option is to use fontforge or the fontimage tool (Linux only) or a fontforge python script. Imagemagick is also useful if you need to invert or make the images transparent.

Fontimage example

Create a small text in white with transparent (black) background from Comic Sans Bold Truetype font:

fontimage --pixelsize 22 --text "km" -o km_comicsans1.png ComicSansMSBold.ttf
-or-
fontimage --pixelsize 22 --text "°C" -o gradCelsius_comicsans1.png ComicSansMSBold.ttf

Then invert the image (using imagemagick convert):

convert km_comicsans1.png -negate km_comicsans_n.png
-or-
convert gradCelsius_comicsans1.png -negate gradCelsius_comicsans_n.png

Finally make the black background transparent:

convert km_comicsans_n.png -transparent black km_comicsans.png
-or-
convert gradCelsius_comicsans_n.png -transparent black gradCelsius_comicsans.png

Another example for a bash script to generate digits:

#!/bin/sh
for n in 0 1 2 3 4 5 6 7 8 9 '.' ':' '%' '°C' 'km'
do
  fontimage --pixelsize 22 --text $n -o $n_1.png "ComicSansMSBold.ttf"
  convert $n_1.png -negate $n_n.png
  convert $n_n.png -transparent black $n.png
done

In the above script 22 is the pixel size of the images and ComicSansMSBold.ttf is the font to be used.

If you need to create more, single bitmaps at once, you may use a fontforge python script. I used to first load the font to be used into Fontforge and change the Encoding to Latin-1, mark the first 127 chars, invert the selection and delete the rest. Then save this as a Fontforge font file for later use.

Now you can use a small python script and export the remaining glyphs to single bitmap files:

import os
from fontforge import *

font = open(os.sys.argv[1])
font.reencode("iso8859-1")
for glyph in font:
  if font[glyph].isWorthOutputting():
    if glyph.isupper():
      name = glyph + "_capital"
    else:
      name = font[glyph].glyphname
      # or name it with ' + "_" + str(font[glyph].unicode)' added
      print ("glyph: " + glyph + ", unicode: " + str(font[glyph].unicode) + ", name: " + name + "\n")
      font[glyph].export("c:/temp/" + name + ".png", 22)

If you do not want to start this from command line, you may replace ‘os.sys.argv[1]’ by the path and name of your saved Fontforge font file or a TrueType font file. Be warned that you get many bitmap files now. Possibly do that within an empty new directory.

Now that you have your images ready, go on and start a watchface.

Assemble the Watchface

Continue reading ‘Create Watchface with Zepp Editor for Amazfit’ »