Sammuloendur

Liikumine on moes! Tee rakendus, mis loeb sinu samme ja kuvab ekraanile sammude arvu, läbitud kilomeetrid ja selleks kulunud aja. Rakenduse juures kasutad seadmesse sisseehitatud liikumisandurit. Sa võid selle rakenduse lisada eelnevalt loodud lahenduse “Veebilehtede kuvaja” juurde või teha täiesti uue äpi.

Kui sa soovid lisada selle eelnevale rakendusele siis(vastasel korral jäta see vahele):

Vajuta töölaua vasakul ülaservas olevale nupule “Add Screen…” ja lisa uus “ekraan”. Sa võid jätta nimetuse nii nagu App Inventor sulle välja pakub (näiteks Screen2) aga selguse huvides on sul mõistlik anda sellele nimetus, mis kirjeldab loodava leheküljega seotud tegevust. Vastupidiselt komponentide nimetustele, ei ole hiljem võimalik ekraane ümber nimetada. Siin kehtivad jällegi samad reeglid, mis projekti nimetuse juures. Nimetus ei tohi sisaldada tühikuid, täpitähti ega alata numbriga! Õ täht sõnas “Sammumõõtja” välistaks selle kasutamise. “Pedomeeter” aga sobib hästi.

1. Vali aktiivseks ekraaniks Screen1  ja disaineri vaates lohista eelnevatele nuppudele lisaks uus nupp (Palette > User Interface > Button)

2. Kuigi tekst nuppudel erineb on nuppude nimetused meil sarnased (Components > …> Button1, Button2, Button3, Button4). Plokkidest programmikoodi kokku tõstes on raske meeles pidada, milliseks tegevuseks millise numbriga nupp just parasjagu mõeldud oli. Selleks on mõistlik komponentidele, kui neid on kasutusel rohkem kui üks, anda omadust või tegevust kirjeldav nimetus. Ka siin kehtivad eelpool mainitud reeglid: nimetus ei tohi koosneda mitmest sõnast, sisaldada täpitähti ega alata numbriga! Ka siin ei saa kasutada sõna “Sammumõõtja”. Ka sõna “Pedomeeter” ei saa enam kasutada kuna on kasutusel ekraani nimetuses. Anna nupule “Button4” nimetus “PedomeetriNupp”. Selleks tee komponentide alas Button4 hiireklikiga aktiivseks ja vajuta Rename (Components > Rename).

3. Muuda ka tekst nupul (properties > Text). Sellele kirjale seab piirangu ainult nupu suurus ekraanil. Sobivad tekstid “Pedomeeter”, “Sammumõõtja” kui ka “Minu sammukas”.

4. Vali koodivaade ja klõpsa koodiplokkide alal valikul PedomeetriNupp (Blocks > Pedomeeter > PedomeetriNupp) ja lohista esimene sündmuste plokk “when PedomeetriNupp .Click” koodialale.

5. Vali Built-in alajaotuse Control komponent “open another screen screenName” ja lohista eelnevalt valitud ploki sisse.

6. Selleks, et nupuvajutus ka õige ekraani avaks vali Build-in alajaotuse juba tuttav esimene komponent Text  ja istuta eelneva ploki külge ning kirjuta sinna ekraani nimi mille sa punktis 1 lõid (meie näites “Pedomeeter”). 

7. Vali aktiivseks ekraaniks “Pedomeeter” ja disaineri töölaud.

Kui kõik läks plaanipäraselt, peaks olemasolevale koodile lisaks olema selline lisakood:

Kui tahad teha täiesti uue rakenduse siis:

1. My Projects > Start new project

Disaineri vaade

1. Lohista Paleti disainervaate alast paigutuse komponent HorisontalArrangement (Palette > Layout > HorisontalArrangement) ekraanikuva peale ja muuda omaduste alas (Properties) laiuse seadistus kogu ekraani täitvaks (Properties >  Width > Fill parent) ja kõrgus 15 protsendi peale (Properties > Height > 15 precent). Eemalda taustavärv (Properties > BackgroundColor > None)

