Nextion: d0_bf_d1_80_d0_be_d0_b4_d1_83_d0_ba_d1_82_d1_8b:nextion [Амперка / Вики]

FLProg + Nextion HMI. Урок 1 / Блог компании FLProg / Хабр

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

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

Зоны окна:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• “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(t0.txt==”123456”)
{    
рage 1
}

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

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

Возможные операторы сравнения:

• Для числовых значений
  
  • > больше
  • < меньше
  • == равно
  • != не равно
  • >= больше или равно
  • <= меньше или равно
• Для строковых значений
  
  • == равно
  • != не равно

Вложенные “()” и операторы связи не допускается, например нельзя использовать такую конструкцию: if(j0.val + 1> 0). Для решения таких задач необходимо использовать переменные.

Поддерживаются вложенные “if” и “else if”.

Отладка проекта.

В состав Nextion Editor входит симулятор проекта. Для его запуска надо нажать кнопку “Debug” ()главного меню. При этом проект откомпилируется и откроется в симуляторе где можно будет проверить работу проекта.

Загрузка проекта в панель.

Для загрузки проекта в панель существует два метода.
Первый метод – через UART. Для этого необходим переходник USB -> UART. Подключаем его в соответствии с таблицой.

Можно сразу установит порт, под которым в системе установился переходник, можно оставить автопоиск. Нажимаем “GO” и начинается загрузка проекта в панель.

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

Расскажу теорию. Карта должна быть отформатирована в формате FAT32. В редакторе нажимаем кнопку “Compile” (). В случае удачной компиляции в окне вывода результатов компиляции (7) не должно быть красных строк.

После этого в Главном меню открываем пункт “File” и выбираем “Open build folder”

Откроется папка со скомпилированными файлами проекта. Выбираем файл с именем нашего проекта и расширением “.tft” в головную директорию SD карты. Фай с таким расширением на карте должен быть один. Затем вставляем карту в отключенную от питания панель и подаём на неё питание. При подаче питания панель обнаружит у себя карту, и ели найдет на ней файл с расширением “.tft” начнёт загрузку проекта с неё. Процесс загрузки будет отображаться на экране. После окончания загрузки надо отключить питание от панели и извлечь SD карту.

Я, конечно, рассказал не все возможности панели Nextion HMI а только те с которыми сам столкнулся в процессе интеграции поддержки панели в программу FLProg. Более подробно о панели можно почитать на сайте wiki.iteadstudio.com/Nextion_HMI_Solution.

В следующих уроках я расскажу, как организовать взаимодействие панели Nеxtion HMI и Arduino используя программу FLProg.

Спасибо за внимание

NEXTION ДИСПЛЕЙ | О курсе

До недавного времени это было почти невозможно, пока в 2016 году на рынке не появились дисплеи Nextion, которые полностью изменили подход к созданию проектов для сенсорных дисплеев

Что такое дисплеи Nextion?

Nextion – это программируемые дисплеи с тачскрином и интерфейсом UART для связи.

Для программирования используется очень удобная и простая среда разработки, которая позволяет создавать даже очень сложные графичские интерфейсы для самой разной электроники буквально за пару часов!

Управление дисплеем происходит через интерфейс UART с arduino, любого микроконтроллера или компьютера.

А что могут дисплеи Nextion?

Интерфейс для контроллера управления насосами

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

(нажмите на картинку для запуска видео)

Интерфейс контроллера температуры в нескольких точках

Через UART от микроконтроллера (с Arduino или компьютера) на дисплей передаются показания температуры в трех точках. Включение или отключение нагрева происходит при нажатии на кнопки. Настройки пороговых значений температуры происходит на отдельной странице настроек.

(нажмите на картинку для запуска видео)

Широкий набор различной анимации

При помощи дисплея можно воспроизводить самые разные типы анимации в самых разных исполнениях: на всем экране, в отдельных облостях, во всплывающих окнах и т.д.

(нажмите на картинку для запуска видео)

Запуск видео фрагментов

Встроенной памяти дисплея вполне достаточно что бы воспроизводить достаточно длительные видеофрагменты!

(нажмите на картинку для запуска видео)

А что мне даст использование дисплеев Nextion?

Кнопки и монохромные экраны – в настоящее время смотрятся как пережиток прошлого.

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

