Урок 6. Клавиатура дисплей Nextion. Timer, перенаправление на страницы.

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

На дисплей Nextion можно вывести клавиатуру несколькими способами. При этом есть несколько встроенных вариантов всплывающей клавиатуры. Как ими пользоваться, также кратко расскажу в уроке. Но на мой взгляд, своя клавиатура в данном проекте более подходящее решение. Всплывающая клавиатура полезна для проектов, в которых нужно заполнять несколько полей на одном экране, как я делал в проекте: Автоматизация вакуумного пресса на Arduino и дисплее Nextion. А сейчас обо всем по порядку.

Что понадобиться для урока:


Сегодня в уроке Nextion:

Создаем клавиатуру на дисплее Nextion.

Для того чтобы создать клавиатуру на дисплее Nextion, добавим кнопки. Для начала 1 ряд из 3 кнопок. Как добавить встроенную всплывающую клавиатуру, рассмотрим в конце статьи.

Для начала 1 ряд из 3 кнопок.

Далее нужно подгрузить картинки клавиатуры. Как сделать картинки для дисплея Nextion, рассказывал в уроке:#2. Подготовка графики для дисплея Nextion в Inkscape. Создание экранов.

Далее нужно подгрузить картинки клавиатуры

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

Добавляем иконки к кнопкам,

Копируем строчки, чтобы получилась матрицу кнопок 3 на 4.

Копируем строчки, чтобы получилась матрицу кнопок 3 на 4.

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

поменять изображения клавиатуры

В итоге получаем клавиатуру. Я перепутал местами символы «#» и «*». Но в принципе это не критичная ошибка, и подправлю ее дальше.

В итоге получаем клавиатуру.

Добавляем поля ввода пароля. Уведомление о неверном пароле.

Добавляем иконки кнопки разблокировки и поля вывода названия экрана, в виде картинки «p0», текстовое поле «t1» и кнопку «b13» очистки введённого пароля.

 иконки кнопки разблокировки

Оформим текстовое поле, чтобы оно выглядело как поле ввода, для этого в свойстве «style» выбираем параметр «3D_Down».

Оформим текстовое поле

После чего меняем размер шрифта на 40. Как помним из предыдущее урока, id данного шрифта 1. Чтобы текст выводился в виде звёздочек, в поле «pw», выбираем атрибут «Password». Ограничим количество введенных символов, для этого в поле «txt_maxl» укажем значение 4. И для проверки отображения, укажем пароль 1234.

 Чтобы текст выводился в виде звёздочек, в поле «pw»

Вот так выглядит результат.

Вот так выглядит результат.

Для того чтобы проверить работоспособность, нужно поднять станицу «lock» на первую позицию. Чтобы она грузилась при включении дисплея.

нужно поднять станицу «lock» на первую позицию

Нажимаем кнопку «Debug» и видим результат.

Нажимаем кнопку «Debug» и видим результат.

Но клавиатура у нас не работает, да и поле ввода пароль не очищается.

Но клавиатура у нас не работает

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

Для вывода информации о том, что пароль был введен неверный

Настроим его так, чтобы надпись было не видно.

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

Настраиваем работу клавиатуры.

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

отправлять соответствующую цифру на текстовое поле

Поменяем местами кнопки «#» и «*».

Поменяем местами кнопки «#» и «*».

По аналогии с клавишей «1», добавим код добавления символа к паролю. Хотя мы и будем использовать цифровой пароль, данные клавиши могут пригодиться в других проектах. Затем научим кнопку чистить поле с паролем.

По аналогии с клавишей «1», добавим код добавления символа к паролю

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

Можно настроить текстовое поле, чтобы выводило символы вместо звездочек

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

И самое главное, это команда отправки пароля на Arduino.

И самое главное, это команда отправки пароля на Arduino. К привычной конструкции добавляем отправку значения из текстового поля. В итоге получаем отправку одной строкой значение из поля ввода пароля, кодовую фразу команды и символы окончания команды.

Таймер и переменная для проверки пароля.

Для обработки пароля, перенаправления на страницу «led», а также для вывода информации о том, что пароль введен неверный, нужно добавить 2 невидимых элемента Таймер (Timer) «tm0» и переменную Variable «va0».

2 невидимых элемента Таймер (Timer) «tm0» и переменную Variable «va0»

Переменную настраивать не нужно. Оставляем все по умолчанию.

Переменную настраивать не нужно.

У таймера увеличиваем время до 2000 млс.

У таймера увеличиваем время до 2000 млс.

И в обработчик таймера добавляем код. Если цвет надписи, информирующей нас о введении неверного пароля равен 0, т.е черного цвета, то по завершению таймера 2 сек. поменяем цвет на белый. И второе условие проверяет переменную и если она хранит значение 1, то выполняем перенаправление на страницу led.

И в обработчик таймера добавляем код.

На этом все с настройками дисплея Nextion. Сейчас можно перейти к коду Arduino.

Передаем пароль с дисплея Nextion на Arduino и проводим проверку.

Несмотря на то, что на дисплее Nextion мы провели достаточно большую работу, код Arduino увеличиться на 10 строчек. Первым делом добавим целочисленную переменную, которая будет хранить пароль.

добавим целочисленную переменную

Добавляем обработки полученной команды с дисплея Nextion.

Добавляем обработки полученной команды с дисплея Nextion.

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

Для этого получим позицию первого символа

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

 выводим в монитор порта полученное значение с дисплея

И дальше нам нужно проверить, совпадает полученное значение с установленным паролем. Если да, то отправляем значение переменой 1. Это как раз и позволит нам с помощью таймера перенаправить на страницу led. Если пароль не верный, то отправляем цвет текста 0. Что позволит вывести надпись «Неверный пароль» на дисплей. И по таймеру, через 2 секунды, надпись будет скрыта.

Что позволит вывести надпись «Неверный пароль» на дисплей

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

Добавляем всплывающую клавиатуру на дисплей Nextion.

Информация, про которую у меня постоянно спрашивают и не все понимают, как добавить всплывающую клавиатуру на дисплей Nextion.

Добавляем всплывающую клавиатуру на дисплей Nextion.

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

выбрать клавиатуру с английским алфавитом и цифрами

А также урезанную клавиатуру с несколькими символами на кнопку, по аналогии с реализацией на кнопочных телефонах.

После добавления клавиатуры, в проекте появиться дополнительная страница.

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

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


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

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

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

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

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

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

.hex файлы прошивки .hex файлы прошивки.zip47 Kb 71 Скачать
Lesson6.tft Lesson6.tft.zip135 Kb 69 Скачать

Комментарии

Ваше Имя*