Share via


Oprette en app, der bruger mobile sensorer

Med sensorer kan du tilføje mere avancerede funktioner i dine apps ved at udnytte funktionerne i din telefon. I denne artikel får du mere at vide om brug af sensorer på mobilenheden i Power Apps.

Til dette formål skal du oprette en eksempelapp med to skærmbilleder. I det første skærmbillede vises den aktuelle kompasretning, breddegrad, længdegrad og højde, og du kan scanne NFC-koder for at få tekstoplysninger. Det andet skærmbillede viser, hvordan du kan få vist accelerometerdata for at udregne enhedens vinkel langs X- og Y-akserne.

Hvis du vil konfigurere scenariet bag det første skærmbillede, skal du forestille dig, at du bygger en app til en NFC-baseret skattejagt. Hver enkelt deltager skal bruge appen til at scanne en NFC-kode, som giver dem en kompasretning, breddegrad og længdegrad, som peger på deres næste destination. På den pågældende destination skal deltageren derefter søge efter en ny kode og gentage processen, indtil skattejagten er færdig.

For det andet skærmbillede skal du forestille dig, at du har brug for et værktøj, der kan foretage grove opmålinger af vinkler. Når deltageren er på det andet skærmbillede, kan han eller hun placere eller holde enheden på en overflade og få vist vinklerne på enhedens X- og Y-akse samt en visuel repræsentation af disse vinkler.

Se denne video for at få mere at vide om, hvordan du bygger en app, der bruger mobil sensorer:

Forudsætninger

  • Ethvert Power Apps-licensniveau kan bruges til denne app, da der ikke bruges dataforbindelser.

  • Der skal bruges en mobilenhed, f.eks. en mobiltelefon eller tablet med GPS og accelerometerfunktioner, da de fleste pc'er ikke altid har de nødvendige sensorer.

  • Der skal bruges en NFC-kompatibel enhed til NFC-scanningsfunktionen. Det antages også, at de NFC-koder, der skal scannes, er konfigureret på forhånd til at producere tekstværdier i følgende eksempelformat:

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

    På den måde får teksten i et HTML-venligt format for appen. Konfigurationen af NFC-koderne er ikke omfattet af denne artikel, og NFC-elementerne kan ignoreres efter behov. Det primære fokus er at bruge de mobile sensorer i Power Apps.

Tilføje overskrift og HTML-tekst til enhedens sensoroutput

Etiketten Overskrift

Når en app er åben for redigering i Power Apps, kan du føje en Tekstetiket til skærmen ved at trække og slippe den fra ruden Indsæt. Placer den øverst til venstre i skærmbilledet, og rediger følgende egenskaber i ruden Egenskaber:

Egenskab Værdi
SMS-besked "Skattejagt"
Skriftstørrelse 24
Skrifttykkelse FontWeight.Semibold
Tekstjustering Align.Center
Brede Parent.Width

Rediger derefter følgende egenskaber i ruden Avanceret:

Egenskab Værdi
Farve RGBA(255, 255, 255, 1)
Udfyld RGBA(56, 96, 178, 1)

Dette viser en overskrift for skærmbilledet.

HTML-tekst til enhedens sensoroutput

Tilføj derefter et kontrolelement for HTML-tekst. Det bruges til at få vist alle enhedens sensoroutput på samme sted. Brug denne kode i egenskaben 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"

Rediger følgende egenskaber i ruden Avanceret:

Egenskab Værdi
Størrelse 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Brede 560
Højde 576
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Hvis du undersøger, hvad der blev placeret i HtmlText, kan du se, at der bruges to sensortyper.

Den første er sensoren Kompas, som bruger egenskaben Overskrift til at angive overskriften for enhedens kompas.

Den anden er sensoren Placering, som indeholder Breddegrad, Længdegrad og Højde. Der er to overvejelser i forbindelse med Placering. For det første skal du vide, at du får en post med felterne for Breddegrad, Længdegrad og Højde, hvis du bruger Placering uden prik-operator og -egenskab. For det andet angives egenskaben Højde som standard i meter. Hvis du vil konvertere højden til fod, skal du erstatte følgende formel:

