Урок 6. Спидометр на дисплее DWIN. Стрелочный индикатор.

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


Создаём интерфейс будущего спидометра на дисплее DWIN.

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

Создаём интерфейс будущего спидометра на дисплее DWIN.

Небольшой совет. Иконку для стрелки лучше делать с определённым (цветным) фоном, а не PNG без фона. Дисплей видит картинки без фона как будто с белым фоном, поэтому пытается его удалить. В ряде случаев это выглядит хуже, чем если нарисовать картинку изначально с фоном. Цвет фона нужно подбирать в зависимость от цветовой палитры иконки.

 Иконку для стрелки лучше делать с определённым (цветным) фоном, а не PNG без фона.

Создаём проект в среде разработки DGUS.

Изображения подготовили, теперь их нужно добавить в проект. Нам нужно создать один .ICL файл с одним фоновым изображением и один .ICL файл с иконкой. Как создать файлы ICL, рассказывал в предыдущем уроке.

Создаём проект в среде разработки DGUS.

«Icon Rotation» — инструмент для создания стрелочных индикаторов.

Описание данного инструмента вы можете найти на русском языке на этой странице сайта. Ниже приведено изображение с описанием «Icon Rotation» из данной статьи.

Инструмент среды разработки DGUS «Icon Rotation».

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

 Верхний левый угол выделенной области (красный квадрат)

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

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

Координаты центра вращения будут указаны на панели управления, которые можно самостоятельно изменить.

Координаты центра вращения будут указаны на панели управления, которые можно самостоятельно изменить.

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

Небольшой лайфхак. Откройте предпросмотр вашего проекта и произведите настройки.

Затем нужно указать начальный угол и конечный угол поворота стрелки. Для этого также в открытом окне предпросмотра смотрим расположение стрелки и выставляем первоначальное положение. Сохраним полученное значение. Затем тут же повернём стрелку до конечного положения. Полученное значение угла поворота запишем в поле «конечное положение угла».

Затем нужно указать начальный угол и конечный угол поворота стрелки.

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

Как загрузить прошивку в дисплей, читайте в предыдущем уроке.

Дизайн готов. Сейчас можно перейти к коду для Arduino, ESP8266, ESP32.

Дизайн готов. Сейчас можно перейти к коду для Arduino, ESP8266, ESP32.

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

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

Схема подключения дисплея DWIN Arduino NANO и двух потенциометров достаточно простая и сложностей, я думаю, возникнуть не должно. Аналогичным образом подключается два потенциометра к ESP32.

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

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

Но вот с ESP8266 ситуация немного иная, так как там всего 1 аналоговый вход.

Код для Arduino, ESP32.

Несмотря на то, что пример написан для Arduino NANO, данный код можно использовать и с другими микроконтроллерами практически без изменений. Но я бы посоветовал при работе с ESP32 перенести подключение дисплея на UART2 микроконтроллера.

Код для Arduino, ESP32

Код получился небольшой, и ничего сложного в нём нет.

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

Код получился небольшой, и ничего сложного в нём нет.

Для того чтобы не передавать данные постоянно, сделал таймер, который считывает показания с потенциометров и передаёт их на дисплей через 10 мс.

Пример работы.

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

Такой небольшой пример позволит создать достаточно красивый спидометр

Ниже приведён второй пример интерфейса спидометра. Так уж получилось, что сделано было 2 варианта.

Ниже приведён второй пример интерфейса спидометра.

Скачать исходные материалы вы можете в разделе «Файлы для скачивания».


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


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

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

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

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

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

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

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

Код для Arduino Код для Arduino.ino1 Kb 722 Скачать
Интерфейс спидометра на дисплее DWIN Интерфейс спидометра на дисплее DWIN.zip287 Kb 723 Скачать

Комментарии

Ваше Имя*


Разработка проектов