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.
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.
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.
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
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
Visszajelzés
https://aka.ms/ContentUserFeedback.
Hamarosan elérhető: 2024-ben fokozatosan kivezetjük a GitHub-problémákat a tartalom visszajelzési mechanizmusaként, és lecseréljük egy új visszajelzési rendszerre. További információ:Visszajelzés küldése és megtekintése a következőhöz: