Een app maken die gebruikmaakt van mobiele sensoren

Met sensoren kunt u rijkere functionaliteit aan uw apps toevoegen door gebruik te maken van de mogelijkheden van uw telefoon. In dit artikel leert u over het gebruik van sensoren op uw mobiele apparaat binnen Power Apps.

Hiervoor maakt u een voorbeeld-app met twee schermen. Het eerste scherm toont de huidige kompasrichting, breedtegraad, lengtegraad, hoogte en kan NFC-tags scannen om tekstinformatie te verkrijgen. Het tweede scherm laat zien hoe versnellingsmetergegevens kunnen worden weergegeven om de hoek van het apparaat langs de X- en Y-assen te produceren.

Om het scenario achter het eerste scherm in te stellen, stelt u zich voor dat u een app bouwt voor een op NFC gebaseerde speurtocht. De deelnemers zullen de app gebruiken om een NFC-tag te scannen die hen een kompasrichting, breedtegraad en lengtegraad zal geven die hen naar hun volgende bestemming zal wijzen. Op die bestemming scant de deelnemer vervolgens een andere tag en herhaalt het proces totdat ze het einde van de jacht bereiken.

Stel u voor het tweede scherm voor dat uw een hulpmiddel nodig hebt om hoeken ruwweg te meten. Op het tweede scherm kan de deelnemer zijn apparaat op een oppervlak plaatsen of vasthouden, de hoeken op de X- en Y-as van het apparaat krijgen en een visuele weergave van die hoeken bekijken.

Bekijk deze video om te leren hoe u een app bouwt die gebruikmaakt van mobiele sensoren:

Vereisten

• Elk niveau van Power Apps-licentie kan voor deze app worden gebruikt, omdat er geen dataverbindingen worden gebruikt.

• Een mobiel apparaat zoals een mobiele telefoon of tablet met mogelijkheden voor gps en versnellingsmeter is nodig, omdat de meeste pc's mogelijk niet over de benodigde sensoren beschikken.

• Een NFC-compatibel apparaat is nodig voor de NFC-scanfunctie. Er wordt ook aangenomen dat de te scannen NFC-tags vooraf zijn geconfigureerd om tekstwaarden te produceren in de volgende voorbeeldindeling:

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

  Dit levert de tekst op in een HTML-vriendelijke indeling voor de app. Het instellen van de NFC-tags valt buiten het bestek van dit artikel en de NFC-elementen kunnen indien nodig worden genegeerd; de primaire focus is het gebruik van de mobiele sensoren in Power Apps.

Header en HTML-tekst toevoegen voor de uitgangen van de apparaatsensor

Label voor header

Voeg met een app die u hebt geopend voor bewerking in Power Apps, een Tekstlabel toe aan het scherm door het te slepen en neer te zetten vanuit het deelvenster Invoegen. Plaats het in de linkerbovenhoek van het scherm en wijzig de volgende eigenschappen in het deelvenster Eigenschappen:

Wijzig vervolgens in het deelvenster Geavanceerd de volgende eigenschappen:

Dit levert een header voor het scherm op.

HTML-tekst voor de uitgangen van de apparaatsensor

Voeg vervolgens een besturingselement HTML-tekst toe. Dit wordt gebruikt om alle sensoruitgangen van het apparaat op één plaats weer te geven. Gebruik deze code in de eigenschap 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"

Wijzig de volgende eigenschappen in het deelvenster Geavanceerd:

Als u kijkt wat er in de HtmlText is geplaatst, valt het u misschien op dat er twee sensortypen worden gebruikt.

De eerste is de sensor Kompas, die gebruikmaakt van eigenschap Kop om de kompasrichting van het apparaat te geven.

De tweede is de sensor Locatie, die de Breedtegraad, Lengtegraad en Hoogte geeft. Er zijn twee overwegingen over Locatie. Ten eerste, als u alleen Locatie gebruikt zonder de puntoperator en -eigenschap, krijgt u een record met velden voor Breedtegraad, Lengtegraad en Hoogte. Ten tweede is de eigenschap Hoogte standaard in meters. Als u dit wilt converteren naar feet, vervangt u de volgende formule:

Gebruik meters:

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

Gebruik feet:

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

Plaats nu het besturingselement HTML-tekst in de buurt van de onderste helft van het scherm.

Knop Toevoegen voor de NFC-scan en het besturingselement HTML-tekst

Knop voor NFC-scan

Voeg een knop toe aan de app, plaats deze onder het besturingselement HTML-tekst dat u in de laatste stap hebt toegevoegd en wijzig de volgende eigenschappen in het deelvenster Geavanceerd:

De code in de eigenschap OnSelect maakt gebruik van de functie ReadNFC(), die de NFC-lezer activeert. Deze slaat vervolgens op wat van de NFC-tag wordt gelezen in een collectie met de naam colNFCScan. Deze collectie bevat vier velden: RTD, Tekst, TNF en URI. Hoewel een volledige uitleg van deze velden buiten het bestek van dit artikel valt, kan enige uitleg nuttig zijn. TNF staat voor Type Naam Format en wordt gebruikt om de structuur van de Recordtypedefinitie of RTD te definiëren, die op zijn beurt het type record definieert in de velden Tekst en/of URI. URI staat voor Uniform Resource Identifier, wat in wezen het adres van een resource is. Voor de NFC-tags die in dit voorbeeld worden gebruikt, naast het veld Tekst met de voorbeeldtekst uit de inleiding van dit onderwerp, deze zouden een TNF-waarde van 1, een RTD-waarde van T en een lege URI-waarde bevatten.

Besturingselement HTML-tekst toevoegen om de NFC-scaninformatie weer te geven

Voeg een tweede besturingselement HTML-tekst toe en gebruik de volgende formule in de eigenschap HTMLText:

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

Wijzig de volgende eigenschappen in het deelvenster Geavanceerd:

Als er geen NFC-gegevens aanwezig zijn, wordt op het besturingselement Volgende bestemming weergegeven. Wanneer een NFC-tag wordt gescand, geeft de Volgende bestemming weer en vervolgens de gegevens van het Tekst veld in de gegevens die uit de scan zijn verzameld.

Ervan uitgaande dat de gegevens voor de NFC-tags zijn geconfigureerd zoals beschreven in de inleiding, ziet de gebruiker de volgende kompasrichting, breedtegraad en lengtegraad voor de volgende speurtochtlocatie na het scannen van een van die tags.

De app testen

Sla de app op en publiceer deze. Open de app op een mobiel apparaat met de benodigde sensoren en bekijk de kompasrichting, breedtegraad, lengtegraad en hoogte. Probeer rond te lopen terwijl u in verschillende richtingen draait om veranderingen in de verschillende sensormetingen te zien.

Druk de knop NFC-tag scannen in om het besturingselement voor de NFC-lezer te bekijken. Als u een NFC-tag hebt die een Tekst waarde kan produceren, scan dan de tag om de tekst in de app te bekijken. Zo niet, selecteer dan Annuleren.

Een tweede scherm toevoegen en configureren

Voeg een nieuwe Leeg scherm toe voor het hoekmeetgedeelte van de app.

Ga na het toevoegen van het scherm terug naar het eerste scherm en voeg een pictogram Pijl volgende toe vanuit + Invoegen > Pictogrammen > kies het pictogram Pijl volgende. Plaats deze in de rechterbovenhoek van het scherm en wijzig de volgende eigenschappen in het deelvenster Geavanceerd:

Als u het tweede scherm dat zojuist is toegevoegd een andere naam hebt gegeven, vervangt u die naam door Screen2 in de functie Navigeren.

Bekijk een voorbeeld van de app en selecteer het pictogram dat zojuist is toegevoegd om te controleren of u naar het zojuist toegevoegde lege scherm navigeert.

Configuratie voor X- en Y-hoeken toevoegen

Voeg een Tekst-label toe aan het scherm door dit vanuit het deelvenster Invoegen te slepen en neer te zetten. Plaats het in de linkerbovenhoek van het scherm en wijzig de volgende eigenschappen in het deelvenster Eigenschappen:

Wijzig vervolgens in het deelvenster Geavanceerd de volgende eigenschappen:

Dit levert een header voor het tweede scherm op.

Voeg vervolgens een pictogram Pijl terug toe vanuit + Invoegen > Pictogrammen > kies het pictogram Pijl terug. Plaats deze in de linkerbovenhoek van het scherm en wijzig de volgende eigenschappen in het deelvenster Geavanceerd:

Als u het eerste scherm dat zojuist is toegevoegd een andere naam hebt gegeven, vervangt u die naam door Screen1 in de functie Navigeren.

Voeg tenslotte een besturingselement HTML-tekst toe. Dit wordt gebruikt om alle sensoruitgangen van het apparaat op één plaats weer te geven. Gebruik de volgende formule in de eigenschap 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>"

Wijzig de volgende eigenschappen in het tabblad Geavanceerd:

Plaats dit besturingselement in de buurt van de bovenkant van het app-scherm.

Als u onderzoekt wat er in de HtmlText is geplaatst, ziet u misschien dat de sensor Versnelling wordt gebruikt, met X en Y eigenschappen. Er is ook een Z eigenschap die we in dit scenario niet gebruiken.

Deze sensor detecteert zwaartekrachten op het apparaat over drie vlakken. Gebruik een mobiele telefoon als voorbeeld en stel u een lijn voor die uit de zijkanten van de telefoon loopt. Dit zou het X-vlak zijn. Het optillen van de rechterkant van de telefoon zal een positieve waarde opleveren en het optillen van de linkerkant zal een negatieve waarde opleveren. Een lijn die uit de boven- en onderkant van de telefoon loopt, zou het Y-vlak vormen. Het optillen van de bovenkant van de telefoon zal een positieve waarde opleveren en het optillen van de onderkant zal een negatieve waarde opleveren. Als laatste zou een lijn die uit het scherm en de achterkant van de telefoon loopt, het Z-vlak vormen. Als u het scherm naar boven richt, wordt een positieve waarde geproduceerd en als u het naar beneden richt, resulteert dit in een negatieve waarde.

