Grafica su un display SSD1306 I2C OLED 128x64 con CircuitPython utilizzando un Itsybitsy M4 Express: 13 passaggi (con immagini)

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

Il display SSD1306 OLED è un piccolo display grafico monocromatico I2C (0,96 ), economico, ampiamente disponibile con 128x64 pixel, che è facilmente interfacciabile (solo 4 fili) a schede di sviluppo a microprocessore come Raspberry Pi, Arduino o Adafruit Itsybitsy M4 Express, CircuitPlayground Express o altri dispositivi CircuitPython I driver possono essere scaricati da Internet.

Le routine grafiche per Arduino sono disponibili da tempo ma non per altri sistemi di sviluppo.

I driver di dispositivo di base consentono agli utenti di:

• Cancella lo schermo in bianco o nero. oled.fill(c)
• Scrivi una stringa di testo sullo schermo in una posizione specificata (x, y) oled.text("Text", x, y, c)
• Disegna un punto in una posizione specificata (x, y) oled.pixel(x, y, c)
• Carica un file immagine sullo schermo. (Non utilizzato in questo progetto)
• Aggiorna il display oled.show()

Questo Instructable dimostrerà, con semplici procedure, come disegnare, in modo interattivo:

• Linee
• cerchi
• scatole vuote
• blocchi solidi
• caratteri predefiniti

Userò un Adafruit Itsybitsy M4 Express per dimostrare i metodi, ma il codice, in Python, può essere facilmente portato su altri sistemi di sviluppo.

Ho scelto l'Itsybitsy M4 per questa dimostrazione perché è economico, potente, facile da programmare, include Input/Output analogici e digitali, ha molta memoria, ha documentazione facilmente individuabile e forum di assistenza su Internet, è molto facile da configurare inizialmente e supporta CircuitPython, una versione di Python ideale per chi è alle prime armi con la programmazione.

Dopo aver configurato Itsybitsy e SSD1306, questa è una build breadboard molto semplice. Non c'è digitazione, tutti i file possono essere scaricati.

Questo è un progetto economico e facile da costruire, ma introduce alcune idee intermedie/avanzate. Spero che ci proverai. Sono rimasto colpito da questo piccolo display.

Passaggio 1: cosa ci serve per questo progetto

Hardware:

• SSD1306 I2C display mono 128x64 pixel
• Itybitsy M4 Express
• Cavo da microUSB a USB - per programmare la scheda
• tagliere
• 1 potenziometro da 10K Ohm
• 1 pulsante interruttore
• cavo di collegamento: vari colori possono aiutare
• Computer (per scrivere il codice e caricarlo) - andrà bene un laptop molto vecchio.

Software:

Editor Mu - per scrivere codice e caricare lo script su Itsybitsy

La configurazione di Itsybitsy è spiegata qui:

L'ultima versione di CircuitPython:

Librerie CircuitPython:

Mu Editor:

Passaggio 2: il circuito

Questo è un circuito molto semplice da configurare. La pagina successiva illustra la breadboard finita con fili colorati per semplificare le cose.

Passaggio 3: versione breadboard del circuito

Ci sono binari di alimentazione nella parte superiore e inferiore della breadboard. Con il filo rosso unire i binari +ve. Con il filo nero unire i binari -ve insieme.

Unisci il pin 3V dell'Itsybitsy alla guida +ve inferiore - filo rosso. (Colonna 12)

Unisci il pin G (GND) dell'Itsybitsy al binario -ve superiore - filo nero. (Colonna 12)

Nelle colonne 33 e 34, collegare i pin VCC e GND dell'SSD1306 ai binari di alimentazione superiori.

Con un filo rosa unire i pin SCL insieme.

Con un filo grigio unire i pin SDA tra loro.

Con i fili rosso e nero collega i pin esterni del potenziometro ai binari di alimentazione superiori e con il filo verde collega il pin centrale (tergicristallo) ad A5 sull'Itsybitsy.

Collegare un lato dell'interruttore a pulsante con un filo viola al pin 2 e con un filo nero collegare l'altro lato a una guida GND.

Passaggio 4: caricamento del carattere

Scarica il file del carattere e trascinalo nell'unità CIRCUITPY. (Questo è l'Itybitsy.)

Fai doppio clic sulla cartella lib e guarda l'elenco dei driver che hai già caricato.

Passaggio 5: aggiunta di driver aggiuntivi

Avrai bisogno di quanto segue nella cartella lib:

