PROGRAMSKA OPREMA ZA ANIMIRANJE OBLIK UR IN ...iv Zahvala Zahvaljujem se mentorju prof. dr. Petru Kokolu za pomoč in potrpljenje. Prav tako bi se rad za izkazano podporo zahvalil

UNIVERZA V MARIBORU

FAKULTETA ZA ELEKTROTEHNIKO,

RAČUNALNIŠTVO IN INFORMATIKO

Damijan Račel

PROGRAMSKA OPREMA ZA ANIMIRANJE

OBLIK UR IN IZDELAVA FORMATA ZA

NJIHOVO SHRANJEVANJE NA PLATFORMI

WATCHFACE EDITOR

Diplomsko delo

Maribor, avgust 2015

PROGRAMSKA OPREMA ZA ANIMIRANJE OBLIK UR IN

IZDELAVA FORMATA ZA NJIHOVO SHRANJEVANJE NA

PLATFORMI WATCHFACE EDITOR

Diplomsko delo

Študent: Damijan Račel

Študijski program: Visokošolski študijski program

Računalništvo in informacijske tehnologije

Mentor: Prof. dr. Peter Kokol

Lektorica: Petra Kolarič

iv

Zahvala

Zahvaljujem se mentorju

prof. dr. Petru Kokolu za

pomoč in potrpljenje.

Prav tako bi se rad za

izkazano podporo zahvalil

svoji družini, še posebej

moji punci in prijateljici

Petri.

v

Programska oprema za animiranje oblik ur in

izdelava formata za njihovo shranjevanje na

platformi Watchface Editor

Ključne besede: pametna ura, android, wear, pebble, java

UDK: 004.42:004.928(043.2)

Povzetek

V diplomskem delu opišemo, kako smo načrtovali in implementirali mobilni Android del

platforme Watchface Editor. S pomočjo naše platforme lahko uporabniki na spletni strani

preprosto ustvarijo oblike ur ali watchface-e in jih nato preko naše mobilne aplikacije

naložijo na pametno uro Android Wear.

vi

Software for animating watchfaces and a

description of our specifications for saving them

on the WatchFace Editor platform

Key words: smart watch, android, wear, pebble, java

UDK: 004.42:004.928(043.2)

Abstract

In our thesis we describe the planing and implementation of the mobile Android part of our

Watchface Editor platform. Our platform enables users to create their own watchfaces on

our website and install them to Android Wear smartwatches with the help of our mobile

application.

vii

KAZALO

1 UVOD ............................................................................................................................ 1

2 PAMETNE URE ............................................................................................................ 2

2.1 Android Wear pametne ure ..................................................................................... 3

2.2 Watchface ............................................................................................................... 5

2.3 Način spanja ............................................................................................................ 5

2.4 Sistemski elementi .................................................................................................. 6

2.5 Oblika zaslona ......................................................................................................... 7

2.6 Pametna ura Pebble ................................................................................................. 8

2.7 Izdelava Watchface-ov............................................................................................ 9

3 PLATFORMA WATCHFACE EDITOR .................................................................... 10

3.1 Povzetek ................................................................................................................ 10

3.2 Načrtovanje platforme .......................................................................................... 12

3.2.1 Cilji ................................................................................................................ 13

3.2.2 Modul za prikaz oblike ure ............................................................................ 14

4 OSNOVNI GRADNIKI ............................................................................................... 15

4.1 Poravnave .............................................................................................................. 15

4.2 Rotacijska točka .................................................................................................... 16

4.3 Kvadrat .................................................................................................................. 16

4.4 Krog ...................................................................................................................... 17

4.5 Kroţni lok ............................................................................................................. 18

4.6 Besedilo ................................................................................................................ 19

4.7 Slika ...................................................................................................................... 20

4.8 Mnogokotnik ......................................................................................................... 20

5 DATOTEČNI FORMAT ............................................................................................. 21

5.1 Opis ....................................................................................................................... 21

5.2 Struktura json datoteke ......................................................................................... 21

5.3 Branje json podatkov ............................................................................................ 23

5.4 Nalaganje slik ....................................................................................................... 25

5.5 Nalaganje pisav ..................................................................................................... 25

6 IZRIS ELEMENTOV .................................................................................................. 26

viii

6.1 Uporaba razreda .................................................................................................... 26

6.1.1 WatchfaceView ............................................................................................. 26

6.1.2 WatchfaceEngineHelper ................................................................................ 27

6.2 Opis delovanja razreda WatchfaceEngine ............................................................ 28

6.2.1 SetWatchface ................................................................................................. 29

6.2.2 Render ............................................................................................................ 29

6.3 Skaliranje .............................................................................................................. 31

6.3.1 Metrics ........................................................................................................... 31

6.3.2 WFCanvas ..................................................................................................... 32

7 ZNAČKE ...................................................................................................................... 33

7.1 Oblika zapisa ......................................................................................................... 33

7.2 Vrste značk ........................................................................................................... 34

7.2.1 Čas ................................................................................................................. 34

7.2.2 Vreme ............................................................................................................ 34

7.2.3 Stanje telefona ............................................................................................... 35

7.3 Pridobitev podatkov .............................................................................................. 35

7.4 Razredna arhitektura ............................................................................................. 36

8 OBDELAVA ZNAČK IN IZRAZOV ......................................................................... 38

8.1 Ţivljenjski cikel grafičnih elementov ................................................................... 38

8.1.1 Optimizacija lastnosti .................................................................................... 39

8.1.2 Grajenje HashMap ......................................................................................... 40

8.1.3 Posodobitev lastnosti ..................................................................................... 40

8.1.4 Izris ................................................................................................................ 40

8.2 Parser .................................................................................................................... 41

8.2.1 Predprocesiranje ............................................................................................ 41

8.2.2 Osveţevanje vrednosti značk......................................................................... 42

8.2.3 Pridobitev vrednosti za podan niz ................................................................. 43

9 EVALUACIJA ............................................................................................................. 45

10 SKLEP ...................................................................................................................... 46

VIRI ........................................................................................................................................ i

ix

KAZALO SLIK

Slika 2.1: Pametna ura Mimo Loga ....................................................................................... 2

Slika 2.2: Pametna ura UC-200 s tipkovnico ........................................................................ 3

Slika 2.3: Sporočilo na sistemu Android Wear ..................................................................... 4

Slika 2.4: Sistemski indikatorji za baterijo in bluetooth povezavo ....................................... 7

Slika 2.5: Pametna ura Pebble ............................................................................................... 8

Slika 3.1: Spletna stran Watchface Editor ........................................................................... 10

Slika 3.2: Domača stran mobilne aplikacije ........................................................................ 11

Slika 3.3: Predogled ure na mobilnem telefonu .................................................................. 12

Slika 4.1: Črkovne črte ........................................................................................................ 20

KAZALO PROGRAMSKE KODE

Programska koda 4.1: Odmiki za pravokotnik .................................................................... 17

Programska koda 4.2: Odmiki za krog ................................................................................ 18

Programska koda 5.1: Primer json formata ......................................................................... 22

Programska koda 5.2: Primer metode deserialize ............................................................... 24

Programska koda 6.1: Nastavitev sistemskih indikatorjev .................................................. 28

Programska koda 6.2: Izris pravokotnika ............................................................................ 30

Programska koda 6.3: Izris besedila s skaliranjem .............................................................. 32

Programska koda 7.1: Dodajanje značk za čas .................................................................... 37

Programska koda 8.1: Optimizacija x koordinate ............................................................... 39

KAZALO TABEL

Tabela 8.1: Primer zapisa značk .......................................................................................... 41

Programska oprema za animiranje oblik ur in izdelava formata za njihovo shranjevanje na platformi Watchface Editor

1

1 UVOD

Pametne ure so najnovejši trend zabavne elektronike. Ljudje jih uporabljajo za hiter in

priročen dostop do obvestil in informacij, ki jih na uro posreduje povezan pametni telefon.

Ena izmed najpomembnejših prednosti pred klasičnimi urami je ravno prilagajanje ure

ţeljam vsakega posameznika. Da bi ure zadovoljile to ključno zahtevo, večina naprav

podpira izbiro oblike ure, v nadaljevanju watchface, ki je vedno vidna na zaslonu pametne

ure.

Uporabnik dobi pametno uro z ţe pred naloţenimi watchface-i. Vsak watchface je

samostojen program, ki teče na operacijskem sistemu pametne ure. Uporabniki lahko

prenesejo na svojo pametno uro nove watchface-e ali pa izdelajo svoje, vendar izdelava

popolnoma novega watchface-a ni enostavna in zahteva znanje programiranja za uro, na

kateri bo ta tekel. Razvoj naše platforme je vzpodbudila potreba po enostavnem sistemu, s

katerim bi lahko uporabniki pametnih ur po svojih ţeljah ustvarili watchface-e in jih delili

z drugimi.


2

2 PAMETNE URE

Pametne ure so naprave, ki zraven prikaza časa ponujajo še dodatne funkcionalnosti [1]. Za

eno izmed prvih pametnih ur štejemo uro Mimo Loga iz leta 1941, slika 2.1. To je bila

analogna ura, ki je ponujala še moţnost izvajanja enostavnih računskih operacij.

Uporabnik je račune izvajal s pomočjo logaritemskega računala, vgrajenega v številčnico

ure [2].

Slika 2.1: Pametna ura Mimo Loga

V letih, ki so sledila, je prišlo na trg ogromno različnih modelov pametnih ur. Z napredkom

v razvoju tehnologije digitalnih zaslonov in baterij so začele pametne ure postajati vedno

bolj podobne pravim računalnikom.

Leta 1984 je podjetje Seiko na trg izdalo pametno uro UC-2000, na sliki 2.2, ki so jo lahko

uporabniki povezali z zunanjo tipkovnico in na uro naloţili zapiske. Za zapiske in opombe

je imela ura na voljo 2922 bajtov pomnilnika, ki so jih lahko uporabniki prebirali na

zaslonu, ki je prikazoval 4x10 znakov. Ko je bila povezana z zunanjo enoto, je bilo moţno

na njej poganjati kratke programe, napisane v programskem jeziku BASIC [3] [4].


3

Slika 2.2: Pametna ura UC-200 s tipkovnico

2.1 Android Wear pametne ure

Podjetje Google je 18. marca 2014 na svojem uradnem blogu oznanilo prihod sistema

Android tudi na pametne ure. Prirejena verzija operacijskega sistema za ure se imenuje