С интерфейсом на сенсорном экране работать намного удобнее!

В любой момент вы можете программно добавить или убрать элемент интефейса. Можете изменять интерфейс сколько угодно раз. И не нужно в корпусе делать отверстия под кнопки управления!

Огромная экономия времени при сложного меню!

Благодаря среде Nextion Editor можно очень быстро создавать красивые интерфеййсы сможет любой. Не важно, школьник, студент или пенсионер. Достаточно будет посмотреть несколько видео по работе с дисплеем, что бы научится самому создавать проекты.

Очень просто создавать сложные многостраничные меню!

Благодаря среде Nextion Editor создавать очень сложные многостраничные меню сможет любой. Не важно, кто вы – школьник, студент или пенсионер. Если обучаться по правильным методам, то уже через несколько видео вы научитесь самостоятельно создавать проекты.

Очень простое управление!

Если Вы умеете передавать и принимать данные по интерфейсу UART при помощи Arduino или микроконтроллера, то Вы уже можете управлять дисплеем или принимать с него команды!

Управляь дисплеем Nextion можно c Arduino, микроконтроллера, одноплатного компьютера и персонального компьютера.

Дисплей может частично или полностью взять на себя функции по управлению

Расширенная линейка дисплеев Nextion, кроме интерфейса UART, имеют 8 выводов, которые могут работать как на вход, так и на выход. На 4 выводах можно формировать ШИМ-сигнал! Кроме того, в дисплеях присутствует EEPROM-память и часы реального времени.

Меньше чем через месяц Вы сможете создавать такие же красивые и функциональные интерфейсы, а если нет, то я верну вам деньги за обучение!

Освоение дисплеев на 100% их возможностей –  это очень не простая задача, которая занимает очень много времени и требует навыков тщательной проработки изучаемого материала.

Благодаря курсу по программированию дисплеев Nextion, вы сможете освоить эти дисплеи меньше чем через месяц!

А если вы так и не научитесь, то сможете обратиться ко мне за личной консультацией. Если и это не поможет, то я верну вам деньги за обучение!

“Я сам в состоянии разобраться с дисплеями, мне не нужны никакие курсы!”

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

А в курсе рассмотрены все компоненты, команды, режимы и их совместное и раздельное использование, а так же особенности их применения!

Есть, как минимум, 6 причин по которым лучше изучать по специально подготовленному учебному пособию, чем самостоятельно:

Самостоятельное изучение будет долгим. Только разбор документации займет не меньше месяца.  А еще нужно разобраться в среде Nextion Editor, инструментами, компонентами разработки, подбором и генерацией шрифтов, загрузкой изображений, особенностями использования команд и компонентов… И много с чем еще…

Вы можете только думать, что используете компоненты правильно. На самом деле, в дисплее много тонкостей в использовании команд и компонентов. А некоторые компоненты можно использовать совсем не так, как может показаться на первый взгляд!

Есть большая вероятность что-то не понять или упустить из виду. Некоторые режимы работы имеют очень непонятное, на первый взгляд, описание. И только целенаправленное изучение даст полное понимание режимов работы.

Кроме учебного материала, вы получаете много дополнительных бонусов, в том числе огромную графическую библиотеку качественных компонентов для отрисовки графики дисплеев.

Если вы собираетесь использовать дисплеи для считывания состояний датчиков или для управления внешними устройствами, то есть некоторая вероятность вывести дисплей из строя! Со знаниями из курса вы сведете такую вероятность к минимуму!

Самое главное, приобретая курс, вы получаете возможность задавать вопросы по темам, которые вам не понятны! Никогда и нигде вы больше такую возможность не получите!

Если Вы хотите узнать о дисплеях чуть больше и получить очень полезный материал, который поможет Вам самостоятельно изучить эти дисплеи, то подпишитесь на рассылку:

“А если я не умею работать в фотошопе, как создавать такую красивую графику?”

Вам не понадобятся навыки работы в фотошопе или любом другом сложном графическом редакторе, чтобы создавать красивые интерфейсы! Есть намного более простой способ!

Вместе с курсом вы получаете огромный пакет графики для создания самых сложных и красивых интерфейсов!

Уверяю Вас, для создания таких интерфейсов, как в начале этой страницы, вам понадобится не более 30 минут!

Что будет в курсе

