Инструкция по Wemos D1 mini: управление с мобильного телефона

Введение

Привет друзья, меня зовут Алексей, и я решил написать небольшой курс статей, по использованию платы Arduino Nano и адресной ленты, на основе светодиодов ws2812b. На сегодня это уже восьмая статья. На данный момент мы придерживаемся изначальной идеи, за исключением маленького нюанса, - мы уже перестали использовать плату Arduino Nano. И на замену пришла Wemos D1 mini, но это практически ничего не меняет, только увеличивает наши возможности. В прошлой статье мы занимались подключением Wemos, настраивали и писали программу. Так что логичнее всего прочитать статьи, предшествующие этой.

Перед тем, как начать что-либо делать, хочу дать небольшое уточнение, которое я забыл сделать в прошлой статье. Дело в том, что Wemos, ну а если говорить точнее ESP8266, потребляет достаточно большой ток, так что я бы рекомендовал изначально использовать эту плату в связке с блоком питания. Кстати, хочу напомнить, что не будет никаких проблем, если при включенном в розетку блоке питания, подключить плату к компьютеру, посредством USB провода.

Сегодня мы организуем управление цветом светодиодной ленты с помощью смартфона. Причем совершенно не важно, на какой именно операционной системе работает Ваш телефон: на Android или IOS. Думаю, это будет достаточно интересно и актуально. И в любом случае данная статья является продолжением предыдущей, там мы занимались настройкой Wemos и улаживали нюансы, если не читали, обязательно ПРОЧИТАЙТЕ ;) Тем более, что, не прочитав прошлой статьи, высока вероятность того, что у Вас ничего не получится.

Донастройка IDE Arduino

Теперь создадим новый проект в IDE Arduino. И нам необходимо скачать библиотеку. Библиотека для связи с сервисом Blynk. Так что нажимаем Скетч -> Подключить библиотеку -> Управлять библиотеками.

В поиске появившегося окна вбиваем – «Blynk». И устанавливаем одноимённую библиотеку.

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

Давайте приступим к написанию скетча. Для начала добавляем необходимые библиотеки. Их всего две: первая служит для использования внутреннего Wi-Fi микроконтроллера, а вторая - для связи с сервисом Blynk. А также сразу я записал еще несколько строк кода, но о них мы поговорим далее.

В 4, 6 и 7 строках указаны следующие данные: идентификационный ключ, название Wi-Fi сети и пароль от Wi-Fi сети. На данный момент мы не будем указывать ключ, так как мы его просто не знаем. Но имя и пароль указать нужно, конечно же, вы указываете свои данные. В девятой строке начинается функция setup(). Тут мы передаем указанные данные Blynk объекту, и библиотека уже сама выполнит подключение. В 14 строке начинается функция loop(), тут в каждой итерации цикла мы запускаем Blynk объект методом run(). Думаю, данный код достаточно простой и особых пояснений не требует.

Теперь давайте подключим Wemos к компьютеру посредством USB-кабеля и загрузим данный скетч на МК. Кстати, процесс компиляции и загрузки на ESP8266 занимает гораздо больше времени, чем на Arduino Nano, но думаю, что результат того стоит. В общем после того, как мы увидим надпись «Загрузка завершена», заходим на свой маршрутизатор и смотрим, появилось ли новое подключенное устройство. Тут уже интерфейс у всех будет разный, в зависимости от маршрутизатора. У меня это выглядит следующим образом:

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

Хочу заострить Ваше внимание, что мы только что, написав буквально пару строк, подключились к домашней сети. И, по сути, если домашняя сеть подключена к интернету (а только так мы получим доступ для управления), Вы уже можете управлять устройством у себя на столе с любой точки мира. Это очень впечатляет.

 

Настройка Blynk на смартфоне

Хоть статья, по сути, целиком и полностью посвящена Blynk, говорить об этом мы начали с вами только сейчас. Можно было бы, конечно, и раньше, в самом начале, но именно сейчас самое время. Сейчас я вам расскажу, что же это такое.

