M5Stick – Avengers Magic 8 Ball

Pubblicato il -
Questo articolo potrebbe contenere link di affiliazione, ovvero link a pagine in cui, se viene effettuato un'acquisto, potrebbero generare una commissione a settorezero ma comunque senza incidere sul costo finale dell'oggetto acquistato. E' un modo per non avere pubblicità invasiva (che, se non avete notato, abbiamo rimosso) e nel contempo garantire al sito di continuare ad esistere.

Qui vi parlo di un giochino che ho fatto, molto semplice, e che non sapevo come chiamare. Partiamo, come sempre dall’inizio proprio spiegando il titolo in ogni sua parte anche perchè introduco un sistema di sviluppo di cui qui, su Settorezero.com, non avevo ancora parlato: L’ M5Stack.

Onestamente non me la sento di farvi il super-spiegone™ perchè si tratta di un oggetto oramai talmente comune nel mondo dei Makers che spuntano blog dal nulla solo per parlare di questo dispositivo perchè è facile, è bello, costa relativamente poco, si programma con Arduino IDE e quindi ne parlano tutti fino alla nausea. Faccio quindi un super riassunto focalizzandomi sugli aspetti principali giusto perchè non mi piace parlare di una cosa per la prima volta sul mio blog senza averla introdotta a dovere.

M5Stick is the new “Arduino 2009” of 2020 – cit. del mio amico Giovanni Bruno

M5Stack – La storia

Nel 2015 un ingegnere cinese, Jimmy Lai (da non confondere con l’omonimo imprenditore e giornalista cinese), crea una serie di schede di sviluppo modulari e impilabili (impilabile in inglese si dice stackable da to stack: impilare) per sopperire alla sua necessità di sviluppare con ESP32 e mettere in pratica le sue idee (è tutto spiegato in questo video).

Nel 2017 grazie all’aiuto di un acceleratore hardware (la HAX,  un acceleratore hardware è una società che finanzia le startup) nasce la M5Stack che sviluppa questi prodotti. Nel 2018 ricevono, giustamente, la collaborazione da parte di Espressif (mi risulta difficile pensare che ci sia qualcuno che non lo sappia, ma…: è la ditta che produce gli ESP32 necessari a questo progetto) e.. cominciano a spaccare di brutto nel mondo dei Makers anche (anzi, secondo me: soprattutto) perchè pubblicano UIFlow, che è un ambiente che permette di programmare gli M5Stack sia in forma visuale (praticamente con Blockly) che direttamente in Micropython, permettendo di switchare in tempo reale da uno all’altro sistema: una figata non da poco insomma. Ad ogni modo c’è il supporto per Arduino IDE (basta installare l’add-on per ESP32 e quindi la libreria M5Stack).

Perchè M5Stack si chiama così? A parte l’ovvietà della parola Stack mi sono meravigliato non poco del fatto che tutti parlano di questo coso ma nessuno spiega/sa perchè si chiama così… Per tale motivo ho chiesto direttamente ad M5Stack:

Quindi M=modulare, 5 perchè il primo prodotto realizzato misurava 5x5cm. Ecco. Ora immagino che sta cosa la scriveranno tutti dopo non esserselo mai chiesto.

Stick & Stack

Gli M5Stack sono dispositivi piccoli muniti di un bel guscio di plastica stilosa e, principalmente, hanno un display e un ESP32. Sopra ci sono dei bottoni, hanno una batteria LiPo incorporata e un connettore USB tipo C per ricarica e programmazione, un connettore per una microSD e hanno dei GPIO liberi e uno o 3 connettori Grove a cui la Seeed studio ci ha abituati da anni e per il quale esistono centinaia di sensori già belli e pronti da attaccare, anche non necessariamente prodotti dalla M5Stack. Più si sale di fascia di prezzo, più roba c’è all’interno.

Struttura di un modello M5Stack

Poi ci sono gli M5Stick, che già come può suggerire il nome, sono più piccoli: il display è minuscolo (ma si vede da Dio), non c’è la possibilità di inserire direttamente micro-SD ma ci sono comunque sensori, bottoni, USB-C, batteria, GPIO e un connettore Grove: è una bella roba con cui iniziare spendendo poco.

