Урок 14. UI Flow. Привет M5 UI Flow

Dimi

Цель урока

Привет! Сегодня мы познакомимся с нашей новой разработкой - M5 UI Flow. Это удивительная среда разработки под M5STACK на языках программирование Blockly и Python. M5 UI Flow - облачная платформа, поэтому нет необходимости в долгой компиляции и загрузки скетча через кабель - теперь достаточно нажать одну кнопку и подождать пару секунд, как скетч будет исполнен на устройстве.

Этот урок научит: подготавливать устройство для работы с M5 UI Flow; написать первую программу на Blockly и загрузить её в устройство без проводов.

Краткая справка

Перечень компонентов для урока

PC;
M5STACK;
кабель USB-C из стандартного набора.

Начнём!

Шаг 1

Посетите раздел Download на нашем сайте и скачайте M5Burner-for-windows (рис. 1).
Кликните здесь для того, чтобы перейти на сайт http://m5stack.com или здесь для того, чтобы скачать сразу версию 0.0.6 http://m5stack.com/download/M5Burner-for-windows-v0.0.6.zip

Рисунок 1. Раздел Download на сайте M5STACK

Шаг 2

Распакуйте в рабочий стол содержимое архива и выполните с правами администратора исполняемый файл M5Burner.exe (рис. 2).

Рисунок 2. Запуск утилиты с правами администратора

Шаг 3

Подключите устройство к компьютеру с помощью стандартного USB-C кабеля (рис. 3).

Рисунок 3. Подключение M5 к PC

Шаг 4

Укажите COM-порт, к которому подключен M5; затем укажите скорость порта 921600; также выберите самую последнюю стабильную версию M5 UI Flow и нажмите Burn (рис. 4).

Рисунок 4. Подготовка, запуск процесса прошивки и его завершение

Шаг 5

Отключите M5 от компьютера (рис. 5).

Рисунок 5. Отключение М5 от PC

Шаг 6

Теперь устройство необходимо перезагрузить. Для этого кратковременно нажмите красную кнопку питания на левой боковой стенке корпуса устройства (рис. 6).

Рисунок 6. Перезагрузка устройства

Шаг 7

Когда устройство издаст звуковой сигнал нажмите и удерживайте третью кнопку (кнопка C) на устройстве, после чего устройство создаст точку доступа и предложит к нему подключиться (рис. 7).

Рисунок 7. Устройство ждёт клиентов

Шаг 8

Подключитесь с помощью компьютера к созданной точке доступа (рис. 8).

Рисунок 8. Подключение к М5 по Wi-Fi

Шаг 9

Откройте современный браузер и перейдите на адрес устройства, затем введите данные Вашей рабочей или домашней Wi-Fi-сети, чтобы M5 получил доступ к Интернет (рис. 9).
Для того, чтобы не ошибиться в наборе адреса кликните по ссылке http://192.168.4.1

Рисунок 9. Подключение М5 к сети Интернет

Шаг 10

После того, как M5 успешно подключится к сети Вы увидите подобную страницу (рис. 10).

Рисунок 10. Wi-Fi соединение успешно установлено ^_^

Шаг 11

После того, как устройство издаст звуковой сигнал нажмите и удерживайте первую кнопку (кнопка A) на устройстве - М5 попробует установить Wi-Fi соединение с Вашей сетью (рис. 11).

Рисунок 11

Шаг 12

После того, как устройство успешно подключится к Интернет на экране появится код доступа (Api key) и QR-код (рис 12).

Рисунок 12

Шаг 13

Вновь откройте браузер и перейдите по ссылке http://flow.m5stack.com, затем введите Api key и нажмите Finish (рис. 13).

Рисунок 13

Шаг 14

Обратите внимание - если указанный на рис. 14 индикатор красного цвета и имеет надпись Offline, то убедитесь в том, что Ваш М5 подключен к Wi-Fi, затем кликните на сам индикатор и через несколько секунд индикатор сменит цвет на зелёный и надпись станет Online.

Рисунок 14

Шаг 15

Сейчас мы попробуем написать нашу первую программу на Blockly и выполнить её на устройстве. Первое: перетащите мышкой элемент Label на виртуальный экран устройства. Второе: перетащите пазл Label из средней колонки и приклейте его к пазлу Setup. Третье: внутри добавленного пазла выберите Label: label_1 и введите текст в поле Show: Hello M5 UI Flow!. Четвёртое: нажмите на стрелку в правом верхнем углу - программа загрузится в устройство.

Рисунок 15. Пишем и загружаем программу в М5

Шаг тестирования и запуска

Обратите внимание на экран Вашего М5 (рис. 16). На этом урок завершён.

Рисунок 16. Ура! Заработало :)

Downloads

M5Burner-for-windows-v0.0.6 (Yandex Disk): https://yadi.sk/d/4dnf2NfdsIAj3Q