Дисплей Nextion: азы. Arduino, ESP8266.

Тема в разделе "Глядите, что я сделал", создана пользователем ИгорьК, 9 авг 2016.

Метки:
  1. ИгорьК

    ИгорьК Гуру

    Если вы еще боитесь ESP-8266 - вам сюда.

    ===============================================

    ИМХО, Nextion в домашнем хозяйстве будет вещью необходимой. Особенно, если есть желание заставить дом поумнеть.
    В паре заметок хочу поделиться опытом изысканий на тему этой железки и некоторыми вещами, о которых почему-то не говорится.

    Тема эта, похоже, необъятная и осветить ее удастся только частично.

    Nextion - есть дисплей, который управляется собственным процессором.
    Nextion создает внутри себя шаблоны разных элементов, которые по UART принимают команды и меняют свое состояние. Или наоборот - отправляют команды по UART.
    Кнопка, нарисованная в графическом редакторе, будет существовать не в памяти МК, а в памяти дисплея.
    Нажатие на эту кнопку (касание дисплея) вызовет передачу в UART некоторого кода, который вы сами можете определить.
    Вот как в моем домашнем хозяйстве это выглядит:
    125.jpg
    [​IMG]
    [​IMG]
    [​IMG]

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

    Мы же будем прикручивать к дисплею ESP8266 на NodeMCU - это, полагаю, лучшее решение для умного дома.

    Задача: Nextion + ESP8266 + MQTT = решение для любой системы, на которой ни сделан сообразительный дом.

    Первое, что нужно сделать - скачать Netion Editor.
    Это скачивание полезно всем - и тем кто купил дисплей и тем, кто не решился или не уверен - нужно оно ему или нет.

    1. Nextion Editor имеет встроенный эмулятор дисплея. Поэтому, вы можете поиграть с дисплеем и применить его на практике до покупки. Понравилось - покупаем, нет - сносим программу и забываем о ней.
    2. Nextion Editor обеспечивает программную связь между эмулируемым дисплеем и вашим железом, плодключенным по USB. Таким образом, вы можете не только эмулировать дисплей, но и присоединять его к железу и программировать и то и другое, каждый раз наблюдая за результатом работы. ESP8266 или Ардуино - все сгодися.

    Итак, разработка и настройка вашего устройства будет приятной и удобной.
    ==============================================================

    Что подразумевает управление умным домом через дисплей? Полагаю, решение трех задачек:
    • индикация некоторых данных;
    • выключение\выключение чего либо;
    • изменение каких-то параметров.
    Вот на этих трех вопросах и сосредоточимся.

    1. Индикация данных

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

    Кстати, фонарик на втором фото не для красоты, это кнопка - нажатие на нее включает или выключает уличное освещение, при этом фонарик меняет свое изображение: светится или нет. Сравните с первым фото.

    После установки редактора - создаем новый проект. При создании выбираются параметры нашего существующего или предполагаемого к покупке дисплея.
    На этой вкладке, ксатати, можно выбрать кириллицу.
    22222.png

    В открывшемся окне все первоначально достаточно понятно. Слева шаблоны элементов, которые прыгают на окно лисплея, если по ним щелкнуть мышью и получают дефолтные названия.

    Но начинать следует не с этого, а со снабжения вашего проекта шрифтами.
    333.png

    Сгенерированнфй фонт появится в окошке слева внизу. Он также будет сохранен в виде файла и его можно будет импортировать вновь.
    4441.jpg

    Добавляем текстовое поле в центр экрана.
    4445.jpg

    Это поле имеет сгенерированное название t0. Следующее будет иметь t1. Схема ясна.

    Изменим некоторые параметры текстового поля, а именно:
    4446.jpg

    Зеленым подсвечиваются параметры, которые можно менять командами UART. Жирный зеленый - меняется сразу по команде. Тонкий - не меняется сразу, надо подать команду на refresh этого поля.

    vscope - это глобальная или локальная видимость поля. Нам нужна глобальная, поскольку именно она может принимать данные извне.
    txt - заменим на эти значения(не обязательно), чтобы было удобнее располагать наш будущий приемник цифр относительно других злемнтов.

    Чтобы изменить состояние нашего текстового поля, по UART ему должна прийти следующая команда:
    t0.txt="12.34"0xff0xff0xff Вот и добивайтесь, чтобы ESP-8266 выгнал в порт именно эту конструкцию.
    0xff0xff0xff - должно завершать любую команду, которая поступает на дисплей.

    Вот кусочек кода, который передаст на Nextion то, что мы отправим ему через MQTT:
    Код (Lua):

    m:on("message", function(conn, topic, data)
        topic = topic..'.txt='..'\"'..data..'\"'..'\255\255\255'
        uart.write(0,topic)
    end)
     
    Здесь topic должен иметь значение t0 для нашего примера, data - то что отразится в элементе t0.

    Наше дальнейшее руководство к действию находится здесь: https://www.itead.cc/wiki/Nextion_Instruction_Set

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

    Для OpenHAB итем, который отправит температуру на Nextion, будет выглядеть так:
    Код (Java):
    Number next01t0 "Температура Дача [%.2f °C]" (Nextion01) { mqtt=">[mosquitto:t0:command:*:default]" }
    Правило, которое будет его обслуживать, принимая информацию от датчика и отправляя ее на Nextion, будет выглядеть так:
    Код (Java):
    rule "Dacha Temperature To Nextion01"
    when
          Item Temperature_D_out01 received update
    then
        sendCommand(next01t0, Temperature_D_out01.state.toString)
    end
    Как это все соединить с ESP8266?
    Находим и нажимаем кнопку Debag и видим такую картину:
    4447.jpg

    Что следует заметить. Nextion по умолчанию работает на скорости 9600. Ее можно изменить.

    Новые прошивки ESP8266 стартуют на скорости 115200. Казалось бы, совсем неплохо подтянуть и Nextion к этой скорости, но делать этого категорически не следует и вот почему.
    Когда стартует ESP8266, он выдает в UART кучу информации. Эта информация, естественно попадает в Nextion. Не признав ее командой, Nextion отвечает в UART на своем наречии: "Не понял".
    Этот ответ получает ESP8266 и отвечает тоже: "И я не понял". Получив это сообщение, Nextion огрызается обратно.
    Короче, система входит в ступор: две железки начинают гавкать друг на друга.
    Вот чтобы этого избежать, они должны стартовать на разных скоростях, а после старта скорость ESP8266 снижается до 9600 следующим образом:
    Код (Javascript):
    uart.setup(0,9600,8,uart.PARITY_NONE,uart.STOPBITS_1,1)
    UPD 15.11.2016. Ещё вариант не допустить пустых споров модулей - запретить дисплею лаяться в ответ командой
    Код (C++):
    bkcmd=0
    Как это сделать при старте, надеюсь, вы легко сообразите сами.
    Здесь пример того, как опытный товарищ работает ESP8266+Nextion:


    Но его код... Это что-то. http://tech.scargill.net/nextion-wifi-touch-display/ Но мы сделаем проще и не хуже :)

    А это наши устройства:





    Вот теперь точно все.
    Дополнительное чтение: https://geektimes.ru/company/flprog/blog/273868/
     
    Последнее редактирование: 27 янв 2020
    tpolimer, Arduino.ru, rff-ei и 3 другим нравится это.
  2. ИгорьК

    ИгорьК Гуру

    2. Кнопка
    Сначала видео.


    Пошагово.
    Создаем новую страницу.
    На первой странице создаем область "Hotspot". Это тоже кнопка, но "бестелесная". Она "висит" над страницей и нажатие на нее приводит к тем результатам, которые запланированы. Запланирован page 1 - переход на страницу 1.
    Добавляем две заранее сохраненные картинки.
    Добавляем Dual-state button.
    Выбираем ее состояние как глобальное и две картинки для положения. Удаляем текст надписи.
    Добавляем код, который прост и понятен.
    Код (C++):
    if(bt0.val==1)
    {
      get "bt0:ON"
    }else
    {
      get "bt0:OFF"
    }
     
    Нажимаем кнопку Debag и наблюдаем за тем, как дисплей выдает в порт информацию.
    Еще больше сюсек-пусек можете посмотреть у этого автора:


    мы же поговорим о сути вещей, которые нужно знать, чобы иногда не впадать в ступор.
    ----------------------------------------------------------
    Nextion имеет рудиментарную систему команд. Она проста как три рубля, но будет недостаточна даже начинащему, поэтому иногда приходится вытворять такие навороты что ухххх...

    Редактор дисплея находится в бета состоянии, поэтому в нем присутствуют баги.

    1. Главный баг, который может поставить в тупик - это обновление версии. Вчера вы сделали что-то, сегодня обновились (а редактор не дает вам возможности отказаться), и нынешняя попытка дебажить выкидывает ворох красных строк, понять в чем дело не возможно.

    А дело в том, что редактор НЕ МОЖЕТ правильно разобраться с кнопками, и придется их переделывать заново. Точно так же, как в прошлой версии - но заново.

    2. Тупой баг, который не устраняют. Вы решили нарисовать линию, пришли туда, где объясняют как это делать. Скопировали код примера:
    Код (Bash):
    line 0, 0, 100, 100, RED
    отправили на дисплей, ... и ничего, мягко говоря, у вас не получилось.

    А все потому, что в документации ПРИМЕРЫ НАПИСАНЫ НЕ В СООТВЕТСТВИИ С ПРАВИЛАМИ, которые установили они сами, а именно, надо так:
    Код (C++):
    line 0,0,100,100,RED
    Команда, и аргументы без пробелов. Так все работает.
    Но, скажите мне, вам придет в голову это, когда вы в первый раз открылди мануал?
    Так вот, 3/4 примеров не работают, если попытаться их скопировать и воспроизвести самостоятиельно.
    Понимаю, что секта ардуинщиков пользуется библиотекой. А ступор свободных землепашцев?

    3. Идиотский баг. Вы видели как создавать кнопку? А теперь попробуйте сделать то же самое в новом проекте, в который не установлен фонт - вам, предположим, нужна только кнопка. Результат будет интересен.

    4. Просто фигня какая-то. На странице загрузки версии 0.37 указано, что в новой версии появилось: 2, Add "click" instruction. И где концы найти этого?
    ----------------------------------------------------------

    У дисплея есть три основные команды на отправку информации в порт, а именно
    • get
    • print
    • printh
    get выдает информацию в виде:
    • 0X70+ASCII code+0xff 0xff 0xff - когда посылаются текстовые данные, или
    • 0X71+4 byte binary data+0xff 0xff 0xff - когда посылаются числовые данные
    Нужны ли нам числовые данные? ИМХО, но очень большое, - нет. Дело в том, что MQTT все равно отправляет стринги, и если мы "выжмем" из дисплея число, то все равно придется его превращать в стринг в МК. Оно нам надо?

    Так вот, подходу "без цифр" помогут следующие вещи:
    print выдает в UART все как есть, без оконечных 0xff 0xff 0xff
    Код (C++):
    print t0.txt
    - выдаст голый текст - значение текстового поля.
    Код (C++):
    print "Uraaaa!"
    - напечатает Uraaaa!

    printh загонит в UART один в один то, что будет стоять в аргументах в hex формате через пробел с маленькой буквы:
    Код (C++):
    printh a0 fe 11
    Собственно, у нас теперь есть все, чтобы понять что же передаст в UART наш код кнопки.
    Код (Lua):
    \112bt0:ON\255\55\255
    -- или
    \112bt0:OFF\255\55\255
     
    Принимаем:
    Код (Lua):
    lt = false -- прием сообщения
    str = ""
    count = 0

    uart.on("data",1, -- работаем с каждым пришедшим байтом
        function(dt) -- dt - это  есть каждый новый байт
        if lt then  -- прием разрешен
            if dt == "\255" then -- сравниваем с 0xff и считаем их до трех
                count = count + 1
                if count == 3 then -- досчитали
                    count = 0 -- сбросили счетчик
                    pub(str) -- публикуем          
                    str = "" -- очистили глобальную
                    lt = false -- конец приема
                end
            else
                str = str..dt -- идет прием - формируем стринг
                -- если что-то идет криво и набралось много буков
                -- убиваем все и начинаем заново
                if #str > 20 then str = ""; count = 0 end
            end
        end

        -- вначале у нас пустой стринг и \112 на входе:
        -- начинаем прием
        if str == "" and dt == "\112" then
            lt = true
        end
    end, 0)
    Отправляем куда надо:
    Код (Lua):
    function pub(pu) -- этим публикуем
        local topic
        local info
        -- делим пришедшее на до и после ":"
        topic, info = string.match(pu, "(%w+):(%w+)")
        -- проверяем на неотсутствие отсутствия
        if topic ~= nil and info ~= nil then
        -- и отправляем в ОпенХаб
            m:publish(mClnt.."/"..topic.."/state",info,0,0)
        end
        collectgarbage()
    end
     
     
    Последнее редактирование: 11 авг 2016
    tpolimer нравится это.
  3. ИгорьК

    ИгорьК Гуру

    3. Отправка данных
    И, наконец, пора отправлять переменные...


    Что делаем здесь?
    Добавляем цифровое поле (n0), вертикальный слайдер с глобальным доступом (h0) установив пределы изменения 0-10, и текствовую переменную (va0).
    Добавляем код
    Код (C++):
    n0.val=h0.val
    в два места:
    • преинициализация страницы 0 - чтобы при открытии совпадали значения цифрового поля и слайдера
    • во вкладку движения слайдера: слайдер двигаем - циферки бегают.
    А во вкладку отпускания слайдера вставляем такой код:
    Код (C++):
    cov h0.val,va0.txt,0 // конвертируем значение слайдера в стринг переменной
    // Отправляем данные в UART
    printh 70 // начало передачи
    print "n0:" // будущий топик
    print va0.txt // будущая дата
    printh ff ff ff // завершение отправки
     
    Все - отправка работает. Это видно по окну дебага.
    Прием по UART и передача на MQTT брокер осуществляется по алгоритму из прошлого поста, поскольку мы подогнали данные под прошлый паттерн.

    Дык... А как же отрицательные и дробные числа?
    На такой вопрос на форуме одного из юзеров программист из Nextion ответил прямо: "Учитесь программировать" и приложил проект, который я для вас переприкладываю.
     

    Вложения:

    • FloatCounter.zip
      Размер файла:
      4,4 КБ
      Просмотров:
      1.575
    Последнее редактирование: 11 авг 2016
    tpolimer нравится это.
  4. NE_XT

    NE_XT Гик

    Конечно разойдутся, первый вопрос - зачем примитивный дисплей с примитивным разрешением ?
    Почему не дешевый планшет с виндой или андроидом, с нормальным дисплеем за 40-50 долларов в отличии от 3,5 Нехтиона за 35 долларов. Нормальное приложение в аппинверторе для андроида или у повелителя теплиц для виндоуса ?
    Фотка как из бани в Суздале, только без дисплейчика и свежевыловленных осетров.

    я просто ваш поклоник и критик.
    Ждем продолжения :)
     
    Последнее редактирование модератором: 11 авг 2016
  5. ИгорьК

    ИгорьК Гуру

    B заключение - мой вариант отправки положительных и отрицательных чисел с плавающей точкой:

     

    Вложения:

    • test5.zip
      Размер файла:
      57,5 КБ
      Просмотров:
      1.206
  6. mishgan

    mishgan Нуб

    Делаю сейчас один проект на nextion enhanced+esp8266. Хотел сделать чтоб числовое поле двигалось вместе с ползунком слайдера. Пробовал так n0.x=h0.val, и так cov n0.x,h0.val,0. В обоих случаях программа заругалась. Может есть какие-то другие возможности?
     
  7. ИгорьК

    ИгорьК Гуру

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

    Как можно решить вопрос перемещения? Только путем, условно, мультипликации: показывать и прятать что-то в зависимости от положения движка слайдера.
     
  8. mishgan

    mishgan Нуб

    Жаль. Тогда другой вопрос. Авот как передать числовой параметр?
    Код (C++):
    printh 70
    print "n0:"
    print n0.val
    printh ff ff ff
    Вот такой код выдает "n0:d". n0.val=100
     
  9. ИгорьК

    ИгорьК Гуру

    Не выдаёт.
     
  10. rff-ei

    rff-ei Гик

    ИгорьК .Затер до дыр эту тему ,потому ,что купил этот дисплей .Решил применить его в своем "хозяйстве" . На мой взгляд этого гениальное изобретение !
    Трудности возникли в мелочах:
    Как и все ,что попадает мне в руки сначала кручу-верчу понять хочу )) Когда мозг уже немного устал ,начинаю искать доп. информацию описание, перевод , видео и т.д.
    В дополнение к твоим коментам:
    Что бы стало еще более понятно для тех кто приобрел
    1. прошивку для этого дисплея (по моему скромному мнению) надо начинать писать не задумываясь о связи с микроконтроллером .Просто пишешь ,что бы нажимались кнопки ,открывались страницы и т.д.
    2.Загрузить ее на дисплей проще с SD карты (копируешь на карту файл с расширением tft , который можно найти, сохранив свое творение и открыв вкладку file/Open build folder/...
    Теперь все что мы видели на компе видно на дисплее
    3 Библиотека выше представленная ,для меня показалась не очень удобная для ардуино,
    нашел другую не помню как и где
     

    Вложения:

    ИгорьК нравится это.
  11. rff-ei

    rff-ei Гик

    В папке библиотеки для ардуино ,не должно быть других библиотек для этого девайса иначе будут ошибки, также библиотека не должна содержать дефис(-) ,его надо заменить на нижний прочерк (_)
     
  12. rff-ei

    rff-ei Гик

    вот мой небольшой пример . Для начала видео

     
    Последнее редактирование: 6 сен 2016
    Mitrandir и ИгорьК нравится это.
  13. rff-ei

    rff-ei Гик

    вот файл для дисплея (в редакторе)
     

    Вложения:

    • ANALOG_READ.zip
      Размер файла:
      3 КБ
      Просмотров:
      1.180
  14. rff-ei

    rff-ei Гик

    вот для ардуино
     

    Вложения:

    • TEXT_NEXTON.zip
      Размер файла:
      854 байт
      Просмотров:
      1.158
  15. rff-ei

    rff-ei Гик

    Да и еще одно, в прошивке для ардуино в строках например таких как if (message == "65 0 3 1 ffff ffff ffff") должно быть ваше значение ,которое выдает дисплей в редакторе ,возможно и нумерация кнопок и т д
     
  16. rff-ei

    rff-ei Гик

    Пока не забыл ! земля у ардуины и дисплея должна быть общая !
     
    ИгорьК нравится это.
  17. ИгорьК

    ИгорьК Гуру

    Благодаря Вашим сообщениям изменил заголовок темы :)
    Не изучал библиотеку для ардуино по понятным причинам, но все равно убежден что и на Ардуино с дисплеем лучше работать без неё, "в лоб" через софтверный сериал.
    Как пример, посмотрите как замечательно работает с дисплеем товарищ DIYMan. В его проекте теплицы есть такой раздел.
    Я, основательно изучив его решение, пошёл слегка иным путем, но его подходы для ардуино стоит знать.
     
    Последнее редактирование: 3 сен 2016
    DIYMan нравится это.
  18. rff-ei

    rff-ei Гик

    Я тоже чую ,что там не нужна библиотека )
     
  19. ИгорьК

    ИгорьК Гуру

    Еще пример (пока заготовка):



    UPD01.12.2016: И файл Nextion впридачу.
     

    Вложения:

    • coco05.zip
      Размер файла:
      771,5 КБ
      Просмотров:
      1.057
    Последнее редактирование: 1 дек 2016
    vedkos, rff-ei и 9xA59kK нравится это.
  20. rff-ei

    rff-ei Гик

     
    vvr и ИгорьК нравится это.