01.10.2020

Андрей Смирнов

Время чтения: ~18 мин.

Подключение дисплеев Nextion и прошивка с помощью Editor

Используйте дисплейные модули Nextion для отображения текста и изображений, анимаций, кнопок, переключателей, стрелочных индикаторов, прогресс баров и графиков. Многостраничность позволяет организовывать меню с выпадающими списками и даже интерактивные игры!

Всё это становится возможным благодаря мощному 32-х разрядному процессору и визуальной среде разработки Nextion Editor. С внешним миром дисплей взаимодействует с помощью резистивного сенсора касаний с собственным контроллером и интерфейса UART. Панель подключается всего по четырём проводам (два из которых — питание). Для обновления прошивки дисплея, помимо UART, предусмотрен разъем для microSD карты.

В зависимости от версии дисплеи оснащаются большим объемом памяти, часами реального времени и даже собственными пинами GPIO, что позволяет использовать дисплей для управления устройствами такими как реле и т.д.

Видеообзор

Подключение и настройка

В комплекте с дисплеями Nextion идёт четырёхпроводной шлейф и плата-модуль USB to 2 pin connector.

Установка среды Nextion Editor

Для работы с дисплеем необходимо установить и настроить среду разработки «Nextion Editor»

Для этого перейдите на официальный сайт дисплейных модулей «Nextion». Скачайте и установите последнюю версию среды.

Создание нового проекта в Nextion Editor

Запустите среду «Nextion Editor»
Создайте новый проект:FileNEW, напишите название будущего проекта и нажмите кнопку Сохранить. Откроется окно Setting, с двумя вкладками: Device и Display.
Во вкладке Deviceвыберите линейку и модель дисплея. В качестве примера выберем дисплей из линейки Basic модели NX3224T024_011R
Во вкладке Display выберите ориентацию дисплея и кодировку.
Для поддержки кириллицы выбирайте кодировку iso-8859-5
После всех манипуляций нажимайте кнопку OK. Перед вами откроется графическое окно разработки. Рассмотрим его элементы.

1 — Главное меню.
2 — Меню управления выравниванием и порядком элементов.
3 — Библиотека элементов.
4 — Область отображения.
5 — Список страниц проекта
6 — Библиотека изображений /Библиотека шрифтов.
7 — Окно вывода результатов компиляции.
8 — Окно для ввода кода, выполняемого при возникновении события.
9 — Зона редактирования атрибутов выбранного элемента.

Добавление изображений

Нажмите в окне «библиотека изображений» на иконку
Выберите интересующее вас изображение на ПК и нажмите кнопку Открыть.В окне «библиотека изображений» появиться загруженное изображение.
Выделите область отображение дисплея.
В окне «зона редактирование атрибутов» в пункте sta измените поле solid color на image.
В поле pic выберите интересующую вас картинку из «библиотеки изображений» и нажмите кнопку OK Если вы всё сделали правильно, в окне «область отображение дисплея» вы увидите вашу картинку.

Это значит всё получилось и можно смело переходить к прошивки дисплея.

Прошивка дисплейных модулей

Компиляция проекта

Перед прошивкой проект необходимо проверить не наличие ошибок — скомпилировать. Для этого нажмите кнопку Compile. В окне «вывода результатов компиляции» вы должны увидеть сообщение об успешной компиляции. Дисплейные модули Nextion поддерживают два вида прошивки:

Через последовательный порт UART
С помощью карты microSD.

Рассмотрим их подробнее.

Прошивка через UART

Для прошивки дисплея через UART понадобиться USB-Serial адаптер.

Видеорегистратор без экрана: важные характеристики и рейтинг лучших устройств