Bruge meter:

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

Bruge fod:

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

Bemærk

Mange sensoregenskaber fungerer måske ikke korrekt, hvis du får vist et eksempel på appen i Power Apps Studio. Hvis du vil arbejde med sensoregenskaber i forbindelse med test, skal du i stedet bruge en mobiltelefon.

Placer nu HTML-tekst-kontrolelementet i nederste halvdel af skærmen.

Knappen Tilføj for NFC-scanning og HTML-tekst-kontrolelement

Knappen NFC-scanning

Føj en knap til appen, placering under det HTML-tekst-kontrolelement, du har tilføjet i det sidste trin, og rediger følgende egenskaber i ruden Avanceret:

Egenskab Værdi
OnSelect ClearCollect(colNFCScan, ReadNFC())
SMS-besked "Scan NFC-kode"

Koden i egenskaben OnSelect bruger funktionen ReadNFC(), som aktiverer NFC-læseren. Derefter lagres det, der aflæses fra NFC-koden, i en samling kaldet colNFCScan. Denne samling indeholder fire felter: RTD, Tekst, TNF og URI. Selvom denne artikel ikke kan give en fuldstændig beskrivelse af disse felter, er lidt bedre end ingenting. TNF står for Type Name Format (Typenavnformat) og bruges til at definere strukturen for Record Type Definition (Posttypedefinition) eller RTD, som igen definerer den type post, der findes i felterne Tekst og/eller URI. URI står for Uniform Resource Identifier (Ensartet ressource-id), som reelt er adressen til en ressource. I forbindelse med de NFC-koder, der bruges i dette eksempel, indeholder de foruden feltet Tekst eksempelteksten fra introduktionen til denne emne en TNF-værdi på 1, en RTD-værdi på T og en tom URI-værdi.

Tilføjelse af HTML-tekst-kontrolelement til visning af NFC-scanningsoplysninger

Tilføj et andet HTML-tekst-kontrolelement, og brug følgende formel i egenskaben HTMLText:

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

Rediger følgende egenskaber i ruden Avanceret:

Egenskab Værdi
Størrelse 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Brede 560
Højde 248
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Hvis der ikke findes nogen NFC-data, viser kontrolelementet Næste destination. Når en NFC-kode er scannet, vises Næste destination og derefter dataene fra feltet Tekst i de data, der er indsamlet fra scanningen.

Hvis der antages, at dataene for NFC-koderne er konfigureret som beskrevet i introduktionen, kan brugeren se de næste værdier for kompasretning, breddegrad og længdegrad for skattejagtens næste placering efter scanningen af en af disse koder.

Værdier for kompasretning, breddegrad og længdegrad

Test appen

Gem og publicer appen. Åbn appen på en mobilenhed med de nødvendige sensorer, og se værdierne for kompasretning, breddegrad, længdegrad og højde. Prøv gå omkring og dreje rundt i forskellige retninger for at se ændringerne i de forskellige sensoraflæsninger.

Prøve at gå omkring og dreje rundt i forskellige retninger

Tryk på knappen Scan NFC-kode for at se kontrolelementet for NFC-læseren. Hvis du har en NFC-kode, der kan give en værdi for Tekst, skal du scanne koden for at få vist teksten i appen. Hvis ikke, skal du vælge Annuller.

Scanne NFC-kode

Tilføje og konfigurere endnu et skærmbillede

Tilføj en ny Tom skærm for vinkelmålingen i appen.

Når du har tilføjet skærmbilledet, skal du gå tilbage til det første skærmbillede og tilføje ikonet Næste pil fra + Indsæt > Ikoner > vælge ikonet Næste pil. Placer det øverst til højre på skærmen, og rediger følgende egenskaber i ruden Avanceret:

Egenskab Værdi
OnSelect Navigate(Screen2)
Farve RGBA(255, 255, 255, 1)

Hvis du har omdøbt det andet skærmbillede, der netop er tilføjet, skal du erstatte dette navn med Screen2 i funktionen Navigation.

Gennemse appen ved at vælge det ikon, der netop er tilføjet for at kontrollere, at det fører dig til den tomme skærm, der netop er tilføjet.