Но для начала давайте разберемся, каким именно образом происходит управление по сети интернет. Это позволит нам понять, для чего нужен Blynk. Чтобы управлять через интернет чем-либо, нам необходимо отправлять пакеты управления. Эти пакеты должны иметь определенный стандарт, чтобы хотя бы сетевые устройства понимали, кому и какой пакет доставить. Данный стандарт называется протокол передачи данных. Допустим, мы с вами будем использовать TCP/IP, просто для примера, лично я довольно часто его использую. Отправить пакет по определенному протоколу достаточно просто, для этого есть специальные программы, они бесплатные и их много разных. Получить пакет можно таким же путем. Также мы можем написать свою программу, на любом языке программирования это не сложно, благодаря специализированным библиотекам, чтобы отправить или получить данные по TCP/IP, нужно написать всего пару строк кода. При этом можно даже не иметь представления, как устроен протокол. Так вот, если отправлять данные и получать их так легко, в чем же проблема? Проблема в том, что нужно точно знать, куда конкретно необходимо отправить пакет. Для этого получатель (далее по тексту - Сервер) должен иметь белый IP или доменное имя. То есть какой-то постоянный адрес, который не будет меняться и будет доступен всем из сети интернет. Интернет-провайдеры, как правило, не предоставляют такую возможность. Конечно же можно подключить белый IP адрес за дополнительную плату, но это не всегда возможно и, наконец, не всегда нужно. И даже если мы решили получить белый адрес, то возможно у нас будет несколько устройств в нескольких местах. Что делать тогда? Получать адрес для всех? Хотя, если мы находимся в рамках открытой локальной сети, то проблем не возникнет. А что, если это не так? Для этого придумали архитектуру Сервер-клиент. Данная архитектура используется практически везде. Тут смысл такой: и отправляющее пакет устройство, и получающее не имеют какого-то белого и постоянного адреса, они просто подключены к сети с выходом в интернет. Но зато есть сервер, один единственный с внешним адресом. Клиенты общаются с сервером и передают ему инструкции, что и кому они хотели бы передать или получить. А сервер, принимая все эти данные, является связующим звеном. Ну и, собственно, главный вопрос: готовы ли мы для домашней самоделки организовывать целый сервер? Даже пускай это будет микрокомпьютер, типа из семейства Raspberry Pi, данный вариант подходит далеко не каждому. Ну и напоследок хочу уточнить: все описанное в данном абзаце, было в общих чертах, на деле все немного сложнее.

Теперь о том, что такое Blynk и для чего он нам нужен. Как я уже говорил ранее, Blynk – это сервис, который можно разделить на 3 части:

- сервер,

- библиотеки связи,

- интерфейс управления и мониторинга.

Для чего нужен сервер мы уже говорили, эта часть находится целиком на стороне сервиса и все возможные проблемы с адресацией там уже решены. Библиотеки связи, в рамках данной статьи, мы уже подключили, они работают на устройстве и выходят на связь с сервером Blynk без нашей помощи – это сильно облегчает дело. Интерфейс управления и мониторинга – представляет из себя мобильное приложение, из этого приложение мы можем отправлять и получать пакеты с нашего устройства, на котором стоят библиотеки связи, по средствам сервера Blynk. Получается, что сервис Blynk взял на себя самое сложное и скучное, предоставив нам работать с самым нужным для нас и интересным. Нужно сказать, что интерфейс Blynk работает исключительно на мобильных устройствах, есть конечно же способы воспользоваться сервисом с компьютера, но об этом мы говорить не будем, там все немного сложнее. Но дело в том, что на мобильные устройства писать красивые и правильно работающие программы немного сложнее, чем под ПК, так что и тут Blynk решил за нас просто кучу проблем.

Итак, сервер Blynk существует без нашего участия, библиотеки связи мы уже подключили, остается настроить интерфейс. Именно этим мы с вами сейчас и займемся. Сам я являюсь пользователем Андроида, но я проверял - на IOS тоже завезли Blynk, следовательно, нам необходимо скачать приложение.

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

Тут нам необходимо создать новый проект. Нажимаем на плюсик (+), и вводим название проекта, также выбираем МК с которым мы будем работать, не смотря на то, что в списке есть Wemos, я выбираю ESP8266, так как я уже понимаю суть происходящего и работать пока буду только с виртуальными портами. Вы же можете выбрать название своей платы, в этом тоже есть плюсы. А также нужно выбрать цветовую тему приложения, я привык пользоваться темной темой. Ну и напоследок подтверждаем создание проекта.

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

Нажимаем на первую – это настройки проекта. Тут все настройки в принципе понятны. Нас с вами интересует токен проекта, то есть секретный ключ. Он необходим, что бы вашим устройством могли управлять только вы и никто другой. Есть два варианта получить данный ключ: отправить на почту и скопировать в буфер памяти. Я обычно копирую и отправляю на компьютер уже самостоятельно, на тот самый, где мы пишем скетч для устройства.

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

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