2. Lohista Paleti alast ekraanikuvale paigutuse kujundamise komponent TableArrangement: (Palette > Layout > TableArrangement) ekraanil alumise jaotuse sisse, mis sul just tekkis eelmise sammu tulemusel. Muuda omaduste alas (Properties) TableArrangement komponendi laiuse seadistus kogu ekraani täitvaks (Properties > Width > Fill parent) ja kõrgus 25 protsendile (Properties > Height > 25 precent). Muuda veergude arv 3-ks (Columns 3) ja ridade arv 2-ks (Rows 2). Nüüd on sul loodud võimalus lohistada nähtavaid komponente 3×2 paigutusega (nähtamatu!) tabelisse.

3. Täida eelmises punktis loodud nähtamatu tabeli kuus jaotust (need muutuvad nähtavaks, kui komponente sinna peale lohistad) komponentidega Label (Palette > User Interface > Label) täites kõigepealt ülemise rea ning seejärel alumise (vasakult paremale).

4. Määra esimese rea komponentide Label (Label1…Label3) laiuseks 33 protsenti (Properties > Width > 33 percent) ja joonda need keskele (Properties > TextAlignment > Center:1)

5. Nimeta ümber alumisel real olevate komponendide Label(Label4…Label6) tekstid (Properties > Text) nende peal vastavalt “läbitud tee”, “samme”, “aeg” ja joonda need samuti keskele (Properties > TextAlignment > Center:1

Kui kõik sujub plaanipäraselt, peaks ekraan välja nägema selline:

6. Tagasi esimese rea juurde. Kuna teisele reale määrasid sa juba tekstid ära, ja need rakenduse kasutamise jooksul ei muutu, siis nende nimetusteks võidki jätta Label4, Label5 ja Label6. Esimesele rea väljadele hakkab aga rakenduse programmikood kirjutama jooksvalt väärtusi. Anna nendele komponentidele neid paremini iseloomustav nimetus, siis on sul hiljem koodi kirjutades lihtsam. Määra (Components > Screen1 > Label1..3 > Rename) komponentidele Label1…Label3 järgmised nimetused: Teepikkus, SammudeArv, Ajavahemik. Tekstiks määra kõigile kolmele “—“. Muuda ka teksti suurust (Properties > FontSize) ja teksti värvi (Properties > TextColor). Nüüd juba uue nimetusega komponendile Samme määra fondi suuruseks 48 ja teksti värviks Red. ülejäänud kahele vastavalt 18 ja Dark Gray. 

Kui kõik läks plaanipäraselt, peaks ekraan hetkel välja nägema selline:

7. Lohista Paleti alast paigutuse komponent HorisontalArrangement (Palette > Layout >HorisontalArrangement) ekraanikuva kõige alumise jaotuse peale ja muuda omaduste alas (Properties) laiuse seadistus kogu ekraani täitvaks (Properties > Width > Fill parent) ja kõrgus 45 protsendile (Properties > Height > 45 precent). Eemalda taustavärv (Properties > BackgroundColor> None). Components menüüs on selle ala nimetus HorizontalArrangemet2. See on tühi ekraanijaotus, kuhu ei tule nuppe ega muid elemente. Nn. tühi jaotus.

10. Lohista paleti alast anduri komponent Pedomeeter (Palette > Sensors >Pedometer) ekraanikuva keskele. See on peidetud komponent (andur nutiseadme sees), seetõttu ekraanivaatele sellest märget ei jää vaid tekib ikoon ekraanikuva alla.

11. Lohista paleti alast anduri komponent Notifier (Palette > User interface > Notifier) ekraanikuva keskele. Sarnaselt eelmisega on ka see peidetud komponent.

Kui kõik läks plaanipäraselt, peaks ekraan praegu välja nägema selline:

12. Oled disaininud valmis komponentide paigutuse ekraanil. Nüüd jääb üle veel leida sobiv taustapilt ja see ülesse laadida (Screen1 > Properties > Backgroundimage > UploadFile) ning kinnitud enda valiku nupuga Ok.

Võid pildistada ise või leia internetist sobiv foto. Jälgi kindlasti, et sul on autori luba pilti kasutada. Sobivaid pilte võid leida aadressidelt: https://unsplash.com/s/photos/walking , https://www.hippopx.com/et . Pilt peaks olema Portrait formaadis ( kuvasuhtega umbes 16:9), sest App Inventor venitab pildi täpselt nutiseadme ekraani servadeni. Unsplashist on soovitav laadida small või medium suurusega pildid(mitte suuremad kui 1920×1080).

Kui tekstid ei ole valitud pildi taustal hästi nähtavad, siis muuda tekstide tooni (Properties > TextColor)

Näidistaustad:

Walking1 (foto: Tegan Mierle, Unsplash.com)

Walking2 (foto: Maulana, Unsplash.com)

Walking3 (foto: Zack Minor, Unsplash.com)

Programmikoodi vaade

1. Sammulugeja käivitamisel on esimene ülesanne anda käsk pedomeetri andurile alustada sammude lugemist. Selleks klõpsa koodiplokkide alal, valikul Pedomeeter (Blocks > Screen1 > Pedomeeter) ning lohista koodialale plokk “when Screen1.Initialize”. Selle ploki sees olevad tegevused täidetakse ainult üks kord, siis kui rakenduse aken avatakse.

2. Vali valikust Pedometer1 (Blocks > Pedometer1) plokk “call Pedometer1.Start” aseta eelnevalt valitud ploki sisse.

3. Kui liikumisandur tuvastab sammu siis oleks seda vaja ka rakenduse kasutajale teada anda. Vali Pedometer1 (Blocks > Pedometer1) plokk “when Pedometer1.walkStep”. Selle ploki sees olevad tegevused täidetakse, kui sammuloendur on tuvastanud sammude arvu muutuse.

4. Vali Teepikkus, SammudeArv ja Ajavahemik plokkide kogust teksti ekraanile kuvamise plokid (tumerohelised) vastavalt siis “set Teepikkus.text to”, “set SammudeArv.text to” “set Ajavahemik.text to”.

5. Istuta Teepikkuse ja Ajavahemiku külge join (Blocks > Built-in > Text) plokid. Nende abil on võimalik tekstijuppe (stringe) omavahel kokku siduda. Lisa mõlemale round (Blocks > Built-in > Math) plokid join-i ülemiseks kaaslaseks – need ümardavad kõik arvud täisarvudeks. Join-ide alumistesse sisenditesse aga istuta teksti väli ülemisse kirjuta “m” (teepikkus meetrites) ja Ajavahemikule “min” (käidud aeg minutites)

6. Plokil “when Pedometer1.walkStep” on päises kaks oranži nuppu walkSteps ja distance. Neil klõpsates saad kaks oranži värvi plokki get distance ja get walkSteps. Istuta need nii nagu näidatud järgneval pildil.

7. Ajavahemiku lõpetamiseks vajalikud sinised plokid saad alagrupi  Math alt. Pedomeetri poolt arvutatud kulunud aja Pedometer1.ElapsedTime aga Pedometer1 alagrupist. Kuna pedomeeter mõõdab aega millisekundites, siis sammumiseks aja minutites kuvamiseks tuleb see väärtus jagada 60000-ga.

8. Lisasid disaineri töölaual rakendusele nupu millel kiri “Algväärtusta” ja nimetus Nullimine. Selle nupuga peab kasutaja saama algväärtustada sammuloendurit. Aga, et juhuslik nupuvajutus ei nulliks tundidepikkust sammude lugemist oleks viisakas kasutajalt teateakna abil küsida, kas ta ikka on oma otsuses kindel. Tõsta sobivad komponendid kokku nagu allpool oleval joonisel. Lilla plokk loob kahe nupuga (millel kirjad “Jah” ja “Ei”) teateakna ja kuvab seda kasutajale.

9. Selleks, et saada teada kasutaja algväärtustamise soov tuleb kasutaja nupuvajutus kinni püüda ja kui selleks oli “Jah” siis ta soov ka täita (algväärtusta pedomeeter ja kuva seda ka ekraanil).

Sinu loodud sammulugeja äpp on valmis ning saad selle oma nutitelefoni laadida!

Sinu rakenduse ekraanikuva võiks välja näha selline: