Nextion editor уроки – FLProg + Nextion HMI. Урок 1 / FLProg corporate blog / Habr

Урок 12.1 -Nextion Editor урок 1. Скачиваем и первый пример hmi.

Для моего недавнего проекта была поставлена задача управление с дисплея. И достаточно красивая графика. Выбор пал на дисплей линейки Nextion.

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

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

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

3. Не расходует мощности нашей

Arduino. Так как дисплей оснащен своим микроконтроллером.

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

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

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

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

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

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

Купить дисплей Nextion можно тут .

Скачать редактор Nextion Editor можно тут.

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

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

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

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

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

1. Главное меню.

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.

Если вам интересна данная тема пишите в комментарии.

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

Всем Пока-Пока. И до встречи в следующем уроке.

Файлы для скачивания

Исходники к уроку 12.1 Nextion Editor .zip219 KbСкачивать файлы могут только зарегистрированные пользователи.

portal-pk.ru

FLProg + Nextion HMI. Урок 2 – FLProg

В прошлом уроке я рассказал о панели 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”). В процессе работы программы контроллера при необходимости будет изменяться привязка элемента к картинке.

5. Кнопка.

Параметры элемента.

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

Код в событии “Touch Press Event”.

Второй экран служит для отображения влажности (страница “page1” индекс — 1).

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

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

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

Параметры элемента.

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

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

Параметры элемента.

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

Параметры текстового поля (3).

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

Настройки кнопки 4(«Предыдущая страница»)

Код в событии “Touch Press Event” для кнопки 4(«Предыдущая страница»).

Настройки кнопки 5(«Следующая страница»)

Код в событии “Touch Press Event” для кнопки 5(«Следующая страница»).

Третья страница – График изменения температуры и влажности (“page2” индекс — 2).

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

1. Элемент Waveform.

Параметры элемента.

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

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

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

Код в событии “Touch Press Event” для кнопки 4(«Предыдущая страница»).

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

Плата 1. Чтение данных с датчика.

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

Настройки блока (вызываются двойным кликом на нём).

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

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

Плата 2. Вывод значения температуры на панель.

В данном проекте я использую именованные соединения. Подробнее о них можно узнать в соответствующем уроке.
Для того что бы ограничить нагрузку на контроллер имеет смысл отправлять данные на панель только когда изменились данные. Поэтому сначала мы определяем, что данные изменились. Для этого используется блок В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 в библиотеке изображений.

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

Плата 3. Вывод влажности.

Как и в случае температуры в первую очередь создаем сигнал «Отправка данных при изменении влажности». Делаем это при помощи блока В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» -> папка «График»).

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

Плата 5. Регулировка яркости подсветки.

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

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

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

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

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

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

Архив с проектом для панели и проектом для контроллера.
В следующем уроке поучимся управлять контроллером Arduino из панели.


Publication author

461 Comments: 13Publics: 334Registration: 04-02-2018

flprog.ru

Описание работы с TFT Nextion экранами (первый запуск, создание интерфейса, обработчик для arduino)

Общие сведения:

Цветные TFT Дисплеи Nextion — это модули с цветными сенсорными экранами и контроллерами, в которые Вы можете записывать свои программы. На модулях дисплеев Nextion имеется разъём UART и выводы GPIO, что позволяет использовать дисплеи Nextion как совместно с Arduino (подключая дисплей к Arduino по шине UART), так и отдельно (подключая кнопки, светодиоды, реле и т.д. напрямую к выводам GPIO дисплеев). Разъем SD-карт памяти можно использовать для загрузки Ваших программ в дисплей.

Видео:

Спецификация:

Параметры:

NX3224T02

NX3224K028

NX4024K032

NX4832K035

NX4827K043

NX8048K050

NX8048K070

Диагональ

2.4″

2.8″

3.2″

3.5″

4.3″

5.0″

7.0″

Разрешение экрана

320×240

320×240

400×240

480х320

480х270

800×480

800×480

Размер модуля

74.4×42.9мм

85×49.8мм

95×47.6мм

101×55мм

120×74мм

133×84мм

181×108мм

FLASH память

4 Мб

16 Мб

16 Мб

32 Мб

32 Мб

32 Мб

32 Мб

ОЗУ

3.5 Кб

3.5 Кб

3.5 Кб

8 Кб

8 Кб

8 Кб

8 Кб

Частота контроллера

48 МГц

48 МГц

48 МГц

108 МГц

108 МГц

108 МГц

108 МГц

Потребляемый ток

до 90 мА

до 65 мА

до 85 мА

до 145 мА

до 250 мА

до 410 мА

до 510 мА

Линейный ряд

Basic

Enhanced

Выводы GPIO

Нет

8 выводов (из них 4-7 поддерживают ШИМ)

Часы реального времени

Нет

для работы требуется установить батарейку типа CR1220 (купить)

Напряжение питания

Рекомендуемый источник питания:

5В 500мА DC

Рекомендуемый источник питания:

5В 1А DC

Рекомендуемый источник питания:

5В 2А DC

Тип подсветки экрана

Светодиодная подсветка с регулируемой яркостью от 0 до 100% с шагом 1%

Тип TouchScreen

Резистивный

Количество цветов

65 К (65536) 16 bit, 5R6G5B

UART

Скорость до 2400 до 115200 (по умолчанию 9600) режим TTL

Тип SD-карт

MisroSD с объемом до 32 ГГб отформатированные в системе FAT32

Рабочая температура

от -20 до +70°C

Температура хранения

от -30 до +85°C

Документация

Подключение:

  • Для подключения дисплея к 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 это модули, оснащённые мощным 32 разрядным микроконтроллером, контроллером сенсорного экрана, флеш-памятью, часами реального времени и разъемами: SD-карты, шины UART, и выводов GPIO. Модули дисплеев способны самостоятельно обрабатывать поступающую информацию (касание элементов экрана и команды поступающие по шине UART), управлять элементами экрана (менять картинки, текст, цвет, состояние кнопок, положение слайдеров, выводить время, значение таймеров и переменных, и т.д.) и управлять внешними устройствами (отправлять команды по шине UART, управлять выводами GPIO).

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

Ознакомиться со списком команд дисплеев Nextion можно на официальном сайте.

Пример работы с дисплеем:

В качестве примера рассмотрим работу TFT дисплея Nextion с разрешение

wiki.iarduino.ru

Руководство пользователя Nextion: входная привязка текстового компонента и компонента кнопки / ITEAD Studio — Make innovation easier / Руководство пользователя Nextion: входная привязка текстового компонента и компонента кнопки / ITEAD Studio

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

Текстовый компонент

Текстовый компонент предназначен для ввода символов. Добавьте текстовый компонент и выберите его. В нижнем правом углу появится таблица атрибутов. Щелкните свойство каждого компонента, его значение будет отображаться под таблицей.

В этой таблице есть два списка, левый список – фиксированные имена свойств, правый список может быть отредактирован или выбран. Есть три вида клеток.

Зелеными шрифтовыми ячейками можно управлять с помощью MCU, а ячейки с зелёным жирным шрифтом –  это важные свойства, при их изменении система автоматически обновляется без команды ref. Для тех ячеек, которые не выделены жирным шрифтом, после их изменения, Вы должны использовать команду ref 0 для обновления, чтобы просмотреть эффект; В то же время, черные шрифтовые ячейки, установленные в Редакторе, больше не могут быть изменены MCU. 

