Дисплей Nextion с Arduino – начало работы
Эта статья представляет собой введение в работу с дисплеем Nextion и Arduino. Мы покажем вам, как настроить дисплей в первый раз, загрузить необходимые ресурсы и как интегрировать его с платой Arduino UNO. Мы также создадим простой графический пользовательский интерфейс для управления пинами Arduino.
Смотрите видеодемонстрацию
Если вы хотите посмотреть различные дисплеи Nextion и найти лучшую цену, перейдите на Maker Advisor, чтобы прочитать наш обзор.
Знакомство с дисплеем Nextion
Nextion – это решение для создания человеко-машинного интерфейса (HMI). Дисплеи Nextion – это резистивные сенсорные экраны, которые позволяют легко создавать графический пользовательский интерфейс (GUI). Это отличное решение для мониторинга и управления процессами, которое в основном применяется в IoT-приложениях.
Существует несколько модулей дисплеев Nextion с размерами от 2,4» до 7».
Nextion имеет встроенный микроконтроллер ARM, который управляет дисплеем, например, он отвечает за генерацию кнопок, создание текста, хранение изображений или изменение фона. Nextion связывается с любым микроконтроллером по последовательному интерфейсу (serial) на скорости 9600 бод.
Таким образом, он работает с любой платой, имеющей возможности последовательной связи, такой как Arduino, Raspberry Pi, ESP8266, ESP32 и так далее.
Для проектирования GUI вы используете Nextion Editor, в котором можно легко добавлять кнопки, индикаторы, прогресс-бары, текстовые метки и многое другое в пользовательский интерфейс. У нас дисплей Nextion 2.8» базовой модели, который показан на следующем рисунке.
Где купить дисплей Nextion
Вы можете приобрести базовую модель Nextion или улучшенную модель Nextion. Улучшенная модель Nextion имеет новые функции по сравнению с базовой моделью:
имеет встроенные часы реального времени (RTC)
поддерживает сохранение данных во flash-память
поддерживает GPIO
имеет большую ёмкость flash-памяти и более высокую тактовую частоту процессора
Лучшая модель для вас будет зависеть от ваших потребностей. Если вы только начинаете работу с Nextion, мы рекомендуем приобрести модель размером 3.2», которая используется в примерах Nextion Editor (примеры также работают с другими размерами, но вам нужно будет внести некоторые изменения). Кроме того, это наиболее используемый размер, что означает больше примеров с открытым исходным кодом и ресурсов для этого размера.
Вы можете посетить сайт Maker Advisor, чтобы получить дисплей Nextion по лучшей цене – просто перейдите по ссылкам ниже:
Установка Nextion Editor
Чтобы начать работу с Nextion, сначала необходимо установить Nextion Editor. Перейдите на https://nextion.itead.cc/, выберите вкладку Resources, Download > Nextion Editor и установите Nextion Editor. Вы можете скачать либо файл .zip, либо файл .exe.
Загрузка библиотек Nextion
Перед началом работы вам также необходимо установить библиотеки Nextion для Arduino IDE. Выполните следующие шаги для установки библиотеки:
Нажмите здесь, чтобы скачать библиотеку Nextion для Arduino – ITEADLIB_Arduino_Nextion. У вас должен появиться файл .zip в папке Downloads.
Распакуйте файл .zip, и вы должны получить папку ITEADLIB-Arduino-Nextion-master.
Переименуйте папку из ITEADLIB_Arduino_Nextion-master в ITEADLIB_Arduino_Nextion.
Переместите папку ITEADLIB_Arduino_Nextion в папку libraries вашей Arduino IDE.
Наконец, перезапустите Arduino IDE.
Настройка библиотеки для Arduino UNO
Эта библиотека настроена для Arduino MEGA2560 по умолчанию. Чтобы она работала с Arduino Uno, вам нужно сделать следующее:
Откройте папку ITEADLIB_Arduino_Nextion
Там должен быть файл NexConfig.h – откройте его.
Закомментируйте строку 27, чтобы она выглядела следующим образом:
//#define DEBUG_SERIAL_ENABLE
Закомментируйте строку 32:
//#define dbSerial Serial
Измените строку 37 так, чтобы у вас было следующее:
#define nexSerial Serial
Сохраните файл NexConfig.h.
Вот конечный результат:
Теперь вы готовы начать экспериментировать с дисплеем Nextion и Arduino UNO.
Подключение дисплея Nextion к Arduino
Подключение дисплея Nextion к Arduino очень простое. Вам нужно сделать всего четыре соединения: GND, RX, TX и +5V. Эти пины обозначены на задней стороне вашего дисплея, как показано на рисунке ниже.
Распиновка дисплея Nextion
Вот как следует подключить дисплей Nextion:
Nextion |
Подключение к |
|---|---|
GND |
GND |
RX |
Arduino пин 1 (TX) |
TX |
Arduino пин 0 (RX) |
VCC |
5V |
Вы можете питать дисплей Nextion напрямую от пина 5V Arduino, но это не рекомендуется. Работа с недостаточным питанием может повредить дисплей. Поэтому следует использовать внешний источник питания. Используйте адаптер питания 5V/1A с кабелем micro USB. Вместе с дисплеем Nextion вы также получите переходник USB на 2-пиновый разъём, удобный для подключения адаптера питания к дисплею.
Вот схема, которую нужно использовать для подключения дисплея к Arduino.
Обзор проекта
Лучший способ познакомиться с новым программным обеспечением и новым устройством – сделать пример проекта. Здесь мы создадим пользовательский интерфейс в дисплее Nextion для управления пинами Arduino и отображения данных.
Вот функции приложения, которое мы будем создавать:
Пользовательский интерфейс имеет две страницы: одна управляет двумя светодиодами, подключёнными к пинам Arduino, а другая показывает данные с датчика температуры и влажности DHT11;
Первая страница имеет одну кнопку для включения светодиода, другую кнопку для выключения светодиода, метку, показывающую текущее состояние светодиода;
Эта первая страница также имеет ползунок для управления яркостью другого светодиода;
Вторая страница показывает текущую температуру в текстовой метке и текущую влажность в прогресс-баре;
На этой странице есть кнопка обновления для обновления показаний.
Необходимые компоненты
Вот необходимые компоненты для этого проекта:
Arduino UNO – ознакомьтесь с лучшими стартовыми наборами Arduino
Вы можете использовать ссылки выше или перейти непосредственно на MakerAdvisor.com/tools, чтобы найти все компоненты для ваших проектов по лучшей цене!
Схема проекта
Вот схема, которую нужно использовать для завершения этого проекта.
Ресурсы проекта
Мы не будем пошагово рассматривать, как создать GUI в дисплее Nextion. Но мы покажем вам, как создать наиболее важные части, чтобы вы научились создавать пользовательский интерфейс. После следования инструкциям вы сможете самостоятельно завершить пользовательский интерфейс.
Кроме того, мы предоставляем все ресурсы, необходимые для завершения этого проекта. Вот все ресурсы, которые вам понадобятся (обратите внимание, что вам может потребоваться изменить некоторые настройки пользовательского интерфейса в соответствии с размером вашего дисплея):
Файл .HMI (этот файл можно импортировать в Nextion Editor для редактирования GUI);
Фоновое изображение, используемое в пользовательском интерфейсе, также должно находиться в папке проекта;
Файл .TFT (этот файл следует загрузить на дисплей Nextion, это файл, который дисплей выполняет);
Файл .ino (этот файл следует загрузить на вашу плату Arduino).
Общий обзор Nextion Editor
Вот краткий обзор различных разделов Nextion Editor.
Главное меню
Холст (Canvas) – здесь вы добавляете компоненты для создания пользовательского интерфейса.
Панель инструментов (Toolbox) – здесь находится широкий выбор компонентов, которые можно добавить в пользовательский интерфейс, такие как изображения, прогресс-бары, кнопки, ползунки и многое другое.
Список изображений/шрифтов – здесь отображаются шрифты и изображения, импортированные в ваш проект. Здесь также можно добавлять новые шрифты и изображения.
Область страниц – здесь вы можете управлять своими страницами, например добавлять, копировать и удалять страницы.
Область атрибутов – эта часть показывает атрибуты вашего компонента. Вы можете редактировать атрибуты компонента здесь.
Окно вывода компилятора – здесь отображаются любые ошибки, возникшие при компиляции.
Окно событий – здесь вы можете добавить код, который будет выполняться при наступлении события.
Создание нового проекта в Nextion Editor
Откройте Nextion Editor и перейдите в File > New, чтобы создать новый файл. Дайте ему имя и сохраните. Затем появится окно для выбора вашей модели Nextion, как показано на рисунке ниже.
Или вы можете импортировать файл .HMI для этого проекта.
Если вы выберете вкладку Display, вы также сможете задать ориентацию дисплея.
Для этого примера мы выбрали горизонтальную ориентацию.
После выбора дисплея и ориентации просто нажмите кнопку Ok. Новый проект в Nextion Editor должен открыться.
Добавление фонового изображения
Мы начнём с добавления фонового изображения. Чтобы использовать изображение в качестве фона, оно должно иметь точно такие же размеры, как ваш дисплей Nextion. Мы используем дисплей 2.8», поэтому фоновое изображение должно быть 240x320 пикселей. Проверьте размеры вашего дисплея и отредактируйте фоновое изображение соответствующим образом. В качестве примера мы используем следующее изображение:
После того как ваше фоновое изображение будет иметь правильные размеры, следуйте следующим инструкциям:
1. В левом нижнем углу дисплея Nextion есть окно для шрифтов и изображений. Выберите вкладку Picture.
2. Нажмите кнопку (+) и выберите ваше фоновое изображение. Изображение будет добавлено в список изображений и ему будет присвоен id. В данном случае это 0.
3. Перейдите в панель инструментов и нажмите на компонент Picture. Он будет автоматически добавлен в область вашего дисплея.
4. Выбрав этот компонент, вы должны увидеть его атрибуты в области атрибутов. Вы можете дважды щёлкнуть по атрибутам, чтобы отредактировать их. Дважды щёлкните по атрибуту pic, чтобы выбрать нужное изображение. Вы должны написать «0», что является индексом нужного изображения, или выбрать изображение в новом появившемся окне. После ввода «0» вам нужно нажать ENTER, чтобы сохранить изменения.
Добавление шрифтов
Чтобы писать текст на дисплее, вам нужно сгенерировать шрифт в Nextion Editor. Перейдите в Tools > Font Generator. Должно открыться новое окно.
Здесь вы можете выбрать высоту шрифта, тип, интервал и хотите ли вы сделать его жирным или нет. Дайте ему имя и нажмите кнопку Generate font. После этого сохраните файл .zi и добавьте сгенерированный шрифт, нажав yes.
Шрифт будет добавлен в библиотеку шрифтов в левом нижнем углу и ему будет присвоен индекс. Так как это ваш первый шрифт, он будет иметь индекс 0.
Примечание
На момент написания этих инструкций существует проблема с типами шрифтов. Какой бы тип шрифта вы ни выбрали, он всегда будет выглядеть одинаково. Тем не менее, вы можете изменить размер шрифта и сделать его жирным или нет.
Добавление текстовых меток, ползунков и кнопок
На данный момент вы можете начать добавлять компоненты в область дисплея. Для нашего проекта перетащите три кнопки, две метки и один ползунок, как показано на рисунке ниже. Отредактируйте их внешний вид по своему вкусу.
Все компоненты имеют атрибут, называемый objname. Это имя компонента. Давайте хорошие имена вашим компонентам, потому что они понадобятся вам позже для кода Arduino. Также обратите внимание, что каждый компонент имеет один номер id, который уникален для этого компонента на данной странице. На рисунке ниже показаны objname и id для ползунка.
Вы можете редактировать компоненты как хотите, но обязательно установите maxval ползунка в 255, чтобы он работал с кодом Arduino, который мы будем использовать.
Сенсорные компоненты
Вы должны вызвать событие для сенсорных компонентов (кнопок и ползунка), чтобы Arduino знал, что компонент был нажат. Вы можете вызывать события при нажатии или при отпускании компонента.
Здесь мы будем вызывать событие при отпускании нажатия. Это событие просто отправит ID компонента, который был нажат.
Для этого выберите одну из кнопок и в окне событий выберите вкладку Touch Release Event и поставьте галочку на параметре Send Component ID. Повторите этот процесс для другой кнопки и ползунка.
Создание и навигация на новую страницу
Добавление новых страниц в ваш GUI действительно просто. В правом верхнем углу, в области страниц, нажмите кнопку Add, чтобы добавить новую страницу. Будет создана новая страница. В данном случае – page1.
Для навигации с одной страницы на другую мы добавили кнопку на каждой странице в правом нижнем углу – в данном случае она называется bNext.
Чтобы эта кнопка перенаправляла на page1, вам нужно добавить следующее в окно событий, в раздел пользовательского кода (как выделено красным ниже).
Если вы хотите перенаправить на другую страницу, вам просто нужно изменить пользовательский код с номером страницы.
Наша вторая страница будет отображать данные с датчика температуры и влажности DHT11. У нас есть несколько меток для отображения температуры в градусах Цельсия, температуры в градусах Фаренгейта и влажности. Мы также добавили прогресс-бар для отображения влажности и кнопку UPDATE для обновления показаний. Кнопка bBack перенаправляет на page0.
Обратите внимание, что у нас есть метки для отображения единиц измерения, таких как «*C», «*F» и «%», и пустые метки, которые будут заполнены показаниями, когда наш код Arduino будет запущен.
Тестирование интерфейса в симуляторе
Вы можете протестировать свой интерфейс в симуляторе. Для этого нужно нажать кнопку debug в главном меню.
Должно открыться новое окно.
В этом окне вы можете нажимать на кнопки и видеть, что происходит. Вы должны иметь возможность переключаться между страницами, нажимая соответствующие кнопки. Вы также должны видеть данные, возвращаемые при нажатии каждой кнопки, как выделено красным на рисунке выше.
Компиляция и загрузка кода на дисплей Nextion
Чтобы загрузить свой проект на дисплей Nextion, выполните следующие шаги:
Нажмите кнопку Compile в главном меню;
Вставьте карту microSD в компьютер;
Перейдите в File > Open Build Folder;
Скопируйте файл .TFT, соответствующий файлу, над которым вы сейчас работаете;
Вставьте этот файл на карту microSD (примечание: карта microSD должна быть предварительно отформатирована в FAT32);
Вставьте карту microSD в дисплей Nextion и подключите питание.
Вы должны увидеть сообщение на дисплее о том, что код загружается.
Когда загрузка будет завершена, должно отобразиться следующее сообщение:
Отключите питание от дисплея Nextion и извлеките карту microSD.
Снова подключите питание, и вы должны увидеть интерфейс, который вы создали в Nextion Editor, на вашем дисплее Nextion.
Написание кода Arduino
Когда GUI готов, вам нужно написать код Arduino, чтобы Nextion мог взаимодействовать с Arduino и наоборот. Написание кода для взаимодействия с дисплеем Nextion не является простым для начинающих, но это и не так сложно, как может показаться.
Хороший способ научиться писать код для Arduino для взаимодействия с дисплеем Nextion – перейти в папку examples в папке библиотеки Nextion и изучить примеры. Вы сможете копировать и вставлять код, чтобы заставить Arduino делать то, что вам нужно.
Первое, что вам следует сделать – записать ваши компоненты в GUI, которые будут взаимодействовать с Arduino, и записать их ID, имена и страницу. Вот таблица всех компонентов, с которыми код будет взаимодействовать (ваши компоненты могут иметь другой ID в зависимости от порядка, в котором вы добавляли их в GUI).
Objname |
Тип |
Page ID |
ID |
|---|---|---|---|
tState |
text |
0 |
4 |
bOn |
button |
0 |
2 |
bOff |
button |
0 |
3 |
h0 |
slider |
0 |
5 |
tSlider |
text |
0 |
6 |
tTempC |
text |
1 |
5 |
tTempF |
text |
1 |
4 |
jHumidity |
Progress bar |
1 |
8 |
tHumidity |
text |
1 |
9 |
bUpdate |
button |
1 |
10 |
Ниже вы можете найти код, который нужно загрузить на плату Arduino. Убедитесь, что у вас выбрана правильная плата и COM-порт.
Вам также необходимо установить библиотеку Adafruit_DHT.
Примечание
Убедитесь, что вы отключили соединения TX и RX при загрузке кода.
/*
* Rui Santos & Sara Santos - Random Nerd Tutorials
* Complete Project Details https://RandomNerdTutorials.com/
*/
#include "Nextion.h"
#include "DHT.h"
#define DHTPIN 4 // what digital pin we're connected to
// Uncomment whatever type you're using!
#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
// Initialize DHT sensor.
DHT dht(DHTPIN, DHTTYPE);
// LED pins
const int led1 = 8;
const int led2 = 9;
// Declare your Nextion objects - Example (page id = 0, component id = 1, component name = "b0")
NexText tState = NexText(0, 4, "tState");
NexButton bOn = NexButton(0, 2, "bOn");
NexButton bOff = NexButton(0, 3, "bOff");
NexSlider h0 = NexSlider(0, 5, "h0");
NexText tSlider = NexText(0, 6, "tSlider");
NexText tTempC = NexText(1, 5, "tTempC");
NexText tTempF = NexText(1, 4, "tTempF");
NexProgressBar jHumidity = NexProgressBar(1, 8, "jHumidity");
NexText tHumidity = NexText(1, 9, "tHumidity");
NexButton bUpdate = NexButton(1,10, "bUpdate");
// Register a button object to the touch event list.
NexTouch *nex_listen_list[] = {
&bOn,
&bOff,
&h0,
&bUpdate,
NULL
};
/*
* Button bOn component pop callback function.
* When the ON button is released, the LED turns on and the state text changes.
*/
void bOnPopCallback(void *ptr) {
tState.setText("State: on");
digitalWrite(led1, HIGH);
}
/*
* Button bOff component pop callback function.
* When the OFF button is released, the LED turns off and the state text changes.
*/
void bOffPopCallback(void *ptr) {
tState.setText("State: off");
digitalWrite(led1, LOW);
}
/*
* Slider h0 component pop callback function.
* When the slider is released, the LED brightness changes and the slider text changes.
*/
void h0PopCallback(void *ptr) {
uint32_t number = 0;
char temp[10] = {0};
// change text with the current slider value
h0.getValue(&number);
utoa(number, temp, 10);
tSlider.setText(temp);
// change LED brightness
analogWrite(led2, number);
}
/*
* Button bUpdate component pop callback function.
* When the UPDATE button is released, the temperature and humidity readings are updated.
*/
void bUpdatePopCallback(void *ptr) {
// Reading temperature or humidity takes about 250 milliseconds!
// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
float h = dht.readHumidity();
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
float f = dht.readTemperature(true);
// Check if any reads failed and exit early (to try again).
if (isnan(h) || isnan(t) || isnan(f)) {
return;
}
// Update temperature in Celsius
static char temperatureCTemp[6];
dtostrf(t, 6, 2, temperatureCTemp);
tTempC.setText(temperatureCTemp);
// Update humidity percentage text and progress bar
char hTemp[10] = {0};
utoa(int(h), hTemp, 10);
tHumidity.setText(hTemp);
jHumidity.setValue(int(h));
// Update temperature in Fahrenheit
static char temperatureFTemp[6];
dtostrf(f, 6, 2, temperatureFTemp);
tTempF.setText(temperatureFTemp);
}
void setup(void) {
dht.begin();
Serial.begin(9600);
// You might need to change NexConfig.h file in your ITEADLIB_Arduino_Nextion folder
// Set the baudrate which is for debug and communicate with Nextion screen
nexInit();
// Register the pop event callback function of the components
bOn.attachPop(bOnPopCallback, &bOn);
bOff.attachPop(bOffPopCallback, &bOff);
h0.attachPop(h0PopCallback);
bUpdate.attachPop(bUpdatePopCallback, &bUpdate);
// Set LEDs as outputs
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
}
void loop(void) {
/*
* When a pop or push event occurred every time,
* the corresponding component[right page id and component id] in touch event list will be asked.
*/
nexLoop(nex_listen_list);
}
Продолжайте читать статью, чтобы узнать, как работает код.
Подключение необходимых библиотек
Сначала вы подключаете библиотеки Nextion и DHT.
#include "Nextion.h"
#include "DHT.h"
Датчик DHT будет подключён к цифровому пину 4 Arduino.
#define DHTPIN 4
Затем вы должны выбрать тип используемого DHT:
// Uncomment whatever type you're using!
#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
И инициализируем датчик DHT
DHT dht(DHTPIN, DHTTYPE);
После этого вы определяете led1 и led2. Эти переменные относятся к цифровым пинам 8 и 9 соответственно. (led1 будет управляться кнопками ON и OFF пользовательского интерфейса, а яркость led2 будет управляться с помощью ползунка).
const int led1 = 8;
const int led2 = 9;
Объявление объектов Nextion
Вам нужно объявить все ваши объекты Nextion следующим образом:
NexText tState = NexText(0, 4, "tState");
NexButton bOn = NexButton(0, 2, "bOn");
NexButton bOff = NexButton(0, 3, "bOff");
NexSlider h0 = NexSlider(0, 5, "h0");
NexText tSlider = NexText(0, 6, "tSlider");
NexText tTempC = NexText(1, 5, "tTempC");
NexText tTempF = NexText(1, 4, "tTempF");
NexProgressBar jHumidity = NexProgressBar(1, 8, "jHumidity");
NexButton bUpdate = NexButton(1,10, "bUpdate");
NexText tHumidity = NexText(1, 9, "tHumidity");
Здесь вы используете page ID, component ID и их имя – просто сверьтесь с таблицей выше со всеми компонентами. Для определения текста вы используете NexText, для определения кнопки – NexButton, для ползунка – NexSlider, а для прогресс-бара – NexProgressBar.
Далее вы должны добавить в следующий фрагмент все сенсорные компоненты, которые должны вызывать события на Arduino.
NexTouch *nex_listen_list[] = {
&bOn,
&bOff,
&h0,
&bUpdate,
NULL
};
Создание функций обратного вызова
После этого вам нужно создать функции обратного вызова (callback), которые будут вызываться при нажатии на соответствующие компоненты.
Следующая функция будет вызвана, когда вы отпустите нажатие с кнопки bOn:
void bOnPopCallback(void *ptr) {
tState.setText("State: on");
digitalWrite(led1, HIGH);
}
Эта функция установит led1 в HIGH, а также обновит метку tState текстом «State: on». Обновление текстовых меток так же просто, как использование setText().
Кнопка bOff работает аналогичным образом:
void bOffPopCallback(void *ptr) {
tState.setText("State: off");
digitalWrite(led1, LOW);
}
Для ползунка (h0) у вас есть следующая функция, которая записывает текущую позицию ползунка в метку tSlider и устанавливает яркость led2 соответствующим образом:
void h0PopCallback(void *ptr) {
uint32_t number = 0;
char temp[10] = {0};
h0.getValue(&number);
utoa(number, temp, 10);
tSlider.setText(temp);
analogWrite(led2, number);
}
Наконец, вам нужна функция для bUpdate (кнопки обновления). Когда вы нажимаете эту кнопку, датчик температуры и влажности DHT считывает температуру и влажность и отображает их на соответствующих метках, а также влажность на прогресс-баре. Это функция bUpdatePopCallback().
Внутри этой функции следующий фрагмент считывает температуру и влажность:
float h = dht.readHumidity();
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
float f = dht.readTemperature(true);
// Check if any reads failed and exit early (to try again).
if (isnan(h) || isnan(t) || isnan(f)) {
//Serial.println("Failed to read from DHT sensor!");
return;
}
Следующий фрагмент записывает температуру в градусах Цельсия в метку tTempC
static char temperatureCTemp[6];
dtostrf(t, 6, 2, temperatureCTemp);
tTempC.setText(temperatureCTemp);
Аналогичным образом, для обновления температуры в градусах Фаренгейта:
static char temperatureFTemp[6];
dtostrf(f, 6, 2, temperatureFTemp);
tTempF.setText(temperatureFTemp);
Для обновления метки влажности и прогресс-бара:
char hTemp[10] = {0};
utoa(int(h), hTemp, 10);
tHumidity.setText(hTemp);
jHumidity.setValue(int(h));
Для установки значения прогресс-бара вы просто используете setValue().
setup()
В setup() вам нужно привязать созданные функции к соответствующим событиям. Например, когда вы нажимаете кнопку bOn, будет вызвана функция bOnPopCallback.
bOn.attachPop(bOnPopCallback, &bOn);
bOff.attachPop(bOffPopCallback, &bOff);
h0.attachPop(h0PopCallback);
bUpdate.attachPop(bUpdatePopCallback, &bUpdate);
loop()
Цикл loop настолько прост:
void loop(void) {
nexLoop(nex_listen_list);
}
Когда происходит событие, вызывается соответствующая функция.
Демонстрация
С готовым пользовательским интерфейсом и загруженным кодом на Arduino, вы сможете управлять пинами Arduino с дисплея Nextion.
Нажмите кнопки On и Off, чтобы включить и выключить led1, и перемещайте ползунок для управления яркостью led2.
На втором экране нажмите кнопку update, чтобы обновить последние показания датчика.
Заключение
В этой статье мы познакомили вас с дисплеем Nextion. Мы также создали простой пользовательский интерфейс приложения на дисплее Nextion для управления пинами Arduino. Созданное приложение является лишь примером для понимания того, как взаимодействовать различные компоненты с Arduino – мы надеемся, что вы нашли инструкции и предоставленный пример полезными.
По нашему мнению, Nextion – это отличный дисплей, который делает процесс создания пользовательских интерфейсов простым и лёгким. Хотя Nextion Editor имеет некоторые проблемы и ограничения, это отличный выбор для создания интерфейсов для ваших электронных проектов. У нас есть проект о том, как создать физический интерфейс Node-RED с дисплеем Nextion и ESP8266 для управления выходами. Не стесняйтесь ознакомиться с ним.
Какие проекты вы хотели бы увидеть с использованием дисплея Nextion? Напишите комментарий ниже.
Спасибо за чтение.