Отзыв на Touch-дисплей Nextion

При создании разных устройств на микроконтроллерах очень часто появляется задача отображения информации. Для этого используются простые LCD-экраны, наиболее популярный на базе контроллера HD44780. В более совершенных устройствах часто можно видеть мониторы от Nokia 5110. Большая часть радиолюбительских разработок создается с применением простых 8-ми битных микроконтроллеров AVR, PIC. И если есть необходимость подключить цветной LCD экран, да еще и с тач-панелью к такому микроконтроллеру, то как минимум необходим аппаратный контроллер, библиотеки для него и др. Библиотеки, документация и простота взаимодействия с LCD-дисплеем и тач-панелью имеют особое значение. И вот на краудфандинговой платформе Indiegogo появился интересный проект LCD дисплея с тач сенсором и контроллером, который подключается по обычному UART-интерфейсу, имеет простую и достаточно функциональную среду проектирования интерфейса и взаимодействия с пользователем «Nextion Editor IDE». При заявленных 20000 долларах проект собрал более 45000 долларов.
И вот в этом видео студия «Паяльник-ТВ» делает обзор (и, соответственно, дает свой отзыв) прототипов данных дисплеев размерами 2.4” и 4.3”. Подключаются они к микроконтроллеру питание +5Вольт, общий и две линии UART RX и TX (прием и передача данных). Для взаимодействия с дисплеем по UART есть команды, представлены в документации. Что позволяет подключить дисплей к простейшим 8-ми битным микроконтроллерам, к компьютеру через преобразователь уровней и к тем же мини-ПК на базе Linux, к примеру к Cubieboard, Banana и др., почти у всех них есть UART-интерфейс. Дисплеи имеют контроллеры для отображения информации, память и другое железо, а также слот микро-SD для того, чтобы перенести проект интерфейса во флэш-память, который проектируется и затем компилируется в визуальной среде разработки Nextion Editor.
Видео будет разбито на 2 части – в первой части описан простой вывод данных на дисплей, листание экранов, отображение различных изображений и элементов, работа со шрифтами и т.д. Во второй части – взаимодействие с пользователем, с оператором – ввод данных, обработка событий от нажатия кнопок, передача данных в контроллер и т.д.

Отобразим на LCD какие-либо простые элементы, часть из которых будет показывать данные с UART микроконтроллера. В нашем случае это Arduino. Мы видим фоновую картинку, прогресс-бар, его текстовое значение с меняющимся цветом, надпись PayalnikTV и слева картинка, тоже меняющаяся случайно логотип канала Паяльник-TV.
Перед нами редактор Nextion. Откроем для примера какой-нибудь проект. И пробежимся по интерфейсу программы. Вот есть проект станции погодной. Итак Display – это рабочее поле, где мы работаем с проектом. Pictures и Fonts – картинки, которые будут использоваться в проекте и шрифты. Можем добавлять, удалять и так далее. В одном проекте может быть несколько страниц, которые можно менять как с контроллера, так и простейшими командами при взаимодействии с экранными элементами – кнопками к примеру.
Далее параметры обьекта. Имя объекта и различные свойства – цвет, шрифты, выравнивание и др. Внизу отладочная информация и обработчики событий. Удалив страницу, посмотрим какие элементы поддерживает редактор. Текст, кнопка, прогресс-бар, картинка, кроп от картинки, область нажатия и стрелка по кругу.
Начнем с текста. Добавим новую страничку. Можно сделать серый фон. Добавим текстовый компонент. Можно изменять размер, шрифты. В свойствах можем задавать их. У текста и других элементов можем менять фон.
Следующий компонент это Button – кнопка. Тут в принципе все тоже самое. Только добавляется BCO2 и PCO2. То есть, это когда мы нажимаем на кнопку. B0 – это имя объекта, чтобы взаимодействовать с ним при помощи микроконтроллера.

