Connettere un display RGB a Raspberry PI Pico / Sgart.it

Questo tutorial mostra come collegare Rasberry PI Pico a un display Pico Display usando MicroPython.

Il display in questione è un IPS LCD da 1,14" con risoluzione di 240 x 135 pixel e profondità colore di 16bit.
Sulla stessa scheda, oltre al display, si possono trovare quattro pulsanti (siglati A, B, X e Y) disposti sui due lati corti e un led RGB, tutti gestibili via codice.
Sempre via codice è anche possibile regolare la luminosità del display.

Pico Display

Saldatura PIN

La prima cosa da fare sul Rasberry PI Pico è saldare le due file di pin.

Ci si può aiutare infilandoli in una breadboard

Inizio saldatura

poi si procede a saldare i pin su entrambi i lati. Il risultato dovrebbe essere come questo

fine saldatura

Infine va unito al display

Display e Pico uniti

facendo attenzione al verso

Attenzione al verso di montaggio

Firmware

Per funzionare necessita di un firmware con già comprese le librerie per il display che si può scaricare da pimoroni.

Per l'installazione del firmware vedi Raspberry Pi Pico: programmazione con Visual Studio Code

Programmazione

Una volta installato il firmware si possono provare alcuni esempi pronti disponibili su pimoroni-pico / micropython / examples.

Sul display è possibile disegnare, punti, rettangoli, cerchi e testo, oltre a impostare il colore di sfondo.

Le fasi per visualizzare un contenuto o creare un animazione sono:

inizializza il diplay e crea il buffer
pulisci il buffer
disegna quello che serve sul buffer
aggiorna il display con il contenuto del buffer
se è un animazione ritorna al punto 2

Il buffer è un area di memoria delle dimensioni del display ed è l'equivalente del Canvas in JavaScript

Se si tratta di un animazione tra il punto 2 e 3 va inserito un ulteriore passaggio, ovvero il calcolo per l'aggiornamento della nuova posizione degli elementi sullo schermo.

Inizializza il display

Per inizializzare la libreria picodisplay che gestisce il display, si usa l'istruzione display.init(buffer)

# importo la libreria che gestisce la comunicazione con il display e gli assegno un alias
import picodisplay as display

# ricavo le dimensioni del display
width = display.get_width()
height = display.get_height()

# creo il buffer in memoria
buffer = bytearray(width * height * 2)

# inizializzo la libreria
display.init(buffer)

Il buffer' è l'area di memoria, espressa in byte, che rappresenta l'area del display.
Corrisponde alla moltiplicazione tra larghezza e altezza, espressa in pixel, moltiplicato per il numero di byte necessari per rappresentare il colore di ogni singolo pixel.
Nel display in oggetto sono 2 byte ovvero 16bit, quindi 65536 colori possibili.

Luminosità

Con il comando display.set_backlight(n) si può impostare la luminosità del display passando un valore compreso tra 0.0 e 1.0

# imposto la luminosità (0.0 ÷ 1.0)
display.set_backlight(0.8)

Pulizia buffer

Prima di iniziare a visualizzare qualsiasi cosa sullo schermo, va prima pulito il buffer, per questo si usa l'istruzione display.clear().
Questa non fa altro che riempire tutto lo schermo con il colore della penna corrente.
Il colore della penna corrente si imposta con display.set_led(red, green, blue) passando tre valori da 0 a 255 che corrispondono all'intensita di colore, rispettivamente, del rosso, verde e blu.

# imposto il colore della penna
display.set_pen(35, 65, 94)

# riempio lo sfondo con il colore della penna
display.clear()

Come abbiamo visto prima il colore è rappresentabili solo con 2 byte, mentre la funzione set_pen accetta 3 byte. Questo significa che vengono usati solo i bit più alti. Per il rosso e blu vengono presi 5 bit e 6 per il verde (RGB565).
Per maggiori info vedi pimoroni-pico / libraries / pico_graphics

Disegno sul display

La libreria mette a disposizione alcune funzioni base per creare punti, rettangoli, cerchi, testi, ecc....

Punti: display.pixel(x, y)

c_white = display.create_pen(255, 255, 255)
display.set_pen(c_white)

# x=150, Y=25
display.pixel(150, 45)

Il punto x=0, y=0 si trova nell'angolo in alto a sinistra del display considerando di avere i pulsanti A e B sulla sinistra

Linea orizzontale: display.pixel_span(x, y, length)

display.set_pen(255, 255, 0)
# x=10, y=30 lunghezza orizzontale=150
display.pixel_span(10, 30, 150)

Rettangolo: display.rectangle(x, y, width, height)

display.set_pen(c_white)
# x=10, Y=50, larghezza=100, altezza=30
display.rectangle(10, 50, 100, 30)

Cerchio: display.circle(cx, cy, radius)

display.set_pen(c_white)
# centro del cerchio X=150, y=60 e raggio=20
display.circle(150, 60, 20)

Testo: display.text(stringaDiTesto, posizioneX, posizioneY, wrapWidth, zoomFont)