Хорошо, давайте покажем Вам пример. Пожалуйста, загрузите пример CompText отсюда:
https://github.com/itead/ITEADLIB_Arduino_Nextion/tree/master/examples

1. Откройте ваш редактор Nextion и нажмите «New», чтобы создать новый файл HMI. Нажмите «Add в панель рисунков», чтобы добавить изображение. Щелкните по экрану, щелкните solid color в правой таблице «Таблица страниц», выберитеImage, затем дважды щелкните выбранный рисунок, чтобы выбрать изображение в качестве фона.

2. Щелкните мышкой на окне «Экран», а затем нажмите Add Component вверху, выпадающее меню Text, и вы увидите текстовый компонент в окне дисплея. Выделите и перетащите его в любое место, щелкнув по нему, вы увидите таблицу атрибутов в правом нижнем углу.

3. Позвольте мне объяснить свойства компонентов попорядку.

Название объекта Объяснение
objname Имя компонента, дважды щелкните его, чтобы переименовать
vscope local: текущая страница
global: переменная, которая может быть применена к какому-либо другому компоненту на любых страницах
sta crop image:обрезать фоновое изображение для достижения эффекта прозрачности
solid color:  сплошной цвет фона
image:  фон компонента – изображение
picc Обрезка фонового изображения, изображение должно быть полноэкранным
bco Когда sta – сплошной цвет, это доступно
pic Фоновое изображение, когда sta является изображением, это доступно
pco Выберите цвет шрифта
font Создайте заранее шрифты в Инструментах, и выберите ID номер шрифта
xcen Горизонтальное выравнивание: 0-левое, 1-центральное, 2-правое
ycen Вертикальное выравнивание: 0- Верхнее, 1- Центральное, 2- Нижнее
txt Дважды щелкните newtxt и введите нужные слова.
Показать на компоненте
txt-maxl Максимальная допустимая длина строки (30 по умолчанию, максимум 255)
x Координата X
y Координата Y
w Ширина компонента, при перетаскивании боковой линии компонента для изменения ширины, он соответствующим образом изменяется
h Высота компонента, при перетаскивании боковой линии компонента для изменения высоты, она соответственно изменяется

Теперь я изменил свойство «txt», как показано ниже:

4. Именно так, как мы надеемся,  будет выглядеть результат.

Компонент кнопки

По сравнению с текстовым компонентом, Кнопка имеет атрибуты события нажатия. После нажатия кнопки она активирует событие.

Добавьте компонент кнопки и щелкните его, после чего вы увидите таблицу атрибутов кнопки в нижнем правом углу

Теперь добавьте два компонента b0 и b1 кнопки, в вышеупомянутый файл HMI. Щелкните компонент, чтобы отобразить таблицу. Таблица атрибутов компонента кнопки приведена ниже:

Название объекта Объяснение
objname Имя компонента, дважды щелкните его, чтобы переименовать
vscope local: текущая страница
global: переменная, которая может быть применена к какому-либо другому компоненту на любых страницах
sta crop image: обрезать фоновое изображение для достижения эффекта прозрачности
solid color: сплошной цвет фона
image: фон компонента – изображение
picc Обрезка фонового изображения, изображение должно быть полноэкранным
picc2

Нажмите кнопку, она изменит фон на обрезанное изображение, напомним, что размер изображения должен быть полноэкранным.

bco Когда sta – сплошной цвет, это доступно
bco2 Нажмите кнопку, она изменится на этот цвет фона
pco Выберите цвет шрифта по умолчанию
pco2 Нажмите кнопку, чтобы активировать событие. Она изменится на этот цвет шрифта
pic Фоновое изображение, когда sta является изображением, это доступно
pic2 Нажмите кнопку, она изменится на это фоновое изображение
font Создайте заранее шрифты в Инструментах, и выберите ID номер шрифта
xcen Горизонтальное выравнивание: 0-левое, 1-центральное, 2-правое
ycen Вертикальное выравнивание: 0- Верхнее, 1- Центральное, 2- Нижнее
txt Дважды щелкните newtxt и введите нужные слова для показа на компоненте.
txt-maxl Максимальная допустимая длина строки (30 по умолчанию, максимум 255)
x Координата X
y Координата Y
w Ширина компонента, при перетаскивании боковой линии компонента для изменения ширины, он соответствующим образом изменяется
h Высота компонента, при перетаскивании боковой линии компонента для изменения высоты, она соответственно изменяется

Теперь установите свойство кнопки, как показано ниже:

Вот результат:

Демонстрация эффекта

Теперь загрузите файл hmi в nextion с помощью foca или загрузите tft-файл с помощью SD-карты.
Link Arduino Mega2560 с дисплеем Nextion и используйте USB для подключения Mega2560 к компьютеру.
Скачайте нашу библиотеку и поместите ее в библиотеку Arduino. Затем скопируйте исзодный код в Arduino IDE.
Затем загрузите эскиз в Mega2560. И вот он в действии.

Спецификация:

Параметры:

NX3224T02

NX3224K028

NX4024K032

NX4832K035

NX4827K043

NX8048K050

NX8048K070

Диагональ

2.4″

2.8″

3.2″

3.5″

4.3″

5.0″

7.0″

Разрешение экрана

320×240

320×240

400×240

480х320

480х270

800×480

800×480

Размер модуля

74.4×42.9мм

85×49.8мм

95×47.6мм

101×55мм

120×74мм

133×84мм

181×108мм

FLASH память

4 Мб

16 Мб

16 Мб

32 Мб

32 Мб

32 Мб

32 Мб

ОЗУ

3.5 Кб

3.5 Кб

3.5 Кб

8 Кб

8 Кб

8 Кб

8 Кб

Частота контроллера

48 МГц

48 МГц

48 МГц

108 МГц

108 МГц

108 МГц

108 МГц

Потребляемый ток

до 90 мА

до 65 мА

до 85 мА

до 145 мА

до 250 мА

до 410 мА

до 510 мА

Линейный ряд

Basic

Enhanced

Выводы GPIO

Нет

8 выводов (из них 4-7 поддерживают ШИМ)

Часы реального времени

Нет

для работы требуется установить батарейку типа CR1220 (купить)

Напряжение питания

Рекомендуемый источник питания:

5В 500мА DC

Рекомендуемый источник питания:

5В 1А DC

Рекомендуемый источник питания:

5В 2А DC

Тип подсветки экрана

Светодиодная подсветка с регулируемой яркостью от 0 до 100% с шагом 1%

Тип TouchScreen

Резистивный

Количество цветов

65 К (65536) 16 bit, 5R6G5B

UART

Скорость до 2400 до 115200 (по умолчанию 9600) режим TTL

Тип SD-карт

MisroSD с объемом до 32 ГГб отформатированные в системе FAT32

Рабочая температура

от -20 до +70°C

Температура хранения

от -30 до +85°C

Документация

