Как прошить дисплей nextion

Обновлено: 07.01.2025

Это обусловлено тем, что у данного дисплея есть ряд преимуществ:

1. Собственный редактор прошивки Nextion Editor. В котором достаточно просто сделать интерфейс, при этом не нужно много писать кода.

2. Сенсорный экран. Все активные элементы привязываются автоматически и нет требуется калибровка. Все дисплеи идут откалиброванные с завода.

3. Не расходует мощности нашей Arduino. Так как дисплей оснащен своим микроконтроллером.

Минусы на мой взгляд:

1. Резистивный сенсор. Срабатывает только при нажатии. Что достаточно не привычно. Но при этом срабатывает достаточно быстро и точно.

2. Ограничения разработки возможностью редактора nextion editor . Некоторые задачи не возможно реализовать. Или приходиться делать костыли.

3. Nextion Editor достаточно коряво выводит русские буквы и нет переноса по словам. Только буквенный перенос на новую строчку для любого шрифта.

4. Не поддерживаются картинки с прозрачным фоном . Заливает их черным фоном.

Но это не так критично. Сделать можно очень красивые и сложные панели управления.

Также можно установить Nextion Editor на OS Linux . Я установил на Ubuntu. Для этого устанавливаем PlayOnLinux. Ищем наше приложения.

Нажимаем установить и программа PlayOnLinux автоматически все установит.

После установки запускаем программу. Создаем новый проект для этого в пункте меню выбираем New, вводим название проекта lesson-one и сохраняем. Наш проект будет сохранен в файл lesson-one. hmi. В окне Setting во вкладке Device выберем модель дисплея.

Во вкладке Display выбираем ориентацию дисплея и кодировку iso-8859-5, для поддержки русского языка. Во вкладке project можно установить пароль для доступ к проекту.

После создания проекта откроется рабочее поле

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

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

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

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

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

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

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

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

Давайте добавим картинку в наш проект на Arduino для этого воспользуемся вкладкой загрузки изображений в проект. Загружать нужно картинки соответственного размер. Если разрешение вашего экрана 480х320. Картинка должна быть такого же размера. Программа не умеет подгонять размеры картинок. Это касается и других элементов.

Также не поддерживается прозрачный фон, он его заливает черным цветом.

Основные элементы
— Добавить изображение. При нажатии этой кнопки откроется стандартное окно выбора файла изображения на диске.
— Вставить новое изображение перед выделенным.
— Опустить изображение в списке вниз.
— удалить все изображения.

Сейчас мы можем использовать наше изображение в проект.

Давайте сделаем его фоном нашей первой страницы.

Поменяем свойства страницы pages0, sta на image и выберем нашу картинку.

Наш первый проект готов.

Нажимаем кнопку Debug в панели меню. В новом окне откроется пример, как это будет отображаться на дисплее Nextion.

Давайте переименуем страницу с нашим логотипом на Logo. В следующем уроке расскажу для чего я это сделал.

И еще один небольшой нюанс использования программы Nextion Editor . Пока вы не нажмете кнопку Debug или Compile. Бинарный файл для прошивке не обновиться. Можно сделать много изменения, загрузить на дисплей, а изменений нет. Возможно это в моей версии программы или в Linux она себя так ведет. Но у меня такая ситуация была.

Прошить дисплей Nextion можно двумя способами:

1. С помощью UART программатора. Для прошивки воспользуйтесь пунктом меню Upload. Это достаточно долгий процесс. И в Linux нужно заморочиться с портами. Поэтому я пользуюсь вторым способом.

2. П рошивка с Sd карты . Для этого в пункте меню file выбираем open builed folder.

Выбираем файл lesson-one.tft и копируем его на карту памяти. Карту предварительно нужно отформатировать в формате FAT32. Карта памяти должна быть 10 класса.

Прошивка дисплея Nextion.

Отключаем дисплей. Ставим флешку. Подаем питание на дисплей. Если у вас дисплей задумался и после вывел демонстрационную информацию. Ваша флешка не подходит. Если загрузил экран на котором показывает скорость 9600 и больше ни чего не происходит значит у вас на флешке есть постороннии файлы.

При прошивке у вас побегут проценты загрузки прошивки. При завершении прошивка. Отключите дисплей. Достаем флешку. И можно пользоваться дисплее.

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

