Создайте приложение Fridgeye с дисплеем Nextion

Приложения и онлайн-сервисы

	Редактор графического интерфейса Nextion
	IDE Arduino
	GIMP - программа обработки изображений GNU

Об этом проекте

Еще в июле этого года несколько студентов-дизайнеров из Германии запустили сатирический Kickstarter по прототипу Fridgeye; красивый датчик света для вашего холодильника. В сочетании с тем фактом, что мы обычно ожидаем появления на Kickstarter нелепых аппаратных проектов, с тем, сколько усилий команда приложила, чтобы они казались реальными, неудивительно, что люди не знали, что думать. Ни для кого не секрет, что я был фанатом этого проекта с самого начала, но не потому, что мне очень хотелось знать, что делает свет в моем холодильнике. Fridgeye - это проект с идеальным масштабом, которым можно заняться с учетом потенциала роста, если вы хотите начать работу в Интернете вещей.

Создайте устройство Fridgeye

Основная часть этого поста будет посвящена запуску приложения Fridgeye с сенсорным дисплеем Nextion, подключенным к Arduino, но прежде чем мы дойдем до этого, нам понадобится реальное устройство, которое может воспринимать свет. Без проблем. Возьмем 5 минут и построим один. Обещаю, это не займет больше секунды. Все, что вам нужно, это Arduino, макет, фоторезистор и резистор 3,3 кОм. Мы подключим его вот так. Пока не беспокойтесь о подключении экрана. Просто сосредоточьтесь на Arduino, резисторе и фоторезисторе.

У меня действительно валялся ProtoShield; поэтому я прикрепил к нему миниатюрную макетную плату, чтобы я мог хранить все в одной красивой упаковке, уложенной щитами, но при этом сохранял свободу макета. Так выглядит мой.

Ладно, я соврал, это заняло всего около 4 минут. Но вы можете использовать оставшуюся минуту, чтобы набросить этот супер простой набросок на свой Arduino и посмотреть последовательный вывод светового датчика из Arduino IDE.

  void setup () {Serial.begin (9600); } недействительный цикл () {int val =analogRead (A0); Serial.println (val); задержка (500); }  

После программирования Arduino откройте Serial Monitor в Инструменты . меню. Убедитесь, что скорость передачи установлена ​​на 9600. Вы должны видеть новое целое число, представляющее уровень освещенности, примерно каждые полсекунды. Идите, найдите минутку и поиграйте с ней. Закройте датчик, включайте и выключайте свет и, возможно, даже попробуйте посветить на него фонариком смартфона. Наблюдайте за изменением ценностей. Вы заметите, что они варьируются от почти 0 в полной темноте до почти 1024 при освещении светом.

Что такое приложение Fridgeye?

Приложение Fridgeye - верный спутник вашего устройства Fridgeye. Прошли те времена, когда устройства выходили из строя. Всем известно, что в сегодняшнем грандиозном мире Интернета вещей у вашего устройства нет шансов, если с ним не будет какого-либо приложения. Это арахисовое масло и кисель, молоко и крупы, горох и морковь.

Приложение довольно простое. Если мы посмотрим на страницу Kickstarter, это буквально просто процент света, который обнаруживает Fridgeye, и кажется, что он всегда равен 0 или 100 процентам.

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

Начало работы с дисплеем Nextion

Для этого проекта я использую сенсорный дисплей Nextion Enhanced 3.5 ". Это полностью резистивный сенсорный экран, предназначенный для выполнения тяжелой работы по графическому управлению, так что даже устройства очень низкого уровня, такие как Arduino, могут общаться с ним через пару последовательные линии. Хотя сам дисплей очень хорош, навигация по документации может быть очень сложной, особенно для новичков, поэтому давайте рассмотрим ее шаг за шагом.

Модель программирования дисплея

Если вы когда-либо программировали Arduino для использования дисплея, вы, вероятно, использовали что-то вроде простой графической библиотеки, которая абстрагировала низкоуровневые команды рисования на поверхности экрана. Хотя эти библиотеки очень хороши, они по-прежнему требуют от вас большого количества нажатий на пиксели, чтобы рисовать объекты на экране. Дисплеи Nextion используют другой подход, который покажется вам очень знакомым, если вы привыкли к шаблонам MVVM или MVC. По сути, внешний вид приложения настраивается полностью заранее и сохраняется на самом экране. Во время выполнения Arduino ссылается на части пользовательского интерфейса, используя предварительно назначенные идентификаторы. Arduino также получает информацию с экрана таким же образом, как события касания. Это означает, что вместо того, чтобы рисовать объекты во время выполнения, Arduino действует только как проводник для представлений и элементов управления. Если это не имеет смысла, просто держись со мной еще немного, пока мы пройдем через это.

Подготовьте просмотр

Поскольку наше приложение Fridgeye настолько простое, для него потребуется всего одна страница. Однако дисплей Nextion может обрабатывать очень сложные приложения с несколькими страницами и переходами. Независимо от того, разрабатываете ли вы простое приложение, подобное нашему, или очень сложное, вы будете использовать редактор графического интерфейса Nextion. Это редактор WYSIWYG для семейства дисплеев Nextion, который поможет нам правильно составить макет. Опять же, документация и начало работы могут быть очень сложными для новичков, но как только вы освоите их, вы сможете быстро разрабатывать сложные макеты.

Прежде чем мы откроем редактор, нам нужно подготовить фоновый актив. Обращаясь к нашему макету изображения выше, мы видим, что единственное, что изменится на нашем дисплее во время выполнения, - это процент обнаруженного света. Логотип, цвет фона и зеленая полоса внизу статичны. Давайте создадим изображение с этими элементами, которые мы можем использовать в качестве фона. Это заняло у меня всего 5 минут в GIMP и выглядит так.

Здесь важно помнить, что размер изображения должен соответствовать вашему экрану. В моем случае я использую экран 3,5 дюйма, который преобразуется в 480 x 320 пикселей. Именно такого размера я сделал свое изображение в GIMP.

Использование редактора Nextion

ПРИМЕЧАНИЕ. Для редактора Nextion требуется .NET Framework, и в настоящее время он поддерживается только в Windows. Я смог без проблем запустить его на виртуальной машине Windows 10 через Parallels на моем Macbook. Я не тестировал его в Wine на Linux.

Следующие шаги проведут вас через создание нашего простого макета приложения в редакторе Nextion. В открытом редакторе Nextion выполните следующие действия.

1. Файл-> Создать . Дайте вашему проекту имя и место на вашем компьютере.

2. Появится диалоговое окно с просьбой выбрать ваше устройство. В моем случае я выбрал Enhanced и номер модели 3,5 дюйма. НЕ НАЖИМАЙТЕ ОК . Переходите к шагу 3.

3. Щелкните ДИСПЛЕЙ вкладка в верхнем левом углу диалогового окна. Выберите направление отображения по горизонтали 90.

4. Теперь вы можете нажать ОК .

5. Нажмите Изображение . из панели инструментов слева. Это добавит элемент p0 к вашему плану.

6. В Изображение / Шрифт панель в левом нижнем углу убедитесь, что у вас есть Изображение вкладка выбрана.

7. Нажмите кнопку + символ.

8. Перейдите к созданному в GIMP изображению, которое служит фоном для нашего приложения, и нажмите Открыть . .

9. На панели атрибутов справа дважды щелкните рис область значений атрибута. Откроется диалоговое окно выбора изображения с фоном нашего приложения.

10. Выберите фон приложения и нажмите ОК . .

11. Нажмите Текст . из Панели инструментов. Будет добавлена ​​текстовая область с именем t0 . в верхнем левом углу нашего дисплея. Обратите внимание на значение id атрибут, так как он понадобится вам позже при программировании Arduino.

12. Перетащите текстовую область в желаемое место под словами «Light Status» и измените ее размер, чтобы она заполнила большую область.

13. Чтобы исправить белый фон, нам нужно установить фон текстовой области как обрезанную версию нашего основного фона. С t0 выбрано изменить статус атрибут на панели атрибутов от сплошного цвета до кадрирования изображения .

14. Дважды щелкните picc значение атрибута для текстовой области t0 . Откроется диалоговое окно выбора изображения. Снова выберите основное фоновое изображение и нажмите ОК . . В результате фон текстовой области становится прозрачным.

15. Измените pco атрибут t0 быть любого цвета шрифта, который вы хотите. Я выбрал собственный цвет:красный:125, зеленый:231, синий:191.

16. В Инструменты выберите в меню пункт Генератор шрифтов .

17. В диалоговом окне Font Creator выберите высоту 96 и выберите любой шрифт, который вы хотите использовать. Моя - Монтсеррат.

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

19. Закройте диалоговое окно Font Creator. Вас спросят, хотите ли вы добавить сгенерированный шрифт. Нажмите Да . . Этот шрифт теперь обозначен как индекс шрифта 0.

20. Добавьте фиктивный текст в t0 чтобы увидеть, как это будет выглядеть, изменив атрибут txt для t0 до 100%. Вы должны щелкнуть мышью за пределами области значений атрибута, чтобы область редактора обновилась.

21. Переставить t0 на ваш вкус.

22. Нажмите Скомпилировать . на верхней панели инструментов.