Подключение:

  • Для подключения дисплея к 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 это модули, оснащённые мощным 32 разрядным микроконтроллером, контроллером сенсорного экрана, флеш-памятью, часами реального времени и разъемами: SD-карты, шины UART, и выводов GPIO. Модули дисплеев способны самостоятельно обрабатывать поступающую информацию (касание элементов экрана и команды поступающие по шине UART), управлять элементами экрана (менять картинки, текст, цвет, состояние кнопок, положение слайдеров, выводить время, значение таймеров и переменных, и т.д.) и управлять внешними устройствами (отправлять команды по шине UART, управлять выводами GPIO).

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

Ознакомиться со списком команд дисплеев Nextion можно на официальном сайте.

Пример работы с дисплеем:

В качестве примера рассмотрим работу TFT дисплея Nextion с разрешение

wiki.iarduino.ru

Руководство пользователя Nextion: входная привязка текстового компонента и компонента кнопки / ITEAD Studio — Make innovation easier / Руководство пользователя Nextion: входная привязка текстового компонента и компонента кнопки / ITEAD Studio

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

Текстовый компонент

Текстовый компонент предназначен для ввода символов. Добавьте текстовый компонент и выберите его. В нижнем правом углу появится таблица атрибутов. Щелкните свойство каждого компонента, его значение будет отображаться под таблицей.

В этой таблице есть два списка, левый список – фиксированные имена свойств, правый список может быть отредактирован или выбран. Есть три вида клеток.

Зелеными шрифтовыми ячейками можно управлять с помощью MCU, а ячейки с зелёным жирным шрифтом –  это важные свойства, при их изменении система автоматически обновляется без команды ref. Для тех ячеек, которые не выделены жирным шрифтом, после их изменения, Вы должны использовать команду ref 0 для обновления, чтобы просмотреть эффект; В то же время, черные шрифтовые ячейки, установленные в Редакторе, больше не могут быть изменены MCU. 

Хорошо, давайте покажем Вам пример. Пожалуйста, загрузите пример CompText отсюда:
https://github.com/itead/ITEADLIB_Arduino_Nextion/tree/master/examples

1. Откройте ваш редактор Nextion и нажмите «New», чтобы создать новый файл HMI. Нажмите «Add в панель рисунков», чтобы добавить изображение. Щелкните по экрану, щелкните solid color в правой таблице «Таблица страниц», выберитеImage, затем дважды щелкните выбранный рисунок, чтобы выбрать изображение в качестве фона.

2. Щелкните мышкой на окне «Экран», а затем нажмите Add Component вверху, выпадающее меню Text, и вы увидите текстовый компонент в окне дисплея. Выделите и перетащите его в любое место, щелкнув по нему, вы увидите таблицу атрибутов в правом нижнем углу.

3. Позвольте мне объяснить свойства компонентов попорядку.

Название объекта Объяснение
objname Имя компонента, дважды щелкните его, чтобы переименовать
vscope local: текущая страница
global: переменная, которая может быть применена к какому-либо другому компоненту на любых страницах
sta crop image:обрезать фоновое изображение для достижения эффекта прозрачности
solid color:  сплошной цвет фона
image:  фон компонента – изображение
picc Обрезка фонового изображения, изображение должно быть полноэкранным
bco Когда sta – сплошной цвет, это доступно
pic Фоновое изображение, когда sta является изображением, это доступно
pco Выберите цвет шрифта
font Создайте заранее шрифты в Инструментах, и выберите ID номер шрифта
xcen Горизонтальное выравнивание: 0-левое, 1-центральное, 2-правое
ycen Вертикальное выравнивание: 0- Верхнее, 1- Центральное, 2- Нижнее
txt Дважды щелкните newtxt и введите нужные слова.
Показать на компоненте
txt-maxl Максимальная допустимая длина строки (30 по умолчанию, максимум 255)
x Координата X
y Координата Y
w Ширина компонента, при перетаскивании боковой линии компонента для изменения ширины, он соответствующим образом изменяется
h Высота компонента, при перетаскивании боковой линии компонента для изменения высоты, она соответственно изменяется

Теперь я изменил свойство «txt», как показано ниже:

4. Именно так, как мы надеемся,  будет выглядеть результат.

Компонент кнопки

По сравнению с текстовым компонентом, Кнопка имеет атрибуты события нажатия. После нажатия кнопки она активирует событие.

Добавьте компонент кнопки и щелкните его, после чего вы увидите таблицу атрибутов кнопки в нижнем правом углу

Теперь добавьте два компонента b0 и b1 кнопки, в вышеупомянутый файл HMI. Щелкните компонент, чтобы отобразить таблицу. Таблица атрибутов компонента кнопки приведена ниже:

Название объекта Объяснение
objname Имя компонента, дважды щелкните его, чтобы переименовать
vscope local: текущая страница
global: переменная, которая может быть применена к какому-либо другому компоненту на любых страницах
sta crop image: обрезать фоновое изображение для достижения эффекта прозрачности
solid color: сплошной цвет фона
image: фон компонента – изображение
picc Обрезка фонового изображения, изображение должно быть полноэкранным
picc2

Нажмите кнопку, она изменит фон на обрезанное изображение, напомним, что размер изображения должен быть полноэкранным.

bco Когда sta – сплошной цвет, это доступно
bco2 Нажмите кнопку, она изменится на этот цвет фона
pco Выберите цвет шрифта по умолчанию
pco2 Нажмите кнопку, чтобы активировать событие. Она изменится на этот цвет шрифта
pic Фоновое изображение, когда sta является изображением, это доступно
pic2 Нажмите кнопку, она изменится на это фоновое изображение
font Создайте заранее шрифты в Инструментах, и выберите ID номер шрифта
xcen Горизонтальное выравнивание: 0-левое, 1-центральное, 2-правое
ycen Вертикальное выравнивание: 0- Верхнее, 1- Центральное, 2- Нижнее
txt Дважды щелкните newtxt и введите нужные слова для показа на компоненте.
txt-maxl Максимальная допустимая длина строки (30 по умолчанию, максимум 255)
x Координата X
y Координата Y
w Ширина компонента, при перетаскивании боковой линии компонента для изменения ширины, он соответствующим образом изменяется
h Высота компонента, при перетаскивании боковой линии компонента для изменения высоты, она соответственно изменяется

Теперь установите свойство кнопки, как показано ниже:

Вот результат:

Демонстрация эффекта

Теперь загрузите файл hmi в nextion с помощью foca или загрузите tft-файл с помощью SD-карты.
Link Arduino Mega2560 с дисплеем Nextion и используйте USB для подключения Mega2560 к компьютеру.
Скачайте нашу библиотеку и поместите ее в библиотеку Arduino. Затем скопируйте исзодный код в Arduino IDE.
Затем загрузите эскиз в Mega2560. И вот он в действии.

Приложение для ввода текстового компонента и кнопочного компонента из ITEAD на Vimeo.

Итак, это очень простые компоненты, не так ли? Просто помните, что практика поможет вам добится идеала. Просто запустите свой проект и станьте своим собственным дизайнером интерфейса

www.itead.cc

FLProg + Nextion HMI. Урок 1 – FLProg

