Привет Друзья. Продолжаем изучать возможности дисплея Nextion HMI и среды разработки для него Nextion Editor. Сегодня я предлагаю создать небольшой проект в Nextion Editor и загрузить его в дисплей. Целью статьи, считаю изучение базовых элементов Nextion Editor, используемых в дисплее и применение их на практике в дальнейшем. Другими словами мы не будем организовывать взаимодействие дисплея с внешними устройствами, а попробуем создать самодостаточный проект на базе возможностей самого дисплея.

Для работы нам понадобится собственно сам дисплей, посмотреть обзор на него можно по этой ссылке — Nextion HMI. Среда разработки для дисплея — Nextion Editor . Кстати по ссылке вы можете ознакомится с интерфейсом Nextion Editor, его основными возможностями и принципами работы.

И так запускаем Nextion Editor и создаем новый проект. Во вкладке «Divece» , выбираем тип дисплея который у нас есть под рукой. В моем случае это NX8048T070_011R. Это 7 — ми дюймовый дисплей с 16 мегабайт Flash и 3584 байт памяти и тактовой частотой в 48 мегагерц.

После того как выбрали тип дисплея, переходим во вкладку » DISPLAY » и выбираем положение рабочей области дисплея. От ее выбора зависит как в дальнейшем будет отображаться информация на дисплее, после загрузки проекта в него. Еще не маловажным фактором, является выбор кодировки. Если в проекте необходимо отображение русских символов, тогда однозначно выбираем iso-8859-5.

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

Первым делом мы с генерируем шрифт и загрузим его в проект. Для этого перейдем в Меню «Tools — Font Generator» и выберем необходимый тип и размер шрифта, после чего укажем имя создаваемого шрифта в окошке «Font Name» , место его хранения и нажмем кнопку «Generate Font»

Теперь нам необходимо загрузить на сгенерированный шрифт в проект. Для этого в окне «Picture» выбираем вкладку «Fonts» и жмем на » + » Выбираем сгенерированный шрифт в том месте на диске, где мы его сохранили и загружаем в проект.

Основные настройки выполнены и теперь мы можем приступать к созданию нашего проекта. На самом деле работа с Nextion Editor очень похожа на работу с Delphi (язык программирования — пример QSY.BY ). Весь интерфейс строиться на базе кнопок, картинок, текста и их производных. Поэтому если вы работали с визуальными средами программирования, работа Nextion Editor не вызовет у вас особых проблем.

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

Вот такой вот логотип сайта QSY.BY и в виде Progress Bar у меня будут выступать два изображения.

На первом изображении статус загрузки равен «0 %»

Соответственно на второе изображение ассоциируется с «100 %» загрузкой.

Загружаем данные изображения в наш проект. Сделать это можно во кладке «Picture» нажав на «+». Nextion Editor присвоит каждому изображению свой ID согласно порядка очередности добавления изображения в проект.

Далее нам необходимо добавить элементы картинки и progress bar в рабочее поле редактирования. Для этого мы в окне «Toolbox» — выбираем элементы «Picture» и «Progress Bar». Размешаем их в тех местах где нам удобно, согласно задумке проекта.

После того как элементы добавлены. Нам необходимо изменить цвет фона нашего проекта, т.к. изначально он белого цвета, а нам по задумке больше подходит — черный . Для этого мы выбираем «Page0» в окне «Page» и переходим в окно «Attribute» — где нам необходимо изменить параметр «bco» Нажав на него, выбирать черный цвет.

В итоге у нас получится вот такой вот приветственный экран.

Теперь нам необходимо добавить некой интерактивности нашему приветственному экрану. Для этого в окне «Toolbox» — выбираем элементы «Timer», «Variable» , «Text» и добавляем их в проект. Выбираем элемент «Text» и в окне «Attribute»  находим параметр «txt-maxl» и меняем его значение на 100. Этот параметр отвечает за максимальную длину символов в строке нашего элемента «Text». В том же окне «Attribute» меняем значение «txt» —  здесь мы вводим необходимый текст, который будет отображаться в поле элемента «Text».  Вводим следующий текст «Tap Screen to Start». Иными словами данный текст предлагает нажать на экран, чтобы началась загрузка.

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

