Створення програми, що використовує датчики мобільних пристроїв
Датчики дають змогу додати розширені функціональні можливості до програм, використовуючи можливості телефону. У цій статті описано використання датчиків на мобільному пристрої в межах Power Apps.
Для цього ми створимо програму-зразок із двома екранами. На першому екрані відображатиметься поточний напрямок компаса, широта, довгота, висота, а також скануватимуться мітки NFC для отримання текстової інформації. Другий екрані демонструватиме, як відобразити дані акселерометра, щоб вирахувати кут пристрою вздовж осей X і Y.
Щоб налаштувати сценарій за першим екраном, уявіть, що розробляєте програму для квестів на основі NFC. Кожен учасник використовуватиме програму, щоб просканувати мітку NFC, яка надасть їм напрямок компаса, широту та довготу, які вказуватимуть на наступне місце призначення. У цьому місці учасник просканує іншу мітку і повторюватиме процес, доки не досягне кінця квесту.
Для другого екрана уявіть, що вам потрібен інструмент грубого вимірювання кутів. На другому екрані учасник зможе покласти або тримати пристрій на поверхні, та отримати кути на осі X і Y пристрою, а також переглянути візуальне відображення цих кутів.
Перегляньте це відео та дізнайтеся, як створити програму з датчиками мобільних пристроїв.
вимоги
Для цієї програми можна використовувати будь-який рівень ліцензії Power Apps, оскільки не використовуються підключення даних.
Необхідний мобільний пристрій, (наприклад, мобільний телефон або планшет) з можливостями GPS і акселерометра, оскільки більшість ПК, можуть не мати необхідних датчиків.
Для функції сканування NFC потрібен пристрій з підтримкою NFC. Крім того, вважається, що мітки NFC, які треба сканувати, було попередньо налаштовано на видачу текстових значень у наведеному нижче форматі-прикладі.
"<b>Heading: </b> 80 degrees <br> <b>Latitude: </b> 44.4604788 <br> <b>Longitude: </b> -110.82813759"Це надасть текст у зрозумілому для HTML форматі для програми. Встановлення міток NFC виходить за рамки цієї статті, і за необхідності елементи NFC можна пропустити. Ми зосередимось на використанні датчиків мобільних пристроїв у Power Apps.
Додавання заголовка та тексту HTML для результатів датчиків пристрою
Надпис заголовка
Коли програма відкрита для редагування в Power Apps, додайте Текстовий надпис на екран, перетягнувши його з області Вставлення. Розташуйте його у верхньому лівому куті екрана та змініть наведені нижче властивості в області "Властивості":
| Властивість | Значення |
|---|---|
| Text | "Квест" |
| Розмір шрифту | 24 |
| Товщина шрифту | FontWeight.Semibold |
| Вирівнювання тексту | Вирівняти по центру |
| За шириною | Parent.Width |
Потім в області Додаткові параметри змініть такі властивості:
| Властивість | Значення |
|---|---|
| Колір | RGBA (255, 255, 255, 1) |
| Заповнити | RGBA (56, 96, 178, 1) |
Це створить заголовок для екрану.
Текст HTML для результатів датчиків пристрою
Додайте елемент керування Текст HTML. Він використовуватиметься для відображення всіх результатів датчиків пристрою в одному місці. Використайте цей код у властивості 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"
В області "Додаткові параметри", змініть такі властивості:
| Властивість | Значення |
|---|---|
| Розмір | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| За шириною | 560 |
| За висотою | 576 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Якщо розглянути вміст HtmlText, можна помітити, що використовуються два типи датчиків.
По-перше, датчик Компас, який використовує властивість Напрямок для надання напрямку компаса з пристрою.
По-друге, сенсор Розташування, який надає Широту, Довготу та Висоту. Щодо розташування є два зауваження. По-перше, якщо використовувати лише Розташування без оператора та властивості крапки, ви отримаєте запис із полями для Широти, Довготи та Висоти. По-друге, властивість "Висота" за замовчуванням надається в метрах. Щоб перетворити це на фути, замініть вказану нижче формулу:
Використання метрів:
Round(Location.Altitude, 2) & " m"
Використання футів:
Round(Location.Altitude \* 3.2808, 2) & " ft"
Примітка
У разі попереднього перегляду програми в межах Power Apps Studio багато властивостей датчиків можуть працювати неправильно. Щоб працювати з властивостями датчиків для тестування, краще використовуйте мобільний телефон.
Тепер розташуйте елемент керування Текст HTML у нижній половині екрана.
Додавання кнопки для сканування NFC і елемента керування "Текст HTML"
Кнопка сканування NFC
Додайте кнопку до програми, розташувавши її під елементом керування Текст HTML, який ви додали на попередньому кроці, і змініть наведені нижче властивості в області «Розширені параметри»:
| Властивість | Значення |
|---|---|
| OnSelect | ClearCollect(colNFCScan, ReadNFC()) |
| Text | "Сканувати мітку NFC" |
Код у властивості OnSelect використовує функцію ReadNFC(), яка активує пристрій для читання NFC. Потім він зберігає зчитане з мітки NFC у колекції під назвою colNFCScan. У цій колекції будуть чотири поля: RTD, Текст, TNF, та URI. Хоча повне пояснення цих полів виходить за рамки цієї статті, буде корисно пояснити дещо. TNF означає Формат імені типу і використовується для визначення структури Визначення типу запису або RTD, який, у свою чергу, визначає тип запису, що міститься в полях Текст та/або URI. URI — це Єдиний ідентифікатор ресурсу, який є по суті адресою ресурсу. Для міток NFC, які використовуються в цьому прикладі, окрім поля Текст, яке містить приклад тексту з вступу в цей розділ, вони міститимуть значення TNF — 1, значення RTD — T і пусте значення URI.
Додавання елемента керування «Текст HTML» для відображення інформації сканування NFC
Додайте другий елемент керування Текст HTML і використайте у властивості HTMLText наведену нижче формулу:
"<b><u>Next Destination</u></b><br>
<br>" &
First(colNFCScan).Text
В області "Додаткові параметри", змініть такі властивості:
| Властивість | Значення |
|---|---|
| Розмір | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| За шириною | 560 |
| За висотою | 248 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Без даних NFC елемент керування відображатиме Наступний пункт призначення. Після сканування мітки NFC відобразиться Наступний пункт призначення, а потім – дані поля Текст в даних, отриманих під час сканування.
Якщо дані для міток NFC були налаштовані, як описано у вступі, користувач побачить наступний напрямок компаса, широту та довготу для наступного розташування квесту після сканування однієї з цих міток.
Перевірка програми
Збережіть та опублікуйте програму. Відкрийте програму на мобільному пристрої з необхідними датчиками та спостерігаєте за значеннями напрямку компаса, широти, довготи та висоти. Спробуйте походити, повертаючись в різні боки, щоб побачити зміни в різних показниках датчиків.
Натисніть кнопку Сканувати мітку NFC, щоб побачити за елемент керування зчитувача NFC. Якщо у вас є мітка NFC, яка може надати текстове значення, проскануйте мітку, щоб переглянути текст у програмі. Якщо немає, натисніть Скасувати.
Додавання та налаштування другого екрана
Додайте новий Порожній екран для частини програми, що вимірюватиме кути.
Після додавання екрана поверніться на перший екран і додайте піктограму зі стрілкою Наступний з меню + Вставити > Піктограми > виберіть піктограму стрілки Наступний. Розташуйте її у верхньому правому куті екрана та змініть наведені нижче властивості в області "Додаткові параметри":
| Властивість | Значення |
|---|---|
| OnSelect | Navigate(Screen2) |
| Колір | RGBA (255, 255, 255, 1) |
Якщо ви перейменували щойно доданий другий екран, замініть це ім'я на Screen2 у функції Перейти.
Попередньо перегляньте програму, та натисніть щойно додану піктограму, щоб впевнитись, що вона переміщує вас на щойно доданий пустий екран.
Додавання конфігурації для кутів Х і Y
Додайте Текстовий надпис на екран, перетягнувши його з області Вставлення. Розташуйте його у верхньому лівому куті екрана та змініть наведені нижче властивості в області Властивості:
| Властивість | Значення |
|---|---|
| Text | «2-осьовий ватерпас» |
| Розмір шрифту | 24 |
| Товщина шрифту | FontWeight.Semibold |
| Вирівнювання тексту | Вирівняти по центру |
| За шириною | Parent.Width |
Потім в області "Додаткові параметри" змініть такі властивості:
| Властивість | Значення |
|---|---|
| Колір | RGBA (255, 255, 255, 1) |
| Заповнити | RGBA (56, 96, 178, 1) |
Це створить заголовок для другого екрану.
Потім додайте піктограму зі стрілкою Назад з меню + Вставити > Піктограми > вибрати піктограму Стрілка Назад. Розташуйте її у верхньому лівому куті екрана та змініть наведені нижче властивості в області Додаткові параметри:
| Властивість | Значення |
|---|---|
| OnSelect | Navigate(Screen1) |
| Колір | RGBA (255, 255, 255, 1) |
Якщо ви перейменували щойно доданий перший екран, замініть це ім'я на Screen1 у функції Перейти.
Нарешті, додайте елемент керування Текст HTML. Він використовуватиметься для відображення всіх результатів датчиків пристрою в одному місці. У властивості "Текст 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>"
У вкладці "Додаткові параметри", змініть такі властивості:
| Властивість | Значення |
|---|---|
| Розмір | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| За шириною | 560 |
| За висотою | 168 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Розташуйте цей елемент керування у верхній частині екрана програми.
Якщо розглянути вміст HtmlText, можна помітити, що в ньому використовується сенсор Прискорення із властивостями X і Y. Існує також властивість Z, яка не використовується в цьому сценарії.
Цей датчик виявляє гравітаційні сили, що діють на пристрій в трьох площинах. На прикладі мобільного телефону, уявіть лінію, що виходить з боків телефону. Це площина X. Піднявши правий бік телефону ви створюєте додатне значення, а піднявши лівий бік створюєте від'ємне значення. Лінія, що виходить верху та знизу телефону позначає площину Y. Піднявши верх телефону ви створюєте додатне значення, а піднявши низ створюєте від'ємне значення. Нарешті, лінія, що виходить з екрану та задньої панелі телефону позначає площину Z. Повернувши екран догори ви створюєте додатне значення, а повернувши його донизу створюєте від'ємне значення.
Акселерометр вимірює сили, які діють на пристрій, як під час руху, наприклад, якщо ви впустили пристрій, та в стані спокою, наприклад нахил пристрою за одною або кількома описаними раніше осями. В стані спокою теоретичні значення мають бути від 0 до +/- 9,81 м/с2, де 0 вказує на те, що відносна вісь паралельна до Землі, та гравітація не діє на датчик, а значення 9,81 вказує на те, що відносна вісь перпендикулярна до Землі, а на датчик діє повна сила гравітації.
Розгляньте код в щойно доданому елементі керування Текст HTML та зверніть увагу на наступний розділ:
Abs(Round(Acceleration.X * (90 / 9.81), 0))
У цій формулі, починаючи зсередини, Прискорення на площині X множиться на (90 / 9,81). Для перетворення показника датчика у градуси використовується теоретичне максимальне значення стану спокою. Значення становить 90, оскільки при максимальному теоретичному значенні пристрій буде перпендикулярним до Землі на цій площині, що дає значення в 90 градусів.
Потім це значення у градусах округлюється до нуля десяткових розрядів, щоб надати ціле число градусів. Нарешті, абсолютне значення округленого числа обчислюється, щоб дати додатній результату. Завдяки цьому не має значення, чи кут вимірюється з однієї чи іншої сторони.
Примітка
Значення вище приблизні і не відповідають точним вимірюванням.
Додавання графічного відображення ватерпаса
На цьому кроці ми використаємо деякі елементи керування в нетрадиційний спосіб для досягнення візуальної цілі.
Кругле графічне відображення, схоже на ватерпас
Для початку, додайте на екран елемент керування Кнопка, перейменуйте його на btnCircleLevel і змініть такі властивості в області Додаткові параметри:
| Властивість | Значення |
|---|---|
| Text | "" |
| BorderColor | RGBA (56, 96, 178, 1) |
| FocusedBorderThickness | 2 |
| Заповнити | Прозорий |
| DisabledFill | Self.Fill |
| X | (Parent.Width - Self.Width) / 2 |
| Y | (Parent.Height - Self.Height) / 2 |
| За шириною | 400 |
| За висотою | Self.Width |
Результатом цих змін стане кругла кнопка в центрі екрана, яку не можна натиснути, оскільки вона вимкнена.
Потім додайте форму Коло, встановіть для нього радіус межі 400 і змініть такі властивості в області Додатково
| Властивість | Значення |
|---|---|
| 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) |
| За шириною | 42 |
| За висотою | Self.Width |
| За шириною | 400 |
| За висотою | Self.Width |
Властивості X і Y дозволяють формі Коло рухатися по центру екрана програми відносно зміни значень датчика Прискорення, але в межах круглої області btnCircleLevel.
Графічні відображення, схожі на ватерпасі для осей X і Y
Додайте на екран елемент керування Повзунок, перейменуйте його на sldXValue, і змініть такі властивості в області Додаткові параметри:
| Властивість | Значення |
|---|---|
| Мінім. | -90 |
| Максимальна | 90 |
| Стандарт | Round(Acceleration.X * (90 / 9,81), 0) |
| ValueFill | Self.RailFill |
| X | (Parent.Width - Self.Width) / 2 |
| Y | btnCircleLevel.Y + btnCircleLevel.Height + 30 |
| За шириною | btnCircleLevel.Width |
| За висотою | 70 |
Цей елемент керування Повзунок відображатиме кут так само, як ватерпас. Курсор переміщатиметься в бік піднятої сторони пристрою, аналогічно бульбашці у ватерпасі.
Далі, скопіюйте btnCircleLevel, виділивши його, натиснувши клавіші Ctrl + C, а потім Ctrl + V. Перейменуйте елемент керування на btnXValueOverlay і змініть такі властивості в області Додаткові параметри:
| Властивість | Значення |
|---|---|
| X | sldXValue.X - sldXValue.HandleSize / 2 |
| Y | sldXValue.Y |
| За шириною | sldXValue.Width + sldXValue.HandleSize |
| За висотою | sldXValue.Height |
Ці зміни розташують його над елементом керування sldXValue, що не дозволить користувачу змінювати його значення і надасть візуальну межу.
Скопіюйте та вставте sldXValue за допомогою того самого методу, яким копіювали btnCircleLevel. Перейменуйте його на sldYValue і змініть такі властивості:
| Властивість | Значення |
|---|---|
| Макет | Layout.Vertical |
| X | btnCircleLevel.X - Self.Width - 30 |
| Y | (Parent.Height - Self.Height) / 2 |
| За шириною | sldXValue.Height |
| За висотою | sldXValue.Width |
Скопіюйте та вставте btnXValueOverlay, перейменуйте його в btnYValueOverlay, змінивши такі властивості:
| Властивість | Значення |
|---|---|
| X | sldYValue.X |
| Y | sldYValue.Y - sldYValue.HandleSize / 2 |
| За шириною | sldYValue.Width |
| За висотою | sldYValue.Height + sldYValue.HandleSize |
Графічні відображення, схожі на ватерпаси, завершені.
Тестування програми-ватерпаса
Збережіть та опублікуйте програму. На мобільному пристрої з необхідними датчиками відкрийте програму та перейдіть на екран з графічні відображеннями-ватерпасами. Нахиліть пристрій зліва направо, потім вгору та вниз, і, нарешті, у всіх напрямках, звертаючи увагу на зміни у властивостях кутів, а також зміни графічних відображень. Знайдіть похилу поверхню, на яку можна покласти пристрій, і знову зверніть увагу на кути та графічні елементи.