Nextion дисплей

-Nextion дисплей

Содержание

Обзор
Программа 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):

1. Главное меню;

2. Меню управления выравниванием и порядком элементов;

3. Библиотека элементов;

4. Область отображения;

5. Список страниц проекта;

6. Библиотека изображений /Библиотека шрифтов;

7. Окно вывода результатов компиляции;

8. Окно для ввода кода, выполняемого при возникновении события;

9. Зона редактирования атрибутов выбранного элемента.

Рис. 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 В.

Документы

Listing_01 618 байт

Listing_02 739 байт

Listing_03 1,8 кб

Nextion 203,8 кб

Назад к списку