V komentovaném návodu si ukážeme, jak si můžete doma naprogramovat vlastní hodiny a nainstalovat je do Gear 2 a Gear 2 Neo.
Další úprava hodin
Je-li pro vás ciferník moc velký nebo moc malý, můžete změnit jeho poloměr. Jsme stále v souboru main.js, kde je poloměr hodin určen proměnnou clockRadius. Standardně se nastavuje jako třetinová velikost šířky obrazu. Pokud však hodnotu document.width vydělíte větším číslem (v kódu je třeba uvádět mezi čísly desetinné tečky namísto námi používaných desetinných čárek), ciferník se zmenší, pokud menším číslem, začne se opět zvětšovat.
Úpravy ručiček, odstranění přebytečných cifer a jejich nahrazení tečkami ve zdrojových kódech
Pokud nechcete mít zobrazeny veškeré cifry na ciferníku, je třeba upravit tento cyklus, sloužící k jejich výpisu: for(var i=1; i<=12;i++). Položka var značí definici proměnné, složené závorky pak značí obsah cyklu. Pokud jej označíte a vyjmete pomocí zkratky Ctrl + X, stačí dopsat na nový řádek hned za otevřenou složenou závorkou podmínku if(i%=3) s dvojicí složených závorek a až do nich vložit předchozí obsah pomocí Ctrl + V. Pokud si nyní hodiny spustíte v emulátoru, uvidíte na ciferníku jen čísla 3, 6, 9 a 12. Pokud za příkaz přidáte podmínku else{} a patřičně upravíte její znění, mohou se místo prázdného místa zobrazovat tečky bez popisku. Musíte je ale správně vycentrovat, aby korespondovaly s časem, nesmí se tedy stát, že by při čase 8:55 byla minutová ručička někde mezi tečkami.
Zmenšený ciferník, na kterém se místo mezer po číslicích zobrazují tečky. Nakonec můžeme vypustit i vteřinovou ručičku nebo opět změnit pozadí hodin
Na dalším řádku najdeme úpravy hodinové ručičky. LineWidth se stará o tloušťku čar, LineJoin pak o způsob spojení u středu ciferníku. Standardní zaoblení může být nahrazeno zostřenými hranami (hodnota „bevel‟) či úplně ostrými hranami (hodnota „miter‟). Pomocí context.lineTo upravujete šířku hodinové ručičky, context.strokeStyle zase barvu okraje, context.fillStyle barvu výplně, musíte ale zavolat context.fill aby se barva dovnitř ručičky aplikovala. Stejné vlastnosti lze nastavit i pro minutovou a sekundovou ručičku. Pokud vám její přítomnost vadí, můžete ji odebrat tak, že odmažete vše od komentáře //Second needle až po první výskyt context.restore.
Jak dostat hodiny do hodinek
Jakmile jste se svým výtvorem spokojeni, je na čase jej dostat na samotný displej hodinek Gear 2, Gear 2 Neo, potažmo i do hodinek Galaxy Gear pokud jste u nich již aktualizovali na Tizen. Nejprve je však třeba ve vývojovém prostředí otevřít položku config.xml, překliknout na záložku Source a hned pod řádek začínající <tizen:application ... zadat na nový řádek tento ukazatel značící, že jste nevyvíjeli aplikaci ale hodiny, takže svůj nový výtvor v seznamu aplikací nenajdete:
<tizen:category name="com.samsung.wmanager.WATCH_CLOCK"/>
Pokud v budoucnu nebudete spokojeni s výsledkem, je dobré řádek smazat, aby se při zkoušení a ladění hodiny spouštěly automaticky jako vyvíjená aplikace. V Nastavení hodinek vyberme položku Informace o Gear a zaškrtneme Ladění USB. Následně je třeba hodinky připojit přes kolébku k počítači, kde vyvíjíte a počkat na případnou instalaci ovladačů. Jakmile je hotovo, objeví se v levém spodním okně Connection Explorer nové zařízení označeno v závorce produktovým jménem modelu (jmenovitě tedy SM-R380 pro Gear 2, SM-R381 pro Gear 2 Neo či SM-V700 pro Galaxy Gear s Tizenem). Pokud na něj kliknete a stisknete zelené tlačítko Play, nahrají se vámi vytvořené hodiny přímo do vašich hodinek. Zde je pak aktivujete v sekci Nastavení - Hodiny.
Takto vypadá Connection Explorer po rozkliknutí připojených hodinek. Chcete-li na ně vyvíjené hodiny přímo nahrát, klikněte na jejich označení a na tlačítko Play
Soubor, který se nahrává do hodinek, má označení nazevVasehoProjektu.wgt, najdete jej v umístění, které jste potvrdili při spuštění vývojového prostředí, jakožto místa k ukládání projektů. Soubor se pak nachází se ve složce odpovídající názvu projektu. Pokud byste chtěli své výtvory sdílet s vašimi přáteli, stačí jim tedy odeslat jen tento soubor. Musejí si jej pak uložit a překopírovat (pro jednoduchost) do úložiště, kde bylo SDK nainstalováno, do složky tools (zřejmě se bude jednat o adresu: C:\tizen-wearable-sdk\tools). Následně je třeba v hodinkách zapnout Ladění USB, připojit je k PC a v něm spustit příkazový řádek (Spustit - cmd).
Nahrávání hodin přes příkazový řádek
V něm je třeba zadat cd C:\tizen-wearable-sdk\tools (popř. jinou adresu složky tools), kterým přejdete do této složky, dále pak příkaz sdb devices, kterým si ověříte, zdali jsou vaše hodinky úspěšně detekovány. Následuje příkaz sdb install nazevVasehoProjektu.wgt, konzole pak vypisuje podrobnosti o úspěšné instalaci.
Převod na digitálky
Pokud by vám analogové hodiny nevyhovovaly, můžete si je předělat na digitální hodiny. Ve své podstatě to je velmi jednoduché, stačí se zbavit veškerých pohybů ručiček a upravit si kód tak, aby se vypisoval údaj o hodinách a minutách ve správném formátu. V případě, že bude minut nebo hodin méně, než 10, je třeba aby se před cifru vypisovala číslice 0.
Různé vzhledy digitálních hodin, můžete měnit pozadí, vzhled, rozvržení i velikost jednotlivých prvků
Hodiny tak můžete vypsat i s běžícími vteřinami, případně vteřiny vypustit a zobrazit hodiny a až pod nimi minuty. Hrátky se tedy týkají jen pozicování prvků. Již od spuštění editace samplu má střed displeje souřadnice (0,0). Protože vyvíjíte hodiny přímo na rozlišní 320 × 320 pixelů, můžete tuto virtuální pozici měnit. První souřadnice značí posun do stran (pohyb doleva má záporné hodnoty, doprava kladné) a druhá pohyb nahoru (záporné hodnoty) a dolů (kladné hodnoty). Zápis doprostřed displeje, ale v jeho horní polovině, tak může vypadat např. takto context.fillText("Ukázkový text", 0, 60);.
Zdrojový kód digitálních hodinek a řešení zobrazující kapacitu baterie ve formě obrázku
Pod hodiny si tak můžete např. napozicovat aktuální datum, jak na to ukazují přiložené screeny. Možná by vás na obrazovce hodin zajímala i informace o aktuální baterii, takže si ukážeme jak na to. Základem je zjistit kapacitu baterie a tu zaokrouhlit na jednotky, kapacitu si můžete zobrazit textově, podobně jako jsme dříve pozicovali hodiny. Mnohem lépe to ale vypadá v grafické podobě, musíte však pro odpovídající kapacity vyrobit adekvátní obrázky.
Kapacity baterie v šesti *.png obrázcích, vytvořit je můžete i v malování
Programový kód sloužící ke zjištění a vypsání kapacity baterie na určené místo
Nemusí to být nic složitého, v malování jsme si vytvořili odpovídající kapacity baterie pro 0, 20, 40, 60, 80 a 100 procent. Tyto obrázky je třeba naimportovat do projektu, podobně jako v dřívější části tohoto tutoriálu u pozadí. Na aplikační rovině je třeba vzít v potaz aktuální kapacitu baterie a podle toho zobrazit patřičný obrázek. Ten si pomocí metody context.drawImage můžete opět umístit na displej tak, jak budete potřebovat. Konkrétní programové řešení lze opět vidět na přiložených screenshotech, můžete se od něj ve svých budoucích kreacích snáze odpíchnout. Náš závěrečný wgt soubor si můžete stáhnout zde.
Digitální hodiny s informací o kapacitě baterie, mnohem přehlednější je to graficky, navíc jsme zde přidali informace o aktuálním datu. Baterii a datum můžete samozřejmě přidat i k analogovým hodinám, které jsme upravovali na začátku článku
Základ pro začátečníky
Tento tutoriál ukázal pouze základní možnosti úprav, přičemž jsme vycházeli ze šablony analogových hodin. Hodit se bude zejména pro ty, kteří si chtějí na pozadí hodin (ať již analogových či digitálních) přidat fotografie blízkých, manželky, dětí, nebo těm, kteří si chtějí s hodinami pohrát a vyzkoušet různé možnosti. Nebojte se ve zdrojovém kódu zkoušet měnit vlastnosti a parametry, pokud se hodiny nezobrazí, můžete předešlé úpravy vrátit zpět. Pokud se budete chtít věnovat pokročilé tvorbě hodin, doporučíme nastudovat základy CSS stylů, HTML5 a Java Scriptu. Pomoc můžete nalézt i na vývojářských stránkách Tizenu a na vývojářských stránkách Samsungu. K dispozici je i referenční příručka s ukázkami.
V opačném případě si můžete stáhnout již hotové hodiny ze SamusngApps včetně aplikace Watch Styler, ve které si můžete hodiny částečně nastylizovat podle svého uvážení.
