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.
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.
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.
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
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
Povratne informacije
https://aka.ms/ContentUserFeedback.
Stiže uskoro: Tijekom 2024. postupno ćemo ukinuti servis Problemi sa servisom GitHub kao mehanizam za povratne informacije za sadržaj i zamijeniti ga novim sustavom za povratne informacije. Dodatne informacije potražite u članku:Pošaljite i pogledajte povratne informacije za