Izradite aplikaciju koja koristi mobilne senzore

Senzori vam omogućuju da u svojim aplikacijama dodate bogatije funkcije iskorištavanjem mogućnosti vašeg telefona. U ovom ćete članku saznati više o upotrebi senzora na mobilnom uređaju u aplikaciji Power Apps.

Da biste to učinili, izradite ćete oglednu aplikaciju s dva zaslona. Na prvom će se zaslonu prikazati trenutačni smjer kompasa, zemljopisna širina, zemljopisna dužina, nadmorska visina te možete skenirati NFC oznake za dobivanje tekstnih informacija. Na drugom će se zaslonu prikazati kako prikazati podatke akcelerometra da bi se dobio kut uređaja duž osi X i Y.

Kako biste postavili scenarij iza prvog zaslona, zamislite da izrađujete aplikaciju za NFC lov na blago. Svaki će sudionik uz pomoć aplikacije skenirati NFC oznaku koja će im dati smjer kompasa, zemljopisnu širinu i zemljopisnu dužinu koja će ih uputiti do sljedećeg odredišta. Na odredištu sudionik će skenirati drugu oznaku i ponoviti postupak dok ne dođe do kraja lova.

Za drugi zaslon zamislite da vam je potreban alat za približno mjerenje kutova. Kad je na drugom zaslonu sudionik će moći staviti uređaj na površinu ili ga držati na njoj i dobiti kutove na osi X i Y uređaja te vidjeti i vizualni prikaz tih kutova.

Pogledajte ovaj videozapis kako biste saznali kako izraditi aplikaciju koja koristi mobilne senzore:

Preduvjeti

  • Bilo koja razina licence za Power Apps može se upotrebljavati za ovu aplikaciju jer se ne upotrebljavaju podatkovne veze.

  • Potreban je mobilni uređaj kao što je mobilni telefon ili tablet s funkcijom GPS-a i akcelerometra jer većina osobnih računala možda nema potrebne senzore.

  • Za značajku NFC skeniranja potreban je uređaj koji podržava NFC. Pretpostavlja se i da su NFC oznake koje će se skenirati unaprijed konfigurirane za dobivanje tekstnih vrijednosti u sljedećem oglednom obliku:

    "<b>Heading: </b> 80 degrees <br>
    <b>Latitude: </b> 44.4604788 <br>
    <b>Longitude: </b> -110.82813759"
    

    Time će se dobiti tekst u obliku prilagođenom HTML-u za aplikaciju. Postavljanje NFC oznaka nije obuhvaćeno ovim člankom, a NFC elementi se po potrebi mogu ignorirati. Glavni je fokus upotreba mobilnih senzora u aplikaciji Power Apps.

Dodajte zaglavlje i HTML tekst za izlaze senzora uređaja

Oznaka zaglavlja

Dok je aplikacija otvorena za uređivanje u aplikaciji Power Apps dodajte tekstnu oznaku na zaslon tako da je povučete i ispustite iz okna Umetanje. Postavite je u gornji lijevi kut zaslona te izmijenite sljedeća svojstva u oknu Svojstva:

Svojstvo Value
Tekst „Lov na blago”
Veličina fonta 24
Debljina fonta FontWeight.Semibold
Poravnavanje teksta Poravnaj po sredini
Širina Parent.Width

Potom u oknu Napredno izmijenite sljedeća svojstva:

Svojstvo Value
Boja RGBA(255, 255, 255, 1)
Ispuna RGBA(56, 96, 178, 1)

Tako će se dobiti zaglavlje za zaslon.

HTML tekst za izlaze senzora uređaja

Potom dodajte kontrolu HTML tekst. Ona će se upotrebljavati za prikaz svih izlaza senzora na jednom mjestu. Koristite ovaj kod u svojstvu HtmlText:

"<b><u>Current Location</u></b><br>  
<br>
<b>Compass Heading: </b>" & Round(Compass.Heading, 2) & Char(0176) &
"<br>
<br>
<b>Lat: </b>" & Location.Latitude & "<br>
<b>Long: </b>" & Location.Longitude & "<br>
<b>Alt: </b>" & Round(Location.Altitude, 2) & " m"

Promijenite sljedeća svojstva u oknu Napredno:

Svojstvo Value
Veličina 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Širina 560
Visina 576
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Ako pregledate što je stavljeno u HtmlText, možda ćete primijetiti da se upotrebljavaju dvije vrste senzora.

Prvi je senzor Kompas koji upotrebljava svojstvo Smjer za pružanje smjera kompasa na uređaju.

