Урок 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
- M5Burner-for-windows-v0.0.6 (Yandex Disk): https://yadi.sk/d/4dnf2NfdsIAj3Q
