Share via


Készítsen mobilérzékelőket használó alkalmazást

Az érzékelők lehetővé teszik, hogy a telefon képességeit kihasználva gazdagabb funkciókat adjon az alkalmazásaihoz. Ebben a cikkben a mobileszközön található érzékelők használatával ismerkedhet meg a Power Apps rendszerben.

Ehhez egy két képernyőből álló mintaalkalmazást készítünk. Az első képernyő megjeleníti az aktuális irányt, a szélességet, hosszúságot és magasságot, és beolvashatja az NFC-címkéket a szöveges információk megszerzéséhez. A második képernyőn bemutatjuk, hogyan jeleníthetjük meg a gyorsulásmérő adatait az eszköz X- és Y-tengely mentén mért szögének előállításához.

Az első képernyő mögötti forgatókönyv felállításához képzelje el, hogy egy NFC-alapú kincsvadászathoz készít alkalmazást. Minden résztvevő az alkalmazással beolvas egy NFC-címkét, amely egy iránytűt, szélességi és hosszúsági fokot ad meg, amely megmutatja neki a következő úti célját. A célállomáson a résztvevő beolvas egy másik címkét, és a folyamatot addig ismétli, amíg el nem éri a kincskeresés végét.

A második képernyőhöz képzelje el, hogy szüksége van egy olyan eszközre, amellyel nagyjából szögeket mérhet. A második képernyőn a résztvevő képes lesz arra, hogy a készülékét egy felületre helyezze vagy tartsa, és megkapja a készülék X- és Y-tengelyének szögeit, valamint megtekintheti e szögek vizuális ábrázolását.

A videó megnézve megismerheti, hogyan lehet mobilszenzorokat használó alkalmazást fejleszteni:

Előfeltételek

  • A Power Apps licenc bármely szintje használható ehhez az alkalmazáshoz, mivel nem használ adatkapcsolatot.

  • Szükség lesz egy GPS- és gyorsulásmérővel rendelkező mobileszközre, például mobiltelefonra vagy táblagépre, mivel a legtöbb számítógép nem feltétlenül rendelkezik a szükséges érzékelőkkel.

  • Az NFC-olvasási funkcióhoz NFC-képes készülékre van szükség. Feltételezzük azt is, hogy a beolvasandó NFC-címkéket előre úgy konfiguráltuk, hogy a következő példa szerinti szöveges értékeket állítsuk elő:

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

    Ez a szöveget HTML-barát formátumban adja meg az alkalmazás számára. Az NFC-címkék beállítása meghaladja e cikk kereteit, és az NFC-elemek szükség esetén figyelmen kívül hagyhatók; az elsődleges hangsúly a mobilérzékelők használatán van a Power Apps rendszerben.

Fejléc és HTML szöveg hozzáadása a készülék érzékelő kimeneteihez

Fejléc címke

A szerkesztésre megnyitott alkalmazással a Power Apps rendszerben adjon hozzá egy szövegcímkét a képernyőhöz a Beszúrás ablaktábláról történő húzással. Helyezze a képernyő bal felső sarkába, és módosítsa a következő tulajdonságokat a Tulajdonságok ablaktáblán:

Tulajdonság Érték
Szöveges „Kincsvadászat”
Betűméret 24
Betűvastagság FontWeight.Semibold
Szöveg igazítása Align.Center
Szélesség Parent.Width

Ezután a Speciális ablaktáblán módosítsa a következő tulajdonságokat:

Tulajdonság Érték
Szín RGBA(255, 255, 255, 1)
Kitöltés RGBA(56, 96, 178, 1)

Ez egy fejlécet ad a képernyőnek.

HTML szöveg a készülék érzékelőinek kimeneteihez

Ezután adjon hozzá egy HTML szöveg vezérlőt. Ez a készülék összes érzékelő kimenetének egy helyen történő megjelenítésére szolgál. Használja ezt a kódot a HtmlText tulajdonságban:

"<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"

Módosítsa a következő tulajdonságokat a Speciális ablaktáblán:

Tulajdonság Érték
Méret 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Szélesség 560
Magasság 576
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Ha megvizsgálja, hogy mi került a HtmlText-be, észreveheti, hogy két érzékelőtípust használ.

Az első az Irányérzékelő, amely az Irány tulajdonságot használja az eszköz irányának megadására.

A második a Helyérzékelő, amely a földrajzi szélességet, hosszúságot és magasságot adja meg. A Hellyel kapcsolatban két szempontot kell figyelembe venni. Először is, ha csak a Helyet használja a pontoperátor és a tulajdonság nélkül, akkor egy olyan rekordot kap, amely a szélességi, hosszúsági és magassági mezőkkel rendelkezik. Másodszor, a Magasság tulajdonság alapértelmezés szerint méterben van megadva. Ha lábra szeretné átváltani, akkor a következő képletet helyettesítse:

Méret:

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

Láb:

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

Megjegyzés

Sok érzékelőtulajdonság nem működik megfelelően, ha az alkalmazást a Power Apps Studio rendszeren belül előnézetben jeleníti meg. A teszteléshez szükséges érzékelőtulajdonságokkal való munkához inkább használjon mobiltelefont.

Most helyezze a HTML szövegvezérlőt a képernyő alsó feléhez közel.

Gomb hozzáadása az NFC beolvasáshoz és a HTML szövegvezérléshez

NFC beolvasó gomb

Adjon hozzá egy gombot az alkalmazáshoz, helyezze az előző lépésben hozzáadott HTML szövegvezérlő alá, és módosítsa a következő tulajdonságokat a Speciális ablaktáblán:

Tulajdonság Érték
OnSelect ClearCollect(colNFCScan, ReadNFC())
Szöveges „NFC-címke beolvasása”

Az OnSelect tulajdonságban lévő kód a ReadNFC() függvényt használja, amely aktiválja az NFC-olvasót. Ezután az NFC-címkéről beolvasott adatokat a colNFCScan nevű gyűjteményben tárolja. Ez a gyűjtemény négy mezőt tartalmaz: RTD, Text, TNF és URI. Bár ezeknek a mezőknek a teljes magyarázata meghaladja e cikk kereteit, néhány magyarázat hasznos lehet. A TNF a Típusnév-formátum rövidítése, és a Rekordtípus-definíció vagy RTD szerkezetének meghatározására szolgál, amely viszont meghatározza a Szöveg és/vagy URI mezőkben szereplő rekord típusát. Az URI az Uniform Resource Identifier rövidítése, ami lényegében egy erőforrás címe. Az ebben a példában használt NFC-címkék az e téma bevezetőjében szereplő példaszöveget tartalmazó Szöveg mezőn kívül tartalmaznak egy 1 TNF-értéket, egy T RTD-értéket és egy üres URI-értéket.

HTML szövegvezérlő hozzáadása az NFC beolvasási információk megjelenítéséhez

Adjon hozzá egy második HTML szövegvezérlőt, és használja a következő képletet a HTMLText tulajdonságban:

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

Módosítsa a következő tulajdonságokat a Speciális ablaktáblán:

Tulajdonság Érték
Méret 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Szélesség 560
Magasság 248
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

NFC-adatok jelenléte nélkül a vezérlő a Következő célt jeleníti meg. Amikor egy NFC-címkét beolvasnak, a beolvasásból összegyűjtött adatok között megjelenik a Következő célállomás, majd a Szöveg mező adatai.

Feltételezve, hogy az NFC-címkék adatai a bevezetőben leírtak szerint lettek konfigurálva, a felhasználó az egyik ilyen címke beolvasása után látni fogja a következő irányt, szélességi és hosszúsági értékeket a következő kincskereső helyhez.

Iránytű irány, szélességi és hosszúsági értékek

Az alkalmazás tesztelése

Alkalmazás mentése és közzététele. A szükséges érzékelőkkel rendelkező mobileszközön nyissa meg az alkalmazást, és figyelje az irányt, a szélességi, hosszúsági és magassági értékeket. Próbáljon sétálni, miközben különböző irányokba fordul, hogy lássa a különböző érzékelők értékeinek változásait.

Próbáljon meg sétálni, miközben különböző irányokba fordul

Nyomja meg az NFC-címke beolvasása gombot az NFC-olvasó vezérlő megfigyeléséhez. Ha van olyan NFC-címkéje, amely képes szöveges értéket előállítani, akkor a címkét beolvasva megfigyelheti a szöveget az alkalmazásban. Ha nem, válassza a Mégsem lehetőséget.

NFC-címke beolvasása

Második képernyő hozzáadása és konfigurálása

Új üres képernyő hozzáadása az alkalmazás szögmérési részéhez.

A képernyő hozzáadása után térjen vissza az első képernyőhöz, és adjon hozzá egy Következő nyíl ikont a + Beszúrás > Ikonok > menüpontból válassza ki a Következő nyíl ikont. Helyezze a képernyő jobb felső sarkába, és módosítsa a következő tulajdonságokat a Speciális ablaktáblán:

Tulajdonság Érték
OnSelect Navigálás(Screen2)
Szín RGBA(255, 255, 255, 1)