display.set_pen(240, 176, 84)
# X=45, Y=7 riferito all'angolo alto sinistro, con una larghezza massima di 300 e uno zoom del font di 3
display.text("Sgart.it", 45, 7, 300, 3)

display.set_pen(80, 80, 80)
# X=10, Y=100 riferito all'angolo alto sinistro, con una larghezza massima di 170 e uno zoom del font di 2
display.text("esempio di testo lungo con wrap", 10, 100, 170, 2)

Per un elenco completo dei comandi vedi Pico Display Pack - MicroPython

Aggiornamento display

Molto importante, per vedere quello che si è disegnato sul display va invocata l'istruzione display.update()

display.update()

Attenzione senza questa istruzione il display non viene aggiornato.

Esempio completo

# libreria per il controllo del display
import picodisplay as display

width = display.get_width()
height = display.get_height()

buffer = bytearray(width * height * 2)  # 2-bytes per pixel (RGB565)
display.init(buffer)

#luminosità di sfondo
display.set_backlight(1.0)

display.set_pen(255, 0, 0)
display.clear() 

# posso anche salvarmi una penna per riutilizzarla
c_white = display.create_pen(255, 255, 255)

# punto
display.set_pen(c_white)
display.pixel(10, 10)

# linea orizzontale
display.set_pen(255, 255, 0)
display.pixel_span(10, 30, 155)

# rettangolo
display.set_pen(c_white)
display.rectangle(10, 50, 100, 30)

# cerchio
display.set_pen(0, 0, 255)
display.circle(150, 60, 20)

# testo scala 3 (x3)
display.set_pen(240, 176, 84)
display.text("Sgart.it", 45, 7, 300, 3)

# testo scala 2 (x2)
display.set_pen(80, 80, 80)
display.text("Esempio di testo lungo con wrap", 10, 100, 170, 2)

# aggiornamento display
display.update()

questo è il risultato

Demo display

Demo con pulsanti

Per leggere lo stato dei pulsanti su usa l'istruzione display.is_pressed(...) ed accetta, come argomento, una di queste costanti

display.BUTTON_A
display.BUTTON_B
display.BUTTON_X
display.BUTTON_Y

L'esempio seguente permette id usare i pulsanti A e B per incrementare una percentuale da o a 100 visualizzando il valore corrente come numero e come barra proporzionale al valore

import picodisplay as display
import utime

width = display.get_width()
height = display.get_height()

buffer = bytearray(width * height * 2)  # 2-bytes per pixel (RGB565)
display.init(buffer)

display.set_backlight(1.0)

# momorizzo il valore corrente della percentuale (variabile globale)
v_perc = 50

# mi salvo i colori da utilizzare
c_white = display.create_pen(255, 255, 255)
c_black = display.create_pen(0, 0, 0)
c_red = display.create_pen(255, 0, 0)
c_dark_red = display.create_pen(127, 0, 0)
c_gray = display.create_pen(128, 128, 128)

def increment():
    global v_perc   # mi riferisco alla variabile globale 
    if v_perc < 100:
        v_perc += 1
        # faccio fare 1 lampeggio al led (verde)
        display.set_led(0, 128, 0)
        return True
    return False

def decrement():
    global v_perc
    if v_perc > 0:
        v_perc -= 1
        # faccio fare 1 lampeggio al led (blu)
        display.set_led(0, 0, 128)
        return True
    return False

def update():
    # cancello
    display.set_pen(c_black)
    display.clear()

    # visualizzo la percentuale numerica
    display.set_pen(c_white)
    display.text(str(v_perc) + "%", 40, 30, 170, 6)
    
    # visualizzo la barra orizzontale progressiva
    rect_width =  (width - 10) / 100.0 * v_perc
    display.set_pen(c_gray)
    display.rectangle(0, 90, width, 40)
    display.set_pen(c_black)
    display.rectangle(5, 95, width - 10, 30)
    display.set_pen(c_red)
    display.rectangle(5, 95, int(rect_width), 30)
    
    # testo sgart.it
    display.set_pen(c_dark_red)
    display.text("SGART.IT", 150, 5, 170, 2)
    
    #aggiornamento display
    display.update()

update()
#print(vPerc)

# eseguo un ciclo infinito
while True:
    #spengo il lef
    display.set_led(0, 0, 0)

    # leggo i pulsanti
    if display.is_pressed(display.BUTTON_A):
        if increment() == True:
            #print(vPerc)
            update()
    elif display.is_pressed(display.BUTTON_B):
        if decrement() == True:
            #print(vPerc)
            update()

    # introduco un breve ritardo prima di rcominciare
    utime.sleep(0.1)

questo è il risultato

Demo pulsanti

LED

Nell'esempio precedente ho usato anche il LED RGB, presente sulla scheda, per fare in modo che lampeggiasse ad ogni pressione di uno dei pulsanti.
In particolare diventa verde quando si preme il pulsante A di incremento e blu quando si decrementa (pulsante B).

L'istruzione per pilotare il led è display.set_led(red, green, blue)

# led spento
display.set_led(0, 0, 0)

# led rosso
display.set_led(255, 0, 0)

# led bianco
display.set_led(255, 255, 2550)

Tags:

Connettere un display RGB a Raspberry PI Pico