Урок 15.1. UIFlow - это просто!

[Dimi]

Цель урока

Привет! Сегодня мы наконец-то подробно познакомимся с элементами UIFlow и разберёмся в вещах, которые раньше казались загадочными (рисунок 1).

Рисунок 1

Этот урок научит: разбираться в интерфейсте среды разработки UIFlow и понимать основные принципы работы с блоками.

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

• Назначение: среда разработки для семейства устройств M5STACK на языках Blockly и MicroPython
• Сфера применения: образование
• Интерфейс подключения: Wi-Fi (Интернет)
• Совместимость: семейство устройств M5STACK

Краткий обзор

Для того, чтобы начать необходимо перейти по ссылке http://flow.m5stack.com (подробная процедура подключения приведена в уроке 15). Давайте рассмотрим секцию A на рисунке 2 - это UI-элементы. Вы можете перетаскивать их с помощью мыши на дисплей виртуального устройства, а потом обращаться к ним с помощью ссылок во вкладке UI. Хорошо! Теперь давайте посмотрим на секцию B - это библиотека Units-модулей, их методы и свойства в спрятаны во вкладке под одноимённым названием.

Рисунок 2

Секция C содержит в себе цикл Loop и обработчики событий встроенных кнопок.
Секция D содержит переключатель между языками программирования Blockly или Python. Секция E содержит основное меню. Вы можете получить доступ к форуму с помощью первой кнопки; почитать документация с помощью второй кнопки; с помощью третьей кнопки Вы можете выбрать примеры программ; с помощью четвёртой и пятой кнопок Вы можете отменить или повторить совершённое действие; с помощью шестой кнопки Вы можете открыть менеджер ресурсов (например, чтобы загрузить картинки в память устройства); нажав на седьмую кнопку Вы загрузите во временную память устройства код и запустите его (код после перезагрузки устройства будет удален); с помощью последней кнопки Вы можете открыть продолжение меню. На этом с секцией E закончим. Давайте рассмотрим последнюю секцию F. С помощью первой кнопки (сверху) разместить код Blockly по центру рабочей области; с помощью второй и третьей кнопок Вы можете изменять масштаб; для того, чтобы удалить блок - просто перетащите его на четвертую кнопку (изображение корзины) и блок будет безвозвратно удален.

Начнём!

Blockly (UI Flow)

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

Итак, давайте начнём! Для того, чтобы создать переменную нажмите на вкладку Variables (1) (рисунок 3) в меню блоков, затем нажмите на кнопку Create variable... (2).

Рисунок 3

Теперь появится окно, которое попросит ввести имя новой переменной. Введите имя (1) (рисунок 3.1), затем нажмите ОК (2).

Рисунок 3.1

Отлично! Теперь переменная создана (рисунок 3.2). Теперь с помощью методов set и change Вы можете изменять значения всех созданных переменых.

Рисунок 3.2

Если Вы хотите использовать переменную ты перетащите её с помощью мыши в рабочую область (рисунок 3.3). Вы можете заменить переменную в блоке на другую, созданную ранее, а так же переименовать и удалить.

Рисунок 3.3

Самое "сложное" на этом закончилось. Теперь Вы умеете работать с переменными в языке Blockly.

Теперь давайте перейдём ко следущей вкладке Math. Этой вкладке находятся матиматические методы и константы (рисунок 4).

Рисунок 4

Обратите внимание на первый (сверху) блок - он предназначен для хранения числовых значений (хоть целых, хоть дробных). Второй блок позваляет осуществлять базовые математические операции (сложение, вычитание, умножение и деление). Третий блок содержит в себе математические константы (число Пи, число e и другие). Четвёртый блок позволяет получить остаток от деления. Пятый блок позволяет отпределить тип числа (чётное, нечётное, целое или дробное, положительное или отрицательное и т.п.). Все остальные блоки я описывать не буду, думаю Вам и так понятно что они делают, судя по их названиям.

Теперь перейдем ко вкладке под названием Loops (рисунок 5). Здесь имеется всевозможный набор циклов. Первый (сверху) цикл выполняет код, расположенный внутри заданное количество раз (например 10). Второй цикл выполняет код до тех пор, пока не выполнится какое-либо условие. Третий будет перебирать список и помещать i-й элемент в переменную i. Четвёртый походит на классический цикл for из языка C. Пятый блок позволяет выйти из цикла принудительно.

Рисунок 5

