UIFlow | Aprendiendo Arduino

UIFlow es una plataforma Web de programación usando Blockly y Python

Web: http://flow.m5stack.com/

UIFlow: https://m5stack.com/pages/uiflow

Foro UIFlow: http://forum.m5stack.com/category/5/uiflow

UIFlow Doc: https://m5stack.github.io/UIFlow_doc/en/

Tutorial: https://docs.m5stack.com/#/en/uiflow/uiflow_home_page

Manual de UIFlow: http://flow.m5stack.com/download/M5GO_User_Manual_en.pdf

Vídeos:

Quick Start UIFlow:

UIFlow-Desktop-IDE: https://m5stack.com/pages/download (UIFlow en local sin acceso a Internet)

Cargar Firmware UIFlow

Lo primero es cargar el firmware de UIFlow en M5Stack para poder programarlo con UIFlow, para ello debemos usar el programa M5Burner: https://docs.m5stack.com/#/en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow que se puede descargar desde https://m5stack.com/pages/download

En caso que no nos reconozca el puerto serie M5Burner, habrá que instalar el driver como hemos hablado anteriormente desde: https://m5stack.com/pages/download

El Driver Oficial para la interfaz serie CP210X se puede descargar en: https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers

A la hora de cargar el firmware, seleccionar la versión de UIFlow que se va a usar en http://flow.m5stack.com/ y en caso que no aparezca resaltada, descargarla.

Luego seleccionar el puerto serie y el modelo de M5Stack que vamos a usar y por último configurar la wifi a la que se va a conectar para programar on-line.

Y pulsar el botón burn, si da fallo probar a reducir el baudrate por defecto o borrar la flash con el botón erase.

En caso que no se haya configurado la wifi o no esté disponible la wifi, el M5Stack se configura como un AP Hotspot donde abre una red wifi a la que me puedo conectar y entrar a la web para configurar la wifi.

Modo Programación en Red

El modo de programación de red es un modo de acoplamiento entre el dispositivo M5Stack y la plataforma de programación web UIFlow. La pantalla mostrará el estado actual de la conexión de red del dispositivo. Cuando el indicador está en verde, significa que puede recibir un programa push en cualquier momento. Después de la primera configuración exitosa de la red WiFi, el dispositivo se reiniciará automáticamente e ingresará al modo de programación de red.

Una vez que el M5Stack tiene cargado el firmware y se inicia, se conectará a la wifi configurada y nos mostrará en pantalla el API KEY:

Una vez conectado y con el icono en verde, ya puedo entrar en http://flow.m5stack.com/ y emparejar el dispositivo M5 para programarlo. Para ello debo indicar el APIKEY y el dispositivo.

Una vez hecho esto ya se puede comenzar a programar con UIFlow. Lo siguiente le mostrará un programa simple para manejar M5StickC.

Para encender el indicador LED:

Arrastre el LED para iluminar el bloque de programa.
Empalme con el programa de inicialización de configuración.
Haga clic en el botón Ejecutar en la esquina superior derecha

Modo Programación USB

UIFlow Desktop IDE es una versión offline del programador UIFlow que no requiere conexión de red y puede ser una alternativa en caso de no tener acceso a Internet o una conexión lenta . Haga clic en la versión correspondiente de UIFlow-Desktop-IDE para descargar de acuerdo con su sistema operativo en https://m5stack.com/pages/download

Una vez instalado, detectará automáticamente si su ordenador tiene un controlador USB (CP210X), haga clic en Instalar y siga las instrucciones para finalizar la instalación. M5StickC no requiere un controlador CP210X, por lo que los usuarios pueden elegir instalar u omitir.

Cuando se inicie la aplicación, ya podemos conectar nuestro dispositivo M5

Para poder programar como USB, debemos entrar en modo USB, para ello: Haga clic en el botón de encendido en el lado izquierdo del dispositivo para reiniciar. Seleccione rápidamente Configuración después de ingresar al menú, ingrese a la página de configuración y seleccione el modo USB.

Y por último seleccionar el puerto serie y el dispositivo en el programa para empezar a usarlo.

Más información:

Entorno de Programación

Independientemente si usamos la versión online o la versión offline, la programación es igual.

El entorno de programación se compone de 5 partes principales:

