Ustvarjanje aplikacije, ki uporablja mobilne senzorje
Senzorji vam omogočajo, da svojim aplikacijam dodate bogatejše funkcije, s tem ko povečate zmogljivosti telefona. V tem članku boste izvedeli o uporabi senzorjev v Power Apps na vaši mobilni napravi.
Da bi to omogočili, boste morali ustvariti vzorčno aplikacijo z dvema zaslonoma. Prvi zaslon bo prikazal trenutno smer kompasa, zemljepisno širino in dolžino ter nadmorsko višino, da bi pridobil besedilne informacije pa lahko optično prebere oznake NFC. Na drugem zaslonu bo ponazorjeno, kako prikazati podatke merilnika pospeška za ustvarjanje kota naprave vzdolž osi X in Y.
Da bi vam približali scenarij prvega zaslona, si predstavljajte, da izdelujete aplikacijo za iskanje zaklada na osnovi tehnologije NFC. Vsak udeleženec bo z aplikacijo optično prebral oznako NFC, ki mu bo zagotovila podatke o smeri kompasa ter zemljepisni širini in dolžini, ki ga bodo usmerili na njegov naslednji cilj. Na tem cilju bo udeleženec nato optično prebral drugo oznako in ponavljal postopek, dokler se iskanje ne zaključi.
Za drugi zaslon si predstavljajte, da potrebujete orodje za vsaj približno merjenje kotov. Na drugem zaslonu lahko udeleženec prisloni ali odloži svojo napravo na površino ter si ogleda kote na osi X in Y naprave, skupaj z vizualno ponazoritvijo teh kotov.
Oglejte si ta videoposnetek, če želite izvedeti, kako zgraditi aplikacijo, ki uporablja mobilne senzorje:
Zahteve
Za to aplikacijo lahko uporabite katerokoli licenco Power Apps, saj podatkovne povezave niso v rabi.
Potrebovali boste mobilno napravo, kot je mobilni telefon ali tablični računalnik s funkcijo GPS in merilnikom pospeška, saj večina osebnih računalnikov morda nima ustreznih senzorjev.
Za funkcijo optičnega branja NFC je potrebna naprava, ki podpira NFC. Predpostavlja se tudi, da so bile oznake NFC, ki jih je treba optično prebrati, vnaprej konfigurirane za ustvarjanje besedilnih vrednosti v naslednjem vzorčnem formatu:
"<b>Heading: </b> 80 degrees <br> <b>Latitude: </b> 44.4604788 <br> <b>Longitude: </b> -110.82813759"
To bo zagotovilo besedilo v HTML obliki, ki je podprta v aplikaciji. Ta članek ne govori o nastavitvah oznak NFC, elemente NFC pa lahko po potrebi prezrete; primarni poudarek je na uporabi mobilnih senzorjev v Power Apps.
Dodajanje glave in besedila HTML za izhodne podatke senzorja naprave
Oznaka glave
Z odprto aplikacijo za urejanje v Power Apps na zaslon dodajte Besedilna oznaka, tako da jo povlečete in spustite iz podokna Vstavi. Postavite jo v zgornji levi kot zaslona in spremenite naslednje lastnosti v podoknu Lastnosti:
Lastnost | Vrednost |
---|---|
Besedilo | »Iskanje zaklada« |
Velikost pisave | 24 |
Debelina pisave | FontWeight.Semibold |
Poravnava besedila | Align.Center |
Širina | Parent.Width |
Nato v podoknu Napredno spremenite naslednje lastnosti:
Lastnost | Vrednost |
---|---|
Barva | RGBA(255, 255, 255, 1) |
Zapolni | RGBA(56, 96, 178, 1) |
To bo ustvarilo glavo zaslona.
Besedilo HTML za izhodne podatke senzorja naprave
Nato dodajte kontrolnik Besedilo HTML. To bo uporabljeno za prikaz vseh izhodnih podatkov senzorja naprave na enem mestu. Uporabite to kodo v lastnosti 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"
V podoknu Napredno spremenite naslednje lastnosti:
Lastnost | Vrednost |
---|---|
Velikost | 21 |
BorderStyle | BorderStyle.Solid |
BorderThickness | 2 |
Širina | 560 |
Višina | 576 |
PaddingTop | 16 |
PaddingRight | 16 |
PaddingBottom | 16 |
PaddingLeft | 16 |
Če pregledate, kaj je bilo vstavljeno v HtmlText, boste morda opazili, da se uporabljata dve vrsti senzorjev.
Prva je senzor Kompas, ki uporablja lastnost Naslov, da zagotovi smer kompasa iz naprave.
Druga je senzor Lokacija, ki zagotavlja Zemljepisna širina, Dolžina, in Nadmorska višina. Glede lokacije obstajata dva vidika. Prvič, če uporabljate samo Lokacijo, brez operatorja in lastnosti pike, boste dobili zapis, ki vsebuje polja za zemljepisno širino, dolžino in višino. Drugič, lastnost Nadmorska višina je privzeto prikazana v metrih. Če jo želite pretvoriti v čevlje, zamenjajte naslednjo formulo:
Uporaba metrov:
Round(Location.Altitude, 2) & " m"
Uporaba čevljev:
Round(Location.Altitude \* 3.2808, 2) & " ft"
Opomba
Mnoge lastnosti senzorja morda ne bodo delovale pravilno, če odprete predogledno različico v Power Apps Studio. Če želite delati z lastnostmi senzorja za testiranje, raje uporabite mobilni telefon.
Zdaj premaknite kontrolnik Besedilo HTML v bližino spodnje polovice zaslona.
Dodajanje gumba za optično branje NFC in nadzor besedila HTML
Gumb za optično branje NFC
Aplikaciji dodajte gumb, ki ga postavite pod kontrolnik Besedilo HTML, ki ste ga dodali v zadnjem koraku, in v podoknu Napredno spremenite naslednje lastnosti:
Lastnost | Vrednost |
---|---|
OnSelect | ClearCollect(colNFCScan, ReadNFC()) |
Besedilo | »Optično preberi oznako NFC« |
Koda v lastnosti OnSelect uporablja funkcijo ReadNFC(), ki aktivira bralnik NFC. Kar je prebrala iz oznake NFC nato shrani v zbirko, imenovano colNFCScan. Ta zbirka bo imela štiri polja: RTD, Besedilo, TNF in URI. Čeprav ta članek ne vsebuje celotne razlage o teh poljih, je tudi krajša razlaga lahko v pomoč. TNF pomeni Vnesite ime oblike in se uporablja za opredelitev strukture Opredelitev vrste zapisa oziroma RTD, ki posledično opredeli vrsto zapisa, ki se nahaja v poljih Besedilo in/ali URI. URI pomeni Enotni identifikator vira, pri katerem gre v bistvu za naslov vira. Oznake NFC, ki se uporabljajo v tem primeru, bi poleg polja Besedilo, ki vsebuje primer besedila iz uvoda te teme, vsebovale vrednost TNF, ki znaša 1, vrednost RTD, ki znaša T in prazno vrednost URI.
Dodajanje kontrolnika besedila Html za prikaz informacij o optičnem branju NFC
Dodajte še en kontrolnik Besedilo HTML, v lastnosti HTMLText pa uporabite naslednjo formulo:
"<b><u>Next Destination</u></b><br>
<br>" &
First(colNFCScan).Text
V podoknu Napredno spremenite naslednje lastnosti:
Lastnost | Vrednost |
---|---|
Velikost | 21 |
BorderStyle | BorderStyle.Solid |
BorderThickness | 2 |
Širina | 560 |
Višina | 248 |
PaddingTop | 16 |
PaddingRight | 16 |
PaddingBottom | 16 |
PaddingLeft | 16 |
Če ni prisotnih podatkov o NFC, se bo na kontrolniku izpisalo Naslednji cilj. Ko optično preberete oznako NFC, se izpiše Naslednji cilj, nato pa se v podatkih, zbranih pri optičnem branju, izpišejo podatki iz polja Besedilo.
Ob predpostavki, da so bili podatki za oznake NFC konfigurirani, kot je opisano v uvodu, bo uporabnik po optičnem branju ene od oznak videl naslednjo smer kompasa ter zemljepisno širino in dolžino za naslednjo lokacijo iskanja zaklada.
Preskus aplikacije
Shranite in objavite aplikacijo. Na mobilni napravi z ustreznimi senzorji odprite aplikacijo in opazujte smer kompasa, vrednosti zemljepisne širine in dolžine ter nadmorske višine. Poskusite hoditi naokoli in se obračati v različnih smereh, da si ogledate spremembe v različnih odčitkih senzorja.
Pritisnite gumb Optično preberi oznako NFC, da si ogledate kontrolnik bralnika NFC. Če imate oznako NFC, ki lahko ustvari vrednost Besedilo, optično preberite oznako, da si ogledate besedilo v aplikaciji. V nasprotnem primeru izberite Prekliči.
Dodajanje in konfiguriranje drugega zaslona
Dodajte nov Prazen zaslon za funkcijo aplikacije, ki meri kote.
Ko dodate zaslon, se vrnite na prvi zaslon in dodajte ikono Naslednja puščica, tako da sledite možnostim + Vstavi > Ikone > izberite ikono Naslednja puščica. Postavite jo v zgornji desni kot zaslona in spremenite naslednje lastnosti v podoknu Napredno:
Lastnost | Vrednost |
---|---|
OnSelect | Navigate(Screen2) |
Barva | RGBA(255, 255, 255, 1) |
Če ste preimenovali drugi zaslon, ki ste ga dodali, nadomestite to ime z Screen2 v funkciji Navigacija.
Odprite predogled aplikacije tako, da izberete ikono, ki je bila pravkar dodana, da preverite, ali vas vodi do praznega zaslona, ki ste ga pravkar dodali.
Dodajanje konfiguracije za kota X in Y
Zaslonu dodajte Besedilna oznaka tako, da jo povlečete in spustite iz podokna Vstavi. Postavite jo v zgornji levi kot zaslona in spremenite naslednje lastnosti v podoknu Lastnosti:
Lastnost | Vrednost |
---|---|
Besedilo | »Raven 2 osi« |
Velikost pisave | 24 |
Debelina pisave | FontWeight.Semibold |
Poravnava besedila | Align.Center |
Širina | Parent.Width |
Nato v podoknu Napredno spremenite naslednje lastnosti:
Lastnost | Vrednost |
---|---|
Barva | RGBA(255, 255, 255, 1) |
Zapolni | RGBA(56, 96, 178, 1) |
To bo ustvarilo glavo drugega zaslona.
Nato dodajte ikono Puščica nazaj tako, da v možnosti + Vstavi > Ikone > izberete ikono Puščica nazaj. Postavite jo v zgornji levi kot zaslona in spremenite naslednje lastnosti v podoknu Napredno:
Lastnost | Vrednost |
---|---|
OnSelect | Navigate(Screen1) |
Barva | RGBA(255, 255, 255, 1) |
Če ste preimenovali prvi zaslon, ki ste ga dodali, nadomestite to ime z Screen1 v funkciji Navigacija.
Na koncu dodajte kontrolnik Besedilo HTML. To bo uporabljeno za prikaz vseh izhodnih podatkov senzorja naprave na enem mestu. V lastnosti Besedilo HTML uporabite naslednjo formulo:
"<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>"
V zavihku Napredno spremenite naslednje lastnosti:
Lastnost | Vrednost |
---|---|
Velikost | 21 |
BorderStyle | BorderStyle.Solid |
BorderThickness | 2 |
Širina | 560 |
Višina | 168 |
PaddingTop | 16 |
PaddingRight | 16 |
PaddingBottom | 16 |
PaddingLeft | 16 |
Ta kontrolnik postavite na vrh zaslona aplikacije.
Če pregledate, kaj je bilo dodano v HtmlText, boste morda opazili, da uporablja senzor Pospešek, z lastnostma X in Y. Obstaja tudi lastnost Z, ki je v tem scenariju ne uporabljamo.
Ta senzor zaznava gravitacijske sile na napravi na treh ravneh. Če kot primer vzamemo mobilni telefon, si predstavljajte črto, ki se razteza izven robov telefona. To bi bila raven X. Ob dvigu desne strani telefona bo vrednost pozitivna, ob dvigu leve strani pa negativna. Črta, ki sega izven zgornjega in spodnjega roba telefona, bi predstavljala raven Y. Ob dvigu zgornje strani telefona bo vrednost pozitivna, ob dvigu spodnje strani pa negativna. Črta, ki sega ven iz ekrana in zadnje strani telefona, bi predstavljala raven Z. Če bi zaslon obrnili navzgor, bi nastala pozitivna vrednost, če bi ga obrnili navzdol pa negativna vrednost.
Merilnik pospeška bo meril sile, ki delujejo na napravo, tako v gibanju, na primer ob padcu, kot v mirovanju, na primer ob zasuku naprave v eni od zgoraj opisanih osi. V mirovanju morajo biti teoretične vrednosti med 0 in +/- 9,81 m/s2, pri čemer 0 označuje, da je relativna os vzporedna z Zemljo, brez vpliva gravitacije na senzor, odčitek 9,81 pa označuje, da je relativna os pravokotna na Zemljo, medtem ko na senzor deluje polna sila gravitacije.
Če pogledate kodo v kontrolniku Besedilo HTML, ki ste ga pravkar dodali, upoštevajte naslednji razdelek:
Abs(Round(Acceleration.X * (90 / 9.81), 0))
Če pogledamo formulo od znotraj navzven, je Pospešek na ravni X pomnožen z (90 / 9,81). Ta uporablja teoretično največjo vrednost mirovanja za pretvorbo odčitka senzorja v stopinje. Prisotna je vrednost 90, ker bi bila naprava pri največji teoretični vrednosti na tej ravni pravokotna na Zemljo, kar znaša 90 stopinj.
Ta vrednost v stopinjah se nato zaokroži na nič decimalnih mest, da se zagotovi vrednost stopinj v celem številu. Nazadnje se izračuna absolutna vrednost tega zaokroženega števila, da dobimo pozitiven odčitek. Tako ni pomembno, če se kot meri z ene ali druge strani.
Opomba
Zgoraj navedene vrednosti so zgolj približki in ne predstavljajo natančne meritve.
Dodajanje ponazoritev ravni
V tem koraku bomo na neobičajen način uporabili nekatere kontrolnike, da bi prišli do ponazoritve.
Ponazoritev ravni, podobna okrogli libeli
Za začetek na zaslon dodajte kontrolnik Gumb, ga preimenujte v btnCircleLevel in spremenite naslednje lastnosti v podoknu Napredno:
Lastnost | Vrednost |
---|---|
Besedilo | »« |
BorderColor | RGBA(56, 96, 178, 1) |
FocusedBorderThickness | 2 |
Zapolni | Prozorno |
DisabledFill | Self.Fill |
X | (Parent.Width - Self.Width) / 2 |
Y | (Parent.Height - Self.Height) / 2 |
Širina | 400 |
Višina | Self.Width |
Posledica teh sprememb bi moral biti nastanek okroglega gumba na sredini zaslona, ki ga ni mogoče pritisniti, ker je onemogočen.
Nato dodajte obliko Krog, nastavite njen polmer obrobe na 400 in spremenite naslednje lastnosti v podoknu Napredno:
Lastnost | Vrednost |
---|---|
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 |
Višina | Self.Width |
Širina | 400 |
Višina | Self.Width |
Lastnosti X in Y obliki Krog omogočata premikanje po sredini zaslona aplikacije, relativno spremembo v vrednostih senzorja Pospešek, vendar še vedno znotraj krožnega območja btnCircleLevel.
Ponazoritve osi X in Y, podobne libeli
Aplikaciji dodajte kontrolnik Drsnik, ga preimenujete v sldXValue in spremenite naslednje lastnosti v podoknu Napredno:
Lastnost | Vrednost |
---|---|
Minimum | -90 |
Maksimum | 90 |
Default | 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 |
Višina | 70 |
Ta kontrolnik Drsnik bo prikazal kot na podoben način, kot ga prikaže libela: Ročica se bo pomaknila proti dvignjeni strani naprave, podobno kot zračni mehurček v libeli.
Nato kopirajte kontrolnik btnCircleLevel tako, da ga izberete in pritisnete Ctrl + C, potem pa Ctrl + V. Kontrolnik preimenujte v btnXValueOverlay in spremenite naslednje lastnosti v podoknu Napredno:
Lastnost | Vrednost |
---|---|
X | sldXValue.X - sldXValue.HandleSize / 2 |
Y | sldXValue.Y |
Širina | sldXValue.Width + sldXValue.HandleSize |
Višina | sldXValue.Height |
Te spremembe ga bodo premaknile čez kontrolnik sldXValue in s tem uporabniku preprečile spreminjanje vrednosti, hkrati pa zagotovile navidezno obrobo.
Kopirajte in prilepite sldXValue s pomočjo iste metode, ki ste jo uporabili za kopiranje btnCircleLevel. Preimenujte ga v sldYValue in spremenite naslednje lastnosti:
Lastnost | Vrednost |
---|---|
Postavitev | Layout.Vertical |
X | btnCircleLevel.X - Self.Width - 30 |
Y | (Parent.Height - Self.Height) / 2 |
Širina | sldXValue.Height |
Višina | sldXValue.Width |
Kopirajte in prilepite btnXValueOverlay, ga preimenujte v btnYValueOverlay in spremenite naslednje lastnosti:
Lastnost | Vrednost |
---|---|
X | sldYValue.X |
Y | sldYValue.Y - sldYValue.HandleSize / 2 |
Širina | sldYValue.Width |
Višina | sldYValue.Height + sldYValue.HandleSize |
S tem je končana ponazoritev v obliki libele.
Preizkus aplikacije z libelo
Shranite in objavite aplikacijo. V mobilni napravi z ustreznimi senzorji odprite aplikacijo in se pomaknite na zaslon s ponazoritvami libele. Nagnite napravo od leve proti desni, nato navzgor in navzdol ter nazadnje v vse smeri, pri čemer opazujte spremembe lastnosti kota in spremembe v ponazoritvah. Poiščite poševno površino, na katero postavite napravo in znova opazujte kote in ponazoritve.