И так перейдем к настройке элементов «Timer» и «Variable». Выбираем элемент «va0» и в окне «Attribute» находим параметр «val» и меняем его значение на «0», тем самым присваивая переменной val нулевое значение. Далее выбираем элемент «tm0» и в окне «Attribute» находим параметр «tim» и меняем его значение на 50 — что соответствует 50 миллисекундам за такт. Параметру «en» присваиванием значение «0», т.е. отключаем таймер.  В окне «Event» пишем код для изменения прогресса загрузки, элемента «Progress Bar».

Данный код является обычным счетчиком. В первой строке которого мы увеличиваем значение переменной «va0» на «2» за каждый цикл таймера «tm0». Далее во второй строке кода, присваиваем элементу «Progress Bar» — «j0.val» значение переменной «va0.val». Данная строка кода предназначена для изменения положения отрисовки прогресса загрузки. Строки с 3 по 6 описывают алгоритм условия загрузки прогресс бара. При достижении значения переменной «j0.val» — 100, счетчик останавливается и загружает страницу Page1. Теперь остался еще один не маловажный момент. Необходимо в окне «Page», создать новую страницу с именем Page1. Теперь возвращаемся на страницу Page0 и нажимаем в свободную от элементов часть страницы. В окне «Event» выбираем вкладку «Touch Release Event» и пишем код включения таймера, значению «tm0.en» присваиваем «1»

Все приветственная страница с индикатором загрузки и логотипом готова. Теперь после нажатия на экран статус загрузки будет меняться и после того как дойдет до 100%, загрузит основную страницу DashBoard.

Теперь перейдем к разработке основной страницы DashBoard. Страница Page1 уже создана. Добавляем на нее кнопки, картинки и текст. Для этого в окне «Toolbox» — выбираем элементы «Picture», «Button» , «Scrolling text». Меняем цвет фона на черный, как это сделать я писал раньше. Фоном страницы я решил использовать вот это изображение.

Для того чтобы применить изображение в качестве фона, необходимо выбрать элемент «Picture» — «p0» на странице «page1» и в окне «Attribute» — выбрать параметр «pic». В открывшемся окне выбрать изображение в качестве фона.

Теперь расставляем и переименовываем кнопки. Для этого выбираем кнопку и в окне «Attribute» — выбираем параметр «txt». У меня получилось 5 кнопок — «Lamp», «Car Gauge», «Weather», «Animation», «Sleep». У каждой кнопки свое назначение, но по факту четыре переключают страницы , а одна режим. Соответственно необходимо создать четыре страницы для этих кнопок — как это сделать я описывал выше. Далее необходимо сделать ссылки кнопок на страницы. Выбираем кнопу и в окне «Event» выбираем вкладку «Touch Release Event»  и добавляем код

Для следующей кнопки цифру страницы необходимо изменить.

button_page

 

После того как мы переименовали кнопки и создали страницы, остался еще один не задействованный элемент. Как можно догадаться элемент «Scrolling text», предназначен для создания эффекта прокрутки текста. С помощью данного элемента сделаем бегущую строку. Выбираем элемент «g0», в окне «Attribute» — выбираем параметр «txt-maxl» и присваиваем значение «200». Этот параметр отвечает за максимальную длину символов в поле «txt», в само же поле вводим необходимый текст — «More information about this and other projects, you can watch on QSY.BY».

В итоге у нас получилась вот такая мини DashBoard.

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

Переключаемся на страницу Page3. На ней мы будем включать и выключать лампу накаливания. Меняем фон страницы с белого по умолчанию, на черный. Эту процедуру я думаю уже нет смысла описывать т.к. мы делали уже несколько раз.  Добавляем на страницу изображение лампы и кнопки управления. Для этого в окне «Toolbox» — выбираем элементы «Picture», «Button» , «Dual-State Button » и добавляем их в проект.

