A Mi Band 4 magyarítása úgy tűnik, hogy nem fog működni, hacsak nem hekkelt Mi Fit használ mindenki, ami nem fog frissülni, csak a készítő frissíti. Jelenleg még csak fel sem rakható a karkötőre, még ha kész is lenne. Na de azt a kis angol menüt már sokan megértik, hisz túlzottan nem kell hozzá még alapfokú sem. Ellenben a főoldalt, ahol az óra, dátum, nap, stb. található, kedvünk szerint alakítható! Kezdjünk is bele!
Amire szükségünk lesz
- Internet
- PC
- Mi Band 4 karkötő
- Android okostelefon
- Ész
A legegyszerűbb, ha letöltünk egy már kész számlapot és szétbontva megvizsgáljuk. Ehhez a töltsük le az alábbiakat:
A PC programot mentsük el a lehetőleg a gyökérben lévő mappába, mint pl. C:\\MB4WF és csomagoljuk ki. Kapunk két mappát “PaletteImageMode” és “RawImageMode”. Az első a csökkentett színpalettával rendelkező képekhez van, kevesebb szín, kevesebb méret, ellenben a másik 16 és 32 bit színmélységű grafikai elemekhez van. Használjuk az utóbbit, akkor tuti szép lesz!
A letöltött “.bin” fájlt másoljuk a “RawImageMode” mappába és nyissunk ugyan itt egy parancssort (erre nem fogok kitérni, ennyit ugyan tudjunk már). Adjuk az alábbi parancssort:
WatchFace.exe green_neon.bin
Ekkor a program kicsomagolja a fájl nevének megegyező mappába a számlapban lévő fájlokat. Nézzük meg, hogy miből épül fel egy számlap, vagy külföldiül “watch face”. Többnyire képekből és egy “.json” szöveges fájlból, ami a képek helyzetét és funkcióját írja le.
Ez a Green Neon számlap, az egyik az általam fordítottak közül. Maradjunk ennél, mivel szinte minden megjeleníthető elem megtalálható benne, kivéve az időjárás, ami még nem megoldott. A “.json” fájlból pontosan megtudhatjuk, hogy melyik képnek mi a koordinátája és funkciója. Nyissuk meg pl. Notepad++ programmal, vagy a kedvenc szövegszerkesztőddel, KIVÉVE Office szerkesztő vagy Wordpad, nehogy a struktúra változzon, mert akkor nem fog működni!
A kód
A “.json” fájl struktúrája végtelenül egyszerű, aki kicsit is ért a programnyelvekhez, annak természetes lesz, de laikusnak sem ördögtől való, mivel “{}” jelek közé van minden rendezve. Lássuk a fájl elejét, ami egyből a számlapunk hátteréből és az időből áll.
“Background”: {
“Image”: {
“X”: 0,
“Y”: 0,
“ImageIndex”: 0
}
},
Apró angol tudásunkat latba véve, a “Background” a hátteret jelenti magyarul, majd meghatározza, hogy ez egy “Image”, az az kép. Ez után következik a kép kezdőkoordinátájának megadása X és az Y tengelyen. Végül a fájlnévben lévő számokkal határozza meg a kép fájlt (ImageIndex). Szóval X: 0 és Y: 0 amit annyit tesz, hogy a bal felső sarokból 0 pixelre helyezze el a képet, mind a két tengelyen. A háttérkép és a képernyő pontos mérete pixelben 120 x 240, szóval ebből dolgozhatunk.
Ugyan így kell minden grafikai elem helyét és funkcióját meghatározni, nézzük az óra számainak meghatározását:
“Time”: {
“Hours”: {
“Tens”: {
“X”: 12,
“Y”: 47,
“ImageIndex”: 1,
“ImagesCount”: 10
},
“Ones”: {
“X”: 53,
“Y”: 47,
“ImageIndex”: 1,
“ImagesCount”: 10
}
},
“Minutes”: {
“Tens”: {
“X”: 59,
“Y”: 118,
“ImageIndex”: 11,
“ImagesCount”: 10
},
“Ones”: {
“X”: 89,
“Y”: 118,
“ImageIndex”: 11,
“ImagesCount”: 10
}
}
},
A “Time” szekcióban az “Hours” órák és “Minutes” percek szám (Tens, Ones) karaktereit, külön külön kell meghatározni, ráadásul tól-ig. Az X és Y tengely koordinátáit fentebb megbeszéltük, az “ImageIndex” pedig az első karakter, az az a 0 (nulla), amit a többi szám követ 9-ig. Tehát az óra első karaktere a 0001.png kép, ami a nulla és ez után “ImagesCount” határozza meg, hogy hányadik kép az utolsó, tehát a 0010.png. Ugyan így minden szám karakter kerül meghatározásra.
“Activity”: {
“Steps”: {
“Step”: {
“TopLeftX”: 5,
“TopLeftY”: 145,
“BottomRightX”: 53,
“BottomRightY”: 163,
“Alignment”: “TopCenter”,
“Spacing”: 1,
“ImageIndex”: 21,
“ImagesCount”: 10
}
},
“Pulse”: {
“Pulse”: {
“TopLeftX”: 20,
“TopLeftY”: 18,
“BottomRightX”: 38,
“BottomRightY”: 33,
“Alignment”: “TopLeft”,
“Spacing”: 1,
“ImageIndex”: 79,
“ImagesCount”: 10
},
“DelimiterImageIndex”: 78
}
},
A további elemek elhelyezése kicsit bonyolultabb, meg lehet határozni a képi elem vízszintes helyzetét (Aligment), Melyik sarok pixele, honnan kezdődjön (TopLeftX és TopLeftY), ha több elemből áll, akkor az elsőhöz képest a többi elhelyezése (BottomRightX és BottmoRightY), az elemek közötti tér mennyiségét (Spacing), és az értékek közötti elválasztó kép nevét (DelimeterImageIndex).
“Date”: {
“MonthAndDay”: {
“Separate”: {
“Month”: {
“TopLeftX”: 16,
“TopLeftY”: 199,
“BottomRightX”: 58,
“BottomRightY”: 217,
“Alignment”: “TopLeft”,
“Spacing”: 1,
“ImageIndex”: 21,
“ImagesCount”: 10
},
“Day”: {
“TopLeftX”: 43,
“TopLeftY”: 199,
“BottomRightX”: 27,
“BottomRightY”: 216,
“Alignment”: “TopLeft”,
“Spacing”: 1,
“ImageIndex”: 21,
“ImagesCount”: 10
}
},
“TwoDigitsMonth”: true,
“TwoDigitsDay”: true
},
“WeekDay”: {
“X”: 72,
“Y”: 197,
“ImageIndex”: 31,
“ImagesCount”: 21
},
“DayAmPm”: {
“TopLeftX”: 90,
“TopLeftY”: 97,
“ImageIndexAMCN”: 52,
“ImageIndexPMCN”: 53,
“ImageIndexAMEN”: 54,
“ImageIndexPMEN”: 55
}
},
A dátum meghatározása ugyan az, vagyis a képek elhelyezése, de itt már kap némi többlet infót. “Date” dátum, “MonthAndDay” a hónap és nap elemek, “Separate” pedig megadja, hogy külön legyen a kettő, ne egyben. A “Month” hónap helyének meghatározása után a “Day” nap helye következik, majd meg kell határozni, hogy hány karakterből álljon (TwoDigitsMonth és TwoDigitsDay), jelen esetben a “true” kapcsoló igaznak állítja be, így két jegyű lesz. “WeekDay” a nap nevét írja ki, ami a 0031 – 0052.png között van, ami 3 nyelven készül, ezeket tessék mindent magyarra fordítani, mert lehet másnál más telefon nyelv miatt nem magyar lesz! A “DayAmPm” számunkra teljesen felesleges, hisz nekünk 24 órás a számlapunk.
“StepsProgress”: {
“Circle”: {
“CenterX”: 28,
“CenterY”: 155,
“RadiusX”: 27,
“RadiusY”: 27,
“StartAngle”: 0,
“EndAngle”: 360,
“Width”: 6,
“Color”: “0xF12389”
}
},
Ez az egyik furcsaság, ami nem képekből áll, hanem a karkötő rajzolja meg. Ez a lépés napi beállított értékének a mutatója, ami jelen esetben körbe megy (Circle). “CenterX” és “CenterY” határozza meg a kör középpontját, “RadiusX” és “RadiusY” a kör méretét, “StartAngle” a kezdőpontot, “EndAngle” a befejezés pontját fokban, “Width” a kör vastagságát és a “Color” pedig a színét hexadecimális formában (0x……). Ezt képekkel is lehet illusztrálni, leszedsz egy olyan számlapot és megnézed a megoldását.
“Status”: {
“DoNotDisturb”: {
“Coordinates”: {
“X”: 5,
“Y”: 3,
“X2”: 17,
“Y2”: 2,
“X3”: 1
},
“ImageIndexOn”: 57
},
“Lock”: {
“Coordinates”: {
“X”: 22,
“Y”: 3,
“X2”: 17,
“Y2”: 2,
“X3”: 1
},
“ImageIndexOn”: 58
},
“Bluetooth”: {
“Coordinates”: {
“X”: 39,
“Y”: 3,
“X2”: 12,
“Y2”: 2,
“X3”: 1
},
“ImageIndexOff”: 56
},
“Battery”: {
“Text”: {
“TopLeftX”: 0,
“TopLeftY”: 0,
“BottomRightX”: 0,
“BottomRightY”: 0,
“Alignment”: 0,
“Spacing”: 0,
“ImageIndex”: 0,
“ImagesCount”: 0
},
“Text2”: {
“TopLeftX”: 67,
“TopLeftY”: 4,
“BottomRightX”: 87,
“BottomRightY”: 14,
“Alignment”: “TopRight”,
“Spacing”: 1,
“ImageIndex”: 59,
“ImagesCount”: 10
},
“Icon”: {
“X”: 95,
“Y”: 3,
“ImageIndex”: 69,
“ImagesCount”: 9
}
}
}
Végezetül a képernyő felső részén elhelyezkedő ikonokat határozzuk meg, DND, BT, Zár és Akkumulátor ikonnal és százalékkal.
“Other”: {
“Animation”: {
“AnimationImage”: {
“X”: 0,
“Y”: 103,
“ImageIndex”: 78,
“ImageCount”: 13,
“X3”: 100
},
“x1”: 0,
“y1”: 1000,
“Interval”: 200
}
}
Egy extra a számlapodra, animálni is lehet egy képet, ennek elemeit kell berakni, nem .gif animált képet. Egy .gif képet is szétszedhetsz egy megfelelő programmal és elhelyezheted a karkötőn, mikor feléled a képernyő, akkor mozogjon. Az eleje ismert, bár ezt a .json fájl végére rakjuk, adjuk meg a bal, felső pixelének kezdő koordinátáját, majd az első kép nevét és hogy hány képből áll az animáció, “X3” pedig megadja, hányszor ismétlődjön. Ez után az animáció kezdete és vége, majd a képek közti eltelt idő (Interval).
Figyeljük meg, hogy jó pár grafikai elemet elhelyezhetünk a háttéren is, és csak a számokat kell odabiggyesztenünk a helyükre. A képeket lehetőleg PhotoShop vagy hasonló minőségű grafikai programmal javítsuk, vagy rajzoljuk át, és PNG-8 256 színben mentsük el. Lehet átlátszó is, az sem probléma.
Ha készen vagyunk mindennel és ki szeretnénk próbálni, akkor ugyan abba a parancssorba adjuk ki a következő parancsot:
WatchFace.exe green_neon/green_neon.json
Végső lépések
Ez visszacsomagolja a green_neon mappába (green_neon_packed).bin fájlba a számlapunkat és létrehoz két előnézetet, egyet ugyan olyan néven .png formátumban és egy másikat mozgó .gif ként. Ezzel gyorsan megnézheted, hogy mit alkottál, de élesben is kipróbálhatod, nekem a legegyszerűbben a Mi Bandage magyar appal megy. Ha a visszacsomagoláskor hibára fut a program, a számlap nevével készít egy .log fájlt, amiben elolvashatod, hogy miért nem sikerült. Lehet egy kép nem támogatott, lehet a .json fájlt rontottad el, majd kiderül.
Kérdéseiteket tegyétek fel a fórumban itt, hogy mindenki egy helyen találja meg a fontos információkat.
