Paikallisjunan infonäytön toteuttaminen PowerAppsilla

Kuljen päivittäin töihin paikallisjunalla. Eräänä aamuna ryhdyin miettimään, voisiko paikallisjunan infotaulun toteuttaa PowerAppsilla. Teknisesti. Lisenssimielessä se ei ole mahdollista.

Aamujen edetessä idea alkoi houkuttelemaan yhä enemmän. Infotaulussa ei ole minkäänlaista vuorovaikutusta käyttäjän kanssa. Se ainoastaan näyttää junan sijainnin reitillä. Ja päivän. Ja kellonajan. Ja ulkolämpötilan.

Mukavaa vaihtelua aikaisempiin projekteihin. Eli pakkohan se on tehdä.

Aloitetaan.

Infonäytön alaosa

Luodaan pohjaksi tyhjä PowerApps 4:3 kuvasuhteella. Tehdään ensin infonäytön alaosa, joka koostuu seuraavista elementeistä

• Pallo, jonka sisällä on junan tunnus (ympyrä jonka päällä tekstikenttä)
• Kellonaika (tekstikenttä)
• Päivämäärä (tekstikenttä)
• Ei lipunmyyntiä -symboli (kaksi valmista ikonia päällekkäin)
• HSL:n logo (kuva)

Aloitetaan staattisista elementeistä (linja, lipunmyyntisymboli ja HSL:n logo).

Kellonaika onkin jo pykälää kinkkisempi. Mikäli luot tekstikentän, joka näyttää arvon Now(), ei kellonaika päivity. Tekstikentän arvo on PowerAppsin käynnistyshetken päivämäärä ja kellonaika.

Ratkaistaan ongelma ajastimella (timer). Lisätään kellonaikaa varten ajastin, joka

• kestää sekunnin (Duration = 1000)
• käynnistyy automaattisesti PowerAppsin käynnistyessä (Auto start = true)
• käynnistyy automaattisesti aina uudelleen (Repeat = true)

Ajastimen käynnistyessä (OnTimerStart) päivitetään muuttujan (NowTime) arvoksi tämän hetken aika sopivasti muotoiltuna.

UpdateContext({NowTime: Text(Now(),"[$-fi-FI]hh:mm:ss")})

Luodaan lopuksi tekstikenttä, jossa kellonaika (eli NowTime muuttujan arvo) näytetään.

Toteutetaan samalla tavalla päivämäärän näyttäminen. Päivitetään sitä sekunnin sijasta minuutin välein.

Reitin esittäminen

Linjan reitti täytyy tallentaa jonnekin. Luodaan sitä varten SharePoint-lista, jonka sarakkeet ovat seuraavat

• aseman nimi
• aseman nimi ruotsiksi
• lähtöaika
• kaupunki
• koordinaatti, jonka ohitettua lähestytään asemaa
• koordinaatti, jonka ohitetua saavuttiin asemalle
• koordinaatti, jonka ohitetua lähdettiin asemalta
• ovatko ylläolevat koordinaatit pituus- vai leveyskoordinaatteja
• asemaa lähestyttäessä näytettävä infoteksti

Lisätään näytölle galleria, jossa näytetään luodun SharePoint-listan sisältö.

Muokataan gallerian rivi näyttämään seuraavat tiedot / symbolit

• ympyrä
• ympyrän yläpuolelle viiva
• ympyrän alapuolelle viiva
• aseman nimi
• aseman nimi ruotsiksi
• lähtöaika

Elementtien värien, kokojen ja sijaintien säätämisen jälkeen lopputulos on tämä.

Hups. Reitti on näytöllä väärin päin, joten käännetään se (pääteasema on Helsinki).

Päätepysäkkiä kuvaava ympyrä on suurempi kuin muut. Tehdään sille oma ympyrä joka määritellään näkymään ainoastaan pääteaseman kohdalla.

Samalla logiikalla piilotetaan pääteaseman kohdalta ympyrän yläpuolinen viiva.

Junan etenemisen visualisointi

Sitten päästään harjoituksen hankalaan osuuteen. Galleriassa pitää näyttää, missä juna on menossa. Tämän voisi tehdä kellonaikaa ja pysäkkiaikatauluja hyödyntäen…

Kuulostaa fuskaamiselta.

Eli toteutetaan tämä seuraamalla junan sijaintia.

Sijainnin seuraaminen

Karttakuvasta näet pätkän E-junan reitistä. Esimerkissä juna kulkee kartalla vasemmalta oikealle. PowerAppsissamme

• Junan ohittaessa mustan viivan, käynnistetään seuraavaa asemaa koskeva kuulutus
• Junan ohittaessa punaisen viivan, ollaan saavuttu asemalle
• Junan ohittaessa vihreän viivan, ollaan lähdetty asemalta

Yllämainittua logiikkaa hyödyntäen päivitämme kolmea muuttujaa

