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



  • Цель урока

    Привет! Сегодня мы познакомимся с нашей новой разработкой - 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