Добрый день.
Хочу рассказать об одном очень интересном проекте компании ITEAD STUDIO — цветной ЖК дисплей + резистивный сенсор касаний с собственным контроллером, управляемые по UART “Nextion HMI”. Данный проект появился на краудфандинговой платформе Indiegogo и при заявленных 20000 долларах проект собрал более 45000 долларов.
Один из пользователей программы FLProg прислал мне образец такой панели для ознакомления. Начав работать с ней, я был восхищён её возможностями, при очень демократичной цене. По возможностям она очень близко подходит к промышленным HMI панелям, а её редактор представляет собой практически полноценную SCADA систему. Поэтому я интегрировал управление этой панелью в проект FLProg.
В этой серии уроков я расскажу, как работать с этой панелью, и управлять ею из программы FLProg. Первый урок будет посвящён программе Nextion Editor и созданию проекта визуализации в ней.


Для начала предоставлю таблицу характеристик различных моделей панели

Скачать программу Nextion Editor на сайте производителя.
Основное окно программы.

При создании нового проекта (“File” -> “New”) в первую очередь необходимо выбрать место хранения и имя нового проекта. После этого будет предложено выбрать используемую модель панели, ориентацию экрана, и необходимую кодировку.

Для поддержки русских символов необходимо использовать кодировку iso-8859-5.
Рассмотрим окно программы с открытым проектом.

Зоны окна:

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

Сразу после создания проекта в нём будет создана первая страниц с индексом 0 именем по умолчанию “page0”. Данное имя можно сменить, сделав двойной клик на нём и введя новое имя. Имя страницы должно быть уникальным в пределах проекта. После ввода нового имени страницы необходимо нажать “Enter”.
Рассмотрим меню списка страниц (5).

— Добавить страницу.

— Удалить страницу. Индексы страниц будут пересчитаны для устранения пустот.

— Вставить страницу перед выделенной. Индексы страниц будут пересчитаны для обеспечения последовательности сверху вниз.

— Поднять страницу в списке вверх. Индексы страниц будут пересчитаны для обеспечения последовательности сверху вниз.

— Опустить страницу в списке вниз. Индексы страниц будут пересчитаны для обеспечения последовательности сверху вниз.

— Скопировать выделенную страницу. Копия выделенной страницы будет добавлена в низ списка.

— Удалить все станицы.

При выборе страницы в списке, в зоне редактирования атрибутов (6) будет возможно изменить параметры странницы.

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

Атрибуты страницы.

  • vscope – Видимость. Возможные значения:
    • local – видимость в пределах данной страницы
    • global – видимость на всех страницах. Мне непонятно назначение данного атрибута в контексте страницы.
  • sta – Режим заливки фона. Возможные значения:
    • no background – нет заливки. При отображении страницы в таком режиме в качестве фона окажется ранее отрисованная страница
    • solid color – сплошная заливка цветом, заданным с помощью атрибута “bco”
    • image – использование в качестве фона картинки. В качестве картинки используется изображение с индексом заданным в атрибуте “pic”. Соответственно данное изображение предварительно должно быть загружено в библиотеку изображений(3). Изображение по размеру должно соответствовать разрешению экрана панели. В случае превышения изображением размера панели будет выдана ошибка, и изображение не будет наложено, в случае размера изображения меньшего, чем панель на незакрытых им областях экрана будет видна отрисованная ранее страница

Следующий атрибут зависит от режима заливки фона.
В режиме “no background” этот атрибут отсутствует.
В режиме “solid color” это атрибут “bco”. Он определяет каким цветом будет заливаться фон страницы. В поле значения данного атрибута отображается код цвета в формате Hight Color. При двойном клике на этом поле открывается окно выбора цвета.

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

Данное окно так же используется в программе для задания значений всех атрибутов связанных с изображением.
Остальные атрибуты показывают размеры страницы, и доступны для редактирования, но я не советую их трогать, поскольку поведение страницы в этом случае не предсказуемо.
Теперь рассмотрим библиотеку изображений и библиотеку шрифтов. Они находятся в зоне 3 на вкладках “Picture” и “Fonts” соответственно.

Вкладка “Picture”.

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

Меню вкладки.

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

— Удалить выделенное изображение. Индексы изображений будут пересчитаны для устранения пустот.

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

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

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

— Опустить изображение в списке вниз. Индексы изображений будут пересчитаны для обеспечения последовательности сверху вниз.

— удалить все изображения.

Вкладка “Fonts”.

На этой вкладке отображаются шрифты, используемые в проекте. Для того что бы добавить шрифт в проект, необходимо сначала сгенерировать файл шрифта с помощью инструмента “Font Generator”. Данный инструмент вызывается из главного меню программы “Tools” -> “Font Generator”.

В окне этого инструмента надо выбрать размер шрифта, выбрать исходный шрифт из системы, схему (я, честно говоря, не понял что это такое) и ввести имя шрифта которое будет отображаться в списке шрифтов. Затем нажимаем кнопку “Generate font”. При этом будет запрошено место сохранения шрифта и имя файла. Файл шрифта сохраняется с расширением “.zi”. При закрытии окна “Font Generator” будет предложено сразу добавить сгенерированный шрифт в библиотеку шрифтов проекта.

Меню вкладки.

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

— Удалить выделенный шрифт. Индексы шрифтов будут пересчитаны для устранения пустот.

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

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

— Поднять шрифт в списке вверх. Индексы шрифтов будут пересчитаны для обеспечения последовательности сверху вниз.

— Опустить шрифт в списке вниз. Индексы шрифтов будут пересчитаны для обеспечения последовательности сверху вниз.

— Пред просмотр выделенного шрифта.

— удалить все шрифты.

Теперь рассмотрим библиотеку элементов (2).

Элементы в проект добавляются кликом по нему. Графические элементы добавляются в позицию 0@0, таймер и переменная в строку под зоной экрана.
Практически все графические элементы имеют атрибуты “objname”, “vscope” и “sta”. Коротко я уже рассказал о последних двух в контексте страницы. Немного расширю рассказ.

  • “objname” – имя элемента. Используется при написании кода и при запросах к атрибутам через UART.

Атрибут “vscope” определяет доступность элемента для изменения его атрибутов и может иметь два значения:

  • “local” – прочитать и изменить атрибуты элемента можно, только если активна страница, на которой он расположен. Это касается как кода исполняемого на самой панели, так и при запросах через UART.
  • “global” — прочитать и изменить атрибуты элемента можно в любой момент времени. Это касается как кода исполняемого на самой панели, так и при запросах через UART. При использовании этого значения атрибута необходимо следить за уникальностью имени в пределах всего проекта.

Атрибут “sta” определяет режим заливки фона элемента и может иметь следующие значения:

  • “solid color” – заливка фона сплошным цветом.
  • “image” – использование картинки в качестве фона. Размер элемента подгоняется под размер картинки.
  • “crop image” – дословный перевод «вырезанное изображение». По смыслу наиболее близко как ни странно к прозрачному фону. Идеология такая. В качестве фона берётся картинка, но она накладывается в нулевые координаты страницы. В качестве фона элемента используется участок изображения, который совпадает с проекцией элемента на область страницу. Но это легче попробовать, чем объяснить.

В списке атрибутов (6) часть из них показана зелёным цветом. Эти атрибуты доступны для чтения и записи как с помощью кода исполняемого на самой панели, так и с помощью команд через UART. Атрибуты, показанные чёрным цветом, изменяются только через редактор на этапе разработки проекта.
Рассмотрим доступные элементы.

— Поле с текстом.

