Nextion дисплей

• Обзор
• Программа Nextion
• Подключение к Arduino
• Пример использования
• Часто задаваемые вопросы

Обзор дисплее Nextion

Дисплеи являются удобным элементом при создания графического интерфейса для проектов Arduino. В проектах Arduino используют разнообразные дисплеи. Список самых распространенных:

Чем сложнее дисплей, тем больше ресурсов Arduino он использует. В отличие от вышеперечисленных, графические дисплеи Nextion NMI (Human Machine Interface) обладают собственным микроконтроллером, который выделяет весь свой вычислительный ресурс на обработку графики, контроллером сенсорного экрана, памятью, и разъемами для подключения SD-карты и интерфейса UART.

Рис. 1

Дисплеи улучшенной версии оснащены также часами реального времени и контактами GPIO. Подключение к Arduino по последовательному порту, двусторонний обмен происходит с помощью унифицированных команд, позволяющих определять события прикосновения к элементам экрана и устанавливать атрибуты созданных элементов. Для загрузки программ в дисплей можно использовать разъем SD-карт памяти. Модельный ряд представлен дисплеями с диагональю 2.4" - 7.0" с разрешением экрана от 320x240 до 800x480 (рис. 2,3). 

Рис. 2

Рис. 3

Программа Nextion Editor

Программа Nextion Editor  предназначена для работы с дисплеями Nextion и позволяет создавать интерфейс пользователя и прописать обработку событий Press/Release для элементов экрана.

Перед подключением дисплея Nextion к плате Arduino, рассмотрим как создавать в дисплее графические элементы. Необходимо скачать программу Nextion Editor со страницы загрузки официального сайта – https://nextion.itead.cc/resources/download/ (рис. 4). Версия только для операционной системы Windows.

Рис. 4 Страница загрузки программы Nextion Editor.

После скачивания, распаковки и установки, запустим программу Nextion Editor (рис. 5).

Рис. 5.

Создаем новый проект (File → New), вводим название проекта и кликаем по кнопке Сохранить. В окне Setting во вкладке Device выберем линейку и модель дисплея (рис. 6). Во вкладке Display выбираем ориентацию дисплея и кодировку (для кириллицы iso-8859-5) (рис. 7). 5. Во вкладке project можно запаролировать доступ к проекту.

Рис. 6.

Рис. 7.

Откроется графическое окно разработки. Рассмотрим его элементы (рис. 8):

Рис. 8.

Теперь можем приступать к добавлению элементов. Изначально в окне списка страниц присутствует одна страница – page0, название которой можно изменить. У каждого элемента, а также страницы есть свойства (атрибуты), которые можно изменять в окне редактирования атрибутов выбранного элемента. Добавим фон для страницы. Сначала добавим изображение в окне 6 – библиотека изображений, нажав на кнопку "+". Теперь можно установив фон страницы, выбрав для страницы page0 атрибут sta, равный image и в поле pic выбрать нужное изображение из списка (рис. 9).

Рис. 9.

Теперь добавим шрифты, которые наверняка пригодятся для надписей на экране. Шрифты можно сгенерировать генератором шрифтов. Выбираем Tools à Font Generator и в появившемся окне выбираем параметры шрифта (рис. 10), а затем сохраняем.

Рис. 10.

После генерации шрифт можно добавить в проект. В библиотека шрифтов нажимаем на кнопку "+" и указываем путь к шрифту. Теперь добавленный шрифт можно использовать в проекте (рис. 11).

Рис. 11.

Элементы интерфейса добавляются на экран из библиотеки элементов, местоположение элемента на экране устанавливаем, перемещая его с помощью мыши, для активного элемента редактируем его атрибуты (рис. 12).

Рис. 12.

С помощью галочки устанавливаем отправку команд для UART выбранного события (Touch Press или Touch Release), в поле кода можно добавить код для данного события (рис. 13).

Рис. 13.

Перед прошивкой модуля необходимо проект скомпилировать (пункт меню Compile). При отсутствие ошибок приступаем к прошивке модуля.

Прошивка осуществляется:

Для прошивки дисплея через UART понадобиться USB-Serial адаптер. Схема подключения Nextion к USB-Serial адаптеру показана на рис. 14.

Рис. 14.

Для загрузки прошивки выбираем пункт Upload и в появившемся окне нажимаем на кнопку Go. Процесс прошивки будет отображаться в окошке программы (рис. 15) и на экране дисплея.

Рис. 15.

Для прошивки дисплеев Nextion с помощью microSD карты, необходимо скопировать файл с именем проекта на microSD-карту. Далее вставляем её в дисплей и подаем питание. По окончании процесса прошивки извлекаем microSD-карту.

Подключение к плате Arduino

Рассмотрим подключение Nextion к Arduino и двустороннее взаимодействие. Взаимодействие происходит по последовательному порту. Схема подключения показана на рисунке 16.

Рис. 16. Схема соединений для подключения дисплея Nextion к плате Arduino

Для взаимодействия с дисплеем Nextion будем использовать Arduino-библиотеки Nextion. Со стороны Arduino будем использовать программный последовательный порт Software на пинах 2(Rx) и 3(Tx). Составим скетч получения данных из дисплея Nextion при событиях Touch Press и Touch Release для созданной выше прошивки для дисплея Nextion.

Содержимое скетча представлено в листинге 1.

Листинг 1.

// подключение библиотек #include <SoftwareSerial.h> #include <Nextion.h> // создание объектов SoftwareSerial port1(2, 3); Nextion disp(port1, 9600); void setup() { Serial.begin(9600); disp.init(); } void loop() { // ожидание сообщения от Nextion String msg = disp.listen(); if(msg != ""){ // при получении сообщения - // вывести его в последовательный порт Serial.println(msg); } } 

Загружаем скетч на плату Arduino и смотрим в последовательном порту подключение данных из Nextion при назначенных для элементов событиях Touch Press и Touch Release (рис. 17).

Рис 17. Получение данных от дисплея Nextion со последовательному порту

Разберем формат строки:

Составим скетч отправки команд на дисплей Nextion.

Содержимое скетча представлено в листинге 2.

Листинг 2

// подключение библиотек #include <SoftwareSerial.h> #include <Nextion.h> // создание объектов SoftwareSerial port1(2, 3); Nextion disp (port1, 9600); char buf[10]; void setup() { Serial.begin(9600); disp.init() } void loop() { // изменение текста на компоненте t0 disp.setComponentText("t0", "Smart"+String(millis())); delay(2000); // изменение размера кнопки b0 disp.sendCommand( "b0.font=1"); delay(2000); disp.sendCommand( "b0.font=0"); delay(2000); // изменение позиции слайдера String s="h0.val="+String(random(0,100)); Serial.println(s); s.toCharArray(buf, 10); disp.sendCommand(buf); delay(2000); } 

Загружаем скетч на плату Arduino и смотрим на дисплее изменение атрибутов компонентов.

Пример использования

Создадим проект метеостанции с выводом данных на экран дисплея Nextion. Для данного проекта потребуются следующие детали:

Соберем схему соединений согласно рис. 18. Обратите внимание, что питание датчика BMP280 берется с выхода Arduino 3.3 В, подключение к 5В приведет к выходу датчика из строя!!!

Сначала необходимо создать прошивку для дисплея Nextion – размещение элементов для отображения данных метеостанции. Открываем программу Nextion Editor и создаем новый проект meteo1. Выберем вертикальное расположение страницы.

Создадим 2 страницы – logo (для отображения логотипа при запуске устройства) и sensors (для отображения данных датчиков). Страница logo с фоновой картинкой и выполнением кода по событию Touch Realese (рис. 19).

На странице sensors расположим элементы для отображения данных датчиков – 4 элемента Picture и 8 элементов Text (рис. 20). Необходимо загрузить в проект 4 иконки и создать 2 шрифта Arial 32 и 56px. В элементах t1, t2, t3, t4 будем изменять удаленно атрибут txt для внесения в них информации с датчиков метеостанции.

Рисунок 18. Схема соединений для домашней метеостанции с дисплеем Nextion.

Рисунок 19. Создание страницы logo.

Рисунок 20. Размещение элементов для страницы sensors.

Приступим к написанию скетча.

Сначала необходимо подключить библиотеки:

// подключение библиотеки для работы с Software Serial #include <SoftwareSerial.h> // подключение библиотеки для работы с Nextion #include <Nextion.h> // подключение библиотеки для датчика BH1750 #include <BH1750FVI.h> // подключение библиотек для датчика BMP280 #include <Adafruit_Sensor.h> #include <Adafruit_BMP280.h> // подключение библиотеки Wire – для устройств I2C #include "Wire.h" #include <SPI.h> // подключение библиотеки DTH – для датчика DHT22 #include "DHT.h" 

В константы вынесем пины для подключения датчиков DHT22 и DS18B20:

// пин подключения контакта DATA датчика DHT22 #define DHTPIN 10 

Создаем экземпляры объектов:

