Huawei Watchfaces für Android Wear - Wiki

Huawei Watchfaces Wiki (Version 1.0 – 23.03.2018)

Die Welt der Technik schreitet immer weiter vorwärts und auch Smartwatches werden – zumindest bei mir – immer beliebter. Doch mich persönlich stört es, wenn ich jeden Tag auf das gleiche Bild schauen muss. Daher habe ich mich ein wenig mit den Designs für die Huawei Watch 2 – also Android Wear – beschäftigt.

Am Anfang war es eher kompliziert und ich habe gefühlt eine Ewigkeit gebraucht, um das erste Watchface zu erstellen. Mit ein wenig Übung kann man aber relativ schnell seine eigenen Watchfaces erstellen.

Was ist ein Watchface?

Ein Watchface ist vergleichbar mit einem Theme für die Huawei Geräte. Es ist ein Design für Smartwatches, welche mit dem Betriebssystem Android Wear ausgestattet sind.

Woher bekomme ich Watchfaces

Es gibt viele verschiedene Möglichkeiten Watchfaces zu bekommen. Eine Möglichkeit ist es, sich die Watchfaces selber zu basteln. Hierzu gibt es im unteren Bereich noch einige Infos. Was für viele auch nicht uninteressant sein wird ist, dass es auch auf diversen Seiten und über Apps verschiedene Watchfaces gibt.

Android Wear App
- In der Android Wear App sind bereits einige Ziffernblätter vorinstalliert. DIese können über den „MEHR“ Knopf angezeigt und direkt auf der Uhr festgelegt werden.

Watchface als installierbare App
- Im Play Store gibt es ziemlich viele Apps, mit denen man relativ schnell und einfach ein Watchface installieren kann. Mit dem Suchbegriff „Watchface“ hat man die große Auswahl.

Watchmaker und Facer
- Im Play Store gibt es auch noch Watchface Apps, die mehr als nur ein Watchface installieren können. Es sind Editoren welche dem Nutzer die Möglichkeit geben, Watchfaces zu erstellen und zu bearbeiten. Es ist aber auch möglich, die in der App bereits bestehenden Watchfaces anzuwenden oder aber auch Watchfaces von der Community herunterzuladen und über die App anzuwenden.
- Download QR-Code
  
  WatchMaker Watch Faces
  
  Entwickler: androidslide
  
  Preis: Kostenlos
- Download QR-Code
  
  Facer Watch Faces
  
  Entwickler: Facer Studios
  
  Preis: Kostenlos

Community
- Die Community ist natürlich die größte Quelle überhaupt. Foren, Facebook und Internetseiten bieten verschiedene Watchfaces, Hilfestellungen und Möglichkeiten, Watchfaces zu bekommen. Im Facebook werden hin und wieder Watchfaces veröffentlicht. Unter anderem mit dem Hashtag #watchfacewednesday findet man wirklich schöne Watchfaces. Natürlich kann man auch einfach im Facebook zum Beispiel in der Huawei Gruppe (Link) nach einem gewünschten Watchface fragen. Es gibt allerdings auch noch weitere Communities, wie zum Beispiel bei Google+. Es gibt allerdings auch Webseiten, die sich auf Watchfaces spezifiziert haben. Nennenswert ist da zum Beispiel watchawear.com.

Watchface herunterladen und anwenden

Watchface Importieren

Ein selbsterstelltes Watchface kann exportiert und weitergegeben werden. Diese Dateien werden verteilt und können natürlich heruntergeladen werden. In der Watchmaker App zum Beispiel gibt es oben rechts ein Menü, über welches man die heruntergeladenen Watchfaces hinzufügen kann. Die Watchfaces werden dann in der Übersicht der eigenen Watchfaces angezeigt und können angewendet und bearbeitet werden.

Watchface selber bauen

Anders als bei den EMUI Themes gibt es für die Watchfaces gut funktionierende Apps, mit denen man sein gewünschtes Theme erstellen kann. Ausprobiert habe ich unter anderem Facer Watch Faces und WatchMaker Watch Face. Außerdem gibt es Apps, mit denen ein Watchface „installiert“ und angepasst werden kann. Hier kann man aber nur für das vorhandene Design unter anderem Farben und Informationen anpassen. Das Design selber ist vorgegeben.

Meine weiteren Erklärungen basieren auf der WatchMaker Watch Face App. Diese nutze ich nun seit einiger Zeit und komme damit sehr gut klar. Das Erstellen der Watchfaces ist damit recht einfach möglich.

Wie ist der Grundaufbau eines Watchfaces?

Es gibt zwei Möglichkeiten, die Watchfaces zu erstellen. Der einfachere Weg ist direkt über die App. Wie das funktioniert werde ich im nächsten Absatz erklären. Für die fortgeschrittenen Designer kann das Watchface auch über den Explorer direkt in der Datei vorgenommen werden. Dabei ist es vorteilhaft zu wissen, wie eine solche Datei aufgebaut ist.

