Udělejte si vlastní hodiny pro Samsung Gear 2

V nedávném článku jsme si ukázali, jak využít aplikaci Watch Styler pro návrh obrazovky hodin pro chytré hodinky Samsung Gear 2 a Gear 2 Neo. Samotná schémata hodin pak můžete stahovat i z webu Gearfaces, importovat je lze opět přes aplikaci Watch Styler. Pokud se vám vzhled dostupných hodin nelíbí a nevybrali jste si, jste na správné adrese, protože si ukážeme, jak je naprogramovat, resp. upravit, vlastními silami. Doporučená je alespoň elementární znalost programování, pokud jste se k vytváření aplikací zatím nedostali, nevadí. Návod poslouží i úplným začátečníkům. 

Vývojářské nástroje Tizenu

Protože běží nové hodinky Samsungu na Tizenu, bude třeba nainstalovat jich vývojové nástroje. Nehledáte však vývojářské nástroje pro standardní Tizen, ale pro nositelná zařízení. Samostatně je třeba stáhnout instalátor a instalační image, dle vámi používaného operačního systému. Jako příklad můžeme uvést instalátor a SDK Image pro 32bit Windows. Instalátor po vás může chtít stažení Java JDK, po instalaci bude třeba přidat Javu, konkrétně na Windows, do Proměnných prostředí. Klikneme pravým na Tento Počítač - Vlastnosti - Upřesnit nastavení systému - Proměnné prostředí. U položky PATH dáme upravit, nakonec je třeba napsat středník, celou adresu ke složce bin u nainstalované Javy (např. C:\Program Files\Java\jre7\bin) a nakonec opět středník.

 
Instalace Tizen SDK včetně volby staženého SDK Image, ze kterého se rozbalují potřebné instalační soubory

Po stažení souborů spustíme instalátor, kde v okně vybereme položku Install or update a klikneme na tlačítko Advanced. Zde pod položkou SDK image vybereme stažení SDK Image ve formě *.zip archivu. Klikněme na tlačítko Next, je třeba odsouhlasit licenci a následně tlačítkem Install potvrdit instalaci. Ještě můžete změnit defaultní úložiště, poté započne samotná instalace. V rámci ní se ještě spustí instalace softwaru Intel Hardware Accelerated Execution Manager, po ukončení instalace je doporučeno restartovat počítač.

V levém spodním rohu vývojového prostředí je záložka Connection Explorer. Dvě zobrazená zařízení značí hodinky Gear 2 a emulátor, pokud zde žádné spuštěné či připojené zařízení nemáte, klikněte na tlačítko s modrou tečkou. V Emulator Manageru pak stiskem tlačítka + vytvoříte nový emulátor. Ten musíte před zahájením programování vždy dopředu spustit

Pokud jste neměnili instalační lokaci, ve složce C:\tizen-wearable-sdk\ide otevřete aplikaci Eclipse. Při spuštění je třeba vybrat Repository, tedy úložiště vytvořených projektů, zaškrtávátkem můžete toto umístění do budoucna zapamatovat. Následně se spustí vývojářské prostředí Tizen v aplikaci Eclipse. Zavřeme případné tipy aplikace a v levém spodním okně Connection Explorer vybereme položku Emulator Manager. V něm kliknutím na tlačítko Add New přidáme nový emulovaný systém hodinek, veškeré údaje necháme přednastaveny, je třeba zvolit jen název.

Po vytvoření spustíme emulátor klávesou Play, ten se pak může načítat i několik minut. Tím máme vše připraveno na zahájení vývoje, do budoucna budete muset spustit tento emulátor vždy před zahájením programování, pokud nechcete programovat přímo na displej skutečných hodinek.

Projekt s hodinami

V Eclipse vyberme File - New - Tizen Wearable Web Project, zvolíme položku Sample a z ní položku AnalogWatch. Projekt pojmenujeme podle svého, např. „testovaciProjekt‟, a stiskneme tlačítko Finish. Tímto máme vytvořen projekt založený na samplu, jehož soubory můžete procházet v Project Exploreru v levé horní části vývojového prostředí. Nejdůležitější jsou v tuto chvíli soubory index.html definující strukturu objektů zobrazených na displeji, style.css ve složce css definující vzhledy a main.js ve složce js definující funkce a chování aplikace napsané v Java Scriptu a HTML5.

  
Načítáme sample přes File - New - Tizen Wearable Web Project. Náhled v Project Exploreru a tři základní soubory určené k úpravám - index.html, style.css a main.js. Do projektu můžeme naimportovat obrázek a ten použít jako pozadí hodin

Úspěšné vytvoření projektu si vyzkoušíme po kliknutí na zelené tlačítko Play, kterým dojde ke spuštění aplikace na emulátoru a vygenerování souboru testovaciProjekt.wgt, který se nachází ve složce s projektem. Jejich umístění jsme vybírali při spuštění Eclipse. Pokud vše funguje bez problémů, zobrazí se za chvíli na emulátoru sample analogových hodin.

Emulátor po najetí a test funkčnost samplu, takto vypadají ukázkové analogové hodiny, které budeme postupně upravovat

Jako první se nabízí změna pozadí, nejprve si připravte obrázek s rozlišením 320 × 320 pixelů (např. nature.jpg) a ten vložte do projektu následovně. Klikněte pravým na název projektu v Project Exloreru -> Import -> General -> File System, a vyberte váš obrázek z daného umístění. V soboru style.css pak místo kódu background: #000; (značí bílou barvu pozadí) vložte background: url(../nature.jpg);. Tím si na pozadí analogových hodin nastavíte vlastní obrázek. Současně si v souboru index.html můžete přepsat nápis „Analog Watch‟ na něco jiného nebo jej úplně odstranit smazáním řádku, který začíná <h1> a končí </h1>. Pro úplnost je ještě třeba dodat, že v *.css musí být za každou položkou vlastnost:parametr umístěn středník, to stejné platí i pro konce řádků v souborech *.js.

 
Nejjednodušší úpravou je změna pozadí, zde ale vidíme, že se cifry hodin na světlém pozadí ztrácejí. Můžete jim proto změnit barvu a případně i většinu cifer vypustit. To se týká i ukázkového textu nad hodinami, který se zde moc nehodí

S pozadím ale může nastat problém, protože při přechodu do světlé barvy se můžete stát, že standardně bílá čísla ciferníku nebudou viditelná. V souboru main.js stačí upravit řádek s textem context.fillStyle="#fff", pro černou barvu bude řádek vypadat následovně: context.fillStyle="#000". Samotný zápis s křížkem (Hash tag) se vztahuje k hexadecimálním hodnotám barev. Třímístný zápis je zkrácený, běžně se používají hodnoty s šesti ciframi. Barvu si však můžete namixovat i na webu a poté její kód přepsat do vývojového prostředí. V souborech *.css pak stačí najet myší na hexadecimální zápis barev, výběrník barev se objeví v malém náhledu.

]: The file '/PubSystem.Controls.Run.Articles.2015/AddOn_Blank.ascx' does not exist.--> ]: The file '/PubSystem.Controls.Run.Articles.2015/AddOn_Blank.ascx' does not exist.-->