Теперь расставляем все элементы страницы на свои мест. И начинаем их настройку. В итоге у нас должна получится вот такая страница.

Для этого все элементы страницы необходимо настроить. Начнем с элемента «Button» Выбираем элемент «b0», в окне «Attribute» — выбираем параметр «txt» и присваиваем значение «Back». Эта кнопка нужна для того что бы вернуться на нашу основную странице DashBoard, однако пока она не несет в себе никакого функционала. Для того чтобы при нажатии на кнопку происходил переход на основную страницу DashBoard, необходимо в окне «Event» выбрать вкладку «Touch Release Event»  и добавить код:

Далее приступим к настройке выводимого изображения лампы накаливания. Для этого выберем элемент Picture — «p0». В окне «Attribute» — выбираем параметр «pic» и в появившемся диалоговом окне выбираем изображение лампы накаливания, когда она выключена. В нашем случае это изображение под номером 6. На этом работа с элементом Picture — «p0» закончена.  Переходим к элементу «Dual-State Button». Это наша кнопка, при помощи которой мы будем включать и выключать лампу накаливания. Как понятно из названия элемента, кнопка имеет два состояния и в отличии от элемента «Button» может оставаться зафиксированной в том или ином режиме. Для настройки данного элемента в окне «Attribute» — выбираем параметр «sta» и присваиваем ему значение «image». Далее параметрам «pic0 и pic1» в появившемся диалоговом окне присваиваем изображения выключенной и включенной кнопки соответственно. Параметру «val» присваиваем значение «0». Он отвечает за состояние кнопки и изменяется в зависимости от  того нажата кнопка или нет.  На этом основные настройки элементов страницы закончены. Теперь необходимо прописать алгоритм включения и выключения лампы накаливания. Для этого выбираем элемент «Dual-State Button» — «bt0» и в окне «Event» выбираем вкладку «Touch Release Event»  и добавляем код:

Теперь разберем этот код по пунктам. По сути это простое условие. В первой строке мы узнаем состояние нашей кнопки. И если кнопка нажата, значение параметра «val» кнопки «bt0» равно «1», меняем изображение «p0» с индексом «6» на изображение с индексом «7». По сути меняем выводимое изображение лампы накаливания, с выключенной на включенную. Если же условие не соблюдается, присваиваем изображению «p0», изображение с индексом «6».  На этом все настройки закончены. При нажатии на кнопку лампа накаливания будет включаться и выключаться и сама кнопка будет менять свое состояние. Хочу напомнить что в данной статье мы не будем взаимодействовать с так называемым «внешним миром», основной задачей данной статьи, является более глубокое изучение возможностей Nextion Editor и дисплея от компании Nextion.

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

За основу возьмем вот это изображение приборной панели. Я сразу же отредактировал размеры изображения таким образом, что бы оно занимало всю рабочую область страницы. Этот способ позволяет не изменять цвет фона страницы. Он будет удобен в тех случаях, когда нет возможности отредактировать изображение и убрать фон, а в стандартной цветовой схеме редактора Nextion Editor, нет подходящей цветовой гаммы.  Однако у этого способа есть и свои минусы. Изображение занимает больший объем памяти в дисплее, а она там не безгранична. Поэтому пользоваться данным способом рекомендую только в исключительных случаях.

В окне «Toolbox» — выбираем элементы «Number», «Guage»,»Button»,»Dual-State Button «,»Timer»,»Variable» и добавляем их в проект. Последние два элемента не отображаются на странице проекта и являются таймером и переменной. Об этом я писал выше, когда мы делали приветственный экран. Для начала необходимо изображение приборной панели установить в качестве фона страницы. Для этого необходимо выделить рабочее поле страницы «Page 3» и в окне «Attribute» — выбирать параметр «sta» и присвоить ему значение «image», далее в параметре «pic» в появившемся диалоговом окне выбрать необходимое изображение приборной панели автомобиля. Все изображение приборной панели применилось  в качестве фона.