Android Wear [5]. Po besedah podjetja Google je osnovni namen sistema Android Wear

ta, da pametne ure uporabnikom prikazujejo informacije iz povezanega pametnega

telefona. Uporabniki lahko na uri na enostaven načni prebirajo sporočila in elektronsko

pošto.

Ena izmed največjih razlik v primerjavi s sistemom na mobilnih telefonih je uporabniški

vmesnik. Ker je zaslon ure dosti manjši od zaslona na mobilnem telefonu, interakcija z

grafičnim vmesnikom poteka preko sistema ročnih gest in z govornimi ukazi.

Android Wear podpira integracijo z Googlovim sistemom za prepoznavo govora, ki ga

vključimo s ključnima besedama »OK, Google«. Ura nato posluša za ukazi, s katerimi

lahko poţenemo aplikacije, narekujemo sporočila ali poţenemo štoparico. Prav tako imajo

razvijalci aplikacij za ure na voljo dodajanje novih govornih ukazov, ki lahko močno

izboljšajo uporabniško izkušnjo.


4

Ura nam vsa pomembna opozorila in podatke prikazuje v obliki kartic, vidno na sliki 2.3,

ki se pojavijo na zaslonu. Kartice lahko odstranimo iz zaslona s potegom prsta po zaslonu

od desne proti levi. Prav tako lahko na uro namestimo samostojne aplikacije [6]. Te tečejo

na strojni opremi ure, zato je ura do neke mere uporabna tudi, če ni povezana s pametnim

telefonom. Aplikacije za uro so v osnovi enake kot aplikacije za Android pametne telefone.

Največja sprememba v razvijanju aplikacij je ravno v uporabniškem vmesniku, saj se mora

uporabniška izkušnja prilagoditi mali površini zaslona ure. O majhnih razlikah med

različicama Androida za mobilne telefone in ure priča dejstvo, da lahko aplikacije,

napisane za pametne telefone Android, brez sprememb poţenemo kar neposredno na uri.

Slika 2.3: Sporočilo na sistemu Android Wear

S prihodom Androida na pametne ure so dobili razvijalci še dodaten izziv, saj je bilo med

mnoţico različnih vrst zaslonov z različnimi razmerji stranic sedaj potrebno elemente

grafičnega uporabniškega vmesnika prilagoditi še okroglemu zaslonu.

Uradna stran Android Wear trenutno v času pisanja predstavlja 12 različnih pametnih ur,

na katerih teče Googlov operacijski sistem [7].


5

2.2 Watchface

Watchface je oblika ura, ki je vedno vidna na naši pametni uri. Izbiramo lahko med

mnoţico pred naloţenih oblik, prenesemo pa si lahko tudi nove iz Googlove trţnice z

aplikacijami. Watchface-i so le še ena vrsta aplikacij, ki tečejo na sistemu Android. Google

je izdal posebne zahteve, da morajo biti vsi watchface-i za pravilno delovanje zgrajeni s

pomočjo razredov, ki se nahajajo v knjiţnici Wearable Support.

Sistem Android nam za izris watchface-a ponudi objekt Canvas, na katerega lahko rišemo

primitivne oblike, kot so pravokotniki, krogi ali črte. Ustvarimo si lahko tudi svoj števec,

ki osveţi stanje ure in ponovno izriše elemente z novimi vrednostmi na Canvas. Da

izdelamo svoj watchface, moramo upoštevati smernice, ki so zapisane na uradni strani za

Android pametne ure.

2.3 Način spanja

Sistem za pametne ure je bil načrtovan za čim manjšo porabo baterije. Iz tega razloga

ostane zaslon na uri vklopljen le kratek čas, nato pa se preklopi v način spanja. Kot

razvijalci watchface-ov se moramo pravilno odzvati na ti različni stanji. Ko je zaslon v

načinu spanja, je slika na uri še vedno vidna, toda zaslon lahko prikaţe le črno in belo

barvo, pri nekaterih modelih ur pa barve iz 8-bitno barvne palete. Google v smernicah za

razvoj watchface-ov predlaga, da v stanju spanja ne posodabljamo grafičnih elementov na

uri več kot enkrat na minuto. V namen posodobitve podatkov v času spanja nam sistem

Android ponuja metodo, ki se kliče vsako minuto in kjer lahko posodobimo pozicije

kazalcev ali besedilo. Sistem nam zagotavlja, da se bo ta metoda klicala vsako minuto, kar

ne drţi za števce, ki jih lahko implementiramo sami in tečejo le, ko je naprava budna. Ko je

ura v stanju budnosti, lahko ustvarjamo vse vrste animacij in osveţujemo zaslon po ţeleni

frekvenci. Seveda moramo upoštevati dejstvo, da bolj grafično zahteven watchface prej

izprazni majhno baterijo v pametni uri [8].

Ker so watchface-i samostojne aplikacije, napisane za sistem Android, lahko v programski

kodi razvijalci dostopajo do vseh podatkov, do katerih lahko dostopamo, ko razvijamo

običajne mobilne aplikacije. Iz tega razloga lahko na številčnici ure prikaţemo ogromno

različnih podatkov, ki ne rabijo biti omejeni na prikaz trenutnega časa. Na trgu obstaja


6

ogromno različnih watchface-ov, ki prikazujejo informacije o vremenskih parametrih,

podatke o trenutni lokaciji, stanje baterije ure in telefona. Podatki, za katere je potrebna

internetna povezava, se lahko pridobijo na mobilnem telefonu in se nato preko bluetooth

povezave pošljejo na uro.

2.4 Sistemski elementi

Ob podatkih, ki jih razvijalec ponudi v ogled uporabnikom watchface-a, se preko površine

Canvasa na uri izrišejo še sistemski elementi, s katerimi upravlja operacijski sistem:

Kartice:

Vsako opozorilo ali sporočilo, ki ga uporabnik prejme na telefon, se prenese tudi na uro,

kjer se prikaţe v obliki kartic. Kartice s sporočili za uporabnika se pojavijo na spodnji

strani watchface-a. Razvijalec se lahko odloči, kako visoka bo kartica in koliko ure bo

prekrila. V programski kodi lahko izberemo, da bo kartica visoka le eno vrstico ali pa si bo

rezervirala toliko prostora, kot ga potrebuje za prikaz celotne vsebine sporočila.

Indikatorji:

Operacijski sistem na uri prikazuje tudi stanje baterije, stanje bluetooth povezave s

telefonom in ali je ura trenutno povezana v električno omreţje, kot je vidno na sliki 2.4.

Prav tako se vedno v trenutku, ko se ura zbudi, na zaslonu prikaţeta ključni besedi »OK,

Google«, ki uporabniku sporočita, da lahko z glasno izgovorjavo prikazanih besed poţene

sistem za glasovni nadzor naprave. V programski kodi lahko izbiramo poloţaj sistemskih

indikatorjev med nekaj pred pripravljenimi lokacijami na zaslonu ure. Če smo izdelali uro

z belim ozadjem, lahko izberemo, da bodo indikatorji narisani na sivo ozadje, saj drugače

ne bi bili vidni [9].


7

Slika 2.4: Sistemski indikatorji za baterijo in bluetooth povezavo

2.5 Oblika zaslona

Ker v ekosistemu pametnih ur Android najdemo zelo različne oblike zaslonov, moramo

pri razvijanju aplikacij in še posebej pri razvoju watchface-ov posvetiti veliko pozornosti

ravno tej tematiki. Sistem Android nam ponuja več različnih metod, po katerih lahko

razvijalci dostopajo do informacij o zaslonu naprave, na kateri teče njihova aplikacija. Od

sistema Android lahko dobimo podatke o zaslonu, kot so:

Tip zaslona: pravokoten, okrogel

Velikost brade v slikovnih pikah

Čeprav ima morda okrogla ura enako resolucijo zaslona kot pravokotna, na okroglem

zaslonu ne moremo prikazati enakega števila slikovnih pik kot na pravokotnem. Zaradi

različnih oblik zaslona se lahko zgodi, da bo del našega watchface-a na nekaterih urah

odrezan. Iz tega razloga moramo prilagoditi izris elementov glede na različne zaslone. Če

ţelimo ustvariti uro, ki se bo brez večji sprememb prikazala pravilno tako na pravokotni

kot okrogli uri, moramo paziti, da grafičnih elementov ne izrisujemo v kotih zaslona.

Ko izdelujemo grafično podobo ure, moramo upoštevati tudi okrogle zaslone, ki imajo

spodnji del »kroga« odrezan, da njihova podoba spominja na izgled prazne pnevmatike. V

metodi onApplyWindowInsets nam sistem Android sporoči, kako velik je odrezan del

kroga, da lahko primerno priredimo izris uporabniškega vmesnika.


8

2.6 Pametna ura Pebble

Prva verzija pametne ura Pebble je na trg izšla januarja 2013, po tem, ko je podjetje Pebble

Technology Corporation uspešno zaključilo Kickstarter kampanjo, s katero so zbrali več

kot 10 milijonov dolarjev denarne podpore od skoraj 70 tisoč podpornikov. Ko se je

zbiranje denarja zaključilo, je bila to najbolj uspešna kampanja skupinskega financiranja na

spletni strani Kickstarter. Leta 2015 je Kickstarter kampanja za novo verzijo, imenovano

Pebble Time, zbrala več kot 20 milijonov dolarjev [10].

Pametna ura Pebble, vidna na sliki 2.5, ima dvo-barvni zaslon resolucije 144x168

slikovnih pik, ki lahko prikaţe samo črno in belo barvo. Transflektiven LCD zaslon porabi

zelo malo energije, saj za prikaz slike ne potrebuje lastnega vira svetlobe. Svetloba iz

okolice zadostuje, da vidimo ostro sliko na zaslonu, vidnost pa je zaradi tega odlična tudi

zunaj na močnem soncu. Zaradi majhne porabe baterije lahko ura deluje kar 7 dni, brez da

bi jo morali ponovno napolniti [10].

Slika 2.5: Pametna ura Pebble

Ura podpira poganjanje programov, ki jih lahko napišejo razvijalci s pomočjo Pebble SDK

v programskem jeziku C. Razvijalci lahko naredijo tudi svoje watchface-e in jih naloţijo

na uro. Ker ima ura za aplikacije, ki tečejo na njej, rezerviranega le 24 KB pomnilnika,

morajo razvijalci bolj kot pri drugih napravah paziti na porabo sistemskih sredstev. Prav

