Nano 33 IoT + EC / pH / ORP + WebAPK: 8 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:51

By ufireFollow Другие статьи автора:

О программе: добавьте возможность измерения pH, ОВП, EC или солености в свой проект Arduino или Raspberry Pi. Подробнее о ufire »

Устройство для измерения EC, pH, ОВП и температуры. Его можно использовать для наблюдения за бассейном или гидропоникой. Он будет связываться через Bluetooth Low Energy и отображать информацию на веб-странице с помощью Web Bluetooth. И для удовольствия мы превратим это в прогрессивное веб-приложение, которое вы сможете установить из Интернета.

Шаг 1. Что это за термины?

EC / pH / ORP / температура - одни из наиболее распространенных методов измерения качества воды. Электропроводность (ЕС) используется в гидропонике для измерения питательного раствора, pH для определения кислотности / щелочности воды, а ОВП используется для определения способности воды к дезинфекции

• Bluetooth Low Energy - это беспроводной протокол для простой отправки и получения информации. Плата Arduino, используемая в этом проекте, - это Nano 33 IoT и поставляется с интерфейсами WiFi и BLE.
• Web Bluetooth - это набор API-интерфейсов, реализованных в браузере Google Chrome (и Opera), которые позволяют веб-странице напрямую взаимодействовать с устройством BLE.
• Прогрессивные веб-приложения - это в основном веб-страницы, которые действуют как обычные приложения. Android и iPhone обрабатывают их по-разному, и на настольных компьютерах они разные, поэтому вам нужно немного прочитать, чтобы узнать подробности.

Шаг 2: оборудование

Прежде чем мы сможем собрать оборудование, нужно решить одну вещь. Сенсорные устройства uFire ISE поставляются с одним и тем же адресом I2C, и мы используем два, поэтому необходимо изменить одно. Для этого проекта мы собираемся выбрать одну из плат ISE и использовать ее для измерения ОВП. Следуя приведенным здесь инструкциям, измените адрес на 0x3e.

Теперь, когда адрес изменен, собрать оборудование стало легко. Все сенсорные устройства используют систему подключения Qwiic, поэтому просто соедините все вместе в цепочку. Вам понадобится один провод Qwiic-Male для подключения одного из датчиков к Nano 33. Провода согласованы и имеют цветовую маркировку. Подключите черный цвет к GND Nano, красный к контакту + 3,3 В или + 5 В, синий к контакту SDA, который является A4, и желтый к контакту SCL на A5.

В этом проекте предполагается, что информация о температуре будет поступать от датчика EC, поэтому обязательно прикрепите датчик температуры к плате EC. Однако все платы имеют возможность измерять температуру. Не забудьте прикрепить датчики EC, pH и ORP к соответствующим датчикам. Они легко подключаются с помощью разъемов BNC.

Если у вас есть вольер, было бы неплохо разместить все это внутри, особенно с учетом того, что в нем будет задействована вода.

Шаг 3: Программное обеспечение

Программная часть этого разделена на два основных раздела: прошивка на Nano 33 и веб-страница.

Основной поток таков:

• Веб-страница подключается к Nano через BLE.
• Веб-страница отправляет текстовые команды для запроса информации или выполнения действий.
• Nano прослушивает эти команды, выполняет их и возвращает информацию.
• Веб-страница получает ответы и соответствующим образом обновляет пользовательский интерфейс.

Эта настройка позволяет веб-странице выполнять все требуемые функции, которые вы ожидаете, например выполнять измерения или откалибровать датчики.

Шаг 4: Услуги и характеристики BLE

Одна из первых вещей, которую нужно изучить, - это основы работы BLE.

Аналогий много, так что давайте выберем книгу. Услуга - это книга, а характеристика - это страницы. В этой «книге BLE» страницы имеют несколько свойств, не относящихся к книге, например, возможность изменять то, что написано на странице, и получение уведомления, когда это происходит.

Устройство BLE может предоставлять столько услуг, сколько ему нужно. Некоторые из них предопределены и служат способом стандартизации часто используемой информации, такой как мощность передачи или потеря соединения, для более конкретных вещей, таких как инсулин или пульсоксиметрия. Вы также можете просто сделать один и делать с ним все, что захотите. Они определены в программном обеспечении и идентифицируются с помощью UUID. Здесь вы можете создать UUID.

В прошивке для этого устройства есть одна служба, определяемая как:

BLEService uFire_Service ("4805d2d0-af9f-42c1-b950-eae78304c408");

