Nextion editor mac os

Подключение Nextion дисплеев и прошивка через Editor

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

Всё это становится возможным благодаря мощному 32-х разрядному процессору и визуальной среде разработки Nextion Editor. С внешним миром дисплей взаимодействует с помощью резистивного сенсора касаний с собственным контроллером и интерфейса UART. Панель подключается всего по четырём проводам (два из которых — питание). Для обновления прошивки дисплея, помимо UART, предусмотрен разъем для microSD карты.

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

Видеообзор

Комплектация

Каждый дисплей Nextion дополнен комплектующими, которые помогут соединиться с экраном:

Демонстрационный режим

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

Штатный режим

Состоит из этапов:

— установка среды Nextion Editor (однократно);

— создание проекта для дисплейного модуля;

— прошивка дисплейного модуля.

Установка среды Nextion Editor

Для работы с дисплеем необходимо установить и настроить среду разработки «Nextion Editor»

Для этого перейдите на официальный сайт дисплейных модулей «Nextion». Скачайте и установите последнюю версию среды.

Создание нового проекта в Nextion Editor

Для поддержки кириллицы выбирайте кодировку iso-8859-5

Добавление изображений

Это значит всё получилось и можно смело переходить к прошивки дисплея.

Прошивка дисплейных модулей

Компиляция проекта

Перед прошивкой проект необходимо проверить не наличие ошибок — скомпилировать. Для этого нажмите кнопку Compile . В окне «вывода результатов компиляции» вы должны увидеть сообщение об успешной компиляции. Дисплейные модули Nextion поддерживают два вида прошивки:

Рассмотрим их подробнее.

Прошивка через UART

Для прошивки дисплея через UART понадобиться USB-Serial адаптер.

Прошивка через microSD

Прошивка через UART занимает достаточно долгое время и требует дополнительного UART-преобразователя. В связи с этим существует альтернативный способ прошивки дисплеев Nextion с помощью microSD карты.

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

Примеры работы

Для старта воспользуйтесь нашим проектом: Игра «Убей крота» на дисплее Nextion.

Источник

Запускаем Nextion Editor 0.34 под Wine

Не так давно был выпущен в свет потрясающий продукт от компании ITEAD — экран Nextion HMI. Многие знают про то как можно подключить экран к микроконтроллеру, например, к тому же arduino и выводить графическую информацию. Если немного постараться, можно добавить резистивную сенсорную панель и получится настоящее сенсорное устройствво. Проблемой является лишь малое быстродействое микроконтроллера и небольшой объем оперативной памяти. Библиотек arduino для подобных решений великое множество, некоторые не совсем совместимы между собой, а некоторые и вовсе заточены под специфический контроллер. Это серьезно усложняет разработку и в некоторых случаях делает невозможным масштабирование. Похоже, в один прекрасный момент парни из ITEAD сказали «Хватит это терпеть» и запустили компанию по сбору средств на новое поколение экранов для встраиваемых устройств. Проект назвали Nextion. Этот экран представляет собой устройство для вывода изображения и взаимодействия с графическим интерфейсом, но сами картинки и все паттерны зашиваются непосредственно на устройство в виде прошивки. С микроконтроллером такой экран общается уже по UART и своершенно не нагружает его, что позволяет выделить ресурсы под задачи опроса датчиков, контроль параметров в реальном времени, собственно, чем микроконтроллер и должен заниматься.
Для программирования, а лучше сказать разработки прошивки, доступна среда Nextion Editor и только под Windows. Это многих печалит, так как еще на этапе сбора средств разработчики обещали выпустить кросплатформенные редактор или версии для Mac и Linux к концу 2015 года. Видимо, что-то пошло не так, раз до сих пор Linux сообщество так и не увидело столь желаемого инструмента, а разработчики кормят завтраками. Как выяснилось, запустить редактор под линуксом вполне можно и автор с огромным удовольствием расскажет как

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

Вам понадобится свежий установленный Wine. Ubuntu пользователи могут воспользоваться свежей версией из PPA репозитория Wine-staging

