Универсальный внешний накопитель для всех iOS-устройств, совместим с PC/Mac, Android
Header Banner
8 800 100 5771 | +7 495 540 4266
c 9:00 до 24:00 пн-пт | c 10:00 до 18:00 сб
0 Comments

Содержание

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).

Элементы в проект добавляются кликом по нему. Графические элементы добавляются в позицию [email protected], таймер и переменная в строку под зоной экрана.
Практически все графические элементы имеют атрибуты “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(t0.txt==”123456”)
{    
р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» иначе записываем в этот атрибут значение «1»).

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

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

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

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

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

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

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

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

Nextion HMI USB -> UART
+5V +5V
RX TX
TX RX
GND GND

В редакторе нажимаем кнопку “Upload” ()главного меню. При этом проект компилируется и открывается окно загрузки.

Можно сразу установит порт, под которым в системе установился переходник, можно оставить автопоиск. Нажимаем “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

570 Comments: 14Publics: 363Registration: 04-02-2018

WiFi-IoT Firmware Builder :: Nextion HMI



Подключение Nextion:
ESP8266 - тут все стандартно. Подключаемся к UART через (GPIО 1, 3 - TX, RX).
ESP32 - GPIО 19, 18 - TX, RX. При компиляции прошивки нужно выставить свободные GPIO для UART. Не забываем про номер UART, в ESP32 их 3 шт. (0(занят отладкой), 1, 2).


Перевод UART Nextion на 115200:
По умолчанию скорость UART nextion составляет
9600!!! Для начала нужно убедиться, что на скорости 9600 дисплей работает.
Для перевода на 115200 необходимо:

1. Послать GET команду  IP/nextion?raw=bauds=115200 - этим вы переведете свой Nextion на скорость UART 115200 по умолчанию.

2. Скомпилировать прошивку в личном кабинете, как указано на рисунке и обновить ее.


3. После прошивки ваш Nextion будет работать на скорости 115200.

Управление с дисплея Nextion выходами GPIO (VGPIO) находящихся на модулях ESP2866/ESP32:

Для управления выводами ESP 
gpio (vgpio) с Nextion необходимо:
1. В окне 
Toolbox  редактора Nextion Editor добавить один из элементов Button или Dual-state-button


2. В окне EVENT в поле User Code добавить : 

print "G52"
printh FF FF FF
Где G52 - это номер GPIO на ESP8266/ESP32.

Если вписать dim=80 - то по нажатию на кнопку - яркость экрана будет установлена на 80 %. Таким образом можно управлять всеми свойствами.

 Установка отметки в поле - Send Comonent ID - отправка  события нажатии кнопок на экране Nextion в MajorDoMo и MQTT.

3. Скомпилировать ****.tft файл и записать в Nextion.

в ESP32 - можно отправить прошивку на nextion - прямо из вебинтерфейса.


Отправка данных на Nextion:


Для отправки данных из датчиков ESP, Virtual SENS, конструктора строк, а также о состоянии 
gpio (vgpio) на Nextion необходимо: 
1. В 
Toolbox  редактора Nextion Editor добавить один из элементов Text или Dual-state-button
2. На панели 
Attribute переименовать свойства в objname для Text  в d0...d9, для элементов Dual-state-button  в v0...v9.



3. На вкладке 
TXT - из выпадающего списка выбираются датчики, а на вкладке VAL-GPIO - выбираются gpio, если пункт не используется, то строго обязательно требуется установить значение 255 !!! Рекомендуемое максимальное количество строк для конструктора ESP8266 - 3 (Выставляется в шестеренке). Большое количество строк может привести к сбоям в работе модуля


4. Скомпилировать прошивку и записать в Nextion с помощью sd карты, из редактора через uart или прямо из веб интерфейса.

Если при обновлении прошивки из веб интерфейса возникают проблемы, то можно отключить nextion на страничке.


Отправка данных с модуля ESP на Nextion происходит каждые 10 сек.

Вывод информации на Nextion:


1. через MQTT: 
login/hostname/nextion/msg_ID ТЕКСТ, где ТЕКСТ - данные

2. через GET: 
IP/nextion?id=name&send=ТЕКСТ , где name -  objname поля в приложении Nextion Editor (*.txt - указывать не обязательно, *.val и другие), ТЕКСТ - сообщение.
Примеры:

IP/nextion?id=d0&send=12:00 

отправка текста 12:00 на id=d0 (тип переменной - txt)

IP/nextion?id=v0.val&send=23

отправка числа 23 на id=v0.val (тип переменной - val). Поддерживаются все типы переменных !!!.

IP/gpio?st=1&pin=219 

включить подсветку Nextion

IP/gpio?st=0&pin=219 

выключить подсветку Nextion


3. через Interpreter: 



Примеры:

printn(d0,_TIMES_)

где d0 - поле в nextion, _TIMES_ - время

printn(d1,_VS11_)

где d1 - поле в nextion, _VS11_ - виртуальный датчик

Управление Nextion с помощью команд:

1. через MQTT: 
login/hostname/nextion/raw КОМАНДА, где КОМАНДА - raw команда. 
Пример: login/hostname/nextion/raw dim=80 - яркость экрана на 80%.

2. через GET:  
IP/nextion?raw=КОМАНДА, где КОМАНДА - raw команда.

Примеры:

IP/nextion?raw=dims=80 

установить и запомнить яркость экрана на 80 %

IP/nextion?raw=sleep=

включить экран

IP/nextion?raw=sleep=1

выключить экран, (включение экрана по тапу, это реализовано в самой прошивке)

IP/nextion?raw=page 1

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

IP/nextion?raw=bauds=9600

установить и запомнить скорость UART

IP/nextion?raw=vis n1,1

показать элемент n1

IP/nextion?raw=vis n1,0

скрыть элемент n1

IP/nextion?raw=tsw m1,1

разрешить событие нажатия на кнопке m1

IP/nextion?raw=tsw m1,0

запретить событие нажатия на кнопке m1

IP/nextion?raw=add 1,1,50

добавить на waveform id 1, график 1, точку с значением 50

IP/nextion?raw=cle 1,0

очистить график

IP/nextion?raw=rest

полный сброс экрана

Другие команды...

3. через interpreter: 

Примеры:

printnraw(sleep=1)выключить экран, (включение экрана по тапу, это реализовано в самой прошивке)

printnraw(dim=30) 

установить и запомнить яркость экрана на 30 %