De versnellingsmeter meet de krachten die op het apparaat inwerken, zowel in beweging, bijvoorbeeld als u het apparaat laat vallen, als in rust, zoals het kantelen van het apparaat op een of meer van de eerder beschreven assen. In rust moeten de theoretische waarden tussen 0 en +/- 9,81 m/s2 liggen, waarbij 0 aangeeft dat de relatieve as evenwijdig is aan de aarde zonder zwaartekracht op de sensor en een waarde van 9,81 aangeeft dat de relatieve as loodrecht op de aarde staat en de volledige zwaartekracht op de sensor inwerkt.

Als u naar de code kijkt in het besturingselement HTML-tekst dat u zojuist hebt toegevoegd, let dan op de volgende sectie:

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

In deze formule, van binnen naar buiten, wordt eerst de Versnelling op het X-vlak vermenigvuldigd met (90 / 9,81). Hierbij wordt de theoretische maximale rustwaarde gebruikt om de sensorwaarde om te zetten in graden. De waarde van 90 is aanwezig omdat bij de maximale theoretische waarde het apparaat loodrecht op de aarde in dat vlak zou staan, wat een waarde van 90 graden oplevert.

Die waarde in graden wordt vervolgens afgerond op nul decimalen om een geheel getal in graden te verkrijgen. Als laatste wordt de absolute waarde van dat afgeronde getal berekend om een positieve aflezing te geven. Hierdoor maakt het niet uit of de hoek vanaf de ene of de andere kant wordt gemeten.

De waterpas-visuals toevoegen

In deze stap gaan we enkele besturingselementen op ongebruikelijke manieren gebruiken om een visueel doel te bereiken.

Visual van een soort ronde waterpas

Voeg om te beginnen een besturingselement Knop toe aan het scherm en wijzig de naam in btnCircleLevel en verander de volgende eigenschappen in het deelvenster Geavanceerd:

Het resultaat van deze wijzigingen zou een ronde knop in het midden van het scherm moeten produceren die niet kan worden ingedrukt omdat deze is uitgeschakeld.

Voeg vervolgens een vorm Cirkel toe, stel de randradius in op 400 en wijzig de volgende eigenschappen in het deelvenster Geavanceerd:

De X en Y eigenschappen laten de Cirkel vorm over het midden van het app-scherm bewegen, relatieve verandering in de sensorwaarden voor Versnelling, maar binnen het cirkelvormige gebied van btnCircleLevel.

X- en Y-as ronde waterpas visuals

Voeg een besturingselement Schuifregelaar toe aan de app en wijzig de naam in sldXValue en verander de volgende eigenschappen in het deelvenster Geavanceerd:

Dit besturingselement Schuifregelaar geeft de hoek weer die vergelijkbaar is met hoe een waterpas dat doet: de Handle zal naar de verhoogde kant van het apparaat bewegen, vergelijkbaar met de luchtbel in een waterpas.

Kopieer vervolgens btnCircleLevel door deze te selecteren door Ctrl+C en vervolgens Ctrl+V in te drukken. Wijzig de naam van het besturingselement in btnXValueOverlay en verander de volgende eigenschappen in het deelvenster Geavanceerd:

Door deze veranderingen wordt het besturingselement over het besturingselement sldXValue geplaatst, waardoor de gebruiker de waarde ervan niet kan wijzigen en het een visuele grens biedt.

Kopieer en plak sldXValue met dezelfde methode die u gebruikte om btnCircleLevel te kopiëren. Wijzig de naam in sldYValue en wijzig de volgende eigenschappen:

Kopieer en plak btnXValueOverlay, wijzig de naam in btnYValueOverlay, waardoor de volgende eigenschappen worden gewijzigd:

Nu zijn de ronde waterpas-achtige visuals klaar.

De waterpas-app testen

Sla de app op en publiceer deze. Open de app op een mobiel apparaat met de benodigde sensoren en navigeer naar het scherm met de waterpas-visuals. Kantel het apparaat van links naar rechts, vervolgens omhoog en omlaag en tenslotte in alle richtingen, waarbij u de veranderingen in de hoekeigenschappen en de veranderingen in de beelden opmerkt. Zoek een schuin oppervlak om het apparaat op te plaatsen en let opnieuw op de hoeken en beelden.

Zie ook

• Signalen voor versnelling, app, kompas, verbinding en locatie in Power Apps
• Mixed reality-besturingselementen in Power Apps
• Georuimtelijke besturingselementen in Power Apps