// Nextion TX к пин 2, RX к пин 3 Arduino SoftwareSerial nextion(2, 3); // создание объекта Nextion к порту на скорости 9600 бод Nextion myNextion(nextion, 9600); // создание экземпляра объекта объекта для BH1750 BH1750FVI myBH1750; // создание экземпляра объекта для BMP280 Adafruit_BMP280 myBMP280; // создание экземпляра объекта DHT DHT dht(DHTPIN, DHTTYPE); 

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

int get_data_humidity() { int h = dht.readHumidity(); return h; } int get_data_temp() { int t = dht.readTemperature(); return t; } 

Для датчика BH1750:

int get_data_light() { int l = myBH1750.readLightLevel(); return l; } 

Для датчика BMP280:

int get_data_pressure() { int p = myBMP280.readPressure(); return p; } 

Для вывода показаний датчиков на экран дисплея Nextion необходимо отправлять команды для изменения атрибута txt элементов t1, t2, t3, t4:

float val=get_data_ds18b20(); // изменение текста на компоненте t1 myNextion.setComponentText("t1", String(val)); 

Для проверки выводим данные с датчиков в последовательный порт.

Содержимое скетча показано в листинге 3.

Листинг 3

// подключение библиотеки для работы с Software Serial #include <SoftwareSerial.h> // подключение библиотеки для работы с Nextion #include <Nextion.h> // подключение библиотеки для датчика BH1750 #include <BH1750FVI.h> // подключение библиотек для датчика BMP280 #include <Adafruit_Sensor.h> #include <Adafruit_BMP280.h> // подключение библиотеки Wire – для устройств I2C #include "Wire.h" #include <SPI.h> // подключение библиотеки DTH – для датчика DHT22 #include "DHT.h" // пин подключения контакта DATA датчика DHT22 #define DHTPIN 10 // тип датчика - DHT 22 #define DHTTYPE DHT22 // Nextion TX к пин 2, RX к пин 3 Arduino SoftwareSerial nextion(2, 3); // создание объекта Nextion к порту на скорости 9600 бод Nextion myNextion(nextion, 9600); // создание экземпляра объекта объекта для BH1750 BH1750FVI myBH1750; // создание экземпляра объекта для BMP280 Adafruit_BMP280 myBMP280; // создание экземпляра объекта DHT DHT dht(DHTPIN, DHTTYPE); // для периода опроса датчика unsigned long millis1=0; // служебные переменные char buf[10]; void setup() { // запуск последовательного порта на скорости 9600 бод Serial.begin(9600); // запуск BH1750 myBH1750.begin(); // запуск BMP280 myBMP280.begin(); // инициализация Nextion myNextion.init(); Serial.println("start"); } void loop() { // раз в 5 секунд if(millis()-millis1>=5000) { // данные температуры с DHT22 float val1=get_data_temp(); Serial.print("Temperature: "); Serial.print(val1); Serial.println(" *C"); // изменение текста на компоненте t1 myNextion.setComponentText("t1", String(val1)); // данные влажности с DHT22 int val2=get_data_humidity(); Serial.print("Humidity: "); Serial.print(val2); Serial.println(" %"); // изменение текста на компоненте t2 myNextion.setComponentText("t2", String(val2)); // данные с датчика освещенности int val3=get_data_light(); Serial.print("Light level: "); Serial.print(val3); Serial.println(" lx"); // изменение текста на компоненте t3 myNextion.setComponentText("t3", String(val3)); // данные с атмосферного давления int val4=get_data_pressure(); Serial.print("Pressure: "); Serial.print(val4); Serial.println(" Pa"); // изменение текста на компоненте t4 myNextion.setComponentText("t4", String(val4)); // начать отсчет 5 секунд заново millis1=millis(); } } // получение данных с влажности с датчика DHT22: int get_data_humidity() { int h = dht.readHumidity(); return h; } // получение данных с температуры с датчика DHT22: int get_data_temp() { int t = dht.readTemperature(); return t; } // получение данных с датчика BH1750: int get_data_light() { int l = myBH1750.readLightLevel(); return l; } // получение данных с датчика BMP280: int get_data_pressure() { int p = myBMP280.readPressure(); return p; 

Загружаем скетч можно на плату Arduino. Скетч выводит данные в монитор последовательного порта (рис. 21) и на цифровой дисплей.

Рисунок 21. Вывод данных с датчиков в монитор последовательного порта.

Рисунок 22. Схема в сборе.

Часто задаваемые вопросы

1. Нет связи Arduino c дисплеем Nextion

• Проверьте правильность подключения Nextion к плате Arduino.

2. Изображение на дисплее Nextion мигает

• Недостаточный ток при питании дисплея от платы Arduino. Используйте сторонний блок питания 5 В