Realizzare un dispositivo che mostra una Photogallery con ESP8266 è possibile

Presentiamo un nuovo progetto realizzato con un NodemCU V3 con ESP8266 che sfrutta la libreria Adafruit-ImageReader ed un Display TFT per realizzare una cornice digitale, tramite la quale vedere le nostre fotografie, caricandole tramite un SD Card. La scelta di un NodemCU V3 è dovuta alla velocità di calcolo del microcontrollore Tensilica Xtensa LX106, più veloce del ATMega di Arduino UNO.

Progetto

L’idea nasce dalla voglia di sfruttare il lettore di card presente su molti display TFT in commercio, sfruttando in questo caso il display con chip ILI9341 in versione da 3,2″. Lo stesso display, ma in formato da 2,4″ lo abbiamo visto in questo articolo e lo abbiamo adoperato anche nella realizzazione di una stazione meteo con WiFi. Per chi non avesse visto i precedenti articoli, il suddetto display, oltre ad utilizzare l’interfaccia SPI, comprende anche un Touch-Screen ed un lettore di SD Card posto sul retro del display.

Sarà necessario saldare dei pin header per i 4 pin presenti sulla parte superiore del display ed utilizzare così le connessioni necessarie per utilizzare il lettore integrato.



Componenti

Per realizzare la nostra cornice digitale avremo bisogno di due componenti necessarie come il Display TFT ILI9341 SPI da 3,2″ 320×240 e un NodeMCU V3 Esp8266. Ad essi aggiungeremo, come componenti accessorie, un connettore Micro-USB per l’alimentazione del progetto, dei cavi jumper per le connessioni, una SD Card (nel nostro caso abbiamo adoperato una vecchia scheda da 16MB, ma una da 1GB o 2GB dovrebbe andare benissimo), due mini-breadboard, viti di silicone e una scocca da realizzare in stampa 3D. Rimane possibile sostituire le breadboard con una scheda forata e tanta pazienza nella saldature.

Lista componenti su Amazon:

Lista componenti su Aliexpress:



Codice

Nel codice per la nostra cornice digitale abbiamo bisogno di usare diverse librerie, tra le quali la Adafruit_GFXAdafruit_ILI9341, Adafruit_SPIFlash, SdFat e  la libreria Adafruit-ImageReader ed in particolare partiremo da uno degli esempi contenuti in quest’ultima libreria. In realtà quasi tutti gli esempi sono simili e cambia solamente il chip del display, ma se volete testarlo allora l’esempio da cui siamo partiti è il ShieldILI9341.

Una volta che avremo raccolto tutte le librerie necessarie, iniziamo ad effettuare i collegamenti necessari per far funzionare lo skecth. Prima di tutto vi ricordo che il Display e il Card Reader integrato adoperano gli stessi pin MOSI, MISO e SCLK, mentre i pin CS sono differenti. Altra cosa da raccomandarvi è l’utilizzo di file BITMAP per questo progetto, meglio se già nella risoluzione del display che adoperiamo.

Per dare corrente al dispositivo useremo un adattatori Micro-USB e collegheremo il suo GND al GND e il Vcc al VIN del NodeMCU V3 e potremo collegarlo ad un qualsiasi caricabatterie da 5V.

Per il dettaglio dei collegamenti tra Display e NodeMCU V3 ecco la tabella:

TFT Dispaly 3.2" SPIESP8266
VCC3.3V
GNDGND
CSD8
RESETRST
DCD4
SDI/MOSID7
SCKD5
LED3.3V
SDD/MISOD6
SD_CSD2
SD_MOSID7
SD_MISOD6
SD_SCKD5

Analizzando lo sketch che potete scaricare QUI, partiamo come sempre dalle librerie utili per rilevare e leggere la SD Card e per la lettura di file all’interno. A questo scopo adoperiamo prima la SdFat e la Adafruit_SPIFlash per settare il Card Reader e per la lettura del file system FAT della SD CARD, poi la Adafruit_ImageReader per “leggere” i file bmp e poterli visualizzare sul display con le librerie Adafruit_GFX e Adafruit_ILI9341 che abbiamo avuto già ampiamente modo di conoscere.


#include <Adafruit_GFX.h>;
#include <Adafruit_ILI9341.h>;
#include <SdFat.h>;
#include <Adafruit_SPIFlash.h>;
#include <Adafruit_ImageReader.h>;

Subito dopo, sia fuori che dentro il VOID SETUP, troviamo diversi oggetti con scopi differenti, come creare l’oggetto per la lettura dei file o l’oggetto SD per la SD Card, come pure troviamo diversi IF/ELSE che hanno scopo di trovare il file system flash SPI o QSPI più adatto per il nostro progetto (per questo esistono 3 diverse variabili). Nel SETUP avviamo semplicemente il display, la SD e il flash, gestendo una serie di errori base.

L’aspetto più significativo è dato della funzione reader.drawBMP() che nel VOID LOOP ci permetterà di leggere il file sulla SD Card e trasmetterlo sul display, alternando ogni 3 secondi una nuova foto. Il caricamento non è immediato e dipende dalla risoluzione della foto, infatti vi consiglio di abbassarne la qualità in modo da non gravare sul sistema.


reader.drawBMP("/01.bmp", tft, 0, 0); // Leggo l'immagine BMP
delay (1000);
img.draw(tft,240,320); // Scrivo l'immagine BMP con risoluzione 240x320
delay(3000);

Conclusioni

Abbiamo realizzato per la nostra cornice digitale una scocca in stampa 3D di colore nero ed abbiamo provveduto a fissare il display con un po’ di colla a caldo. Il modello è ancora da perfezionare ed è provvisorio.

Nel complesso l’idea di poter realizzare da sé una cornice digitale  e usarla come Photo gallery è un’idea semplice e carina, ideale anche come regalo o come oggetto decorativo per la scrivania di lavoro. Sebbene sia un progetto semplice, è un punto di partenza per progetti più complessi che possono sfruttare anche collegamenti esterni per il caricamento dei file.