The journey of creating an electric meter style Tizen watchface
I have seen some funny images posted about having an electric meter style watch with those rotating numbers, combining the retro feeling of those plates with the modern design of a digital watch.
Since I personally have a Samsung Tizen Watch, I wanted to try out how difficult it can be to make such a watch face. It has been done before by others (see here), I assume in a better and prettier way. This was more about me being curious how difficult it is to develop a watch face, and to get familiar with the Samsung Store.
First of all, it turned out that there is a really easy way to create watch faces. Samsung has created a designer studio called Galaxy Watch Designer, where you can drag and drop your images into, and it will apply the selected styles. Props to Samsung for creating a tool where people with no programming skills can create their own designs.
However, I was looking for something more challenging, and it turns out that you can also create watch faces in Tizen Studio, Samsung’s Eclipse fork for creating applications for Samsung watches, TVs, and other IoT devices.
To start a project, I highly recommend starting from one of the samples. There are quite a lot of them (for watch faces, currently there are 8, with different features and styles).
I started with the WeatherWatch tutorial, and removed every part I wasn’t needing. Now I needed a design to apply. I turned to Sketch, where it is relatively simple to design even more complex interfaces, with drop shadows, gradients and rounded corners. I explicitly designed everything onto a 360x360 pixels sized circle, so I can export everything immediately at original size.
This is the design I came up with:
I opted for a dark design so that I can save some battery (since the watch features an AMOLED screen). I added a half-transparent white gradient in the middle as a fake highlight, and a darker gradient at the top and bottom of the rotating digit display to act as a shadow, like they would disappear there.
At the bottom part of the watch, you can see the iconic rotating disk, which is also a gradient, but because of the color change it looks like disappears as well.
I’ve got everything ready to start working on my watch: a base project to start from, designs with cutouts, and the idea in my head.
My first impressions were quite good: you basically design the watch face as a webpage. You have your HTML file with the different elements of the face in it as <div>-s, the CSS in which you set all the sizes, colors and background images, and finally the JS where the magic happens.
I have to give Samsung a big thumbs up for not providing their own API’s for requesting the battery info or the GPS position, but they have actually implemented the WebKit / Mozilla API’s for requesting these (most of them are W3C standards now).
To display the time you just have to call tizen.time.getCurrentDateTime(), and display the correct digits based on the seconds, minutes and hours.
To tackle this, I have created a long vertical strip of numbers, starting from 9, then 0, 1, 2, 3… The 9 at the beginning is required because although the first number is 0, the number 9 above it would still peak through. For the same reason, there is an extra 0 at the end of the strip after the 9 on the bottom.
Based on the current digit, I offset the translation-Y property of the strip. When a new minute (or hour) is almost coming, I start to slide the strip more and more to top, as it would appear on a real electric meter.
Here came my first issue, which was actually not in the code , but in the idea. These electric meters can be really misleading, because when the time would be 23:59, then at the second digit from left, the 6 has started rotating into place, but is not there yet fully. But you can easily misread that as a 24:69:
So no wonder that not much people have done this before :)
Anyways, since this was more of a technical demo, I carried on.
Another nice thing from Samsung is the emulator. It works as expected, could do everything my watch could do, and it deploys the watchface app in a couple of seconds. The screenshot above was made on this emulator.
Remember that you should run the app in the Tizen Web Application configuration to run it on the simulator.
If you select Tizen Web Simulator Application, it will open a simulator in Google Chrome (since it uses the same Webkit the watch uses), but that will have less features, for example it does not give you the time, it just reports 0.
I was able to move the digits to their place now, but it all looked very chunky, so I wanted to tune it up a bit with animations. Turns out that regular animations you would use on websites are not supported, but Samsung has developed a library called ‘tau’, which you can include in your project, and then animate elements with. To get this ‘tau’ library JS, you need to create a new sample of the type UI→TAU UI Components, and then copy it over into your own project. They actually include multiple TAU libraries, but I actually found out that lib/tau/animation/tau.animation.js is enough (or the minified version of it). Next, you need to import it in your index.html:
Then you can invoke tau on the element to start an animation:
To remove the warning for the missing tau function, just add this above your main function:
/*global tau */Next, I started to work on a small extra feature, which is displaying the battery, on the small rotating disk: if the battery is almost full, the red part is very small. If it is almost depleted, then almost the whole disk is red.
I implemented this by creating a red line with the same size as the grey line (the original disk). I changed the width of the line on basis of the battery information I got.
After some testing and bugfixing, I got the watchface working. There were some hiccups though during the development process, like the emulator crashing a few times (luckily it starts up withing 30 seconds), and the most annoying, Tizen Studio locking me out of the project each time I restarted my machine:
The solution for this problem is to remove the hidden .metadata folder in the project directory, and then reimport the project in Tizen Studio.
But finally, I am ready to publish my app to the store! So I searched about how I could publish my watchface with Samsung, but I found not much, and what I found was mostly misleading, like other stores or just tutorials about the development part, but nothing about publishing.
It turns out that you have to register on seller.samsungapps.com as a private seller. After filling out all the required information, you will be able to create new applications. You can select between Android and Galaxy Watch, in this case I had to select the latter.
When submitting an application, you have to give a lot of info. Like at least 4 screenshots for just a watchface which displays the time.
Be aware that if you select China as a distribution country you need to give your app name a Chinese translation as well, otherwise you can’t submit your app.
When you think you can upload your binary and finally finish the submission process, you will be disappointed. For all new watch faces Samsung requires you to apply for a Design Review, where you have to upload a screenshot, and a real life photo of your watch face in usage, based on which they first have to approve you to upload a binary.
So I submitted my pictures, and waited. It took 6 days from request to approval. After that I have submitted my application to the store, for the second review. I have only targeted a subset of all the watches, only those which have a 360x360 display as mine. Still, it seems they were very serious about testing my application:
Finally, after another 6 days since submitting my application for the second review, my watchface was finally in the store! Altogether, I had to wait 12 days for this, and this would probably last even more for faces with more complex features and which target also more Tizen devices.
Even though, this was a fun project to work on. You can find the repository for the source code here, if you want to take a look at the internals.