Tilføje konfiguration for X- og Y-vinkler

Tilføj en Tekstetiket til skærmbilledet ved at trække og slippe den fra ruden Indsæt. Placer den øverst til venstre i skærmbilledet, og rediger følgende egenskaber i ruden Egenskaber:

Egenskab Værdi
SMS-besked "2 akseniveau"
Skriftstørrelse 24
Skrifttykkelse FontWeight.Semibold
Tekstjustering Align.Center
Brede Parent.Width

Rediger derefter følgende egenskaber i ruden Avanceret:

Egenskab Værdi
Farve RGBA(255, 255, 255, 1)
Udfyld RGBA(56, 96, 178, 1)

Dette viser en overskrift for det andet skærmbillede.

Tilføj derefter ikonet Pil tilbage fra + Indsæt > Ikoner > vælg ikonet Pil tilbage. Placer det øverst til venstre på skærmen, og rediger følgende egenskaber i ruden Avanceret:

Egenskab Værdi
OnSelect Navigate(Screen1)
Farve RGBA(255, 255, 255, 1)

Hvis du har omdøbt det første skærmbillede, der netop er tilføjet, skal du erstatte dette navn med Screen1 i funktionen Navigation.

Til sidst skal du tilføje et kontrolelement for HTML-tekst. Det bruges til at få vist alle enhedens sensoroutput på samme sted. Brug følgende formel i egenskaben 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>"

Rediger følgende egenskaber på fanen Avanceret:

Egenskab Værdi
Størrelse 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Brede 560
Højde 168
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Placer dette kontrolelement tæt på toppen af appens skærmbillede.

Hvis du undersøger, hvad der er placeret i HtmlText, kan du se, at den bruger sensoren Acceleration med egenskaberne X og Y. Der er også egenskaben Z, som vi ikke bruger i dette scenarie.

Denne sensor registrerer tyngdekraftens påvirkning af enheden på tre planer. Hvis du f.eks. bruger en mobiltelefon, kan du forestille dig en linje, der strækker sig ud over siderne på telefonen. Dette er X-planet. Når du løfter højre side af telefonen, skabes der en positiv værdi, og når du løfter den venstre side, skabes der en negativ værdi. En linje, der strækker sig ud fra toppen og bunden af telefonen, repræsenterer Y-planet. Når du toppen af telefonen, skabes der en positiv værdi, og når du løfter bunden, skabes der en negativ værdi. Til sidst kan du forestille dig en linje, der strækker sig ud fra skærmen og bagsiden af telefonen, og dette repræsenterer Z-planet. Når skærmen vender opad, skabes der en positiv værdi, og når den vender nedad, skabes der en negativ værdi.

Accelerometeret måler de kræfter, der påvirker enheden både i bevægelse, hvis du f.eks. taber enheden og i hvile, hvis du f.eks. vipper enheden langs en eller flere af de akser, der er beskrevet tidligere. I hvile skal de teoretiske værdier være mellem 0 og +/- 9,81 m/s2, hvor 0 angiver, at den relative akse er parallel med Jorden, idet ingen tyngdekraft påvirker sensoren, og en aflæsning på 9,81 angiver, at den relative akse er vinkelret i forhold til Jorden, og tyngdekraften påvirker sensoren for fuld styrke.

Når du ser på koden i det HTML-tekst-kontrolelement, du netop har tilføjet, skal du bemærke følgende afsnit:

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

I denne formel, indefra og ud, ganges AccelerationX-planet med (90/9,81). Her bruges de teoretiske maksimumværdierne for hvile til at konvertere sensorens aflæsning til grader. Værdien 90 er til stede, fordi ved den maksimale teoretiske værdi vil enheden være vinkelret i forhold til Jorden på det pågældende plan og dermed give en måling på 90 grader.

Denne værdi i grader afrundes derefter til nul decimaler for at angive et heltal for gradværdien. Sidst beregnes den absolutte værdi af det afrundede tal for at give en positiv aflæsning. Det betyder derfor ikke noget, om vinklen måles fra den ene eller den anden side.

