🤖Have you ever tried Chat.M5Stack.com before asking??😎
    M5Stack Community
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Register
    • Login

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

    Русскоязычный форум
    1
    1
    4.9k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • DimiD
      Dimi
      last edited by

      Цель урока

      Привет! Сегодня мы познакомимся с нашей новой разработкой - 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
      1 Reply Last reply Reply Quote 0
      • First post
        Last post