Добавим элемент «Dual-state button» (кнопка с фиксацией) однократно нажав на нём в окне «Toolbox» (библиотека элементов). Выбранный элемент появится на активной странице и будет виден в области отображения экрана дисплея. Элементу автоматически присвоится имя «bt0».
Выберите элемент кнопка с фиксацией, находящийся в области отображения экрана дисплея нажав на него мышкой или выбрав поле «bt0(Dual)» из верхнего списка в окне «Attribute» (редактор атрибутов элементов).
Установим кнопку в нужную позицию на экране (присвоив значение атрибутам x=35, y=126). Можно просто перемещать кнопку по экрану мышкой.
Зададим размеры кнопки по ширине и высоте (w=50, h=50).
Укажем что кнопка будет содержать картинки (присвоив атрибуту «sta» значение «image»).
Выберем для не нажатой кнопки картинку с не работающим вентилятором (присвоив атрибуту «pic» номер этой картинки). Номер картинки можно посмотреть в окне «Pictute» содержащем список загруженных картинок.
Выберем для нажатой кнопки картинку с работающим вентилятором (присвоив атрибуту «pic2» номер этой картинки). Номер картинки можно посмотреть в окне «Pictute» содержащем список загруженных картинок.
Атрибуты «pic» и «pic2» становятся доступными, только после присвоения атрибуту «sta» значения «image».
Для присвоения значений атрибутам «pic» и «pic2» нужно дважды нажать на поле атрибута и выбрать нужную картинку из появившегося списка картинок.
Сотрём надпись с кнопки очистив значение атрибута «txt».
Назначим область видимости значений кнопки как глобальная (присвоив атрибуту «vscope» значение «global»).
Можно задать состояние кнопки при старте установив значение атрибута «val» в 1 (нажата) или 0 (отпущена).
Можно изменить имя кнопки присвоив новое значение атрибуту «objname», тогда команды на изменение её атрибутов во время работы, нужно будет отправлять с указанием нового имени.
Значение атрибута «id» изменить нельзя, оно присваивается автоматически по порядку добавления элементов, в нашем примере это: 0-страница, 1-текст, 2-слайдер, 3-кнопка.
После редактирования атрибутов кнопки, на экране изменятся её положение, внешний вид и размеры.
Таким же образом добавьте еще две кнопки: освещение и полив (с рисунками для выключенного и включенного состояний). Также добавьте соответствующие текстовые поля для указанных кнопок.
Выберите единственную страницу нажав мышкой на область отображения экрана дисплея в месте свободном от других элементов или выбрав поле «page0(Page)» из верхнего списка в окне «Attribute» (редактор атрибутов элементов).
Укажем что фон страницы будет состоять картинки (присвоив атрибуту «sta» значение «image»).
Выберем картинку для фона страницы (присвоив атрибуту «pic» номер этой картинки). Номер картинки можно посмотреть в окне «Pictute» содержащем список загруженных картинок.
Значение атрибута «id» изменить нельзя, оно присваивается автоматически по порядку добавления элементов, в нашем примере это: 0-страница, 1-текст, 2-слайдер, 3-кнопка.
После редактирования атрибутов страницы, на экране появится фоновое изображение.
В программе Nextion Editor имеется встроенный симулятор, в котором можно проверить поведение элементов и выполнение кода не загружая проект в дисплей.
Для запуска симулятора нажмите на кнопку «Debug» в главном меню программы. В открывшемся окне видно изображение дисплея, на котором можно нажимать на кнопки.
При каждом нажатии на кнопку будет меняться её картинка.
Если Вас устраивает поведение дисплея в симуляторе, можно приступать к загрузке данных непосредственно в дисплей. Загрузить проект в дисплей можно двумя способами: через MicroSD-карту или по шине UART. Первый способ предпочтительней, так как он занимает меньше времени.
Скомпилируйте проект нажав на кнопку «Compile» в главном меню программы.
После компиляции в окне «Output» Вы увидите результат компиляции: количество байт, занимаемое глобальными переменными, картинками, шрифтами, количество страниц в проекте, ошибки, размер файла и т.д.
Если ошибок нет (нет строк, помеченных красным цветом), то можно сохранить скомпилированный файл в корень MicroSD-карты.
Файл имеет имя проекта с расширением «tft» и лежит в директории которую можно открыть выбрав пункт меню «File > TFT file output».
Сохраните файл из открывшейся папки в корень MicroSD-карты. В корне должен находиться только один файл с разрешением *.tft. MicroSD-карта должна быть предварительно отформатирована в FAT32 и не может превышать размер в 32 ГГб. Установите MicroSD-карту в слот дисплея и подайте питание. По окончании загрузки на дисплее отобразится надпись: Check Data… 100% Update Successed!
Теперь можно отключить питание дисплея и извлечь MicroSD-карту (при подаче питания без MicroSD-карты, на нём будет отображаться интерфейс загруженного проекта).
11.3 Создание блок-схемы в FLProg
Соберите схему подключения согласно рисунку 14.
Создайте в FLProg новый проект Lab_11.flp.
Добавьте 3 цифровых выхода с номерами контактов: вентилятор — 5, светильник — 8 и вентиль — 12.
Обратите внимание, что для каждого блока, используемого в наших проектах, в его настройках имеется возможность ознакомиться с описанием его работы, кликнув на кнопку «Информация».
Во встроенных блоках библиотеки в папке «Панель Nextion HMI» во вкладке «Элементы» найдите элемент «Получить параметр» и пометите его на поле программы перед выходом «вентилятор».
Настройка элемента ведется в соответствии с параметрами, присвоенными кнопке с фиксацией «вентилятор» в программе Nextion Editor (в нашем случае Имя – bt0, ID – 2). Обращаем внимание, что у вас эти параметры могут отличаться.
Соедините выход блока «Получить параметр» с входом блока «вентилятор».
Аналогично добавьте и настройте еще 2 элемента «Получить параметр» для блоков «светильник» и «вентиль».
Проверьте проект на наличие ошибок, скомпилируйте и загрузите скетч в плату Arduino Uno. В результате при нажатии на кнопку «вентиляция» сенсорного дисплея Nextion должен загораться и погасать светодиод LED2, при нажатии на кнопку «освещение» – светодиод LED1, кнопки «полив» – LED0.
Задание на самостоятельную работу
Доработать разработанный выше интерфейс панели Nextion. К микроконтроллерному модулю дополнительно подключить датчики температуры (например, DS18B20), освещённости (фоторезистор), уровня воды в емкости (потенциометр). На дисплее Nextion дополнительно должна отображаться информация о текущей температуре окружающей среды, освещенности окружающей среды и объеме воды в резервуаре (формат отображения см. ниже). Показания датчиков должны обновляться через каждые 5 сек.
| 100 | 100 |
| 300 | 300 |
| 25,3 | 25,3 |
| Температура, град. | Температура, град. |
| Освещенность, лк. | Освещенность, лк. |
| Объем воды, л. | Объем воды, л. |
Отправьте на проверку разработанный выше интерфейс панели Nextion в файле Proj11.HMI.
Отправьте на проверку блок-схему проекта в файле Lab11_2.flp.