Drugi je senzor Lokacija koji pruža svojstva Zemljopisna širina, Zemljopisna dužina i Nadmorska visina. Potrebno je razmotriti dvije stvari u vezi sa senzorom Lokacija. Kao prvo, ako upotrebljavate samo senzor Lokacija bez operatora točke i svojstva, dobit ćete zapis koji ima polja za svojstva Zemljopisna širina, Zemljopisna dužina i Nadmorska visina. Kao drugo, svojstvo Nadmorska visina je po zadanom u metrima. Ako je želite pretvoriti u stope, zamijenite sljedeću formulu:

Upotrijebi metre:

Round(Location.Altitude, 2) & " m"

Upotrijebi stope:

Round(Location.Altitude \* 3.2808, 2) & " ft"

Napomena

Mnoga svojstva senzora možda neće ispravno funkcionirati ako pretpregledate aplikaciju unutar aplikacije Power Apps Studio. Kako biste radili sa svojstvima senzora za testiranje, bilo bi bolje da umjesto toga upotrijebite mobilni telefon.

Sada postavite kontrolu HTML text blizu donje polovice zaslona.

Gumb Dodaj za NFC skeniranje i kontrolu HTML teksta

Gumb NFC skeniranje

Dodajte gumb u aplikaciju, postavite ga ispod kontrole HTML text koju ste dodali u posljednjem koraku te promijenite sljedeća svojstva u oknu Napredno:

Svojstvo Value
OnSelect ClearCollect(colNFCScan, ReadNFC())
Tekst „Skeniraj NFC oznaku”

Kod u svojstvu OnSelect koristi funkciju ReadNFC koja aktivira NFC čitač. Potom pohranjuje što je pročitano iz NFC oznake u zbirci pod nazivom coINFCScan. Ta će zbirka imati četiri polja: RTD, Tekst, TNF i URI. Iako je potpuno objašnjenje ovih polja izvan opsega ovog članka, određeno objašnjenje moglo bi biti korisno. TNF je kratica za Type Name Format i upotrebljava se za definiranje strukture za Record Type Definition ili RTD koja zauzvrat definira vrstu zapisa sadržanu u poljima Tekst i/ili URI. URI je kratica od Uniform Resource Identifier, što je u osnovi adresa resursa. NFC oznake koje se upotrebljavaju u ovom primjeru osim polja Tekst koje sadrži ogledni tekst iz uvoda u ovu temu sadržavaju vrijednosti TNF od 1 i RTD vrijednost od T te praznu vrijednost za URI.

Dodavanje kontrole HTML text za prikaz informacija o NFC skeniranju

Dodajte drugu kontrolu HTML text i koristite sljedeću formulu u svojstvu HTMLText:

"<b><u>Next Destination</u></b><br>
<br>" &
First(colNFCScan).Text

Promijenite sljedeća svojstva u oknu Napredno:

Svojstvo Value
Veličina 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Širina 560
Visina 248
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Bez bilo kakvih prisutnih NFC podataka kontrola će prikazati Sljedeće odredište. Nakon skeniranja NFC oznake prikazat će se Sljedeće odredište, a zatim podaci iz polja Teksta u podacima prikupljenim putem skeniranja.

Pod pretpostavkom da su podaci za NFC oznake konfigurirane kao što je opisano u uvodu, korisniku će se prikazati sljedeći smjer kompasa, zemljopisna širina i zemljopisna dužina za sljedeću lokaciju lova na blago nakon skeniranja jedne od tih oznaka.

Vrijednosti zemljopisne širine i zemljopisne dužine smjera kompasa

Ispitivanje aplikacije

Spremite i objavite aplikaciju. Na mobilnom uređaju s potrebnim senzorima otvorite aplikaciju i obratite pozornost na vrijednost smjera kompasa, zemljopisne dužine, zemljopisne širine i nadmorske visine. Pokušajte hodati uokolo dok se okrećete u različitim smjerovima kako biste vidjeli promjene različitih očitanja senzora.

Pokušajte hodati uokolo dok se okrećete u različitim smjerovima

Pritisnite gumb Skeniraj NFC oznaku kako biste vidjeli kontrolu NFC čitač. Ako imate NFC oznaku koja stvara vrijednost Tekst, skenirajte oznaku kako biste vidjeli tekst u aplikaciji. Ako ne, odaberite Odustani.

Skeniraj NFC oznaku

Dodajte i konfigurirajte drugi zaslon

Dodajte novi Prazni zaslon za odjeljak mjerenja kutova u aplikaciji.

Nakon dodavanja zaslona vratite se na prvi zaslon i dodajte ikonu Strelica za sljedeće s izbornika Umetanje > Ikone > odaberite ikonu Strelica za sljedeće. Postavite je u gornji desni kut zaslona te promijenite sljedeća svojstva u oknu Napredno:

Svojstvo Value
OnSelect Navigate(Screen2)
Boja RGBA(255, 255, 255, 1)

