UIFlow è una piattaforma di programmazione appositamente progettata per i dispositivi M5Stack. L’IDE di programmazione grafico a blocchi è basato su blockly, linguaggio grafico di programmazione ben conosciuto in campo didattico. UIFlow consente inoltre di programmare qualsiasi oggetto M5Stack in MicroPython, implementazione di Python 3 per microcontrollori e sistemi embedded. MicroPython, come molti di voi sapranno, è un linguaggio di programmazione snello ed efficiente ideale per attività di Coding a scuola e da sempre impiegato in campo scientifico.

UIFlow fornisce le funzionalità necessarie per la realizzazione, in maniera estremamente semplice, progetti con forte interazione con il mondo reale, ideale quindi per chi si avvicina al mondo della prototipazione elettronica, dell’automazione e della programmazione.

L’IDE UIFlow può essere utilizzato on-line oppure localmente scaricandolo dal sito principale. Per prelevarlo collegatevi al sito https://m5stack.com/ e selezionate dal menù principale: software > download:

Nella pagina posizionate il mouse sul pulsante “Download” di UIFlow-Desktop-IDE, apparirà un menù a discesa, selezionate il sistema operativo su cui dovrà essere istallato UIFlow

Una volta prelevato il programma scompattate il file ed eseguite facendo doppio click

All’avvio dell’IDE viene controllato se sono presenti i driver necessari per poter gestire i dispositivi M5StickC.
M5StickC non necessita di installazione driver per i sistemi operativi Windows 10, Mac (High Sierra+), Linux. Per altri sistemi operativi, oppure se il dispositivo non dovesse essere rilevato dai sopracitati SO dovete installare il driver CP210X per il vostro sistema operativo, il driver può essere prelevato sempre dall’area download.

Al termine dell’installazione di UIFlow collegate M5StickC con il cavo USB C al computer.

M5StickC può essere programmato via USB o in modalità WiFi, in questo tutorial procederemo ad una prima programmazione in modalità USB.

Una pressione di 2 secondi sul power button, sulla sinistra di M5SickC provoca l’accensione del dispositivo, non appena compare il logo di UIFlow premete il pulsante grande M5 per accedere al menù di setting. Per spostarsi tra i menù disponibili utilizzare il pulsante sulla destra in alto di M5StickC:

Dal menù Setup potrete scegliere la modalità di programmazione e potrete impostare il WiFi. Per questo tutorial selezionate la modalità USB.

Selezionare la modalità di programmazione:

Selezionare la modalità USB:

Nell’IDE di programmazione dovete selezionare la seriale facendo click sulla parte in basso a sinistra della finestra dove compare la segnalazione COM:

Il click permetterà di aprire la finestra di selezione della COM:

Dal menù a discesa COM selezionare la porta seriale a cui avete collegato l dispositivo:

Per Windows 10 la seriale è identificata da COM seguito da un numero, mentre per sistemi Mac e Linux dalla sigla tty seguito da una serie di numeri e lettere. La modalità di selezione della seriale è la medesima per tutti i sistemi operativi.

Realizziamo il primo programma: Accensione del LED interno

Selezionare “Hardwares” dalla blocks list, selezionare LED e successivamente l’istruzione “LED ON” che dovrete trascinare nell’area di programmazione collegandola al blocco Setup.

Per eseguire il programma sul dispositivo fate click sul pulsante play che trovate in alto a destra della finestra, il LED rosso della scheda si accende.

Realizziamo il secondo programma: Blink del LED interno

Dalla sezione Event selezionare Loop ed collegarlo al Setup, nel Loop inserire la sequenza delle istruzioni: LED ON, Wait 1 S, LED OFF, Wait 1 S, così come indicato nell’immagine che segue. Per eseguire sul dispositivo un click sul pulsante Play:

Interfaccia di programmazione

01. Titolo del progetto
Inserite il nome del vostro progetto in questa area.

02. Blockly/Python
Consente di selezionare la modalità di programmazione Blockly oppure Python

03. Tab menù
Per accedere al forum, alla documentazione, agli esempi, ripetere l’ultima azione eseguita, fare l’upload dei file, eseguire il programma ed accedere alle impostazioni del dispositivo.

04. Anteprima UI
Trascinare testo e immagini sullo schermo del dispositivo virtuale per creare l’interfaccia grafica. Non appena inserite elementi grafici, appariranno nella lista delle istruzioni centrali le funzioni specifiche per manipolare gli oggetti grafici

05. Units
Aggiungere unità hardware che fanno parte del progetto tra quelle standard disponibili su M5Steck e stabilire le porte di connessione.

06. Hide UI
Possibilità di nascondere il dispositivo virtuale per aumentare lo spazio disponibile per la programmazione

07. Menù istruzioni Code Block
Contiene tutti i blocchi necessari per la programmazione. La sezione Hardware contiene le istruzioni che agiscono direttamente sull’elettronica dell’M5StickC. Troverete la sezione Math che include operazioni matematiche e Logic che raccoglie operatori logici e strutture di controllo.

08. Area di Codice
L’area in cui saranno trascinati i blocchi per realizzare il programma

Lista delle istruzioni

01. Event
Funzione Loop e gli eventi legati alla pressione dei pulsanti

02. Hardware
Blocchi dedicati all’elettronica del dispositivo: LED, IMU e gestione alimentazione

03. Units
Ogni volta che si aggiunge un’unità specifica in questa sezione appaiono i blocchi specifici alla sua gestione

04. Math
Blocchi per eseguire calcoli matematici

05. Logic
Blocchi per l’esecuzione di operazioni logiche e controllo di flusso

06. Advanced
Sezione dedicata per i programmatori esperti. Blocchi per il networking, per la gestione dei pin analogici e digitali e molto altro.

Come costruire un programma con Blockly

Setup

Il blocco Setup è essenziale per eseguire qualsiasi programma è il primo blocco che viene eseguito non appena il programma viene caricato sul dispositivo. Il Setup viene eseguito una sola volta.

Loop

Questo blocco esegui in modo continuo per sempre tutte le istruzioni in esso contenute, ciò implica che l’esecuzione del loop può essere interrotta solamente se viene tolta l’alimentazione al dispositivo.

Wait

Il blocco Wait pone in attesa il programma per un tempo specificato dal parametro numerico che può essere impostato dall’utente.

Sequenza di programmazione

Connessione blocchi

Come sicuramente avrete intuito blockly ricorda molto la filosofia di programmazione di altri ambienti di programmazione come ad esempio Scratch o il MakeCode editor di BBC micro:bit. Anche per UIFlow che utilizza blockly, i blocchi si uniscono “magneticamente” insieme, incastrandosi e cambiando colore, nel caso non si abbia un cambiamento colore vuol dire che blocchi non sono uniti.

Alcuni trucchi per chi comincia con UIFlow

• Per duplicare un blocco tasto destro del mouse sul blocco e fare click sulla voce del menù contestuale che appare: duplicate.
• Per cancellare un blocco trascinarlo sulla lista della collezioni delle istruzioni oppure sull’icona del cestino in basso a destra o ancora click tasto destro del mouse e “Delete block”

Nella prossima lezione vedremo come realizzare i primi programmi.

Buon Coding a tutti 🙂