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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Код для Arduino, ESP32.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	Код для Arduino.ino	1 Kb	236	Скачать Вы можете скачать файл.
	Интерфейс спидометра на дисплее DWIN.zip	287 Kb	231	Скачать Вы можете скачать файл.