22.09.2024 06:44
OlegSivchenko 5 2900 Источник

Привет, Хабр! Этот текст возник в результате бесед с моими коллегами из издательства «БХВ», в котором я продолжаю плодотворно работать. Наряду с компьютерными и детскими книгами наша компания проектирует и выпускает наборы для хобби‑электроники, мобильных роботов, а также авторские (непереводные) книги по языку Scratch. Открыв последнюю ссылку, вы убедитесь, что Scratch — это уже не игрушки (в чём мы полностью согласны с уважаемой компанией Sportmaster, в блоге которой вышел пост). Но добавим, что наряду со Scratch существует аналогичная среда визуального программирования mBlock, практически не рассмотренная на Хабре. Это инструментарий для работы с Arduino, прекрасно показавший себя в наших разработках. Под катом вашему вниманию предлагается разбор программируемого девайса, который пока не планируется в серию, но позволяет оценить достоинства Scratch и mBlock, порадовать ваших детей и питомцев и просто с интересом провести ближайшие выходные. Статья является изложением идей и инженерных изысканий кандидата технических наук, уважаемого Игоря Владимировича Шишигина.

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

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

Платформы для визуального программирования

Платформа визуального программирования на Scratch позволяет воплощать игровые и обучающие проекты со статическими и динамическими объектами, взаимодействующими друг с другом. Язык Scratch был специально разработан для обучения программированию детей и подростков и сразу получил большую популярность благодаря своей простоте и доступности. Программы на Scratch (называемые Script, а по‑русски — скриптами или сценариями) состоят из графических блоков, на которых написано их функциональное назначение. Скрипты выполняются внутри среды разработки.

С появлением в 2008 году контроллера Arduino на базе среды Scratch появились приложения, с помощью которых можно не только разрабатывать интерактивные программы, мультфильмы и видео, но и взаимодействовать с контроллером Arduino, который подключается к компьютеру через последовательный порт с помощью кабеля USB. Появление таких приложений можно считать революционным событием, поскольку отныне юный программист мог видеть результаты своей работы не только на экране монитора, но управлять электронными устройствами, подключенными к плате Arduino и получать данные измерений от подключенных к Arduino датчиков. Появилась возможность включать светотодиоды, генерировать звук, вращать колесами, получать данные измерений температуры, влажности, давления, расстояния, движения и много др.

Для взаимодействия ПК с платой Arduino на плату загружается специальная прошивка, которая принимает, «понимает» и интерпретирует сигналы, получаемые через кабель USB от среды Scratch. Такой режим работы называется интерактивным.

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

Рис. 1
Рис. 1

Наряду с контроллером Arduino современные платформы разработки на базе Scratch поддерживают и другие контроллеры (ESP32, Raspberry Pi, BBC micro:bit и др). Но в этой статье мы остановимся на платах, совместимых с Arduino (Arduino Uno/Nano, mCore, Lavin, Romeo, SPBot), из‑за их высокой популярности. Работа с другими контроллерами в Scratch по существу мало отличается, и вы сможете без труда самостоятельно научиться работать с ними.

Подробный анализ различных графических платформ сделан на Хабре в статье «Визуальное программирование для детей. Выбираем платформу». Описание некоторых из них можно найти в прилагаемом списке литературы в конце статьи или в руководствах пользователя на сайтах разработчиков.

Несмотря на то, что принцип разработки приложений для всех платформ примерно одинаков и основан на идеологии создания сценариев в стиле Scratch с помощью программных блоков, имеются различия и интересные особенности. Эти особенности важно знать при выборе платформы программирования.

Большинство специалистов, которые разрабатывают скетчи (программы) для Arduino на языках С или Python с помощью популярной интегрированной среды разработки Arduino IDE, относятся к графическому программированию с использованием Scratch исключительно как к средству обучения для начинающих. Между тем эти платформы позволяют создавать проекты, которые сделать с помощью Arduino IDE крайне затруднительно. Например, управление персонажем на экране монитора, создание интерактивных игр или обучающих видеороликов.

Таблица 1. Особенности различных сред визуального программирования

 

 

S4A

Snap4Arduino

mBlock3/5

ArduBlock 3.0

Mind+

 

 