• NearStation – Asema jonka läheisyydessä ollaan. Ei kuitenkaan vielä asemalla. (Päivitetään kun ohitetaan musta viiva)
• LastStation – Millä asemalla juna on viimeksi pysähtynyt? (Päivitetään kun ohitetaan punainen viiva)
• TrainLeftTheStation – Onko juna lähtenyt asemalta? (Päivitetään kun ohitetaan vihreä viiva)

Muuttujia päivitetään sekunnin välein ajastimen avulla. Arvoja muutetaan sen mukaan, miten junan sijainti suhteutuu kuvitteellisiin viivoihin.

Logiikkaa (ja debuggausta helpottaaksemme) varten lisätään tekstikentät, joihin haetaan pisteen longitude tai latitude arvo (riippuen kummin päin kuvitteellinen viiva on) seuraavista kohteista

• Asema, jolle on viimeksi saavuttu (lblLastStatPoint)
• Reitin mukainen seuraava asema (lblNxtStatPoint)
• Kohta, jossa seuraavan aseman kuulutukset käynnistyvät (lblNxtStatNearPoint)
• Kohta, jonka ohittaminen tulkitaan viimeksi saavutulta asemalta lähtemiseksi (lblLeaveStationPoint)

Lisäksi kustakin pisteestä haetaan tieto, onko kyseessä pituus- vai leveysaste. Tämä tieto löytyy SharePoint-listalta.

Visualisointi junan sijainnin perusteella

Saatuamme junan sijaintiin perustuvat muuttujien päivitykset toimimaan, voimme hyödyntää muuttujia havainnollistaessamme junan etenemistä galleriassa.

Mikäli asemalla ollaan jo pysähdytty (Id <= LastSation), näytetään purppuran ympyrän sisällä pienempi ympyrä.

Mikäli asema sijaitsee reitillä ennen edellistä pysähdystä (id < LastStation), on tämä pieni ympyrä harmaa. Muussa tapauksessa musta.

Asemaa kuvaava violetti ympyrä onkin harmaa mikäli

• Asema on ohitettu (Id < LastStation) tai
• Asema on viimeisin asema johon on pysähdyty ja asemalta on lähdetty (Id = LastStation and hasLeftTheStation = true)

Samaa logiikkaa käytetään ympyrän yläpuolella olevaan viivaan.

Asemaa kuvaavan ympyrän alapuolinen viiva on aina harmaa, mikäli asemalla on jo käyty.

Kuulutukset

Junan ohittaessa ennalta määrätyn pisteen (ne mustat viivat kartalla), näytetään infoteksti ja käynnistetään kuulutus (”Seuraavana Pasila”). Tämä toteutetaan 5 sekunnin ajastimella, joka taas käynnistetään varStartInfoScreen-muuttujan avulla.

Ajastimen käynnistyessä muutetaan varAnnouncementOn -muuttujan arvoksi true. Vastaavasti ajastimen päättyessä muuttujan arvoksi asetataan false.

Kuulutusnäyttö on käytännössä vain harmaanvärinen laatikko, jonka visible-arvo on varAnnouncementOn -muuttuja. Kuulutusnäytöllä esitetään seuraavaan asemaan liitetty infoteksti, joka haetaan SharePoint-listalta.

LookUp(Gallery.AllItems, ID = NearStation).Infotext_fi

Samaan aikaan (varAnnouncementOn saadessa arvoksi true) käynnistyy kuulutus. Soitettava äänitiedosto haetaan galleriasta seuraavan aseman kohdalta.

Lämpötila

Viimeistellään PowerApps lisäämällä näytön oikeaan alareunaan tieto lämpötilasta.

Tehdään teksikenttä, jonka arvo on viimeisen aseman sijaintikaupunki.

Text = LookUp(Gallery.AllItems, ID=LastStation).City

Lisätään ajastin, joka jauhaa 2 minuutin sykleissä. Ajastimen lopussa päivitetään muuttujaan (varCurWeater) junan kulloisenkin sijaintikaupungin lämpötila. Se saadaan helposti MSNWeather-yhdistintä käyttämällä.

Lopuksi lisätään näytölle teksikenttä, jonka arvona on kyseisen lämpötilan sisältävä muuttuja.

Yhteenveto ja huomioita

Harjoitus oli tavallista hankalampi, mikä johtui pääasiassa debuggaamisen työläydestä. PowerAppsin lopullista toimintaa kun pystyi testaamaan ainoastaan istumalla E-junassa.

Saattoi näyttää aika typerältä.

Lopulta sain kaiken toimimaan ja lopputulos näyttää esikuvansa vierellä tältä.

 

Tai no… Aivan kaikkea en saanut toimimaan. Kuulutusten ääniklipit eivät lähde käyntiin suunnitellusti. Ehkä virittelen ne vielä kuntoon. Tai sitten en.