tako manjša procesorska moč ure ni primerna za vključitev zahtevnih grafičnih animacij v

programe in watchface-e.


9

2.7 Izdelava Watchface-ov

Trg za različne watchface-e je postal v zadnjem času zelo velik. Ljudje vedno iščejo

watchface, ki najbolj ustreza njihovemu trenutnemu počutju ali okolju, v katerem so se

znašli. Lastniki pametnih ur ţelijo z watchface-i drugim ljudem prenesti sporočilo o tem,

kar si mislijo ali kaj jim je všeč. Tako za Android Wear kot za Pebble platformo lahko na

spletnih trţnicah najdemo zelo veliko število različnih oblik ur, toda mnogo ljudi kljub

velikemu številu watchface-ov, ki so na voljo, ne najde takšnega, ki bi jim bil po volji. Iz

tega razloga bi radi ljudje ustvarili popolnoma svoj izdelek, ki bi bil prirejen natančno

njihovim potrebam.

Ker so watchface-i v osnovi le aplikacije, ki tečejo na operacijskem sistemu ure, moramo

za njihovo izdelavo zelo dobro poznati ta sistem. Prav tako potrebujemo dobro znanje

programiranja. Če ţelimo ustvariti watchface za pametno uro Android, se moramo naučiti

programiranja v programskem jeziku Java. Prav tako moramo znati uporabljati orodja, ki

so potrebna za uspešno implementacijo aplikacij za platformo Android. Izdelava aplikacij

vključuje znanje programskega orodja Android Studio in sistema Gradle, s pomočjo

katerega se aplikacije pretvorijo v .apk pakete, ki jih je moţno pognati na uri. Če ţelimo

programirati za pametno uro Pebble, moramo znati programirati v programskem jeziku C

in se seznaniti z delovanjem Pebble SDK in spletne aplikacije Pebble Cloud. Na trgu ţe

obstajajo aplikacije, ki močno poenostavijo izdelavo watchface-ov in ki ponudijo

uporabnikom enostavno okolje, kjer lahko brez strokovnega znanja o platformi, za katero

gradijo, ustvarijo kompleksne izdelke.

Za pametne ure Android Wear obstajata aplikaciji Facer in Watchmaker, ki omogočata

uporabnikom, da zgradijo svoje watchface-e in jih poţenejo na svoji uri. Aplikacija Facer

je plačljiva in stane okoli 1 evro na trţnici Google Play [11]. Aplikacijo Watchmaker si

lahko prenesemo zastonj, doplačati moramo le za dodatne funkcionalnosti, kot so dodatni

grafični efekti pri gradnji svojih ur [12]. Za gradnjo watchface-ov na platformi Pebble

lahko uporabniki koristijo zelo popularno stran watchface generator . Stran ponuja veliko

izbiro gradnikov, ki jim lahko uporabniki prirejajo grafične lastnosti. Uporabnik lahko nato

prenese izvršilno datoteko s končnico pbw, ki jo nato namesti na svojo uro.


10

3 PLATFORMA WATCHFACE EDITOR

3.1 Povzetek

Platforma Watchface Editor omogoča uporabnikom izgradnjo watchface-ov na naši spletni

strani, vidni na sliki 3.1. Ko si uporabnik ustvari uporabniški račun, dobi dostop do

programskega orodja, napisanega v programskem jeziku JavaScript, s pomočjo katerega

lahko na prazno risalno površino dodaja različne elemente, kot so pravokotnik, krog ali

besedilo. Orodje omogoča uporabnikom, da nastavljajo različne parametre likov, kot so

med drugimi tudi višina, širina in pozicija na risalni površini.

Slika 3.1: Spletna stran Watchface Editor

Uporabniki lahko za vsako lastnost lika vnesejo tudi značke, ki omogočajo animacijo

objektov glede na trenutno vrednost časa ali stanja vremena. Ker se vrednosti značk skozi

čas spreminjajo, se liki na risalni površini spreminjajo glede na to, katero značko

uporabimo.


11

Ko uporabnik konča z delom na svojem watchface-u, ga lahko shrani. Ponudimo mu

seznam vseh njegovih izdelkov, ki jih lahko ponovno naloţi in ureja. Prav tako si lahko

ogleda ure, ki so jih ustvarili drugi uporabniki in so jih ti delili s celotno skupnostjo. Cilj

izdelave svoje oblike ure je v tem, da jo lahko naloţiš na svojo pametno uro. V ta namen

smo izdelali mobilno aplikacijo, vidno na sliki 3.2, ki omogoča brskanje po seznamu

javnih watchface-ov iz našega streţnika kot tudi ogled uporabnikovih privatnih izdelkov.

Slika 3.2: Domača stran mobilne aplikacije

Ko uporabnik izbere watchface iz seznama, se odpre predogled ure, viden na sliki 3.3, kjer

se ura prikaţe in animira popolnoma enako kot na spletni strani. Uporabnik lahko oceni, ali

mu je izbran watchface všeč in se odloči, ali si ga bo namestil na pametno uro, kar lahko

stori s pritiskom na gumb »Install on watch«.


12

Slika 3.3: Predogled ure na mobilnem telefonu

3.2 Načrtovanje platforme

Preden smo začeli z implementacijo platforme, smo najprej dobro preučili ţe obstoječe

rešitve. Namestili smo si aplikaciji Facer in Watchmaker in na obeh preizkusili sistem

izdelave ure. Aplikaciji omogočata gradnjo watchface-ov zgolj na mobilnem telefonu, kar

ima dosti pomanjkljivosti. Ugotovili smo, da je bilo delo zaradi majhnega zaslona in

teţkega nadzora dokaj naporno in nepregledno. Aplikaciji sta med delom večkrat prenehali

delovati, zaradi česar smo izgubili dotedanji napredek pri izdelavi.

Izdelava samih watchface-ov je bila pri obeh aplikacijah rešena na podoben način s

pomočjo značk. Aplikaciji ponujata nabor več kot sto značk za različne vrednosti, ki jih

lahko priredimo grafičnim elementom in jih s tem animiramo. Čeprav je nabor značk pri

obeh aplikacijah velik, smo si ţeleli še več dodatnih značk, s katerimi bi lahko naredili še

bolj unikatne oblike ur.


13

V aplikaciji Facer in Watchmaker smo zelo pogrešali tudi moţnost deljenja svojih izdelkov

z drugimi uporabniki. Za ogled in prenos watchface-ov smo morali obiskati spletno stran,

ki ponuja velik nabor uporabniških del, vendar njeno delovanje ni integrirano v nobeno od

aplikacij, ki smo ju testirali.

Za pametno uro Pebble smo testirali spletno aplikacijo watchface generator. Proti

mobilnima aplikacijama za izdelavo ur za Android Wear, spletna stran watchface generator

ponuja dosti manj nadzora nad izdelavo in animiranjem ure. Ko izdelujemo svojo uro,

lahko izberemo med pred pripravljenimi analognimi ali digitalnimi urami in jim nato

spreminjamo lastnosti, kot so višina, širina in barva. Dodajamo lahko tudi besedilo in

naloţimo tudi poljubne tipe pisav.

3.2.1 Cilji

Naš cilj pri razvoju aplikacije Watchface Editor je bil ta, da bodo lahko uporabniki zgradili

tak watchface, kakršnega bodo ţeleli. Prav tako smo ţeleli omogočiti veliki skupini

uporabnikov, da enostavno delijo svoja dela preko spleta in mobilne aplikacije, kar ni

ponujala nobena od aplikacij, ki so bile na voljo v času načrtovanja. Da bi uporabnikom

omogočili močan sistem za urejanje, shranjevanje in deljenje watchface-ov, samo se

odločili, da bo izdelava ur potekala preko spletne aplikacije. Naš cilj je bil, da ustvarimo

profesionalno orodje, s katerim bodo lahko delali tako začetniki kot izkušeni uporabniki.

Zelo dosti truda smo namenili načrtovanju sistema, po katerem bodo lahko uporabniki svoj

izdelek preprosto prenesli iz spletne strani na svojo pametno uro. Naša Android aplikacija

se preko uporabniškega računa poveţe na naš spletni streţnik tako, da lahko uporabniki

dostopajo do svojih shranjenih del. Prav tako smo ţeleli na mobilni aplikaciji uporabnikom

ponuditi veliko trţnico z izdelanimi urami in morda tudi prodajo avtorskih izdelkov.

Veliko truda smo vloţili v načrtovanje sistema, ki animira uro na telefonu Android in na

pametni uri Android Wear. Ţeleli smo ustvariti sistem, ki bo zelo optimalen in bo deloval

brez problemov tudi ob velikih obremenitvah. Vedeli smo, da lahko izdelamo bolj

učinkovit sistem, kot so ga ponujale konkurenčne aplikacije. Pri aplikacijah Facer in

WatchMaker smo ugotovili, da animacija le majhnega števila elementov ure ni bila tekoča.


14

Ţeleli smo tudi izboljšati sistem za uporabo značk. Čeprav konkurenčne aplikacije

ponujajo veliko mero prilagodljivosti, smo ţeleli našim uporabnikom ponuditi še večjo

stopnjo nadzora nad osnovnimi gradniki, ki sestavljajo uro.

S platformo Watchface Editor smo vedno imeli cilj, da bodo watchface-i, izdelani v našem

formatu, lahko tekli na različnih vrstah pametnih ur. Trenutno smo podprli razvoj

watchface-ov za Pebble in Android Wear.

3.2.2 Modul za prikaz oblike ure

Ker lahko na pametni uri in telefonu Android poganjamo enako programsko kodo, smo se

odločili, da vse potrebno za nalaganje, prikaz in animiranje watchface-ov zdruţimo v en

velik paket z imenom Watchface Editor engine. Ko ustvarjamo aplikacijo za pametno uro,

se v Android Studiu samodejno ustvarita dva modula. Programska koda za mobilno

aplikacijo se nahaja v modulu »mobile«, programska koda za uro pa v modulu »wear«. V

razvijalnem okolju Android Studio smo ustvarili nov modul, v katerega smo prestavili vso

kodo, ki si jo bosta ura in telefon delila. Da smo lahko uporabili razrede iz modula v

mobilnem delu ali na uri, smo morali v datoteko build.gradle dodati vrstico »compile

project(':watchfaceeditorengine')«. S tem smo dodali povezavo med moduli in smo lahko

uporabili kodo iz modula Watchface Editor engine. Prednost takšne rešitve je predvsem v