Атрибуты элемента:

  • “objname”
  • “vscope”
  • “sta”
  • “bco” – цвет заливки фона. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “pic” – индекс картинки для фона. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “picс” – индекс вырезанной картинки для фона. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “pco” – цвет надписи. Значение атрибута – код цвета в формате Hight Color, которым будет написан текст
  • “font” – индекс шрифта, которым будет написан текст.
  • “xcen” – Горизонтальное выравнивание. Возможные значения:
    • 0 – по левому краю
    • 1 – по центру
    • 2 — по правому краю
  • “ycen” – вертикальное выравнивание. Возможные значения:
    • 0 – по верху
    • 1 – по центру
    • 2 – по низу
  • “txt” – отображаемый текст
  • “txt-maxl” – максимальная длинна текста. Если передать в атрибут “txt”значение длинной больше чем значение этого атрибута, лишние символы в конце отрежутся.
  • “x” и “y” – координаты вставки текста
  • “w” и “h” – ширина и высота прямоугольника, в который вписывается текст.

— Поле с числовым значением.

Атрибуты элемента:

  • “objname”
  • “vscope”
  • “sta”
  • “bco” – цвет заливки фона. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “pic” – индекс картинки для фона. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “picс” – индекс вырезанной картинки для фона. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “pco” – цвет надписи. Значение атрибута – код цвета в формате Hight Color которым будет написано число.
  • “font” – индекс шрифта, которым будет написано число.
  • “xcen” – Горизонтальное выравнивание. Возможные значения:
    • 0 – по левому краю
    • 1 – по центру
    • 2 — по правому краю
  • “ycen” – вертикальное выравнивание. Возможные значения:
    • 0 – по верху
    • 1 – по центру
    • 2 – по низу
  • “val” – отображаемое значение. Может отображать числа от 0 до 4294967295. Не умеет отображать отрицательные значения.
  • “lenth” –длинна числа как строки. Возможные значения от 0 до 10. При нуле – длинна числа определяется автоматически, в остальных случаях, если длинна числа переданного в как значение атрибута “val” больше значения “ lenth ” спереди числа дописываются недостающие нули, а если длинна числа переданного в как значение атрибута “val” меньше значения “ lenth ” спереди числа отрезаются лишние символы.
  • “x” и “y” – координаты вставки элемента
  • “w” и “h” – ширина и высота прямоугольника, в который вписывается число.

— Кнопка без фиксации.

Атрибуты элемента:

  • “objname”
  • “vscope”
  • “sta”
  • “bco” – цвет кнопки в не нажатом положении. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “bco2” – цвет кнопки в нажатом положении. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “pic” – индекс картинки кнопки в не нажатом положении. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “pic2” – индекс картинки кнопки в нажатом положении. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “picс” – индекс вырезанной картинки кнопки в не нажатом положении. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “picс2” – индекс вырезанной картинки кнопки в нажатом положении. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “pco” – цвет надписи на кнопке в не нажатом положении. Значение атрибута – код цвета в формате Hight Color.
  • “pco2” – цвет надписи на кнопке в нажатом положении. Значение атрибута – код цвета в формате Hight Color.
  • “font” – индекс шрифта, которым будет написана надпись на кнопке.
  • “xcen” – Горизонтальное выравнивание. Возможные значения:
    • 0 – по левому краю
    • 1 – по центру
    • 2 — по правому краю
  • “ycen” – вертикальное выравнивание. Возможные значения:
    • 0 – по верху
    • 1 – по центру
    • 2 – по низу
  • “txt” – текст надписи на кнопке.
  • “txt-maxl” – максимальная длинна надписи на кнопке. Если передать в атрибут “txt”значение длинной больше чем значение этого атрибута, лишние символы в конце отрежутся.
  • “x” и “y” – координаты вставки кнопки
  • “w” и “h” – ширина и высота кнопки.

— Прогресс бар. Отображает заполненную на заданное значение процентов линейку. Очень интересное решение реализовано при применении изображений. Есть два изображения. Например, термометра. На одном он пустой (0%), на другом он же полный(100%).

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

Атрибуты элемента:

  • “objname”
  • “vscope”
  • “sta” – возможные значения: “solid color” и “image”
  • “dez” – направление. Возможные значения:
    • “horizontal” – по горизонтали
    • “vertical” – по вертикали
  • “bco” – цвет при при заполнении 0%. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “рco” – цвет при при заполнении 100%. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “bpic” – индекс картинки кнопки при заполнении в 0%. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “ppic” – индекс картинки при заполнении в 100%. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “val” – наполнение. Возможные значения: от 0 до 100.
  • “x” и “y” – координаты вставки прогресс бара
  • “w” и “h” – ширина и высота прогресс бара.

-Картинка

Атрибуты элемента:

  • “objname”
  • “vscope”
  • “pic” – индекс картинки.
  • “x” и “y” – координаты вставки картинки
  • “w” и “h” – ширина и высота картинки.

— Вырезанное изображение.

Атрибуты элемента:

  • “objname”
  • “vscope”
  • “picс” – индекс картинки.
  • “x” и “y” – координаты вставки картинки
  • “w” и “h” – ширина и высота картинки

— Невидимая кнопка.

Атрибуты элемента:

  • “objname”
  • “vscope”
  • “x” и “y” – координаты вставки картинки
  • “w” и “h” – ширина и высота картинки

— Стрелочный индикатор. Отображает стрелку, повёрнутую на заданный угол.

Атрибуты элемента:

  • “objname”
  • “vscope”
  • “sta” Возможные значения: “solid color” и “crop image”
  • “bco” – цвет фона. Значение атрибута – код цвета в формате Hight Color. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “picс” – индекс вырезанной картинки на фоне. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “val” – значение угла поворота стрелки от 0 до 360.
  • “wid” – толщина стрелки. Значение от 0 до 5.
  • “pco” – цвет стрелки. Значение атрибута – код цвета в формате Hight Color.
  • “x” и “y” – координаты вставки элемента
  • “w” и “h” – ширина и высота элемента.

— График. Элемент строит график по точкам, передаваемым ему кодом, исполняемым на панели или через UART. Поддерживает до четырёх графиков отображаемых одновременно. С моей точки зрения элемент ещё пока не доделанный. Причину такого мнения опишу ниже.

Атрибуты элемента:

  • “objname”
  • “vscope”
  • “dir” – направление построения. Возможные значения:
    • “left to right” – слева направо
    • “right ti left” – справа налево
  • “sta”
  • “ch” – количество отображаемых каналов. Возможные значения от 1 до 4.
  • “bco” – цвет фона. Значение атрибута – код цвета в формате Hight Color. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “pic” – индекс картинки фона. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “picс” – индекс вырезанной картинки на фоне. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “рco0” – цвет графика канала 1.
  • “рco1” – цвет графика канала 2. Этот атрибут появляется при значении атрибута “ch” более 1.
  • “рco2” – цвет графика канала 3. Этот атрибут появляется при значении атрибута “ch” более 2.
  • “рco3” – цвет графика канала 4. Этот атрибут появляется при значении атрибута “ch” более 3.
  • “x” и “y” – координаты вставки графика
  • “w” и “h” – ширина и высота графика.

— Слайлер