• simpleio.mpy
• adafruit_bus_device
• adafruit_framebuf.mpy
• adafruit_ssd1306.mpy

Se mancano, trascinali nella cartella dall'ultima versione disponibile.

Ora sei pronto per scaricare lo script.

Una volta caricato nell'editor Mu puoi salvarlo su Itybitsy con il nome main.py.

Il programma esegue una serie di dimostrazioni di linee, cerchi, un grafico a barre dinamico e la visualizzazione di caratteri definiti. Basta girare lentamente la pentola e tenere premuto il pulsante per controllare il display.

Le pagine seguenti forniscono ulteriori informazioni sul funzionamento del programma.

Passaggio 6: configurare i dispositivi

Questa prima sezione carica tutte le librerie e imposta l'SSD1306, il potenziometro e l'interruttore a pulsante sui pin corretti.

Passaggio 7: definire i caratteri e disegnare linee orizzontali e verticali

Questa sezione imposta i caratteri predefiniti. Sono larghi 5 punti e alti 8 punti. Ogni punto nella definizione disegna 4 punti sullo schermo in modo che vengano visualizzati meglio.

Le linee orizzontali e verticali sono facili da disegnare con un ciclo. Devi solo ricordare che hai bisogno del punto in più alla fine. Una linea da (0, 7) a (5, 7) avrà bisogno di 6 punti: con x uguale a 0, 1, 2, 3, 4 e 5 a turno.

Il comando punto di base è oled.pixel(x, y, color) - 0 è nero e 1 è bianco.

L'origine (0, 0) è in alto a sinistra dello schermo, 0 - 127 pixel in orizzontale (da sinistra a destra) e 0 - 63 in verticale (dall'alto in basso).

Passaggio 8: scatole, blocchi e linee inclinate

Le scatole sono costruite da linee orizzontali e verticali.

I blocchi sono costituiti da più linee orizzontali.

Per le linee inclinate controlliamo prima che le coordinate siano date più a sinistra per prime. In caso contrario, li scambiamo poiché la linea verrà tracciata da sinistra a destra.

Quindi calcoliamo la pendenza e la usiamo per impostare il valore y per ogni valore di x.

La procedura display(t) rende visibile la schermata aggiornata e attende un breve ritardo, t secondi.

Passaggio 9: simbolo del grado, orientamento, grafico a barre e cerchio

Il simbolo del grado viene creato da 4 pixel.

La routine align() aggiunge spazi extra davanti al numero per allineare a destra i valori brevi in uno spazio fisso.

La routine graph(v) disegna un grafico a barre orizzontali che fornisce la percentuale selezionata. Il valore è scritto all'estremità destra usando 'T' per rappresentare 100 (Ton o Top).

I cerchi richiedono un po' di trigonometria, quindi dobbiamo importare la libreria matematica all'inizio dello script. Usiamo sin, cos e radianti per calcolare gli offset xey dal centro quando un raggio viene ruotato di 90 gradi. I punti vengono tracciati in ciascuno dei quattro quadranti per ogni calcolo degli offset.

Passaggio 10: raccolta della spazzatura, titoli e cerchi

Queste istruzioni mostrano la cancellazione dello schermo in bianco e nero, la scrittura di testo sullo schermo e l'utilizzo della routine gc() 'garbage collection' per liberare spazio. Il valore mostra che c'è molto spazio per uno script molto più grande.

Il programma disegna quindi cerchi con centro comune e con centri in movimento. Una routine abbastanza veloce considerando la quantità di calcolo richiesta.

L'intestazione per la demo delle linee è scritta di seguito.

Passaggio 11: dimostrazione delle linee

Questa routine dà davvero un allenamento alla routine line(). Le linee radiali sono disegnate da ciascuno dei quattro angoli del display con spaziature diverse che formano modelli.

Passaggio 12: Il ciclo principale: grafico a barre e caratteri definiti

Questo è il ciclo principale del programma. I valori del potenziometro modificano i valori visualizzati e modificano la lunghezza del grafico a barre.

Se il pulsante viene tenuto premuto, i caratteri definiti vengono scambiati come 1/0 e Vero/Falso. Questo ciclo viene eseguito abbastanza lentamente perché disegnare i caratteri predefiniti è un processo lento. Puoi accelerare le cose commentando alcune di esse.

Non è installato alcun sensore di temperatura, per semplificare questa demo, quindi il '?' viene visualizzato al posto di un valore nella riga 190.