- У цій статті я розповім, як створити власний пристрій з веб-інтерфейсом, яке буде доступно в локальній...
- Установка і налаштування прошивки
- підключення сенсора
- Програмне забезпечення
- висновок
У цій статті я розповім, як створити власний пристрій з веб-інтерфейсом, яке буде доступно в локальній мережі. Веб-інтерфейс буде показувати поточні дані з датчика Si7021: температуру і вологість.
Пристрій працює на основі мікроконтролера ESP8266 (з Wi-Fi) і прошивки DeviceHive .
Установка і налаштування прошивки
Перш за все, необхідно залити прошивку DeviceHive в отладочную плату. Можна використовувати будь-яку плату ESP8266 з флеш-пам'яттю об'ємом 4 Мбіт (наприклад, з модулем ESP-12E). Досить популярні плати - NodeMCU Development Kit і Adafruit HUZZAH ESP8266 Breakout .
Можна використовувати ці або будь-які інші плати зі схожими характеристиками. Ми для прикладу взяли NodeMCU devkit, оскільки це - найпростіший варіант використання чіпа ESP8266.
- Завантажте з GitHub останній бінарний реліз прошивки .
- Розпакуйте викачаний архів.
- З'єднайте плату NodeMCU з комп'ютером, використовуючи кабель Micro USB (для деяких операційних систем, можливо, знадобиться встановити драйвери).
- Запустіть esp-flasher (з архіву, для вашої ОС) для установки прошивки.
Платі NodeMCU не потрібно використання будь-яких кнопок або роз'ємів для установки прошивки.
Спостерігає скріншот ілюструє успішну заливку прошивки:
Після установки прошивки перезавантажте плату (для цього переподсоедініте плату через USB-порт). Якщо прошивка заливається вперше, на модулі повинен засвітитися синій світлодіод. Якщо прошивка вже встановлювалася раніше, три рази не поспішаючи натисніть кнопку RESET на модулі, повинен включитися синій світлодіод.
Потім візьміть мобільний телефон або ноутбук (c Wi-Fi) і встановіть з'єднання з відкритою бездротової мережі DeviceHive.
Діалог налаштувань мікроконтролера повинен з'явитися на екрані автоматично (в іншому випадку, скористайтеся цим посиланням в браузері).
У діалоговому вікні вкажіть ім'я Wi-Fi мережі (SSID) і пароль. В поле DeviceID введіть climate - це ID служитиме доменною адресою для веб-інтерфейсу пристрою.
Залиште порожніми поля: DeviceHipe API URL і Key.
Якщо ключ був введений (поле Key), буде потрібно авторизація в веб-інтерфейсі (для простоти викладу і коду в статті цей випадок ми не розглядаємо).
Приклад діалогу налаштувань наведено нижче:
Після застосування налаштувань (кнопка Apply), підключіть будь-який пристрій з веб-браузером і підтримкою mDNS (для Windows OS підтримка mDNS може бути додана через стороннє додаток, наприклад, можна використовувати це додаток ).
Якщо підтримка mDNS відсутня, замість локального URL використовуйте IP-адресу мікроконтролера.
Відкрийте веб-браузер за цим посиланням: http: //climate.local . Веб-браузер має показувати дефолтну сторінку.
підключення сенсора
Оскільки сенсор Si7021 використовує інтерфейс I2C, до плати його підключають по чотирьох проводах. Прошивка плати дозволяє використовувати будь-які роз'єми GPIO (для I2C-ліній SDA і SCL). Таким чином, сенсор можна підключити дуже просто.
Підключіть сенсор, як показано на фото:
Ви також можете використовувати з'єднувальні дроти (для навісного монтажу) для підключення сенсора до плати (як показано на фото).
Візьміть до уваги, що висновки плати NodeMCU маркуються префіксом D. Наприклад, маркування D5 відповідає висновку GPIO14 мікроконтролера ESP8266, а D6 відповідає висновку GPIO12 мікроконтролера ESP8266.
Програмне забезпечення
Тепер прийшов час розробити кастомний веб-інтерфейс для нашого пристрою. Ми вже згадували, що прошивка має веб-сторінку ( http: //climate.local ). Є дуже простенький веб-сервер зі сторінкою довідки, демостраніцамі і RESTful API. У нас є чудова можливість завантажити кастомную веб-сторінку у флеш-пам'ять і використовувати наш пристрій з власним кастомними веб-інтерфейсом.
Нижче ми наводимо код, який дозволить зчитувати і відображати дані сенсора.
Хоча код досить простий, давайте все ж розберемо його через підрядник.
Рядки 1-6:
Заголовки файлів, налаштування viewport для мобільних пристроїв, підключення CSS і імпорту JavaScript. Вбудовані сторінки мікропроцесора містять CSS і невелику бібліотеку JavaScript. У нашому прикладі використовуються ці ресурси. Вихідний код доступний тут .
Рядки 7-22:
Простий скрипт, який запускає метод send_command () з вбудованою JavaScript-бібліотеки (libs.js) в циклі (loop) з інтервалом в секунду. Даний метод виконує простий POST-запит до наступного URL: http: //climate.local/api/devices/si7021/read . Цей URL - частина локального RESTful API (центрального процесора).
Ті ж дані можна отримати за допомогою запиту GET в звичайному браузері. Відповідь дається у вигляді JSON, який містить дані сенсора. Значення температури і вологості відображаються на сторінки за допомогою JavaScript.
Рядки 24-40:
Код самої HTML веб-сторінки. Окремі елементи сторінки, такі як логотип DeviceHive, взяті з вбудованих стилів.
Скопіюйте код в буфер обміну і відкрийте редактор сторінки: http: //climate.local/editor.html .
Вставте код в редакторі з буфера обміну.
Натисніть кнопку Flash - тепер наш код включений в прошивку мікропроцесора.
Відкрийте в будь-якому пристрої в мережі Wi-Fi DeviceHive посилання http: //climate.local . Дані сенсора будуть відображатися на сторінці.
висновок
Прошивка DeviceHive дозволяє створювати прості підключення до хмари пристрою. Додатково ви зможете легко додати локальний веб-інтерфейс, який можна використовувати і окремо, і разом з підключенням до хмарного сервісу. Зміст цієї сторінки може бути довільним. Ви можете додавати на сторінку сторонні компоненти (наприклад, D3.js ), Як було зроблено в цьому прикладі , Або відображати дані від декількох сенсорів по локальній мережі.
Детальна документація по прошивці DeviceHive доступна по цим посиланням .