Если все прошло хорошо, у вас теперь есть скомпилированный файл TFT, готовый к использованию, расположенный в % AppData% \ Nextion Editor \ bianyi . .

Обновите дисплей

Есть несколько способов перенести наш модный новый дизайн на сам дисплей. Если у вас есть конвертер USB-to-TTL, вы можете напрямую подключиться к своему экрану из среды Nextion IDE и напрямую загрузить скомпилированный файл TFT. В противном случае вам нужно будет скопировать скомпилированный файл TFT на карту micro SD, которую можно вставить прямо в слот на задней стороне экрана. SD-карта ДОЛЖНА быть отформатирована в FAT32 и на ней должен быть один файл TFT, иначе вы столкнетесь с ошибками. Редактор Nextion помещает успешно скомпилированные файлы в следующий каталог Windows.

  C:\ Users \ [ваше имя пользователя] \ AppData \ Roaming \ Nextion IDE \ bianyi \ [название проекта] .tft  

Обратите внимание:возможно, вам придется включить просмотр скрытых файлов, поскольку папка AppData помечена как скрытая.

С файлом TFT на SD-карте выполните следующие действия.

• Убедитесь, что дисплей выключен.

• Вставьте SD-карту в дисплей.

• Включите дисплей. На экране будет показано, что он обновляется.

• После завершения обновления выключите дисплей.

• Удалите SD-карту. Не забудьте об этом шаге, так как на экране не будет отображаться изображение, если SD-карта все еще вставлена.

• Снова включите дисплей. Теперь вы должны увидеть наше прекрасное приложение Fridgeye. Не хватает только значения датчика освещенности.

Научите Arduino говорить Nextion

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

Установите библиотеку Nextion

1. Загрузите последнюю версию библиотеки Nextion Arduino.

2. Скопируйте весь ITEADLIB_Arduino_Nextion в папку с библиотеками Arduino. В Windows он будет расположен по адресу:

  C:\ Users \ [ваше_имя_пользователя] \ Documents \ Arduino \ библиотеки  

На Mac он будет расположен по адресу:

  ~ / Documents / Arduino / библиотеки  

3. Если вы используете Arduino Mega, перейдите к шагу 7.

4. Если вы используете Arduino Uno, откройте NexConfig.h файл, расположенный в ITEADLIB_Arduino_Nextion папку, которую вы только что скопировали в папку библиотек Arduino.

5. Закомментируйте следующие строки:

  #define DEBUG_SERIAL_ENABLE #define dbSerial Serial  

6. Измените #define для nexSerial быть Serial вместо Serial2. Это позволяет нам подключать дисплей напрямую к линиям RX и TX на UNO.

  #define nexSerial Serial  

7. Перезапустите IDE Arduino, если она уже была открыта. Это сделает библиотеку доступной через меню.

8. Из файла в меню выберите Создать для создания нового эскиза.

9. Замените код эскиза по умолчанию следующим:

  #include "Nextion.h" long lastUpdate; int SENSOR =A0; NexText t0 =NexText (0, 2, «t0»); void checkSensor () {int val =map (analogRead (SENSOR), 0, 1024, 0, 100); Строка displayText =Строка (значение) + «%»; t0.setText (displayText.c_str ()); } установка void (void) {lastUpdate =millis (); pinMode (ДАТЧИК, ВХОД); nexInit (); } недействительный цикл (недействительный) {nexLoop (NULL); если (millis () - lastUpdate> 100) {checkSensor (); lastUpdate =millis (); }}  

Пошаговое руководство по коду

Если ваш Arduino foo позволяет вам понять этот скетч, вы можете полностью пропустить этот раздел. Ты восхитителен. Если вы новичок в коде Arduino, пусть это вас не пугает. Давайте рассмотрим этот набросок по частям.

  #include "Nextion.h"  

Это указывает на наше намерение использовать библиотеку Nextion. Больше нам ничего делать не нужно, поскольку Arduino IDE знает, где его найти, поскольку мы помещаем его в папку с библиотеками.

  long lastUpdate;  

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

  int SENSOR =A0;  

Здесь мы просто даем контакту A0 на нашей Arduino более удобочитаемое имя, которое мы можем использовать для ссылки на него позже. На самом деле это не имеет значения в этом эскизе, поскольку это единственный вывод ввода / вывода, с которым мы имеем дело, но это хорошая привычка, поскольку она пригодится, когда у вас есть много вещей, подключенных к вашему Arduino.

  NexText t0 =NexText (0, 2, "t0");  