Создайте и откомпилируйте ваш проект в «Nextion Editor»
Подключите дисплей к USB-Serial адаптеру следующим образом:
1. Питание дисплея +5V — к питанию USB-Serial адаптера
2. Земля дисплея GND — к питанию USB-Serial адаптера
3. TX дисплея — в RX USB-Serial адаптера
4. RX дисплея — в TX USB-Serial адаптера
Прошейте ваш дисплей нажав на кнопку После окончания прошивки, загружаемый проект будет выполняться и отображаться на дисплейном модуле.

Прошивка через microSD

Прошивка через UART занимает достаточно долгое время и требует дополнительного UART-преобразователя. В связи с этим существует альтернативный способ прошивки дисплеев Nextion с помощью microSD карты.

Создайте и откомпилируйте ваш проект в «Nextion Editor»
Откройте папку с компилированными проектами:FileOpen builder folder
Скопируйте файл с именем вашего проекта на microSD карту.
Извлеките microSD-карту из вашего ПК и вставьте её в дисплей.
Подключите питание на дисплей.
Дождитесь окончания прошивки.
Извлеките microSD-карту.

После всех выполненных действий, загружаемый проект будет выполняться и отображаться на дисплейном модуле.

Примеры работы

Для старта воспользуйтесь нашим примером: Игра на Nextion дисплее «Убей крота».

Линейка Nextion Enhanced

Модель	Wiki	Диагональ	Разрешение	Тач панель	Кол-во цветов	Процессор	Flash (MB)
NX3224K024	Click	2.4”	320×240	Резистивная	65536	ARM 7 48Mhz	16
NX3224K028	Click	2.8”	320×240	Резистивная	65536	ARM 7 48Mhz	16
NX4024K032	Click	3.2”	400×240	Резистивная	65536	ARM 7 48Mhz	16
NX4832K035	Click	3.5”	480×320	Резистивная	65536	ARM 7 108Mhz	32
NX4827K043	Click	4.3”	480*272	Резистивная	65536	ARM 7 108Mhz	32
NX8048K050	Click	5.0”	800×480	Резистивная	65536	ARM 7 108Mhz	32
NX8048K070	Click	7.0”	800×480	Резистивная	65536	ARM 7 108Mhz	32

Ресурсы

Цена: 25$ + доставка

Продолжаю разбираться с экраном и его работой с Arduino, на этот раз буду измерять напряжение на аккумуляторе вольт-амперметром и выводить данные на экран с простейшей анимацией оставшейся емкости. Собственно тут будут обозреваться сразу два устройства экран и модуль INA219, который измеряет напряжение 0 — 26В и ток 3.2А Мне нужно было выводить на экран напряжение аккумулятора 3х18650 в качестве индикации его состояния, насколько оно проседает при подключении нагрузки, ну и оставшуюся емкость на глазок измерять по напряжению, а так как я решил наконец нормально понять, как работать с этими экранами, то сделаю все на нем, как минимум в качестве рабочей модели. Первым шагом делаем форму отображения информации для экрана, чтобы получить наглядное отображение измеряемой величины. Все что нужно для решения подобной задачи — это покопаться в яндекс картинках и вытащить изображение с батарейкой.Так будет выглядеть готовая формаВместо полей Newtxt мы будем записывать показания с вольтметра и в зависимости от них рассчитывать оставшуюся емкость аккумулятора По мере заряда/разряда показания будут изменяться, а значит изменяться будет и наше изображение, примерно вот так: Зеленым будет заполняться изображение, которое я скачал и чутка подредактировал Исходя из обилия материала в свободном доступе, можно сделать в десятки раз лучше, этот вариант для «ленивых» и на скорую руку, ниже будет эволюция этого примера, но если показать сразу итог будет не так понятно.Как делалась примитивная форма для отображения уровня заряда аккумулятораТеперь с чего начинать: Запускаем Nextion Editor Создаем новый документ Создаем новый шрифт (в моем случае Tahoma 24 размер шрифта) Вытаскиваем из интернета понравившееся изображение подгоняем его под разрешение экрана (400х240 в моем случае), получается примерно так (все делал в пэйнте, с фотошопом не знаком и это дает о себе знать): Это изображение будет фоном рабочей области, т.е. добавляем изображение, кликаем по пустому пространству и в поле Атрибуты указываем наш фон (у меня это 6 изображение, т.к. я продолжаю документ из прошлой части) Далее я добавил пять инструментов текст и инструмент Прогресс бар, с ним самый сложный момент, поскольку его необходимо аккурасно вписать внутрь батарейки, не задевая края и настроить атрибуты следующим образом: В данный момент важен только один параметр — прогресс бар должен быть вертикальным, оставшиеся параметры, выделенные зеленым это цвет и процент заполнения, я выбрал белый и зеленый. Собственно на этом все, для проверки можете поиграть значением val у прогресс бара, чтобы проверить как он работает, но на этом этапе работу с экраном мы закончили. Добавлю только один момент, если у вас несколько страниц, переход с одной на другую осуществляется через нажатие на область для которой в редакторе прописана команда page page1 где page1 — страница на которую вы хотите перейти. К примеру я продолжил проект, в котором делал анимацию, для перехода на вторую страницу я написал эту команду для этой самой анимацииВольт-амперметр INA219Так выглядит сам модуль Если верить надписям на самом модуле, то его характеристики такие Измеряемое напряжение 0-26В Измеряемый ток до 3.2А Подключается по I2C Выводы Vin+ и Vin- подключаются в РАЗРЫВ!!! цепи, а не параллельно как вольтметр, хотя казалось бы… Короче один модуль умер убившись об лабораторный блок питания 5А у меня на работе, потом я резко начал искать и читать инструкцию, благо такие есть.adafruit-ina219-current-sensor-breakoutina219 Теперь по библиотекам, их быстрее искать через среду разработки

