9 урок Nextion на русском. Красивый дизайн из 2 картинок. tft Nextion 3.5

При создании дизайна интерфейса для дисплея Nextion можно столкнуться с рядом сложностей. Первый недочет, на мой взгляд, нет возможности использовать изображения без фона. Кроме этого, как рассказывал в предыдущих уроках, для реализации 1 красивой кнопки нужно 2 картинки. А если в проекте не один экран управления с большим количеством кнопок. Картинок нужно очень много и в них можно запутаться. Как же сделать красивый дизайн для экрана Nextion 3.5 дюйма (в моем случае, у вас может быть другой размер дисплея) и сохранить полученный результат tft Nextion, для дальнейшей загрузки прошивки на дисплей? Об этом расскажу сегодня в уроке Nextion на русском.

Что нужно для реализации красивого дизайна интерфейса дисплея Nextion?

При создании дизайна интерфейса дисплея Nextion приходилось постоянно учитывать одну особенность. Скругление углов кнопок нужно делать в цвет фона. А при сложном фоне тут вообще речи идти не могло. Конечно, можно, но приходилось постоянно позиционировать кнопку в нужном месте фона и сохранять. На создание красивого оформления уходило очень много времени. После чего все элементы нужно размесить в редакторе Nextion Editor с точностью до пикселя. Это просто адская работа. Но, к счастью, есть более простой способ создания дизайна для Nextion hmi. Что же нам понадобится для реализации красивого дизайна для дисплея Nextion?

Для начала нам нужно сделать 2 картинки для активного и пассивного состояния кнопок. У меня получились вот такие Nextion картинки.

Активное состояние элементов на экране.

Активное состояние элементов на экране.

Пассивное состояние кнопок на Nextion 3.5.

Пассивное состояние кнопок на Nextion 3.5.

При необходимости можно сделать пустой фон для дисплея. Он пригодится, если вдруг вам нужно спрятать какой-то элемент.

При необходимости можно сделать пустой фон для дисплея.

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

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

Создаем красивый дизайн в Nextion Editor.

Для начала добавляем в проект созданные изображения. Где скачать Nextion Editor рассказывал в первом урке. Также у меня есть урок по подготовке графики и загрузки картинок в проект.

Где скачать Nextion Editor рассказывал в первом урке. Также у меня есть урок по подготовке графики и загрузки картинок в проект.

После загрузки фоновых изображений.

После загрузки фоновых изображений.

Получаем вот такой результат.

Получаем вот такой результат.

Добавляем первую кнопку на экран Nextion.

Добавляем первую кнопку на экран Nextion.

Настроем некоторые параметры кнопки:

  • sta: crop images
  • txt: (удалить все символы)
  • picc: (выбираем картинку с элементами в пассивном состоянии, у меня 2)
  • picc2: (выбираем картинку с элементами в активном состоянии, у меня 1)

Настроем некоторые параметры кнопки:

Затем нам нужно спозиционировать выделение на месте расположения кнопки. После чего увидим нужную кнопку.

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

Раскопируем требуемое количество кнопок и расположим их в нужных месте.

Раскопируем требуемое количество кнопок и расположим их в нужных месте.

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

 Но также есть и другие способы. Для вывода статических элементов можно использовать инструмент «Crop»

Выбираем область и изображение, на котором расположен элемент.

Выбираем область и изображение, на котором расположен элемент.

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

Также можно вывести текст, который прописан на изображении.

Чтобы вывести текстовое поле с нужным фоном добавляем текст.

Чтобы вывести текстовое поле с нужным фоном добавляем текст.

И настраиваем свойства:

  • sta: crop images
  • txt: 1234(пример текста)
  • pco: (цвет текста)
  • pw: Password (для отображения ввода пароля)
  • picc: (выбираем картинку на которой расположен нужный элементам, у меня это 1)

И настраиваем свойства: sta: crop images

Сейчас можно проверить, как все у нас отображается и работает. Нажмем на кнопку «Debug». Откроется окно отладки. Понажимаем на кнопки. Как видим, все работает отлично.

Сейчас можно проверить, как все у нас отображается и работает. Нажмем на кнопку «Debug».

Как менять текст с помощью подготовленных картинок?

Добавил я в проект еще одно изображение, на котором есть надпись «Заблокировано». После чего можно вывести на дисплей 4 различных состояния в блоке «q1».

  • Пустое поле
  • Надпись «Закрыто»
  • Надпись «Открыто»
  • И надпись «Заблокировано»

Как менять текст с помощью подготовленных картинок?

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

Внимание! По данному уроку скоро будет доступен проект. Не забудьте добавить сайт в закладки, чтобы не пропустить!

Подписчики на сайте boosty могут скачать исходные файлы в формате .HMI.

Подведем итоги.

Как видим, для дизайна одной страницы мы использовали всего 4 картинки. По идее можно обойтись всего двумя изображениями. Данный подход упрощает процесс создания красивого дизайна на дисплее Nextion. Но подготавливать изображения нужно максимально точно. Так как смещение элемента на 1-2 пиксель будет видно на дисплее Nextion. И для реализации красивого дизайна нужно уметь работать в таких программах как Photoshop, Gimp или других.

Понравился Урок Nextion на русском. Красивый дизайн из 2 картинок. tft Nextion 3.5? Не забудь поделиться с друзьями в соц. сетях.

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

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

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

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

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

tft Nextion 3.5 tft Nextion 3.5.zip336 Kb 675 Скачать
nextion картинки nextion картинки.zip463 Kb 683 Скачать

Комментарии

Ваше Имя*

Андрей

Гость: Андрей (16 февраля, 2023 в 08:11)

Добавьте пожалуйста файлы проекта HMI



.9 урок Nextion на русском. Красивый дизайн из 2 картинок. tft Nextion 3.5

Nextion уроки
5 октября , 2021
Комментариев:1
Файлов для скачивания:2
Фото:7
Понравилась статья? Нажми


Cлучайные товары

Набор датчиков и индикаторов для ArduinoНабор датчиков и индикаторов для Arduino


AliExpress
AliExpress

Arduino Uno R3Arduino Uno R3


AliExpress
AliExpress

Читайте также

Мы в соц сетях

Подпишись на канал Telegram
Разработка проектов