Руководства, Инструкции, Бланки

Nextion Editor инструкция

Рейтинг: 4.7/5.0 (103 проголосовавших)

Категория: Инструкции

Описание

Отзыв на Touch-дисплей Nextion - Изобретения

Отзыв на 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

Nextion editor инструкция:

  • скачать
  • скачать
  • Другие статьи

    Урок 1

    Урок 1. Дисплей Nextion 4,3" обзор и первое знакомство с Nextion Editor

    Канал KIRILL NESTEROV https://www.youtube.com/user/llirikks Урок 2 по программированию дисплея NEXTION 4,3" от компании ITEAD STUDIO. В данном уроке я покажу как подключить дисплей к Arduino. Принимать команды от дисплея и обрабатывать. В результате у нас получиться пульт для системы умный дом. Так же в уроке будет использовано управление сторонними устройствами на частоте 433 Мгц с дисплея Nextion/ Купить дисплей Nextion можно на официальном сайте https://www.itead.cc/display.html?cat=154 Получи скидку скидку 7% на все товары Aliexpress Подробней тут https://goo.gl/oJtz7z Nextion купить на Aliexpress http://ali.pub/kfilu На нашем канале Вы найдете огромное количество информации о том как создать систему умный дом с голосовым управлением в своей квартире с минимальным бюджетом. А также найдете информацию о системах защиты своей квартиры и системах экономии электроэнергии. Скачать материалы к уроку smart-home.in.ua/download/arduino/les7.rar Урок 1. Дисплей Nextion, знакомство https://youtu.be/5bIc5ebpD0M Урок 3. Дисплей Nextion и Arduino https://youtu.be/Tfy4JQtU56w Урок. Модули радио управления https://youtu.be/5hgotqYnqtw

    Группа в контакте: https://new.vk.com/electronics_in_camera Ссылки на товары: 1) HMI-дисплей Nextion enhanced 3.5": https://www.itead.cc/nextion-nx4832k035.html?acc=70efdf2ec9b086079795c442636b55fb 2) Плата расширения для дисплеев Nextion enhanced: https://www.itead.cc/nextion-expansion-board.html?acc=70efdf2ec9b086079795c442636b55fb Исходник проекта для AVR (IAR): https://bitbucket.org/nadyrshin_ryu/nextion1_avr/downloads Исходник проекта для STM32 (IAR): https://bitbucket.org/nadyrshin_ryu/nextion1_stm32/downloads Проект дисплея Nextion: https://bitbucket.org/nadyrshin_ryu/nextion1_nex/downloads Дополнительная информация по решениям Nextion HMI: https://www.itead.cc/wiki/Nextion_HMI_Solution Описание модуля NX4832K035: https://www.itead.cc/wiki/NX4832K035 Описание команд, системных переменных дисплеев Nextion: https://www.itead.cc/wiki/Nextion_Instruction_Set

    Ссылки на прошлые обзоры Nextion: https://youtu.be/qZ3jludY3wQ https://youtu.be/6CE7DJEmU4I Ссылка на страницу с описанием всех команд, поддерживаемых дисплеем (регулярно обновляется): https://www.itead.cc/wiki/Nextion_Instruction_Set Другие дисплеи Nextion: https://www.itead.cc/display/nextion.html Пишите в комментариях, куда бы вы применили подобный экран!

    • Очередной обзор устройств от Itead Studio, и сегодня это будет сенсорный дисплей 3,5 дюйма Nextion NX4832K035. И это будет непросто обзор! Также мы рассмотрим программу для создания графической части, и части управления нашего будущего устройства, которая называется Nextion Editor. И попробуем сделать свой собственный кодовый замок с сенсорным управлением! Ссылка на дисплей - https://www.itead.cc/nextion-nx4832k035.html?acc=70efdf2ec9b086079795c442636b55fb USB-TTL - http://alipromo.com/redirect/cpa/o/ocvntuyyjqty61qky33lagwepxfjwif2 Скачать Nextion Editor - http://nextion.itead.cc/download.html Демка - https://www.itead.cc/wiki/File:Enhanced_Nextion_3.5_Demo.zip Обзор дисплея на муське (не мой) - http://mysku.ru/blog/china-stores/43595.html Партнерская сеть BroadBatdTV – http://bbtv.go2cloud.org/SHzr Наш чатик - http://chat.theradioblog.ru/ Группа ВК – https://vk.com/radioblogful Инстаграм - https://instagram.com/radioblogful

    В этом выпуске Ардуино для начинающих расскажу о начале работы с Arduino, рассмотрим самые первые шаги. Что находится на плате, какие выходы, как подключить Arduino и какие источники питания для неё использовать (блоки питания, аккумуляторы), как пользоваться цифровыми и аналоговыми входами и выходами. Научу пользоваться Arduino IDE, писать прошивку и загружать её в Arduino. Также рассмотрим парочку простейших проектов на Arduino, написав очень простой скетч и проверив его в работе. В дальнейшем у меня будет много интересных проектов на Arduino, так что ждите :3 ЎСтатья к этому видео Ў http://alexgyver.ru/arduino-first/ Ў Китайские Arduino и датчики ДЁШЕВО Ў http://alexgyver.ru/arduino_shop/ Драйвер для Nano CH341 https://yadi.sk/d/8Wvbz86NnQc53 Коннектор на 9В батарейку http://ali.pub/5kabu Arduino IDE https://www.arduino.cc/en/Main/Software MariaMole http://dalpix.com/mariamole-download Ў Поддержать канал денежкой Ў http://AlexGyver.ru/support_alex/ ? Официальный сайт: http://AlexGyver.ru/ ? Группа Вконтакте: http://vk.com/diyworkplace ? Наш форум: http://sam0delka.ru/ ? Instagram: https://www.instagram.com/alexgyvershow/ СЛЕДУЮЩИЙ ВЫПУСК https://youtu.be/iX2RpgcXzaA ПРЕДЫДУЩИЙ ВЫПУСК https://www.youtube.com/watch?v=33r4M6YnABs Композиция "Opheliea's Blues" принадлежит исполнителю Audionautix. Лицензия: Creative Commons Attribution (https://creativecommons.org/licenses/by/4.0/). Исполнитель: http://audionautix.com/

    Подписывайся: http://habrahabr.ru/users/radiolok/ http://geektimes.ru/users/radiolok/ https://vk.com/kylibin/ https://plus.google.com/+ArtemKashkanov/ железки от Itead Studio: Беспроводное реле: https://www.itead.cc/smart-home/sonoff-wifi-wireless-switch.html?acc=45c48cce2e2d7fbdea1afc51c7c6ad26 Дисплей basic https://www.itead.cc/display/nextion/nextion-nx8048t050.html?acc=45c48cce2e2d7fbdea1afc51c7c6ad26 Дисплей Advanced https://www.itead.cc/nextion-nx4024k032.html? Модули ESP8266 https://www.itead.cc/esp-12f.html?acc=45c48cce2e2d7fbdea1afc51c7c6ad26 PS: Да куплю я новую камеру, куплю!

    benimle iletisime gecmek isteyen arkadaslar icin mail adreslerim dayfztrk@hotmail.com dayfztrk2235@hotmail.com tayfunozturk@hacettepe.edu.tr

    Обзор Touch-дисплеев 2.4" и 4.3" Nextion компании ITEAD с краудфандинговой платформы indiegogo. Краткий обзор, работа с редактором Nextion IDE, подключение к Arduino по UART-интерфейсу, отображение простейших элементов на дисплее и взаимодействие с контроллером. Исходники и все необходимые ссылки даны на форуме: http://forum.cxem.net/index.php?showtopic=151543 Вторая часть видео: http://youtu.be/6CE7DJEmU4I

    Nextion editor инструкция

    В прошлом уроке я рассказал о панели Nextion HMI и о создании проектов для этой панели в редакторе Nextion Editor.
    В этом уроке я расскажу, как с помощью программы FLProg с платы Arduino управлять этой панелью. Для примера соберём простейшую погодную станцию, которая будет считывать данные с датчика температуры и влажности DHT-22 и отображать их на панели. Так же будет рисоваться график изменения этих параметров. Яркость подсветки экрана панели будет изменяться с помощью переменного резистора.
    Схема тестового стенда.

    Сначала необходимо загрузить проект в панель (файл проекта в архиве ссылка на который в конце статьи – Lesson2.hmi).
    Данный проект состоит из трёх экранов.
    Первый экран служит для отображения температуры (страница “page0” индекс — 0).

    В его состав входят следующие элементы:
    1 – Картинка с изображением спиртового термометра.
    2 – Элемент “Progress bar”. С его помощью имитируется работа термометра.

    Я рекомендую те элементы, с которыми планируется через UART всегда делать глобальными (атрибут “vccope” значение “global”), и соответственно задавать им уникальные имена (атрибут “objname”) в пределах всего проекта. Это ускоряет работу контроллера Arduino, и уменьшает код для неё. Объясню почему.
    При попытке записи атрибута локального элемента, необходимо сначала запросит у панели текущую страницу (это отдельный запрос который занимает не менее 20 мс.). Если страница та, к которой принадлежит элемент, то значение отправляется на панель, если не та, то значение предназначенное для отправки записывается в переменную (для которой то же нужно место в памяти). При переходе на страницу с элементом, необходимо сразу обновить его атрибуты последними актуальными значениями, поскольку при отрисовке страницы локальные переменные инициализируются значениями, заданными при создании проекта. И если на станице достаточно много элементов управляемых с контроллера, то при переходе на неё этот контроллер достаточно долго будет занят обновлением всех элементов.
    Для глобального элемента всё намного проще. Записать значения атрибутов для него можно в любой момент времени, и при отрисовке страницы используются последние значения. Значит, отпадает необходимость в запросе номера страницы перед отправкой и необходимость переменой для хранения значения.
    Но конечно всё зависит от проекта. Если проект для панели очень большой, и места для глобальных элементов не хватает, то можно как бы занять память у контроллера и сделать их локальными.
    3. Текстовое поле для вывода температуры.

    В качестве фона выбрано вырезанное изображение (атрибут “sta” значение “crop image”). А в качестве изображения, которое используется для вырезки, используется то же, которое используется для фона всей страницы (атрибут “picc” – индекс изображения из библиотеки изображений). Благодаря этому текс получается как бы с прозрачным фоном.
    Как я уже писал в прошлом уроке, панель не умеет работать с дробными и отрицательными числами, а для температуры как раз возможно и то и другое. Поэтому для вывода значения температуры используется текстовое поле, в которое с контроллера будет сразу отправляться готовая строка.
    4. Вырезанное изображение.

    С помощью данного элемента будет показываться солнышко при превышении температуры выше заданного предела. Вообще – то можно было использовать обычную картинку, и изменять её видимость, но поскольку пример обучающий, я решил использовать именно этот элемент. Я сам достаточно долго понимал идеологию этого элемента, попытаюсь показать, как он работает. Для его работы я сделал две картинки, одну с солнышком, другую без солнышка.

    Элемент отображает участок привязанной к нему картинки (атрибут “picc” – индекс картинки в библиотеке изображений). Левый верхний угол это участка находится в координатах вставки элемента (атрибуты “x” и “y”) и имеет ширину и высоту элемента (атрибуты “w” и “h”). В процессе работы программы контроллера при необходимости будет изменяться привязка элемента к картинке.

    При нажатии на кнопку происходит переход на следующую страницу. В качестве фона для кнопки использовал картинку. Для обоих состояний использовал оду и ту же картинку (атрибуты “pic” и “pic2” – индексы картинок в библиотеке изображений) поскольку нажатого состояния никогда не будет видно, при нажатии на кнопку сразу происходит переход на следующую страницу. Поскольку ничего в этой кнопке менять не будем, оставил её локальной и имя по умолчанию.

    Рассмотрим элементы, входящие в страницу.

    1. Элемент “Gaude”, который будет симулировать работу гигрометра.

    Поскольку управлять им будем из контроллера, то он сделан глобальным. В качестве фона выбрано вырезанное изображение (атрибут “sta”) и в качестве него выбранно фоновое изображение страницы (атрибут “picc”).

    2. Числовое поле.

    В данном поле будет отображаться значение влажности. Поскольку панель не поддерживает работы с дробными числами, будем выводить значение влажности без дробной части. В качестве фона выбрано вырезанное изображение (атрибут “sta” значение “crop image”). А в качестве изображения, которое используется для вырезки, используется то же, которое используется для фона всей страницы (атрибут “picc” – индекс изображения из библиотеки изображений). Для красоты отображения настроил выравнивание вправо (атрибут “xcen” значение — 2), а рядом поставил текстовое поле (3) со значением “%”. Настройки фона для него аналогичны настройкам числового поля.

    4 и 5. Кнопки предыдущая страница и следующая страница. При нажатии кнопки 4 происходит переход на первую страницу, а при нажатии на кнопку 5 происходит переход на следующую. Настройки отображения кнопок аналогичны кнопке на первой странице.

    На данной странице будет, выводится график изменения температуры и влажности. Рассмотрим элементы, входящие в станицу.

    1. Элемент Waveform.

    На прошлом уроке я уже писал, что данный элемент не умеет (надеюсь пока) становится глобальным, то есть значение атрибута переключить можно, но это ни к чему не приведёт. Так что я оставил его локальным (кто его знает, а вдруг всё-таки память глобальных переменных он всё-таки кушает). В данном элементе будет два канала отображения (атрибут “ch” значение — 2).

    2 и 3 –просто текстовые поля, показывающие оси графиков.

    4 –Кнопка назад. Аналогична такой – же кнопке на предыдущем экране, за исключением кода в обработчике события.

    С панелью разобрались, теперь займёмся контроллером. Я не буду рассказывать, как открывать программу FLProg, создавать проект и рисовать схему. Всё это я рассказывал в предыдущих уроках (урок 1. урок 2 ), и кроме того много информации об этом есть в учебном центре на сайте проекта. Поэтому я буду сразу показывать готовые схемы плат и рассказывать, что на них происходит.

    Для получения значений температуры и влажности с датчик DHT-22 используется блок В1 – “DHT11, DHT21, DHT22”(Библиотека элементов, папка “Датчики”).

    В настройках задаются пин, к которому подключён выход “Data” датчика, тип датчика, и наличие выходов температуры и влажности. Так же выбирается режим опроса датчика. Я настроил опрос датчика один раз в 5 секунд.

    Поскольку контроллеры Arduino не очень хорошо работают с числами с плавающей запятой, да и работа с ними съедает много памяти, я сразу перевожу все значения в формат Integer. Для этого служат блоки В3 и В4 – «Преобразование Float в Integer» (библиотека элементов, папка «Конвертация типов»), которые обрезают дробную часть числа. Для того что бы ни потерять десятые доли градуса, значение температуры полученное с датчика сначала умножается на 10 с помощью блока В2 – “MUL(*)”(библиотека элементов, папка «Математика»).
    Затем полученные значения в формате Integer заносятся в соответствующие переменные.

    В данном проекте я использую именованные соединения. Подробнее о них можно узнать в соответствующем уроке .
    Для того что бы ограничить нагрузку на контроллер имеет смысл отправлять данные на панель только когда изменились данные. Поэтому сначала мы определяем, что данные изменились. Для этого используется блок В5 – “Детектор изменения числа” (библиотека элементов, папка – «Базовые блоки»). Данный блок контролирует число на своём входе «Value» и при его изменении формирует на выходе импульс длинной в один цикл выполнения программы.
    После этого мы готовим строку для отправки в текстовое поле панели. Сначала делим значение температуры, помноженное на 10, на константу типа Float со значением 10.Таким образом, получаем значение температуры с дробной частью. Делаем это с помощью блока В6 – “DIV(/)”(библиотека элементов, папка «Математика»). Затем полученное значение в формате Float превращаем в строку с помощью блока В7 – «Преобразование строк» (библиотека элементов, папка «Конвертация типов»). Затем полученную строку соединяем со строковой константой « С» с помощью блока В8 – «Сложение строк» (библиотека элементов, папка «Строки»). Результирующую строку подаём на вход блока записи значения атрибута в панель Nextion HMI В9 – «Задать параметр» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «Элементы»).
    Данный блок записывает значение в заданный атрибут.

    Если в проекте ещё не было создано ни одной панели, то необходимо создать панель. Если необходимая панель уже была создана, её можно выбрать из выпадающего списка нажав кнопку 3. Выбранную панель можно изменить с помощью кнопки «Изменить панель»(2). Для создания панели нажимаем кнопку «Добавить панель» (1). Откроется окно создания панели.

    В данном диалоге выбираем порт для подключения панели (в нашем уроке — SoftwareSerial). В случае выбора SoftwareSerial необходимо так же выбрать пины назначаемые как сигналы RX и TX порта UART (в нашем случае 2 и 3). Так же необходимо назначить имя панели. Оно должно быть уникально. В проекте может быть подключено несколько панелей, столько насколько хватит свободных портов UART. Ия каждой панели должно быть уникальным в пределах проекта. В этом же диалоге можно добавить страницы входящие в панель. Чем и займёмся. Нажимаем кнопку добавить страницу. Открывается окно создания страницы.

    В этом окне нам необходимо ввести имя страницы и её ID. Эту информацию можно узнать из проекта в редакторе Nextin Editor.

    По умолчанию стартовой (открываемой при старте контроллера) страницей будет страница с ID равным 0, но можно в свойствах любой страницы поставить галочку «Стартовая страница» и она станет стартовой.
    В данном окне можно добавить интересующие нас элементы, находящиеся на этой странице. Нажимаем кнопку «Добавить элемент».
    Открывается окно создания элемента.

    Здесь нам надо выбрать тип и вид элемента, ввести его имя, индекс, и если элемент глобальный – установить соответствующую галочку. Все эти данные можно подсмотреть в проекте в редакторе Nextin Editor.

    После заполнения всех данных нажимаем «Готово», а затем в окне создания странице таким же образом добавляем все интересующие нас элементы на этой странице.

    После создания всех элементов на странице, так же нажимаем кнопку «Готово» в окне создания странице и в окне создания панели по тому же сценарию создаём остальные страницы.

    Заканчиваем создание панели уже привычной кнопкой «Готово».
    В редакторе блока выбираем страницу “page0” элемент «Текст» с именем “tnt” и его атрибут «Текст (txt)». В качестве значения выбираем вход.

    Блок настроен.
    Рассматриваем схему дальше.
    Опытным путём было определенно, что значению -40 градусов нарисованного градусника соответствует значение 10 в элементе «Progress bar» расположенного на нём, а значению 50 градусов на термометре – значению 91 прогресс бара. В соответствии с этим масштабируем значение переменой «Температура х10» с помощью блока В10 – “Scale” (Библиотека элементов, папка «Масштабирование») не забывая о том, что у нас значение температуры умножено на 10. Параметры этого блока.

    Отмасштабированное значение температуры отправляется на панель с помощью блока В11 – «Задать параметр» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «Элементы»). Настройки этого блока.

    Следующий блок В12 — «Comparator» (библиотека элементов, папка «Сравнение») определяет превышение текущей температурой уставки заданной значением по умолчанию переменной «Уставка — Жарко». Она составляет 290 (не забываем, что у нас везде проходит температура, умноженная на 10).

    Блок В12 настроен, выдавать на своём выходе логическую единицу при превышении значением на входе “I1” значения на входе “I2”.

    Блоки B13, B14 и В15 образовывают схемы детектирования изменения дискретного сигнала. Блоки В13 и В14 – Rtrig (библиотека элементов, папка «Триггеры») при появлении переднего фронта дискретного сигнала выдают на своём выходе импульс длительностью 1 цикл выполнения программы. Блок В14 за счёт инверсии на своём входе детектирует задний фронт сигнала «Превышение порога». Блок В15 –OR (библиотека элементов, папка «Базовые элементы») при наличии логической единицы на любом из входов выдаёт на свой выход логическую единицу. Таким образом, формируется сигнал «Отправка данных при превышении порога». По переднему фронту этого сигнала происходит отправка команды на изменение цвета шрифта текстового поля отображающего текущую температуру. Отправка происходит с помощью блока В17– «Задать параметр» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «Элементы»). Настройки этого блока.

    Значение, передаваемое в команде, выбирается с помощью блока B16 – “Switch”(библиотека элементов, папка «Переключатель»). Этот блок при низком логическом уровне на своём входе передает на выход значение с входа «0» а при высоком, с входа «1». Значение цветов подаваемые на входы переключателя задаются с помощью блоков В44 и В45 – «Цветовая константа Hight Color» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «Цвет»). Цвет выбирается в редакторе блока (двойной клик на блоке).

    В нём выставляя значение составляющих R(красный), G(зелёный) и B(синий) выбирается необходимый цвет.
    Так же по переднему фронту сигнала «Отправка данных при превышении порога» происходит отправка команды на изменение привязки вырезанного изображения. Происходит это при помощи блока В19 – «Задать параметр» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «Элементы»).
    Настройки этого блока.

    Выбор индекса изображения происходит при помощи блока В18 – “Switch”(библиотека элементов, папка «Переключатель»). Его работа была описана выше. Значение индекса необходимого изображения можно посмотреть в проекте Nextion Editor в библиотеке изображений.

    С передачей данных о температуре закончили. Перейдём к влажности.

    Как и в случае температуры в первую очередь создаем сигнал «Отправка данных при изменении влажности». Делаем это при помощи блока В20 – “Детектор изменения числа” (библиотека элементов, папка – «Базовые блоки»). Работа этого блока была описана ранее. По этому сигналу происходит отправка значения в числовое поле отображающее влажность. Делается это с помощью блока В21– «Задать параметр» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «Элементы»).
    Настройки этого блока.

    Опытным путём было определенно, что для значения 0% влажности нарисованной шкалы гигрометра в проекте панели значение элемента “Gayge” рисующего стрелку составляет 314 а для 100% влажности – 226. При этом стрелка переходит через значение 0. При переводе в линейные значения, получаем непрерывный диапазон от -46(0%) до 226(100%). В соответствии с этими данными настраиваем блок B22 –“Scale”.
    Параметры блока.

    Поскольку значения для элемента “Gauge” не могут быть отрицательными, то для высчитывания угла отклонения стрелки при таких значениях, в случае отрицательной величины, к ней добавляется значение 360. Делаем это с помощью блока B23-“SUMM(+)” (библиотека элементов, папка «Математика»). Определяем что число меньше 0 с помощью блока В26 – “Comparator”(библиотека элементов, папка «Сравнение»). Его выход управляет переключателем В24 – “Switch” (библиотека элементов, папка «Переключатель») и выбранное значение отправляется на панель с помощью блока В25 – «Задать параметр» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «Элементы»).
    Настройки этого блока.

    Ка я уже писал в начале урока, элемент Waveform не умеет быть глобальным элементом и перерисовывается пустым при каждом открытии страницы, на которой он находится. Придётся обходить это ограничение. Для начала определяем номер страницы, которая загружена на панели в текущий момент. Для этого используем блок В27 – «Получить Id текущей страницы» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «Страница»). В настройках этого блока нужно только выбрать панель, к которой будем обращаться с данным запросом.

    Номер страницы, полученный от этого блока, сравнивается с индексом нужной нам страницы (2) с помощью блока В28 – “Comparator” (библиотека элементов, папка «Сравнение»). Если открыта нужная страница, то в переменную «Отрыта страница графика» записывается логическая единица, если нет, то логический ноль.
    С помощью блока В29 – “Generator” (библиотека элементов, папка «Таймеры»), вырабатывается сигнал на запись очередной точки на график. Данный блок генерирует импульсы с заданной длительностью импульса и паузы.
    Настройки блока.

    Тип генератора выбран «Симметричный мультивибратор», значит, длительность импульса равна длительности паузы. При настройке длительности импульса равной 5 секунд, соответственно пауза будет то же 5 сек. Передний фронт импульса будет приходить каждые 10 секунд. Этот фронт выделяется блоком В30 – “Rtrig” (библиотека элементов, папка «Триггеры»), и записывается в переменную «Команда на запись очередной точки».
    По переднему фронту сигнала «Открыта страница графика» который будет выделен при помощи блока В31 – “Rtrig” (библиотека элементов, папка «Триггеры») будет сформирован сигнал «Отправка истории графика». По этому сигналу в панель на график будет отправлено содержимое массивов, в которых хранятся значения точек отображающих график изменения. Для температуры это будет сделано с помощью блока В32 –«Отправка массива на график» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «График»). Блок настраивается с помощью редактора блока.

    Сначала надо создать массив, в котором будет, хранится история графика температуры. Для этого нажимаем кнопку «Создать». Откроется окно создания массива.

    В этом оке необходимо ввести имя массива, тип (используем Byte, поскольку элемент Waveform принимает максимальное значение 255). Размер берётся равным ширине графика (330).
    После создания выбираем панель, страницу, элемент и канал на котором будет рисоваться график.

    Таким же образом настраиваем блок для отправки массива с данными о влажности на панель В33 –«Отправка массива на график» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «График»). В его настройках создаем другой массив для хранения этих данных.

    Теперь необходимо подготовить данные для графика температуры. Этот график своей осью будет иметь линию на высоте 160 точек от низа графика. Для того что бы на графике были виднее изменения температуры, разделим значение переменной «Температура х10» на 5 (то есть как бы умножив реальное значение температуры на 2) с помощью блока В35 и прибавим к нему смещение с помощью блока В36. Результат занесём в переменную «Температура со сдвигом для графика».
    С помощью блока В37 –«Стек» (библиотека элементов, папка «массивы») по импульсу в переменной «Команда на запись очередной точки» значение из переменной «Температура со сдвигом для графика» записывается в массив по принципу стека (первый элемент массива удаляется, остальные сдвигаются на один, а в последний записывается значение). Блок параметрируется с помощью редактора блоков.

    В редакторе выбираем нужный массив, нажав на кнопку «Выбрать».
    Таким же образом настраиваем блок В34 –«Стек» (библиотека элементов, папка «массивы») для записи в массив значения влажности, выбрав в соответствующий массив.
    Если открыта страница графика, закончена передача массивов на график, и пришла команда на запись очередной точки, то значения новых точек отправляются на соответствующие графики. Это необходимо для того что бы во время показа страницы графики продолжали строится. Соблюдение этих условий контролируется с помощью блока В38 – “AND” (библиотека элементов, папка «Базовые элементы»). Этот блок выдает на своем выходе единицу, если на всех его входах находится логическая единица. На график очередное значение температуры со сдвигом отправляется с помощью блока В40 – «Добавить точку на график» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «График»).
    Настройки блока.

    Так же настраивается блок отправки очередного значения влажности на график В39 – «Добавить точку на график» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «График»).

    Закончили с выводом графика.

    Значение заданной с помощью переменного резистора яркости подсветки считывается с помощью блока аналогового входа «Яркость». Поскольку значение яркости подсветки панели задается в пределах 0 до 100, масштабируем считанное значение из диапазона 0-1023 в диапазон 0-100 с помощью блока В41 – “Scale”.
    Настройки блока.

    Затем определяем факт изменения этого значения с помощью блока В42 – «Детектор изменения числа». Этот блок имеет немного нестандартные настройки.

    Для того что бы не изменять яркость на каждое движение переменного резистора в блоке настроена зона нечувствительности со значением 5. То есть блок сработает при изменении значения на входе более чем на 5 в любую сторону. При срабатывании блока на панель будет отправлена команда установить новую яркость подсветки с помощью блока В43 – «Установить уровень подсветки» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «Система»).
    Настройки блока

    Работа над программой для контроллера закончена.

    Для тех, кому интересно под споллером код получившегося скетча.

    Небольшое видео с демонстрацией.