tem, da lahko imamo le eno kopijo kode, ki poskrbi, da se watchface pravilno izriše in

animira. Ko dodajamo ali spreminjamo funkcionalnosti v modulu, so spremembe takoj

vidne tako na mobilni aplikaciji kot na pametni uri.


15

4 OSNOVNI GRADNIKI

Watchface Editor omogoča uporabnikom, da iz osnovnih elementov zgradijo zapletene

oblike ur po svojih ţeljah. Kot razvijalci platforme smo morali prepustiti razvoj

uporabnikom, čeprav smo večkrat začutili ţeljo po tem, da bi v sistem uvedli

funkcionalnosti, ki bi jim na prvi pogled omogočile, da naredijo več, v resnici pa bi

nezavedno usmerjali njihovo kreativnost. Iz tega razloga smo poskusili ustvariti sistem, ki

omogoča dodajanje in manipulacijo z najbolj preprostimi elementi, uporabnikom pa

prepustili odločitve o tem, kako bodo ta sistem izkoristili.

Vsi liki imajo lokacijo podano z izhodiščno točko.

4.1 Poravnave

Skoraj vsak lik, ki ga uporabnik doda v risalno površino, ima nastavljivo lastnost

poravnave po navpični kot po vodoravni osi. Platforma Watchface Editor podpira

naslednje poravnave:

Navpično zgoraj

Navpično na sredini

Navpično spodaj

Vodoravno levo

Vodoravno na sredini

Vodoravno desno

Poravnava je podatek, ki nam pove, kje v liku se bo nahajala njegova izhodiščna točka. Ker

je izhodiščna točka določena s koordinatami pozicije lika, se bo ob spremembi poravnave

premaknil lik, izhodiščna točka pa bo ostala na enakem poloţaju.


16

4.2 Rotacijska točka

Vsak lik, ki ga dodamo na risalno površino, lahko uporabnik prosto rotira. Ustvarili smo

točno določena pravila, po katerih se liki rotirajo. Liki se vedno rotirajo okoli točke, ki se

imenuje rotacijska točka lika. Rotacijska točka je relativna na izhodiščno točko lika, ki je

določena s poravnavami. Uporabnik lahko rotacijsko točko prestavi na poljubno relativno

razdaljo od izhodiščne točke, kar pomeni, da lahko leţi tudi izven mej lika.

4.3 Kvadrat

Kvadrat je osnovni gradnik, ki ga lahko uporabnik na spletni strani doda na delovno

površino, ko izdeluje watchface. Kvadrat ima lastnosti, kot so višina, širina. Prav tako

lahko kvadratu nastavimo barvo. Kvadrat smo v mobilni aplikaciji za Android izrisovali s

pomočjo metod, ki jih ponuja element Canvas. Za izris smo uporabili metodo

drawRoundedRect, ki sprejme koordinate ogljišč pravokotnika in stopnjo zaobljenih robov.

To metodo smo izbrali zato, da lahko uporabniki na uro dodajo tudi zaobljene

pravokotnike.

Če za izris pravokotnika uporabljamo element Canvas, se bo pravokotnik na risalni

površini izrisal tako, da bodo podane koordinate za izris leţale v zgornjem levem kotu

pravokotnika. Za pravilen izris glede na poravnave moramo izračunati odmik po navpični

kot po pravokotni osi, kar je vidno na primeru programska koda 4.1.


17

Programska koda 4.1: Odmiki za pravokotnik

Pri kvadratu smo se soočili s problemom izrisa na različnih platformah. Element Canvas na

sistemu Android ne podpira izrisa kvadrata, ki bi bil zapolnjen z eno barvo in imel obrobo

drugačne barve. Iz tega razloga smo morali omejiti nastavitve za kvadrat tako, da lahko

uporabniki izberejo le eno ali drugo moţnost. Če ţelijo ustvariti kvadrat z obrobo drugačne

barve kot je polnilo, morajo ustvariti dva kvadrata različne barve in postaviti enega znotraj

drugega.

Na pametni uri Pebble lahko pri kvadratu izbiramo med tem, ali bo lik zapolnjen s črno ali

belo barvo in ali bo imel obrobo črne ali bele barve. Na Pebblu je pravokotnik vedno

zapolnjen s polnilom, kar pomeni, da se elementi, izrisani pod njim, ne vidijo, kar je

drugače kot pri Androidu, kjer ima pravokotnik prozorno polnilo, če mu nastavimo obrobo.

Iz tega razloga se ura, zgrajena za Pebble, ne bo prikazala enako na Android Wear pametni

uri.

4.4 Krog

Krog smo na Android napravi izrisali s pomočjo metode drawCircle, ki sprejme parametre

za lokacijo kroga in polmer. Ker smo izbrali to metodo, ki prejme le polmer, smo omejili


18

uporabnika, saj ne mora izrisati elipse. Ker se izhodiščna točka kroga nahaja v središču

lika, smo morali spremeniti implementacijo izračuna odmikov za namen poravnave, vidno

na primeru programska koda 4.2.

Programska koda 4.2: Odmiki za krog

Tudi pri krogu se je pojavil enak problem z obrobami, kot sem ga opisal v podpoglavju o

pravokotniku.

4.5 Kroţni lok

Uporabniki lahko na svoj watchface dodajo tudi kroţni lok. To je lik, ki je zelo podoben

krogu, vendar ima še dva dodatna parametra. Uporabnik mora loku nastaviti začetni in

končni kot. Oba parametra sprejmeta vrednosti v razponu od 0 do 360 stopinj. Vrednost

začetnega kota predstavlja začetno točko za izris kroţnega loka, končni kot pa je relativen

na začetnega in predstavlja zaključek kroţnega loka.

Metoda na objektu Canvas za izris kroţnega loka za parameter sprejme velikost kvadrata,

ki zaobjema celoten lok. Iz tega razloga je v implementaciji programske kode kroţni lok


19

bolj podoben kvadratu kot krogu in iz tega razloga za parametre sprejme višino in širino

namesto polmera.

Ker na pametni uri Pebble kroţnega loka ni mogoče narisati z vgrajenimi metodami, smo

ta lik odstranili iz specifikacije formata za Pebble.

4.6 Besedilo

Da lahko uporabniki ustvarijo tudi digitalno uro in na risalno površino dodajo svoja

besedila, imajo na voljo element za prikaz besedila. Element prejme koordinate izhodiščne

točke, velikost pisave, vrsto pisave in besedilo, ki se mora prikazati. Da bi se besedilo

pravilno prikazalo na vseh platformah, kjer lahko poţenemo ustvarjene watchface-e, se

morajo mere besedila vedno izmeriti popolnoma enako. Zaradi različnih implementacij

merjenja teksta na različnih platformah se je to izkazalo za dokaj teţko opravilo.

Sistem Android nam ponudi nekaj metod, ki nam pomagajo pri merjenju višine in širine

besedila. Razred Paint vsebuje dve metodi, ki vrneta dolţino podanega niza znakov glede

na tip pisave in velikost. Sprva smo za merjenje dolţine uporabljali metodo getTextBounds

razreda Paint, kar pa se je izkazalo za napako, saj metoda za merjenje dolţine besedila

elementa Canvas v HTML5, ki se uporablja na spletni strani, ni vračala enakega rezultata.

Da bi uskladili mere, smo na Android strani morali uporabiti metodo measureText.

Višino besedila lahko na sistemu Android izmerimo s pomočjo metode getTextBounds, ki

vrne podatke o merah pisave. Višina, ki jo vrne metoda, ne predstavlja dejanske višine

besedila, temveč le od zgornje do črkovne črte. Da dobimo višino pravokotnika, v katerem

leţi celotno besedilo, moramo prišteti še razdaljo med črkovno in spodnjo črto. Črkovne

črte so vidne na sliki 4.1.


20

Slika 4.1: Črkovne črte

4.7 Slika

Slika je eden izmed najbolj pomembnih elementov za ustvarjanje watchface-ov. Slike

lahko grafični oblikovalec izdela v profesionalnem orodju za urejanje slike, kot je na

primer Photoshop. Takšne slike se lahko nato uporabijo za kazalce ure, ozadje ali kakšne

druge elemente. Sliko na element Canvas narišemo z metodo drawBitmap, ki sprejme

pozicijo, višino in širino slike ter sliko za prikaz. Pri pametni uri Pebble je zaradi

omejenega prostora moţno dodati le eno sliko.

4.8 Mnogokotnik

Mnogokotnik je lik, ki ga lahko sestavimo iz poljubnega števila točk. Prva točka

mnogokotnika je vedno definirana kot izhodiščna točka, njene koordinate so absolutne

glede na risalno površino celotne ure. Vrednosti koordinat vseh nadaljnjih točk v

mnogokotniku predstavljajo relativen odmik od izhodiščne točke. Mnogokotniku ne

moremo nastaviti poravnav, na Canvas pa ga narišemo z metodo drawPath, ki ji kot

parameter podamo seznam vseh točk, ki so del mnogokotnika.


21

5 DATOTEČNI FORMAT

Za prenos in hranjenje podatkov o sestavljeni obliki ure smo implementirali shranjevanje

vseh potrebnih datotek v zip arhiv. Shranjevanje v datotečni format poteka na spletni

strani, kjer uporabniki gradijo svoj watchface. Da si lahko uporabniki ogledajo svoj izdelek

tudi na mobilni aplikacij in jo kasneje naloţijo na pametno uro, smo morali implementirati

branje podatkov iz našega formata v programskem jeziku Java.

5.1 Opis

Za prikaz celotnega watchface-a potrebujemo več različnih datotek. Za potrebe našega

projekta smo razvili datotečni format z natančno določenimi specifikacijami. Vse potrebne

datoteke se shranijo v zip arhiv, ki si ga lahko uporabniki delijo med seboj ali pa se shrani

na našem spletnem streţniku, kjer je na voljo vsem uporabnikom naše spletne in tudi

mobilne aplikacije. Za naš zip arhiv smo določili končnico wfe, ki jo lahko uporabniki iz

datotečnega sistema odprejo z našo aplikacijo.

Da se lahko watchface pravilno naloţi, mora zip arhiv vsebovati datoteko watchface.txt,

kjer je v formatu json shranjen podroben opis vseh elementov, ki jih uporabnik doda na

risalno površino. Prav tako mora arhiv vsebovati mapi Fonts in Images. V mapo Fonts se

dodajo vse pisave, ki jih uporabnik doda v spletnem vmesniku, v mapo Images pa vse

slike. Če uporabnik izdela watchface za pametno uro Pebble, se bo v arhiv dodala še

izvršilna datoteka s končnico .pbw in datoteka z okrajšanim json zapisom elementov, ki se

uporabi za prikaz oblike ure na prostorsko omejenem Pebblu.

5.2 Struktura json datoteke

Na začetku json zapisa, vidnega na primeru programska koda 5.1, so zapisani potrebni

meta podatki o watchface-u. Shranijo se podatki, kot so ime avtorja, naslov watchface-a,

opis in verzija. Ker obstaja moţnost implementacije trga, kjer bi se lahko watchface-i


22

prodajali, smo dodali še podatek o ceni, ki pa ga trenutno ne uporabljamo nikjer v

aplikaciji. Podatek o verziji je potreben zato, da se lahko verzija lokalne datoteke primerja

z verzijo na spletnem streţniku, od koder se po potrebi prenese posodobitev. Vedno, ko

avtor shrani spremembo v svojem watchface-u, se številka verzije poveča za ena.

Programska koda 5.1: Primer json formata


23

Zraven vseh meta podatkov je v json datoteki shranjen še seznam »wfLayouts«. WFLayout

je element, v katerem shranimo celoten izgled watchface-a. Ima podatke, ki so pomembni

za pravilen izris ure. Naš format za shranjevanje ur je sestavljen tako, da podpira dodajanje

večjega števila elementov WFLayout, kar posledično pomeni, da bi lahko v enem zip

arhivu imeli shranjenih več popolnoma različnih watchface-ov. Vsak WFLayout je

popolnoma neodvisen od drugih. Vsebuje podatke o postavitvi sistemskih elementov ure, o

priporočeni hitrosti osveţevanja ure. Vsebuje tudi zastavice, ki nam povejo, ali watchface

prikazuje podatke, kot so stanje vremena ali lokacijo.

Vsak WFLayout vsebuje tudi seznam vseh elementov, iz katerih je sestavljena njegova

grafična podoba. Seznam elementov je shranjen v lastnosti wfElementArrayList. V

seznamu elementov ima vsak element shranjen svoj tip in vse podatke, ki so potrebni, da

ga lahko izrišemo na zaslon in animiramo.

5.3 Branje json podatkov

Za nalaganje podatkov smo ustvarili sistem, s pomočjo katerega naloţimo vse podatke iz

zip arhiva. Naš cilj je bil, da naredimo preprost in učinkovit sistem, ki bo pregleden in

enostaven za uporabo. Prav tako je bilo pomembno, da je sistem odporen na posodobitve,

če moramo kaj dodati v specifikacijo formata.

Za enostavno uporabo smo ustvarili razred WatchfaceInfo, preko katerega lahko v

programski kodi naloţimo watchface. Za nalaganje watchface-a iz datoteke smo ustvarili

statično metodo loadWatchfaceInfo, ki sprejme pot do datoteke, kjer je shranjen arhiv z

vsemi potrebnimi podatki. Metoda iz zip arhiva najprej pridobi tekstovno datoteko z

imenom »watchface.txt«. Vsebino te datoteke metoda pošlje razredu GsonSerializer. Ta

razred smo napisali za enostavnejšo uporabo Googlove knjiţnice Gson, s pomočjo katere

lahko v Javanske objekte napolnimo podatke iz json formata. Razredu GsonSerializer smo

dodali metodo deserializeWFElement.

Metoda deserializeWFElement ustvari nov objekt tipa GsonBuilder, ki ga ponuja knjiţnica

Gson. Pred pričetkom deserializacije podamo zahtevo, da se naj podatki vstavijo le v polja,

ki so posebej označena z anotacijo @Expose. Ta zahteva ni nujno potrebna, saj lahko


24

knjiţnica Gson dostopa tudi do polj, ki niso eksplicitno označena. Anotacijo @Expose smo

morali uporabiti v namen testiranja sistema, ko smo potrebne razrede za watchface-e

proizvedli kar v programski kodi in jih v obratni operacij nato serializirali v json format. V

tem primeru se v json zapis shranijo le polja z @Expose anotacijo.

Za pravilno obdelavo json zapisa smo morali napisati svojo implementacijo adapterja, ki

nadzira pretvorbo zapisa v Javanske objekte, ki je vidna na primeru programska koda 5.2.

Razred smo poimenovali WFElementAdapter. Potrebno je bilo, da smo v njem

implementirali metodi deserialize in serialize, ki ju definirata interface-a JsonSerializer in

JsonDeserializer.

Programska koda 5.2: Primer metode deserialize

Svojo implementacijo metode deserialize smo morali uporabiti zato, ker se v seznamu

elementov za izris pojavljajo elementi različnih tipov, ki vsi dedujejo od nad razreda

WFElement. V Javi jih lahko iz tega razloga vse dodamo v en seznam tipa WFElement. Da

bi lahko vedeli, kateri tip moramo ustvariti, mora json zapis vsakega elementa vsebovati

tudi ta podatek. Za vsak element smo v parameter type shranili tip objekta v Javi, v

parameter properties pa vse vrednosti za polja tistega razreda. Tip objekta smo nato v Javi

sestavili iz imena paketa »com.blukz.wear.watchfacegeneratorengine.elements« in imena

tipa.

Po uspešno zaključeni operaciji nalaganja se vsi podatki iz jsona zapisa shranijo v polja

objekta tipa WatchfaceInfo. Podatki, kot so naslov in avtor watchface-a, pa tudi vsi


25

grafični elementi so potem dostopni vsepovsod, kjer imamo referenco na prej omenjen

objekt.

5.4 Nalaganje slik

Slike, ki so bile naloţene v watchface, se v arhivu shranijo v mapo Images. Da bi vedeli,

katere slike so na voljo, ko bomo prikazovali watchface, smo v json format dodali seznam

z imenom imagesArrayList. V tem seznamu so zapisana imena vseh slik, ki se nahajajo v

mapi Images skupaj z njihovimi končnicami. V metodi razreda WatchfaceInfo se po

uspešno končanem branju json zapisa poţene metoda za nalaganje slik z imenom

preloadBitmaps. Podamo ji pot do zip arhiva in instanco objekta WatchfaceInfo, preko

katere lahko dostopamo do seznama vseh slik.

V metodi preloadBitmaps iteriramo skozi celoten seznam slik in jih s pomočjo metode

loadBitmap razreda ZipLoader pretvorimo v objekte tipa Bitmap. Za enostaven dostop do

vseh naloţenih slik smo ustvarili HashMap, ki se uporablja za hranjenje ključa in

vrednosti. Za dostop do vrednosti moramo le podati iskani ključ v HashMap objekt. Ključ

je v našem primeru ime slike, vrednost pa naloţena slika v objektu Bitmap. Ko dodamo v

HashMap vse slike, shranimo podatke v singleton objekt WFBitmapContainer. Za dostop

do slik moramo le pridobiti referenco na instanco objekta preko metode getInstance in nato

preko metode getWatchfaceBitmap zahtevati sliko pod ţelenim imenom.

5.5 Nalaganje pisav

Nalaganje pisav deluje po enakem postopku kot nalaganje slik. Naloţena pisava iz zip

arhiva se naloţi v objekt tipa Typeface. Razlika od postopka nalaganja slik je bila v načinu

pridobitve objekta, ki predstavlja pisavo v programski kodi. Za pridobitev objekta

Typeface smo napisali metodo loadFont v razredu ZipLoader. Metoda pridobi objekt

Typeface na tak način, da najprej iz zip arhiva odpakira datoteko s pisavo na poljubno

mesto na datotečni sistem naprave. Objekt Typeface lahko nato ustvarimo s klicem metode

createFromFile, ki mu podamo pot do odpakirane datoteke s pisavo. Vse naloţene pisave

dodamo v singelton WFFontContainer po enakem sistemu, kot smo to storili s slikami.


26

6 IZRIS ELEMENTOV

Ko vse elemente naloţimo iz našega formata za shranjevanje, moramo naloţeno obliko

izrisati na zaslon. Za izris poskrbi razred WatchfaceEngine. WatchfaceEngine je bil

načrtovan tako, da ga lahko brez teţav uporabimo na pametni uri ali pa ga vključimo v

mobilno aplikacijo. Pri implementaciji takšnega delovanja smo naleteli na teţavo, saj na

pametni uri za izris watchface-a uporabimo nad razred CanvasWatchFaceService.Engine,

na mobilnem telefonu pa nad razred View, ki med seboj nista kompatibilna.

WatchfaceEngine potrebuje referenco na objekt, kjer je bil ustvarjen, da lahko proţi

metodo invalidate, ki osveţi risalno površino, tako da ponovno izriše vse, kar je na njej.

Ker smo morali pridobiti referenco na dva različna objekta, smo ustvarili dva

konstruktorja, pri čemer je eden sprejel objekt tipa View, drugi pa objekt tipa

CanvasWatchFaceService.Engine. Rešitev se je izkazala za problematično, saj smo v

modul Watchface Editor engine uvozili razred CanvasWatchFaceService.Engine, ki je

obstajal samo na pametni uri, ne pa tudi na strani mobilne aplikacije, kar je povzročilo

napako pri zagonu programske kode. Čeprav sta si platformi zelo podobni, obstajajo

razredi, ki jih ne moremo uporabiti na obeh straneh aplikacije. Da bi rešili problem, smo

uvedli »interface« Redraw. Zdaj sta lahko različna razreda implementirala enako metodo

onDraw, ki jo kliče WatchfaceEngine, ko ţeli osveţiti risalno površino. Dejanska osveţitev

je prepuščena implementaciji v posameznem razredu, ki ga WatchfaceEngine kliče.

6.1 Uporaba razreda

Za enostavno uporabo razreda WatchfaceEngine smo napisali dva razreda, ki poskrbita za

nekatere podrobnosti implementacije.

6.1.1 WatchfaceView

Za vgradnjo v mobilno aplikacijo smo ustvarili razred WatchfaceView. To je razred, ki

deduje od razreda View, kar nam omogoči dostop do metode onDraw, ki je potrebna za to,


27

da lahko rišemo na risalno površino Canvas, ki nam jo posreduje sistem Android.

WatchfaceView vsebuje instanco razreda WatchfaceEngine in nam preko svojih metod

omogoča posreden dostop do njega. Razred implementira tudi metodo redraw iz