Ako ste preimenovali sljedeći zaslon koji je upravo dodan, zamijenite taj naziv za Screen2 u funkciji Navigacija.

Pretpregledajte aplikaciju i odaberite ikonu koja je upravo dodana kako biste potvrdili da vas vodi na prazni zaslon koji je upravo dodan.

Dodajte konfiguraciju za kutove X i Y

Dodajte tekstnu oznaku na zaslon tako da je povučete i ispustite iz okna Umetanje. Postavite je u gornji lijevi kut zaslona te izmijenite sljedeća svojstva u oknu Svojstva:

Svojstvo Value
Tekst „Razina s 2 osi”
Veličina fonta 24
Debljina fonta FontWeight.Semibold
Poravnavanje teksta Poravnaj po sredini
Širina Parent.Width

Potom u oknu Napredno izmijenite sljedeća svojstva:

Svojstvo Value
Boja RGBA(255, 255, 255, 1)
Ispuna RGBA(56, 96, 178, 1)

Tako će se dobiti zaglavlje za drugi zaslon.

Potom dodajte ikonu Strelica za povratak s izbornika Umetanje > Ikone > odaberite ikonu Strelica za povratak. Postavite je u gornji lijevi kut zaslona te promijenite sljedeća svojstva u oknu Napredno:

Svojstvo Value
OnSelect Navigate(Screen1)
Boja RGBA(255, 255, 255, 1)

Ako ste preimenovali prvi zaslon koji je upravo dodan, zamijenite taj naziv za Screen1 u funkciji Navigacija.

Na kraju dodajte kontrolu HTML tekst. Ona će se upotrebljavati za prikaz svih izlaza senzora na jednom mjestu. Upotrijebite sljedeću formulu u svojstvu HTML tekst:

"<b><u>Angles:</u></b><br>
<br>
<table width='100%'>
<tr>
<td width='50%'><b>X: </b>" & Abs(Round(Acceleration.X * (90 / 9.81),
0)) & Char(0176) & "</td>
<td width='50%'><b>Y: </b>" & Abs(Round(Acceleration.Y * (90 / 9.81),
0)) & Char(0176) & "</td>
</tr>
</table>"

Promijenite sljedeća svojstva na kartici Napredno:

Svojstvo Value
Veličina 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Širina 560
Visina 168
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Postavite tu kontrolu pri vrhu zaslona aplikacije.

Ako pregledate što je stavljeno u HtmlText, možda ćete primijetiti da upotrebljava senzor Ubrzanje sa svojstvima X i Y. Postoji i svojstvo Z koje ne upotrebljavamo u ovom scenariju.

Ovaj senzor prepoznaje gravitacijske sile na uređaju na tri ravnine. Dok upotrebljavajte mobilni telefon, zamislite, na primjer, liniju koja se proširuje izvan telefona. To bi bila ravnina X. Podizanjem desne strane telefona dobit će se pozitivna vrijednost, a podizanjem lijeve strane dobit će se negativna vrijednost. Linija koja se proširuje izvan gornje i donje strane telefona predstavlja ravninu Y. Podizanjem vrha telefona dobit će se pozitivna vrijednost, a podizanjem dna dobit će se negativna vrijednost. I konačno, linija koja izlazi iz zaslona i stražnje strane telefona predstavlja ravninu Z. Okretanjem telefona prema gore dobit će se pozitivna vrijednost, a okretanjem prema dolje dobit će se negativna vrijednost.

Akcelerometar mjeri sile koje djeluju na uređaj u pokretu, npr. ako ste ispustili uređaj i u mirovanju, npr. ako ste nagnuli uređaj na jednu ili više prethodno opisanih osi. U mirovanju bi teoretske vrijednosti trebale biti između 0 i +/- 9,81 m/s2, pri čemu 0 pokazuje da je relativna os paralelna sa Zemljom bez gravitacije koja djeluje na senzor, a očitanje od 9,81 pokazuje da je relativna os okomita na Zemlju i puna sila gravitacije djeluje na senzora.

Pogledajte kod u kontroli HTML text koju ste upravo odali i obratite pozornost na sljedeći odjeljak:

Abs(Round(Acceleration.X * (90 / 9.81), 0))

U ovoj se formuli, izvana prema unutra, naprije Ubrzanje na ravnini X množi s (90 / 9,81). Upotrebljava teoretsku maksimalnu vrijednost u mirovanju kako bi se očitanje senzora pretvorilo u stupnjeve. Vrijednost od 90 prisutna jer bi na maksimalnoj teoretskoj vrijednosti bila okomita na Zemlju na toj ravnini, što daje mjerenje od 90 stupnjeva.