и две характеристики:

BLEStringCharacteristic tx_Characteristic ("50fa7d80-440a-44d2-967a-ec7731ec736a", BLENotify, 20);

BLEStringCharacteristic rx_Characteristic ("50fa7d80-440b-44d2-967b-ec7731ec736b", BLEWrite, 20);

Tx_Characteristic будет там, где устройства отправляют информацию, такую как измерения EC, для отображения на веб-странице. Rx_Characteristic - это то место, где он будет получать команды с веб-страницы для выполнения.

В этом проекте используется библиотека ArduinoBLE. Если вы посмотрите, вы увидите, что есть пара разных, чтобы объявить характеристику. В этом проекте используется BLEStringCharacteristic, потому что мы будем иметь дело с типом String, и это просто проще, но вы также можете выбрать BLECharCharacteristic или BLEByteCharacteristic из нескольких других.

Кроме того, вы можете дать характеристику некоторым свойствам. tx_Characteristic имеет BLENotify в качестве опции. Это означает, что наша веб-страница получит уведомление, когда ее значение изменится. rx_Characteristic имеет BLEWrite, который позволяет нашей веб-странице изменять его. Есть и другие.

Затем есть немного клея для кода, чтобы связать все это вместе:

BLE.setLocalName ("uFire BLE");

BLE.setAdvertisedService (uFire_Service); uFire_Service.addCharacteristic (tx_Characteristic); uFire_Service.addCharacteristic (rx_Characteristic); BLE.addService (uFire_Service); rx_Characteristic.setEventHandler (BLEWritten, rxCallback); BLE.advertise ();

Это более или менее понятно, но давайте коснемся нескольких моментов.

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

Здесь вы можете получить уведомление об изменении значения. Строка указывает классу выполнить функцию rxCallback при изменении значения.

BLE.advertise ();

это то, с чего все начинается. Устройство BLE периодически отправляет небольшой пакет информации, объявляющий, что он существует и доступен для подключения. Без него он будет невидимым.

Шаг 5: текстовые команды

Как упоминалось ранее, это устройство будет взаимодействовать с веб-страницей с помощью простых текстовых команд. Все это легко реализовать, потому что тяжелая работа уже проделана. Датчики uFire поставляются с библиотекой на основе JSON и MsgPack для отправки и получения команд. Вы можете узнать больше о командах EC и ISE на их страницах документации.

В этом проекте будет использоваться JSON, потому что с ним немного легче работать и читать, в отличие от формата MsgPack, который является двоичным.

Вот пример того, как все это взаимосвязано:

• Веб-страница запрашивает у устройства измерение EC, отправляя ec (или, более конкретно, записывая ec в характеристику rx_Characteristic).
• Устройство получает команду и выполняет ее. Затем он отправляет ответ в формате JSON {"ec": 1.24}, записывая в характеристику tx_Characteristic.
• Веб-страница получает информацию и отображает ее

Шаг 6. Веб-страница

Веб-страница этого проекта будет использовать Vue.js для интерфейса. Бэкэнд не нужен. Кроме того, чтобы упростить задачу, система сборки не используется. Он разделен на обычные папки: js для javascript, css для CSS, активы для значков. В html-коде нет ничего особенного. Он использует bulma.io для стилизации и создает пользовательский интерфейс. Вы многое заметите в этом разделе. Он добавляет все CSS и значки, но в частности добавляет одну строку.

Это загружает наш файл manifest.json, благодаря которому происходит все, что связано с PWA. Он объявляет некоторую информацию, которая сообщает нашему телефону, что эту веб-страницу можно превратить в приложение.

В javascript происходит больше всего интересного. Он разбит на файлы, app.js содержит основы создания веб-страницы Vue вместе со всеми переменными, связанными с пользовательским интерфейсом, и некоторыми другими вещами. В ble.js есть Bluetooth.

Шаг 7. Javascript и веб-Bluetooth

Во-первых, это работает только в Chrome и Opera. Я бы хотел, чтобы другие браузеры поддерживали это, но по какой-то причине они этого не делают. Взгляните на app.js, и вы увидите те же UUID, которые мы использовали в нашей прошивке. Один для службы uFire и по одному для характеристик tx и rx.

Теперь, если вы заглянете в ble.js, вы увидите функции connect () и disconnect ().

Функция connect () содержит некоторую логику для синхронизации пользовательского интерфейса, но в основном она настраивает вещи для отправки и получения информации о характеристиках.

При работе с Web Bluetooth есть некоторые особенности. Соединение должно быть инициировано каким-либо физическим взаимодействием с пользователем, например, нажатием кнопки. Вы не можете программно подключиться, например, когда веб-страница загружена.

Код для запуска соединения выглядит так:

this.device = await navigator.bluetooth.requestDevice ({

фильтры: [{namePrefix: "uFire"}], optionalServices: [this.serviceUuid]});

Раздел filter: и optionalServices необходим, чтобы не видеть каждое отдельное устройство BLE. Вы могли бы подумать, что подойдет только фильтрующая секция, но вам также понадобится часть optionalServices.

Приведенный выше код покажет диалоговое окно подключения. Это часть интерфейса Chrome и не может быть изменена. Пользователь выберет из списка. Даже если существует только одно устройство, к которому приложение когда-либо подключается, пользователю все равно необходимо пройти через это диалоговое окно выбора из соображений безопасности.

Остальной код настраивает сервис и характеристики. Обратите внимание, что мы настроили процедуру обратного вызова, аналогичную обратному вызову уведомления прошивки:

service = ожидание server.getPrimaryService (this.serviceUuid);

характеристика = ожидание service.getCharacteristic (this.txUuid); ждать характеристику.startNotifications (); характеристика.addEventListener ("характеристика_значениеизменено", this.value_update);

this.value_update теперь будет вызываться каждый раз, когда появляется новая информация о характеристиках tx.

Одна из последних вещей, которые он делает, - это установка таймера для обновления информации каждые 5 секунд.

value_update () - это просто длинная функция, которая ожидает поступления новой информации JSON и обновляет ею пользовательский интерфейс.

ec.js, ph.js и orp.js содержат множество небольших функций, которые отправляют команды для получения информации и калибровки устройств.

Чтобы попробовать это, вам нужно иметь в виду, что для использования Web Bluetooth он должен обслуживаться через HTTPS. Один из многих вариантов локального HTTPS-сервера - serve-https. После того, как прошивка загружена, все подключено и обслуживается веб-страница, вы должны увидеть, что все работает.

Шаг 8: Часть PWA

Есть несколько шагов, чтобы превратить веб-страницу в настоящее приложение. Прогрессивные веб-приложения могут намного больше, чем их использует этот проект.

• Установка веб-страницы
• После установки возможен автономный доступ
• Запускается и работает как обычное приложение с обычным значком приложения.

Для начала нам нужно будет сгенерировать кучу файлов. Первый - это файл manifest.json. Есть несколько сайтов, которые сделают это за вас, и App Manifest Generator - один из них.

Пара вещей, которые нужно понять:

• Область применения важна. Я разместил эту страницу по адресу ufire.co/uFire-BLE/. Это означает, что область моего приложения - / uFire-BLE /.
• Начальный URL тоже важен. Это путь к вашей конкретной веб-странице с уже предполагаемым базовым доменом. Так как я разместил это на ufire.co/uFire-BLE/, начальный URL-адрес тоже / uFire-BLE /.
• Режим отображения будет определять, как выглядит приложение, в автономном режиме оно будет выглядеть как обычное приложение без каких-либо кнопок или интерфейса Chrome.

В итоге вы получите файл json. Он должен быть размещен в корне веб-страницы вместе с index.html.

Следующее, что вам понадобится, это Service Worker. Опять же, они могут многое, но этот проект будет использовать кеширование только для того, чтобы обеспечить доступ к этому приложению в автономном режиме. Реализация сервис-воркера в основном шаблонная. Этот проект использовал пример Google и изменил список файлов для кеширования. Вы не можете кэшировать файлы за пределами вашего домена.

Перейдите в FavIcon Generator и сделайте несколько значков.

Последнее, что нужно добавить - добавить код в функцию Vue mount ().

установлен: функция () {если ('serviceWorker' в навигаторе) {navigator.serviceWorker.register ('service-worker.js'); }}

Это зарегистрирует воркера в браузере.

Вы можете проверить, все ли работает, а если нет, то, возможно, выяснить, почему, используя Lighthouse, он проанализирует сайт и расскажет вам разные вещи.

Если все сработало, при переходе на веб-страницу Chrome спросит, хотите ли вы установить его, с помощью всплывающего баннера. Вы можете увидеть это в действии на ufire.co/uFire-BLE/, если вы используете мобильный Chrome. Если вы находитесь на рабочем столе, вы можете найти пункт меню для его установки.