Я пользовался библиотекой от adafruit ina219, но вторая тоже рабочая, но рассчитана на более вдумчивое использование. Пример из библиотеки adafruit из разряда тех, которые загрузил и получаешь данные на выходе в терминале Немного о подключении: 1. Обязательна общая земля относительно измеряемого напряжения 2. Чтобы измерять напряжение, достаточно подключить один контакт Vin+ или Vin- 3. Повторюсь, для измерения тока, подключать в разрыв цепи, иначе будет кз через шунт 0,1Ом И на сладкое, башковитые люди могут расширить измеряемый диапазон заменив шунт и откалибровав чип под новые реалии. Вот результаты работы скетча, как видите напряжение измеряет прекрасно, по току сейчас идут паразитные значения, поскольку второй провод никуда не подключен. Не забудьте выставить скорость 115200 в терминале. Vcc модуля на 5В ардуино GND на GND SCL на SCL SDA на SDA Vin+ подключен на 5В ардуины BusVoltage — напряжение между GND и V- ShuntVoltage — напряжение между V- и V+ (на шунте) Current — ток, рассчитанный по закону Ома относительно напряжения на шунте Вот такой первый взгляд на модуль, дальше будет его применение с экраномВывод значений от INA219 на экранЗдесь придется скрестить два примера из разных библиотек Если смотреть по мере написания кода, то первым появился этот вариант Как итог: значение напряжения выводятся, прогресс бар заполняется. Из минусов библиотеки: нумерация текстовых полей сквозная для всех страниц, т.е. если на разных страницах есть два текстовых поля t0, то писать значение вы будете сразу в оба поля на обоих страницах. Минус условный, поскольку изменить номер инструмента вам никто не запрещает, более того в чем-то это даже полезно. Далее если применять вольтметр для аккумуляторов 18650 нужно смотреть кривые разряда, чтобы написать зависимость напряжения от емкости, я этого делать не стал, по крайней мере на данном этапе, и сделал линейную зависимость. 4.25В = 100% 2.6В = 0% Таким образом дельта в 1.65 В это наши 100%, 1%=0.0165 В, следовательно если напряжение лежит в заданных пределах, то 1% будет высчитываться по формуле: v=((busvoltage-2.6)/0.0165)*N, где N количество аккумуляторов в сборке Исходя из этого можно написать программу для 1s-2s-3s-4s сборок, так что если вам будет любопытно когда же зарядится аккумулятор вашего прибора/игрушки вы сможете это сделать, другое дело что использовать дисплей только для этого слишком мелко, разве что как одна из функций состояния.Это код для одного аккумулятора 18650 Вот предварительный результат, програсс бар заполняется по циклу, напряжение замеряется на выходе 3.3В ардуины.Эволюция кода А теперь, когда принцип в целом понятен, удаляем к чертовой матери всю эту графику и делаем все более-менее нормально и применимо к реальным задачамИсходные изображенияОтсюда взято изображение батарейки в обоих примерах Делаем фон по размеру экрана. Индикация заряда батареи в верхнем правом углу — классика жанра, для наглядности Продублировал индикацию крупно, естественно в последствии я либо перенесу его на отдельную страницу либо удалю. Эти два изображения одинаковые по размерам и предназначены для прогресс бара. Если до этого мы пользовались сплошными цветами, то сейчас зеленая картинка будет соответствовать полностью заряженному аккумулятору, черная — пустому

