Watchfaces creation

> Watchfaces creation

Watchface creation is fairly simple, requiring only QML knowledge. This guide will walk you through the steps.

Preparing watchface creation

First, clone the repository as it contains all watchfaces. Then, navigate to the watchfaces directory. In here, copy 000-default-digital.qml to a new file to use as a base for watchface creation.

Testing your watchface locally

To test your watchface locally, I personally open the qml file using qmlscene: qmlscene xxx-my-watchface.qml. Of course, other QML previewing tools should work too.

To be able to test properly, replace all references to wallClock.time with new Date(), place an image in the same directory named background.jpg and put the following code just below the first Item statement:

  Image {
      source: "background.jpg"
      width: 160
      height: 160

The above code allows you to see what the watchface would look like on an actual device, as qmlscene by default uses a pure white background.

Testing on the watch

Make sure to replace all instances of new Date() with wallClock.time and remove the background Image statement. Then, simply push it to the watch: adb push xxx-my-watchface.qml /usr/share/asteroid-launcher/watchfaces/. You can then go to watchfaces in the AsteroidOS settings. If you also pushed an xxx-my-watchface.jpg file, this will be used as preview. Otherwise, you will have to tap a white square to activate it.

If you want to update the watchface, you have to push the new version to the device. Do note that AsteroidOS may cache the watchface. The easiest way to fix this is to “restart” the device by running the following command: adb shell systemctl restart user@1000.

About the author: kido