Затем необходимо поставить пакет совместимости

У меня так и не получилось правильно собрать префикс для запуска через winetricks, но получилось сделать это через PlayonLinux.
Следовательно, ставим его и запускаем.

Жмякаем на кнопку «Установка».

Выбираем «Установить программу, отсутствующую в списке» и жмем «Далее»

Выбитаем «Установить программу на новый виртуальный диск» и нажимаем «Далее»

Выбираем произвольное имя, например, «Nextion» и жмем «Далее»

Выбираем «Установить дополнительные библиотеки» и жмем «Далее»

Обязательно выбираем «32 bit windows installation» и жмем «Далее»

Какое-то время будут отрабатывать скрипты создания префикса и потом откроется окно выбора необходимых компонентов. Нам нужно отметить dotnet45 и нажать «Далее» и после завершения установки отказаться от установки приложения, закрыв окно.

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

Отмечаем галочкой «показать виртуальные диски» и выбираем свой (у меня Nextion).

В этот раз выбираем «Настроить Wine» и «Установить дополнительные библиотеки», жмем «Далее»

Обязательно выбираем «Windows XP», жмякаем «OK» и идем дальше.

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

Все, перфикс собран, его можно найти по адресу

Можно использовать прямо отсюда, а можно скопировать в папку с вашими префиксами.

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

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

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

P.S. Если вам особенно лень и вы любитель быстрых решений, то можете воспользоваться уже заготовленным префиксом либо скриптом и ZIP архивом с распакованным установщиком. Надеюсь что скоро ZIP пакет появится на сайте и можно будет добавить полноценное TurnKey решение на основе PlayOnLinux.

UPD. Разработчики дали ответи готовы публиковать zip архивы c дистрибутивом, начиная с версии 0.35. Даю слово, что как только выйдет новая версия с редактором в zip архиве — я допилю автоматический скрипт под PlayOnLinux и оформлю это в новой статье с новыми инструкциями.

Источник

Nextion editor mac os

NEXTION EDITOR VER 1.63.3 sanjiao

Made for HMI
GUI development

Nextion Editor is a free human machine interface (HMI) GUI development software for Nextion Basic Series, Enhanced Series and Intelligent Series. The latest Nextion Editor ver 1.63.3 is available now to download. Legacy device users please see FAQs here before Upgrading

NEXTION EDITOR
VER 1.63.3

NEXTION EDITOR
LTS

WHAT’S NEW IN VER 1.63.3

CREATIVE NEW COMPONENTS

To reduce the HMI development workloads is the goal of Nextion. With the latest 1.63.3 Nextion Editor software, It is more convenient for you to achieve animation, Drop-down menu and text touch slide functions. Further more, your HMI project is able to play videos and audio.

New Components since Ver 0.58：

BREAKTHROUGH GUI DESIGN

Innovation is the driving force of Nextion. With the transparency degree attribute setting for contrast visual effect of opaqueness and translucency, the GUI content can be highlighted and focused for user experience and interation enhancement.

ico Component Transparency Attribute：aph*

ico Transparent info PNG Resource*

DYNAMIC GUI INTERACTION

In the latest Nextion Editor ver 1.63.3, components are allowed to be moved or dragged at runtime which would be more flexible for you to design the HMI GUI. With the loading effect of Components and Pages, a friendly dynamic and superb GUI can be created in the most efficient way.

ico Page and Component Loading Effect*

ico Component Move/Drag*

ico Assignable X/Y Coodinate Attribute at runtime*

Welcome to the charging pile

Please select charging mode

Auto Charge Fixed Time

Fixed Power Fixed Cost

NEXTION EDITOR VER 1.63.3 UPDATE LIST

1. 1. Add Chinese (Pinyin) Input Keyboard

Nextion Editor ver 1.63.2 Update
1. Fix TouchCap bug.

Nextion Editor ver 1.63.1 Update
1. 1.62.x Bug Fix: second source flash bug Intelligent Series devices *
2. Update the flash info of Discovery series device list from 8M to 16M

