Nano 33 IoT + EC / pH / ORP + WebAPK

Об этом проекте

Что мы будем делать?

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

Вы можете получить все это на ufire.co.

Что это за термины?

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

Аппаратное обеспечение

Прежде чем мы сможем собрать оборудование, нужно решить одну вещь. Сенсорные устройства 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.

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

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

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

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

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

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

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

Первое, что нужно изучить - это основы работы BLE.

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

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

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

  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);  

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 (r br />BLE.addService(uFire_Service); 
 rx_Characteristic.setEventHandler (BLEWritten, rxCallback); 
 BLE.advertise ();  

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

  rx_Characteristic.setEventHandler (BLEWritten, rxCallback);  

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

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

Текстовые команды

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

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

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

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

Веб-страница

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

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

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

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

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 =await server.getPrimaryService (this.serviceUuid); 
 характеристика =await service.getCharacteristic (this.txUuid); 
 await feature.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. После того, как прошивка загружена, все подключено и обслуживается веб-страница, вы должны увидеть, что все работает.

Часть PWA

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

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

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

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

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

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

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

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

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

  установлен:function () {
 if ('serviceWorker' в навигаторе) {
 navigator.serviceWorker.register ('service-worker.js'); 
} 
},  

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

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

Если все работает, при переходе на веб-страницу Chrome спросит, хотите ли вы установить его, с помощью всплывающего баннера.

Код

Код создания Arduino

GitHub

Схема