Ha az imént hozzáadott második képernyőt átnevezte, akkor a Navigálás funkcióban a Screen2 nevet helyettesítse ezzel a névvel.

Az alkalmazás előnézetét az imént hozzáadott ikon kiválasztásával ellenőrizze, hogy az az imént hozzáadott üres képernyőre navigál-e.

X és Y szögek konfigurációjának hozzáadása

Adjon hozzá egy szövegcímkét a képernyőhöz a Beszúrás ablaktábláról történő húzással. Helyezze a képernyő bal felső sarkába, és módosítsa a következő tulajdonságokat a Tulajdonságok ablaktáblán:

Tulajdonság Érték
Szöveges „2 tengelyes szint”
Betűméret 24
Betűvastagság FontWeight.Semibold
Szöveg igazítása Align.Center
Szélesség Parent.Width

Ezután a Speciális ablaktáblán módosítsa a következő tulajdonságokat:

Tulajdonság Érték
Szín RGBA(255, 255, 255, 1)
Kitöltés RGBA(56, 96, 178, 1)

Ez egy fejlécet biztosít a második képernyő számára.

Ezután adjon hozzá egy Vissza nyíl ikont a + Beszúrás > Ikonok > menüpontból, válassza ki a Vissza nyíl ikont. Helyezze a képernyő bal felső sarkába, és módosítsa a következő tulajdonságokat a Speciális ablaktáblán:

Tulajdonság Érték
OnSelect Navigálás(Screen1)
Szín RGBA(255, 255, 255, 1)

Ha az imént hozzáadott első képernyőt átnevezte, akkor a Navigálás funkcióban a Screen1 nevet helyettesítse ezzel a névvel.

Végül adjon hozzá egy HTML szövegvezérlőt. Ez a készülék összes érzékelő kimenetének egy helyen történő megjelenítésére szolgál. Használja a következő képletet a HTML Szöveg tulajdonságban:

"<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>"

Módosítsa a következő tulajdonságokat a Speciális lapon:

Tulajdonság Érték
Méret 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Szélesség 560
Magasság 168
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Helyezze ezt a vezérlőelemet az alkalmazás képernyőjének tetejéhez közel.

Ha megvizsgálja, hogy mi került a HtmlText-be, észreveheti, hogy a gyorsulásérzékelőt használja, X és Y tulajdonságokkal. Van egy Z tulajdonság is, amelyet ebben a forgatókönyvben nem használunk.

Ez az érzékelő három síkban érzékeli a készülékre ható gravitációs erőket. Egy mobiltelefont használva példaként, képzeljünk el egy vonalat, amely a telefon oldalaiból nyúlik ki. Ez lenne az X sík. A telefon jobb oldalának felemelése pozitív értéket, a bal oldal felemelése pedig negatív értéket eredményez. A telefon tetejéből és aljából kiinduló vonal az Y síkot jelentené. A telefon felső részének megemelése pozitív értéket, az alsó rész megemelése pedig negatív értéket eredményez. Végül a képernyőből és a telefon hátuljából kiinduló vonal a Z síkot jelképezné. Ha a képernyő felfelé néz, pozitív értéket kap, ha pedig lefelé néz, negatív értéket kap.

A gyorsulásmérő a készülékre ható erőket méri mind mozgás közben, például ha leejtette a készüléket, mind nyugalmi állapotban, például ha a készüléket a korábban ismertetett tengelyek közül egy vagy több tengelyen megdöntötte. Nyugalomban az elméleti értékeknek 0 és +/- 9,81 m/s2 között kell lenniük, ahol a 0 azt jelzi, hogy a relatív tengely párhuzamos a Földdel, és az érzékelőre nem hat gravitáció, a 9,81-es érték pedig azt, hogy a relatív tengely merőleges a Földre, és az érzékelőre a gravitáció teljes ereje hat.

Ha megnézzük az imént hozzáadott HTML szövegvezérlő kódját, akkor a következő részt vesszük észre:

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

Ebben a képletben, belülről kifelé haladva, először is, az X-síkbeli gyorsulást megszorozzuk (90 / 9,81) értékkel. Ez az elméleti maximális nyugalmi értéket használja az érzékelő leolvasásának fokokra történő átalakításához. A 90-es érték azért van jelen, mert a maximális elméleti értéknél az eszköz merőlegesen állna a Földre ebben a síkban, ami 90 fokos értéket ad.

Ezt az értéket fokban kifejezve nulla tizedesjegyre kerekítjük, hogy egész számban kifejezett fokértéket kapjunk. Végül a kerekített szám abszolút értékét kiszámítjuk, hogy pozitív értéket kapjunk. Így nem számít, hogy a szöget az egyik vagy a másik oldalról mérjük.

Megjegyzés

A fent megosztott értékek közelítő értékek, és nem jelentenek pontos mérést.

Adja hozzá a szint vizuális elemeit

Ebben a lépésben néhány vezérlőelemet fogunk szokatlan módon használni egy vizuális cél elérése érdekében.

Kör alakú buborék-vízmértékszerű látvány

Kezdetnek adjon hozzá egy gombvezérlőt a képernyőhöz, nevezze át btnCircleLevel-re, és módosítsa a következő tulajdonságokat a Speciális ablaktáblán:

Tulajdonság Érték
Szöveges ""
BorderColor RGBA(56, 96, 178, 1)
FocusedBorderThickness 2
Kitöltés Átlátszó
DisabledFill Self.Fill
X (Parent.Width - Self.Width) / 2
Y (Parent.Height - Self.Height) / 2
Szélesség 400
Magasság Self.Width

A változtatások eredményeként a képernyő közepén egy kör alakú gombnak kell megjelennie, amelyet nem lehet megnyomni, mert le van tiltva.

Következő lépésként vegyen fel egy Kör alakú formát, a Szegély sugarát állítsa 400-ra, és módosítsa a Speciális ablaktáblában a következő tulajdonságokat:

Tulajdonság Érték
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)
Szélesség 42
Magasság Self.Width
Szélesség 400
Magasság Self.Width

Az X és Y tulajdonságok lehetővé teszik, hogy a Kör alakzat az alkalmazás képernyőjének közepe körül mozogjon, a gyorsulásérzékelő értékeinek relatív változása, de a btnCircleLevelkör alakú területén belül.

X és Y tengely buborék-vízmértékszerű megjelenítés

Adjon hozzá egy Csúszka vezérlőelemet az alkalmazáshoz, nevezze át sldXValue-ra, és módosítsa a következő tulajdonságokat a Speciális ablaktáblán:

Tulajdonság Érték
Min. -90
Max. 90
Default Round(Acceleration.X * (90 / 9.81), 0)
ValueFill Self.RailFill
X (Parent.Width - Self.Width) / 2
Y btnCircleLevel.Y + btnCircleLevel.Height + 30
Szélesség btnCircleLevel.Width
Magasság 70

Ez a Csúszka vezérlő a vízmértékhez hasonlóan jeleníti meg a szöget: a Fogantyú a készülék megemelt oldala felé mozog, hasonlóan a vízmértékben lévő légbuborékhoz.

Ezután másolja a btnCircleLevel elemet a Ctrl + C, majd a Ctrl + V billentyűkombináció megnyomásával. Nevezze át a vezérlőt btnXValueOverlay-re, és módosítsa a következő tulajdonságokat a Speciális ablaktáblán:

Tulajdonság Érték
X sldXValue.X - sldXValue.HandleSize / 2
Y sldXValue.Y
Szélesség sldXValue.Width + sldXValue.HandleSize
Magasság sldXValue.Height

Ezek a módosítások az sldXValue vezérlő fölé pozícionálják, megakadályozva, hogy a felhasználó megváltoztassa az értékét, és vizuális határt biztosítva.

Másolja ki és illessze be az sldXValue értéket a btnCircleLevel másolásához használt módszerrel. Nevezze át sldYValue-ra, és módosítsa a következő tulajdonságokat:

Tulajdonság Érték
Formátum Layout.Vertical
X btnCircleLevel.X - Self.Width - 30
Y (Parent.Height - Self.Height) / 2
Szélesség sldXValue.Height
Magasság sldXValue.Width

Másolja ki és illessze be a btnXValueOverlay-t, nevezze át btnYValueOverlay-re, és változtassa meg a következő tulajdonságokat:

Tulajdonság Érték
X sldYValue.X
Y sldYValue.Y - sldYValue.HandleSize / 2
Szélesség sldYValue.Width
Magasság sldYValue.Height + sldYValue.HandleSize

Ez teszi teljessé a vízmértékszerű látványvilágot.

A vízmérték alkalmazás tesztelése

Az alkalmazás tesztelése

Alkalmazás mentése és közzététele. A szükséges érzékelőkkel rendelkező mobilkészüléken nyissa meg az alkalmazást, és navigáljon a vízmértéket megjelenítő képernyőre. Döntse a készüléket balról jobbra, majd fel és le, végül pedig minden irányba, és figyelje a szögtulajdonságok változását, valamint a képi megjelenítés változásait. Keressen egy ferde felületet, amelyre a készüléket helyezheti, és ismét jegyezze meg a szögeket és a látványt.

Kapcsolódó információk