Создание приложения Fridgeye с дисплеем Nextion: пошаговое руководство

Компоненты и материалы

Arduino UNO	1
Фоторезистор	1
Резистор 3,3 кОм	1
Itead Nextion Enhanced 3,5" сенсорный дисплей	1

Приложения и онлайн-сервисы

• Nextion GUI Editor
• Arduino IDE
• GIMP — GNU Image Manipulation Program

О проекте

В июле этого года несколько студентов-дизайнеров из Германии запустили сатирический Kickstarter для прототипирования Fridgeye — красивого датчика света для вашего холодильника. Учитывая, что мы обычно ожидаем безумных аппаратных проектов на Kickstarter, и то, сколько усилий команда вложила в то, чтобы проект выглядел реальным, неудивительно, что люди не знали, что думать. Не секрет, что я был фанатом проекта с самого начала, но не потому, что я умираю от желания узнать, что делает свет в холодильнике. Fridgeye — это идеально ограниченный проект для начала работы с потенциалом для роста, если вы хотите начать заниматься Интернетом вещей.

Сборка устройства Fridgeye

Основная часть этого руководства посвящена запуску приложения Fridgeye с сенсорным дисплеем Nextion, подключенным к Arduino, но сначала нам нужно устройство, способное чувствовать свет. Не проблема. Потратим 5 минут и соберем его. Обещаю, не займет и секунды дольше. Все, что нужно — Arduino, макетная плата, фоторезистор и резистор 3,3 кОм. Соединим их по схеме ниже. Пока не беспокойтесь о подключении экрана. Сосредоточьтесь на Arduino, резисторе и фоторезисторе.

У меня завалялся ProtoShield, поэтому я приклеил мини-макетку на него, чтобы держать всё в одном аккуратном наборном модуле, но сохранить свободу макетной платы. Вот как это выглядит у меня.

Хорошо, я соврал, это заняло около 4 минут. Но оставшуюся минуту можно потратить на загрузку этого сверхпростого скетча в Arduino и наблюдение за последовательным выводом датчика света в Arduino IDE.

void setup() { Serial.begin(9600); }
void loop() {
  int val = analogRead(A0);
  Serial.println(val);
  delay(500);
}

После прошивки Arduino откройте Монитор порта из меню Инструменты. Убедитесь, что скорость передачи установлена на 9600. Вы должны видеть новое целочисленное значение, представляющее уровень освещенности, примерно каждые полсекунды. Поэкспериментируйте: прикройте датчик, включите и выключите свет, посветите фонариком смартфона. Наблюдайте за изменением значений. Вы заметите, что они варьируются от почти 0 в полной темноте до почти 1024 при ярком освещении.

Что такое приложение Fridgeye?

Приложение Fridgeye — верный спутник вашего устройства Fridgeye. Ушли времена, когда устройства работали в одиночку. Все знают, что в современном мире IoT ваш шанс на успех минимален, если у него нет сопутствующего приложения. Это как арахисовое масло и желе, молоко и хлопья, горох и морковь.

Приложение довольно простое. Если заглянуть на страницу Kickstarter, это буквально просто процент света, который обнаруживает Fridgeye, и, кажется, он только 0 или 100 процентов.

Уверен, мы можем сделать лучше и использовать промежуточные 99 значений, чтобы они не чувствовали себя ненужными. Перейдем прямо от концепт-эскизов к реальному миру.

Начало работы с дисплеем Nextion

Для этого проекта я использую сенсорный дисплей Nextion Enhanced 3,5". Это полноценный резистивный сенсорный экран, созданный для снятия нагрузки с графического управления, чтобы даже очень слабые устройства, как Arduino, могли общаться с ним через пару последовательных линий. Хотя сам дисплей очень хорош, документация может быть сложной для навигации, особенно для новичков, поэтому пройдемся по шагам.

Модель программирования дисплея

