Xiaomi Amazfit Bip Watchface erstellen

Die Individualisierung einer Smartwatch steht immer häufiger im Mittelpunkt. Auch bei der Xiaomi Amazfit Bip können nicht nur bereits gelieferte Watchfaces verwendet, sondern auch eigene erstellt werden. Wie ihr ein Watchface selber erstellt versuche ich euch hier zu erklären.

Ein selbst erstelltes Watchface kann nicht nur den Akku schneller entleeren, sondern unter Umständen auch falsche Informationen anzeigen oder die Uhr beschädigen. Ich übernehme keine Garantie für Funktionalität (teste aber natürlich meine Watchfaces selber).

Eigenes Watchface erstellen

Schon bei der Pebble und der Huawei Watch 2 habe ich mit verschiedenen Watchfaces experimentiert. Bei der Amazfit habe ich mich schon vor dem Kauf mit den Watchfaces beschäftigt und mich dann extrem gefreut, als ich mein eigenes Watchface endlich ausprobieren konnte.

Was für Dateien sind die Watchfaces

Ein Watchface für die Amazfit Bip besteht aus einem einzelnen *.bin File. In dieser Datei sind durchnummeriert alle Bilder vorhanden, welche auf der Uhr angezeigt werden sollen. Das Herzstück des Watchfaces ist allerdings eine json Datei. Hier werden die Koordinaten der einzelnen Bilder und die anzuzeigenden Funktionen festgelegt.

Watchface Datei entpacken, bearbeiten und zusammenpacken

Ich dachte am Anfang, ich kann die *.bin Datei einfach mit einem zip Tool öffnen und bearbeiten. Das klappte bei allen Watchfaces der anderen Uhren bisher sehr gut – nur für die Amazfit Bip leider nicht. Um das Watchface zu öffnen, wird ein eigenes Tool benötigt.

Diese Tools sind nicht von mir und werden auf eigene Verantwortung genutzt.

Ich habe für die Bearbeitung der Watchfaces zwei Tools gefunden. Zum einen ist es eine Website mit einer Life-Vorschau, zum anderen ein Tool welches die .bin Dateien entpacken und wieder packen kann.

Website watchfaceEditor

Auf der Website kann man direkt seine eigene Watchfaces erstellen oder sich anschauen, wie die eigenen Watchfaces mit unterschiedlichen Werten aussehen würden. Es können verschiedene Elemente auf Knopfdruck hinzugefügt oder entfernt werden und die Positionen können mit Drag&Drop verändert werden. Auch werden gleich Default-Images geliefert, welche für den Anfang sicherlich verwendet werden können. Am Ende kann die Konfiguration exportiert und gespeichert werden. Eine schöne Funktion ist auch, ein bereits selbst erstelltes oder heruntergeladenes Watchface in den Editor zu importieren. Hierfür müssen auf der Startseite die Bilder und die json Datei hochgeladen werden. Sofort wird das Watchface angezeigt und kann bearbeitet werden.

Wenn hierzu noch eine kleine Anleitung gewünscht ist, kann ich dies sicherlich auch noch machen.

Software AmazfitBip Tools

Das Tool ist für die Erstellung eigener Watchfaces sehr wichtig. Es dient dazu, die erstellten Watchfaces zu entpacken und auch wieder in ein .bin zu verwandeln.

Beim entpacken erstellt dieses Tool einen Ordner mit den entsprechenden Dateien aus dem *.bin File. Um das Watchface zu entpacken, muss man nur die Watchface bin Datei auf die WatchFace.exe ziehen. Es wird dann im Ordner des Watchfaces ein neuer Ordner mit dem Namen des Watchfaces angelegt. Hier drin kann man nun arbeiten und Anpassungen machen. Ich habe dies als Grundlage genommen, um mein erstes eigenes Watchface zu bauen. Um das Watchface wieder zu einer bin Datei zu packen, muss die json Datei auf die WatchFace.exe gezogen werden. Wenn es keine Fehler gibt wird im Watchface-Ordner eine neue bin Datei erstellt.

Eigenes Watchface erstellen

Was brauchen wir alles, um ein schickes Watchface zu erstellen? Man sollte sich am Anfang Gedanken machen, was man alles auf der Uhr sehen möchte. Nicht nur die Werte sind wichtig, sondern auch das Design. Es ist aber wichtig, erstmal klein anzufangen. Wir machen ein kleines Beispiel gemeinsam, damit jeder eine Grundlage hat, um eigene Watchfaces zu erstellen.

  1. Tool AmazfitBip Tools herunterladen und entpacken
  2. Ordner anlegen – ich nutze immer den Namen vom Watchface als Ordnername
  3. Bilder erstellen für Hintergrund und Zahlen (hier Beispiele zum Download)
Bild Inhalt Abmessung Name Beispiel
Hintergrundbild kompletter Hintergrund 176 x 176 px 000.png Download
Zahlen für Uhrzeit Zahlen von 0 – 9 je nach Wunsch 001.png – 010.png Download
  1. Textdatei erstellen und in <watchface-name>.json umbenennen
  2. json Datei öffnen und folgendes einfügen:
{
 "Background": {
   "Image": {
     "X": 0,
     "Y": 0,
     "ImageIndex": 0
    }
  },
  "Time": {
    "Hours": {
      "Tens": {
        "X": 41,
        "Y": 30,
        "ImageIndex": 1,
        "ImagesCount": 10
      },
      "Ones":{"
        "X": 65,
        "Y": 30,
        "ImageIndex": 1,
        "ImagesCount": 10
      }
    },
    "Minutes": {
      "Tens": {
        "X": 94,
        "Y": 30,
        "ImageIndex": 1 ,
        "ImagesCount": 10
      },
      "Ones": {
        "X": 117,
        "Y": 30,
        "ImageIndex": 1,
        "ImagesCount": 10
      }
    }
  }

Durch diesen Code-Schnipsel wird auf der Uhr die Zeit in Minuten und Stunden angezeigt. „Tens“ und „Ones“ beschreiben dabei die Positionen der Zehner und Einer und die entsprechenden Bilder dazu. Es könnten bei der Zeit für jede Zahl unterschiedliche Bilder genommen werden. Bei den Schritten zum Beispiel klappt das so nicht.

Um die erstellten Dateien nun in ein Watchface umzuwandeln, muss alles über das AmazfitBip Tool zusammengepackt werden. Um das zu machen, muss nur die json Datei auf die WatchFace.exe gezogen werden. Nach wenigen Sekunden wurden vier Dateien erstellt:

  • <watchface-name>_packed.bin
  • <watchface-name>_packed.png
  • <watchface-name>_packed.gif
  • <watchface-name>_packed.log

Ich habe für euch auch ein kleines Video erstellt. Schaut doch mal rein, ob es damit gut funktioniert.

Was bedeuten die einzelnen Dateien

In der log Datei kann man sehen, was das Tool gemacht hat. Schlägt die Generierung fehl, dann kann man hier nachschauen und mit ein bisschen Glück den Fehler schnell beheben. Bei der Fehleranalyse habe ich einige Fehler dokumentiert.

Xiaomi Amazfit Bip Watchface Pebble
gif Vorschau

Die gif Animation zeigt das Watchface mit verschiedenen Werten, so wie es über den Tag verteilt aussehen sollte. Dabei iteriert die Uhr im 2 Stunden-Takt durch den Tag und zeigt zum Beispiel den Schrittfortschritt mit dem Ziel von 8000 Schritten.

Xiaomi Amazfit Bip Watchface Pebble
png Vorschau

Die png Datei ist ein statischer Screenshot von einem beliebigen Stand der Uhr mit der aktuellen Uhrzeit und dem aktuellen Datum.

Die bin Datei ist das Herzstück von dem Watchface. Nur diese wird benötigt, um anderen das Watchface zur Verfügung zu stellen. Diese Datei kann dann wie in meiner „Watchface anwenden“ Anleitung über das Handy auf der Uhr angewendet werden.

Anweisungen für die json Datei

In der json Datei können natürlich noch viel mehr Anweisungen, als nur die Uhrzeit, eingefügt werden. Ich habe mal eine Datei mir allen mir bekannten Anweisungen erstellt, welche ihr euch hier anschauen könnt:

template.json

In diesem Template sind viele Verschiedene Anweisungen vorhanden, welche für die Amazfit Bip verwendet werden können. Unter anderem sind folgende Anweisungen möglich:

Uhrzeit Stunden „Time“: {
„Hours“: {
Uhrzeit Minuten „Time“: {
„Minutes“: {
Uhrzeit Sekunden „Time“: {
„Seconds“: {
Uhrzeit im 12h Format „Time“: {
„AmPm“: {
Wochentag „Date“: {
„WeekDay“: {
Datum einzeilig „Date“: {
„MonthAndDay“: {
„TwoDigitsMonth“: true,
„TwoDigitsDay“: true,
„OneLine“: {
Datum Monat „Date“: {
„MonthAndDay“: {
„TwoDigitsMonth“: true,
„TwoDigitsDay“: true,
„Separate“: {
„Month“: {
Datum Tag „Date“: {
„MonthAndDay“: {
„TwoDigitsMonth“: true,
„TwoDigitsDay“: true,
„Separate“: {
„Day“: {
Herzfrequenz „Activity“: {
„Pulse“: {
Schritte „Activity“: {
„Steps“: {
Schrittziel Icon „StepsProgress“: {
„GoalImage“: {
Kalorien „Activity“: {
„Calories“: {
Distanz „Activity“: {
„Distance“: {
Akku als Text „Battery“: {
„Text“: {
Akku als Icon „Battery“: {
„Icon“: {
Wetter als Icon „Weather“: {
„Icon“: {
Temperatur aktuell „Weather“: {
„Temperature“: {
„Current“: {
Temperatur Min/Max „Weather“: {
„Temperature“: {
„Today“: {
Status der Bluetooth-Verbindung „Status“: {
„Bluetooth“: {
Status vom Lockscreen „Status“: {
„Lock“: {
Status Alarm „Status“: {
„Alarm“: {
Status „DND“ (Do-Not-Disturb) „Status“: {
„DoNotDisturb“: {

Für die verschiedenen Anweisungen können unterschiedliche Optionen gesetzt werden. Viele Optionen wie die Ausrichtung wiederholen sich für mehrere Anweisungen. Hier sind die wichtigsten Optionen mit den entsprechenden Beschreibungen:

Beispiel Erklärung
X: 117 Koordinate X-Achse (horizontal); vom linken Rand
Y: 30 Koordinate Y-Achse (vertikal); vom oberen Rand
ImageIndex: 1 Startnummer vom ersten Bild (0 = 000.png)
ImagesCount: 10 Anzahl der zu verwendenden Bilder
TopLeftX: 65 Koordinate X-Achse (horizontal); vom linken Rand bis zum linken Rand des Bildes
TopLeftY: 67 Koordinate Y-Achse (vertikal); vom oberen Rand bis zum oberen Rand des Bildes
BottomRightX: 80 Koordinate X-Achse (horizontal); vom linken Rand bis zum rechten Rand des Bildes
BottomRightY: 76 Koordinate Y-Achse (vertikal); vom oberen Rand bis zum unteren Rand des Bildes
Alignment: „TopLeft“ Ausrichtung des Bildes (Linksbündig = TopLeft; Rechtsbündig = TopRight, Zentriert = TopCenter)
Spacing: 2 Abstand der Zahlen; zum Beispiel für Schritte

Fehleranalyse

Bei der Generierung eines Watchfaces kann es zu verschiedenen Fehlermeldungen kommen. Die Fehler stehen immer in der Log-Datei relativ weit unten. Hier sind mal ein paar Fehler, die ich bereits hatte:

Es fehlt eine Datei – Datei 000.png wurde nicht gefunden und muss erstellt werden

Trace|Loading image 0...
Trace|File D:\Eigene Dateien\Blog\Xiaomi Amazfit Bip\Watchface erstellen\Fehler\000.png doesn't exists.
Trace|File D:\Eigene Dateien\Blog\Xiaomi Amazfit Bip\Watchface erstellen\Fehler\0.png doesn't exists.
Fatal|System.IO.FileNotFoundException: File referenced by index 0 not found.
 bei Resources.ImageLoader.LoadImageForNumber(String directory, Int64 index)
 bei WatchFace.Parser.Utils.ImagesLoader.LoadImage(Int64 index)
 bei WatchFace.Parser.Utils.ImagesLoader.Process[T](T serializable, String path)
 bei System.Dynamic.UpdateDelegates.UpdateAndExecuteVoid3[T0,T1,T2](CallSite site, T0 arg0, T1 arg1, T2 arg2)
 bei WatchFace.Parser.Utils.ImagesLoader.Process[T](T serializable, String path)
 bei System.Dynamic.UpdateDelegates.UpdateAndExecuteVoid3[T0,T1,T2](CallSite site, T0 arg0, T1 arg1, T2 arg2)
 bei WatchFace.Parser.Utils.ImagesLoader.Process[T](T serializable, String path)
 bei WatchFace.Program.WriteWatchFace(String outputFileName, String imagesDirectory, WatchFace watchFace)

Falsche Anweisung in der json Datei – Anweisung muss entfernt werden:

Debug|Reading config...
Fatal|Newtonsoft.Json.JsonSerializationException: Could not find member 'Zeit' on object of type 'WatchFace'. Path 'Zeit', line 9, position 11.
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType, Boolean checkAdditionalContent)
 bei Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType)
 bei Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonSerializerSettings settings)
 bei Newtonsoft.Json.JsonConvert.DeserializeObject[T](String value, JsonSerializerSettings settings)
 bei WatchFace.Program.ReadWatchFaceConfig(String jsonFileName)

Klammern sind nicht richtig gesetzt – Klammern überprüfen:

Debug|Reading config...
Fatal|Newtonsoft.Json.JsonSerializationException: Could not find member 'Minutes' on object of type 'TwoDigits'. Path 'Time.Hours.Minutes', line 23, position 18.
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.SetPropertyValue(JsonProperty property, JsonConverter propertyConverter, JsonContainerContract containerContract, JsonProperty containerProperty, JsonReader reader, Object target)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.SetPropertyValue(JsonProperty property, JsonConverter propertyConverter, JsonContainerContract containerContract, JsonProperty containerProperty, JsonReader reader, Object target)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType, Boolean checkAdditionalContent)
 bei Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType)
 bei Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonSerializerSettings settings)
 bei Newtonsoft.Json.JsonConvert.DeserializeObject[T](String value, JsonSerializerSettings settings)
 bei WatchFace.Program.ReadWatchFaceConfig(String jsonFileName)

Mein persönlicher Lieblingsfehler: Komma fehlt. Nach jeder Anweisung muss ein Komma stehen – am Ende nicht.

Debug|Reading config...
Fatal|Newtonsoft.Json.JsonReaderException: After parsing a value an unexpected character was encountered: ". Path 'Time.Hours', line 24, position 8.
 bei Newtonsoft.Json.JsonTextReader.ParsePostValue(Boolean ignoreComments)
 bei Newtonsoft.Json.JsonTextReader.Read()
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.SetPropertyValue(JsonProperty property, JsonConverter propertyConverter, JsonContainerContract containerContract, JsonProperty containerProperty, JsonReader reader, Object target)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue)
 bei Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType, Boolean checkAdditionalContent)
 bei Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType)
 bei Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonSerializerSettings settings)
 bei Newtonsoft.Json.JsonConvert.DeserializeObject[T](String value, JsonSerializerSettings settings)
 bei WatchFace.Program.ReadWatchFaceConfig(String jsonFileName)

Wer sich ein bisschen mit dem Thema beschäftigt kann sehr schöne Designs gestalten. Eine Übersicht meiner Watchfaces findet ihr in meiner Galerie.

Unter dem Hashtag #XiaomiAmazfitBitWatchface werde ich alle meine selbst erstellten Watchfaces veröffentlichen.

Advertisements

3 Kommentare zu „Xiaomi Amazfit Bip Watchface erstellen

  1. Bei mir geht nichts, egal was ich mache.
    Bsp.: ich nehme eine schon existierende Watch Face und zerlege sie. Dann dann geht nach bearbeiten nichts. Jetzt hab ich die joso-Datei einfach, ohne bearbeiten, wieder in die exe gezogen und dann zeigt es die ganze Zeit an dass, die Datei 0000 nicht existiert, geht dass macht er weiter mit 000, 00, 0, 1, 01, 001, 0001, 2, 02, 002, 0002, usw.

    Kann man das Problem denn irgendwie lösen?

    Gefällt mir

    1. Wenn du ein existierendes watchface nimmst, dann sollten auch alle Dateien vorhanden sein. In der json Datei stehen die benötigten Dateien drin. Wenn man dann die json Datei wieder auf die exe zieht, sollte alles wieder zusammengepackt werden. Vielleicht liegen die Dateien an den falschen Orten. Die json Datei muss mit den png Dateien (keine jpg) in einem Ordner liegen. Die exe sollte außerhalb sein.
      Ich werde bei Gelegenheit mal versuchen noch ein Video aufzunehmen. Vielleicht erklärt das noch ein bisschen mehr. Zur Not, sende mir mal deine Dateien und ich schau, wo der Fehler liegt.

      Gefällt mir

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.