Crear unha aplicación que use os sensores do móbil

Os sensores permiten engadir funcionalidades máis ricas ás súas aplicacións aproveitando as capacidades do seu teléfono. Neste artigo, obterá información sobre o uso de sensores no seu dispositivo móbil en Power Apps.

Para iso, fará unha aplicación de mostra con dúas pantallas. A primeira pantalla mostrará o título actual do compás, a latitude, a lonxitude, a altitude e pode escanear etiquetas NFC para obter información de texto. A segunda pantalla mostrará como amosar os datos do acelerómetro para producir o ángulo do dispositivo nos eixes X e Y.

Para configurar o escenario de detrás da primeira pantalla, imaxine que está a construír unha aplicación para unha busca do tesouro baseada en NFC. Cada participante empregará a aplicación para escanear unha etiqueta NFC que lle proporcionará unha cabeceira, latitude e lonxitude do compás que os dirixirá ao seu seguinte destino. Nese destino, o participante escaneará outra etiqueta e repetirá o proceso ata chegar ao final da busca.

Para a segunda pantalla, imaxine que necesita unha ferramenta para medir aproximadamente os ángulos. Cando estea na segunda pantalla, o participante poderá colocar ou manter o seu dispositivo nunha superficie e obter os ángulos nos eixes X e Y do dispositivo, así como ver unha representación visual deses ángulos.

Mire este vídeo para aprender a crear unha aplicación que utilice sensores móbiles:

Requisitos previos

  • Calquera nivel da licenza de Power Apps pódese usar para esta aplicación, xa que non se están a utilizar conexións de datos.

  • Necesitarase un dispositivo móbil como un teléfono móbil ou tableta con capacidades GPS e acelerómetro, xa que a maioría dos ordenadores poden non ter os sensores necesarios.

  • Precísase un dispositivo compatible con NFC para a función de dixitalización NFC. Tamén se supón que as etiquetas NFC que se van escanear foron preconfiguradas para producir valores de texto no seguinte formato de exemplo:

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

    Isto proporcionará o texto nun formato compatible con HTML para a aplicación. A configuración das etiquetas NFC está fóra do alcance deste artigo e os elementos NFC pódense ignorar se é necesario; o obxectivo principal é empregar os sensores móbiles en Power Apps.

Engadir cabeceira e texto HTML para as saídas do sensor do dispositivo

Etiqueta de cabeceira

Cunha aplicación aberta para editar en Power Apps, engada unha Etiqueta de texto á pantalla arrastrándoa e soltándoa desde o panel Inserir. Sitúeo na esquina superior esquerda da pantalla e modifique as seguintes propiedades no panel Propiedades:

Propiedade Valor
Texto "Caza do tesouro"
Tamaño do tipo de letra 24
Espesura do tipo de letra FontWeight.Semibold
Aliñamento do texto Aliñar.Centro
Largura Parent.Width

Despois, no panel Avanzado, modifique as seguintes propiedades:

Propiedade Valor
Cor RGBA(255, 255, 255, 1)
Encher RGBA(56, 96, 178, 1)

Isto proporcionará unha cabeceira para a pantalla.

Texto HTML para as saídas do sensor do dispositivo

A continuación, engada un control de Texto HTML. Utilizarase para amosar todas as saídas do sensor do dispositivo nun mesmo lugar. Use este código na propiedade 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"

Modifique as seguintes propiedades no panel avanzado:

Propiedade Valor
Tamaño 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Largura 560
Altura 576
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Se examina o que se puxo no HtmlText, pode ver que hai dous tipos de sensores que se están a usar.

O primeiro é o sensor de Compás, que está a usar a propiedade Cabeceira para fornecer o título do compás dende o dispositivo.

