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 В