Aufbau Datei

Die *.watch Datei ist wie eine zip-Datei aufgebaut. Sie kann zum Beispiel mit einem Windows Explorer oder zip-Tool geöffnet werden. Auf dem Smartphone würde ich hierfür den ES Datei Explorer empfehlen. Kann die Datei als *.watch nicht geöffnet werden, kann sie problemlos in *.zip umbenannt werden.

In der App gibt es dann zwei Ordner und zwei Dateien.

fonts Ordner
images Ordner
preview.png
watch.xml

Im fonts Ordner werden die verwendeten Schriftarten als ttf Datei abgelegt. Werden mehrere Schriftarten verwendet, benötigt man auch mehrere Schriftarten-Dateien.

Im images Ordner müssen alle verwendeten Grafiken abgelegt werden. Die grafiken sind als png Dateien vorhanden und starten mit einem Punkt. Als Beispiel würde ein Bild dann „.img250.png“ heißen. So wird es zumindest von der WatchMaker App angelegt.

Das preview Bild ist das Bild für die Vorschau. Dieses Bild wird dann in der Watchface App angezeigt. Das Bild ist – genau wie das Watchface selber – 512×512 Pixel groß.

Die wichtigste und komplizierteste Datei ist die watch.xml. In dieser Datei wird alles in die korrekte Reihenfolge und Position gebracht.

Aufbau xml Datei

<Watch name="" description="" features="24h Time,Battery Level,Date,Digital,Heart Rate,Phone Battery Level,Step Counter,Weather,WiFi" author="" web_link="" bg_color="000000" ind_loc="tc" ind_bg="Y" hotword_loc="tc" hotword_bg="Y">
    <Layer name="" type="shape" x="0" y="-163" gyro="0" rotation="0" skew_x="0" skew_y="0" opacity="85" alignment="cc" shape="Square" width="520" height="241" color="ffffff" display="n"/>
</Watch>

Mit dieser Struktur wird eine Position nach dem anderen angegeben. In der ersten Zeile wird der Name des Watchfaces mit Beschreibung und Funktionen festgelegt. Auch die globale Hintergrundfarbe kann hier eingestellt werden. Die „Layer“ sind die einzelnen Ebenen. Die erste Ebene ist die unterste Ebene und eher als Hintergrund gedacht. Die nachfolgenden Ebenen überdecken dann die vorherigen Ebenen. Wenn die darüber liegenden Ebenen kleiner oder teilweise durchsichtig sind (funktioniert bei png Dateien), können darunter liegende Ebenen noch sichtbar bleiben. Auch bei den Layern gibt es diverse Optionen, die angegeben werden sollten. Einen kleinen Auszug, welche Optionen bei welchen Layer-Typen benötigt werden, habe ich hier für euch.

Shape = Formen wie Viereck, Dreieck oder Kreis

Die App bietet drei Formen an, die eingefügt und angepasst werden können. Größe und Farbe sowie Positionierung sind individuell. Allerdings sind die Formen immer einfarbig. Möchte man nur einen Rahmen haben, muss man sich dies als Bild selber erstellen, oder mit zwei Ebenen arbeiten. Kleineres Viereck über ein größeres Viereck legen und schon hat man einen Rahmen. Folgende Parameter können eingegeben werden:

name
x und y
gyro
rotation
skew_x und skey_y
opacity
alignment
shape (was ist es für eine Form)
width und height
color
display (b = bright; d = dimmed, bd = always, n = never)

Beispiel:

Text

Mit Text kann zum Beispiel die Uhrzeit oder das Datum angezeigt werden. Bei dem text können sogenannte Expressions eingegeben werden, die sich dann in verschiedenen Abhängigkeiten verändern. Die Expressions werden in geschweiften Klammern eingegeben, Beispiel: {pblp} (PhoneBatteryLevelPercent). Folgende Angaben sind bei Text auszufüllen:

name
x und y
gyro
rotation
skew_x und skey_y
opacity
alignment
text
text_size
anim_scale_x und anim_scale_y
font
transform
color_dim und color
display (b = bright; d = dimmed, bd = always, n = never)

Beispiel:

Images = selbst eingefügte Bilder

Bilder können zum Beispiel als Hintergrund verwendet werden. Sollen Bilder durchsichtig sein, müssen diese als png gespeichert und eingefügt werden. Folgende Parameter gibt es für Bilder:

name
x und y
gyro
rotation
skew_x und skey_y
opacity
alignment
path
width und height
color
display (b = bright; d = dimmed, bd = always, n = never)

Beispiel:

Image_Cond = ein Bild mit mehreren Optionen

Image_Cond ist ein etwas komplexeres Bild. Hierbei handelt es sich um ein Bild mit mehreren Bildern drauf. Man kann zum Beispiel auf ein Bild vier WLAN Icons für die verschiedenen Signalstärken erstellen und diese dann in Abhängigkeit der Signalstärke anzeigen lassen. Dafür muss man dem Bild sagen, wann welches Bild genommen werden soll und was für ein Raster vorhanden ist.

name
x und y
gyro
rotation
skew_x und skey_y
opacity
alignment
path
width und height
color
cond_value (Bedingung)
cond_grid (Aufteilung auf dem Bild
display (b = bright; d = dimmed, bd = always, n = never)

Beispiel:

<Layer name=“wlan“ type=“image_cond“ x=“35″ y=“125″ gyro=“0″ rotation=“0″ skew_x=“0″ skew_y=“0″ opacity=“100″ alignment=“cc“ path=“.img249.png“ width=“60″ height=“60″ color=“000000″ cond_value=“{pws} >= 0.85 and 1 or {pws} >= 0.5 and 2 or {pws} >= 0.16 and 3 or 4″ cond_grid=“2×2″ display=“b“/>

Anpassungen in der WatchMaker App

Die Anpassungen in der App sind um einiges einfacher als die Arbeiten in der watch Datei selber. Der Watchmaker bietet zusätzlich zu bereits vorgefertigten Watchfaces auch viele Elemente, die bei einem neuen Watchface benutzt werden können.

Anleitung zum Erstellen eines Watchfaces

Auswahl bestehender Watchfaces

Beim Start der Watchmaker App werden gleich ein paar Watchface-Vorschläge angezeigt. Diese können benutzt oder bearbeitet werden. Beim Bearbeiten wird vom Watchface eine Kopie angelegt, welche dann verändert werden kann.

Über das Icon mit der Uhr und dem Plus oben rechts in der Ecke können neue, eigene Watchfaces erstellt werden. Über das Symbol rechts daneben können vorhandene Watchfaces importiert werden. Die Watchface Dateien müssen als .watch Datei vorliegen und können auf dem internen oder externen Speicher zur Verfügung stehen.

Neues Watchface

Startet der Nutzer die Erstellung eines neuen Watchfaces, werden ihm als erstes die Eigenschaften angezeigt. Hier kann der Nutzer den Namen des Watchfaces, die Beschreibung, den Autor und globale Einstellung angeben. Der schwarze Kreis wird dann der Hintergrund des zukünftigen Ziffernblattes. Die Hintergrundfarbe kann in den globalen Einstellungen auch verändert werden.

Beim Klick auf die kleine Uhr links in der Mitte kommt der Nutzer zu dem eigentlichen Watchface-Konfigurator. Nun kann der Nutzer loslegen, die Uhr zu designen. Dem Nutzer stehen dafür verschiedene Optionen zur Verfügung. Es können eigene Texte, vordefinierte Hintergründe oder Elemente für WLAN, Batterie und Wetter hinzugefügt werden. Ist dem Nutzer dies nicht genug, können auch eigene Bilder vom internen oder externen Speicher hinzugefügt werden.

Elemente

Expressions

Will der Nutzer ein Element nur unter bestimmten Bedingungen anzeigen oder bewegen lassen, kann dies vom Nutzer auch selber eingestellt werden. Über die Schaltfläche „Expressions“ können dynamische Werte erstellt werden. Werte wie ein Datum, das Wetter, die nächsten Kalendereinträge oder Sensordaten können hier konfiguriert werden.

Dies ist dann für fortgeschrittene Nutzer sehr wichtig. Durch diese Einstellungen können sehr viele Elemente konfiguriert werden. Die Werte können beliebig kombiniert und durch Text ergänzt werden. Mit Hilfe von „Lua Expression“ können Bedingungen erstellt werden. Für mich mit Java Kenntnissen war es am Anfang sehr schwer zu verstehen, dass „AND“ und „OR“ sind „und“ und „oder“ sind, sondern „wenn“ und „dann“. Hier wird dem Nutzer aber auch sehr gut geholfen. Unter den Expressions gibt es diverse Links, mit denen der Nutzer Hilfe zu den Expressions findet.

Einstellungen an Elementen

Zurück in dem Watchface Konfigurator werden alle Elemente mit den entsprechenden Einstellungen angezeigt. Für das aktuell selektierte Element werden darunter die Einstellungen angezeigt. Durch langes drücken auf die einzelnen Elemente können diese umsortiert, dupliziert (langes tippen) oder gelöscht werden. Das Plus Icon ist zum Hinzufügen eines Elementes; das Kreis Icon wechselt zwischen der normalen Anzeige und der gedimmten Anzeige