Если вы когда-нибудь программировали Arduino для работы с дисплеем, вы, вероятно, использовали что-то вроде простой графической библиотеки, абстрагирующей низкоуровневые команды рисования на экране. Хотя такие библиотеки удобны, они все равно требуют много работы по отрисовке пикселей. Дисплеи Nextion используют другой подход, который будет знаком, если вы привыкли к паттернам MVVM или MVC. Суть в том, что внешний вид приложения полностью настраивается заранее и сохраняется на самом экране. Во время выполнения Arduino обращается к элементам UI по заранее присвоенным ID. Arduino также получает информацию от экрана, например, события касания, тем же способом. Это означает, что вместо рисования во время выполнения Arduino выступает лишь дирижером представлений и элементов управления. Если это не совсем понятно, просто потерпите немного, пока мы пройдемся по шагам.

Подготовка представления

Поскольку наше приложение Fridgeye очень простое, ему понадобится только одна страница. Однако дисплей Nextion способен обрабатывать очень сложные приложения со множеством страниц и переходов. Будь вы проектируете простое приложение, как наше, или сложное — вы будете использовать редактор Nextion GUI Editor. Это WYSIWYG-редактор для семейства дисплеев Nextion, который поможет нам идеально настроить макет. Документация и начало работы могут быть сложными для новичков, но как только вы привыкнете, вы будете быстро создавать сложные макеты.

Прежде чем открыть редактор, нам нужно подготовить фоновый ресурс. глядя на наш макет выше, видно, что во время выполнения на дисплее будет меняться только процент обнаруженного света. Логотип, цвет фона и зеленая полоса внизу — статичны. Создадим изображение с этими элементами для использования в качестве фона. Это заняло у меня 5 минут в GIMP и выглядит так.

Важно помнить: изображение должно быть точно такого размера, который нужен для вашего экрана. В моем случае это 3,5" экран, что соответствует 480 x 320 пикселей. Именно такого размера я сделал изображение в GIMP.

Использование редактора Nextion

Примечание: Редактор Nextion требует .NET Framework и официально поддерживается только в Windows. Я запускал его без проблем в виртуальной машине Windows 10 через Parallels на MacBook. В Wine на Linux не тестировал.

Следующие шаги проведут вас через создание макета нашего простого приложения в редакторе Nextion. С открытым редактором выполните:

1. Файл → Создать. Дайте проекту имя и укажите место сохранения.
2. Появится диалог выбора устройства. Я выбрал Enhanced и модель 3,5". НЕ НАЖИМАЙТЕ OK. Переходите к шагу 3.
3. Нажмите вкладку DISPLAY в левом верхнем углу диалога. Выберите направление дисплея 90 Horizontal.
4. Теперь можно нажать OK.
5. Нажмите Picture в Toolbox слева. Добавится элемент p0 в структуру.
6. В панели Picture/Font внизу слева убедитесь, что выбрана вкладка Picture.
7. Нажмите символ +.
8. Перейдите к изображению, созданному в GIMP, которое служит фоном для нашего приложения, и нажмите Открыть.
9. В панели атрибутов справа дважды кликните в область значения атрибута pic. Откроется диалог выбора изображения с нашим фоном.
10. Выберите фон приложения и нажмите OK.
11. Нажмите Text в Toolbox. Добавится текстовая область t0 в левом верхнем углу дисплея. Запишите значение атрибута id — оно понадобится позже при программировании Arduino.
12. Перетащите текстовую область под надпись «Light Status» и растяните её на большую площадь.
13. Чтобы убрать белый фон, нужно сделать фон текстовой области обрезанной версией основного фона. С выделенным t0 измените атрибут sta в панели атрибутов с «solid color» на crop image.
14. Дважды кликните значение атрибута picc для текстовой области t0. Откроется диалог выбора изображения. Снова выберите основное фоновое изображение и нажмите OK. Это сделает фон текстовой области прозрачным.
15. Измените атрибут pco у t0 на желаемый цвет шрифта. Я выбрал пользовательский цвет: Red: 125, Green: 231, Blue: 191.
16. В меню Tools выберите Font Generator.
17. В диалоге создания шрифта выберите высоту 96 и любой понравившийся шрифт. Я использовал Montserrat.
18. Дайте шрифту имя и нажмите Generate Font. Сохраните в удобном месте — понадобится снова.
19. Закройте диалог Font Creator. Вас спросят, хотите ли добавить сгенерированный шрифт. Нажмите Yes. Шрифт теперь доступен под индексом 0.
20. Добавьте тестовый текст в t0, изменив атрибут txt на 100%. Кликните вне области значения атрибута, чтобы редактор обновился.
21. Скорректируйте положение t0 по вкусу.
22. Нажмите Compile на верхней панели инструментов.

Если всё прошло хорошо, у вас появится скомпилированный TFT-файл, готовый к использованию, в папке %AppData%\Nextion Editor\bianyi.

Обновление дисплея

Есть несколько способов загрузить наш новый дизайн на дисплей. Если у вас есть USB-TTL преобразователь, можно подключиться к экрану прямо из Nextion IDE и загрузить скомпилированный TFT-файл. Иначе нужно скопировать TFT-файл на microSD-карту, которую вставляется в слот на задней панели экрана. SD-карта ОБЯЗАТЕЛЬНО должна быть отформатирована в FAT32 и содержать только один TFT-файл, иначе возникнут ошибки. Редактор Nextion помещает успешно скомпилированные файлы в следующую директорию в Windows:

C:\Users\[ваше_имя_пользователя]\AppData\Roaming\Nextion IDE\bianyi\[имя_проекта].tft

Примечание: возможно, нужно включить отображение скрытых файлов, так как папка AppData скрыта.

С TFT-файлом на SD-карте выполните:

• Убедитесь, что дисплей выключен
• Вставьте SD-карту в дисплей
• Включите дисплей. На экране появится процесс обновления.
• После завершения выключите дисплей
• Извлеките SD-карту. Не забудьте этот шаг — экран не запустит ваш вид с картой внутри.
• Включите дисплей снова. Вы должны увидеть наше прекрасное приложение Fridgeye. Единственное, чего не хватает — значения от датчика света.

Научим Arduino говорить на языке Nextion

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

Установка библиотеки Nextion

1. Скачайте последнюю версию библиотеки Nextion для Arduino.
2. Скопируйте всю папку ITEADLIB_Arduino_Nextion в папку библиотек Arduino. В Windows она находится по пути:

   C:\Users\[ваше_имя_пользователя]\Documents\Arduino\libraries
   

   На Mac:

   ~/Documents/Arduino/libraries
   

3. Если используете Arduino Mega — переходите к шагу 7.
4. Если Arduino Uno — откройте файл NexConfig.h в папке ITEADLIB_Arduino_Nextion, которую только что скопировали.
5. Закомментируйте следующие строки:

   #define DEBUG_SERIAL_ENABLE
   #define dbSerial Serial
   

6. Измените #define для nexSerial на Serial вместо Serial2. Это позволит подключить дисплей напрямую к линиям RX и TX на UNO.

   #define nexSerial Serial
   

7. Перезапустите Arduino IDE, если он был открыт. Библиотека станет доступна через меню.
8. В меню Файл выберите Создать для нового скетча.
9. Замените код скетча по умолчанию на следующий:

#include "Nextion.h"
long lastUpdate;
int SENSOR = A0;
NexText t0 = NexText(0, 2, "t0");

void checkSensor() {
  int val = map(analogRead(SENSOR), 0, 1024, 0, 100);
  String displayText = String(val) + "%";
  t0.setText(displayText.c_str());
}

void setup(void) {
  lastUpdate = millis();
  pinMode(SENSOR, INPUT);
  nexInit();
}

void loop(void) {
  nexLoop(NULL);
  if (millis() - lastUpdate > 100) {
    checkSensor();
    lastUpdate = millis();
  }
}

Разбор кода

Если вы понимаете этот скетч — можете пропустить этот раздел. Вы молодец. Если вы новичок в коде Arduino — не пугайтесь. Разберем по кусочкам.

#include "Nextion.h"

Подключаем библиотеку Nextion. Больше ничего не нужно — Arduino IDE знает, где её искать, так как мы положили её в папку libraries.

long lastUpdate;

Переменная lastUpdate для контроля частоты обновления экрана позже в скетче.

int SENSOR = A0;