Ссылка

 

Ссылка

Ссылка

Ссылка

Ссылка

1

Возможность работы с персонажами и графикой на экране

Да

Да

Да

Нет

да

2

Интерактивный режим работы

Да

Да

Да

–

Ограничен

3

Пошаговое выполнение программы

Да

Да

–

–

 

4

Возможность написания собственных блоков

–

Да

Да

–

Да

5

Использование протоколов HTTP для удаленного управления через браузер

Да

Да

–

–

–

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

Для создания сценария понадобится всего несколько блоков и знания об использовании HTTP‑протокола для управления сценарием через браузер.

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

Прежде чем приступить к описанию процесса создания «видеосистемы удалённого кормления» расскажем, как применяется HTTP‑протокол в среде разработки Snap4Arduino.

Snap4Arduino и HTTP-протокол

Snap4Arduino поставляется со встроенным крошечным HTTP‑сервером. Это означает, что вы можете управлять своим приложением Snap4Arduino с любого компьютера, мобильного телефона, планшета или любого другого сетевого устройства в той же сети. В следующих разделах слово IP относится к IP ‑адресу ПК, на котором запущен Snap4Arduino. IP‑адрес вашего ПК можно увидеть в окне диалога HTTP server, которое открывается при включении опции HTTP server. В нашем случае IP адрес — 192.168.0.105.

HTTP‑протокол работает только в версии Desktop. Для того, чтобы его использовать, необходимо включить опцию HTTP‑сервер. Для этого выберите опции «Шестерёнка»| HTTP server.

Рис. 2
Рис. 2
Рис. 3
Рис. 3

Таблица 2. Командная строка для взаимодействия по протоколу HTTP

Задача

Описание командной строки в браузере

Передача сообщений из браузера в Snap4Arduino

http://IP:42001/broadcast=+MESSAGE

где IP — это IP‑адрес вашего ПК во внутренней сети (например, 192.168.0.105), broadcast — команда для передачи сообщений. Символ «+» перед сообщением означает, что оно является публичным и может быть передано по сети. Остальные сообщения считаются личными и недоступны из сети.

Обновление через браузер значения переменной в скрипте Snap4Arduino

http://IP/vars-update= VARIABLE-NAME=VARIABLE-VALUE

где IP — это IP‑адрес вашего ПК во внутренней сети (например, 192.168.0.105),
VARIABLE-NAME — имя переменной, которое должна начинаться с символа + (например, +myVar),
VARIABLE-VALUE — значение переменой.

Эта строка присвоит глобальной переменной VARIABLE‑NAME значение VARIABLE‑VALUE.

Чтение в браузере значения переменной из скрипта Snap4Arduino

http://IP :42001/send-var=VARIABLE-NAME

где IP — это IP‑адрес вашего ПК во внутренней сети (например, 192.168.0.105),
VARIABLE-NAME — имя переменной, которое должно начинаться с символа + или ‑, чтобы быть доступным из сети (например, +myVar)

Чтение в браузере значений всех переменных

http://IP :42001/send-vars

где IP — это IP‑адрес вашего ПК во внутренней сети (в нашем случае это 192.168.0.105),

send-vars — команда для чтения переменных

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

Чтение в браузере сообщений передаваемых в скрипте Snap4Arduino

http://IP :42001/send-messages

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

Видеотрансляция сцены Snap4Arduino в реальном времени

Сцену Snap4Arduino вместе с персонажами можно отобразить в браузере в режиме реального времени. Для этого необходимо:

1. Включить HTTP‑сервер. Для этого выберите опцию «Шестерёнка» | HTTP‑server.

2. Включить опцию режим передачи изображения сцены по протоколу HTTP. Для этого выберите опцию «Шестерёнка» | Public Stage.

3. Введите в браузере адрес
http://IP:42 001/stage
где IP — это IP‑адрес вашего ПК во внутренней сети (в нашем случае это 192.168.0.105).

Изображение сцены Snap4Arduino в реальном времени

Для того чтобы сделать «фотографию» Сцены Snap4Arduino вместе с персонажами, в браузере необходимо ввести адрес:

http://IP:42001/stageimg

POST. Обновление нескольких переменных Snap4Arduino из HTML-формы