Всего в курсе 76 уроков общей продолжительностью 25 часов!

Подробный список тем с описаниями вы сможете найти на странице содержание.

Материал курса составлен по принципу от простого к сложному.

Изучение дисплеев будет начинаться с самых базовых тем: типы дисплеев, их характеристики, подключение дисплеев. Далее будут расмотрены компоненты разработки проектов. И особое внимание будет уделено работе со скриптами и графикой!

А эти дисплеи для Arduino (AVR, PIC, Raspberry Pi и т.д.) подойдут?

Дисплеи Nextion управляются через интерфейс UART. Если Вы умеете передавать и принимать данные по интерфейс UART при помощи Arduino, микроконтроллера или любого другого устройства, то Вы уже можете управлять дисплеем или принимать с него команды и данные!

Так как дисплей берет на себя всю самую сложную работу связанную с работой интерфейса, то управлять этим дисплеем может даже самый слабый микроконтроллер. И даже микроконтроллер вообще без аппаратного UART(!), например, ATtiny13. Ничто не мешает интерфейс UART эмулировать программно!

Подойдет ли мне этот курс?

Этот курс рассчитан на тех, кто хотя бы немного имеет опыта в программировании микроконтроллеров или arduino.

Курс отлично подойдет и для тех, кто уже пытался изучать дисплеи Nextion. Из курса вы узнаете много новой информации, даже если думаете, что хорошо изучили дисплей!

А если курс мне не понравится?

Без проблем!

Пишите мне на e-mail, что курса Вам не понравился и я Вам возвращаю деньги.

Почему я даю такую гарантию?

Потому что я на 100% уверен в качестве того материала, за который прошу деньги!

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

print "G52"
printh FF FF FF

if(hour>=6&&hour<22)
gpioset(219,1)
else
gpioset(219,0)
endif

if(hour>=6&&hour<22)
printnraw(dim=80)
else
printnraw(dim=1)
endif

if(p1.pic==96)
{
  p1.pic=97
  p2.pic=97
}else
{
  p1.pic=96
  p2.pic=96
n0.val++
}

va0.val=n0.val%10
  if(n0.val>=60)
  {
    n0.val=10
  }
  if(va0.val==0)
  {
    p0.pic=79
  }
  if(va0.val==2)
  {
    p0.pic=102
  }

if(va0.val==0)
  {
    p0.pic=79
  }
  if(va0.val==2)
  {
    p0.pic=102
  }

String incStr;

void setup() {
  Serial.begin(9600);
  pinMode(2, OUTPUT);
  digitalWrite(2, HIGH);
}

void loop() {
  if (Serial.available()) {
    char inc;
    inc = Serial.read();
    incStr += inc;
    if (inc == 0x0A) {
      AnalyseString(incStr);
      incStr = "";
    }
  }
}

void AnalyseString(String incStr) {
  if (incStr.indexOf("bt0-on") >= 0) {
    digitalWrite(2, LOW);
  } else if (incStr.indexOf("bt0-off") >= 0) {
    digitalWrite(2, HIGH);
  }

  String t1 = "\"" + String(random(25)) + "'C\"";
  SendData("t4.txt", t1);
  t1 = "\"" + String(random(25)) + "'C\"";
  SendData("t5.txt", t1);
}

void SendData(String dev, String data)
{
  Serial.print(dev);
  Serial.print("=");
  Serial.print(data);
  Serial.write(0xff);
  Serial.write(0xff);
  Serial.write(0xff);
}

 
 const Nextion = require ('nextion'); 
 
 
 
 Nextion.fromPort ('/ dev / tty.SLAB_USBtoUART') 
 
 .then (nextion => {
 
 console.log ('Прослушивание ...'); 
 
 
 
 nextion.on ('touchEvent', data => { 
 
 console.log (данные); 
 
}); 
 
}); 
 

 
 const Nextion = require ('nextion'); 
 
 
 
 Nextion.create () 
 
 .then (nextion => {
 
 
 
}); 
 

 
 const tessel = require ('tessel'); 
 
 const Nextion = require ('nextion / minimal'); 
 
 
 
 const uart = новый тессель.порт A.UART ({
 
 скорость передачи: 9600 
 
}); 
 
 
 
 Nextion.fromSerial (uart) 
 
 .then (nextion => {
 
 
 
});