====== Подключение дисплеев Nextion, программирование и прошивка через Editor ====== Используйте [[amp>collection/nextion-displays?utm_source=man&utm_campaign=nextion&utm_medium=wiki|дисплейные модули Nextion]] для отображения текста, изображений, анимаций, кнопок, переключателей, стрелочных индикаторов, прогресс баров и графиков. Дисплеи с лёгкостью позволяют организовывать меню с выпадающими списками и даже интерактивные игры! {{ :продукты:nextion:nextion-overview.1.jpg?nolink |}} Всё это становится возможным благодаря мощному 32-х разрядному процессору и визуальной среде разработки Nextion Editor. С внешним миром дисплей взаимодействует с помощью резистивного сенсора касаний с собственным контроллером и интерфейса UART. Панель подключается всего по четырём проводам (два из которых — питание). Для обновления прошивки дисплея, помимо UART, предусмотрен разъем для microSD карты. В зависимости от версии дисплеи оснащаются большим объемом памяти, часами реального времени и даже собственными пинами GPIO, что позволяет использовать дисплей для непосредственного управления устройствами, используя реле и т.п. приборы. ===== Видеообзор ===== {{youtube>avEffQC1Q58?large}} {{youtube>jp7UeyKiOgA?large}} ===== Комплектация ===== Каждый дисплей Nextion дополнен комплектующими, которые помогут соединиться с экраном: {{ :продукты:nextion:nextion-package-contents.jpg?nolink |}} * Четырёхпроводной шлейф служит для подключения дисплея к питанию и управляющим пинам внешнего контроллера: например [[amp>collection/arduino?utm_source=man&utm_campaign=nextion&utm_medium=wiki|Arduino]], [[amp>collection/espruino?utm_source=man&utm_campaign=nextion&utm_medium=wiki|Espruino]] или [[amp>collection/raspberry-pi?utm_source=man&utm_campaign=nextion&utm_medium=wiki|Raspberry Pi]]. С одной стороны шлейфа расположен разъём JST PH-4 (мама), а с другой — четыре свободных провода с коннекторами «мама» на концах: * Земля (G) — чёрный провод. Соедините с землёй внешнего микроконтроллера. * Сигнальный (RX) — жёлтый провод, цифровой вход дисплейного модуля. Используется для приёма данных из внешнего контроллера. Подключите к пину TX внешнего микроконтроллера. * Сигнальный (TX) — синий провод, цифровой выход дисплейного модуля. Используется для передачи данных во внешний контроллер. Подключите к пину RX внешнего микроконтроллера. * Питание (V) — красный провод. Соедините с питанием внешнего микроконтроллера. * Адаптер питания «USB to 2 Pin» — используется для подключения напряжения к дисплею, другими словами включает экран. ===== Демонстрационный режим ===== Дисплейные модули работают прямо из коробки с демонстрационной прошивкой. Для её старта достаточно подать питание на дисплей: - Соедините дисплей с переходной платой «USB to 2 pin» c помощью четырёхпроводного щлейфа. - Разъём JST PH-4 подключите к дисплею. - Питание (+5V) — красный провод, подключите к контакту платы «USB to 2 pin» с пометкой «+». - Земля (GND) — чёрный провод, подключите к контакту платы «USB to 2 pin» с пометкой «−». - Сигнальные пины (TX) и (RX) используется для обмена данных с микроконтроллером. В демонстациооном режиме не нужны, т.е. оставьте свободными. - Подключите к полученной конструкции питание через порт micro-USB. Для этого отлично подойдёт [[amp>product/usb-power-plug-3a?utm_source=man&utm_campaign=nextion&utm_medium=wiki|зарядник на 5В]] с [[amp>product/usb-cable-micro?utm_source=man&utm_campaign=nextion&utm_medium=wiki|кабелем micro USB]]. {{ :продукты:nextion:nextion-example-power-demo.png?nolink |}} - В итоге, включится дисплей с тестовой прошивкой, которая покажет базовые возможности экрана. ===== Штатный режим ===== Состоит из этапов: - установка среды Nextion Editor (однократно); - создание проекта для дисплейного модуля; - прошивка дисплейного модуля. ==== Установка среды Nextion Editor ==== Для работы с дисплеем необходимо установить и настроить среду разработки «Nextion Editor» Для этого [[https://nextion.tech/nextion-editor/|перейдите]] на официальный сайт дисплейных модулей «Nextion». Скачайте и установите последнюю версию среды.{{ :продукты:nextion:nextion_start1a.png |}} ==== Создание нового проекта в Nextion Editor ==== - Запустите среду «Nextion Editor»{{ :продукты:nextion:nextion_start2.png |}} - Создайте новый проект: File NEW , напишите название будущего проекта и нажмите кнопку ''Сохранить''. {{ :продукты:nextion:nextion_start3a.png |}}Откроется окно ''Setting'', с двумя вкладками: ''Device'' и ''Display''.{{ :продукты:nextion:nextion_start4a.png |}} - Во вкладке ''Device'' [[:продукты:nextion#линейки_и_модели_дисплеев|выберите линейку и модель дисплея]]. В качестве примера выберем дисплей из линейки ''Basic'' модели ''NX3224T024_011R''{{ :продукты:nextion:nextion_start5a.png |}} - Во вкладке ''Display'' выберите ориентацию дисплея и кодировку. Для поддержки кириллицы выбирайте кодировку ''iso-8859-5'' {{ :продукты:nextion:nextion_start6a.png |}} - После всех манипуляций нажимайте кнопку ''OK''.{{ :продукты:nextion:nextion_start7a.png |}} Перед вами откроется графическое окно разработки. Рассмотрим его элементы. {{ :продукты:nextion:nextion_start8a.png |}} * 1 — Главное меню. * 2 — Меню управления выравниванием и порядком элементов. * 3 — Библиотека элементов. * 4 — Область отображения. * 5 — Список страниц проекта * 6 — Библиотека изображений /Библиотека шрифтов. * 7 — Окно вывода результатов компиляции. * 8 — Окно для ввода кода, выполняемого при возникновении события. * 9 — Зона редактирования атрибутов выбранного элемента. ==== Добавление изображений ==== - Нажмите в окне «библиотека изображений» на иконку {{:продукты:nextion:add.png?20|}}{{ :продукты:nextion:nextion_start9a.png |}} - Выберите интересующее вас изображение на ПК и нажмите кнопку ''Открыть''.{{ :продукты:nextion:nextion_start10a.png |}}В окне «библиотека изображений» появиться загруженное изображение.{{ :продукты:nextion:nextion_start11.png |}} - Выделите область отображение дисплея.{{ :продукты:nextion:nextion_start12.png |}} - В окне «зона редактирование атрибутов» в пункте ''sta'' измените поле ''solid color'' на ''image''.{{ :продукты:nextion:nextion_start14a.png |}} - В поле ''pic'' выберите интересующую вас картинку из «библиотеки изображений» и нажмите кнопку ''OK''{{ :продукты:nextion:nextion_start15a.png |}} Если вы всё сделали правильно, в окне «область отображение дисплея» вы увидите вашу картинку.{{ :продукты:nextion:nextion_start16a.png |}} Это значит всё получилось и можно смело [[:продукты:nextion#прошивка_дисплейных_модулей|переходить к прошивки дисплея.]] ===== Прошивка дисплейных модулей ===== ==== Компиляция проекта ==== Перед прошивкой проект необходимо проверить не наличие ошибок — скомпилировать. Для этого нажмите кнопку ''Compile''. В окне «вывода результатов компиляции» вы должны увидеть сообщение об успешной компиляции.{{ :продукты:nextion:nextion_start17a.png |}} Дисплейные модули Nextion поддерживают два вида прошивки: * Через последовательный порт UART * С помощью карты microSD. Рассмотрим их подробнее. ==== Прошивка через UART ==== Для прошивки дисплея через UART понадобится [[amp>product/usb-serial-converter?utm_source=man&utm_campaign=nextion&utm_medium=wiki|USB-Serial адаптер]]. - [[:продукты:nextion#создание_нового_проекта_в_nextion_editor|Создайте и откомпилируйте ваш проект в «Nextion Editor»]]. - Подключите дисплей к адаптеру USB-Serial следующим образом: - Питание дисплея ''+5V'' — к питанию USB-Serial-адаптера. - Земля дисплея ''GND'' — к питанию USB-Serial-адаптера. - ''TX'' дисплея — в ''RX'' USB-Serial-адаптера. - ''RX'' дисплея — в ''TX'' USB-Serial-адаптера.{{ :продукты:nextion:nextion-display_scheme_usbserial.png |}} - Прошейте ваш дисплей, нажав на кнопку {{:продукты:nextion:upload.png?70|}}. Процесс прошивки будет отображаться в окошке в программы и на дисплейном модуле.{{ :продукты:nextion:nextion_start_uart1a.png |}} После этого загруженный проект будет выполняться и отображаться на дисплейном модуле. ==== Прошивка через microSD ==== Прошивка через UART занимает достаточно долгое время и требует дополнительного UART-преобразователя. В связи с этим существует альтернативный способ прошивки дисплеев Nextion с помощью microSD-карты. - [[:продукты:nextion#создание_нового_проекта_в_nextion_editor|Создайте и откомпилируйте ваш проект в «Nextion Editor»]]. - Откройте папку с компилированными проектами: File Open builder folder {{ :продукты:nextion:nextion_start_sd1a.png |}} - Скопируйте файл с именем вашего проекта на microSD-карту.{{ :продукты:nextion:nextion_start_sd2a.png |}} - Извлеките microSD-карту из вашего ПК и вставьте её в дисплей. - Подключите питание на дисплей. - Дождитесь окончания прошивки. - Извлеките microSD-карту. После всех действий загруженный проект будет выполняться и отображаться на дисплейном модуле. ===== Примеры работы ===== Для старта воспользуйтесь нашим проектом: [[:projects:games-kill-mole|]]. ===== Линейка Nextion Enhanced ===== ^ Модель ^ Wiki ^ Диагональ ^ Разрешение ^ Тач панель ^ Кол-во цветов ^ Процессор ^ Flash (MB) ^ | [[amp>product/display-nextion-enhanced-nx3224k024?utm_source=man&utm_campaign=nextion&utm_medium=wiki|NX3224K024]] | [[:products:display-nextion-enhanced-nx3224k024|Click]] | 2.4” | 320×240 | Резистивная | 65536 | ARM 48 МГц | 16 | | [[amp>product/display-nextion-enhanced-nx3224k028?utm_source=man&utm_campaign=nextion&utm_medium=wiki|NX3224K028]] | [[:products:display-nextion-enhanced-nx3224k028|Click]] | 2.8” | 320×240 | Резистивная | 65536 | ARM 48 МГц | 16 | | [[amp>product/display-nextion-enhanced-nx4024k032?utm_source=man&utm_campaign=nextion&utm_medium=wiki|NX4024K032]] | [[:products:display-nextion-enhanced-nx4024k032|Click]] | 3.2” | 400×240 | Резистивная | 65536 | ARM 48 МГц | 16 | | [[amp>product/display-nextion-enhanced-nx4832k035?utm_source=man&utm_campaign=nextion&utm_medium=wiki|NX4832K035]] | [[:products:display-nextion-enhanced-nx4832k035|Click]] | 3.5” | 480×320 | Резистивная | 65536 | ARM 108 МГц | 32 | | [[amp>product/display-nextion-enhanced-nx4827k043?utm_source=man&utm_campaign=nextion&utm_medium=wiki|NX4827K043]] | [[:products:display-nextion-enhanced-nx4827k043|Click]] | 4.3” | 480*272 | Резистивная | 65536 | ARM 108 МГц | 32 | | [[amp>product/display-nextion-enhanced-nx8048k050?utm_source=man&utm_campaign=nextion&utm_medium=wiki|NX8048K050]] | [[:products:display-nextion-enhanced-nx8048k050|Click]] | 5.0” | 800×480 | Резистивная | 65536 | ARM 108 МГц | 32 | | [[amp>product/display-nextion-enhanced-nx8048k070?utm_source=man&utm_campaign=nextion&utm_medium=wiki|NX8048K070]] | [[:products:display-nextion-enhanced-nx8048k070|Click]] | 7.0” | 800×480 | Резистивная | 65536 | ARM 108 МГц | 32 | ===== Линейка Nextion Intelligent ===== ^ Модель ^ Wiki ^ Диаганаль ^ Разре-шение ^ Тач панель ^ Кол-во цветов ^ Процессор ^ Flash (MB) ^ | [[amp>product/display-nextion-intelligent-nx8048p070-011c?utm_source=man&utm_campaign=nextion&utm_medium=wiki|NX8048P070‑011C]] | [[:products:display-nextion-intelligent-nx8048p070-011c|Click]] | 7,0” | 800×480 | Ёмкостная | 65536 | HMI 200 МГц | 128 | | [[amp>product/display-nextion-intelligent-nx8048p070-011c-y?utm_source=man&utm_campaign=nextion&utm_medium=wiki|NX8048P070‑011C‑Y]] | [[:products:display-nextion-intelligent-nx8048p070-011c-y|Click]] | 7,0” | 800×480 | Ёмкостная | 65536 | HMI 200 МГц | 128 | | [[amp>product/display-nextion-intelligent-nx1060p101-011c-i?utm_source=man&utm_campaign=nextion&utm_medium=wiki|NX1060P101‑011C‑I]] | [[:products:display-nextion-intelligent-nx1060p101-011c-i|Click]] | 10,1” | 1024×600 | Ёмкостная | 65536 | HMI 200 МГц | 128 | ===== Ресурсы ===== * [[amp>page/nextion-hmi-smart-displays?utm_source=man&utm_campaign=display-nextion&utm_medium=wiki|Чем HMI-дисплей отличается от простого экрана]] * [[https://nextion.tech/editor_guide/|Руководство по Nextion Editor]] * [[https://nextion.tech/instruction-set/|Список операторов и инструкций по Nextion Editor]]