Вы можете обновить одновременно несколько глобальных переменных в проекте с помощью HTML‑формы, отправленной через POST‑запрос.

<form action="http://IP:42001" method="post">

Используя теги <INPUT> и <TEXTAREA>, вы можете отправлять все типы входных данных в Snap!, за исключением булевых. Их атрибут name должен содержать имя переменной, которую вы хотите обновить.

Обратите внимание, что Snap4Arduino ожидает, что все запросы будут в кодировке UTF-8. Чтобы убедиться, что ваш запрос пройдет правильно, особенно при работе со специальными символами, вы всегда можете использовать:

<form action="http://IP:42001" method="post" accept-charset="utf-8">

Создаём систему удалённого видеонаблюдения и управления при помощи Snap4Arduino

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

В качестве «механизма кормления» используем готовые решения автоматических кормушек для котов. На видео ниже подробно показано, как изготовить механическую конструкцию подачи корма в миску, а также собрать и запрограммировать блок управления. «Мозгом» системы управления является контроллер Arduino Uno/Nano, поступление корма в миску обеспечивает серводвигатель, а время подачи корма — модуль времени. Загрузка скетча на плату Arduino осуществляется через кабель USB с помощью среды разработки Arduino IDE.

Мы решили усовершенствовать управление такой кормушкой, а для этого использовать платформу Snap4Arduino и ее возможности по удалённому взаимодействию с браузером по протоколу HTTP (описанные выше). Это позволит:

  1. Усовершенствовать и модернизировать предлагаемый сценарий управления кормушкой даже для людей, далёких от программирования. Программирование на Scratch доступно уже с 4 класса школы.

  2. Осуществлять видеонаблюдение за миской вашего любимца.

  3. Удаленно насыпать сухой корм в миску.

  4. Фиксировать количество подходов кота к миске, чтобы оценить его аппетит).

  5. Визуально оценивать, не похудел ли ваш питомец.

Блок-схема интерактивной видеокормушки для кота

На рисунке ниже представлена блок‑схема подключения кормушки к Сети с указанием задействованных физических устройств (очертания рамок), исполняющихся на них программ (внутри рамок) и соединяющих их протоколов связи (пунктирные линии между рамками). Такая схема поможет вам заранее — ещё до того, как непосредственно приступить к реализации проекта — спланировать разработку кода и создание схемы соединений.

Рис. 4
Рис. 4

Что нам потребуется

Для управления кормушкой нам понадобятся блоки и компоненты, описанные в следующей таблице.

Таблица 3. Элементы для сборки кормушки и управления ею

Схема подключения

В качестве платы управления мы использовали многофункциональный контроллер SPBot (рис. 5), на которой уже установлены фоторезистор, зуммер, удобный разъем для подключения питания. В этом случае потребуется купить только серводвигатель (например, SG90 или MG90S). Если у вас нет этой платы, то можно воспользоваться и «стандартной» Arduino Uno (рис. 6).

Рис. 5
Рис. 5
Рис. 6
Рис. 6

Написание сценария

Прежде всего разработаем алгоритм удалённого кормления котика.

  1. Открываем на смартфоне (ноутбуке, ПК) браузер и посылаем сообщение, которое включает видеокамеру и отображает видео на Сцене приложения.

    http://IP:42001/broadcast=+video_ON

  2. Посылаем сообщение, которое начинает трансляцию сцены Snap4Arduino в окне браузера.

    http://IP:42001/stage

  3. Видим на экране смарфона миску (пустую или полную), а если повезет, то и самого котика. А также количество подходов кота к пустой миске.

  4. Мы принимаем решение «подсыпать ему корм или нет». Если «да», то посылаем через браузер на смартфоне сообщение

    http://IP:42001/broadcast=+feed

    В этом случае звучит сигнал зуммера, дверца открывается и корм высыпается в миску в течении 3 секунд. Затем дверца закрывается.

  5. Вы видите, как довольный котик подбегает к миске и с благодарностью ест корм

  6. Для того чтобы прекратить трансляцию, следует послать сообщение

    http://IP:42001/broadcast=+video_OFF

  7. Фоторезистор, который устанавливается неподалеку от миски, фиксирует количество подходов котика к ней.

