DrawBitmap: una funzione per inserire immagini su un Display TFT - Fattelo da Solo

Sono diverse le funzioni che grosso modo tutti i Display TFT condividono, una delle quali è la DrawBitmap che vi permette di inserire un’immagina personale su un display e colorarla secondo le vostre esigenze.

Creare un’immagine

Per i beginner creare un’immagina da zero non è così semplice, per cui posso suggerire di usare un qualsiasi programma di editing immagine, come ad esempio Photoshop (tra i più noti), ma anche GIMP va bene e, tra le altre cose, è anche gratuito e open source. Create un’immagine con uno di questi programmi con la stessa risoluzione del vostro display; nel mio caso ho utilizzato 240×320 pixel. Salvate l’immagine in formato JPEG (.jpg o .jpeg).

Fase preliminare

Scaricate da questo link il file compresso contenente il programma Image2LCD, avviatelo e aprite con il comando “Open” il file che avete precedentemente creato. Impostate i parametri come in foto, poi salvate il file con estensione “.c” nella stessa cartella dove stiamo creando il nostro sketch.

Mi raccomando che la voce Output file type sia su C array, Scan Mode su Horizon Scan e Bits Pixel su monochrome. Si aprirà il Blocco Note per farvi vedere il file creato, ma non temete se vi sembra uno strano linguaggio.

Codice

Apriamo lo sketch su cui caricare il file creato e, dove le diverse definizioni e aver incluso le librerie da scaricare qui, andiamo ad aggiungere il file che abbiamo chiamato, per questo esempio, reshitoze.c. Potete scaricare da questo link lo sketch che stiamo utilizzando.

Muoviamoci sulla scheda che contiene il file che abbiamo creato e aggiungiamo la seguente riga in cima:

#include <avr/pgmspace.h>

Qui vediamo anche il nome della variabile char gImage_reshitoze che ci servirà per inserire l’immagine a display:

Muoviamoci sul VOID LOOP dove fare apparire l’immagine e farle cambiare anche colore. Basta digitale la seguente stringa che contiene la funzione DrawBitmap:

tft.drawBitmap(0, 0, gImage_reshitoze, 240, 320, ILI9341_RED);
delay(500);
tft.drawBitmap(0, 0, gImage_reshitoze, 240, 320, ILI9341_WHITE);
delay(500);
tft.drawBitmap(0, 0, gImage_reshitoze, 240, 320, ILI9341_GREEN);
delay(500);
tft.drawBitmap(0, 0, gImage_reshitoze, 240, 320, ILI9341_ORANGE);
delay(500);
tft.drawBitmap(0, 0, gImage_reshitoze, 240, 320, ILI9341_MAGENTA);
delay(500);
tft.drawBitmap(0, 0, gImage_reshitoze, 240, 320, ILI9341_YELLOW);
delay(500);

I valori 0,0 indicano le coordinate su cui stampare l’immagine a display, 240,320 le dimensioni e ILI9341_RED è il modo in cui la librerie Ili9341 definisce nativamente i colori, quindi basta cambiare RED con WHITE, BLUE, YELLOW o altri per cambiare colore. Per maggiori informazioni, guardate l’articolo pubblicato riguardo il LOLIN Display TFT 2.4″. Il risultato ottenuto sarà questo: