Amazfit Bip Watch faces selber machen

[falkifun]

Hallo,

Gibt's eine vernünftige Anleitung wie man watchfaces selber machen kann?

 

[rautaxe]

Ja, siehe mein Avatar

In diesem YT Video wird das Folgende auch erklärt:

https://www.youtube.com/watch?v=AZVNyDrjwjc

Hier eine grobe Zusammenfassung mit Ergänzungen:

Als Vorlage kann man sich hier Watchface aussuchen:
1. Download .bin von z.B. https://amazfitwatchfaces.com/

2.1. Entpacken mit dem Bip Tool:
2.2. AmazfitBipTools.7z hier downloaden https://bitbucket.org/valeronm/amazfitb ... downloads/
2.3. Die .7z in ein Ordner entpacken
2.4. PerDrag und drop Watchface-bin auf die Watchfaces.exe packen
2.5. Es wird ein Ordner mit dem Watchfacenamen erzeugt.

3. Bearbeiten mit
https://v1ack.github.io/watchfaceEditor/
Damit kann man eine Menge machen, aber es ist nicht 100% was man nachher sieht.
Es gibt einige Einschränkungen die man erst nach dem Hochladen sieht:
3.1. Analoguhr (sonst werden die Zeiger nicht angezeigt
3.1.1. Ein Zeiger darf aus maximal 14 Punkten bestehen, sonst wird er nicht angezeigt
3.1.2. Die x Werte dürfen nicht negativ sein
3.2 Farben: es werden Teilweise mehr Farben angezeigt, als später auf der Uhr (siehe Referenz unter 4.
3.3. Verfügbare Elemente Referenz (Json-Datei):
(Man muss sich die Seite mit Google übersetzten lassen, ist dann aber ausreichend verständlich)
http://www.amazfitbipwf.com/index.php/manuales/

4. Packen
4.1. die Json Datei aus dem Ordner einfach wieder per D&D auf die Watchfaces.Exe ziehen und dann wird wieder eine bin erzeugt.
Es entstehen auch eine Gif und eine PNG Datei, die dem entspricht, was man dann auf der Uhr sieht.

Ich hoffe das reicht erstmal

 

[falkifun]

Gibt es auch irgendwo "Bausätze", Wo man z.B. verschiedene Symbole hat usw`?

 

[rautaxe]

Indirect,
Ich hab bei Watchfaces mir verschiedene Watchfaces heruntergeladen, die Elemente hatte die mir gefielen.

Wenn du die dann auspackst kann man sich halt anschauen, wie die anderen das gemacht haben.

Dann musst du nur die entsprechenden Sachen aus der JSON Datei in deine Datei packen + die entsprechenden
Bilder (evtl. muss du die Blder IDs anpassen).

Bilder hab ich mit GIMP angepasst und die Json mit Notepad++.
Zur Kontrolle dann immer wieder im Watchface Editor hochgeladen.

Übrigens kann man die Sourcen (HTML Seiten) vom WatchfaceEditor auch downloaden
und mit dem Browser öffnen. Dann kann man auch "offline" damit arbeiten.

 

[rautaxe]

Batteriefüllstand darstellen.

Hier gibt es drei Möglichkeiten:
(Mit den Kommentaren funktioniert der Code nicht, daher am Ende das Ganze ohne Kommentare als Spoiler)

1. Als Text(Zahl) Die Zahlen werden aus einzelnen Bildern erzeugt

"Text": {
      "TopLeftX": 85,          // XPosition der oberen linken Ecke
      "TopLeftY": 120,              //YPosition der oberen linken Ecke
      "BottomRightX":95 ,  // untere rechte Ecke
      "BottomRightY": 135,    // untere rechte Ecke
      "Alignment": "TopRight",  // Orientierung im o.g. Rechteck: TopRight, TopLeft, Center
      "Spacing": 1, // Abstand zwischen den Zahlen (Bildern)
      "ImageIndex": 30, //Index des ersten Bildes der Ziffern 
      "ImagesCount": 10 // 10 Stück also 030.png bis 039.Png.
    },

2. Mit verschiedenen Bildern, die entsprechend des Füllstandes angezeigt werden (z.B. Batteriesymbol)

"Icon": {
      "X": 150, // Position obere linke Ecke der Bilder
      "Y": 8,
      "ImageIndex": 40, //Index des ersten Bildes der Batterie 
      "ImagesCount": 6 //6 Stück also 040.png bis 045.png. Es können aber auch mehr oder weniger sein, das hängt davon ab, wie genau man die Auflösung haben möchte
    }

3. aus mehreren Bildern die sich ergänzen. So kann man z.B. um die Prozentzahl einen Kreis "zeichnen".

    "Scale": {
      "StartImageIndex": 50, //Index des ersten Bildes der Batterie 
      "Segments": [
        {
          "X": 90, // Position der einzelnen Segmente hier wären es sieben Stück
          "Y": 104
        },
        {
          "X": 104,
          "Y": 113
        },
        {
          "X": 100,
          "Y": 133
        },
        {
          "X": 80,
          "Y": 146
        },
        {
          "X": 65,
          "Y": 135
        },
        {
          "X": 63,
          "Y": 116
        },
        {
          "X": 69,
          "Y": 104
        }
      ]
    }

Hier das Ganze ohne Kommentare

Spoiler

"Battery": {
"Text": {
"TopLeftX": 85,
"TopLeftY": 120,
"BottomRightX": 95,
"BottomRightY": 126,
"Alignment": "TopRight",
"Spacing": 1,
"ImageIndex": 30,
"ImagesCount": 10
},
"Icon": {
"X": 150,
"Y": 8,
"ImageIndex": 40,
"ImagesCount": 6
},
"Scale": {
"StartImageIndex": 50,
"Segments": [
{
"X": 90,
"Y": 104
},
{
"X": 104,
"Y": 113
},
{
"X": 100,
"Y": 133
},
{
"X": 80,
"Y": 146
},
{
"X": 65,
"Y": 135
},
{
"X": 63,
"Y": 116
},
{
"X": 69,
"Y": 104
}
]
}
}

 

[rautaxe]

Jetzt gibt es auch eine PC-Software zum Erstellen:

https://forum.gizchina.it/index.php?/to ... ppotester/
Das Forum ist auf italienisch, aber einfach nach
Bip WF editor im Text suchen, dahinter verbirgt sich die zip mit der exe.
In dem Zip befinden sich auch Anleitungen in verschieden Sprachen (die deutsche würde ich tippen , wurde automatisch generiert )

 

[Benny_Emma]

Trend Micro Office Scan meldet Malware in dem PC-Paket! Also lasse ich die Finger davon un bleibe bei der Online-Version im Browser.