Coding Area: Arrastre los bloques de código de la lista de bloques al área de codificación y conéctelos para crear un programa
Barra de menús: La barra de menú contiene la mayoría de las funciones importantes de la interfaz, como (Ejemplo,Deshacer y rehacer, cargar, ejecutar código, descargar código, guardar código, etc.
Blockly/Python: Todo el código que creamos en bloques se puede convertir a Python presionando este interruptor
Diseñador de UI: Arrastre los elementos de la interfaz de usuario (título, etiqueta, etc.) hacia la pantalla de para diseñar un avatar o interfaz de interfaz de usuario.
Unidades: Las unidades son sensores y actuadores que se pueden conectar y aquí es donde los configuramos.

Funciones de los botones:

Programación con Blockly:

Programación Básica

Para la programación vamos a usar estas tres documentaciones oficiales:

Tutorial: https://docs.m5stack.com/#/en/uiflow/uiflow_home_page
Manual de operación educación: http://m5edu.com/m5doc/
Uso de UIFlow: https://m5stack.github.io/UIFlow_doc/en/

Setup: Cuando abra UIFlow, encontrará que ya hay un bloque de Configuración al principio. Cada programa debe tener un bloque de configuración. El programa se ejecuta desde el bloque de Configuración y solo se ejecutará una vez. Puedes considerarlo como un bloque de inicialización del programa

Loop: Loop es un bloque de bucle infinito. Cuando se ejecuta, ejecutará el programa contenido en el bloque indefinidamente hasta que ocurra algún evento que lo detenga, por ejemplo un reset o apagado. No tiene que existir en el programa, pero para que el programa ejecute funciones cíclicas debe usarse.

Los ficheros generados tienen la extensión .m5f, aquí puedes descargar un ejemplo de test: https://raw.githubusercontent.com/jecrespo/M5StickC-UIFlow/master/M5/Test.m5f

Primero hagamos un “Hola Mundo” con M5Stack. Que muestre por pantalla Hola mundo y haga blink el led.

Puedes descargar el código en: https://raw.githubusercontent.com/jecrespo/M5StickC-UIFlow/master/M5/Hola%20Mundo.m5f

Otros ejemplos:

¿Cuál es la diferencia entre ejecutar y descargar un programa? El botón de reproducción coloca nuestro código en la memoria volátil de su M5stack. Lo que significa que se perderá una vez que apague el M5stack. Sin embargo, la función de descarga almacenará su programa en la memoria flash de su dispositivo que no se borrará al reiniciar. Cada vez que enciende el M5stack después de descargar un programa, ese programa se ejecutará automáticamente, y también puede seleccionarlo de la lista de aplicaciones a la que se accede presionando el botón central al iniciar.

Ejecutar un programa: Una vez que haya terminado de programar, presione el botón de reproducción en la esquina superior derecha para ejecutar su código.

Descargar un programa: almacenará su programa en la memoria flash de su dispositivo que no se borrará al reiniciar.

La aplicación grabada se podrá seleccionar desde el menú de aplicaciones del dispositivo M5 y se ejecutará en el inicio cada vez que se resetee. Para volver al entorno de programación y cambiar el programa, si tengo una aplicacion en modo permanente, reiniciar y pulsar el botón mientras arranca para entrar en modo programación cloud o USB.

Unidades y HATs

La unidad o HAT es un módulo hardware de expansión de funciones proporcionado por el sistema M5. Estas deben conectarse al módulo M5 antes de programarlas.

Los módulos y faces de M5Stack ya aparecen automáticamente al seleccionar el HW Core.

Las unidades deben se añadidas en UIFlow para que aparezcan sus bloques de programación. Haga clic en la opción Units debajo del Simulador de UI, marque el módulo de Unidad que desea agregar y haga clic en Aceptar. Algunas unidades tienen configuraciones iniciales de parámetros.

Programación de Units: https://docs.m5stack.com/#/en/uiflow/Units

Programación de los módulos: https://docs.m5stack.com/#/en/uiflow/Modules

Programación de las faces: https://docs.m5stack.com/#/en/uiflow/FACES

Programación Hardware

Ver: https://docs.m5stack.com/#/en/uiflow/hardware

Boton: https://m5stack.github.io/UIFlow_doc/en/en/Start_programming/Button.html

Speaker:

IMU:

Power:

Ejemplo power en M5StickC: https://github.com/jecrespo/M5StickC-UIFlow/blob/master/M5/M5StickC_Power_Control.m5f

Display UI

Elementos del display: https://docs.m5stack.com/#/en/uiflow/ui_simulator?id=ui-elements

Display UI: https://m5stack.github.io/UIFlow_doc/en/en/Display/UI.html

Emoji: https://docs.m5stack.com/#/en/uiflow/ui_simulator?id=emoji

Pantalla: https://docs.m5stack.com/#/en/uiflow/ui_simulator?id=screen

Imágenes:

Gráficos:

Ejemplo que muestra un logo: https://raw.githubusercontent.com/jecrespo/M5StickC-UIFlow/master/M5/Logo%20M5Stack.m5f

Lógica

If:

Loop Condicional:

Iteración de datos:

Variables

Variables:

Operaciones básicas: https://docs.m5stack.com/#/en/uiflow/data_structure?id=basic-operation

Función map (diccionario en Python): https://docs.m5stack.com/#/en/uiflow/data_structure?id=introducing-a-map

Listas o arrays: https://m5stack.github.io/UIFlow_doc/en/en/Operation/List.html

JSON: https://docs.m5stack.com/#/en/uiflow/data_structure?id=introducing-json

Strings/Text: https://docs.m5stack.com/#/en/uiflow/data_structure?id=introducing-text

Funciones

Las funciones son una herramienta que nos ayuda a envolver nuestro código en un paquete ordenado al que podemos asignarle un nombre, y luego llamarlo en cualquier parte de nuestro programa y ejecutará el código que contiene. Las funciones pueden ayudar a mantener nuestro código ordenado y conciso y evitar repetir las mismas cosas una y otra vez.

Funciones:

Control Remoto

Control remoto de los dispositivos M5 mediante una web:

Página de control: https://docs.m5stack.com/#/en/uiflow/advanced?id=control-page

Dashboard: https://docs.m5stack.com/#/en/uiflow/advanced?id=dashboard

Lo carga en http://flow-remote.m5stack.com/

Bloques Personalizados

Es posible crear bloques personalizados.

Para crear un nuevo bloque, debemos proporcionar:

nombre del grupo: el nombre del grupo en el que se coloca el bloque personalizado
color del bloque: color de apariencia del bloque
Etiqueta de bloque: solo se permiten letras, números, guiones bajos
Tipo de bloque: defina el tipo de bloque como Valor (valor) o Ejecutar (ejecutar)
Número de bloques: posibilidad de agregar múltiples bloques al mismo tiempo y guardarlos en un archivo .m5b al mismo tiempo

Block Maker: http://block-maker.m5stack.com/

Haga clic en la opción Agregar en Parámetro, agregue una propiedad del programa, ingrese el nombre que se muestra en el bloque y seleccione el tipo de propiedad. Ingrese el código contenido en el bloque personalizado en el cuadro de opción Código de bloque.

Program API: https://github.com/m5stack/UIFlow-Code/wiki

Una vez programado descargar el .m5b