Создавать проекты, и загружать картинки в Nextion Editor мы научились в предыдущем уроке. Сегодня продолжаем осваивать работу с дисплеем Nextion, также подключим данный устройство к Arduino.

Но прежде чем начать сегодняшний урок хотелось бы напомнить некоторые особенности работы с дисплеям.

Знание которых поможет вам сэкономить время при разработке проектов:

1. Команды заканчивается тремя байтами "0xff 0xff 0xff"
2. Все команды и параметры находятся в ASCII
3. Все команды написаны строчными буквами.

Любая электроника нуждается в корпусе, исполнительном механизме. Где же заказать изготовление деталей? Для данных работ отлично подойдет ООО «М-Техника».

Основные направления деятельности компании:

изготовление деталей и металлических изделий различной сложности;
нанесение защитных и декоративных покрытий гальваническим способом на металлоизделия заказчика;
термообработка металлоизделий;

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

Добавляем страницу с названием Button.

Сейчас у нас есть 2 страницы. Как же нам сделать переключения между страницами. Переключает между страницами можно командой:

Переключение происходит по имени страницы или по ее индикатору. Для меня проще по имении. Вы можете использовать и по индексу страница.

Куда же добавить данную команду?
В данном уроке мы сделаем переключение со страница Logo с задержкой в 3 сек на страницу Button.
Для этого нажмем на страницу Logo и в обработчике событий загрузки страницы добавим следующие строки.

Первая строка delay=3000 работает аналогично delay() в Arduino IDE. Задержка 3000 мс.

Все параметры и команды вы можете посмотреть в официальной документации. Здесь есть кое-какие ошибки в синтаксисе. Но описано все подробно.

Давайте сделаем индикатор загрузки, через сколько мы будем перенаправлены на с траницу Button. Для этого добавим прогресс бар, и в его свойствах добавим цикл.

Как поменять цвет прогресс бара, и прочие настройки расскажу в видео.

Из цикла видно, что мы добавляем по 1 к свойству j0.val. Это значение заполнения школы в свойствах прогресс бара.

Прогресс бар. Отображает заполненную на заданное значение процентов линейку.

Sta – возможные значения: solid color и image
dez – направление. Возможные значения:
- horizontal – по горизонтали
- vertical – по вертикали
Прогресс бар не будет обновляться если не добавить переменную

doevents //обновление экрана во время цикла

Приветственная страница готово.

Оформим страницу Button.

Добавим прогресс бар и кнопку с двумя состояниями.

-Кнопка с двумя положениями.
- bco0 – цвет переключателя в положении 0. Этот атрибут появляется при выборе значения solid color в атрибуте sta
- bco1 – цвет переключателя в положении 1. Этот атрибут появляется при выборе значения solid color в атрибуте sta
- pic0 – индекс картинки переключателя в положении 0. Этот атрибут появляется при выборе значения image в атрибуте sta
- pic1 – индекс картинки переключателя в положении 1. Этот атрибут появляется при выборе значения image в атрибуте sta
- picс0 – индекс вырезанной картинки переключателя в положении 0. Этот атрибут появляется при выборе значения crop image в атрибуте sta
- picс1 – индекс вырезанной переключателя в положении 1. Этот атрибут появляется при выборе значения crop image в атрибуте sta
- val – положение переключателя. Возможные значения 0 и 1
- x и y – координаты вставки кнопки
- w и h – ширина и высота кнопки.
В атрибутах кнопки sta поменяем значение на image. И подгрузим картинки в поля: pic0 и pic1.

В свойствах кнопки добавим такой код, который отправится на Arduino при нажатии.

Просто я не использую стандартную библиотеку Nextion.h. Поэтому формировать команды нужно вручную. Но на мой взгляд это оправданно. Как вы считаете, пишите в комментариях.

С дизайном и подготовкой в Nextion Editor закончили. Сейчас нашу прошивку можно загрузить в дисплей.
Подключаем дисплей Nextion к Arduino NANO по схеме.

Подключение к Arduino UNO аналогично.

Скетч также подойдет для обоих плат. При желании можно использовать и на A rduino MEGA, ESP32, ESP8266 и пр.

