Saturday 30 July 2016

WatchMaker - unpacking the .watch file - updated!

WatchMaker has been enhanced since I wrote this post originally, so I thought I'd post an updated version.

When you export a watch from WatchMaker, the app creates a ".watch" file.  This can then be imported by someone else, or uploaded to a face sharing website (such as FaceRepo) for others to enjoy.  

If you're like me though, you might be interested in how this ".watch" file is made up though, what it contains.  So let's take one of my first watch faces for example...



The file itself is a ZIP archive, so the first step is to extract the files.  Personally I prefer 7-Zip, but you can use the tool of your choice for this.

After you've unpacked the files, you should see a structure something like this...



The files included in this example are...

  • fonts
    • Roboto-Regular.ttf
  • images
    • .img25.jpg
    • .img60.png
    • .img61.png
    • .img62.png
    • .img63.png
  • preview.jpg
  • preview_dim.jpg
  • watch.xml

So any fonts and images that are used in the watch face are included in their respective folders.  For example, the ".img60.png" and ".img61.png" are Sprites that hold multiple images in one, for the battery levels.  There is also the background (".img25.jpg") and both watch hands (".img62.png" and ".img63.png").

There are also two preview images, for both the normal/bright preview ("preview.jpg") and the dimmed preview ("preview_dim.jpg").

The final file (watch.xml) is probably the most interesting, as this contains all of the settings and configuration of the watch face and the layers that make it up.  You can open this file to view in a web browser, or you can edit it in any text editor (I prefer Notepad++)...



This ".xml" file has a root <Watch> tag, with attributes that contain the settings for the watch face, and then a number of <Layer> tags, with attributes that contain the configuration for each layer.  Whilst you may or may not be familiar with XML, it should be easy enough to tell from the attributes and their values how these match up with the different properties in the WatchMaker app.  

The main addition in recent months is the "features" attribute of the <Watch> tag - this is automatically updated as you edit the watch face and add/remove tags.  It is then used by sites (such as FaceRepo) to list the features that your watch face has.

This includes the layers of type "image" which have a "path" and those of type "text" which have a "font", both of which link to the included files above.  Also there's the "display" attribute, which is "b" for bright only, "d" for dimmed only and "bd" for always.

Next time I'm working on a complicated LUA script, I may well export it to Dropbox so I can write it on my laptop, then import it back into the WatchMaker app - much easier than typing curly braces on my phone keyboard!

There is also the option now to export a watch face in "protected" mode.  This creates a slightly different set of files...


Now there is an extra file called "watch.pxml", and the contents of the "watch.xml" file are quite different...


Now "watch.xml" only contains the <Watch> tag, with the "protection" attribute set.  

All of the layers are in "watch.pxml"...



...but they're encrypted!  This is great for when you've created a watch that you want to sell on the Play store, or upload without the risk of someone copying and modifying your watch face.

Hopefully you've found this update useful.

Friday 29 July 2016

New watch face - Pokemon Go

Pokemon Go is probably the biggest craze right now, enticing adults and children alike into running around catching and hatching Pokemon.  

The game divides people into 3 teams...

  1. Team Instinct, Colour - Yellow, Leader - Spark, Mascot - Zapdos
  2. Team Mystic, Colour - Blue, Leader - Blanche, Mascot - Articuno
  3. Team Valor, Colour - Red, Leader - Candela, Mascot - Moltres

To celebrate the fun I'm having playing this game, I decided to create a watch using WatchMaker which, just like the game, allows you to choose a team (by tapping the center of the watch face)...






You can download the watch face from FaceRepo.

I hope you enjoy!