Теперь необходимо расставить все добавленные элементы на свои места. Начнем с элемента «Number». Как не сложно догадаться этот элемент будет отвечает за численное отображение скорости и оборотов двигателя. Помещаем их на свои места .Элемент «n1» будет отвечать за отображение скорости, «n2» за обороты двигателя соответственно. Никаких особенных настроек с этими элементами производить не надо. Однако при добавлении их на страницу, они имеют белый фон, что не очень вписывается в нашу концепцию красивой приборной панели. Естественно мы можем поменять цвет фона, но стоит учитывать, что не всегда можно подобрать подходящий цвет из палитры Nextion Editor. Поэтому при создании проекта стоит учитывать этот не маловажный фактор, по сути это тоже вопрос как и с фоном страницы. Однако не все так плохо как может показаться. Разработчики Nextion Editor предлагают нам на выбор несколько вариантов. В окне «Attribute» — выбираем параметр «sta» и присваиваем ему значение:

  • «solid color» — позволяет выбрать цвет фона в параметре «bco»
  • «image» — позволяет выбрать в качестве отображения элемента — картинку
  • «crop image» — обрезать изображение.

Конечно параметр «сrop image» никакое изображение не обрезает — это все как говорится сложности перевода. Данный параметр делает фон элемента прозрачным. Для этого в окне «Attribute» — выбираем параметр «sta» и присваиваем ему значение «crop image» и в параметре «picc» выбираем фоновое изображение приборной панели. Проделываем все тоже самое и для второго элемента «Number».

Теперь переходим к элементу «Guage».  «Guage» — с английского — измерительный прибор. Из этого становится понятным что данный элемент мы будем использовать для визуального отображения. В нашем случае отображения скорости, оборотов двигателя, уровня топлива и температуры масла. При настройке элемента «Guage» нас интересуют несколько параметров. Во первых необходимо избавится от белого фона. Для этого в окне «Attribute» — выбираем параметр «sta» и присваиваем ему значение «crop image» и в параметре «picc» выбираем фоновое изображение приборной панели. Все тоже самое как и для элемента «Number». Далее выбираем цвет линии и ее толщину — это можно сделать в параметрах «pco» и «wid» соответственно. Значение положения нашего указателя изменяется в параметре «val». И здесь появляется первый подводный камень. Значение переменной «val» соответствует градусам поворота крайней точки указателя относительно центра. И к сожалению указать значение начала отсчета координат не представляется возможным в данной версии Nextion Editor. Иными словами, при проектировании измерительных приборов в Nextion Editor необходимо учитывать эту особенность и выбирать приборные шкалы с нулевой отметкой в горизонтальной плоскости. Или учитывать этот фактор в алгоритме отображения и вносить коррекцию, но об этом позже. Ну что же с элементом «Guage» вроде бы разобрались.

Остался еще несколько элементов. Кнопка «Back» Настройки объяснять не буду, они идентичны предыдущему примеру. И кнопка «Dual-State Button » при нажатии на которую будет запускаться алгоритм подсчета и отображения скорости и оборотов двигателя. Настройка идентична примеру про кнопку для включения лампы накаливания. Единственное алгоритм будет немного другим.

После того как все элементы настроены и расставлены на свои места должна вырисоваться следующая картина.

Теперь перейдем непосредственно к алгоритму подсчета. Выбираем кнопку «bt0» и в окне «Event», выбираем вкладку «Touch Release Event»  и добавляем код:

При нажатии кнопки будет создаваться цикл. Где va0.val — это переменная счетчика. Она будет увеличиваться на единицу каждый раз пока не достигнет значения 241.  241 — это значение в градусах, соответствующее максимальному значению положению стрелки скорости и оборотов двигателя на приборной панели. va1.val — это переменная коррекции отображения положения. Условие подсчета коррекции положения стрелки индикатора основано на следующем. Если стрелка индикатора находится в нулевом положении относительно изображения приборной панели, ее значение z0.val=330, если же значение z0.val равно «0», стрелка находится в горизонтальной плоскости. Из этого делаем вывод. Если значение переменной счетчика меньше 30 — прибавляем 330, иначе отнимаем 30. Данный алгоритм позволяет корректно отображать положение стрелки от 0 до максимального значения. Однако полученные значения не имеют ничего общего с численными значениями отображаемыми в поле «Number». Для этого производится коррекция относительно шкалы для оптимального соотношения графического отображения и численных значений.

