Vytvoření aplikace, která používá mobilní senzory

Senzory vám umožňují rozšířit funkce vašich aplikací využitím funkcí vašeho telefonu. V tomto článku se dozvíte o používání senzorů na vašem mobilním zařízení uvnitř Power Apps.

K tomu vytvoříte ukázkovou aplikaci se dvěma obrazovkami. Na první obrazovce se zobrazí aktuální směr kompasu, zeměpisná šířka, zeměpisná délka, nadmořská výška a lze skenovat značky NFC a získat textové informace. Druhá obrazovka předvede, jak zobrazit data akcelerometru pro vytvoření úhlu zařízení podél os X a Y.

Chcete-li nastavit scénář za první obrazovkou, představte si, že vytváříte aplikaci pro orientační běh na bázi NFC. Každý účastník bude pomocí aplikace naskenovat značku NFC, která mu poskytne směr kompasu, zeměpisnou šířku a délku, které jej nasměrují na další místo určení. V tomto cíli pak účastník naskenuje další značku a postup opakuje, dokud nedosáhne konce lovu.

U druhé obrazovky si představte, že potřebujete nástroj pro hrubé měření úhlů. Na druhé obrazovce bude účastník moci umístit nebo držet své zařízení na povrchu a získat úhly na ose X a Y zařízení a také zobrazit vizuální znázornění těchto úhlů.

Podívejte se na toto video a zjistěte, jak vytvořit aplikaci, která využívá mobilní senzory:

Předpoklady

  • Libovolná úroveň licence Power Apps lze použít pro tuto aplikaci, protože se nepoužívá žádná datová připojení.

  • Bude potřeba mobilní zařízení, jako je mobilní telefon nebo tablet s GPS a akcelerometrem, protože většina počítačů nemusí mít potřebné senzory.

  • Zařízení podporující NFC je zapotřebí pro funkci skenování NFC. Rovněž se předpokládá, že značky NFC, které mají být skenovány, byly předkonfigurovány tak, aby vytvářely textové hodnoty v následujícím vzorovém formátu:

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

    To poskytne text ve formátu vhodném pro HTML pro aplikaci. Nastavení značek NFC přesahuje rámec tohoto článku a prvky NFC lze v případě potřeby ignorovat; primárním cílem je použití mobilních senzorů v Power Apps.

Přidejte záhlaví a text HTML pro výstupy senzorů zařízení

Štítek záhlaví

S aplikací otevřenou pro úpravy v Power Apps, přidejte Textový štítek na obrazovku přetažením z podokna Vložit. Umístěte ho do levého horního rohu obrazovky a v podokně Vlastnosti upravte následující vlastnosti:

Vlastnost Value
Text „Orientační běh“
Velikost písma 24
Tloušťka písma FontWeight.Semibold
Zarovnání textu Align.Center
Šířka Parent.Width

Pak v podokně Pokročilé upravte následující vlastnosti:

Vlastnost Value
Barva RGBA(255, 255, 255, 1)
Výplň RGBA(56, 96, 178, 1)

To poskytne záhlaví obrazovky.

Text HTML pro výstupy senzorů zařízení

Dále přidejte ovládací prvek Text HTML. To bude použito k zobrazení všech výstupů senzorů zařízení na jednom místě. Tento kód použijte ve vlastnosti 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"

Pak v podokně Upřesnit upravte následující vlastnosti:

Vlastnost Value
Velikost 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Šířka 560
Výška 576
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Pokud prozkoumáte, co bylo vloženo do HtmlText, můžete si všimnout, že se používají dva typy senzorů.

První je senzor Kompas, který používá vlastnost Směr, která poskytuje směr kompasu ze zařízení.

Druhým je senzor Umístění, který poskytuje vlastnosti Zeměpisná šířka, Zeměpisná délka a Nadmořská výška. K umístění jsou dvě poznámky. Za prvé, pokud použijete pouze umístění bez tečkového operátoru a vlastnosti, získáte záznam, který obsahuje pole pro zeměpisnou šířku, délku a nadmořskou výšku. Za druhé, vlastnost Nadmořská výška je ve výchozím nastavení v metrech. Pokud byste jej chtěli převést na stopy, nahraďte následující vzorec:

Použít metry:

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

Použít stopy:

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

Poznámka

Mnoho vlastností senzoru nemusí fungovat správně, pokud si zobrazíte náhled v aplikacii Power Apps Studio. Chcete-li při testování pracovat s vlastnostmi senzoru, raději použijte mobilní telefon.

Nyní umístěte ovládací prvek Text HTML poblíž spodní poloviny obrazovky.

Tlačítko Přidat pro skenování NFC a ovládací prvek Text HTML

Tlačítko skenování NFC

Přidejte do aplikace tlačítko umístěné pod ovládací prvek Text HTML, který jste přidali v posledním kroku, a změňte následující vlastnosti v podokně Upřesnit:

Vlastnost Value
OnSelect ClearCollect(colNFCScan, ReadNFC())
Text „Skenovat značku NFC“

Kód ve vlastnosti OnSelect využívá funkci ReadNFC(), která aktivuje čtečku NFC. Poté ukládá to, co je načteno ze značky NFC, do kolekce s názvem colNFCScan. Tato kolekce bude mít čtyři pole: RTD, Text, TNF a URI. I když úplné vysvětlení těchto polí přesahuje rámec tohoto článku, určité vysvětlení může být užitečné. TNF znamená Formát názvu typu a slouží k definování struktury Definice typu záznamu, tedy RTD, což zase definuje typ záznamu obsaženého v polích Text a URI. URI znamená Jednotný identifikátor prostředku, což je v podstatě adresa prostředku. U značek NFC používaných v tomto příkladu by kromě pole Text, obsahujícího ukázkový text z úvodu tohoto tématu, obsahovaly hodnotu TNF 1, hodnotu RTD T a prázdnou hodnotu URI.

Přidejte ovládací prvek Text HTML pro zobrazení informací o skenování NFC

Přidejte druhý ovládací prvek Text HTML a ve vlastnosti HTMLText použijte následující vzorec:

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

Pak v podokně Pokročilé upravte následující vlastnosti:

Vlastnost Value
Velikost 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Šířka 560
Výška 248
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Bez přítomnosti dat NFC ovládací prvek zobrazí Další destinace. Když je naskenována značka NFC, zobrazí se Další destinace a pak data z pole Text v datech shromážděných ze skenování.

Za předpokladu, že data pro značky NFC byla nakonfigurována tak, jak je popsáno v úvodu, uživateli se po naskenování jednoho z těchto tagů zobrazí další hodnoty směru kompasu, zeměpisné šířky a délky pro další místo běhu.

Hodnoty směru kompasu, zeměpisné šířky a délky

Otestování aplikace

Uložte a publikujte aplikaci. Na mobilním zařízení s potřebnými senzory otevřete aplikaci a sledujte hodnoty směru kompas, zeměpisné šířky, délky a nadmořské výšky. Zkuste se projít a otáčet různými směry, abyste viděli změny v různých hodnotách senzorů.

Zkuste se projít a otáčet se různými směry

Stiskněte tlačítko Naskenovat značku NFC pro sledování ovládacího prvku čtečky NFC. Pokud máte značku NFC, která může předat hodnotu Text, naskenujte značku a sledujte text v aplikaci. Pokud ne, vyberte Zrušit.

Skenovat značku NFC

Přidání a konfigurace druhé obrazovky

Přidat novou Prázdnou obrazovka pro část měření úhlu aplikace.

Po přidání obrazovky se vraťte na první obrazovku a přidejte ikonu Další šipka z + Vložit > Ikony > vyberte ikonu Další šipka. Umístěte ji do pravého horního rohu obrazovky a v podokně Rozšířené změňte následující vlastnosti:

Vlastnost Value
OnSelect Navigate(Screen2)
Barva RGBA(255, 255, 255, 1)

Pokud jste přejmenovali druhou obrazovku, která byla právě přidána, nahraďte ji názvem Screen2 ve funkci Navigovat.

Zobrazte náhled aplikace a vyberte ikonu, která byla právě přidána, abyste si ověřili, že vás naviguje na prázdnou obrazovku, která byla právě přidána.

Přidejte konfiguraci pro úhly X a Y

Přidejte Textový štítek na obrazovku přetažením z podokna Vložit. Umístěte ho do levého horního rohu obrazovky a v podokně Vlastnosti upravte následující vlastnosti:

Vlastnost Value
Text „Úroveň 2 os“
Velikost písma 24
Tloušťka písma FontWeight.Semibold
Zarovnání textu Align.Center
Šířka Parent.Width

Pak v podokně Pokročilé upravte následující vlastnosti:

Vlastnost Value
Barva RGBA(255, 255, 255, 1)
Výplň RGBA(56, 96, 178, 1)

To poskytne záhlaví druhé obrazovky.

Dále přidejte ikonu Šipka zpět z + Vložit > Ikony > vyberte ikonu Šipka zpět. Umístěte ji do levého horního rohu obrazovky a v podokně Rozšířené změňte následující vlastnosti:

Vlastnost Value
OnSelect Navigate(Screen1)
Barva RGBA(255, 255, 255, 1)

Pokud jste přejmenovali první obrazovku, která byla právě přidána, nahraďte ji názvem Screen1 ve funkci Navigovat.

Nakonec přidejte ovládací prvek Text HTML. To bude použito k zobrazení všech výstupů senzorů zařízení na jednom místě. Ve vlastnosti HTML Text použijte následující vzorec:

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

Pak na kartě Pokročilé upravte následující vlastnosti:

Vlastnost Value
Velikost 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Šířka 560
Výška 168
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Umístěte tento ovládací prvek do horní části obrazovky aplikace.

Pokud prozkoumáte, co bylo vloženo do HtmlText, můžete si všimnout, že používá senzor Akcelerace senzor s vlastnostmi X a Y. Je tam také vlastnost Z, kterou v tomto scénáři nepoužíváme.

Tento senzor detekuje gravitační síly na zařízení ve třech rovinách. Na příkladu mobilního telefonu si představte linku vyčnívající z boků telefonu. To by byla rovina X. Zvednutím pravé strany telefonu získáte kladnou hodnotu a zvednutím levé strany zápornou hodnotu. Linie sahající z horní a dolní části telefonu by představovala rovinu Y. Zvednutím horní strany telefonu získáte kladnou hodnotu a zvednutím spodní strany zápornou hodnotu. Nakonec linie vycházející z obrazovky a zadní části telefonu by představovala rovinu Z. Pokud obrazovku otočíte směrem nahoru, bude mít kladnou hodnotu a směrem dolů bude mít zápornou hodnotu.

Akcelerometr bude měřit síly působící na zařízení jak v pohybu, například když jste zařízení upustili, tak v klidu, jako například naklonění zařízení na jednu nebo více os popsaných výše. V klidu by teoretické hodnoty měly být mezi 0 a +/− 9,81 m/s2, přičemž 0 znamená, že relativní osa je rovnoběžná se zemí, přičemž na snímač nepůsobí gravitace, a hodnota 9,81 indikující, že relativní osa je kolmá k zemi a na snímač působí plná gravitační síla.

Při pohledu na kód v ovládacím prvku Text HTML, který jste právě přidali, si všimněte následující části:

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

V tomto vzorci, zevnitř ven, nejprve Akcelerace na rovině X se násobí (90/9,81). Toto používá teoretickou maximální hodnotu v klidu k převodu odečtu snímače na stupně. Hodnota 90 je přítomna, protože při maximální teoretické hodnotě by zařízení bylo v této rovině kolmé na zemi, což dalo měření 90 stupňů.

Tato hodnota ve stupních je pak zaokrouhlena na nula desetinných míst, aby byla poskytnuta hodnota stupně celého čísla. Nakonec se vypočítá absolutní hodnota tohoto zaokrouhleného čísla, aby byla získána kladná hodnota. Je tedy jedno, zda je úhel měřen z jedné nebo druhé strany.

Poznámka

Hodnoty sdílené výše jsou přibližné a nepředstavují přesné měření.

Přidání vizuálů úrovně

V tomto kroku použijeme některé ovládací prvky netradičními způsoby k dosažení vizuálního cíle.

Vizuál na kruhové bubliny jako ve vodováze

Na začátek přidejte ovládací prvek Tlačítko, přejmenujte ho na btnCircleLevel a změňte následující vlastnosti v podokně Rozšířené:

Vlastnost Value
Text „“
BorderColor RGBA(56, 96, 178, 1)
FocusedBorderThickness 2
Výplň Průhledné
DisabledFill Self.Fill
X (Parent.Width - Self.Width) / 2
Y (Parent.Height - Self.Height) / 2
Šířka 400
Výška Self.Width

Výsledkem těchto změn by mělo být kruhové tlačítko uprostřed obrazovky, které nelze kvůli deaktivaci stisknout.

Dále přidejte tvar Kruh, nastavte poloměr okraje na 400 a změňte následující vlastnosti v podokně Rozšířený:

Vlastnost Value
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)
Šířka 42
Výška Self.Width
Šířka 400
Výška Self.Width

Vlastnosti X a Y umožňují pohybovat se tvaru Kruhu kolem středu obrazovky aplikace, relativně ke změně v hodnotě senzoru Akcelerace, ale uvnitř kruhové oblasti btnCircleLevel.

Vizuály osy X a Y podobné vodováze

Do aplikace přidejte ovládací prvek Posuvník, přejmenujte ho na sldXValue a změňte následující vlastnosti v podokně Rozšířené:

Vlastnost Value
Min -90
Max 90
Výchozí Round(Acceleration.X * (90 / 9.81), 0)
ValueFill Self.RailFill
X (Parent.Width - Self.Width) / 2
Y btnCircleLevel.Y + btnCircleLevel.Height + 30
Šířka btnCircleLevel.Width
Výška 70

Tento ovládací prvek Posuvník zobrazí úhel podobně jako na vodováze: Rukojeť se bude pohybovat směrem ke zvýšené straně zařízení, podobně jako vzduchová bublina ve vodováze.

Dále zkopírujte btnCircleLevel jeho výběrem, stisknutím Ctrl + C a pak Ctrl + V. Přejmenujte ovládací prvek na btnXValueOverlay a změňte následující vlastnosti v podokně Rozšířené:

Vlastnost Value
X sldXValue.X - sldXValue.HandleSize / 2
Y sldXValue.Y
Šířka sldXValue.Width + sldXValue.HandleSize
Výška sldXValue.Height

Tyto změny jej umístí nad ovládací prvek sldXValue, čímž brání uživateli ve změně jeho hodnoty a poskytuje vizuální ohraničení.

Zkopírujte a vložte sldXValue, pomocí stejné metody jako při kopírování btnCircleLevel. Přejmenujte ho na sldYValue a změňte následující vlastnosti:

Vlastnost Value
Rozložení Layout.Vertical
X btnCircleLevel.X - Self.Width - 30
Y (Parent.Height - Self.Height) / 2
Šířka sldXValue.Height
Výška sldXValue.Width

Zkopírujte a vložte btnXValueOverlay, přejmenujte ho na btnYValueOverlay a změňte následující vlastnosti:

Vlastnost Value
X sldYValue.X
Y sldYValue.Y - sldYValue.HandleSize / 2
Šířka sldYValue.Width
Výška sldYValue.Height + sldYValue.HandleSize

Tím jsou vizuály podobné úrovni bublin dokončeny.

Otestujte aplikaci vodováhy

Otestování aplikace

Uložte a publikujte aplikaci. Na mobilním zařízení s potřebnými senzory otevřete aplikaci a přejděte na obrazovku s vizuály vodováhy. Nakloňte zařízení zleva doprava, pak nahoru a dolů a nakonec všemi směry, přičemž si všímejte změn vlastností úhlu i změn ve vizuálech. Najděte šikmý povrch, na který umístíte zařízení, a znovu si všimněte úhlů a vizuálů.

Viz také