Атрибуты элемента:

  • “objname”
  • “vscope”
  • “mode” – направление слайдера. Возможные значения:
    • “horizontal” – по горизонтали
    • “Vertical” – по вертикали
  • “sta”
  • “psta” – режим рисования курсора слайдера. Возможные значения:
    • “solid” – прямоугольник залитый сплошным цветом.
    • “image” – в качестве курсора используется изображение.
  • “bco” – цвет фона. Значение атрибута – код цвета в формате Hight Color. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “pic” – индекс картинки фона. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “picс” – индекс вырезанной картинки на фоне. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “рco” – цвет курсора. Этот атрибут появляется при выборе значения “solid” в атрибуте “psta”
  • “рic2” – индекс картинки курсора. Этот атрибут появляется при выборе значения “image” в атрибуте “psta ”
  • “wid” – ширина курсора.
  • “hig” – высота курсора.
  • “val” – значение соответствующее положению слайдера.
  • “maxval” – максимальное величина значения слайдера.
  • “minval” – минимальная величина значения слайдера
  • “x” и “y” – координаты вставки графика
  • “w” и “h” – ширина и высота графика.

-Переключатель с двумя фиксированными положениями.

Атрибуты элемента:

  • “objname”
  • “vscope”
  • “sta”
  • “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” – ширина и высота кнопки.

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

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

Атрибуты элемента:

  • “objname”
  • “vscope”
  • “sta” — тип переменной. Возможные значения:
    • “Number” – переменная хранит числовое значение
    • “String” – переменная хранит строковое значение
  • “val” – числовое значение переменной. Этот атрибут появляется при выборе значения “Number” в атрибуте “sta”
  • “txt” – строковое значение переменной. Этот атрибут появляется при выборе значения “String” в атрибуте “sta”
  • “txt-maxl” –максимальная длинна строкового значения переменной. Этот атрибут появляется при выборе значения “String” в атрибуте “sta”

-Таймер. Вызывает вызов события “Timer Event” периодически через заданное время.

Атрибуты элемента:

  • “objname”
  • “vscope”
  • “tim” – период срабатывания таймера в миллисекундах. Возможные значения от 50 ms. до 65535 ms.
  • “en” – работа таймера. При значении 0 – отсчёт времени остановлен, при значении – 1 работает.

Поведение глобальных и локальных элементов.

Локальные элементы при отрисовке страницы, к которому они привязаны, всегда инициализируются значениями, присвоенными в момент разработки проекта. Во время отображения страницы эти значения можно менять с помощью кода исполняемого на панели или через UART, но при переходе на другую страницу все измененные значения атрибутов сбрасываются на установленные при разработке. Значения атрибутов глобальных элементов при переходе со страницы на страницу не изменяются.
Элемент “Waveform” (График) не работает в глобальном режиме и в любом случае ведёт себя как локальный. При переходе на станицу, к которой он привязан, он всегда отрисовавается пустым, и с настройками, установленными при разработке. Скорее всего, поскольку проект Nextion HMI достаточно молодой, этот элемент просто не закончен.

Написание кода исполняемого на панели.

Код, исполняемый на панели, и имеет событийную основу. То есть непосредственно код пишется в обработчиках событий элементов и исполняется при возникновении соответствующих событий.
Для начала рассмотрим события, происходящие на панели.

События страницы:

  • Preinitialize Event – событие происходит перед отрисовкой страницы.
  • Postinitialize Event – событие происходит сразу после отрисовки страницы.
  • Touch Press Event – событие происходит при нажатии на экран в месте свободном от других элементов. При нажатии на элемент событие вызывается у него.
  • Touch Release Event – событие происходит после отпускания предварительно нажатой области станицы свободной от других элементов.

Все элементы, кроме не отображаемых, имеют два обработчика события – нажатия и отпускания.

  • Touch Press Event – событие происходит при нажатии на элемент
  • Touch Release Event – событие происходит после отпускания предварительно нажатого элемента.

У элемента Slider (слайдер) есть событие “Touch Move” которое происходит при каждом перемещении курсора на оду позицию.

У элемента Timer (таймер) есть единственный обработчик события срабатывания таймера – «Timer Event.»

Команды операции и условные операторы, поддерживаемые панелью

Переход на страницу

page аргумент – перейти на страницу. В качестве аргумента может выступать либо имя, либо индекс страницы.
Пример – при нажатии на кнопку происходит переход на страницу page1 c индексом 1. Команда написана в обработчике события Touch PressEven:

page page1

или

page 1

Запись или чтение значения атрибута

Чтение значения аргумента
имя элемента.аргумент
или
имя страницы. имя элемента.аргумент

Запись значения в аргумент
имя элемента.аргумент=значение
или
имя страницы. имя элемента.аргумент=значение

Пример: По нажатию кнопки значение аргумента “val” из поля с числовым значением с именем “n0” перепишется в аргумент “val” поля с числовым значением с именем “n1”. Так же из аргумента “txt” текстового поля с именем “t0” строка перепишется в аргумент “txt” текстового поля с именем “t1”. Все элементы находятся на странице с именем “page0”.

Преобразование типов
cov значение1, значение2, длинна где:

  • значение1 — атрибут источника например n0.val
  • значение2 – атрибут приёмника например t0.txt
  • длинна — длинна строки. При значении 0 – автоматическое определение. Если идёт преобразование из числа в строку — это длинна целевого атрибута, если строка преобразуется в число, это длина атрибута-источника.

Если типы атрибута источника и атрибута приёмника одинаковы будет выдана ошибка компиляции

Примеры.

  1. Значение атрибута “txt” (строка) текстового поля “t0” при нажатии кнопки преобразуется в число и записывается в аргумент “val” (число) поля с числовым значением “n0”
  2. Значение атрибута “val” (число) поля с числовым значением “n0” при нажатии кнопки преобразуется в число и записывается в аргумент “txt” (строка) текстового поля “t0”

Математические операции.

Поддерживаются операции сложения (+), вычитания (-), умножения(*) и деления (/).Необходимо учитывать что панель умеет работать только с целыми положительными числами.

Пример.

При нажатии кнопки начинает работать таймер и добавляет единицу к значению числового поля “n0”. При отпускании кнопки счёт заканчивается.

Настройки таймера “tm0”

Аргумент “tim” – 1000 ms. При работе таймера событие “Timer Event” вызывается 1 раз в 1000 миллисекунд.
Аргумент “en” – 0. По умолчанию таймер выключен.

Код в событии “Touch Press Event” копки.

При нажатии кнопки в значение аргумента “en” таймера “tm0” заносится 1. То есть таймер включается.

Код в событии “Touch Release Event” копки.

При отпускании кнопки в значение аргумента “en” таймера “tm0” заносится 0. То есть таймер отключается.

Код в событии “Timer Event” таймера “tm0”

При каждом срабатывании таймера к значению аргумента “val” цифрового поля “n0” добавляется единица и записывается в этот же аргумент.

Условные операторы.

Примеры записи:

if
{ 
рage 1
}

Если значения атрибута “txt” текстового поля “t0” равно «123456» то переходим на страницу с индексом 1.

if(b0.txt==”start”)
{ 
 b0.txt==”stop” 
} else
{ 
 b0.txt==”start” 
}

Если значения атрибута “txt” кнопки “t0” равно «start» то записываем в этот атрибут значение «stop» иначе записываем в этот атрибут значение «stop».

if(b0.txt==”1”)
{ 
 b0.txt==”2” 
} else if (b0.txt==”2” )
{ 
 b0.txt==”3” 
}else
{ 
 b0.txt==”1”
}

