Nextion дисплей
Дисплеи являются удобным элементом при создания графического интерфейса для проектов Arduino.
Содержание
Обзор дисплее Nextion
Дисплеи являются удобным элементом при создания графического интерфейса для проектов Arduino. В проектах Arduino используют разнообразные дисплеи. Список самых распространенных:
- монохромные символьные на контроллере HD44780;
- монохромные графические NOKIA5110;
- OLED-дисплеи;
- цветные дисплеи с TFT матрицей.
Чем сложнее дисплей, тем больше ресурсов 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;
- С помощью карты microSD.
Для прошивки дисплея через 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 со последовательному порту
Разберем формат строки:
- 65 0 2 1 ffff fffff fffff
- 65 – первый байт – произошло событие TouchEvent;
- 0 – номер страницы;
- 2 – номер элемента на странице;
- 1 – событие Touch Press (0 – Touch Release).
- В библиотеке Nextion есть методы для отправки команд на дисплей Nextion, например:
- sendCommand() – отправить команду;
- setComponentText() – установить текст компонента;
- buttonOnOff() – нажать/отжать кнопку;
- buttonToggle() – переключение переключателя;
- updateProgressBar() – изменить компонент ProgressBar;
- getComponentText() – получить текст компонета.
Составим скетч отправки команд на дисплей 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. Для данного проекта потребуются следующие детали:
- Плата Arduino Uno – 1;
- Кабель USB;
- Плата прототипирования – 1;
- Дисплей Nextion;
- Модуль BH1750 – 1;
- Модуль датчика BMP280 – 1;
- Модуль датчика влажности DHT22 – 1;
- Провода.
Соберем схему соединений согласно рис. 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 В