Данные элементы даются не просто так, а покупаются за местную валюту, под названием «энергия». Изначально у вас имеется 2000 на энергетическом балансе. Это не очень много, но тем не менее достаточно, чтобы управлять своей системой. Конечно же, баланс возможно пополнить, для этого есть кнопка «Добавить»(Add). Стоит энергия небольшие деньги, особенно если сразу покупать много. Данные средства идут на поддержку проекта, так как проект открытый и бесплатный для использования. Пользоваться данной услугой или нет, решать только Вам, лично я еще не разу не покупал энергию. И своего читателя тоже не призываю, это дело сугубо каждого.

Теперь вернемся к выбору графических контролов. Нас интересует элемент под названием zeRGBa, дальше по тексту я буду называть этот элемент «зеброй». По сути, это обычный RGB контрол для выбора цвета, просто выполненный в виде зебры. Давайте добавим его на рабочую область проекта, для этого достаточно просто кликнуть по зебре и элемент появится на рабочей области.

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

Отлично, готово. Теперь настроим графический элемент. Для этого достаточно короткого клика по нему, и мы попадаем в настройки контрола. Настроек, кстати, не так уж и много.

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

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

Я выбрал виртуальный пин V0 и подтвердил свой выбор. Теперь, где было написано PIN, написано V0.

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

И осталась еще одна настройка – SEND ON RELEASE. Тут речь идет о том, что значения цвета будут отправляться только после полного изменения и выбора цвета (то есть нажали, выбрали, отпустили, значение отправилось) или же прямо во время изменения цвета (то есть цвет на адресной ленте будет меняться в процессе выбора, отпускать не нужно). Конечно же, второй вариант более эффектный и поэтому выберем его, для этого переведем ползунок в противоположную сторону. И тут станет доступна еще одна настройка - это интервал задержки, между отправлением пакетов с данными. Я выставил минимальный, думаю, понятно почему. Кстати, это аж сто миллисекунд, что достаточно большая задержка, но стоит учитывать, что и сервера Blynk не резиновые, да и пакет может идти по очень длинному маршруту и тогда в огромной скорости отправки изменений не будет смысла. Так что значение в сто миллисекунд не так уж и велико.

На этом все, выходим из настройки, контрол полностью настроен и нажимаем последнюю из кнопок в шапке приложения - кнопку запуска программы (треугольник - play). На этом наше приложение готово управлять МК. Теперь необходимо дописать скетч, чтобы принимать эти команды и правильно ими распорядиться. Так что выходим из настроек и запускаем приложение кнопкой треугольной формы. И вот мы уже видим вполне рабочую программу, с одной единственной функцией – выбор цвета. Кстати, теперь, если закрыть приложение и открыть вновь, программа будет по-прежнему открыта на рабочем приложении.

Финальная программа

Как я говорил ранее, у Blynk есть три составляющих: библиотеки связи, интерфейс и сервера. Связь организованна, интерфейс настроен, сервера работают и без нашего вмешательства. Осталось организовать логику работы программы, чтобы МК, получая данные, мог правильно их использовать. В рамках данной статьи мы уже начали писать программу и не будем бросать ее недописанной. Сейчас я покажу, как выглядит уже ее финальная версия, а потом все объясню.

#define LED_COUNT 5

#define LED_PIN D5

 

#include "Adafruit_NeoPixel.h"

#include <ESP8266WiFi.h>

#include <BlynkSimpleEsp8266.h>

 

char auth[] = "4_Wpe-jyEdZdNHsATohKnY4dQJmKOyPhRkJkOdU";

char ssid[] = "Keenetic-2.4";

char pass[] = "password";

 

Adafruit_NeoPixel strip = Adafruit_NeoPixel(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);

int red;

int green;

int blue;

 

BLYNK_WRITE(V0)

{

  red = param[0].asInt();

  green = param[1].asInt();

  blue = param[2].asInt();

 

  for (int i = 0; i < LED_COUNT; i++)

  {

    strip.setPixelColor(i, strip.Color(red, green, blue)); // Красный цвет.

  }

  strip.show();

}

 

void setup()

{

  strip.begin();

  Blynk.begin(auth, ssid, pass);

}

 

void loop()

{

  Blynk.run();

}

 

 

 

Как я и обещал, проговорим по коду буквально все.