»interface-a« Redraw, v kateri kliče metodo invalidate nad razreda View in s tem sproţi

osveţitev risalne površine. Z WatchfaceView razredom pridobimo element, ki ga lahko

enostavno dodamo kamorkoli v grafični vmesnik naše aplikacije in brez teţav prikaţemo

in animiramo obliko ure. V naši mobilni aplikaciji smo WatchfaceView uporabili za

predogled watchface-ov na telefonu, preden jih uporabniki namestijo na uro.

6.1.2 WatchfaceEngineHelper

Za pomoč pri prikazu in animaciji watchface-ov na pametni uri Android smo napisali

razred WatchfaceEngineHelper, ki deduje od razreda CanvasWatchFaceService. V

navodilih za razvoj watchface-ov na uradni strani za Android razvijalce je zapisano, da

moramo za pravilno delovanje watchface-ov na uri uporabiti enega izmed dveh nad

razredov. Izbiramo lahko med razredom CanvasWatchFaceService, ki nam omogoča izris

watchface-ov na element Canvas, in razredom Gles2WatchfaceService, ki nam omogoča

risanje watchface-a z OpenGL ES 2.0. Ker nam element Canvas ponuja metode za izris

vseh elementov, ki jih ţelimo izrisati in je tudi bolj enostaven za uporabo, smo se odločili,

da za izris in animacijo ne bomo uporabili OpenGL načina. Tako kot WatchfaceView tudi

WatchfaceEngineHelper implementira metodo »redraw« in ob instanciranju objekta

WatchfaceEngine v konstruktorju poda referenco na sebe. SetWatchface metoda v

WatchfaceEngineHelper razredu nastavi še dodatne parametre za izgled sistemskih

gradnikov na uri, kot je vidno na primeru programska koda 6.1.


28

Programska koda 6.1: Nastavitev sistemskih indikatorjev

Da na uri uporabimo WatchfaceEngine, moramo ustvariti razred, ki deduje od

WatchfaceEngineHelper razreda. Nato lahko kličemo metodo »setWatchface«, da

naloţimo ţeleno uro, za podrobnosti implementacije pa poskrbi nad razred.

6.2 Opis delovanja razreda WatchfaceEngine

WatchfaceEngine nam ponudi vrsto metod, ki omogočajo izbiro watchace-a, ki ga ţelimo

prikazati, pa tudi nastavitev nekaterih parametrov, ki jih WatchfaceEngine potrebuje, da

lahko pravilno izriše elemente na zaslon.

Preden se začne izris elementov na zaslon, moramo WatchfaceEngine-u sporočiti podatke

o uri, na kateri bo izrisoval grafične elemente. Engine mora sprejeti podatek o tem, ali je

pametna ura okrogla ali pravokotna ter velikost brade v slikovnih pikah. Te podatke

posredujemo preko metode setLayoutProperties. Na pametni uri te podatke pridobimo v

metodi onApplyWindowInsets, na mobilnem telefonu, kjer nam sistem teh podatkov ne

posreduje, pa jih lahko prirejamo glede na naše zahteve. Prav tako moramo v

WatchfaceEngine pošiljati podatek o tem, ali je ura v spanju ali v stanju budnosti.

Watchface naloţimo s pomočjo metode setWatchface, ki sprejme objekt tipa

WatchfaceInfo, v katerega moramo predhodno naloţiti podatke o watchface-u. Prav tako


29

sprejme parameter »selectedLayout«, ki označuje izbiro skupine elementov, ki se naj

izriše, saj naš format podpira dodajanje večih slojev v en watchface.

6.2.1 SetWatchface

Metoda »setWatchface« iz objekta tip WatchfaceInfo prebere hitrost osveţevanja risalne

površine in tip ure, za katero je bil watchface ustvarjen. Dimenzije posameznega tipa ure

so definirane v razredu WFLayout in jih pridobimo s klicem statične metode

getLayoutDimensions, ki ji podamo tip ure iz naloţenih podatkov. Metoda vrne objekt tipa

Point, ki vsebuje resolucijo podanega tipa ure. Definirali smo 4 različne tipe ur:

Android Wear Square: 320x320 slikovnih pik

Android Wear Round: 320x320 slikovnih pik

Android Wear Round Chin: 320x290 slikovnih pik

Pebble: 144x168

Metoda setWatchface nato dostopi do seznama vseh elementov, ki jih mora izrisati in nato

pokliče metodo »initialize« vsakega posameznega elementa. Tukaj damo elementom

priloţnost, da si pripravijo vse potrebne vire, preden se začne osveţevanje na zaslon. Vsak

grafični element mora dedovati od nad razreda WFElement, ki tudi delno skrbi za

ţivljenjski cikel vsakega elementa.

Prav tako v metodi »setWatchface« ustvarimo razred tipa WFCanvas s parametri resolucije

zaslona ure, za katerega je bil watchface ustvarjen. Preko razreda WFCanvas bo potekal

izris elementov na zaslon.

6.2.2 Render

Po tem, ko smo nastavili vse potrebno, lahko začnemo z izrisom elementov na zaslon. Izris

poteka v metodi render, ki sprejme parameter tipa Canvas. Metodo render mora v metodi

onDraw klicati objekt, ki uporablja razred WatchfaceEngine. Metodo onDraw kliče sistem

Android in s tem sporoči objektu, da lahko osveţi svojo risalno površino. Sami nimamo

popolnega nadzora nad tem, kdaj bo sistem poklical metodo onDraw, lahko pa sporočimo,

da je osveţitev potrebna s klicem metode invalidate. Sistem Android na uri poskrbi, da se

bo metoda onDraw poklicala enkrat na minuto. Če ţelimo povečati hitrost osveţevanja,


30

moramo narediti svoj števec, ki bo na določen čas zahteval osveţitev zaslona. V

WatchfaceEngine smo tak števec implementirali s pomočjo razreda Handler, kar je tudi

priporočen način na sistemu Android. Števcu nastavimo hitrost osveţevanja na vrednost, ki

jo preberemo iz shranjenega watchface-a. Nato števec na določeno število milisekund

pokliče metodo »redraw« na objektu, čigar referenco smo poslali v WatchfaceEngine.

V metodi onDraw v WFCanvas pošljemo Canvas objekt, ki ga onDraw sprejme kot

parameter. Prav tako iteriramo skozi seznam vseh grafičnih elementov. Preden nad vsakim

kličemo metodi »updateValues« in »render«, za vsak element preverimo, ali je namenjen

izrisu, ko je ura v stanju budnosti ali v stanju spanja in primerjamo to nastavitev s

trenutnim stanjem ure preko metode isCandidateForRendering, katere implementacija je

postavljena v nad razred WFElement, od katerega dedujejo vsi grafični elementi.

Naš sistem je urejen tako, da vsak grafični element poskrbi za izris samega sebe, ko

WatchfaceEngine pokliče njegovo metodo render, kot je vidno na primeru programska

koda 6.2.

Programska koda 6.2: Izris pravokotnika

Na tak način smo ustvarili sistem, kjer lahko brez teţav dodajamo nove vrste grafičnih

elementov, in sicer tako, da preprosto dodamo novo implementacijo izrisa, drugih stvari pa

ne rabimo spreminjati, saj je vsak lik neodvisen od preostalega sistema.

Vsak lik poskrbi za implementacijo sestavnih delov, ki so potrebni za njegovo pravilno

delovanje, nekateri deli pa so skupni vsem likom. Te smo prestavili v nad razred

WFElement in si jih delijo vsi grafični elementi, ki dedujejo od tega nad razreda. Nad

razred WFElement poskrbi za lastnosti, kot so koordinate lika, rotacijska točka, rotacija in

stopnja vidnosti lika.


31

6.3 Skaliranje

Zato ker mora WatchfaceEngine izrisovati ure na različne oblike zaslonov, smo morali

poskrbeti za pravilno skaliranje prikazane slike. Naš cilj je bil, da bomo lahko po ţelji

spreminjali razmerja stranic risalne površine, ki jo podamo WatchfaceEngine-u, ta pa bo

izris prilagodil tako, da bo ohranil originalno razmerje ure, za katero je bil ustvarjen

naloţen watchface. Za namen skaliranja smo ustvarili razreda Metrics in WFCanvas.

6.3.1 Metrics

Razred Metrics v konstruktorju sprejme podatke o višini in širini originalne risalne

površine, za katero je bil watchface ustvarjen, in trenutno višino in širino risalne površine,

na katero se bo moral izrisati watchface. Če bi vedno izrisali elemente na njihove absolutne

koordinate, ki so shranjene v json zapisu, bi se zgodilo, da bi na manjših urah nekateri

segali izven zaslona, pri večjih urah pa ne bi napolnili celotne površine.

Razred Metrics primerja razmerje med dolţinami višine in širine originalne in trenutne

risalne površine. Izbere stranico originalne površine, ki se mora najmanj povečati ali

zmanjšati, da dobi velikost kot enaka stranica trenutne površine. Dobljeno razmerje priredi

tudi skalirnemu razmerju za drugo stranico, tako da bo izrisana slika ohranila enako

razmerje stranic.

Prav tako smo morali skalirano sliko prestaviti na sredino trenutne risalne površine. To

smo dosegli s parametroma »offsetX« in »offsetY«. Vrednosti predstavljata odmik od ţe

pretvorjenih izhodiščnih točk vsakega elementa, ki ga izrišemo. Vrednost za offsetX smo

izračunali tako, da smo polovico skalirane originalne širine odšteli od polovice trenutne

širine. Seveda smo vrednost za offset izračunali le za stranico, ki smo ji spremenili velikost

po skalirnem razmerju obratne stranice. Ko razred Metrics izračuna skalirno razmerje in

odmike po x in y osi, so ti podatki na voljo preko javnih metod razreda.


32

6.3.2 WFCanvas

Da se nismo rabili ob vsakem izrisu grafičnih elementov na zaslon ukvarjati s skaliranjem,

smo ustvarili razred WFCanvas, ki deluje kot konkretna implementacija risanja na

površino. S tem smo dosegli veliko ločenost med kodo za izris elementov in dejanskim

risanjem. Trenutno uporabljamo izris na element Canvas, če pa bi ţeleli risati z OpenGL,

bi morali samo ustvariti novo implementacijo razreda WFCanvas. Programska koda, ki

dostopa do metod za izris preko WFCanvasa, bi ostala popolnoma enaka. V WFCanvas

smo dodali metode, ki smo jih potrebovali, da smo lahko izrisali podprte elemente. V

konstruktorju ustvarimo razred Metrics, da lahko nato s podatki, ki jih nudi, pravilno

skaliramo vsak izris na Canvas.

Vedno ko ţelimo izrisati grafični element, moramo njegove x in y koordinate skalirati s

pomočjo metode convertHeightForPosition ali convertWidthForPosition. To moramo

storiti iz tega razloga, ker morajo biti vsem pozicijskim vrednostim prišteti še odmiki, da je

slika izrisana v sredini trenutne risalne površine. Za vsako vrednost, ki ni odvisna od

poloţaja elementa, kot je na primer višina besedila, moramo uporabiti skalirni metodi

convertHeightForSize in convertWidthForSize. Ti dve metodi pri računanju ne upoštevata

odmikov in vrneta le originalno vrednost, pomnoţeno s skalirnim faktorjem. Uporaba

omenjenih metod je vidna na primeru programska koda 6.3.

Programska koda 6.3: Izris besedila s skaliranjem


33

7 ZNAČKE

Da lahko uporabniki ustvarjajo dinamične elemente, ki se premikajo, spreminjajo velikost

in se vrtijo, smo uvedli sistem značk. Značka v okolju platforme Watchface Editor

predstavlja spremenljivko, ki se ji lahko skozi čas spreminja vrednost. Značke lahko

dodamo v skoraj vse lastnosti elementov. Zato ker je naša platforma ločena na mobilno

aplikacijo in spletno stran, smo morali sistem značk implementirati tako v programskem

jeziku JavaScript kot tudi v programskem jeziku Java. Podrobneje bomo obdelali del, ki

teče na mobilni aplikaciji in pametni uri Android Wear.

Z uvedbo značk v naš sistem smo dali uporabnikom veliko moč pri upravljanju z elementi

na risalni površini. Uporabnik lahko na primer vstavi značko v lastnost pravokotnika, ki

predstavlja x koordinato njegove pozicije. Če bo za koordinato x vstavil značko za trenutno

sekundo v minuti, se bo pravokotnikov poloţaj spremenil vsako sekundo, glede na

vrednost značke. Če dodamo značko v lastnost, ki predstavlja višino pravokotnika, se bo

pravokotniku vsako minuto velikost povečala od 0 do 59, kot se bo spreminjala vrednost

značke za sekundo.

7.1 Oblika zapisa

Da bi bile značke takoj prepoznavne v nizu znakov in da bi imele enostavna imena, ki si jih

ne bi bilo teţko zapomniti, smo uvedli sistem poimenovanja značk:

Vsebina vsake značke se zapiše v oglatih oklepajih

Prve črke v znački označujejo skupino, v katero značka spada. WH pomeni vreme,

T pomeni čas

Sledi opis podatka, ki ga značka vrne. Lahko je okrajšan ali pa izpisan s celotno

besedo za laţje razumevanje

Če značka vrne samo tekstovno vrednost, moramo na koncu imena dodati veliko

črko T.

Značka za število trenutnega meseca torej izgleda tako: [Tmonth]


34

7.2 Vrste značk

V našo aplikacijo smo vgradili veliko število različnih značk. Zraven obveznih značk za

časovne parametre smo dodali še značke za vreme, lokacijo, stanje telefona in ure, koledar

in značke za senzorje na uri.

7.2.1 Čas

Značke za čas so najbolj temeljne značke našega sistema. So največkrat uporabljene, saj

brez njih ne moremo ustvariti watchface-a, ki kaţe čas. V kategoriji značk za čas najdemo

18 značk, med drugim tudi:

Značke, ki vrnejo vrednost trenutnega časa

To so značke za trenutno sekundo v minuti, minuto v uri in uro v dnevu.

Uporabljajo se lahko za izpis časa v obliki digitalne ure

Značke za rotacijo

Te značke vrnejo rotacijske vrednosti v stopinjah za sekunde, minute itd.

Uporabljajo se za nastavitev rotacije za analogne kazalce

Značke za neprekinjeno rotacijo

Te značke vrnejo rotacijske vrednosti v stopinjah za sekunde, minute itd. Vrednosti,

ki jih vrnejo, so takšne, da je rotacija kazalcev neprekinjena in se na primer

vrednost za uro spreminja vsako minuto in ne samo vsako polno uro.

Značke za datum

Vrnejo vrednosti, ki predstavljajo trenutni mesec, leto in dan v mesecu itd.

7.2.2 Vreme

Ker uporabniki ţelijo zraven trenutnega časa na pametni uri videti še druge podatke, smo

dodali še značke za vreme. Trenutno ponujamo na izbiro šest značk za stanje vremena:

Trenutna temperatura

Kratek opis vremena

Stanje vremena


35

Vlaţnost

Pritisk

Hitrost vetra

7.2.3 Stanje telefona

Za prikaz trenutnega stanja telefona kar na naši pametni uri ponujamo tudi sedem značk za

te vrednosti:

Stanje baterije

Temperatura baterije

Stanje polnjenja telefona

Ali imamo omogočene mobilne podatke

Ime mobilnega operaterja

Stanje povezave na WiFi omreţje

Ime povezanega WiFi omreţja

7.3 Pridobitev podatkov

Vrednosti za časovne značke lahko pridobimo neposredno iz ure ali telefona, kjer teče

programska koda modula Watchface Editor engine. Podatke za nekatere skupine značk, kot

so značke za vreme in stanje telefona, pa lahko pridobimo samo na telefonu, na uri pa ne.

Da pridobimo podatke za vreme, potrebujemo dostop do interneta, saj so podatki na voljo

preko spletnega servisa. Podatke o telefonu, kot so stanje baterije, pa lahko pridobimo

samo s pomočjo programske kode, ki teče na telefonu.

Napisali smo sistem, po katerem lahko iz telefona na uro enostavno pošiljamo potrebne

podatke. Za pridobitev podatkov poţenemo na mobilnem telefonu »Service«. To je del

aplikacije, ki lahko teče v ozadju in ne potrebuje grafičnega vmesnika. Vsaka skupina

značk ima svoj »Service«, ki ga aplikacija poţene po določenem času. Ker imamo v json

zapisu navedeno, katere skupine značk uporablja naloţen watchface, lahko mobilna

aplikacija poganja samo potrebne »Service«, da prihrani baterijo. Prav tako lahko


36

uporabniki v nastavitvah aplikacije ročno vklopijo ali izklopijo pridobivanje podatkov za

izbrano skupino značk.

7.4 Razredna arhitektura

Vsaka skupina značk se nahaja v svoji mapi v modulu Watchface Generator engine. To

smo naredili za večjo preglednost in da iskano značko laţje najdemo. Za primer arhitekture

bomo opisali skupino značk za čas, saj so vse druge skupine narejene po istem principu.

Vse značke za čas se nahajajo v mapi »tag«, ki jo najdemo v mapi »timegroup«. Znotraj

mape »timegroup« lahko najdemo razred TimeGroup, ki deduje od nad razreda TagGroup.

V razred TimeGroup moramo dodati vse značke, ki so del skupine značk za čas, kar je

vidno na primeru programska koda 7.1. Prav tako lahko na tem mestu značkam podamo še

dodatne specifične parametre, ki jih potrebujejo, da lahko vrnejo zahtevane vrednosti. V

primeru značk za čas vsaki znački podamo referenco na objekt tipa Time. To storimo

predvsem zato, da ne rabi vsaka značka ustvariti svoje instance. Nad razred TagGroup

vsebuje metodo getTag, ki sprejme parameter tipa String. Parameter je ime značke, ki jo

metoda poskusi poiskati v seznamu dodanih značk. Če najde ujemajoče ime, vrne

referenco na objekt iskane značke.

Vsaka značka je v modulu Watchface Generator engine zapisana v svoj razred. Vse značke

morajo dedovati od razreda Tag. V razredu Tag obstajajo metode za pridobitev vrednosti

značke in za spremembo njene vrednosti. Prav tako vsebuje abstraktno metodo

updateValue, ki jo mora implementirati vsaka značka, in kjer se pridobi in posodablja

vrednost, ki jo značka vrne. Ker časovne značke v konstruktorju sprejmejo objekt tipa

Time, smo tega dodali v razred TimeTag, od katerega dedujejo vse časovne značke, sam pa

deduje od razreda Tag.


37

Programska koda 7.1: Dodajanje značk za čas


38

8 OBDELAVA ZNAČK IN IZRAZOV

Eden izmed najpomembnejših delov celotnega Watchface Editor engine modula je

nedvomno razred Parser. Glavna naloga tega razreda je ta, da pretvori niz znakov, ki jih

lahko uporabniki vpišejo v lastnosti elementov v število, ki se nato uporabi za izris

elementa na zaslon. Parser, napisan za mobilno aplikacijo in pametno uro, podpira

pretvorbo samostojne značke, več značk zapisanih v enem nizu za prikaz v elementu

WFLabel, ovrednotenje preprostih matematičnih izrazov kot tudi skriptiranje s skriptnim

jezikom JavaScript.

Da lahko učinkovito pretvarjamo značke ali izraze v števila, smo morali v ta namen

prilagoditi velik del celotnega Watchface Editor engine modula. Objekt tipa Parser

ustvarimo v WatchfaceEngine-u, od koder ga posredujemo vsem grafičnim elementom.

Grafični elementi so v namen optimizacije obdelave značk dobili ţivljenjski cikel, pa tudi

značke same so tesno povezane z razredom Parser, saj le-ta iz njih pridobi potrebne

podatke, da lahko v grafične elemente vrne zahtevana števila ali nize.

8.1 Ţivljenjski cikel grafičnih elementov

Da lahko na mobilnem telefonu in uri animiramo elemente glede na vrednost značk,

moramo ugotoviti, katera značka se nahaja v lastnosti elementa. Zaradi potrebe po vpisu

značk v lastnosti grafičnih elementov so vse lastnosti, kot na primer koordinate x in y, ki

lahko sprejmejo značko, tipa String.

V namen obdelave značk smo uvedli ţivljenjski cikel vseh grafičnih elementov, ki

dedujejo od nad razreda WFElement. Ţivljenjski cikel razreda definira metode in vrstni

red, po katerem se bodo te metode klicale. Ţivljenjski cikel grafičnih elementov se sproţi v

metodi setWatchface razreda WatcfaceEngine. V tej metodi se kliče metoda »initalize«