O segundo é o sensor de Localización, que proporciona a Latitude, Lonxitude e Altitude. Hai dúas consideracións sobre a localización. En primeiro lugar, se usa só Localización sen o operador de puntos e a propiedade, obterá un rexistro que contén campos para Latitude, Lonxitude e Altitude. En segundo lugar, a propiedade Altitude está en metros por defecto. Se quere convertelo a pés, substitúa a seguinte fórmula:

Usar metros:

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

Empregar pés:

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

Nota

É posible que moitas propiedades do sensor non funcionen correctamente se previsualiza a aplicación dentro de Power Apps Studio. Para traballar coas propiedades do sensor para realizar probas, é recomendable usar un teléfono móbil.

Agora coloque o control de Texto HTML preto da metade inferior da pantalla.

Botón Engadir para a exploración de NFC e o control de texto HTML

Botón de exploración NFC

Engada un botón á aplicación, colocándoo baixo o control de Texto HTML que engadiu no último paso e cambie as seguintes propiedades no panel Avanzado:

Propiedade Valor
OnSelect ClearCollect(colNFCScan, ReadNFC())
Texto "Escanear etiqueta NFC"

O código da propiedade OnSelect está a usar a función ReadNFC(), que activa o lector NFC. Despois almacena o que se le da etiqueta NFC nunha colección chamada colNFCScan. Esta colección terá catro campos: RDT, Texto, TNF e URI. Aínda que unha explicación completa destes campos está fóra do alcance deste artigo, algunha explicación pode ser útil. TNF significa Formato de tipo de nome e úsase para definir a estrutura da Definición do tipo de rexistro ou RTD, que á súa vez define o tipo de rexistro contido nos campos Texto e/ou URI. URI significa Identificador de recursos uniforme, que é esencialmente o enderezo dun recurso. Para as etiquetas NFC que se empregan neste exemplo, ademais do campo Texto que contén o texto de exemplo da introdución deste tema, conterían un valor TNF valor de 1, un valor de RTD de T e un valor de URI en branco.

Engadir o control de texto HTML para amosar a información de exploración NFC

Engada un segundo control de Texto HTML e use a seguinte fórmula na propiedade HTMLText:

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

Modifique as seguintes propiedades no panel avanzado:

Propiedade Valor
Tamaño 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Largura 560
Altura 248
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Sen ningún dato NFC presente, o control mostrará Próximo destino. Cando se escanea unha etiqueta NFC, mostrarase Próximo destino e, a continuación, os datos do campo Texto nos datos recollidos da exploración.

Supoñendo que os datos das etiquetas NFC se configuraron como se describe na introdución, o usuario verá os seguintes valores de cabeceira, latitude e lonxitude do compás para a próxima localización da busca do tesouro despois de escanear unha desas etiquetas.

Valores de latitude e lonxitude do título do compás

Probar a aplicación

Garde e publique a aplicación. Nun dispositivo móbil cos sensores necesarios, abra a aplicación e observe os valores de rumbo, latitude, lonxitude e altitude do compás. Probe a camiñar xirando en varias direccións para ver os cambios nas distintas lecturas do sensor.

Probe a camiñar mentres xiras en varias direccións

Prema o botón Escanear etiqueta NFC para observar o control do lector NFC. Se ten unha etiqueta NFC que pode producir un valor de Texto, escanee a etiqueta para observar o texto na aplicación. Do contrario, seleccione Cancelar.

Escanear etiqueta NFC

Engadir e configurar a segunda pantalla

Engada unha nova Pantalla en branco para a porción de medición de ángulo da aplicación.

Despois de engadir a pantalla, volva á primeira pantalla e engada unha icona de Frecha seguinte de + Inserir > Iconas > escolla a icona Frecha seguinte. Sitúeo na esquina superior dereita da pantalla e modifique as seguintes propiedades no panel Avanzado:

Propiedade Valor
OnSelect Navigate(Screen2)
Cor RGBA(255, 255, 255, 1)

Se cambiou o nome da segunda pantalla que se acaba de engadir, substitúa ese nome por Screen2 na función Navigate.