1-2 строка. Задаю количество пикселей в адресной ленте и номер физического вывода, который будет отправлять команды управления на адресную ленту. Это уже ни раз было использовано, не буду заострять внимание.

4-6 строка. Вызываю необходимые библиотеки.

8-10 строка. Данные, необходимые для подключения к Wi-Fi сети и инициализации на серверах Blynk.

12 строка. Создаю объект для управления адресной лентой.

13-15 строка. Создаю три глобальных переменных, чтобы хранить текущее значение цвета ленты.

 17-28 строка. И тут нам с вами нужно немного остановиться и разобраться, что же происходит. Во-первых, я думаю, читателя насторожила сама конструкция: это что-то вроде похожее на функцию, но не указан тип возвращаемого значения, а также тип получаемого параметра. И читатель будет прав, но, к сожалению, чтобы объяснить, как так произошло и откуда такая конструкция появилась, уйдет очень много времени и заниматься я этим не стану. Давайте договоримся следующим образом: функции, которые мы писали ранее, будем называть пользовательскими, мы их сами описываем и вызываем. А то, что находится между 17 и 28 строкой, давайте назовем системной функцией, для которой действуют немного другие правила. И если мы посмотрим дальше по коду, то не найдем, откуда данная функция вызывается, - это потому что платформа в купе с библиотеками связи сами вызывают ее тогда, когда нужно. А мы с вами лишь опишем действия, которые должны выполняться. Обратите внимание на то, что параметр, который принимает функция, называется V0, как тот самый виртуальный пин, который мы указали в приложении. А если вы не забыли, данный порт отправлял массив из трех значений, составляющих значение цвета. И вот, как раз ниже, в теле функции, строка 19-21, мы получаем из некого параметра функции, являющегося массивом, значение цвета. Причем видно, что параметр был получен как набор байт и не имеет типизации, что решается с помощью команды asInt(), где мы явно указываем программе тип данных. А вот с 23 по 27 строку начинается уже знакомое для нас действия: в цикле заполняем цветовые значения пикселей во внутренний массив объекта управления strip, и выводим эти значения на саму адресную ленту.  

30-34 строка. Можно сказать, тут идет последняя отмашка. Запускаем в работу объект управления лентой, объект связи с Wi-Fi сетью и серверами Blynk.

36-39 строка. Функция loop() тут выполняет лишь одну операцию. По сути, команда Blynk.run() запрашивает данные, предназначенные МК с сервера и отправляет данные, которые должны дойти с МК до приложения. Нет никакой надобности запускать эту команду так часто, но дело в том, что у нас программа простая и функция loop() совершенно пустует. В ином случае синхронизация данных происходила бы гораздо реже, хотя то, что есть сейчас, не скажется негативно на результате, поэтому оставляем.

Теперь остается запрограммировать МК нашей новой программой и испытать работоспособность программы.

 

Результат

Мы настроили приложение на телефоне, связали его с МК, через сервера Blynk, написали исполнительную программу, а также запрограммировали наш МК. И я не говорю уже о выполненной нами ранее аппаратной части (все, что касается подключения). И теперь мы готовы увидеть результат. Не буду томить и описывать это словами, просто смотрим видео.

Конечно же, моя камера не смогла передать полную цветовую палитру, но тем не менее, смысл полностью понятен. Меняем цвет на палитре, меняется цвет на светодиодной ленте. Тут стоит обратить внимание на то, что телефон имел доступ в интернет не по средствам домашней Wi-Fi сети, а по средствам мобильного подключения 4G. Следовательно, МК и телефон не находились в одной сети, а это значит, что с таким же успехом я бы мог управлять своей лентой с другого конца света, и это очень здорово, а главное, совершенно бесплатно. Также вы могли заметить, что при изменении цвета, изменения происходили не плавно, а небольшими рывками, это как раз из-за 100 млс задержки, между отправкой пакетов.

 

Заключение

Вот и подошел к завершению мой маленький курс. Несмотря на то, что я объяснял самые простые и начальные вещи, я сам неплохо уложил и систематизировал знания в голове. Не зря говорят: «Хочешь чему-то хорошо научиться, - научи другого». Я надеюсь, что данные статьи будут для вас, моих читателей, полезны. И хочу поблагодарить, за возможность публиковать данный материал, интернет-магазин giant4.

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

В общем я желаю Вам развиваться, учиться и быть востребованными специалистами, а также успешных и интересных проектов.