Ta vrijednost u stupnjevima potom se zaokružuje na broj bez decimalnih mjesta kako bi se dobio cijeli broj vrijednosti stupnjeva. I na kraju se apsolutna vrijednost tog zaokruženog broja izračunava kako bi se dobilo pozitivno očitanje. To je zato kako ne bi bilo važno mjeri li se kut s jedne ili druge strane.

Napomena

Gore dijeljene vrijednosti su približne ne predstavljaju točno mjerenje.

Dodajte vizuale razine

U ovom ćemo koraku upotrijebiti neke kontrole na nekonvencionalne načine radi postizanja cilja vizuala.

Kružni vizual koji podsjeća na libelu

Za početak dodajte kontrolu Gumb na zaslon, preimenujte je btnCircleLevel i promijenite sljedeća svojstva u oknu Napredno:

Svojstvo Value
Tekst „”
BorderColor RGBA(56, 96, 178, 1)
FocusedBorderThickness 2
Ispuna Transparentan
DisabledFill Self.Fill
X (Parent.Width - Self.Width) / 2
Y (Parent.Height - Self.Height) / 2
Širina 400
Visina Self.Width

Rezultat tih promjena treba biti kružni gumb na sredini zaslona koji nije moguće pritisnuti zbog toga što je onemogućen.

Zatim dodajte oblik Krug, postavite polumjer obruba na 400 i promijenite sljedeća svojstva u oknu Napredno:

Svojstvo Value
FocusedBorderThickness 0
X (Parent.Width - Self.Width) / 2 + (Round(Acceleration.X / 9,81 * 90, 0) / 90 * btnCircleLevel.Width / 2)
Y (Parent.Height - Self.Height) / 2 - (Round(Acceleration.Y / 9,81 * 90, 0) / 90 * btnCircleLevel.Width / 2)
Širina 42
Visina Self.Width
Širina 400
Visina Self.Width

Svojstva X i Y omogućuju da se oblik Krug pomiče na sredini zaslona aplikacije, relativna promjena u vrijednostima senzora Ubrzanje, ali sadržana u kružnom području za btnCircleLevel.

Kružni vizuali za osi X i Y koji podsjećaju na libelu

Dodajte kontrolu Klizač u aplikaciju, preimenujte je sldXValue i promijenite sljedeća svojstva u oknu Napredno:

Svojstvo Value
Minimalno -90
Maksimalno 90
Zadano Round(Acceleration.X * (90 / 9,81), 0)
ValueFill Self.RailFill
X (Parent.Width - Self.Width) / 2
Y btnCircleLevel.Y + btnCircleLevel.Height + 30
Širina btnCircleLevel.Width
Visina 70

Ova kontrola Klizač prikazat će se kut sličan libeli: Ručica će se pomaknuti prema podignutoj strani uređaja, slično kao mjehurić zraka na libeli.

Potom kopirajte kontrolu btnCircleLevel tako da je odaberete, pritisnite Ctrl + C, a zatim Ctrl + V. Preimenujte kontrolu u btnXValueOverlay i promijenite sljedeća svojstva u oknu Napredno:

Svojstvo Value
X sldXValue.X - sldXValue.HandleSize / 2
Y sldXValue.Y
Širina sldXValue.Width + sldXValue.HandleSize
Visina sldXValue.Height

Te promjene postavit će je iznad kontrole sldXValue, čime se korisniku onemogućuje da promijeni njezinu vrijednost i pruža obrub vizuala:

Kopirajte i zalijepite sldXValue na isti način na koji ste kopirali btnCircleLevel. Preimenujte je u sldYValue i promijenite sljedeća svojstva:

Svojstvo Value
Raspored Layout.Vertical
X btnCircleLevel.X - Self.Width - 30
Y (Parent.Height - Self.Height) / 2
Širina sldXValue.Height
Visina sldXValue.Width

Kopirajte i zalijepite kontrolu btnXValueOverlay, preimenujte je u btnYValueOverlay i promijenite sljedeća svojstva:

Svojstvo Value
X sldYValue.X
Y sldYValue.Y - sldYValue.HandleSize / 2
Širina sldYValue.Width
Visina sldYValue.Height + sldYValue.HandleSize

To je sve o vizualima koji podsjećaju na libelu.

Ispitajte aplikaciju razine

Ispitivanje aplikacije

Spremite i objavite aplikaciju. Na mobilnom uređaju s potrebnim senzorima otvorite aplikaciju i pomaknite se na zaslon s vizualima libele. Nagnite uređaj slijeva nadesno, a potom prema gore i dolje te na kraju u svim smjerovima. Obratite pozornost na promjene u svojstvima kutova, kao i na promjene na vizualima. Pronađite površinu pod kutom na koju ćete postaviti uređaj i ponovno obratite pozornost na kutove i vizuale.

Pogledajte također