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

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


Приобрести дисплей можно в официальном магазине DWIN Technology на AliExpress. Например, 7-дюймовый дисплей с резистивным сенсором можно купить от 2500 рублей. С ёмкостным сенсором от 3000 руб. (Цена указана с учётом доставки, действительна на момент публикации статьи).

Приобрести дисплей можно в официальном магазине DWIN Technology на AliExpress.

Для получения СКИДКИ используйте купон ARDUINOTEX на AliExpress.

Для получения СКИДКИ используйте купон ARDUINOTEX на AliExpress.


Инструменты для создания переключателя (кнопки с фиксацией) в среде разработки 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» на русском языке.

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

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

Здесь нужно поставить галочку нулевого бита для первой кнопки, первого бита для второй

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

Наверное, вы подумали, что это ограничение дисплея DWIN

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

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

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

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

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

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

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

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

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

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

Также нам нужно поставить галочку «Data auto-uploading»

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

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

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

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

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

И самое главное — правильно настроить обработку нажатия на сенсор.

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

Также важный параметр — это «Touch effect», тут нужно выбрать «Disposable»

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

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

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

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

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

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

В функции ReadSerial(), если были получены данные по UART

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

Если данные не поступают с дисплея, переходим к их обработке

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Контактные данные для связи со мной:

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

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

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

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

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

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

Кода для обработки нажатия на кнопку с фиксацией Кода для обработки нажатия на кнопку с фиксацией.zip2 Kb 49 Скачать
Кода для обработки нажатия на кнопку с фиксацией (lite) Кода для обработки нажатия на кнопку с фиксацией (lite).zip2 Kb 51 Скачать
Прошивка для дисплея DWIN Прошивка для дисплея DWIN.zip691 Kb 54 Скачать

Комментарии

Ваше Имя*


Бесплатный образец