Заметьте, все на черном фоне, так на мой взгляд все намного проще и вместе с тем отлично смотрится. Как уже упоминал, в итоге останется только индикатор батареи в верхнем углу, все остальное не более чем баловство. Подобным образом можно изобразить индикатор уровня сигнала и прочее и прочее. Иными словами статус панель делается без особых проблем. Вот итоговая форма для вывода информации:Программная и железная часть

Ссылки:Первая часть обзораПрошивка экрана первый вариантПрошивка экрана второй вариантОписание библиотеки экранаБиблиотека экрана туториалNextion_Instruction_Set Ложка дегтя, сейчас столкнулся с проблемой получения посылок от экрана, чем больше код, тем чаще нажатия «теряются», скорее всего проблема программная. + Нашел шикарнейший видео обзор на экран В качестве резюме: 1. Напряжение можно измерять посредством самой ардуины, сделав из нее вольтметр, причем если вам не будет хватать возможностей компаратора всегда можно воспользоваться делителем напряжения, так что модуль INA219 удобен, поскольку будет точнее измерять напряжения больше 5В, но не обязателен. 2. В экране можно разбираться очень долго, но конечный результат того стоит.

Цена: 25$ + доставка

Более месяца назад доехали до меня экраны и только на выходных дошли до них руки. Хотел ознакомиться с чужим творчеством, но… Одним словом мне нужно, чтобы все было расписано досконально, для полных чайников и я решил сделать нечто подобное. Попробовал несколько библиотек, пробежался по мануалу с набором инструкций, подцепил ардуину и сделал пару простейших действий. Сделал не все, что хотел, поэтому это будет часть 1, однако своими идеями и примерами могу поделиться уже сейчас. По традиции немного общей информации, с которой многие не равнодушные давно знакомы, поэтому она под спойлером. Внешний вид и цена вопросаВот стоимость покупки на официальном сайте за два экрана, покупал не только их, но и еще кучку всего для знакомого, но и себя не обидел, так что посылка была большая. В итоге здесь 2 или 3 заказа. За упаковку можете не переживать, доставку посылка переживает отлично, а поскольку пришла она уже давно, дополнительные фото сделать нет возможности

Характеристики с официального сайта Support built-in RTC Support GPIO SD Card interface: support max max 32G Micro TF/SD card (FAT32 file format) Flash data storage space: 16MB EEPROM: 1024 byte RAM: 3584 byte Instruction buffer: 1024 byte Color：65K (65536) colors Resolution：400×240 pixel Теперь практическая сторона вопроса. У дисплея есть своя среда разработки Nextion Editor и несколько библиотек для подключения к ардуино, включая официальную от производителя. Мне наиболее понравилась nextion-master, она наиболее простая, по крайней мере начинать я решил именно с нее. Немного информации для тех, кто еще не устанавливал Nextion Editor и не пользовался эмулятором дисплэя, а такой присутствует, причем его достаточно, чтобы понять функционал экрана и его возможности:Nextion Editor, первый запуск, настройкаВнешний вид

