Урок 3. Создаем переключатели (кнопки с фиксацией) на дисплее DWIN.

В предыдущем уроке мы познакомились со средой разработки DGUS (DWIN Graphic Utilized Software). Подготовили фоновые изображения и иконки, после чего проверили отображение графики на дисплее. Сегодня научимся создавать кнопки с фиксацией или переключатели на дисплее DWIN. В этом нам помогут два инструмента: «Bit icon», «Incremental Adjustment».

Инструменты для создания переключателя (кнопки с фиксацией) в среде разработки DGUS.

Для реализации кнопки с фиксацией на дисплее Nextion требуется всего один инструмент, о чём я рассказывал в своих уроках про данный модуль. С дисплеями DWIN ситуация немного иная. Для реализации кнопки с фиксацией потребуется 2 инструмента: «Bit icon» и «Incremental Adjustment». Это связано с тем, что инструменты в среде DGUS разлеплены на две группы:

1. Визуальное отображение элемента.

2. Инструменты обработки нажатия на тачскрин.

И немного теории про элементы «Bit icon» и «Incremental Adjustment».

Инструмент Bit icon.

Из названия понятно, что данный инструмент позволяет работать с иконками. В инструкции по работе со средой DGUS есть подробное описание «Bit icon» на английском языке. Скачать инструкцию на английском языке вы можете внизу статьи в разделе «файлы для скачивания».

Применение данного инструмента на практике я уже показывал в проекте «Управление реле с помощью сенсорного дисплея DWIN и Arduino, ESP32». Ниже представлено описание элементов инструмента «Bit icon» на русском языке.

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

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

Наверное, вы подумали, что это ограничение дисплея DWIN, и мы можем использовать всего 16 кнопок с фиксацией в проекте! Это не так, 16 ячеек памяти по адресу 5000. А для другой ячейки памяти, например, для 5001, также можно сделать 16 кнопок и так далее.

И, наконец, нам нужно добавить иконки. Сами иконки загружены в проект в прошлом уроке. Сейчас мы просто выбираем файл с иконками «34.icl». Из него выбираем иконку для первичного состояния (пассивного) и вторую для активного состояния (кнопка нажата). ICON0E и ICON1E можно оставить без изменения, данные параметры нужны для создания эффекта анимации.

Иконки достаточно просто выводятся на дисплей DWIN.

Создавать управления и изменять иконки при нажатии на тачскрин будем с помощью следующего инструмента «Incremental Adjustment».

Инструмент «Incremental Adjustment».

Инструмент «Incremental Adjustment» обрабатывает нажатие на сенсор. Более подробное описание данного инструмента на английском языке вы можете найти в инструкции, которая прикреплена к данной статье. А ниже на картинке приведено описание на русском языке данного инструмента.

Данный элемент накладываем поверх «Bit icon».

Также нам нужно поставить галочку «Data auto-uploading» для того, чтобы при нажатии на сенсор отправлять данные по UART на микроконтроллер. В нашем случае это ESP32 или Arduino.

Адрес элементов будет один и тоже - «5000» такой же, как и у инструмента «Bit icon».

Чтобы нажатия на тачскрин приводило к изменению нужной иконки, необходимо указать номер бита, с которым мы будем работать. Для первой кнопки это 0, для второй 1, для третей 2 и так далее. Для восьмой кнопки это будет 7, что соответствует биту иконки, поверх которой наложен инструмент «Incremental Adjustment».

И самое главное — правильно настроить обработку нажатия на сенсор. Устанавливаем увеличение при нажатии на кнопку на 1. Выставляем минимальное значение 0, максимальное — 1. Также обязательно нужно сделать циклическое изменение, тем самым при нажатии у нас будет менять 1 на 0, а 0 на 1. Что позволит менять иконку и оправлять на микроконтроллер информацию о состоянии кнопки.

Также важный параметр — это «Touch effect», тут нужно выбрать «Disposable» — однократное увеличение значение. Это означает, что при касании тачскрина кнопка изменит своё состояние всего 1 раз.

Описание кода для обработки нажатия на кнопку с фиксацией.

Код я разделил на 2 вкладки. Всё, что касается работы с дисплеем, находится на вкладке «display».

Для чтения получаемых данных по UART сделал функцию ReadSerial(), которую вызываем в основном цикле loop().

В функции ReadSerial(), если были получены данные по UART, сохраняем их в массив Buffer[Buffer_Len]. И поднимаем флаг «flag».

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

Убедимся, что получили правильный байт пакета данных. Затем переходим к проверке адреса данных.

Если первое значение адреса — 50, то в цикле проверяем полученные данные.

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

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

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

В коде прописал функцию отладки, которая помогает понять, какие данные получаем с дисплея и как это всё работает. Для этого нужно открыть монитор порта и посмотреть отладочную информацию.

Таким образом можно включать/выключать одно реле. А также при нажатии на одну кнопку выключить /включить всё реле. Это достаточно удобно. Но для включения и выключения всех реле используется другой инструмент, который рассмотрим в следующем уроке.

Схема подключения к Arduino модуля 8 реле и дисплея DWIN.

Для проверки, как это всё работает, можно подключить светодиоды к соответствующим pins Arduino или реле, как показано на картинке ниже.

Также можно использовать данный код с ESP32. Посмотреть схемы подключения и код вы можете на странице проекта «Управление реле с помощью сенсорного дисплея DWIN и Arduino, ESP32».

И полезная информация для тех, кто дочитал до конца статьи. У вас есть уникальная возможность заказать тестовый образец дисплея компании DWIN Technology. Подробнее тут.

Приобрести дисплей DWIN можно в официальном магазине DWIN Technology на AliExpress. Воспользуйтесь промокодом ARDUINOTEX или ARDUINOTEX1 и получите хорошую скидку. А также гарантированную техническую поддержку.

Понравился урок Создаем переключатели (кнопки с фиксацией) на дисплее DWIN? Не забудь поделиться с друзьями в соц. сетях.

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

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

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

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

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

	Кода для обработки нажатия на кнопку с фиксацией.zip	2 Kb	899	Скачать Вы можете скачать файл.
	Кода для обработки нажатия на кнопку с фиксацией (lite).zip	2 Kb	865	Скачать Вы можете скачать файл.
	Прошивка для дисплея DWIN.zip	691 Kb	925	Скачать Вы можете скачать файл.