#3. Кнопка Dual-state - Nextion. Включаем выключаем подсветку.

Сегодня в уроке, про дисплей Nextion, рассмотрим такой элемент управления, как кнопка Dual-state. С помощью данной кнопки научимся включать и выключать подсветку, а также менять цвет по умолчанию. Рассмотрим, как работает код для управления элементами на дисплее Nextion, а также научимся отправлять команды на Arduino для управления подсветкой.

Сегодня в уроке Nextion рассмотрим.

Добавляем Dual-state button на дисплей.

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

откроем в Nextion Editor заготовку из второго урока

Добавим элемент «Dual-state button».

Добавим элемент «Dual-state button».

На рабочем поле появиться элемент «bt0».

На рабочем поле появиться элемент «bt0»

Чтобы использовать изображения для отображения кнопок, нужно в свойстве кнопки, в поле «sta», выбрать параметр «image».

 свойстве кнопки, в поле «sta», выбрать параметр «image»

Появиться 2 дополнительных поля: «pic», «pic2»:
  • «pic» - изображение первоначального состояние кнопки.
  • «pic2» - изображение состояния кнопки после первого нажатия.

Появиться 2 дополнительных поля: «pic», «pic2

Нажмем на «browse…», откроется менеджер картинок. Из списка загруженных картинок мы можем выбрать нужную.

Нажмем на «browse…», откроется менеджер картинок.

Добавим второе изображения для поля «pic2».

Добавим второе изображения для поля «pic2».

В поле «pic» видим значение 13, в поле «pic2» 14. Это id картинок. У вас будут другие значения.

Как загрузить изображения в проект

Как загрузить изображения в проект, мы рассматривали в предыдущем уроке. Также можно загрузить сразу же несколько изображений. Например, 12 изображений переключения цвета по умолчанию.

Например, 12 изображений переключения цвета по умолчанию.

На кнопке видим надпись «newtxt».

На кнопке видим надпись «newtxt».

Чтобы удалить надпись, в свойствах кнопки, в поле «txt», удаляем надпись «newtxt» и нажимаем кнопку «Enter» на клавиатуре.

удаляем надпись «newtxt» и нажимаем кнопку «Enter» на клавиатуре.

Аналогичным способом добавляем 6 кнопок управления цветом по умолчанию.

Аналогичным способом добавляем 6 кнопок управления цветом по умолчанию.

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

При нажатии на любую кнопку она остается в активном положении.

Код для дисплея Nextion, позволяющей отслеживать активную кнопку.

Рассмотрим подробнее свойства кнопки, а именно свойство «val», данное значение как раз отвечает за состояние кнопок. Если нажмёт на кнопку, значение «val» будет равно 1. При повторном нажатии, значение измениться на 0. И так далее.

Рассмотрим подробнее свойства кнопки, а именно свойство «val»

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

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

Но это не решает нашу задачу. Для каждого элемента на дисплее есть обработчик события нажатия кнопки «Tach Press Event». Добавляем в данное поле код, в котором прописываем, что кнопка 1 активна при нажатии на неё, а остальные деактивируем.

обработки нажатия «Tach Press Event»

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

 По аналогии добавим код к другим кнопкам.

Сейчас можно проверить работоспособность. Нажмем на кнопку «Debug».

Сейчас можно проверить работоспособность. Нажмем на кнопку «Debug».

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

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

Код передачи информации с дисплея на Arduino.

Отправим с дисплея Nextion команду на Arduino, о нажатии той или иной кнопки. Для передачи информации по UART используются команды:

  • Print – предаём параметры.
  • Printh – предаём параметры и переводим каретку на новую строку.

Отправим с дисплея Nextion команду на Arduino

Для включения и выключения подсветки отправляем значение «power», и чтобы на стороне Arduino определить конец команды, отправим символы «0d 0a».

Аналогично добавляем команды для переключения цветов.

Аналогично добавляем команды для переключения цветов. Но нужно помнить, что каждая команда должны быть уникальной.

Добавляем библиотеки для работы с дисплеем Nextion и ws2812.

В первом уроке рассказывал, как установить Arduino IDE, для данного урока нам необходимо установить дополнительные библиотеки. К статье прикреплю необходимые библиотеки. Скачать их можно в разделе «файлы для скачивания». После того как вы загрузите библиотеки, нужно скопировать в папку «Документы\Arduino\libraries».

установить дополнительные библиотеки

В папке с библиотеками должны появиться соответствующие папки. После чего нужно перезагрузить программу Arduino IDE. Если она у вас была открыта.

В папке с библиотеками должны появиться соответствующие папки.

В коде нужно подключить библиотеки. Подключим библиотеку для эмуляции Serial порта «SoftwareSerial». Отвечу на вопрос, который у вас возникнет: «можно ли использовать аппаратный Serial порта?» Да, можно, но вы не сможете вывести отладочную информацию. А также, при подключении к компьютеру, у вам будут помехи передачи данных Serial порта. Для плат, у которых несколько аппаратных UART например ESP32, STM32 можно без проблем использовать аппаратный UART.

Подключим библиотеку для эмуляции Serial порта «SoftwareSerial»

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

Также нужно подключить библиотеку «WS2812FX.h»

Затем в блоке setup() открываем последовательный порт и подключаем светодиодную ленту.Тут используются переменные, которые нужно определить в начале кода.

Затем в блоке setup() открываем последовательный порт

Также 2 переменные нам нужны для работы с полученными данными с дисплея.

Затем в блоке setup() открываем последовательный порт Также 2 переменные нам нужны для работы с полученными данными с дисплея.

Получаем данные с дисплея Nextion, управляем светодиодами ws2812.

В основном цикле loop(). У нас всего 2 строки. Первая строка инициализирует работу с светодиодами. Вторая функция обрабатывает полученные данные с дисплея. Функция ReadSerial() находиться на второй вкладке. Это не отдельный скетч. Просто код разделен на несколько страниц для удобства редактирования.

В основном цикле loop(). У нас всего 2 строки.

В функции ReadSerial() мы получаем данные с дисплея, пока не получим символы конца строки.

В функции ReadSerial() мы получаем данные с дисплея

После чего вызываем функция обработки команд.

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

Тут проверяем, какую команду получили. Если «power», то мы включаем светодиодную ленту. И меняем значение переменой «flag». Это необходимо делать чтобы знать, включена или нет у нас светодиодная лента на данный момент. Чтобы при следующем нажатии на кнопку выключить светодиоды.

Аналогичным способом обрабатываем команды переключения цвета по умолчанию.

Как подобрать цвет и что за непонятные символы 0x0000FF? Что они значат? Все очень просто согласно цветовой схеме «RGB»:

  • 0xFF0000 Первый 2 символа это красный цвет.
  • 0x00FF00 следующие 2 символа это зеленый цвет.
  • 0x0000FF последние 2 символа это синий цвет.

Что за непонятные значений «FF» - это значение в шестнадцатеричной системе счисления. И FF равняется максимальному значению 255 в десятеричной системе счисления.

И FF равняется максимальному значению 255 в десятеричной системе счисления.

Например, 99 ровняется 153. Данные значения можно перевести с помощью инженерного калькулятора или онлайн сервисов.

Например, 99 ровняется 153. Данные значения можно перевести с помощью инженерного калькулятора или онлайн сервисов.

Комбинируя цвета, мы получаем различные цвета и оттенки. Если вам интересна данная тема и вы хотели бы узнать подробнее, пишите об этом в комментариях.

Выбор microSD карты для загрузки прошивку на дисплей Nextion.

В документации к дисплею Nextion указаны требования к карте памяти: 10 класса и не больше 16 Gb.

На фото ниже 3 карты microSD различного объема и различных производителей. Из них работают 2. Внимание, вопрос! Какая карта памяти не работает?

На фото ниже 3 карты microSD

И тут ломается вся логика. Одного объема? НЕ! Одного производителя? НЕТ!

Как это работает не понятно. У меня Китайская карта памяти, купленная года 4 назад за копейки, работает нормально. Но 8 Gb купленная у нас в сетевом магазине цифровой техники не работает. А на 16 того же производителя работает нормально.

Поэтому какая карта заработает у вас, точно сказать не смогу. Но у меня есть предположение что нужно брать 10 класса на 16 Гб. Больше шансов что заработает.

Загрузка прошивки в Nextion с помощью microSD.

Кату памяти нужно отформатировать в формате Fat32. Проверить чтобы на ней не было никаких файлов. У меня при работе в операционной системе Linux постоянно создаётся скрытый файл. Его нужно также удалить.

Для того, чтобы скомпилировать файл для прошивки дисплея в Nextion Editor, переходим в меню «File -> TFT file output»

скомпилировать файл для прошивки дисплея в Nextion Editor

В открывшемся окне выбираем место сохранения и нажимаем на кнопку «Output».

нажимаем на кнопку «Output».

Копируем файл «Lesson3.tft» на карту памяти.

Копируем файл «Lesson3.tft» на карту памяти.

Отключаем питание дисплея. Ставим карту памяти подаем питание.

Ставим карту памяти подаем питание.

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

Увидим надпись с отчетом времени.

После загрузки на дисплее будет надпись «Check Data… 100%».

После загрузки на дисплее будет надпись «Check Data… 100%»

Отключаем питание и достаём карту памяти.

Отключаем питание и достаём карту памяти.

После чего можно подать питание, и мы увидим созданный интерфейс на дисплее Nextion.

После чего можно подать питание, и мы увидим созданный интерфейс на дисплее Nextion.

Подключаем Arduino к дисплею Nextion. Проверяем результат.

Сейчас можно подключить светодиодную ленту ws2812, дисплей к Arduino. Предварительно загрузив код в Arduino.

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

Схема подключения ws2812, Arduino NANO, Nextion.

Схема подключения ws2812, Arduino NANO, Nextion.

Схема подключения ws2812, Arduino UNO, Nextion.

Схема подключения ws2812, Arduino UNO, Nextion.

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

Мы можем с помощью дисплея включать и выключать подсветку. А также изменять цвет, и для этого не нужно кучу тактовых кнопок. И подключение всех компонентов достаточно простое.

Мы можем с помощью дисплея включать и выключать подсветку.

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

Прошивка доступна только для подписчиков на сайте boosty и составляет символическую сумму. За данную подписку вы получите доступ к исходным материалам уроков.

Понравился Урок Кнопка Dual-state - Nextion. Включаем выключаем подсветку, меняем цвет? Не забудь поделиться с друзьями в соц. сетях.

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

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

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

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

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

Бибиотеки Бибиотеки.zip962 Kb 6 Скачать
.hex файлы прошивки .hex файлы прошивки.zip40 Kb 8 Скачать
Lesson3.tft Lesson3.tft.zip85 Kb 5 Скачать

Комментарии

Ваше Имя*