Следующим шагом, закрепим наши знания в работе с элементом Guage. Создадим погодный индикатор.

Вот такое изображение будем использовать в качестве фона. На нем представлены термометр, барометр и шкала компаса. Вдаваться в подробности как настраивать расположение изображения и установку элементов на странице в этот раз не буду т.к. все это было хорошо разъяснено ранее. Единственным отличием от предыдущего примера, будет принцип управления положением элемента «Guage». Управлять положением стрелки индикатора, будем при помощи элемента «Slider». В этом примере не будем вносить коррекцию в положение стрелки индикатора. О том как это сделать, было написано ранее.

Суть настройки положения индикатора сводиться к следующему:

Как видно из приведенного кода. Переменной z элемента «Guage» присваиваем значение положения переменной h элемента «Slider».  Код вставляем в окно Events — Touch Move.

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

Следующим этапом предлагаю перейти к еще одной интересной функции редактора Nextion Editor. Анимация изображения.

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

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

И так для начала займемся раскадровкой. Сознательно не привожу ссылку на какой-либо сервис, ибо их тьма тьмущая. Как говорят в народе — «Google в помощь». После того как получили раскадровку gif,  загружаем изображения в проект.

Важное замечание.

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

Вернемся к нашему проекту. После того как загружены все изображения, находим первое изображение и узнаем его порядковый номер. Добавляем в проект элемент «Picture» и выбираем в качестве отображения изображение с найденным порядковым номером. Далее добавляем элемент «Timer» при помощи него мы будем менять изображения. А также добавляем две переменных из элемента «Variable» — в них мы организуем счетчик. Еще нам понадобиться кнопка. С ее помощью мы будем запускать и останавливать анимацию. Ну и для пущего интереса добавим элемент «Slider» при помощи которого будем изменять скорость воспроизведения анимации. В итоге должна получиться вот такая вот картина:

Теперь перейдем непосредственно к настройке. Первым делом настроим таймер. Выберем элемент «Timer» — tm0. В окне Event — Timer Event добавляем код:

Как видно из кода. Это счетчик который увеличивает значение переменной va0 на единицу и при достижении максимального значения присваивает цифровое значение первого изображения из анимации. Соответственно в строчке p0.pic=va0.val, переменной p0.pic — отвечающей за вывод изображения, присваиваем значение переменной счетчика. Уже в таком формате изображение может быть проанимировано, если переменной tm0.en присвоить значение единицы.

Далее переходим к настройке элемента «Dual-State Button». С помощью данного элемента будем воспроизводить и останавливать анимацию. В окне Event — Touch Release Event добавляем следующий код:

Рассмотрим небольшой кусок кода, отвечающий за работу кнопки. Как видно это простое условие. Если кнопка нажата, включается таймер и начинает проигрываться анимация, а текст кнопки меняется на «STOP». Иначе таймер выключается и текст кнопки меняется на «PLAY».

Теперь перейдем к настройкам слайдера. Его основная функция изменять скорость анимации. Для настройки выберем элемент h0 в окне Event — Touch Move добавляем код:

Как видно из кода. Значению таймера присваивается значение переменной положения слайдера. Регулируя положение слайдера, регулируется и скорость аминирования изображения. На этом работа с этой страницей закончена, осталось добавить кнопку «Back». Как ее добавить и настроить я рассказывал выше.

На основной странице осталась еще одна незадействованная кнопка — «Sleep». Как понятно из названия, функция кнопки переводить экран в спящий режим.  Для того чтобы кнопка выполняла свою функцию необходимо в окне Event — Touch Release Event  добавляем код:

Однако еще необходимо вернуть дисплей из спящего режима. Для этого выбираем незадействованную, свободную от элементов часть экрана и в окне Event — Touch Release Event добавляем код:

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

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

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

Еще раз Спасибо и всех благ. EU4DGC. 73.