Даем пину A0 на Arduino более понятное имя для использования в коде. В этом скетче это не критично, так как мы используем только один пин ввода-вывода, но это хорошая привычка — пригодится, когда подключено много устройств.

NexText t0 = NexText(0, 2, "t0");

Создаем объект в скетче, ссылающийся на текстовый элемент, созданный в GUI. Напомню, мы назвали его "t0". Первый аргумент — номер страницы (0 в нашем случае), второй — ID компонента, который мы видели ранее (2). Если забыли записать — вернитесь в редактор Nextion, кликните на элемент t0 и посмотрите ID в панели атрибутов.

void checkSensor() {
  int val = map(analogRead(SENSOR), 0, 1024, 0, 100);
  String displayText = String(val) + "%";
  t0.setText(displayText.c_str());
}

Функция checkSensor() — сердце нашего приложения. В первой строке выполняются две операции. Сначала вызываем analogRead(SENSOR), получая целое число, представляющее напряжение на пине A0 (мы назвали его SENSOR). На Arduino UNO analogRead возвращает значение от 0 до 1024, но нам нужно отобразить это в диапазоне 0–100 процентов. Не проблема — в Arduino IDE есть встроенная функция map(), позволяющая указать значение, диапазон «от» и диапазон «до». Затем преобразуем int в String, добавляем знак %. Последний шаг — вызвать setText() на нашем объекте NexText t0, созданном ранее.

void setup(void) {
  lastUpdate = millis();
  pinMode(SENSOR, INPUT);
  nexInit();
}

Стандартная функция setup Arduino, выполняемая перед остальным кодом. Инициализируем lastUpdate текущим временем через millis(), настраиваем пин A0 как вход и инициализируем библиотеку Nextion.

void loop(void) {
  nexLoop(NULL);
  if (millis() - lastUpdate > 100) {
    checkSensor();
    lastUpdate = millis();
  }
}

В программировании Arduino функция loop() выполняется непрерывно до отключения питания или сброса. Нам нужно постоянно обслуживать библиотеку Nextion вызовом nexLoop(). Параметр NULL означает, что в нашем примере мы не слушаем события касания экрана. Затем простая проверка: прошло ли более 100 миллисекунд с последнего чтения датчика. Если да — вызываем checkSensor() и обновляем lastUpdate текущим временем через millis().

Вот и всё. Менее 30 строк кода — и Arduino взаимодействует с дисплеем Nextion.

Подключение дисплея

Перед подключением дисплея к Arduino загрузим скетч, нажав стрелку вправо на верхней панели или Ctrl+U.

Экран не должен быть подключен во время загрузки, потому что на Arduino UNO те же последовательные линии, которые использует дисплей, нужны IDE для загрузки новых скетчей. Если вы используете Arduino Mega — об этом можно не беспокоиться.

Теперь, когда код загружен, подключаем дисплей. Не забыйте сначала отключить питание от Arduino. Смотрите схему Fritzing для информации о подключении.

Когда включите Arduino обратно, ваше приложение Fridgeye должно радостно показывать текущее показание датчика света.

Заключение

Уф! Мы сделали это. Возможно, вы спрашиваете с ноткой раздражения: «НУ И ЧЕМ ЭТО ПОМОГАЕТ? Я же должен засунуть всё это в холодильник, так что экран даже не увижу». Вы очень проницательный ученик, но я никогда не говорил, что это полезно — просто весело собрать и научиться.

Если хотите пойти дальше — попробуйте развить проект: как поместить датчик в холодильник, а дисплей — снаружи? Способов масса: Wi-Fi, Bluetooth, Zigbee, обычные радиомодули. Много вариантов и многому можно научиться. Если попробуете — пишите мне в Twitter @KevinSidwar или на email (Kevin at sidwar dot com). Мне будет интересно узнать о ваших приключениях в IoT. До встречи, удачи в проектах!

Если вам понравился пост и вы хотите узнать больше о старте в IoT, возможно, вас заинтересует курс, который я сейчас создаю вокруг концепции Fridgeye. Если нет — искренне благодарю за то, что дочитали до конца. Желаю прекрасного дня. Вы его заслуживаете.