Возможно, вы задумывались, как при помощи Arduino и TFT дисплея можно красиво и удобно вывести большой объём текстовой и графической информации? В данном уроке мы постараемся ответить на этот вопрос и даже написать программу для небольшого интерфейса. Использовать для этого мы будем TFT дисплей напрямую подключаемый к Arduino.
Для того чтобы покупатель знал, кто произвел оборудование, часто на устройствах с дисплеями делают приветственную страницу. Также данная страница служит защитой от ошибок, которые могут возникнуть, пока микроконтроллер не загрузился, а управление с дисплея уже доступно. Поэтому во многих проектах делаю заставку.
Чаще всего это просто картинка, которая появляется на определённое время. Обычно на 3-5 секунд. Или пока не загрузится микроконтроллер и будет готов к работе.
Создаём страницу со скроллингом части изображения.
Продолжаем изучать среду разработки DGUS (DWIN Graphic Utilized Software). Данное программное обеспечение позволяет создавать красивые интерфейсы для HMI дисплеев компании DWIN. Сегодня на уроке научимся создавать кнопки. В этом нам поможет инструмент «Return Key code». Информацию о других инструментах среды разработки DGUS вы можете прочитать в разделе сайта «DWIN».
Создаём кнопку на дисплее DWIN.
В предыдущем уроке мы познакомились со средой разработки DGUS (DWIN Graphic Utilized Software). Подготовили фоновые изображения и иконки, после чего проверили отображение графики на дисплее. Сегодня научимся создавать кнопки с фиксацией или переключатели на дисплее DWIN. В этом нам помогут два инструмента: «Bit icon», «Incremental Adjustment».
Инструменты для создания переключателя (кнопки с фиксацией) в среде разработки DGUS.
В проектах с дисплеем DWIN я уже показывал, что можно сделать звук при касании сенсора. Это привычное для всех пищание зуммера. Иногда данный звук даже нет желания использовать, так как он достаточно противный. В конфигурационном файле .CFG можно настроить тональность, но это тоже не то, что нужно. Хотелось бы использовать свой звук, желательно в .mp3 формате. Для этого дисплей DWIN имеет возможность загрузить свои звуки. Что для этого нужно и как использовать, сейчас разберём в данном уроке.
В данном уроке познакомимся со средой разработки DGUS (DWIN Graphic Utilized Software). Рассмотрим, как подготовить изображения для проекта с использованием дисплея компании DWIN. Подробно разберём, как загрузить изображения в проект и подготовить основные файлы проекта.
Среда разработки DGUS.
Давайте рассмотрим программу DGUS (сокращение от DWIN Graphic Utilized Software) и основные формируемые файлы для работы. Ниже представлена краткая диаграмма разработки ПО.
Чтобы начать программировать ESP32 в среде Arduino IDE, необходимо изучить структуру кода. В данном уроке постараюсь объяснить структуру кода в среде Arduino IDE. Данная структура применима при программировании и других микроконтроллеров в данной среде разработки. Вы можете убедиться в этом, посмотрев мой урок по программированию Arduino.
Что понадобиться для выполнения данного урока.
Сегодня в уроке рассмотрим инструмент Waveform Nextion. Который позволит строить графики на сенсорном дисплее Nextion. Посмотрим, какие особенности нужно учитывать при построении графиков. Сгенерируем сигнал для построения 4 графиков. А также выводим график на основе показаний с Arduino.
Строим график на дисплее Nextion по сгенерированным данным таймера.
При создании дизайна интерфейса для дисплея Nextion можно столкнуться с рядом сложностей. Первый недочет, на мой взгляд, нет возможности использовать изображения без фона. Кроме этого, как рассказывал в предыдущих уроках, для реализации 1 красивой кнопки нужно 2 картинки. А если в проекте не один экран управления с большим количеством кнопок. Картинок нужно очень много и в них можно запутаться. Как же сделать красивый дизайн для экрана Nextion 3.5 дюйма (в моем случае, у вас может быть другой размер дисплея) и сохранить полученный результат tft Nextion, для дальнейшей загрузки прошивки на дисплей? Об этом расскажу сегодня в уроке Nextion на русском.
Что нужно для реализации красивого дизайна интерфейса дисплея Nextion?
Цель этого урока - объяснить, как работать с HTML, Javascript и CSS на веб-сервере ESP8266 HTTP.
Важно учитывать, что HTML, Javascript и CSS - это языки, которые выполняются / отображаются на стороне клиента. Поскольку мы собираемся выполнять HTTP-запросы из веб-браузера, он будет отвечать за рендеринг HTML и CSS и выполнение Javascript.
Это означает, что мы узнаем, как интерпретировать HTML, CSS или Javascript. Как увидим ниже, этот код будет храниться в строках, которые будут возвращены в ответах HTTP, почти так же, как мы это делали бы для возврата любого другого типа контента.
В этом простом примере мы создадим главную страницу на HTML. Страницу с кодом Javascript на которой будет запускаться окно предупреждения при нажатии кнопки. И страницу с кнопкой, стилизованной с помощью CSS.