vsakega grafičnega elementa, ki ima implementacijo tudi v abstraktnem razredu


39

WFElement. Metoda v abstraktnem razredu nato nadaljuje s klici specifičnih metod, kjer se

obdelajo vse značke določenega elementa in se element pripravi na animiranje.

8.1.1 Optimizacija lastnosti

Kot prva se vedno kliče metoda optimizeProperties. Ker vse lastnosti elementov vedno

prejmemo kot niz tipa String, v začetku obdelave ne vemo, v kateri lastnosti je zapisana

značka in v kateri samo število. Če je v lastnosti zapisano število, pomeni, da se vrednost

te lastnosti v času izrisa ure ne bo nikoli spremenila. Ker bo vrednost vedno enaka, je ne

rabimo posodabljati. V metodi optimizeProperties za vsako lastnost preverimo, ali vsebuje

število ali še kakšne druge znake. Abstraktni razred WFElement vsebuje svojo

implementacijo te metode, v kateri optimizira lastnosti, ki so skupne vsem grafičnim

elementom. Če ima grafični element še kakšne dodatne lastnosti, mora poskrbeti, da bo

dodal kodo za njihovo optimizacijo v svojo optimizeProperties metodo. Primer tega je

krog, ki ima lastnost polmer.

Lastnosti, ki jih preberemo iz json zapisa, se bodo v grafične elemente naloţile v

spremenljivke tipa String. To so koordinate, podatki o višini, širini in rotaciji. Da lahko te

vrednosti uporabimo za izris elementov na risalno površino, jih moramo pretvoriti v

spremenljivke tipa float. V metodi optimizeProperties preverimo, ali je določena lastnost

število, in to število priredimo pripadajoči spremenljivki tipa float, kot je vidno na primeru

programska koda 8.1.

Programska koda 8.1: Optimizacija x koordinate

Iz programske kode 9 je razvidno, da vsako lastnost grafičnega elementa v kodi

predstavimo z dvema spremenljivkama. Pri x koordinati sta to spremenljivki x tipa String

in xF tipa float. S tem, ko spremenljivko tipa String nastavimo na null, damo nadaljnjemu


40

postopku optimizacije vedeti, da ta lastnost ne vsebuje značke in da ne potrebuje dodatne

obdelave.

8.1.2 Grajenje HashMap

Po tem, ko se izvajanje metode optimizeProperties zaključi, se kliče metoda

buildHashMap. Vsaka lastnost tipa String, ki ni bila nastavljena na vrednost null v metodi

optimizeProperties, se pošlje v nadaljnjo obdelavo. Lastnost podamo kot parameter metode

buildHashMap objekta Parser, kjer izvedemo pred procesiranje nizov.

8.1.3 Posodobitev lastnosti

Pred vsakim klicem metode render grafičnih elementov se pokliče metoda updateValues.

Klic izvede WatchfaceEngine. V tej metodi pridobimo dejanske številčne vrednosti za vse

lastnosti, ki so imele vpisane značke. Preskočimo tiste, ki so vsebovale samo števila.

Razred Parser nam nudi dve vrsti metod za pridobitev vrednosti. Za numerične lastnosti

uporabimo metodo parseNumber, za lastnosti, kot so vsebina teksta, pa imamo na voljo

metodo parseString.

8.1.4 Izris

Ko se mora grafični element izrisati na risalno površino, WatchfaceEngine pokliče njegovo

metodo render. Če smo pravilno implementirali metode ţivljenjskega cikla elementa, bo ta

imel na tem mestu vse potrebne vrednosti, da se izriše na zaslon. Metoda render je kritična

za delovanje celotnega sistema, saj se kliče ob vsaki osveţitvi, kar je lahko tudi 50 krat na

sekundo. Iz tega razloga moramo biti zelo pozorni na programsko kodo, ki se nahaja v tej

metodi. Paziti moramo, da v tej metodi ne izvajamo nepotrebnih operacij in da ne

ustvarjamo novih objektov.


41

8.2 Parser

Razred Parser ustvarimo, preden se začne izris slike in ga nato posredujemo razredom, ki

ga potrebujejo. V konstruktorju razreda ustvarimo objekte, ki dedujejo od razreda

TagGroup, da lahko Parser dostopa do podatkov vsake posamezne značke.

Parser mora razčleniti in ovrednotiti niz, ki ga prejme kot argument v metodi parseNumber

in parseString. V tabeli 8.1 si lahko ogledamo vrnjene vrednosti teh dve metod glede na

vhodni parameter, če za primer vzamemo, da je trenutni čas 15:30:24. Značka Ts

predstavlja trenutno sekundo in značka Tm trenutno minuto.

Tabela 8.1: Primer zapisa značk

Vhodni parameter parseNumber parseString

»[Ts]« 24 »24«

»[Tm]-[Ts]« Ni definirano »30-24«

»=[Tm]-[Ts]« 6 »6«

Ker se vrednosti značk spreminjajo skozi čas, moramo ob vsaki osveţitvi ponovno

ovrednotiti vse lastnosti, ki se lahko spremenijo. Iz tega razloga mora biti programska koda

v Parserju optimizirana do take meje, da se ob klicu metod parseNumber in parseString

izvajajo le najbolj nujne operacije.

8.2.1 Predprocesiranje

Operacije za ugotavljanje, katera značka se nahaja v nizu in kakšna je njena natančna

pozicija v nizu, so dokaj zahtevne in bilo bi zelo slabo za delovanje sistema, če bi jih

izvajali v vsaki osveţitvi risalne površine. Čeprav se elementi lahko premikajo po zaslonu

in izgledajo zelo dinamično, se podatki o njihovih lastnostih nikoli ne spremenijo. To

posledično pomeni, da moramo v Parserju vedno pregledovati enake nize znakov, za katere

grafični elementi zahtevajo vrednosti, da lahko sami sebe izrišejo na zaslon. Iz tega razloga

smo se odločili, da bomo poskusili pridobiti čimveč podatkov o nizih ţe pred začetkom

izrisovanja. To storimo v metodi »buildHashMap«. Metodo morajo klicati grafični

elementi in poslati v njo vse lastnosti, ki jih ţelijo kasneje ovrednotiti.


42

Metoda kot parameter sprejme niz znakov, ki lahko vsebuje samo eno značko ali celoten

izraz, ki ga je potrebno ovrednotiti. Niz najprej pregledamo za vse značke. Uporabimo

regex izraz, ki poišče niz znakov, ki se sklada z našimi pravili za izgled značke. Nato

ustvarimo seznam za objekte tipa PreprocessedTagInfo, v katerega shranimo vse najdene

značke skupaj z njihovimi pozicijami v originalnem nizu. Objekti TagGroup nam

posredujejo značke glede na iskano ime značke in nam vedno vrnejo samo eno instanco

določene značke. Referenco na to značko shranimo še v globalni seznam značk, ki ga

hranimo v Parserju. Iz tega sledi, da čeprav se enaka značka pojavi v več različnih nizih,

bo v celotnem sistemu obstajala samo ena instanca te značke.

Seznam značk in originalen niz nato shranimo v objekt tipa PreprocessedStringInfo. Ta

preveri, ali je niz izraz in posledično tudi, če vsebuje le preproste matematične operacije ali

tudi JavaScript programsko kodo. Objekt PreprocessedStringInfo z vsemi informacijami o

nizu dodamo v HashMap, ki hrani podatke v obliki ključ in vrednost. Kot ključ podamo

hash vrednost originalnega niza, kot vrednost pa objekt tipa PreprocessedStringInfo. S tem

smo podatke o nizu shranili za uporabo v času osveţevanja risalne površine.

8.2.2 Osveţevanje vrednosti značk

Ker sistem nima podatka o tem, kdaj bo katera značka spremenila vrednost, se mora ob

vsaki osveţitvi poslati ukaz v vse aktualne značke, da osveţijo svoje vrednosti. Omenjeno

operacijo izvedemo v razredu WatchfaceEngine s klicem metode updateTags razreda

Parser, preden kličemo metode render vsakega grafičnega elementa. V metodi updateTags

se nad vsako značko v globalnem seznamu značk pokliče metoda updateValue. Metoda

updateValue vsake značke je pomembna za Parser zato, ker je vsaka značka zadolţena, da

v tej metodi preveri, ali se je njena vrednost od zadnje osveţitve spremenila. Če se je,

nastavi zastavico hasChanged na vrednost true.


43

8.2.3 Pridobitev vrednosti za podan niz

Metodi parseNumber in parseString delujeta zelo podobno. Razlikujeta se le v tem, da

metoda parseNumber vrne numerično vrednost tipa float, metoda parseString pa tekstovno

vrednost tipa String. Metodi se izvajata v času osveţevanja, zato moramo biti pazljivi, da

implementacija ni procesorsko zahtevna in da ne ustvarjamo nepotrebnih objektov.

Najprej iz HashMap seznama pridobimo PreprocessedStringInfo objekt za niz, ki je podan

v metodo. Če niza prej nismo poslali v obdelavo v metodo buildHashMap, ga sistem na tej

točki ne bo mogel ovrednotiti in bo metoda parseNumber vrnila privzeto vrednost 1,

metoda parseString pa kar nespremenjen niz.

Če bo niz najden v HashMap seznamu, bosta metodi najprej preverili, ali je v nizu zapisan

izraz. Ta podatek je shranjen v objektu PreprocessedStringInfo, ki smo ga pridobili iz

seznama HashMap. Če je niz izraz, bosta tega najprej posredovali metodi replaceTags, ki

bo vse značke v nizu zamenjala z njihovimi vrednostmi. Metoda replaceTags uporablja

StringBuilder, preko katerega manipulira z nizom, zato ker ta ob operacijah nad nizom ne

ustvarja dodatnih objektov. Originalen niz dodamo v StringBuilder in nato zamenjamo v

tej kopiji originalnega niza vse pojavitve značk z njihovimi trenutnimi vrednostmi. To

lahko naredimo brez teţav, saj imamo podatke o vrsti in poziciji značk shranjene v objektu

PreprocessedStringInfo. V kopijo originalnega niza zapišemo vrednosti vseh značk,

pretvorjenih v obliko tipa Stri

Documents

PROGRAMSKA OPREMA ZA ANIMIRANJE OBLIK UR IN ...iv Zahvala Zahvaljujem se mentorju prof. dr. Petru Kokolu za pomoč in potrpljenje. Prav tako bi se rad za izkazano podporo zahvalil