Рис. 7
Рис. 7

Сценарий состоит из 4 групп блоков, взаимодействие между которыми осуществляется с помощью механизма широковещательной передачи сообщений (broadcast) в Snap4Arduino (рис. 8).

Рис. 8
Рис. 8

Сообщения в Snap4Arduino можно передавать двумя способами:

  • с помощью блока «разослать»

  • в командной строке браузера с использованием протокола HTTP (см. п. 1.2)

Для отладки сценария удобно добавить блоки, показанные на рисунке 9 ниже. С помощью этих блоков вы будете имитировать отправку сообщения через браузер.

Рис. 9
Рис. 9

Проект можно скачать по ссылке.

Включаем видеокамеру (#1)

Для включение видеокамеры и передачи видеоизображения на сцену надо отправить сообщение «+video_ON».

Для этого нажмите клавишу <1> или введите в командной строке браузера адрес http://IP:42001/stage,где IP — это IP-адрес вашего ПК во внутренней сети (в нашем случае это 192.168.0.105) — см. п.1.2.

На Сцене появится изображение с видеокамеры.

Рис. 10
Рис. 10

Выключаем видеокамеру (#2)

Для того чтобы выключить камеру, передайте сообщение «+video_OFF».

Рис. 11
Рис. 11

Насыпаем корм на блюдце (#3)

Для того, чтобы корм начал поступать из емкости в блюдце, надо с помощью серводвигателя открыть заслонку.

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

После того, как заслонка закроется, будет разослано сообщение «+feed», которое «запускает в работу» 4 группу блоков.

Рис. 12
Рис. 12

Определяем «коэффициент голодного кота» (#4)

Для того чтобы определить, как часто ваш любимец подходит к миске, предназначен четвёртый блок сценария. Он начинает функционировать, когда получает сообщение «N_feed».

Для фиксации факта подхода котика к миске используем датчик освещенности. Если освещенность резко изменится (L1-L2>100), то переменная L3, которая хранит количество подходов, увеличится на 1. При каждой новой засыпке корма в блюдце переменная L3 обнуляется.

Рис. 13
Рис. 13

Подключение через Интернет

Мы создали сценарий, который позволяет подключаться к видеокамере и управлять кормушкой в пределах вашей домашней (или офисной) сети Wi‑Fi. Такой проект интересен, но имеет скорее учебное, нежели практическое значение, поскольку кот и вы должны находится в пределах действия вашей сети Wi‑Fi.

Для того чтобы реализовать удаленное управление через Интернет из любой точки земного шара, потребуется обеспечить дополнительные условия:

  • ваша сеть Wi‑Fi должна иметь выход в Интернет;

  • внешний IP‑адрес роутера для выхода в Интернет должен быть статическим (этим параметром управляет провайдер);

  • на роутере, через который осуществляется выход в Интернет, нужно выполнить операцию, называемую «проброс портов»;

В качестве примера покажем этапы настройки роутера tp‑link с внешним IP‑адресом 176.197.XXX.XX и внутренним IP‑адресом 192.168.0.1:

В адресной строке браузера вводим внутренний адрес роутера: 192.168.0.1, попадаем в окно авторизации и вводим логин и пароль администратора (по умолчанию admin/admin);

Рис. 14
Рис. 14

В меню Переадресация экран выбираем пункт Виртуальные серверы и нажимаем в правой части окна на кнопку Добавить:

Рис. 15
Рис. 15

1. В открывшемся окне ввода параметров заносим параметры нового виртуального сервера:

  • Порт сервиса (выбирается произвольно, но больше 8000).

  • IP-адрес (в нашем примере 192.168.0.105).

  • Внутренний порт — 42001.

  • Протокол — TCP.

  • Состояние — включено.

Рис. 16
Рис. 16

Нажмите кнопку Сохранить.

Созданный сервер появится в списке виртуальных серверов.

Рис. 17
Рис. 17

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

Например, при передаче сообщения +MESSAGE вместо строки

http://192.168.0.105:42001/broadcast=+MESSAGE

следует указывать строку

http://176.197.XXX.XX:42001/broadcast=+MESSAGE

где 176.197.XXX.XX — ваш статический адрес.

Управление через Интернет

Мы можем управлять кормушкой, вводя строки в адресной строке браузера, описанные в п. 1.3.4.

http://IP:42001/broadcast=+video_ON

включить видеокамеру и передать изображение на Сцену Snap4Arduino

http://IP:42001/stage

транслировать в браузере видеоизображение

http://IP:42001/broadcast=+feed

открыть люк для загрузки корма

http://IP:42001/broadcast=+video_OFF

выключить видеокамеру

где IP — это IP-адрес вашего ПК. Либо во внутренней сети (например, 192.168.0.105), либо во внешней (например, 176.197.XXX.XX).

Согласитесь, вводить длинные строки для управления неудобно. Поэтому мы написали код для простой HTML-страницы, задача которой — открывать ссылки.

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

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Feeder</title>
 </head>
 
 <body>
 
<a href="http://192.168.0.109:42001/stage" target="iframe_a">Показать сцену</a>&nbsp;|&nbsp; 
<a href="http://192.168.0.109:42001/broadcast=+feed" target="iframe_b">Добавить корм в миску</a><br><br>
<a href="http://192.168.0.109:42001/broadcast=+video_ON" target="iframe_b">Включить видео</a>&nbsp;|&nbsp; 
<a href="http://192.168.0.109:42001/broadcast=+video_OFF" target="iframe_b">Выключить видео</a><br> 
<br><hr>
<iframe src="demo_iframe.htm" name="iframe_a"width="900" height="700"></iframe><br>
<iframe src="demo_iframe.htm" name="iframe_b"</iframe>
 
 </body>
</html>

Результаты работы приложения на рисунке.

Рис. 18
Рис. 18

Заключение

В заключение хотелось бы отметить:

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

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

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

  4. Для выполнения экспериментов с Arduino Uno/nano нет необходимости использовать именно эти платы. На рынке имеется и другие контроллеры на базе ATMega328, на который можно загружать скетчи Arduino Uno. Преимуществом таких контроллеров является наличие интегрированных датчиков, драйверов двигателей и др.

Интересно узнать мнение разработчиков о трудозатратах в случае реализации подобного проекта с помощью среды разработки Arduino IDE (Platform I/O и др.).

На почитать

  1. Snap Reference Manual 8.0 (PDF)

  2. Голиков Д. В. Scratch и Arduino. 18 игровых проектов для юных программистов микроконтроллеров, 2-е издание.

Комментарии (5)


  1. randomsimplenumber
    22.09.2024 07:17
    #27325454
    +4

    мнение разработчиков о трудозатратах в случае реализации подобного проекта с помощью среды разработки Arduino IDE (Platform I/O и др.)

    Самое сложное - разработка архитектуры и алгоритма работы. Для этого не нужно никаких IDE. А закодировать готовый алгоритм - нет особой разницы, привычное лучше непривычного. Но у исходного кода в виде букв есть фатальное преимущество: git log/diff/bisect/patch. Если я что-то поменял и что-то сломалось - найти как я это сделал достаточно просто. Как выглядит diff в визуальном программировании? Можно найти в интернетах кусок кода и утащить в свой проект. Как утащить картинку с блоками?

    Визуальное программирование просто добавляет кучу механической работы.


    1. ramirum
      22.09.2024 07:17
      #27336224

      Это же образовательный проект в чистом виде. А в таких случаях все зависит от возраста и git просто не нужен.Типичный проект для "Интернета вещей", пятый класс.


  1. Zara6502
    22.09.2024 07:17
    #27332812

    а где фото готового проекта?


  1. scar169
    22.09.2024 07:17
    #27336016
    +2

    Спасибо! Мы в 169 школе Санкт-Петербурга уже давно внедряем программирование на визуальных Scratch подобных языках в работу кружков. Сейчас микроконтроллеры уже программируются на уровне 3 класса. Основные программы mBlock3/5, Snap4arduino. Реально хорошо получается. За проект спасибо, используем в работе.


  1. ramirum
    22.09.2024 07:17
    #27336250
    +1

    Действительно, можно попробовать реализовать на Arduino Uno в школе, в кружке "Интернет вещей". Программирование - Arduino IDE или mBlock3 если нужно визуально.