Opprette en app som bruker mobilsensorer
Med sensorer kan du legge til mer omfattende funksjonalitet i appene ved å bruke funksjonene på telefonen. I denne artikkelen lærer du om hvordan du bruker sensorer på den mobile enheten i Power Apps.
Dette gjør du ved å lage en eksempelapp med to skjermer. Det første skjermbildet viser gjeldende kompassretning, breddegrad, lengdegrad og høyde og kan søke etter NFC-merker for å hente tekstinformasjon. Det andre skjermbildet viser hvordan du viser akselerometerdata for å produsere enhetens vinkel langs X- og Y-aksene.
Hvis du vil konfigurere scenariet bak det første skjermbildet, kan du tenke deg at du bygger en app for en NFC-basert skattejakt. Hver deltaker bruker appen til å søke etter et NFC-merke som gir dem en kompassoverskrift, breddegrad og lengdegrad som peker dem mot neste mål. På dette målet søker deltakeren gjennom et nytt merke og gjentar prosessen til de når slutten av jakten.
For det andre skjermbildet kan du tenke deg at du trenger et verktøy for å måle vinkler. Når deltakeren er på den andre skjermen, kan den plassere eller holde enheten sin på en flate og få vinkler på X- og Y-aksen på enheten, i tillegg til å vise en visuell representasjon av disse vinklene.
Se på denne videoen for å lære hvordan du bygger en app som bruker mobilfølere:
Forutsetninger
Ethvert Power Apps-lisensnivå kan brukes for denne appen fordi det ikke brukes noen datatilkoblinger.
En mobil enhet, for eksempel en mobiltelefon eller et nettbrett med GPS og akselerometerfunksjoner, er nødvendig fordi de fleste PCer kanskje ikke har de nødvendige sensorene.
En NFC-kompatibel enhet kreves for NFC-skannefunksjonen. Det antas også at NFC-merkene som skal skannes, er forhåndskonfigurert til å produsere tekstverdier i følgende eksempelformat:
"<b>Heading: </b> 80 degrees <br> <b>Latitude: </b> 44.4604788 <br> <b>Longitude: </b> -110.82813759"Dette leverer teksten i et HTML-brukervennlig format for appen. Oppsettet av NFC-merker er utenfor området for denne artikkelen, og NFC-elementene kan ignoreres hvis det er nødvendig. Hovedfokuset er å bruke mobilsensorene i Power Apps.
Legge til overskrifts- og HTML-tekst for enhetsfølerutdataene
Overskriftsetikett
Når en app er åpen for redigering i Power Apps, legger du til en Tekstetikett på skjermen ved å dra og slippe den fra Sett inn-ruten. Plasser den øverst til venstre på skjermen, og endre følgende egenskaper i Egenskaper-ruten:
| Egenskap | Verdi |
|---|---|
| Tekstmelding | "Skattejakt" |
| Skriftstørrelse | 24 |
| Skrifttykkelse | FontWeight.Semibold |
| Tekstjustering | Align.Center |
| Bredde | Parent.Width |
Endre deretter følgende egenskaper i Avansert-ruten:
| Egenskap | Verdi |
|---|---|
| Farge | RGBA(255, 255, 255, 1) |
| Fyll | RGBA(56, 96, 178, 1) |
Dette angir en overskrift for skjermen.
HTML-tekst for enhetssensorutdataene
Deretter legger du til en HTML-tekst-kontroll. Den brukes til å vise alle enhetssensorutgangene på ett sted. Bruk denne koden i HtmlText-egenskapen:
"<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"
Endre følgende egenskaper i Avansert-ruten:
| Egenskap | Verdi |
|---|---|
| Størrelse | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| Bredde | 560 |
| Høyde | 576 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Hvis du undersøker hva som ble lagt inn i HtmlText, vil du kanskje legge merke til at det finnes to sensortyper som brukes.
Først ut er Compass-sensoren, som bruker egenskapen Heading til å angi kompassoverskriften fra enheten.
Det andre er Location-sensoren, som gir Breddegrad, Lengdegrad og Høyde. Det er to vurderinger du må gjøre med Location. Hvis du bruker bare Location uten prikkoperatoren og egenskapen, får du først en oppføring som har felt for Breddegrad, Lengdegrad og Høyde. For det andre er egenskapen Altitude i meter som standard. Hvis du vil konvertere til fot, erstatter du følgende formel:
Bruk mål:
Round(Location.Altitude, 2) & " m"
Bruk fot:
Round(Location.Altitude \* 3.2808, 2) & " ft"
Obs!
Det kan hende at mange sensoregenskaper ikke fungerer riktig hvis du forhåndsviser appen i Power Apps Studio. Hvis du vil arbeide med sensoregenskaper for testing, bør du å bruke mobiltelefon i stedet.
Nå plasserer du HTML-tekst-kontrollen nær nedre halvdel av skjermen.
Legg til-knapp for NFC-skanning og HTML-tekst-kontroll
NFC-skanneknapp
Legg til en knapp i appen, plassering under HTML-tekst-kontrollen du la til i det siste trinnet, og endre følgende egenskaper i Avansert-ruten:
| Egenskap | Verdi |
|---|---|
| OnSelect | ClearCollect(colNFCScan, ReadNFC()) |
| Tekstmelding | "Skann NFC-merke" |
Koden i egenskapen OnSelect bruker ReadNFC()-funksjonen, som aktiverer NFC-leseren. Deretter lagrer den det som leses fra NFC-merket i en samling kalt colNFCScan. Denne samlingen har fire felt: RTD, Text, TNF og URI. Selv om denne artikkelen ikke inneholder en fullstendig forklaring av disse feltene, kan litt forklaring være nyttig. TNF betyr typenavnformat og brukes til å definere strukturen til oppføringstypedefinisjonen, eller RTD, som igjen definerer oppføringstypen i Tekst og/eller URI-feltene. URI betyr Uniform Resource Identifier, som er egentlig adressen til en ressurs. For NFC-merkene som brukes i dette eksemplet, i tillegg til Tekst-feltet som inneholder eksempelteksten fra introduksjonen av dette emnet, inneholder de en TNF-verdi på 1, en RTD-verdi T og en tom URI-verdi.
Legg til HTML-tekst-kontroll for å vise informasjon om NFC-søk
Legg til en ny HTML-tekst-kontroll, og bruk følgende formel i egenskapen HTMLText:
"<b><u>Next Destination</u></b><br>
<br>" &
First(colNFCScan).Text
Endre følgende egenskaper i Avansert-ruten:
| Egenskap | Verdi |
|---|---|
| Størrelse | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| Bredde | 560 |
| Høyde | 248 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Uten NFC-data til stede viser kontrollen Neste mål. Når et NFC-merke skannes, vises Neste mål og deretter dataene fra feltet Tekst i dataene som samles inn fra skanningen.
Hvis det antas at dataene for NFC-merkene er konfigurert slik det er beskrevet i innledningen, vil brukeren se de neste verdiene for kompassoverskrift, breddegrad og lengdegrad for neste skattejaktsted etter å ha skannet et av disse merkene.
Testing av appen
Lagre og publiser appen. Åpne en mobil enhet med de nødvendige sensorene, åpne appen, og observer og verdiene for kompassoverskriften, bredde- og lengdegrad og høyde. Prøv å gå rundt mens du vender deg i ulike retninger for å se endringer i de ulike sensoravlesningene.
Trykk på Skann NFC-merke-knappen for å observere NFC-leserkontrollen. Hvis du har et NFC-merke som kan gi en Tekst-verdi, kan du skanne merket for å se teksten i appen. Hvis ikke velger du Avbryt.
Legge til og konfigurere et nytt skjermbilde
Legg til en ny Tom skjerm for vinkelmålingsdelen av appen.
Når du har lagt til skjermen, går du tilbake til det første skjermbildet og legger til et Neste-pil fra + Sett inn > Ikoner > velg ikonet Neste pil. Plasser den øverst til høyre på skjermen, og endre følgende egenskaper i Avansert-ruten:
| Egenskap | Verdi |
|---|---|
| OnSelect | Navigate(Screen2) |
| Farge | RGBA(255, 255, 255, 1) |
Hvis du har gitt nytt navn til det andre skjermbildet som nettopp ble lagt til, erstatter du dette navnet for Screen2 i Navigate-funksjonen.
Forhåndsvis appen, og velg ikonet som nettopp ble lagt til, for å kontrollere at den navigerer deg til den tomme skjermen som akkurat ble lagt til.
Legge til konfigurasjon for X- og Y-vinkler
Legg til en Tekstetikett på skjermen ved å dra og slippe den fra Sett inn-ruten. Plasser den øverst til venstre på skjermen, og endre følgende egenskaper i Egenskaper-ruten:
| Egenskap | Verdi |
|---|---|
| Tekstmelding | "2 Axis Level" |
| Skriftstørrelse | 24 |
| Skrifttykkelse | FontWeight.Semibold |
| Tekstjustering | Align.Center |
| Bredde | Parent.Width |
Endre deretter følgende egenskaper i Avansert-ruten:
| Egenskap | Verdi |
|---|---|
| Farge | RGBA(255, 255, 255, 1) |
| Fyll | RGBA(56, 96, 178, 1) |
Dette angir en overskrift for den andre skjermen.
Deretter legger du til et Tilbake-pil-ikon fra + Sett inn > Ikoner > velg Tilbake-pil-ikonet. Plasser den øverst til venstre på skjermen, og endre følgende egenskaper i Avansert-ruten:
| Egenskap | Verdi |
|---|---|
| OnSelect | Navigate(Screen1) |
| Farge | RGBA(255, 255, 255, 1) |
Hvis du har gitt nytt navn til det første skjermbildet som nettopp ble lagt til, erstatter du dette navnet for Screen1 i Navigate-funksjonen.
Til slutt legger du til en HTML-tekst-kontroll. Den brukes til å vise alle enhetssensorutgangene på ett sted. Bruk følgende formel i egenskapen 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>"
Endre følgende egenskaper i Avansert-fanen:
| Egenskap | Verdi |
|---|---|
| Størrelse | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| Bredde | 560 |
| Høyde | 168 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Plasser denne kontrollen nær toppen av appskjermen.
Hvis du undersøker hva som ble lagt inn i HtmlText, kan du legge merke til at den bruker Acceleration-sensoren , med X- og Y-egenskaper. Det finnes også en Z-egenskap som vi ikke bruker i dette scenariet.
Denne sensoren registrerer gravitasjonsstyrke på enheten over tre enheter. Bruk en mobiltelefon som eksempel, og tenk deg en linje som strekker seg ut fra sidene av telefonen. Dette ville være X-linjen. Hvis du løfter høyre side av telefonen, får du en positiv verdi, og hvis du løfter venstre side, får du en negativ verdi. En linje som strekker seg ut fra toppen og bunnen av telefonen, representerer Y-linjen. Hvis du løfter toppen av telefonen, får du en positiv verdi, og hvis du løfter bunnen, får du en negativ verdi. Til slutt vil en linje som kommer ut fra skjermen og baksiden av telefonen, representere Z-linjen. Hvis skjermen vender oppover, får den en positiv verdi, og hvis den vender nedover, fører dette til en negativ verdi.
Akselerometer vil måle krefter som fungerer på enheten både i bevegelse, for eksempel hvis du mistet enheten, og i ro, for eksempel ved å vippe enheten på én eller flere av aksene som ble beskrevet tidligere. I ro vil de teoretiske verdiene være mellom 0 og +/- 9,81 m/s2, med 0 som angir at den relative aksen er parallell med jorden uten at gravitasjon virker på sensoren, og en lesning på 9,81, som angir at den relative aksen er vinkelrett mot jorden og at full gravitasjonskraft fungerer på sensoren.
Hvis du ser på koden i HTML-tekst-kontrollen du nettopp la til, legger du merke til følgende del:
Abs(Round(Acceleration.X * (90 / 9.81), 0))
I denne formelen, fra innsiden og ut, multipliseres først Acceleration på X-linjen med 90 / 9,81. Dette bruker den teoretiske maksimumsverdien ved hvile til å konvertere sensoravlesningen til grader. Verdien på 90 er til stede fordi ved maksimal teoretisk verdi vil enheten være vinkelrett mot jorden med denne, noe som gir et mål på 90 grader.
Verdien i grader rundes deretter av til null desimaler for å gi en heltallsgradsverdi. Til slutt beregnes absoluttverdien for det avrundede tallet for å gi en positiv avlesning. Dette er slik at det ikke spiller noen rolle om vinklelen måles fra den ene eller andre siden.
Obs!
Verdiene som deles over, er omtrentlige, og representerer ikke nøyaktige mål.
Legge til visuelle effekter på nivå
I dette trinnet skal vi bruke noen kontroller på ukonvensjonelle måter for å oppnå et visuelt mål.
Sirkelformet boblenivålignende visuell effekt
Begynn med å legge til en Knapp-kontroll på skjermen, og endre navn til btnCircleLevel, og endre følgende egenskaper i Avansert-ruten:
| Egenskap | Verdi |
|---|---|
| Tekstmelding | "" |
| BorderColor | RGBA(56, 96, 178, 1) |
| FocusedBorderThickness | 2 |
| Fyll | Gjennomsiktig |
| DisabledFill | Self.Fill |
| X | (Parent.Width - Self.Width) / 2 |
| Y | (Parent.Height - Self.Height) / 2 |
| Bredde | 400 |
| Høyde | Self.Width |
Resultatet av disse endringene bør gi en sirkelknapp i midten av skjermen som ikke kan trykkes fordi den er deaktivert.
Deretter legger du til en Sirkel-figur, angir kantlinjeradius til 400 og endrer følgende egenskaper i Avansert-ruten:
| Egenskap | Verdi |
|---|---|
| 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) |
| Bredde | 42 |
| Høyde | Self.Width |
| Bredde | 400 |
| Høyde | Self.Width |
X- og Y-egenskapene gjør det mulig for Sirkel-figuren å flytte rundt på midten av appskjermen, relativ endring i Acceleration-sensorverdiene, men finnes i det sirkulære området btnCircleLevel.
Boblenivålignende visuelle effekter på X- og Y-akse
Legg til en Glidebryter-kontroll i appen, endre den til sldXValue, og endre følgende egenskaper i ruten Avansert:
| Egenskap | Verdi |
|---|---|
| Min. | -90 |
| Max | 90 |
| Standard | Round(Acceleration.X * (90 / 9.81), 0) |
| ValueFill | Self.RailFill |
| X | (Parent.Width - Self.Width) / 2 |
| Y | btnCircleLevel.Y + btnCircleLevel.Height + 30 |
| Bredde | btnCircleLevel.Width |
| Høyde | 70 |
Denne Glidebryter-kontrollen viser vinkelen på lignende måte som et boblenivå: Håndtak beveger seg mot den hevede siden av enheten, på samme måte som luftboblen på et boblenivå.
Deretter kopierer du btnCircleLevel ved å merke den og trykker på Ctrl + C og deretter Ctrl + V. Endre btnXValueOverlay, og endre følgende egenskaper i Avansert-ruten:
| Egenskap | Verdi |
|---|---|
| X | sldXValue.X - sldXValue.HandleSize / 2 |
| Y | sldXValue.Y |
| Bredde | sldXValue.Width + sldXValue.HandleSize |
| Høyde | sldXValue.Height |
Disse endringene plasserer den over sldXValue-kontrollen, som hindrer brukeren i å endre verdien og viser en visuell ramme.
Kopier og lim inn sldXValue, og bruk den samme metoden som brukes til å kopiere btnCircleLevel. Endre navnet til sldYValue, og endre følgende egenskaper:
| Egenskap | Verdi |
|---|---|
| Oppsett | Layout.Vertical |
| X | btnCircleLevel.X - Self.Width - 30 |
| Y | (Parent.Height - Self.Height) / 2 |
| Bredde | sldXValue.Height |
| Høyde | sldXValue.Width |
Kopier og lim inn btnXValueOverlay, endre navnet til btnYValueOverlay, og endre følgende egenskaper:
| Egenskap | Verdi |
|---|---|
| X | sldYValue.X |
| Y | sldYValue.Y - sldYValue.HandleSize / 2 |
| Bredde | sldYValue.Width |
| Høyde | sldYValue.Height + sldYValue.HandleSize |
Dette fullfører boblens nivålignende visuelle effekter.
Teste nivåappen
Lagre og publiser appen. På en mobilenhet med de nødvendige sensorene åpner du appen og navigerer til skjermen med visuelle effekter på boblenivå. Vipp enhet fra venstre mot høyre, deretter opp og ned, og til slutt i alle retninger, og noter endringene i vinkelegenskaper samt endringene i de visuelle effektene. Finn en flate med vinkel å plassere enheten på, og noter vinklene og de visuelle effektene igjen.