Переходим к следующей вкладке Logic. Не трудно догадаться, что в данной вкладке содержатся элементы связанные с логическими операциями (рисунок 6). Первый блок (сверху) - условие без исключения. Второй - условие с исключением. Третий константа с True или False. Четвёртый - условия (<, <=, >, >= и другие). Пятый - отрицание (NOT), подобно ! в языке C. Шестой - несуществующее значение NULL. Седьмой - логические операторы. Восьмой блок сравнивает условие и возвращает соответсвующее значение из блока if true или if false.

Рисунок 6

Давайте посмотрим на вкладку Graphic (рисунок 7). В этой вкладке есть набор методов для того, чтобы выводит текст и простейшие математические фигуры на дисплей устройства.

Рисунок 7

Если Вы хотите быстро нарисовать смайлик на своем устройстве, то Вам отлично поможет вкладка Emoji (рисунок 8).

Рисунок 8

В будущем, я надеюсь, во вкладке Timer (рисунок 9) появятся дополнительные функции для работы со временем, а пока Вы можете использовать блок задержки (время, в течении которого устройство ничего не делает).

Рисунок 9

Будет сложно разбираться в коде, если он не будет состоять из функций. Функции можно создавать во вкладке Functions (рисунок 10).

Рисунок 10

Первый (сверху) блок позволяет создать функцию с именем dosomething, которая ничего не возвращает. Второй блок позволяет создать функцию, которая может возвращать значение или переменную. Если Вы хотите добавить аргументы функции, то необходимо нажать на кнопку с изображением шестерёнки, перетащить из левого окна в правое блок input name и написать имя аргумента (например: x, y) (рисунок 10.1).

Рисунок 10.1

Третий блок при выполнении условия возвращает привязанное к нему значение из самой функции.

Так, с функциями разобрались. Давайте перейдём ко вкладке Text (рисунок 11). Если Вам нужна строковая переменная, то используйте первый блок (сверху). Если Вы хотите перевести все буквы в верхний или нижний регистр, то используйте второй блок. Если Вам необходимо получить букву под определённым порядковым номером, то используйте третий блок. С помощью четвёртого блока можно посчитать количество вхождений первого аргумента в строке. Пятый блок позволяет проверить является ли строка пустой. Узнать длину строки можно с помощью шестого блока. Если необходимо вывести строку на экран, то используйте седьмой блок. С помощью восьмого блока можно заменить подстроку в строке на новую строку. С помощью девятого блока Вы можете переписать строку наоборот. С помощью десятого блока Вы можете убрать пробелы.

Рисунок 11

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

Давайте посмотрим на вкладку Lists (рисунок 12). Как известно есть такой "тип данных" в языке Python.

Рисунок 12

С помощью первого блока (сверху) можно посчитать количество элементов в списке. С помощью второго блока можно узнать - является ли список пустым. С помощью третьего блока Вы можете найти номер элемента встречаемого в списке. С помощью четвёртого блока Вы можете создать пустой список. С помощью пятого блока Вы можете создать список с неограниченным количеством элементов добавленных вручную (рисунок 12.1).

Рисунок 12.1

С помощью шестого блока Вы можете получить/удалить элемент под конкретным номером. С помощью седьмого блока Вы можете получить подсписок в заданных границах из списка. С помощью восьмого блока Вы можете создать список из одинаковых элементов произвольной длины. С помощью девятого блока Вы можете изменить порядок списка на обратный. С помощью десятого блока Вы можете установить значение необходимого элемента списка. С помощью одиннадцатого блока Вы можете создать список из строки или строку из списка согласно заданного разделителя. На этом с данной вкладкой на сегодня всё.

Давайте перейдём к очень интересной и последней на сегодня вкладке Remote.
С помощью этой вкладки Вы получаете доступ к Вашему устройству из любой точки земного шара, где есть Интернет. Для этого достаточно перетащить в код Вашей программы первый (сверху) блок, после загрузки кода в устройство - на экране отобразится QR-код (рисунок 13.1), если его отсканировать с помощью мобильного телефона или планшета, то откроется Веб-страница с удалёнными элементами управления (блоки от второго до последнего) (рисунок 13.2).

Рисунок 13

Рисунок 13.1

Рисунок 13.2

При обращении с Веб-странцы к определённым элементам - будут запускаться соответствующие функции-обработчики.

C & C++ (Arduino IDE)

Пример ещё не написан ^_^

Downloads

Увы, тут сегодня ничего нет :)