У данной платы всего 1 аппаратный Serial Port. Будем использовать программный порт. Для этого нужно установить и подключить библиотеку SoftwareSerial.h.

Следующие две функции формируют и отправляют цифровые параметры на дисплей.

Здесь мы считываем полученные параметры и сравниваем, если пришла команда то выполняем.

Эта строчка отправляет состояние кнопки на дисплей. Для чего это нужно? Чтобы не получилось так, что на дисплее кнопка нажата, а светодиод не горит.

Сегодня в уроке научимся делать анимацию и выводить ее на дисплей Nextion. Вся программная часть будет реализована с использованием возможностей Nextion Editor, без использования Arduino.

Подготавливаем картинки для вывода анимации на экран Nextion.

Nextion display не умеет выводить gif анимацию или видео на экран. Это касается старых моделей. Новые модели, скорее всего, умеют воспроизводить видео и звук, так как в Nextion Editor появились инструменты позволяющие добавлять элементы медиа. Но у меня нет таких дисплеев, поэтому будем делать анимацию по старинке. То есть покадрово. Для того, чтобы разбить gif анимацию на кадры я использую онлайн сервис picasion.

Внизу статьи вы можете скачать gif анимацию, которую я использовал. А также для самых ленивых прикрепил архивы с разобранной анимацией по кадрам.

Анимация процесса загрузки.

Самая простая анимация, но при этом одна из самых распространенных - это анимация загрузки. Для начала создадим новый проект в Nextion Editor, если вы не знаете, как это сделать, смотрите урок: Nextion Editor урок 1. Скачиваем и первый пример hmi.

Затем загрузим картинки для анимации. Для этого в панели Picture 1 - нажмем на кнопку в виде плюса. В отрывшемся окне 2 выберем нужные картинки и нажмем на копку «Открыть» – 3 .

У нас получиться список картинок с порядковыми номерами от 0 до 51, которые мы и будем использовать.

В панели инструментов «Toolbox» выбираем элемент «Timer», этот элемент невидимый и он появиться в панели элементов данного типа.

Выбираем элемент «Timer», его название - tm0. Установим значение 50 в параметре tim, это интервал срабатывания в миллисекундах, то есть картинка будет меняться каждые 50 мс. Теперь нам нужно написать код, который будет обновлять картинки, это будет небольшое условие.

На поле экрана нужно добавить картинкус номером 0. Это будет первый кадр.

Можно проверять Nextion пример анимации.

Две кнопки по краям это просто перенаправление на другие страницы урока. Nextion hmi и tft nextion можно скачать внизу статьи, в разделе материалы для скачивания.

Эквалайзер при воспроизведении музыки.

Второй пример основан на первом. Загружаем nextion картинки и добавляем таймер.

Мы уже знаем, что данная анимация будет повторяться постоянно. Как же ее нам остановить, например, при нажатии кнопки? Для этого достаточно остановить таймер, и, при необходимости, снова запустить.

Давайте загрузим картинки для кнопок.

И добавим нужные элементы в проект.

следующий код для нажатия кнопки.

Будем включать и выключать таймер 0, а также менять картинку кнопки.

Еще один nextion пример готов.Осталось запустить и проверить.

Nextion hmi и tft nextion можно скачать внизу статьи, в разделе материалы для скачивания.

Анимация по времени.

В проектах часто приходится делать вывод времени и обработку событий по определённому расписанию или через определённый интервал. В следующем примере будем производить отсчет времени на дисплее nextion без использования Ардуино. Для этого разместим элементы на экране.

Загрузим картинки для кнопок и для анимации.

Анимация тут будет без повтора, поэтому код будет видоизменен.

Также добавим второй таймер и переменную. На панели невидимых элементов это будет выглядеть вот так.

Переменная va0 остается без изменений, а параметр val должен быть равен 0.

таймера пропишем вот такой код.

Интервал tim для второго счетчика устанавливаем 500 мс. Рассмотрим код подробнее.

Если мы оставим только лишь эти строки, то мы увидим мигание точек у часов. Картинки 96 и 97 -это токи и просто белый фон. Они меняются местами с интервалом в пол секунды.

n0.val++ - добавляет ежесекундно «1» к числу в данном поле. И мы видим секунды на наших импровизированных часах.

va0.val=n0.val%10 получаем остаток от деления на 10 и сохраняем в переменнуюva0.val.

Когда время достигло 60 сек., то меняем значение на 10. Но по-хорошему это должен быть 0. Тогда будет полноценное изменение времени. Тут можно добавить прибавление минут ко второму числу часов, но я не стал писать много кода, чтобы было более понятно.

Тут мы проверяем, какое значение в нашей переменной. Если остаток от деления равен 0, тогда задаём начальную картинку анимации, что автоматически запустит анимацию. Это прописано в нашем первом таймере. Если остаток от деления равен 2, то выводим белую картинку. Это закрывает последний кадр анимации.

По данному алгоритму анимация повторяется каждые 10 секунд. «Интервал», «время» и прочие параметры можно настроить и дописать для решения вашей задачи.

Чтобы запустить анимацию с использованием Arduino достаточно отправит на nextion display

значения для включения таймера.Как это сделать смотрите в nextion уроке: Дисплей Nextion урок 2. Подключаем и передаем данные на Arduino.

Если вам интересна эта тема, смотрите мой проект часов: Часы на Arduino и дисплее Nextion с выводом температуры и влажности. В данном проекте нашел пару недочётов, скоро будет доработанная версия с еще большим функционалом.

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

Не забывайте подписываться на канал Youtube и вступайте в группы в Вконтакте и Facebook.

Батарейка литиевая таблетка CR1220, 1 шт.

Плата расширения Nextion I/O

Адаптер Nextion I/O
Общие сведения

Цветной графический дисплей Nextion 2.8 TFT 320x240 (с Touch-screen) — это дисплейный модуль NX3224K028_011 из линейного рядя Enhanced дисплеев Nextion. Дисплей оснащён цветным TFT сенсорным экраном, контроллером touchScreen, flash-памятью на 16 Мб и 32 разрядным микроконтроллером с тактовой частотой 48 МГц. Дисплей линейки Enhanced дополнительно оснащены часами реального времени и выводами GPIO, что позволяет использовать их, как совместно с Arduino (подключая дисплей к Arduino по шине UART), так и отдельно (подключая кнопки, светодиоды, реле и т.д. напрямую к выводам GPIO дисплеев). Разъем SD-карт памяти можно использовать для загрузки Ваших программ в дисплей.

Видео

Характеристики

Подключение
- Для подключения дисплея к Arduino можно воспользоваться как аппаратной шиной UATR (№ выводов TX и RX Arduino указаны на плате), так и программной шиной UART (№ выводов TX и RX Arduino назначаются в скетче ). Вывод TX дисплея подключается к выводу RX Arduino, вывод RX дисплея подключается к выводу TX Arduino.
- Для подключения дисплея к компьютеру нужен адаптер USB-UART. Вывод TX дисплея подключается к выводу RX адаптера, вывод RX дисплея подключается к выводу TX адаптера. В место отдельного адаптера USB-UART, можно использовать контроллер Arduino, о чем рассказано в статье Wiki - Используем Arduino как USB - UART преобразователь .
- К выводам JPIO дисплея можно подключать устройства для управления ими, или получения данных с этих устройств. .
Питание

Напряжение питания 5 В постоянного тока подаётся на выводы +5V и GND дисплея.

Подробнее о дисплее

Дисплеи Nextion имеют ряд преимуществ перед обычными TFT дисплеями:
- Высокая скорость и качество отрисовки графической информации, так как картинки загружаются в flash-память дисплея вместе с интерфейсом пользователя, а их дальнейшая выгрузка и передача на экран ложится на встроенный микроконтроллер.
- Нет необходимости в калибровке touchScreen
- Созданный Вами интерфейс пользователя не занимает ни байта памяти внешних контроллеров, таких как Arduino, Rasbery Pi и т.д.
Программа Nextion Editor позволяет создавать интерфейсы пользователя из различных библиотечных элементов (кнопки, слайдеры, картинки, графики, текст и т.д.), и прописать алгоритм поведения дисплея (написав код для событий элементов участвующих в интерфейсе дисплея). Для проверки работы написанного Вами кода нет необходимости загружать данные в дисплей, так как в программе имеется встроенный эмулятор, который отображает не только поведение элементов интерфейса, но и получает/отображает принимаемые/возвращаемые данные по шине UART.

Читайте также: