Урок 5. Передаем информацию с Arduino на дисплей Nextion.

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

Что понадобиться для урока:

Сегодня в уроке Nextion:

Добавляем дополнительные шрифты.

Один шрифт мы уже добавляли в предыдущем уроке. Сегодня добавим еще 2. Для этого переходим «Tools -> Font Generator».

Один шрифт мы уже добавляли в предыдущем уроке.

В открывшемся окне указываем размер шрифта «40». В поле «Font» выбираем шрифт. Также поставим галочку полужирный шрифт «Bold». И наконец указываем название, я использую название по размеру шрифта. Вы можете указать свое название.

В открывшемся окне указываем размер шрифта «40». В поле «Font» выбираем шрифт.

Затем сохраняем файл шрифта, в качестве имени также указываем размер шрифта.

Затем сохраняем файл шрифта

После чего увидим, что шрифт успешно сгенерирован. Нажимаем на кнопку «Ok».

После чего увидим, что шрифт успешно сгенерирован. Нажимаем на кнопку «Ok».

В следующем окне у вас спросит, нужно ли добавить шрифт в проект, нажимаем на кнопку «Yes».

После чего увидим, что шрифт успешно сгенерирован. Нажимаем на кнопку «Ok».

Посмотреть доступные шрифты можно в левом нижнем углу программы, во вкладке «Fonts».

Посмотреть доступные шрифты можно в левом нижнем углу программы, во вкладке «Fonts»

Как видим, я добавил еще шрифт 18. Обратите внимание на поле «id», по данному индикатору будем использовать добавленные шрифты в проект.

Элемент «Text», добавляем в проект и настраиваем атрибуты.

Для вывода названия светового эффекта, добавим текстовое поле.

Для вывода названия светового эффекта, добавим текстовое поле.

В левом верхнем углу появиться элемент «t1».

В левом верхнем углу появиться элемент «t1».

Разместим его в нужном месте на экране.

Разместим его в нужном месте на экране.

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

 А перед этим, зайдем на странице библиотеки WS2812FX

В свойстве текстового поля указываем максимальный размер поля «txt_maxl» в 30 символов. И добавляем максимально длинное название эффекта «Color Wipe Reverse Inverse». Данный эффект имеет порядковый номер 6. Который мы установили по умолчанию в предыдущем уроке.

В свойстве текстового поля указываем максимальный размер поля «txt_maxl» в 30 символов

Как видим, данное название умещается и остаётся место. Поэтому мы можем увеличить размер шрифта.

Как видим, данное название умещается

В поле «font» указываем значение «2», это индикатор ранее созданного шрифта 18 размера. Не забываем посмотреть, чтобы текст располагался по центру.

В поле «font» указываем значение «2»,

Смотрим что у нас получилось. Как видим, текст располагается максимально красиво.

Смотрим что у нас получилось.

Элемент «Number», настраиваем свойства вывода цифровой информации.

Для вывода цифровых значений существует отдельный элемент «Number». Добавим его в наш проект.

Для вывода цифровых значений существует отдельный элемент «Number»

В левом верхнем углу увидим элемент «n0».

В левом верхнем углу увидим элемент «n0».

Разместим данное поле на экране в нужном месте.

Разместим данное поле на экране в нужном месте.

Сделаем фон в виде картинки, для этого в атрибутах (свойство) элемента выбираем в поле «sta» значение «image». Кликаем по полю «pic» и добавляем картинку.

Кликаем по полю «pic» и добавляем картинку.

Затем нам нужно поменять цвет шрифта на белый. Для этого кликаем по полю «pco». Выбираем белый цвет. Для выбора цвета нажмите на надпись «select…».

Для этого кликаем по полю «pco».

Размер шрифта нужно установить 40. Для этого в поле «font» выбираем 1. И напишем максимальное значение «100», которое будет выводиться в данном поле.

Размер шрифта нужно установить 40.

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

Проверяем результат.

Передаем с Arduino на дисплей Nextion цифровую информацию.

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

  • SendInt() – функция, оправляющая на дисплей Nextion (номер экрана, название переменной) + данные.Передаем с Arduino на дисплей Nextion цифровую информацию.
  • comandEnd() - функция отправки конца команды. Команда, поступающая в дисплей, должна заканчиваться символами «0xFF0xFF0xFF».

comandEnd() - функция отправки конца команды.

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

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

Отправим текущее значение яркости, при нажатии кнопки увеличения яркости.

Отправим текущее значение яркости, при нажатии кнопки увеличения яркости.

Отправляем следующие параметры на дисплей:

  • Led – название экрана.
  • n0 – название поля.
  • Val – свойство поля.
  • Yarkast – значение.

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

Передаем с Arduino на дисплей название световых эффектов.

Для передачи текстовой информации на дисплей, нам нужно добавить еще одну функцию SendData().

 функцию SendData().

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

И для передачи текстовой информации потребуется написать всего 1 строчку кода.

На экран предаём:

  • Led – название экрана.
  • t1 – название поля.
  • txt – свойство поля.
  • String(strip.getModeName(strip.getMode())) – Строка. В предыдущем уроке мы рассмотрели, что это за конструкция и вывели данные значения в монитор порта.
  • "\"" – кавычки, их необходимо экранировать, для этого используется символ «\».

На экран предаём

Способ передачи несложный, но есть свои нюансы, которые нужно учитывать и быть внимательным.

Проверяем работоспособность передачи информации с Arduino на дисплей Nextion.

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

Проверяем работоспособность передачи информации с Arduino на дисплей Nextion.

Проект становиться более информативный. Так как мы знаем какой световой эффект выводиться на экран.

Проект становиться более информативный.

И сейчас понятно, что яркость у нас минимальная и нажимать на уменьшения не стоит. Данный вариант уже применим в ваших проектах.

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

вариант отображения изменения яркости с помощью прогресс бара.

В следующем уроке начнем работать со следующим экраном, сделаем клавиатуру и научимся проверять пароль, введённый с клавиатуры на дисплее.

Внимание! Подписчики на сайте boosty могут скачать исходные файлы в формате .HMI, код для Arduino.

Понравился Урок Передаем информацию с Arduino на дисплей Nextion? Не забудь поделиться с друзьями в соц. сетях.

А также подписаться на наш канал на YouTube, вступить в группу Вконтакте, в группу на Facebook.

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

Технологии начинаются с простого!

Фотографии к статье

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

.hex файлы прошивки .hex файлы прошивки.zip46 Kb 903 Скачать
Lesson5.tft Lesson5.tft.zip106 Kb 956 Скачать

Комментарии

Ваше Имя*



Cлучайные товары

Конечные выключателиКонечные выключатели


AliExpress
AliExpress

5 В. 1, 2, 4, 8 канальный релейный модуль5 В. 1, 2, 4, 8 канальный релейный модуль


AliExpress
AliExpress

Читайте также

Мы в соц сетях

Подпишись на канал Telegram
Разработка проектов