Previsualice a aplicación, seleccionando a icona que se acaba de engadir para verificar que o leva ata a pantalla en branco que se acaba de engadir.

Engadir a configuración para ángulos X e Y

Engada unha Etiqueta de texto á pantalla arrastrándoa e soltándoa desde o panel Inserir. Sitúeo na esquina superior esquerda da pantalla e modifique as seguintes propiedades no panel Propiedades:

Propiedade Valor
Texto "Nivel de 2 eixes"
Tamaño do tipo de letra 24
Espesura do tipo de letra FontWeight.Semibold
Aliñamento do texto Aliñar.Centro
Largura Parent.Width

Despois, no panel Avanzado, modifique as seguintes propiedades:

Propiedade Valor
Cor RGBA(255, 255, 255, 1)
Encher RGBA(56, 96, 178, 1)

Isto proporcionará unha cabeceira para a segunda pantalla.

A continuación, engada unha icona de Frecha cara atrás de + Inserir > Iconas > escolla a icona Frecha cara atrás. Sitúeo na esquina superior esquerda da pantalla e modifique as seguintes propiedades no panel Avanzado:

Propiedade Valor
OnSelect Navigate(Screen1)
Cor RGBA(255, 255, 255, 1)

Se cambiou o nome da primeira pantalla que se acaba de engadir, substitúa ese nome por Screen1 na función Navigate.

Finalmente, engada un control de Texto HTML. Utilizarase para amosar todas as saídas do sensor do dispositivo nun mesmo lugar. Use a seguinte fórmula na propiedade de texto HTML:

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

Modifique as seguintes propiedades na pestana Avanzado:

Propiedade Valor
Tamaño 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Largura 560
Altura 168
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

Sitúe este control preto da parte superior da pantalla da aplicación.

Se examina o que se puxo en HtmlText, pode comprobar que está a usar o sensor Aceleración coas propiedades X e Y. Tamén hai unha propiedade Z que non estamos a usar neste escenario.

Este sensor detecta as forzas gravitatorias do dispositivo en tres planos. Empregando un teléfono móbil como exemplo, imaxine unha liña que se estende polos lados do teléfono. Este sería o plano X. Levantar o lado dereito do teléfono producirá un valor positivo e levantar o lado esquerdo producirá un valor negativo. Unha liña que se estende desde a parte superior e inferior do teléfono representaría o plano Y. Levantar o lado superior do teléfono producirá un valor positivo e levantar o lado inferior producirá un valor negativo. Finalmente, unha liña que sae da pantalla e volve ao teléfono representaría o plano Z. Facer que a pantalla estea cara arriba producirá un valor positivo e colocala cara a abaixo terá un valor negativo.

O acelerómetro medirá as forzas que actúan sobre o dispositivo tanto en movemento, como se deixou caer o dispositivo, como en repouso, como inclinando o dispositivo nun ou máis dos eixes descritos anteriormente. En repouso, os valores teóricos deben estar entre 0 e +/- 9,81 m/s2, indicando o 0 que o eixe relativo está en paralelo á Terra sen gravidade sobre o sensor e unha lectura de 9,81 indica que o eixe relativo está perpendicular á Terra e toda a forza da gravidade está actuando sobre o sensor.

Mirando o código co control Texto HTML que acaba de engadir, observe a seguinte sección:

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

Nesta fórmula, de dentro a fóra, primeiro a Aceleración do plano X está a ser multiplicada por (90 / 9,81). Isto utiliza o valor teórico máximo en repouso para converter a lectura do sensor en graos. O valor de 90 está presente porque ao máximo valor teórico, o dispositivo estaría perpendicular á Terra nese plano, dando unha medición de 90 graos.

Ese valor en graos arredóndase a cero decimais para proporcionar un valor de grao enteiro. Por último, o valor absoluto dese número arredondado calcúlase para dar unha lectura positiva. Isto é así para que dea igual se o ángulo se mide desde un lado ou outro.

Nota

Os valores compartidos anteriormente son aproximados e non representan unha medida exacta.

Engadir os elementos visuais de nivel

Neste paso, imos usar algúns controis de formas non convencionais para acadar un obxectivo visual.

Elemento visual circular de nivel de burbulla

Para comezar, engada un control de Botón á pantalla, cambiándolle o nome a btnCircleLevel e cambie as seguintes propiedades no panel Avanzado:

Propiedade Valor
Texto ""
BorderColor RGBA(56, 96, 178, 1)
FocusedBorderThickness 2
Encher Transparente
DisabledFill Self.Fill
X (Parent.Width - Self.Width) / 2
Y (Parent.Height - Self.Height) / 2
Largura 400
Altura Self.Width

O resultado destes cambios debería producir un botón circular no centro da pantalla que non se pode premer por estar desactivado.

A continuación, engada a forma Círculo, estableza o seu raio de bordo en 400 e cambie as seguintes propiedades no panel Avanzado:

Propiedade Valor
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)
Largura 42
Altura Self.Width
Largura 400
Altura Self.Width

As propiedades X e Y permiten mover a forma Círculo polo centro da pantalla da aplicación, cambio relativo nos valores do sensor de Aceleración pero contidos na área circular de btnCircleLevel.

Elementos visuais tipo burbulla do eixe X e Y

Engada un control de Cursor da barra de desprazamento á aplicación, cambiándolle o nome a sldXValue e cambie as seguintes propiedades no panel Avanzado:

Propiedade Valor
Mín. -90
Máx. 90
Default Round(Acceleration.X * (90 / 9.81), 0)
ValueFill Self.RailFill
X (Parent.Width - Self.Width) / 2
Y btnCircleLevel.Y + btnCircleLevel.Height + 30
Largura btnCircleLevel.Width
Altura 70

Este control de Cursor da barra de desprazamento amosará o ángulo similar a como o fai un nivel de burbulla: a agarradoira desprazarase cara ao lado elevado do dispositivo, de modo semellante á burbulla de aire nun nivel de burbulla.

A continuación, copie btnCircleLevel seleccionándoo, premendo Ctrl + C e logo Ctrl + V. Cambie o nome do control a btnXValueOverlay e cambie as seguintes propiedades no panel Avanzado:

Propiedade Valor
X sldXValue.X - sldXValue.HandleSize / 2
Y sldXValue.Y
Largura sldXValue.Width + sldXValue.HandleSize
Altura sldXValue.Height

Estes cambios situarano sobre o control sldXValue, evitando que o usuario cambie o seu valor e proporcione un bordo visual.

Copie e pegue sldXValue, usando o mesmo método usado para copiar btnCircleLevel. Cambie o nome a sldYValue e cambie as seguintes propiedades:

Propiedade Valor
Deseño Layout.Vertical
X btnCircleLevel.X - Self.Width - 30
Y (Parent.Height - Self.Height) / 2
Largura sldXValue.Height
Altura sldXValue.Width

Copie e pegue btnXValueOverlay, cambiando o seu nome a btnYValueOverlay, cambiando as seguintes propiedades:

Propiedade Valor
X sldYValue.X
Y sldYValue.Y - sldYValue.HandleSize / 2
Largura sldYValue.Width
Altura sldYValue.Height + sldYValue.HandleSize

Isto completa os elementos visuais similares ao nivel da burbulla.

Probar a aplicación de nivel

Probar a aplicación

Garde e publique a aplicación. Nun dispositivo móbil cos sensores necesarios, abra a aplicación e navegue ata a pantalla cos elementos visuais de nivel de burbulla. Incline o dispositivo de esquerda a dereita, despois cara arriba e abaixo e, finalmente, en todas as direccións, observando os cambios nas propiedades do ángulo, así como os cambios nos elementos visuais. Busque unha superficie en ángulo para colocar o dispositivo e observe de novo os ángulos e os elementos visuais.

Consulte tamén