— All marked * items are only available for Intelligent Series HMI displays.

— If your HMI project was developed via 0.53 or prior version Nextion Editor, we recommend you to use the LTS version for project maintenance as the latest 1.63.3 version is not fully compatible with your existing source code and GUI design.

— If you are using Nextion Editor v.1.63.x, we recommend you upgrade to version 1.63.3 or later.

— Legacy device users please see FAQs here before Upgrading.

NEXTION EDITOR LTS

The Nextion Editor LTS (Long-term Support) based on ver 0.53 is released for existing projects developed by 0.53 or prior version.

If your HMI project was developed via 0.53 or prior version Nextion Editor, we recommend you to use the LTS version for project maintenance as the 0.58 version (or later) is not fully compatible with your exsisting source code and GUI design. Legacy device users please see FAQs here before Upgrading

Itead created Libraries:

Iteadlib Arduino Nextion Library

Itead Segnix Nextion Library for Raspberry Pi

There are other libraries, and partial code segments for sure

Please direct questions to the appropriate authors.

3D PRINTING BEZEL FILES

Historical: unmaintained early design from 2016-FEB
Contributed to the Nextion Community

Nextion Bezel 3D Design in .STL format:

Download ico 2.4” Display Bezel STL Files .zip

Download ico 2.8” Display Bezel STL Files .zip

Download ico 3.2” Display Bezel STL Files .zip

Download ico 3.5” Display Bezel STL Files .zip

Download ico 4.3” Display Bezel STL Files .zip

Download ico 5.0” Display Bezel STL Files .zip

Download ico 7.0” Display Bezel STL Files .zip

Источник

FLProg + Nextion HMI. Урок 1

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

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

NX3224T024_011R	NX3224T028_011R
Размер	2.4″	2.4″
Разрешение	320*240	320*240
Touch Panel	RTP	RTP
Количество цветов	65536	65536
Flash(MB)	4	4
RAM(Byte)	2048	2048
Описание	wiki.iteadstudio.com/NX3224T024	wiki.iteadstudio.com/NX3224T028
NX4024T032_011R	NX4827T043_011R
Размер	3.2″	4.3″
Разрешение	400*240	480*272
Touch Panel	RTP	RTP
Количество цветов	65536	65536
Flash(MB)	4	16
RAM(Byte)	2048	2048
Описание	wiki.iteadstudio.com/NX4024T032	wiki.iteadstudio.com/NX4827T043
NX8048T050_011R	NX8048T070_011R
Размер	5.0″	7.0″
Разрешение	800*480	800*480
Touch Panel	RTP	RTP
Количество цветов	65536	65536
Flash(MB)	16	16
RAM(Byte)	2048	2048
Описание	wiki.iteadstudio.com/NX8048T050	wiki.iteadstudio.com/NX8048T070

Скачать программу 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” соответственно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-Картинка

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

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

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

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

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

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

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

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

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

— Слайлер

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

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

• “objname”
• “vscope”
• “sta”
• “bco0” – цвет переключателя в положении 0. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
• “bco1” – цвет переключателя в положении 1. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
• “pic0” – индекс картинки переключателя в положении 0. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
• “pic1” – индекс картинки переключателя в положении 1. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
• “picс0” – индекс вырезанной картинки переключателя в положении 0. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
• “picс1” – индекс вырезанной переключателя в положении 1. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
• “val” – положение переключателя. Возможные значения 0 и 1
• “x” и “y” – координаты вставки кнопки
• “w” и “h” – ширина и высота кнопки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример: По нажатию кнопки значение аргумента “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” добавляется единица и записывается в этот же аргумент.

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

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

Если значения атрибута “txt” кнопки “t0” равно «1» то записываем в этот атрибут значение «2» иначе: ( eсли значения атрибута “txt” кнопки “t0” равно «2» записываем в этот атрибут значение «3» иначе записываем в этот атрибут значение «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.

  Источник