Если значения атрибута “txt” кнопки “t0” равно «1» то записываем в этот атрибут значение «2» иначе: ( eсли значения атрибута “txt” кнопки “t0” равно «2» записываем в этот атрибут значение «3»


Publication author

461 Comments: 13Publics: 334Registration: 04-02-2018

flprog.ru

Панель NEXTION Для новичков – FLProg

Здравствуйте, Друзья!
Сам я далек от профессионального программирования.
С помощью FLProg получил вторую жизнь в своей радио-любительской деятельности, благодаря Автору программы FLProg, Сергею.
Уже больше трех месяцев разбираюсь с панелью NEXTION.
Буду описывать не всё по порядку, а те моменты и проблемы, с которыми я сталкиваюсь.
Общий обзор функционала панели описал Сергей здесь: https://geektimes.ru/company/flprog/blog/273868/
=================================================================================================================================
В первой рекомендации опишу, то, что не нужно делать.
На сегодняшний день (23.11.2017) существует редактор для панели Nextion Editor v0.52 https://nextion.itead.cc/resources/download/nextion-editor/
Пока еще этот редактор (на сегодняшний день) достаточно “сырой”.
1. Если Вы создаете свой проект для панели в одной версии Nextion Editorr, а потом дорабатываете в другой версии, то проблем не избежать.
2. Предыдущих версий Nextion Editor на сайте пока нет, поэтому, зайдите на сайт и сохраните версию Nextion Editor на своем компьютере.
3. В дальнейшем производите все изменения именно в данной версии Nextion Editor. (Напоминаю, что это пока на сегодняшний день, (23.11.2017)., может потом исправят.
4. При редактировании проекта не изменяйте размер диагонали, и не изменяйте угол поворота по вертикали, или горизонтали, это приведет к не работоспособности Вашего проекта.
В этих статьях я буду подробно выкладывать функции и условия в панели Nextion, те, которыми пользуюсь.

У меня панель NEXTION enhanced, но разницы особой нет, в enhanced есть дополнительно RTC (часы реального времени) и GPIO.
Это не имеет особого значения, основной функционал стандартный.

Панель NEXTION Для новичков. Конвертация числа в текст.

 

Добавил: Siberian


Publication author

41 Comments: 21Publics: 76Registration: 21-12-2017

flprog.ru

FLProg + Nextion HMI. Урок 3 / FLProg corporate blog / Habr

На предыдущих уроках (урок 1, урок 2) я рассказал, как рисовать интерфейс панели Nextion HMI, как управлять панелью с помощью Arduino. В этом уроке я расскажу, как решать обратную задачу – управлять платой Arduino с помощью панели Nextion HMI.
На уроке мы расширим проект предыдущего урока, добавим управление вентилятором, который будет включатся при превышении температуры выше заданного предела, и выключаться при снижении температуры ниже второго предела. Уставки будут задаваться с панели, и сохраняться в энергонезависимой памяти контроллера Arduino. Кроме того сделаем на панели выключатель света (двухпозиционный) и кнопку при помощи которой будем включать фонарь (например что бы подавать сигнал инопланетянам).

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

Так же доработан проект панели. Добавлены две страницы. Кроме того был заменён шрифт загруженный в панель. Проект для панели находится в архиве, ссылка на который дана в конце статьи. В комментариях к прошлому уроку меня совершенно справедливо пожурили за отсутствие дизайнерских талантов. Я полностью с этим согласен, поэтому новые страницы не имеют никакого дизайна, чистый функционал.
Рассмотрим новые страницы.

Страница управления (“page3”, ID=3).

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

  1. Просто текстовые поля. Ничего интересного.
  2. Поле отображения уставки включения вентилятора. Как я уже писал, панель не умеет работать с дробными числами. Поэтому это текстовые поля. Строку для отображения будем готовить на ардуинке. Параметры элемента.

    Поскольку значение в это поле будем отправлять с контроллера, делаем его глобальным (атрибут “vscope” значение “global”). При нажатии на это поле будет происходить открытие страницы редактирования значения. Поэтому в событии “Touch Press Event” записан следующий код.

    При нажатии на элемент сначала в поле редактируемого значения на странице 4 заносим текущее значение.
    page4.evtemp.txt=onV.txt

    Затем в переменную хранящую идентификатор редактируемого поля на странице 4 заносим идентификатор поля, по которому нажали.
    page4.varN.val=0

    Ну и переходим на страницу редактирования значения.
    page page4
  3. Поле отображения уставки выключения вентилятора. Практически идентично предыдущему полю. Параметры элемента.

    Код в событии “Touch Press Event”.

    В этом коде отличие от предыдущего только в идентификаторе поля.
    page4.varN.val=1
  4. Кнопка назад. Скопирована с прошлого урока. Параметры элемента.

    Код в событии “Touch Press Event”.
  5. Переключатель на два положения (“Dual-state button”) – управление светом.
    Параметры элемента.

    Значение состояния данного элемента будем считывать из контроллера, поэтому элемент глобальный (атрибут “vscope” значение “global”). В качестве режима отображения фона выбран режим картинки (атрибут “sta” значение “image”). Картинки задаются в атрибутах “pic0” для состояния 0 и “pic1” для состояния 1.
  6. Кнопка (“Button”) – включение фонаря. Параметры элемента.

    Здесь остановимся поподробнее. За нажатиями этой кнопки будем следить из контроллера, для управления фонарём. К сожалению, в Arduino нельзя установить прерывание на получение байта из UART (по крайней мере, стандартами средствами). Поэтому пришлось реализовывать запоминание факта нажатия и отпускания кнопки с помощью двух переменных (7 и 8). Напрямую к кнопке обращаться не будем, поэтому её можно делать как локальной, так и глобальной (я сделал глобальной на всякий случай). В обработчике нажатия кнопки (“Touch Press Event”) написан следующий код.

    А в обработчике отпускания кнопки (“Touch Release Event”) такой.

    Эти переменные нам понадобятся в блоке отслеживания нажатий в проекте FLProg.

Окно редактирования значений (“page4”, ID=4).

Рассмотрим что в него входит.
  1. Поле редактируемого значения. Параметры элемента.

    Значение данного поля будем читать из контроллера, соответственно делаем его глобальным (атрибут “vscope” значение “global”).
  2. Кнопки ввода значения. Все эти кнопки практически идентичны, и отличаются надписью и кодом в обработчике события “Touch Press Event”. При нажатии на одну из этих кнопок к текущему значению поля редактируемого значения добавляется соответствующий символ.
    Код в событии “Touch Press Event” для каждой из кнопок.“0”
    evtemp.txt=evtemp.txt+"0"

    “1”
    evtemp.txt=evtemp.txt+"1"

    “2”
    evtemp.txt=evtemp.txt+"2"

    “3”
    evtemp.txt=evtemp.txt+"3"

    “4”
    evtemp.txt=evtemp.txt+"4"

    “5”
    evtemp.txt=evtemp.txt+"5"

    “6”
    evtemp.txt=evtemp.txt+"6"

    “7”
    evtemp.txt=evtemp.txt+"7"

    “8”
    evtemp.txt=evtemp.txt+"8"

    “9”
    evtemp.txt=evtemp.txt+"9"

    “.”
    evtemp.txt=evtemp.txt+"."


  3. Кнопка очистки поля. При её нажатии удаляется значение поля.
    Код в событии “Touch Press Event”
    evtemp.txt=""

  4. Кнопка удаления последнего символа.
    Код в событии “Touch Press Event”
    evtemp.txt=evtemp.txt-1

    Это не задокументированная функция. Она удаляет последний символ в строке. Я её подсмотрел на одном из видео на сайте производителя. Вообще я не нашёл практически никакой информации по работе со строками на панели.
  5. Кнопка завершения редактирования значения.
    Нажатие этой кнопки будет отслеживаться на контроллере, так что для неё созданы две переменные (“endPress” и “ endRel”) и в обработчиках событий написан код.
    Код в событии “Touch Press Event”
    page4.endPress.val=1

    Код в событии “Touch Release Event”
    page4.endRel.val=1
  6. Кнопка отмены редактирования. По нажатию этой кнопки мы просто возвращаемся на страницу управления.
    Код в событии “Touch Press Event”
    page page3

С панелью закончили, переходим к программе FLProg. В ней так же используется проект из прошлого урока немного доработанный. Файл проекта находится в архиве, ссылка на который дана в конце поста.
Как и в прошлом уроке, я буду показывать готовые схемы плат и рассказывать, что на них происходит.
Плата 7 – «Управление фонарём»

Здесь всё просто. Блок В46 – «Отслеживание нажатий» (библиотека элементов, папка «Панель Nextion HMI»). На своем выходе имеет значение соответствующее состоянию отслеживаемой кнопки или другого элемента имеющего события “Touch Press Event” и “Touch Release Event” на панели. Это значение напрямую прописывается в выход, привязанный к фонарю. Блок параметрируется с помощью редактора блоков.

В редакторе блоков необходимо выбрать панель, а затем создадим новую страницу и пропишем на ней необходимые элементы. Как это сделать я рассказывал на предыдущем уроке.

Должна получится такая картина.

В качестве переменной нажатия выбираем ту переменную, в которую мы пишем единичку в событии “Touch Press Event” кнопки, а в качестве переменой отпускания, переменную из события “Touch Release Event” кнопки.

Плата 8 – «Управление светом».

То же очень простая плата. Здесь мы считываем положение переключателя с помощью блока В47 – «Получить параметр» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «Элементы»). Затем это значение отправляется непосредственно в блок выхода, привязанный к освещению. Блок параметрируется с помощью редактора блоков.

Для снижения нагрузки на контроллер запрос состояния переключателя будем делать раз в секунду.

Плата 9 – «Окончание редактирования параметров».
На этой плате мы будем обрабатывать нажатие кнопки «Готово» на странице редактирования параметров.

С помощью блока В48 – «Отслеживание нажатий» (библиотека элементов, папка «Панель Nextion HMI») мы определяем момент нажатия. В редакторе этого блока мы создадим страницу 4 и заполним её интересующими нас элементами.

И настроим блок.

С помощью блока В49 – “Rtrig” (библиотека элементов, папка «Триггеры») выделим передний фронт сигнала о нажатии кнопки «Готово» и запишем в переменную «Окончание редактирования».
Так же по этому фронту прочитаем значение переменной хранящей идентификатор редактируемого поля с помощью блока В54 — «Получить параметр» (библиотека элементов -> папка «Панель Nextion HMI» -> папка «Элементы»). Настройки блока.

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

Новое значение из строки превратим в число в формате Float с помощью блока В51 – «Преобразование строк» (библиотека элементов, папка «Конвертация типов»). Настройки блока.

Число умножим на 10 с помощью блока В52 – “MUL(*)” (библиотека элементов, папка «Математика»), сменим тип на Integer с помощью блока В53 – «Преобразование Float в Integer» (библиотека элементов, папка «Конвертация типов») и положим в переменную «Новое значение».

Плата 10 — «Обработка результатов редактирования значения»

С помощью блока В55 — “Comparator” (библиотека элементов, папка «Сравнение») определяем, какое поле редактировалось, и в зависимости от результата записываем величину из переменной «Новое значение» по импульсу в переменной «Окончание редактирования» в одну из двух переменных, в «Уставка выключения вентилятора х10» или в «Уставка включения вентилятора х10». Так же по тому же импульсу даём команду панели перейти на страницу управления с помощью блока В58 – «Перейти на страницу» (библиотека элементов, папка «Панель Nextion HMI» -> папка «Страница»). Настройки блока.

Плата 11 – «Запись значений уставок в панель и EEProm»

С помощью блока В59 – «Детектор изменения числа» (библиотека элементов, папка «Базовые элементы») определяем факт изменения значения переменой «Уставка включения вентилятора х10». На выходе блока формируется короткий импульс в момент изменения значения на входе «Value». По этому импульсу происходит запись значения в энергонезависимую память контроллера. Это происходить при помощи блока В65 — «Запись в EEPROM» (библиотека элементов, папка «EEPROM»). Блок настраивается при помощи редактора блока.

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

В нём задаём имя переменной и её тип. После нажатия кнопки готово блок окажется, привязан к этой переменной.

Так же по сигналу об изменении переменной, её значение делится на константу типа Float равную 10 при помощи блока В61 – “DIV(/)” (библиотека элементов, папка «Математика»), превращается в строку с помощью блока В62 –«Преобразование строк» (библиотека элементов, папка «конвертация типов»), и отправляется на панель в соответствующее поле с помощью блока В63 – «Задать параметр» (библиотека элементов, папка «Панель Nextion HMI» -> папка «Элементы»). Настройки этого блока.

Логика контроля переменой «Уставка выключения вентилятора х10» аналогична, Настройки блоков такие.

Блок B65.

Блок В68.

Теперь обеспечим чтение уставок из EEPROM в момент старта контроллера. Для этого вставим новую плату в самый верх проекта для того что бы схема расположенная на ней выполнялась а первую очередь. Для этого выделяем первую плану и нажимаем кнопку «Вставить плату перед выделенной».

Назовём новую плату «Чтение уставок из EEPROM».

Плата 1.

С помощью блока В72 – “Rtrig” (библиотека элементов, папка «Триггеры») мы создаём один короткий импульс при включении контроллера. По этому импульсу происходит запись в переменные «Уставка включения вентилятора х10» и «Уставка выключения вентилятора х10» значений прочитанных из энергонезависимой памяти. Это происходит при помощи блоков В71 и В73 – «Чтение из EEPROM» (библиотека элементов, папка «EEPROM»). Блоки параметрируются с помощью редактора блоков.

Параметры блока В71.

Выбор читаемой переменной в EEPROM производится нажатием кнопки «Выбрать». Открывается окно выбора переменной.

Параметры блока В73.

Ну и последняя плата в проекте.

Плата 12. «Управление вентилятором»

Если текущая температура превысила уставку «Уставка включения вентилятора х10» это обнаружит блок сравнения В69 и установит триггер В70 в состояние 1, а при снижении температуры ниже уставки «Уставка выключения вентилятора х10» это будет обнаружено блоком В71, который установит триггер В70 в состояние 0. Состояние триггера подаётся на блок выхода связанного с вентилятором.

Архив с исходниками проектов.

Видеодемонстрация

habr.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *