Данная статья представляет собой подробное методическое руководство по освоению сенсорных дисплеев Nextion. В материале рассматриваются этапы создания пользовательского интерфейса в среде Nextion Editor, включая работу с графикой, шрифтами и элементами управления. Также приводится практическая часть по интеграции дисплея с микроконтроллером Arduino Uno с использованием визуальной среды программирования FLProg для управления внешними устройствами.
Цель работы
Изучить функциональные возможности сенсорного дисплея Nextion и приобрести навыки его программирования.
Необходимые детали и компоненты для выполнения проверочного задания:
- микроконтроллерный модуль Arduino Uno;
- сенсорный дисплей Nextion (при наличии возможности);
- карта памяти microSD;
- беспаечная макетная плата;
- 3 светодиода;
- провода (джамперы);
- USB-кабель;
- 3 резистора на 220 Ом.
11.1 Общие сведения
Цветные TFT дисплеи Nextion это модули, оснащённые 32-разрядным микроконтроллером, контроллером сенсорного экрана, флеш-памятью, часами реального времени и разъемами: SD-карты, шины UART и выводов GPIO.
Модули дисплеев способны самостоятельно обрабатывать поступающую информацию (касание элементов экрана и команды поступающие по шине UART), управлять элементами экрана (менять картинки, текст, цвет, состояние кнопок, положение слайдеров, выводить время, значение таймеров и переменных, и т.д.) и управлять внешними устройствами (отправлять команды по шине UART, управлять выводами GPIO).
Программа Nextion Editor для работы с дисплеями Nextion позволяет создать как интерфейс пользователя (используя различные библиотечные элементы: кнопки, слайдеры, картинки, графики, текст и т.д.), так и прописать алгоритм поведения дисплея (написав код для различных событий элементов участвующих в интерфейсе дисплея). Для проверки работы написанного Вами кода нет необходимости загружать данные в дисплей, так как в программе имеется встроенный эмулятор, который отображает не только поведение элементов интерфейса, но и получает/отображает принимаемые/возвращаемые данные по шине UART.
11.2 Создание интерфейса в Nextion Editor
Для создания интерфейса дисплея требуется скачать и установить программу Nextion Editor V1.61.1 с официального сайта.
Зайдите на сайт Nextion (https://nextion.tech/nextion-editor/#_section1), нажмите на кнопку «EXE DOWNLOAD» и согласитесь с установкой программы. Запустите программу Nextion Editor, после её установки на Ваш компьютер.
Создадим новый проект выбрав пункт меню «File > New» > Proj1.HMI. При создании проекта откроется окно для выбора директории и имени создаваемого файла проекта. Укажите их и нажмите на кнопку «Сохранить».
Откроется окно настроек «Setting» для выбора типа используемого в проекте дисплея. Для дисплея Nextion 240×400 3,2” нужно выбрать линейку дисплеев «Basic» и модель «NX4024T032_11», после чего нажать на вкладку «DISPLAY» для перехода к выбору ориентации дисплея.
Выберите требуемую ориентацию дисплея (в примере используется горизонтальная ориентация — 90) и кодовую страницу для вывода текста (кириллицу поддерживает кодовая страница iso-8859-5). После чего подтвердите свой выбор нажав на кнопку «Ok».
Теперь все окна программы станут активными.
Вернуться к окну «Setting» для изменения типа дисплея, его ориентации и кодовой страницы можно нажав на кнопку «Device» в главном меню редактора.
Для первого знакомства с Nextion Editor наибольший интерес представляет окно библиотеки элементов, в нем содержатся элементы, которые можно размещать на экране дисплея:
- Text — текстовое поле
- Scrolling text — текстовое поле с прокруткой (бегущая строка)
- Number — поле с числовыми значениями
- Button — кнопка без фиксации
- Progress bar – область, заполненная на заданное значение %
- Picture — картинка (отображает изображение, выбранное из списка загруженных картинок)
- Crop — часть картинки (область, вырезанная из указанной картинки)
- Hotspot — невидимая кнопка
- Gauge — стрелка
- Waveform — поле построения графика по точкам
- Slider — слайдер, это область с ползунком который можно двигать
- Timer — размещается под экраном, вызывает событие через определённые промежутки времени
- Variable — размещается под экраном, переменная для хранения данных
- Dual-state button — кнопка с фиксацией
- Checkbox — флажок (поле множественного выбора)
- Radio — переключатель (поле одиночного выбора)
В проекте будут использоваться картинки и шрифты, которые можно загрузить в проект по ссылке (https://disk.yandex.ru/d/yWXiNyfeH9EWnQ). Загруженные картинки и шрифты можно увидеть в окне со списком загруженных картинок и шрифтов. В процессе создания интерфейса, картинки и шрифты можно добавлять, удалять, и заменять.
Загрузим в проект картинки нажав на кнопку «Add» (Добавить) в окне «Picture». Обратите внимание на то, что в нижней части окна должна быть активна вкладка «Picture», а не «Fonts».
Откроется окно выбора файлов. Укажите путь к папке с файлами картинок, выделите все картинки, которые требуется добавить в проект, и нажмите на кнопку «Открыть». Программа выдаст сообщение «import successfully 7 pieces» информируя Вас об успешной загрузке семи картинок.
Теперь в окне «Picture» появился список из 7 картинок, которым вместо имён присвоены номера от 0 до 6, после номера указан размер картинок в пикселях. Если Вы захотите использовать картинку в элементах проекта, нужно будет указать её номер из этого списка.
Нажмите на вкладку «Fonts» в нижней части списка загруженных картинок, для перехода от списка загруженных картинок к списку загруженных шрифтов.
Окно «Picture» заменилось на окно «Fonts» список шрифтов которого пуст, так как шрифты еще не загружены в проект. Загрузить можно только шрифты с расширением «*.zi», если у Вас таких шрифтов нет, то их можно создать из любого шрифта установленного на Вашем компьютере.
Для создания шрифта откроем генератор шрифтов из пункта меню «Tools > Font Generator».
В окне генератора шрифтов нужно выбрать имя системного шрифта (в поле «Preview Area») который Вы хотите использовать, высоту для создаваемого шрифта (в поле «Height») и придумать имя создаваемого шрифта (в поле «Font Name»). Если требуется, то можно изменить кодировку (в поле «Code») и выбрать полужирное начертание (установив галочку «Bold»). После чего создать шрифт нажав на кнопку «Generate font».
Откроется окно сохранения файла. Укажите путь к папке, в которую Вы желаете сохранить файл сгенерированного шрифта, и имя файла, после чего нажмите на кнопку «Сохранить».
Чтоб не запутаться, лучше использовать папку, в которой находится файл проекта, а в качестве имени файла использовать название системного шрифта.
Теперь можно загрузить шрифт (шрифты) в список шрифтов проекта нажав на кнопку «Add» (Добавить) в окне «Fonts», так же как Вы ранее добавляли картинки в окне «Picture».
После выбора файла шрифта, в окне «Fonts» появится список из 1 шрифта, которому будет присвоен номер 0, после номера указано имя шрифта, размер символа, кодировка и размер файла. Если Вы захотите использовать шрифт в элементах проекта, нужно будет указать его номер из этого списка. Если вы загрузите еще один шрифт, он отобразится в списке под номером 1 и т.д.
Интерфейс пользователя состоит из элементов. В нашем примере используется два элемента: текстовое поле и кнопка с фиксацией. Так как в примере используется только одна страница «page0», то все элементы будут добавлены именно в неё.
Добавим элемент «Text» (текстовое поле) однократно нажав на нём в окне «Toolbox» (библиотека элементов). Выбранный элемент появится на активной странице и будет виден в области отображения экрана дисплея. Элементу автоматически присвоится имя «t0».
Выберите элемент текстовое поле, находящееся в области отображения экрана дисплея нажав на него мышкой или выбрав поле «t0(Text)» из верхнего списка в окне «Attribute» (редактор атрибутов элементов).
Установим текстовое поле в нужную позицию на экране (присвоив значение атрибутам x=16, y=195). Можно просто перемещать слайдер по экрану мышкой.
Зададим размеры текстового поля по ширине и высоте (w=100, h=30).
Укажем текст, который будет отображаться в поле при старте (txt=»вентиляция»).
Тип шрифта устанавливается присвоением атрибуту «font» номера шрифта. Так как в примере был загружен только один шрифт, то можно присвоить единственный возможный номер (font=0). Номер шрифта можно посмотреть в окне «Fonts» содержащем список загруженных шрифтов.
Назначим область видимости значений текстового поля как глобальная (присвоив атрибуту «vscope» значение «global»).
Можно изменить имя текстового поля присвоив новое значение атрибуту «objname», тогда команды на изменение его атрибутов во время работы, нужно будет отправлять с указанием нового имени.
Значение атрибута «id» изменить нельзя, оно присваивается автоматически по порядку добавления элементов, в нашем примере это: 0-страница, 1-текст, 2-слайдер, 3-кнопка.
После редактирования атрибутов текстового поля, на экране изменятся его положение, внешний вид и размеры.
