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

First, clone the https://github.com/AsteroidOS/asteroid-launcher 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.

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.

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: scp xxx-my-watchface.qml root@192.168.2.15:/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: ssh -t root@192.168.2.15 "systemctl restart user@1000".