Successivamente sono nati gli ATOM, che hanno più o meno lo stesso form-factor degli stack ma non hanno un display LCD bensì una matrice di LED RGB che ne abbassa notevolmente il prezzo.

Per questi dispositivi ci sono schede aggiuntive chiamate HAT (terminologia a cui ci ha abituati Raspberry e che sta per Harware Attached on Top) specifici per Stack (che si collegano al di sotto, impilandoli, sfruttando un sistema di magneti) e Stick (che si collegano di lato) che si innestano sulla fila di GPIO liberi e che ci permettono di aggiungere funzionalità.

Io ho deciso di partire con un modello “Stick”, in particolare l’M5Stick C che è quello base della famiglia Stick e che ha le seguenti caratteristiche:

  • display a colori da 0.96 pollici (80×160, controller ST7735S)
  • 2 pulsanti
  • microfono SPM1433
  • LED trasmettitore infrarossi
  • IMU a 6 assi (MPU6886 = giroscopio a 3 assi + accelerometro a 3 assi)
  • Batteria LiPo 95mAh
  • Gestione alimentazione (AXP192)

In particolare ho preso il kit che contiene anche 2 HAT: un sensore ambientale (per rilevare temperatura, umidità, pressione) e un altoparlante, più il cinturino che permette di farsi un orologio-patacca-super-nerd. Trovate questo kit su Amazon a questo link.

Contenuto del kit M5Stick con i 2 HAT Acquista questo Kit su Amazon da un rivenditore autorizzato

 

Esempio di semplice orologio che ho realizzato con l’M5Stick C

Se poi volete spendere ancora di meno (diciamo circa 17 euro) e vi va di aspettare, diciamo un mese e mezzo, su Amazon c’è in vendita il solo M5StickC, sempre con cinturino, scatolina e cavo, senza gli HAT. Se volete spendere meno e aspettare meno c’è il solo M5StickC spedito da Amazon.

Genesi del progetto

Partiamo da cosa è una Magic 8 ball. Si tratta di un giocattolo americano utilizzato per prevedere la fortuna e che ha la forma di una palla da biliardo col numero 8. La sua storia è singolare e se siete curiosi quanto me, vi invito a leggere la sua storia e funzionamento su wikipedia.

In realtà non ho creato questa cosa che illustrerò pensando subito a tale gioco: difatti non lo conoscevo prima di adesso! Pensando ad un sistema random per scegliere chi in casa dovesse fare determinati compiti, avevo scritto un semplice codice che faceva in modo di sfruttare l’accelerometro incluso nel dispositivo: dopo agitazione dell’M5Stick veniva generato un numero random il quale avrebbe fatto in modo di mostrare la foto del membro della famiglia prescelto, associato a quel numero. Insomma, dicevi “chi deve lavare i piatti oggi?”, prendevi l’M5Stick, lo agitavi e tirava fuori la risposta in forma di foto. Semplice insomma e di sicuro impatto rispetto all’utilizzo di bigliettini o dadi.

Solo dopo un po’ mi sono ricordato di aver visto un dispositivo simile nel film Il mistero della casa del tempo (The house with a clock in its walls) in cui il bambino protagonista aveva appunto questa palla da biliardo a cui faceva domande e questa dava delle risposte dopo averlo agitata. Cercando un po’ sono venuto a conoscenza del fatto che fosse un giocattolo che esiste realmente e che si chiama, appunto, Magic 8 Ball. Cercando ulteriormente, esistono un sacco di progetti con Arduino che fanno questa cosa, generando le stesse frasi della palla magica originale, ma io, comunque, non sto generando frasi.

Addolorato poi dalla recente morte di Chadwick Boseman, in quanto aveva la mia età ed è comunque un personaggio che ho apprezzato molto (mi piace molto l’MCU anche se non sono un fissato) ho pensato quindi di replicare il codice che stavo usando per la mia famiglia ma utilizzando personaggi comparsi nei film Marvel sugli Avengers. E’ nato così questo Avengers Magic 8 Ball: un po’ per gioco, un po’ per ricordare Black Panther come memento del fatto che anche i supereroi muoiono e lo fanno lasciando un buon ricordo di sè. Nel giochino, infatti, di tutti i personaggi che indossano la maschera (tipo Ironman, Spiderman, Antman, Misteryo, Starlord ecc) solo per Black Panther ho scelto un’immagine che lo ritrae senza maschera, appunto per ricordarlo.

Il codice

Dato che ho utilizzato Arduino IDE piuttosto che UIFlow, dovete prima di tutto installare l’ESP32 Core for Arduino IDE. Potete seguire le istruzioni che ho già scritto qui. Dopodichè da gestione librerie dovete installare la libreria M5Stack.

Il codice è scaricabile in fondo all’articolo. Prima di programmare dovete chiaramente scegliere la porta seriale e selezionare M5Stick dall’elenco schede.

Spiego brevemente le parti principali.

Viene controllato costantemente l’accelerometro: basta l’escursione di almeno due assi per rilevare l’agitazione:

M5.MPU6886.getAccelData(&nowX,&nowY,&nowZ);
delay(100);
if (abs(nowX-prevX)>0.4) score++;
if (abs(nowY-prevY)>0.4) score++;
if (abs(nowZ-prevZ)>0.4) score++;

Viene computata la differenza, in valore assoluto (funzione ABS) tra il valore attuale di accelerazione sull’asse e quello precedente. Se la differenza è superiore a 0.4 viene aumentata la variabile score di una unità per l’asse in oggetto. Se la variabile score raggiunge almeno il valore 2, viene incrementata un’altra variabile (shakecount) ma solo se l’agitazione precedente rientra nell’arco di un secondo da quella rilevata successivamente, altrimenti tutte le variabili vengono azzerate: questo per evitare agitazioni improvvise momentanee. Se la variabile shakecount raggiunge il valore di 3 allora viene settato il flag shaking che dice al sistema che l’oggetto sta venendo agitato.

A questo punto un generatore di numeri random tira fuori un numero e lo associa ad una immagine da mostrare. Il sistema si mette quindi in pausa per 2 secondi.

L’effetto finale è questo:

Se non siete iscritti al canale youtube di Settorezero, vi invito ad iscrivervi

Creare le immagini

Vorrete sicuramente personalizzare la Magic 8 Ball per ricreare lo stesso giochino utilizzando i membri della vostra famiglia e gli amici, pertanto vi spiego come fare. L’M5Stick non ha a bordo il lettore di MicroSD, presente invece sulla versione Stack, ma ha comunque una sufficiente quantità di memoria ROM su cui caricare le immagini convertite e sfrutteremo quindi questa (ho caricato 25 immagini e sto al 70%).

Prima di tutto dovete realizzare delle immagini in formato 80×160 pixel e salvare in formato JPG o PNG. Io preferisco il PNG che non crea artefatti. Bisogna poi utilizzare il programma LCD Image Converter il cui link è riportato all’ultimo paragrafo (links).

Avviato il programma cliccate su File e selezionate Open. Caricate quindi l’immagine che volete convertire. Una volta caricata l’immagine basta fare File > Convert e scegliere dove salvare il file C generato. Nel file C ci sarà un array di 25600 bytes che contiene tutte le informazioni necessarie per ricreare l’immagine con le funzioni incluse nella libreria M5Stack.

In realtà i parametri di default del programma vanno già bene, ma in caso le successive versioni del programma dovessero cambiare le impostazioni di default dovete ricordarvi che le impostazioni giuste per la libreria M5Stack sono accessibili dal menù Options > Conversion:

  • Preset: Color R5G6B5
  • [Prepare] Main Scan Direction: Top to Bottom
  • [Prepare] Line scan direction: Forward
  • [Image] Block size: 8 bit

Ho incluso gli array in un file a parte e ho quindi creato un array di array per facilitarmi il lavoro dopo: in modo da caricare direttamente l’immagine sfruttando un indice che è quello generato casualmente. Per mostrare l’immagine “dritta”, dato che le ho fatte di lungo ho messo il setRotation a 4, in modo che le foto si vedono di lungo con il tastone M5 sulla parte bassa.

Links

Se questo articolo ti è piaciuto, condividilo su un social:
      
Se l'articolo ti è piaciuto o ti è stato utile, potresti dedicare un minuto a leggere questa pagina, dove ho elencato alcune cose che potrebbero farmi contento? Grazie :)