Пример управления экраном по времени:

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
Модели корпусов для 3D принтеров в формате stl.


File:3D_Model_Nextion-2.4.zip

File:3D_Model_Nextion-2.8.zip

File:3D_Model_Nextion-3.2.zip

File:3D_Model_Nextion-3.5.zip

File:3D_Model_Nextion-4.3.zip

File:3D_Model_Nextion-5.0.zip

File:3D_Model_Nextion-7.0.zip 

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

  • FLProg + Nextion HMI. Урок 1
  • FLProg + Nextion HMI. Урок 2
  • FLProg + Nextion HMI. Урок 3
  • Обзоры на сторонних ресурсах:

    Все вопросы в Телеграмм

    #18. Урок Nextion дисплей на русском, анимация на дисплее без Arduino.

    Сегодня в уроке научимся делать анимацию и выводить ее на дисплей Nextion. Вся программная часть будет реализована с использованием возможностей Nextion Editor, без использования Arduino.

    Подготавливаем картинки для вывода анимации на экран Nextion.

    Nextion display не умеет выводить gif анимацию или видео на экран. Это касается старых моделей. Новые модели, скорее всего, умеют воспроизводить видео и звук, так как в Nextion Editor появились инструменты позволяющие добавлять элементы медиа. Но у меня нет таких дисплеев, поэтому будем делать анимацию по старинке. То есть покадрово. Для того, чтобы разбить gif анимацию на кадры я использую онлайн сервис picasion.

    Внизу статьи вы можете скачать gif анимацию, которую я использовал. А также для самых ленивых прикрепил архивы с разобранной анимацией по кадрам.

    Анимация процесса загрузки.

    Самая простая анимация, но при этом одна из самых распространенных - это анимация загрузки. Для начала создадим новый проект в Nextion Editor, если вы не знаете, как это сделать, смотрите урок: Nextion Editor урок 1. Скачиваем и первый пример hmi.

    Затем загрузим картинки для анимации. Для этого в панели Picture 1- нажмем на кнопку в виде плюса. В отрывшемся окне 2 выберем нужные картинки и нажмем на копку «Открыть» – 3.

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

    В панели инструментов «Toolbox» выбираем элемент «Timer», этот элемент невидимый и он появиться в панели элементов данного типа.


    Выбираем элемент «Timer», его название - tm0. Установим значение 50 в параметре tim, это интервал срабатывания в миллисекундах, то есть картинка будет меняться каждые 50 мс. Теперь нам нужно написать код, который будет обновлять картинки, это будет небольшое условие.

    На поле экрана нужно добавить картинкус номером 0. Это будет первый кадр.

    Можно проверять Nextion пример анимации.

    Две кнопки по краям это просто перенаправление на другие страницы урока. Nextion hmi и tft nextion можно скачать внизу статьи, в разделе материалы для скачивания.

    Эквалайзер при воспроизведении музыки.

    Второй пример основан на первом. Загружаем nextion картинки и добавляем таймер.

    Мы уже знаем, что данная анимация будет повторяться постоянно. Как же ее нам остановить, например, при нажатии кнопки? Для этого достаточно остановить таймер, и, при необходимости, снова запустить.

    Давайте загрузим картинки для кнопок.

    И добавим нужные элементы в проект.

    Напишем

    следующий код для нажатия кнопки.

    Будем включать и выключать таймер 0, а также менять картинку кнопки.

    Еще один nextion пример готов.Осталось запустить и проверить.

    Nextion hmi и tft nextion можно скачать внизу статьи, в разделе материалы для скачивания.

    Анимация по времени.


    В проектах часто приходится делать вывод времени и обработку событий по определённому расписанию или через определённый интервал. В следующем примере будем производить отсчет времени на дисплее nextion без использования Ардуино. Для этого разместим элементы на экране.

    Загрузим картинки для кнопок и для анимации.

    Анимация тут будет без повтора, поэтому код будет видоизменен.

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

    Переменная va0 остается без изменений, а параметр val должен быть равен 0.

    Для второго

    таймера пропишем вот такой код.

    Интервал tim для второго счетчика устанавливаем 500 мс. Рассмотрим код подробнее.
    if(p1.pic==96)
    {
      p1.pic=97
      p2.pic=97
    }else
    {
      p1.pic=96
      p2.pic=96
    n0.val++
    }
    

    Если мы оставим только лишь эти строки, то мы увидим мигание точек у часов. Картинки 96 и 97 -это токи и просто белый фон. Они меняются местами с интервалом в пол секунды.

    n0.val++ - добавляет ежесекундно «1» к числу в данном поле. И мы видим секунды на наших импровизированных часах.

    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
      }
    

    va0.val=n0.val%10 получаем остаток от деления на 10 и сохраняем в переменнуюva0.val.

    Когда время достигло 60 сек., то меняем значение на 10. Но по-хорошему это должен быть 0. Тогда будет полноценное изменение времени. Тут можно добавить прибавление минут ко второму числу часов, но я не стал писать много кода, чтобы было более понятно.

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

    Тут мы проверяем, какое значение в нашей переменной. Если остаток от деления равен 0, тогда задаём начальную картинку анимации, что автоматически запустит анимацию. Это прописано в нашем первом таймере. Если остаток от деления равен 2, то выводим белую картинку. Это закрывает последний кадр анимации.

    По данному алгоритму анимация повторяется каждые 10 секунд. «Интервал», «время» и прочие параметры можно настроить и дописать для решения вашей задачи.

    Чтобы запустить анимацию с использованием Arduino достаточно отправит на nextion display

    значения для включения таймера.Как это сделать смотрите в nextion уроке: Дисплей Nextion урок 2. Подключаем и передаем данные на Arduino.

    Если вам интересна эта тема, смотрите мой проект часов: Часы на Arduino и дисплее Nextion с выводом температуры и влажности. В данном проекте нашел пару недочётов, скоро будет доработанная версия с еще большим функционалом.

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

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

    Всем Пока-Пока.

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

    Понравилась статья? Поделитесь ею с друзьями:

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

    Взрыв.gif77 Kb 193 Скачать

    Вы можете скачать файл.

    Взрыв.zip55 Kb 176 Скачать

    Вы можете скачать файл.

    Загрузка.gif23 Kb 173 Скачать

    Вы можете скачать файл.

    Загрузка.zip41 Kb 186 Скачать

    Вы можете скачать файл.

    Музыка.gif67 Kb 163 Скачать

    Вы можете скачать файл.

    Музыка.zip204 Kb 169 Скачать

    Вы можете скачать файл.

    Nextion hmi и tft nextion.zip1124 Kb 252 Скачать

    Вы можете скачать файл.

    Nextion – вопросы и ответы по программированию

    У меня есть Arduino MEGA с одним из этих дисплеев Nextion. Я создал хороший дисплей, и моя цель - показать аналоговые входы. Однако я заметил, что этот дисплей не может показывать десятичные знаки ...

    1 месяц, 1 неделя назад Matti

    Привет, я пытаюсь отправить данные на дисплей nextion 2.4 из малины pi, я пытаюсь сделать такое изменение, например t0.txt = "abc", но я не знаю, как это сделать с python я пытаюсь выполнить этот б...

    Ниже приведен код, загруженный с примера YouTube, и сокращенный, чтобы использовать JUST кнопку двойного состояния. КОД /* This sketch shows examples on how to send data from the Nextion display to...

    2 года, 7 месяцев назад Jesse

    Есть ли способ загрузить напрямую файлы с ESP32 на Nextion Display? Я хочу загрузить фотографии или TFT файл с ESP 32 WIFI и загрузить его на дисплей. Было бы здорово, если я смогу сделать это с по...

    2 года, 5 месяцев назад Milad

    Я пытаюсь подключить последовательный экран Nextion HMI к Android Things, в частности PICO-PI-IMX6UL Я использую шаблон образца uartloopback в качестве исходного места. Мне нужно отправить следующу...

    3 года, 4 месяца назад Dreambeats

    сегодня я отчаянно пытался читать значения из nextiondisplay в моем коде python. Запись на него работает, но я просто не могу заставить python читать его. Мой код выглядит так: def ser_escape(): es...

    interface between Nextion and Arduino Due how to solve this, please? есть идеи? Мне нужно запустить интерфейс между экраном и Arduino из-за функции прерывания

    Подключение дисплея Nextion к Arduino или ESP8266

    Довольно большую популярность обрели любопытные дисплеи от компании ITEAD STUDIO, которые создали поистине функциональный и удобный в разработке продукт.

    Этим продуктом стали графические дисплеи Nextion с весьма приличной графикой, сенсорным экраном и удобным интерфейсом для быстрого создания различных электронных проектов. В данной статье мы рассмотрим основные моменты по настройке, подключению и взаимодействию такого дисплея с внешними контроллерами. Например такими как всем известные Arduino или ESP8266.

    Модули классифицируются по диагонали дисплея и все они наделены резистивным сенсором. Обращаем Ваше внимание на то, что желательно использовать европейскую версию дисплея (первые символы в модели — NX). С ними будет значительно проще в плане совместимости с оригинальным софтом от Itead Studio — Nextion Editor.

    Изначально дисплеи делятся на две линейки — Enhanced model и Basic model. Расширенная версия отличается наличием более мощных процессоров, EEPROM памятью, доступной для пользователя, 8-ю выходами GPIO и наличием часов реального времени с элементом питания. Ну и конечно же ценой. Ниже представлены таблицы для сравнения характеристик дисплеев Nextion из обеих линеек.

    ENHANCED MODELS

     

    BASIC MODELS

     

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

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

     

    Купить дисплей Nextion как в обзоре можно тут.

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

     

    Скетч из видео для загрузки в Arduino или модуль ESP8266:

     

    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);
    }
    
    

    Nextion Enhanced NX4832K035 - стандартный 3,5-дюймовый сенсорный дисплей HMI

    Обзор

    Версии Nextion Enhanced более мощные, чем стандартные. По сравнению с базовыми дисплеями Nextion, в улучшенные дисплеи добавлены некоторые новые функции, такие как: поддержка встроенного RTC, поддержка сохранения данных во флэш-памяти, поддержка GPIO, большая емкость флэш-памяти и увеличенная частота процессора. Улучшенная серия Nextion имеет крышки 7 размеров от обычных 2,4 до 7,0 дюймов.

    Nextion Enhanced NX4832K035 - мощный 3.5-дюймовый TFT-дисплей HMI с 32 МБ флеш-памяти, 1024 байта EEPROM, 8192 байта RAM. Благодаря поддержке GPIO теперь клиенты могут использовать Nextion для управления внешними устройствами.

    Nextion - это бесшовное решение человеко-машинного интерфейса (HMI), которое обеспечивает интерфейс управления и визуализации между человеком и процессом, машиной, приложением или устройством. Nextion в основном применяется в сфере Интернета вещей (IoT) или бытовой электроники. Это лучшее решение для замены традиционных жидкокристаллических и светодиодных ламп Nixie.

    Nextion включает аппаратную часть (серия плат TFT) и программную часть (редактор Nextion). Плата Nextion TFT использует только один последовательный порт для связи. Это позволяет пользователям избежать хлопот с подключением. Мы заметили, что большинство инженеров тратят много времени на разработку приложений, но получают неудовлетворительные результаты. В качестве решения этой ситуации редактор Nextion имеет массовые компоненты, такие как кнопка, текст, индикатор выполнения, слайдер, панель инструментов и т. Д., Чтобы обогатить дизайн интерфейса.Кроме того, функция перетаскивания гарантирует, что пользователи будут тратить меньше времени на программирование, что уменьшит 99% их рабочих нагрузок на разработку. С помощью этого редактора WYSIWYG создание графического интерфейса пользователя - это совсем несложно. HMI семейства Nextion легко адаптировать к существующим проектам - пользователям просто нужно предоставить ему UART.

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

    Характеристики

    • Поддерживает встроенный RTC
    • поддерживает GPIO
    • Интерфейс SD-карты: поддержка макс. 32G Micro TF / SD-карты (формат файла FAT32)
    • Место для хранения флеш-данных: 32 МБ
    • EEPROM: 1024 байта
    • RAM: 8192 байта
    • Буфер команд: 1024 байта
    • Цвет: 65K (65536) цветов
    • Разрешение: 480 × 320 пикселей
    • Регулируемая яркость: 0 ~ 180 нит - интервал регулировки 1%

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

    • Зона обзора: 73.44 мм (Д) × 48,96 мм (Ш)
    • Размер макета : 100,5 (Д) × 54,94 (Ш) × 5,45 (В)
    • Тип касания: резистивный
    • Подсветка: LED
    • Срок службы подсветки (средний):> 30 000 часов
    • Вес нетто: 48,2 г
    • Рекомендуемый источник питания: 5 В, 500 мА постоянного тока
    • Сертификаты: CE / EMC, RoHS (сертификаты)

    В комплект входит

    Улучшенный дисплей HMI Nextion 1 × 3,5 дюйма

    1 × тестовая плата блока питания

    Кабель Grove Grove, 1 шт., 4 контакта

    Документы

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

    Техническая поддержка

    Для получения технической поддержки откройте тикет на форуме Nextion.

    nextion - npm

    Взаимодействие с устройствами HMI компании ITEAD Nextion

    Статус

    Базовое использование

    COM-порт, переходник USB-UART и т. Д.

     

    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 => {

    });

    Тессель 2

     

    const tessel = require ('tessel');

    const Nextion = require ('nextion / minimal');

    const uart = новый тессель.порт A.UART ({

    скорость передачи: 9600

    });

    Nextion.fromSerial (uart)

    .then (nextion => {

    });

    Модуль nextion / minimal предназначен для систем с ограниченными ресурсами; он сжат и не включает исходные карты.

    Совместимость

    Пока аргумент, переданный в Nextion.fromSerial , является дуплексным потоком или потоком с утиным типом (а-ля последовательный порт), вы должны иметь возможность его использовать.Взломайте!

    События

    Экземпляр Nextion ( nextion ) в приведенных выше примерах - это EventEmitter . Если устройство отправит любой из них по каналу UART, экземпляр Nextion выдаст соответствующее событие (с данными, если таковые имеются).

    • События (Таблица 2)
      • 0x65 - touchEvent : данные возврата события касания
      • 0x66 - pageId : Идентификатор текущей страницы
      • 0x67 - touchCoordinate : данные касания координат
      • 0x68 - touchCoordinateOnWake : данные координат касания (при пробуждении)
      • 0x70 - stringData : данные строковой переменной
      • 0x71 - numericData : данные числовой переменной
      • 0x86 - autoSleep : Устройство автоматически переходит в спящий режим
      • 0x87 - autoWake : Устройство автоматически выходит из спящего режима
      • 0x88 - запуск : успешный запуск системы
      • 0x89 - карта Обновление : Начать обновление карты SD
      • 0xfd - transferFinished : передача данных завершена
      • 0xfe - transferReady : готов к приему передачи данных

    TODO: Опишите форму данных для событий, излучающих данные.

    Мотивация

    • Отправка и получение событий через UART на устройство Nextion (ссылка на оборудование)
    • Поддержка Tessel 2
    • Поддержка последовательных адаптеров USB-UART для отладки
    • Endgame: объединяет Tessel 2 с Nextion для разработки / реализации (в основном) панели управления домашней средой / приборной панели на основе JS.

    Будущее:

    • Обеспечить поддержку популярных ARMv6 / 7/8
    • Обеспечить поддержку популярных (не Tessel) устройств MIPS
    • Интерфейс с командами дизайнера графического интерфейса

    Разработка

    • Используйте переменную среды DEBUG = nextion * для вывода отладки.
    • Чтобы выполнить сквозные тесты на подключенном устройстве, прочтите test / e2e / README.md , затем выполните yarn test: e2e .
    • Для отладки последовательного порта используйте DEBUG = nextion *, serialport .

    Банкноты

    ARM

    Если модуль последовательного порта поддерживает архитектуру, этот модуль должен работать «из коробки» , что означает, что RPi и BBB теоретически покрываются.

    MIPS

    Это не должно быть так уж плохо, потому что Tessel 2 основан на MIPS, , но нам нужен Node.js v4. У других плат на базе MIPS, которые я использовал, возникли проблемы с их компиляцией, упаковкой или работой с приличной скоростью.

    Лицензия

    © ️ 2017 Кристофер Хиллер. Лицензированный MIT.

    Nextion HMI Display: обзор Брайана

    Ближе к концу 2015 года со мной связались представители ITead Studio после того, как они прочитали мои блоги по Arduino. Основываясь на том, что они видели в моих блогах, они спросили меня, не хочу ли я взглянуть на пару связанных с ними продуктов. Первым продуктом, о котором они спросили, был их дисплей HMI.Мое любопытство разыгралось, я быстро просмотрел их веб-сайт и сделал несколько поисковых запросов в Google. То, что я обнаружил, меня очень взволновало - это выглядело как продукт прямо в моем переулке.

    Дисплей HMI (человеко-машинный интерфейс) - это экономичный сенсорный TFT-экран, которым можно управлять через встроенный последовательный порт. Редактор Nextion используется для разработки интерфейса, который сохраняется на Micro SDCard и затем загружается на устройство. В редактор встроена логика интерфейса: вы создаете страницы и размещаете объекты (кнопки, ползунки, текстовые поля и т. Д.).) внутри страницы и включите все элементы управления, необходимые для перемещения между создаваемыми вами страницами.

    Что важнее? Последовательный интерфейс на устройствах также позволяет вам управлять дисплеем с чего-то вроде Arduino, Raspberry Pi или любой другой системы на кристалле с возможностью связи через последовательный порт. Больше всего мое любопытство вызвала возможность создать пользовательский интерфейс перед одним из моих творений на Arduino.



    Первые мысли и впечатления

    Поскольку производитель заявил, что они имеют низкую стоимость, первое, что я сделал, - это пошел на Amazon, чтобы узнать, по какой цене их продают реселлеры.Я нашел 2,4-дюймовые дисплеи Nextion HMI за 17,99 долларов, 4,3-дюймовые дисплеи Nextion HMI за 49,98 долларов, 7,0-дюймовые дисплеи Nextion HMI за 79,99 долларов и другие размеры (как больше, так и меньше) по аналогичной цене. Единственная моя жалоба на то, что я нашел на Amazon, заключается в том, что пока не так много продавцов, продающих дисплеи, а это значит, что они довольно быстро появляются и заканчиваются. Хуже того, есть недобросовестные продавцы, пытающиеся извлечь выгоду из дефицита на Amazon, раздувая покупателей завышенными ценами.Учитывая то, что происходит с ценами на Amazon, я бы посоветовал попробовать покупать через ITEAD Studio Store или eBay, пока продавцы Amazon не соберутся вместе. Но для того, что вы получаете, это определенно кажется хорошей ценой. Особенно если учесть, что редактор Nextion позволит вам создать полностью независимый пользовательский интерфейс без подключения Arduino или Raspberry Pi для управления им.

    После установки редактора я начал копаться в Google, Youtube и на сайте Itead Studio.В информации нет недостатка, но мое первоначальное впечатление таково, что мне было немного сложно ее усвоить. Было довольно очевидно, что авторы большей части контента и дизайнеры редактора не говорят на английском как на основном языке - значительная часть документации и диалоговых окон программного обеспечения были плохо написаны, немногочисленны и в некоторых случаях на китайском языке.

    Это оказалось немного препятствием, но ничего, что я не смог бы преодолеть с помощью нескольких десятков вкладок, открытых в Google Chrome, и некоторых проб и ошибок.

    Использование

    Первым делом я установил Nextion Editor и начал возиться. Мне не потребовалось много времени, чтобы придумать, как добавить страницу, добавить на нее непристойные слова и отобразить эту ненормативную лексику на 2,4-дюймовом дисплее HMI Nextion. В процессе я узнал несколько вещей:

    1. Из редактора вам нужно было «скомпилировать» файл и найти результат сборки (File -> Build Output) , чтобы найти файл * .tft, который копируется на вашу Micro SDCard.
    2. Дисплей HMI обработает этот файл после включения.
    3. Возможно, вам придется извлечь карту MicroSD и снова включить ее, чтобы увидеть, как она заработает в первый раз. Я не на 100 процентов уверен в этом, но казалось, что если я оставлю карту Micro SDCard в слоте, она никогда не запустит то, что я загрузил.

    После этого успеха я захотел разработать что-то более сложное, чтобы продемонстрировать одну или две функции дисплея. В редакторе я создал новый проект с тремя разными страницами.В нижнем левом углу каждой страницы были три кнопки, обозначенные как 1, 2 и 3. Щелчок по этим кнопкам переводил вас на страницу, которой она соответствовала. И, естественно, я добавил три изображения в качестве фона для каждой страницы, чтобы я мог определить, работают ли кнопки.

    Помимо того, что сенсорный экран не очень отзывчивый, я справился с этим довольно просто. Мне показалось, что с редактором немного сложно начать работу, но как только я немного познакомился с дисплеем, я смог создать этот пример всего за несколько минут.Естественно, это была только моя первая попытка использовать Nextion HMI Display. Мой базовый интерфейс был не особо хорош, если только вы не фанат животных, как я! Чтобы получить максимальную отдачу от дисплея Nextion HMI Display, я хотел бы иметь возможность управлять им с Arduino.

    Что дальше?

    Я полностью впечатлен дисплеем Nextion HMI. Устройство попадает прямо в разрыв, который, как мне кажется, существует между устройствами Arduino и RaspberryPi; Arduino не хватает вычислительной мощности для питания многих дисплеев.Некоторые из них можно выгрузить на дисплей HMI Nextion. В том же духе это можно сделать относительно недорого, а редактор Nextion упрощает создание этого интерфейса. Если вы любитель Arduino, я думаю, что, по крайней мере, у вас должен быть один из 2,4-дюймовых HMI-дисплеев в вашем инвентаре запасных частей.

    Здесь в очень краткосрочной перспективе я могу вспомнить два проекта, в которых дисплеи Nextion HMI пригодятся:

    Во-первых, я недавно занялся домашним пивоварением собственного пива в группе домашнего пивоварения в TheLab.мс, пространство для творчества Plano-area. В результате домашнего пивоварения я построил кизер, из которого можно было разливать пиво. Мой первоначальный дизайн заключался в том, что я просто писал на кизере, какой напиток находится в каждом кране, с помощью маркеров сухого стирания. Тем не менее, благодаря дисплеям Nextion HMI, я теперь увлекся идеей создания интерактивного меню, которое описывает, что находится в каждом касании, и содержит несколько фотографий, которые можно установить поверх или где-нибудь в кизере.

    Во-вторых, я использую curl на своем Nexus 6 для отображения некоторых показателей своего веб-трафика в уведомлении Android.Я думаю, что было бы неплохо, если бы эти данные отображались и обновлялись в реальном времени где-нибудь, а не прямо на моем рабочем столе.

    Заключение

    Я очень рад тому, что вы можете делать с дисплеями Nextion HMI, как в качестве автономного устройства с интерфейсом, который вы создаете и загружаете на него самостоятельно, так и в качестве «умного» дисплея с Arduino или RaspberryPi, добавляя дополнительные особенности и функциональность. Дисплеи Nextion HMI имеют хороший набор функций и представляют довольно большую ценность, учитывая цену их дисплеев различного размера.

    Какие проекты вы бы построили вокруг дисплеев Nextion HMI? Пожалуйста, поделитесь своими мозгами в комментариях ниже!

    Похожие сообщения

    Неофициальный форум пользователей Nextion / TJC

    Добро пожаловать на неофициальный форум пользователей Nextion / TJC 0 2542 2 октября 2018 г.
    Отображение картинки на экране под углом.используя команду pic? 6 103 3 марта 2021 г.
    Ошибки протокола загрузки 2 62 3 марта 2021 г.
    7-дюймовая интеллектуальная серия с соотношением сторон 8 1515 28 февраля 2021 г.
    Проблема с Arduino Mega и контактом 2 1 85 28 февраля 2021 г.
    Повышение цены на Nextion? 11 246 27 февраля 2021 г.
    Всегда показывать переданные значения даже после смены страниц 2 57 27 февраля 2021 г.
    Токоограничивающий резистор подсветки 3 80 24 февраля 2021 г.
    Прошивка TJC / eeprom редактировать? 11 283 24 февраля 2021 г.
    Нужна помощь в реализации измерителя силы G с помощью Arduino 5 399 22 февраля 2021 г.
    Не удается обновить урожай при обновлении переменной через последовательный порт 14 297 21 февраля 2021 г.
    Кнопка с тремя состояниями 6 365 19 февраля 2021 г.
    Как использовать gmov и видео на Nextion 0 53 18 февраля 2021 г.
    Формат файла HMI 2 127 18 февраля 2021 г.
    Перемещение изображения по экрану.команда "pic" и очистка? 2 78 18 февраля 2021 г.
    TJC Editor 1.60.2 на английском языке 29 2607 16 февраля 2021 г.
    Настройка разработки, лучший способ сделать это, пожалуйста, посоветуйте? 0 64 16 февраля 2021 г.
    Требуется помощь по прошивке 4 81 год 14 февраля 2021 г.
    Обновление индикатора выполнения ползунка 5 128 11 февраля 2021 г.
    Автоматическое затемнение дисплея 0 99 9 февраля 2021 г.
    Изменить цвет кнопки arduino 2 89 8 февраля 2021 г.
    Идеи для управления палитрой цветов Nextion? 7 542 8 февраля 2021 г.
    Емкостный MultiTouch... Что толку? 0 83 7 февраля 2021 г.
    Возврат даты страницы KeybdA в текстовый элемент управления 6 120 6 февраля 2021 г.
    Измените идентификационный номер компонента после размещения на странице 6 211 3 февраля 2021 г.
    Изменить чувствительность? 3 104 3 февраля 2021 г.
    Получить имя файла TFT 1 91 1 февраля 2021 г.
    Протокол загрузки Nextion v1.2 (быстрый) 3 188 1 февраля 2021 г.
    Читать из SD-файла в переменную 0 77 30 января 2021 г.
    Нужна помощь, Градиенты на экране Nextion 3 194 30 января 2021 г.

    Дисплей Nextion - в чем волшебство?

    Если вам интересно, как красиво анимированная графика попадает на дисплей и реагирует на щелчки и прикосновения, вызывая показания или действия, то вы попали в нужное место.

    Ответ приходит от Itead Studio с вашей линейкой продуктов Nextion - HMI-Solution. Это означает человеко-машинный интерфейс и означает взаимодействие между человеком и дисплеем.

    Но как это работает?

    При использовании автономной среды IDE - редактора Nextion (v0.58) - доступного для Windows - графический интерфейс дисплея разработан спокойно. Это означает, что из ряда компонентов из Toolbox упорядочиваются требуемые и совместимые с устройством (Nextion Display) компоненты на автономном дисплее редактора.Затем добавляются страницы и атрибуты, а также изображения и шрифты, а также видео и аудио.

    Результат сохраняется в файле HMI и импортируется на физический дисплей через SD-карту или переходник USB-TTL. После перезагрузки становится доступным интерактивный интерфейс, которым можно управлять с различных устройств.

    Предварительное условие: установка редактора Nextion и библиотеки для запланированного устройства (обратите внимание на несколько корректировок при использовании Arduino Uno - для Mega или Raspberry PI библиотека готова к работе немедленно).Библиотека Nextion также доступна для сообщества частиц!

    Пользователи частиц могут быть счастливы

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

    В моем случае при использовании NX8048P070 потребовался блок питания с USB-кабелем для стабильного питания с напряжением 5В. Применительно к Arduino было мерцание экрана.

    Примеры, которые вы найдете в библиотеке, часто несовместимы с текущим редактором.Чтобы решить эту проблему, Itead предлагает LTS-версию редактора для дополнительной загрузки. В примерах вы также найдете необходимые шрифты в формате «zi» для создания файла HMI (кнопка «компиляция» или «отладка»).

    При желании вы также можете загрузить рамки для печати в виде файлов STL для завершения вашего проекта.

    Если вы еще не зарегистрировались на форуме, то самое время пришло бы после установки. Здесь вы найдете пошаговое руководство для Arduino - пожалуйста, уделите 1 час, чтобы внимательно изучить каждый шаг.

    Я поместил сгенерированный из этого примера файл HMI в объекты. Работает нормально, но две кнопки у меня пока не работают - жду ваших отзывов 😉 Подробно:

    Страница0 тоже не переключается на страницу1 Светодиод D13 не горит. Что это?

    С помощью MS Paint я создал простую фоновую графику в соответствии с размером физического дисплея и импортировал ее в редактор.

    Взаимодействие с Arduino осуществляется с помощью скетча, который обращается к отдельным компонентам графического интерфейса через последовательный интерфейс TX / RX.

    Вместо шрифта ZI из примера на шаге 7 «Файл шрифта 8 × 16 ZI (* .zi)» можно импортировать файл ZI из одного из примеров в редактор. К сожалению, в редакторе нет возможности изменить шрифты для Windows на ZI. Кроме того, при установке в IDE отсутствуют собственные стандартные шрифты ZI. Очень жаль.

    результат обучения

    В конце есть успех: счетчик подсчитывает цикл, цвет кнопок и текст меняются в зависимости.

    В целом он мне очень понравился, и возможности кажутся безграничными с компонентами панели инструментов, возможностью сенсорных событий и встроенными часами RTC. Это позволяет Nextion Display быть полностью автономным, например, в качестве настольных часов. Можно установить даже автономный код.

    Вначале требуется определенное количество страданий для кривой запуска навыков с активами выносливости. В результате вы будете вознаграждены - помимо дисплеев LCD1602 / LCD2004 или OLE.

    Для первых проб и ошибок продукта из серии Basic вполне достаточно. Их и так дешево достать. Спецификации можно найти здесь для просмотра.

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

    Интересна классификация продуктов с буквенными обозначениями:

    Intelligent = PEnhanced = KBasic = TT Это не имеет для меня смысла и до сих пор вызывает у меня улыбку.

    Если вы хотите задокументировать свои собственные схемы, вы также найдете для загрузки соответствующую библиотеку Fritzing с графическими объектами Itead.

    Дайте волю своему творчеству!

    Дисплеи Nextion - они отлично выглядят

    Рискну повториться (извиняюсь перед постоянными читателями за этот первый параграф), дисплей Nextion на самом деле представляет собой серию сенсорных ЖК-дисплеев от маленьких до больших. Их всех объединяет законченная среда программирования, в которой, загрузив графический инструмент для настольных ПК, вы можете расположить дисплей, что он будет показывать и как он будет реагировать на нажатия кнопок.Все это происходит последовательно, так что вы программируете его последовательно через, скажем, FTDI (интерфейс usb-to-serial), и когда вы закончите, и нажата кнопка, последовательный вывод отправляется обратно в ваше приложение, и вы делаете то, что вы хочу с этим.

    Итак, обо всем по порядку - что это такое? Это отличный недорогой способ получить визуальные элементы управления на вашем IOT-устройстве. То, что это не так, интересно программировать. Интерпретатор языка встроен как в сам дисплей, так и в симулятор «отладки» рабочего стола - и я хотел бы резюмировать, сказав, что это, вероятно, худший интерпретатор, с которым я когда-либо сталкивался со времен Билла Гейтса 5K BASIC в 80-х годах.Однако это работает - и, приложив немного усилий, вы скоро сможете обойти неэффективность интерпретатора и выполнить свою работу.

    Мой друг и я какое-то время искали возможность использовать их в наших ИТ-проектах - и хотя последовательный интерфейс прекрасен, от него мало толку, если вы просто хотите прикрепить регулятор термостата на стене в двух комнатах от него. откуда ваш контроллер.

    Как многие из вас знают, я фанат Raspberry Pi / MQTT / Node-Red, и поэтому все, что я делаю, ориентировано на создание периферийных устройств, которые будут общаться по протоколу MQTT по беспроводной связи с Pi - отсюда мой интерес к устройствам SONOFF как это ОЧЕНЬ дешевый механизм для управления освещением и т. д. - с использованием моего собственного программного обеспечения или программного обеспечения других разработчиков, которое вы здесь видели.

    И вот мы с Эйданом приступили к изготовлению небольшой платы для задней части Nextion - первая пришла от китайского поставщика с отключенным верхним заземлением - это дало нам возможность сделать MKII, который мы Мы ожидаем, что через неделю или около того, мы действительно думаем, что у нас получится ОТЛИЧНАЯ доска общего назначения для экспериментов с ESP-12… но об этом позже.

    Итак - здесь мы не будем концентрироваться на коммуникации, а на том, как мне удалось получить красивые кнопки.Весь этот дисплей фактически состоит из ДВУХ изображений - благодаря функции Nextion под названием CROPPED IMAGE

    .

    Одна, по-видимому, БОЛЬШАЯ проблема с дисплеями Nextion - их неспособность обрабатывать прозрачные изображения PNG, например круглые кнопки. На первый взгляд, это может быть нормально, если у вас есть статический цвет фона и вы можете сопоставить его по краям кнопки, но часто это не так. Чтобы работать с ограниченной вычислительной мощностью (и я подозреваю, что ограниченные возможности программирования или пространство для программы, если интерпретатор может что-то делать), им нравится обрабатывать прямоугольные области - их легко перемещать на высокой скорости.Но они нашли хорошее решение этой проблемы - кадрированное изображение.

    Допустим, вы создаете 2 изображения - одно со всем выключенным, а другое со всем включенным. КНОПКА может быть прямоугольной областью с текстом на ней - который выглядит АБСОЛЮТНО УЖАСНО - или это может быть ОБРЕЗАННОЕ ИЗОБРАЖЕНИЕ, показывающее часть выбранного изображения в зависимости от состояния кнопки. Таким образом, прямоугольная область над круглой кнопкой, показывающая окно в общем изображении ВКЛ или ВЫКЛ, создаст впечатление, что меняется только закругленная область - и вам не нужно беспокоиться о градиентном фоне и т. Д.

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

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

    Использование второго изображения - со всем включенным - управляется самим Nextion - который выборочно показывает части этого второго изображения по мере необходимости - конечно, это всего лишь очень БАЗОВЫЙ пример - у вас может быть несколько страниц, вы можете программно выберите больше, чем просто 2 варианта (кнопка с 3 состояниями или светодиод ... и Nextions - если вы станете СЛИШКОМ амбициозным - могут обрабатывать внешнюю SD-карту для еще большего количества изображений.На дешевом одноразовом SD 256Meg хранится довольно много изображений.

    Благодаря совету друзей и присутствующих здесь людей я нашел довольно много изображений - я поместил ссылку в комментариях к предыдущей статье - любые прозрачные изображения PNG можно вытащить в Powerpoint или что-то подобное для создания ваших основных страниц - возможность обрезки Nextion позволяет превратить это в динамический дисплей.

    Итак, мы подошли к интерпретатору Nextion, который УЖАСНО. Как мне получить нажатие кнопки (кнопка с двумя состояниями) для отправки правильной информации - это может выглядеть как беспорядок, но когда вы входите в редактор Nextion и начинаете работать - вы можете поблагодарить меня за это - нет, это не так ' это моя паршивая программа, из-за которой это выглядит так, и нет, вы не можете поместить все в одну строку, и да, удивительно, что у вас не может быть пробела после оператора IF - я подумал о том, чтобы добровольно пойти и помочь им с переводчиком !!! Но это работает, поэтому, как только вы его сделаете, это будет работа копирования и вставки.

    print 70
    print «nodered ~ tog4 =»
    if (bt0.val == 0)
    {
    print «0»
    }
    if (bt0.val == 1)
    {
    print «1»
    }
    печать ff ff ff

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

    Когда мы получим наши новые платы, и я соберу свой офис - я постараюсь перейти к этой стороне проекта - так как я вижу много будущего в этом высококачественном беспроводном сенсорном дисплее.

    nextion - uBitx

    Если этот дисплей выглядит так, как будто это коммерческая установка, то вы ошибаетесь! Это дисплей Nextion, установленный на µBITx!

    Ян KD8CEC вскоре выпустит свое новейшее усовершенствование для прошивки CEC. Его последняя модификация прошивки CEC поддерживает экраны Nextion. Это было недавно предсказано в списке BITX20.


    ЭТО БУДЕТ САМЫМ УДИВИТЕЛЬНЫМ УЛУЧШЕНИЕМ ЕЩЕ ДЛЯ UBITX!

    Если вам нужны дополнительные доказательства, посмотрите недавно подготовленное Яном видео на YouTube о работе экрана Nextion.Его освобождение неминуемо.

    Немедленно сделайте заказ на дисплей Nextion, так как они, вероятно, будут распроданы, когда владельцы 6000 µBITx решат, что им действительно НУЖЕН дисплей Nextion. [Обратите внимание, что ubitx.net не имеет отношения к ITEAD - создателям Nextion!]


    Почему Nextion?

    Есть несколько очень веских причин, по которым дисплей Nextion - лучший выбор:

    • Экраны Nextion позволяют разработчикам быстрее предоставлять удобный интерфейс для своих продуктов: отдельный процессор управляет графикой на экране, а эмулятор Windows WSYWIG можно бесплатно разработать для создания пользовательского интерфейса для дисплея Nextion.Процессор в Nextion имеет собственный язык управления и кодировку, аналогичную C ++
    • .
    • Пользователи могут легко изменить внешний вид своего дисплея, подключившись к стандартизированному протоколу между процессором экрана и основным процессором, которые подключены через стандартный последовательный порт.
    • Экраны бывают разных размеров от 2,4 ″ до 7 ″. Изменение размера изображений и кнопок - это все, что требуется, чтобы прошивка работала на экране другого размера. Кодирования не требуется. Требуемое программное обеспечение - это просто программное обеспечение Nextion для Windows и графическая программа (подойдет MS Paint).
    • Экраны бывают двух видов: БАЗОВАЯ модель и РАСШИРЕННАЯ модель. Модель ENHANCED имеет линии GPIO, управляемые процессором дисплея и часами реального времени (RTC).

    Дисплеи Nextion не зря стоят дороже, чем другие дисплеи. Независимый процессор снимает с главного процессора большую часть нагрузки, связанной с манипуляциями с экраном, и гораздо быстрее и проще разрабатывать пользовательский интерфейс и настраивать его для экранов разного размера, а также добавлять / убирать функции.Дисплеи Nextion также оснащены устройством чтения карт памяти microSD. Они работают от +5 В постоянного тока и имеют последовательный порт. Обратите внимание, что усовершенствованная модель содержит держатель батареи для RTC, но не включает саму батарею (CR1220). Это не требуется, пока вы не захотите использовать RTC.

    Насколько легко будет использовать Nextion Display?

    Будет ОЧЕНЬ ЛЕГКО добавить дисплей Nextion к вашему µBITx. Смотреть видео!

    Никаких модификаций аппаратного обеспечения вашего µBITx не требуется, но вам, конечно, потребуется достаточно места на передней панели для установки выбранного цветного сенсорного дисплея.Если вы хотите установить дисплей Nextion с диагональю 7 дюймов, вам может понадобиться корпус побольше!

    Вам также необходимо загрузить два новых файла:

    1. обновленная версия прошивки KD8CEC, которая включает протокол взаимодействия с Nextion для установки в вашем Raduino.
    2. файл образа (прошивка) для вставки в дисплейный блок Nextion.

    Скачанная прошивка для Nextion должна соответствовать размеру вашего экрана. Существует два варианта для каждого размера экрана: ОСНОВНАЯ или УЛУЧШЕННАЯ версия блока дисплея Nextion (см. Обсуждение того, какую версию купить ниже).

    Эту прошивку необходимо сохранить на карту microSD (требуется карта 2 ГБ или больше). Вставьте карту в дисплей Nextion, и при включении дисплея Nextion автоматически загрузит прошивку с карты microSD во флэш-память Nextion. Когда загрузка будет завершена, извлеките карту microSD.

    Четыре провода соединяют дисплей Nextion с Raduino. Две линии предназначены для питания, а две другие - это последовательные RX и TX, которые подключаются к стандартным портам ввода-вывода на µBITx, которые использовались для стандартного дисплея 16 × 2.

    Перезагрузите µBITx, и дисплей Nextion должен заработать!

    На что обращать внимание при покупке дисплея Nextion

    Существует две версии Nextion Display - одна, разработанная для китайского рынка, и версия на английском языке, которая поддерживает среду разработки Nextion Windows. Убедитесь, что у вас нет более дешевой, но несовместимой китайской версии. Обратите внимание на «английскую версию» в рекламном ролике. Это не проблема, если вы покупаете у разработчика (ITEAD).

    Я понимаю, что будет доступен загружаемый шестнадцатеричный файл, который работает так же, как английская версия, для тех из нас, кто по ошибке приобрел не ту модель! Спасибо Яну, который сделал это вслепую (к тому же не умеющий читать по-китайски)!

    Любой размер будет работать с прошивкой CEC на стороне Raduino. Однако прошивка Nextion зависит от ОСНОВНОЙ или РАСШИРЕННОЙ версии экрана и от разрешения экрана. Тем не менее, любую версию можно изменить для работы с любым другим размером экрана, потребовав лишь небольшой работы со стороны пользователя.Вы также можете полностью настроить свой экран в соответствии со своими требованиями. Измените цвета или измените весь внешний вид. Для этого не требуется кодирования, просто вырежьте и вставьте код из поставляемой версии CEC для каждого инструмента.

    Купите УЛУЧШЕННУЮ модель Nextion (за несколько долларов), если вы думаете, что будете использовать функции GPIO или RTC в будущем. RTC может быть полезен для цифровых режимов, требующих точной синхронизации, или для спутниковой работы и т. Д. Дополнительные линии GPIO могут решить одну из проблем Raduino: отсутствие запасных цифровых портов для поддержки настраиваемых надстроек.Например, если вы хотите добавить 160 м и включить дополнительный ФНЧ, или если вас беспокоят потенциальные шпоры, вы сможете задействовать полосовые фильтры для высоких частот. В этих случаях вы можете потратить немного больше, чтобы получить РАСШИРЕННУЮ версию.

    Если вы не хотите ждать, пока будет выпущена прошивка для вашего размера экрана, приобретите БАЗОВЫЙ или УЛУЧШЕННЫЙ дисплей Nextion 2,4 дюйма или 2,8 дюйма. Эти два экрана имеют одинаковое разрешение, и версия прошивки Nextion по умолчанию от Яна KD8CEC будет работать на экранах обоих размеров без изменений.

    Если у вас уже есть экран другого размера или вы хотите купить экран большего размера, не паникуйте с самого начала. Возможно, вам придется внести некоторые коррективы в прошивку самостоятельно. Это несложно, но требует изменения размера графики и перемещения объектов в соответствии с большей площадью экрана / разрешением. Некоторые из нас работают над модификациями прошивки Nextion для поддержки экранов 3,2 ″ и 3,5 ″. Прошивки для этих экранов, скорее всего, появятся в ближайшее время.

    Размеры экрана и разрешение для моделей BASIC, доступных на веб-сайте ITEAD, следующие:

    УЛУЧШЕННЫЕ версии, доступные в ITEAD, следующие:

    Большинство из нас предпочтут покупать дисплеи Nextion на Aliexpress или eBay.

    Доступны все размеры и версии BASIC или ENHANCED. Неясно, какие версии OEM, а какие - клоны. Наверное, это не имеет значения.

    Ищите поставщиков с высоким рейтингом и поставщиков с более высокими объемами поставок. Самый большой риск заключается в том, что ваш экран будет треснутым или просто так и не появится. Вам понадобится некоторая форма возмещения ущерба, когда товары прибывают в поврежденном состоянии или просто никогда не прибывают, и здесь могут помочь посредники в eBAY, Aliexpress или Paypal.

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

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