Вам нужно создать новый проект, нажав на клавишу New, ввести имя проекта и приступить к выбору и модели дисплея и настроек

После выбора модели (Device) переходим во вкладку Display и выбираем положение экрана, а самое главное кодировку текста iso 5, которая необходима для отображения русских шрифтов.

После подтверждения настроек вы попадете в рабочее поле программы, но поменять настройки вы можете в любой момент нажав Setting ID, сам я об этом достаточно долго не знал, поэтому думаю кому-то точно пригодится.

Далее необходимо создать шрифт, для вывода на экране текстовой информации

Не забудьте задать имя фона, иначе в итоге вы сами запутаетесь в шрифтах и их размерах, поменять, удалить шрифт можно в поле Fonts, и если там не будет ни одного шрифта — выводить текст на экран вы не сможете.

На этом начальная настройка среды разработки закончена и можно начинать работать с экраном Дальше обзор будет касаться экрана Nextion Enchanted NX4024K032 Первым делом я сделал анимацию на экран, поскольку делал подобное для старой версии без выводов gpio и RTC на борту.Прокрутка gif анимацииДля начала анимацию нужно нарисовать или скачать, т.к. рисовать я не обучен, то мне пришлось именно скачать, картинка кликабельна. Дальше придется анимацию разбивать покадрово, для этого я пользуюсь онлайн сервисом И после его применения я получил 6 пошаговых изображений, которые мне предстоит прокрутить на экране. Добавляем изображения в среду разработки, нажав на плюс в поле picture

Чтобы добавить анимацию в поле экрана добавляем инструмент Picture, а для прокрутки инструменты Timer и Variable

В свойствах какого-либо инструмента есть черные и зеленые поля, на примере инструмента p0 это поле «pic», его мы можем изменять при помощи внешнего устройства, к примеру ардуино, но это немного позже, в этом примере изображения будут меняться через фиксированный промежуток времени по таймеру. Для этого зададим pic=0, а в таймере напишем следующий код:

После каждого тика таймера переменная va0 увеличивается на единицу и ее значение присваивается полю pic инструмента p0 до тех пор пока не прокрутятся все изображения анимации. Если анимация закончена все начинается по новой с нулевой картинки. Этот кусочек кода крайне капризен в плане лишних пробелов, скобок не на той строке и т.д., так что будьте внимательны, поскольку такова особенность среды разработки. Обратите внимание, то в свойствах таймера есть два зеленых поля: tim — время на тик en — включение-выключение таймера (1/0) Т.е. вы сможете запускать/останавливать анимацию командой с ардуино и менять ее скорость либо изменять скорость любых событий, завязанных на таймер. Все, анимация готова, ее можно просмотреть в эмуляторе и поиграть со скоростью прокрутки.Ссылка на файл проекта с анимациейПрошивка экрана через sd картуПереносить проект на экран удобнее с помощью sd карты, открываем директорию с проектом, записываем на пустую sd карту (FAT32, в моем случае 8Гб). Отключаем питание, вставляем sd, включаем питание, ждем окончания прошивки, выключаем питание, вынимаем sd.

Занимает в разы меньше времени, чем через USB-UART переходник Далее я подключил экран к ардуине. Обработка нажатия на экранЗдесь два варианта развития событий, либо вы пользуетесь двухсторонней связью экран-ардуино либо только передаете данные в ардуино. Во втором случае вы можете вообще обойтись без библиотек и обрабатывать только посылки формата 65 2 2 0 ffff ffff ffff (событие_номер страницы_id элемента_значение_конец посылки) Вот выдержка из описания дисплэя 65: This message is a touch event 0: The page ID is 0 2: Component ID (the number of the first button in the Editor) 0: Type of event. A «0» means a Release event, A «1» is a Press event FFFF FFFF FFFF: The end of message pattern