Далее прогресс-бар. Может быть горизонтальный или вертикальный. Вот сейчас у нас вертикальный. Также можем менять цвета, использовать картинку. VAL – это значение прогресс-бара, от 0 до 100.
Следующий компонент pictures – картинка. Нажимаем PIC и отображается банк картинок, откуда можем вставить нужную картинку. Следующий компонент – это CROP от картинки.
Это touch area – зона нажатия. Т.е. когда нам нужно будет в микроконтроллере отслеживать координаты, можно использовать этот элемент.
Gauges – это стрелка. Свойство VAL (Value) может принимать значение от 0 до 360. Это градусы. 360 – это полный оборот. WID – это толщина, от 1 до 5.
Имеется кнопка компиляции.
Теперь создадим проект. Нажимаем NEW, вводим имя проекта и выбираем разрешение. Для дисплея 2.4 дюйма 320х240, для дисплея 4.3 дюйма 480×272 пикселей. Ориентацию можно горизонтальную или вертикальную. Все, вот проект.
В дальнейшем компания ITEAD планирует выпустить другие дисплеи 2.8”, 5”, 7”. В проекте, как мы уже видели в конечном варианте используются картинки, поэтому мы должны добавить в начале в банк картинок все используемые изображения. Фоновое изображение.
Далее для текста нужны шрифты. Необходимо их сгенерировать. Выбираем 24 размер, кириллицы пока что нет. Расширение – ZI. Закрываем, добавляем, смотрим. Добавляем background.
Давайте добавим прогресс-бар. Следующим этапом мы добавляем картинку, которая у нас будет динамически меняться случайным образом. К примеру 0. Располагаем ее. Все готово. И добавляем текстовый элемент на котором у нас будет выводиться значение прогресс-бара. Задаем шрифт. Добавим статический текст. Простой пример готов.
Можем сохранить, компилируем и переходим в Build Folder. Здесь мы видим файлик cxem3 с расширением TFT, который нужно перенести на SD-карту и на LCD-экран, чтобы тот скопировал в свою флэш-память.
Далее разберем программку для Arduino IDE. Взаимодействовать просто – зная ID-ник элемента, как мы помним t0 – это текстовый компонент, прогресс-бар у нас был там j0, картинка – p0. Т.е. зная ID элемента мы можем менять свойства через UART-интерфейс. В комментариях показано для примера, т.е. чтобы поменять текст у компонента t0, мы просто должны послать вот такую вот последовательность t0.txt=”текс наш”. Если мы хотим поменять страничку, нужно послать просто page, пробел, номер странички (0, 1, 2, 3 и т.д.).
Также можем менять различные параметры, цвет, номера картинок и т.д. К примеру хотим изменить значение прогрессбара (j0 у нас ID был). Мы должны послать вот такую вот последовательность. Хотим поменять цвет текста – посылаем вот такую t1.pco=2016. И в конце каждой команды посылаем вот такую последовательность. В принципе разработчики предоставили библиотеку, вот она здесь подключается HPI.
В скетче показано 2 варианта взаимодействия – через библиотеку и напрямую через UART. Т.к. библиотека еще сырая, и некоторых функций к примеру смены цвета пока что еще разработчики не внедрили. Ну что касается логики программы, то тут не так уж и сложно. Вот у нас переменная bar, которая при каждом прохождении цикла увеличивается на 5 и выводится в текстовом компоненте t0 и в прогрессбаре j0. Как только превысило значение 100, она у нас обнуляется, также в этом условии случайным образом выводится одна из трех картинок при помощи библиотечных функций и генерируется случайный цвет для фона BCO и для самого текста PCO. Вот в принципе и вся программа.
Итак скетч закачали в платку, подключаем теперь питание и смотрим за элементами, которые у нас должны меняться. Вот он наш t0, картинка меняется и прогресс-бар, значение прогресс-бара. Здесь у нас меняется текстовый элемент от 0 до 100, что соответствует прогресс-бару и цвета. И случайным образом картинка. Фоновая картинка статическая, также ка и надпись t1. Что касается стоимости, то на сайте написано, что комплект за 2 экрана с бесплатной доставкой почтой оценивается в 50 долларов. В следующем видео показано, как взаимодействовать с динамическими элементами, т.е. мы отобразим какие-нибудь кнопочки, может быть сделаем какой-нибудь проект с датчиками или что-нибудь подключим. И уже будет у нас более полноценное взаимодействие с экранчиком, т.е. задействуем его touch-способности. На этом обзор Nextion подошел к концу, спасибо за внимание.

Вторая часть видеоотзыва.

Скачать Проект HMI и скетч для Arduino
Скачать Nextion IDE 0.9

Есть интересная статья о светящемся мониторе.