Здесь мы создаем объект в нашем эскизе, который ссылается на текстовый элемент, который мы создали в графическом интерфейсе. Помните, что мы назвали его " t0 ". Первый аргумент - это номер страницы, который в нашем случае равен 0, а второй аргумент - это идентификатор компонента, который, как мы помним ранее, равен 2. Если вы забыли записать его, просто вернитесь в редактор Nextion, нажмите <сильный> t0 элемент и посмотрите на панели атрибутов, чтобы увидеть идентификатор.

  void checkSensor () {int val =map (analogRead (SENSOR), 0, 1024, 0, 100); Строка displayText =Строка (значение) + «%»; t0.setText (displayText.c_str ()); }  

checkSensor () это основа нашего приложения. В первой строке мы фактически выполняем две операции. Сначала мы вызываем analogRead (SENSOR) что дает нам целочисленное значение, представляющее напряжение на выводе A0 (помните, мы назвали его СЕНСОР). В Arduino UNO вызов analogRead вернет значение от 0 до 1024, но мы хотим отобразить это значение в диапазоне от 0 до 100 процентов. Без проблем. В Arduino IDE есть встроенная map () функция, которая позволяет нам указать значение, за которым следуют [от диапазона] и [до диапазона]. Затем мы меняем это значение int на тип String и добавляем знак%. Последний шаг - вызвать setText () в нашем NexText t0 объект, который мы создали ранее.

  установка void (void) {lastUpdate =millis (); pinMode (ДАТЧИК, ВХОД); nexInit (); }  

Это стандартная функция настройки Arduino, которая запускается перед любым другим кодом скетча. Инициализируем lastUpdate прямо сейчас, вызвав millis () функции, настройте наш вывод A0 как вход и инициализируйте библиотеку Nextion.

  недействительный цикл (void) {nexLoop (NULL); если (millis () - lastUpdate> 100) {checkSensor (); lastUpdate =millis (); }}  

В программировании Arduino используется loop () . функция выполняется постоянно, пока Arduino не будет выключен и снова не включен или не перезагружен каким-либо другим способом. Мы должны постоянно обслуживать библиотеку Nextion, вызывая nexLoop () . Параметр NULL просто означает, что в нашем примере мы не слушаем никаких сенсорных событий с экрана. Затем у нас есть очень простая проверка, чтобы увидеть, прошло ли больше 100 миллисекунд с момента нашего последнего показания датчика. В таком случае мы вызываем наш checkSensor () метод и установите lastUpdate прямо сейчас с другим вызовом millis () .

Вот и все. Менее 30 строк кода - это все, что нужно для взаимодействия с нашим дисплеем Nextion с Arduino.

Подключите дисплей

Прежде чем мы фактически подключим дисплей к нашей Arduino, давайте переместим наш код скетча на него из IDE, щелкнув маленькую стрелку вправо на верхней панели или используя сочетание клавиш Ctrl + U.

Экран не может быть подключен во время загрузки, потому что на Arduino UNO те же последовательные линии, которые использует дисплей, необходимы IDE для отправки новых эскизов. Если вместо этого вы используете Arduino Mega, вам не о чем беспокоиться.

Теперь, когда код вставлен в Arduino, давайте подключим дисплей. Не забудьте сначала отключить питание Arduino. См. Схему Фритзинга для получения информации о подключении.

Когда вы подключаете Arduino к резервному копированию, ваше приложение Fridgeye должно с радостью показывать вам текущие показания датчика освещенности.

Заключение

Ух! Мы сделали это. Итак, в этот момент вы можете спросить с оттенком гнева в своем тоне:«Что это за хорошее? Я должен положить все это в свой холодильник, чтобы я даже не смог увидеть экран». Вы очень проницательный ученик, но я никогда не говорил, что что-то из этого было полезным, просто очень весело строить и учиться.

Если это заставит вас почувствовать себя лучше, я призываю вас пойти дальше в этом проекте и выяснить, как вы можете поместить датчик в свой холодильник, а дисплей где-нибудь еще. Есть так много способов достичь этой цели. На ум приходят WiFi, Bluetooth, Zigbee и обычные радиопередатчики. Множество вариантов и множество вещей, которым нужно научиться. Если вы все же попробуете свои силы, напишите мне в Twitter @KevinSidwar или отправьте мне электронное письмо (Кевин на sidwar dot com). Я хотел бы услышать о ваших приключениях в Интернете вещей. До следующего раза, удачного взлома.

Если вам понравился мой пост и вы хотите узнать больше о том, как начать работу с Интернетом вещей, возможно, вас заинтересует Конечно, я сейчас создаю на основе концепции Fridgeye . Если нет, то искренне благодарю вас за то, что вы прочитали до конца. Надеюсь, у тебя отличный день. Ты заслуживаешь это.

Код

Эскиз Arduino для приложения Fridgeye