Bemærk

De værdier, der er anført ovenfor, er omtrentlige og repræsenterer ikke en nøjagtig måling.

Tilføje visuelle elementer for vater

I dette trin vil vi bruge nogle kontrolelementer på ukonventionelle måder til et visuelt formål.

Cirkulær boble som visuelt element for vater

Du kan starte med at føje et kontrolelement for Knap til skærmbilledet, omdøbe det til btnCircleLevel og ændre følgende egenskaber i ruden Avanceret:

Egenskab Værdi
SMS-besked ""
BorderColor RGBA(56, 96, 178, 1)
FocusedBorderThickness 2
Udfyld Gennemsigtig
DisabledFill Selv.Udfyld
X (Parent.Width - Self.Width) / 2
Y (Parent.Height - Self.Height) / 2
Brede 400
Højde Self.Width

Resultatet af disse ændringer skal resultere i en rund knap midt i skærmbilledet, der ikke kan trykkes på, fordi den er deaktiveret.

Tilføj derefter en cirkelfigur, angiv grænsen til 400, og rediger følgende egenskaber i ruden Avanceret:

Egenskab Værdi
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)
Brede 42
Højde Self.Width
Brede 400
Højde Self.Width

Egenskaberne X og Y gør det muligt at flytte Cirkel-figuren omkring midten af appens skærmbillede ud frav ændringen af sensorværdierne for Acceleration, men inden for det cirkulære område for btnCircleLevel.

Visuelle elementer for X- og Y-aksen svarende til vaterpas

Tilføj et kontrolelement for Skyder til appen, omdøb det til sldXValue og rediger følgende egenskaber i ruden Avanceret:

Egenskab Værdi
Min. -90
Maks. 90
Standard Round(Acceleration.X * (90 / 9.81), 0)
ValueFill Self.RailFill
X (Parent.Width - Self.Width) / 2
Y btnCircleLevel.Y + btnCircleLevel.Height + 30
Brede btnCircleLevel.Width
Højde 70

I dette kontrolelement for Skyder vises vinklen på sammen måde som for et vaterpas: visningens Handle vil bevæge sig mod den hævede side af enheden, svarende til luftboblen i et vaterpas.

Kopiér derefter btnCircleLevel ved at markere den, trykke på Ctrl + C og derefter på Ctrl + V. Omdøb kontrolelementet til btnXValueOverlay, og rediger følgende egenskaber i ruden Avanceret:

Egenskab Værdi
X sldXValue.X - sldXValue.HandleSize / 2
Y sldXValue.Y
Brede sldXValue.Width + sldXValue.HandleSize
Højde sldXValue.Height

Disse ændringer placerer det over kontrolelementet sldXValue, hvilket forhindrer brugeren i at ændre værdien og giver en visuel ramme.

Kopiér og indsæt sldXValue på samme måde som ved kopieringen af btnCircleLevel. Omdøb det til sldYValue, og rediger følgende egenskaber:

Egenskab Værdi
Layout Layout.Vertical
X btnCircleLevel.X - Self.Width - 30
Y (Parent.Height - Self.Height) / 2
Brede sldXValue.Height
Højde sldXValue.Width

Kopiér og indsæt btnXValueOverlay, omdøb det til btnYValueOverlay, og rediger følgende egenskaber:

Egenskab Værdi
X sldYValue.X
Y sldYValue.Y - sldYValue.HandleSize / 2
Brede sldYValue.Width
Højde sldYValue.Height + sldYValue.HandleSize

På denne måde fuldføres de visuelle elementer svarende til vaterpas.

Teste appen for vater

Test appen

Gem og publicer appen. Åbn appen på en mobilenhed med de nødvendige sensorer, og naviger til skærmbilledet med de visuelle bobleelementer for vater. Vip enheden fra venstre mod højre, derefter op og ned og til sidst i alle vejledninger, og læg mærke til ændringerne i vinkelegenskaberne samt ændringerne af de visuelle elementer. Find en skrå overflade, hvor du kan placeres enheden, og læg igen mærke vinklerne og de visuelle elementer.

Se også