У каждого нажатия они свои, поэтому особых проблем возникнуть не должно и экран станет красивым пультом управления с возможностью анимации иконки при нажатии, но без обратной связи, в противном случае библиотека необходима для удобства работы. По сути вам достаточно добавить любой кликабельный элемент, например кнопку, и поставить галочку во вкладке Event Причем код экран может отправлять как при нажатии на кнопку (Press Event), так и при событии, когда вы убираете палец с кнопки (Release Event) Вы можете посмотреть результат нажатия на терминале запустив соответствующий пример из библиотеки либо в эмуляторе Собственно вот что получится на выходе, если запустить симулятор Далее я запустил пример из библиотеки для кнопки К сожалению описания что он должен делать нет, как всегда, собственно, поэтому приходится разбираться самому Этот кусочек кода из библиотеки дает понятие какие аргументы принимает функция, с большой вероятностью так придется просматривать все функции библиотеки. Итак, разбираем кусок if if (message == «65 0 2 0 ffff ffff ffff») { //если получаем код нажатой кнопки myNextion.buttonToggle(button2State, «b1», 0, 2);//меняем цвет (фон) кнопки Предпочел бы прочитать это в комментариях к нему, но не догадываться самому. Как итог пример не заработал ))) Но если заменить buttonToggle на что попроще то получится пример, который обрабатывает нажатие 2х кнопок ON и OFF для светодиода, для полноты ощущений еще и меняет надписи на кнопках со стандартных на нужные:Дополнительная информация Результат работы кода: при нажатии на кнопку на ней меняется надпись на «ON» и загорается диод на 13 ноге, вторая кнопка его выключает. Думаю как поймать момент нажатия понятно, а вот с обработкой события еще нужно будет разбираться, в любом случае библиотека не единственная, но самая простая в обращении и я хочу понять именно ее, помощь приветствуется.Обновление текстового поля через arduinoДля начала добавим инструмент Text посмотрим в его свойствах значение txt-maxl — это максимальное количество символов в этом поле, если символов будет больше, отображаться они не будут. Пример из библиотеки UpdateText меняет надписи текстового поля с Hello на 1234 каждую секунду. Я чисто для проформы написал цикл чтобы он считал до 100 Как итог вроде все работает Теперь кратко о том, для чего все затевалось. А затевалось это для того, чтобы пробудить интерес к работе с экраном у тех у кого он уже есть, поскольку мне явно может понадобиться помощь в процессе его освоения, вторая причина поделиться тем, что я уже понял и сумел сделать, причем на данном примитиве я останавливаться не хочу, по сути все это я сделал на вечер воскресенья. Теперь о том с какой целью покупался экран: будет некое устройство, у которого должна быть панель состояния, по обстоятельствам туда же будет выводиться время, дата, температура, влажность, освещенность, а самое главное уровень заряда аккумулятора + будет возможность ввести показатели время запуска, длительность работы до отключения. А я маленький Наполеон =) По сути все можно на 2004 экране сделать, но мы не ищем легких путей. Что будет подключаться к ардуине помимо дисплея в ближайшее время (для начала) INA219 для измерения напряжения Аккумулятор 3х18650 + контроллер заряда Это все буду пробовать на следующих выходных, так что часть вторая будет не последней, так что у кого есть какие-то примеры, мысли и результаты я бы хотел об этом узнать. Полезные ссылки:Nextion Instruction Setopenhardware.gridshield.net/home/nextion-example-code-functionsopenhardware.gridshield.net/home/nextion-lcd-getting-started-for-arduinoИспользуемые источники: