Grafiken auf einem SSD1306 I2C OLED 128x64 Display mit CircuitPython mit einem Itsybitsy M4 Express - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:18

Das OLED-Display SSD1306 ist ein kleines (0,96 ), kostengünstiges, weit verbreitetes, monochromes I2C-Grafikdisplay mit 128x64 Pixeln, das einfach (nur 4 Drähte) an Mikroprozessor-Entwicklungsboards wie Raspberry Pi, Arduino oder Adafruit Itsybitsy M4 angeschlossen werden kann Express, CircuitPlayground Express oder andere CircuitPython-Geräte. Treiber können aus dem Internet heruntergeladen werden.

Grafische Routinen für Arduinos gibt es schon länger, aber nicht für andere Entwicklungssysteme.

Mit den grundlegenden Gerätetreibern können Benutzer:

• Löschen Sie den Bildschirm auf Schwarz oder Weiß. oled.fill(c)
• Schreiben Sie eine Textzeichenfolge an einer bestimmten (x, y) Position auf den Bildschirm oled.text("Text", x, y, c)
• Zeichnen Sie einen Punkt an einer bestimmten (x, y) Position oled.pixel(x, y, c)
• Laden Sie eine Bilddatei auf den Bildschirm. (In diesem Projekt nicht verwendet)
• Aktualisieren Sie die Anzeige oled.show()

Dieses Instructable zeigt mit einfachen Verfahren, wie man interaktiv zeichnet:

• Linien
• Kreise
• Hohlkästen
• feste Blöcke
• vordefinierte Zeichen

Ich werde ein Adafruit Itsybitsy M4 Express verwenden, um die Methoden zu demonstrieren, aber der Code in Python kann leicht auf andere Entwicklungssysteme portiert werden.

Ich habe das Itsybitsy M4 für diese Demonstration gewählt, weil es kostengünstig, leistungsstark, einfach zu programmieren ist, analoge und digitale Ein-/Ausgabe enthält, viel Speicher hat, Dokumentationen und Hilfeforen im Internet leicht auffindbar hat, sehr einfach zu starten ist und unterstützt CircuitPython, eine Version von Python, die sich ideal für Programmieranfänger eignet.

Sobald Sie Ihr Itsybitsy und SSD1306 eingerichtet haben, ist dies ein sehr einfacher Steckbrettbau. Es gibt keine Eingabe, alle Dateien können heruntergeladen werden.

Dies ist ein kostengünstiges und einfach zu erstellendes Projekt, das jedoch einige fortgeschrittene / fortgeschrittene Ideen einführt. Ich hoffe, Sie werden es versuchen. Ich war beeindruckt von diesem kleinen Display.

Schritt 1: Was wir für dieses Projekt brauchen

Hardware:

• SSD1306 I2C Mono-Display 128x64 Pixel
• Itsybitsy M4 Express
• microUSB zu USB Kabel - um das Board zu programmieren
• Steckbrett
• 1 10K Ohm Potentiometer
• 1-Tasten-Schalter
• Anschlusskabel - verschiedene Farben können helfen
• Computer (um den Code zu schreiben und hochzuladen) - ein sehr alter Laptop reicht aus.

Software:

Mu-Editor - zum Schreiben von Code und Hochladen des Skripts auf Itsybitsy

Das Einrichten des Itsybitsy wird hier erklärt:

Die neueste Version von CircuitPython:

CircuitPython-Bibliotheken:

Mu-Editor:

Schritt 2: Die Schaltung

Dies ist eine sehr einfach einzurichtende Schaltung. Die nächste Seite zeigt das fertige Steckbrett mit farbigen Drähten, um die Dinge zu vereinfachen.

Schritt 3: Breadboard-Version der Schaltung

Oben und unten am Steckbrett befinden sich Stromschienen. Mit rotem Draht verbinden Sie die +ve-Schienen zusammen. Mit schwarzem Draht verbinden Sie die -ve-Schienen zusammen.

Verbinden Sie den 3V-Pin des Itsybitsy mit der unteren +ve-Schiene - rotes Kabel. (Spalte 12)

Verbinden Sie den G (GND)-Pin des Itsybitsy mit der oberen -ve-Schiene - schwarzem Draht. (Spalte 12)

Verbinden Sie in den Spalten 33 und 34 die SSD1306 VCC- und GND-Pins mit den oberen Stromschienen.

Verbinden Sie die SCL-Pins mit einem rosa Draht.

Verbinden Sie die SDA-Pins mit einem grauen Draht.

Verbinden Sie mit roten und schwarzen Drähten die äußeren Pins des Potentiometers mit den oberen Stromschienen und mit grünem Draht den mittleren (Wischer) Pin mit A5 auf dem Itsybitsy.

Verbinden Sie eine Seite des Tasters mit einem violetten Kabel mit Pin 2 und mit einem schwarzen Kabel verbinden Sie die andere Seite mit einer GND-Schiene.

Schritt 4: Laden der Schriftart

Laden Sie die Schriftartdatei herunter und ziehen Sie sie auf das CIRCUITPY-Laufwerk. (Dies ist das Itsybitsy.)

Doppelklicken Sie auf den Ordner lib und sehen Sie sich die Liste der bereits geladenen Treiber an.

Schritt 5: Hinzufügen zusätzlicher Treiber

Sie benötigen Folgendes im lib-Ordner:

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

Wenn sie fehlen, ziehen Sie sie in den Ordner aus der neuesten verfügbaren Version.

Jetzt können Sie das Skript herunterladen.

Einmal in den Mu-Editor geladen, können Sie es unter dem Namen main.py auf dem Itsybitsy speichern.

Das Programm durchläuft eine Reihe von Demonstrationen von Linien, Kreisen, einem dynamischen Balkendiagramm und der Anzeige definierter Zeichen. Drehen Sie einfach den Topf langsam und halten Sie die Taste gedrückt, um das Display zu steuern.

Auf den folgenden Seiten finden Sie weitere Informationen zur Funktionsweise des Programms.

Schritt 6: Einrichten der Geräte

Dieser erste Abschnitt lädt alle Bibliotheken und richtet SSD1306, Potentiometer und Tastenschalter auf die richtigen Pins ein.

Schritt 7: Definieren Sie Zeichen und zeichnen Sie horizontale und vertikale Linien

In diesem Abschnitt werden die vordefinierten Zeichen eingerichtet. Sie sind 5 Punkte breit und 8 Punkte hoch. Jeder Punkt in der Definition zeichnet 4 Punkte auf dem Bildschirm, damit sie besser angezeigt werden.

Horizontale und vertikale Linien lassen sich einfach mit einer Schleife zeichnen. Sie müssen nur daran denken, dass Sie den zusätzlichen Punkt am Ende benötigen. Eine Linie von (0, 7) bis (5, 7) benötigt 6 Punkte: mit x gleich 0, 1, 2, 3, 4 und 5.

Der grundlegende Punktbefehl ist oled.pixel(x, y, color) - 0 ist schwarz und 1 ist weiß.

Der Ursprung (0, 0) befindet sich oben links auf dem Bildschirm, 0 - 127 Pixel horizontal (von links nach rechts) und 0 - 63 Pixel vertikal (von oben nach unten).

Schritt 8: Boxen, Blöcke und schräge Linien

Boxen bestehen aus horizontalen und vertikalen Linien.

Blöcke werden aus mehreren horizontalen Linien aufgebaut.

Bei schrägen Linien prüfen wir zunächst, ob die Koordinaten ganz links zuerst angegeben werden. Wenn nicht, tauschen wir sie aus, da die Linie von links nach rechts gezogen wird.

Wir berechnen dann die Steigung und verwenden sie, um den y-Wert für jeden Wert von x festzulegen.

Die Prozedur display(t) macht den aktualisierten Bildschirm sichtbar und wartet eine kurze Verzögerung von t Sekunden.

Schritt 9: Gradsymbol, Winkel, Balkendiagramm und Kreis

Das Gradsymbol wird aus 4 Pixeln erstellt.

Die Routine align() fügt vor der Zahl zusätzliche Leerzeichen hinzu, um kurze Werte in einem festen Abstand rechtsbündig auszurichten.

Die graph(v)-Routine zeichnet ein horizontales Balkendiagramm, das den ausgewählten Prozentsatz angibt. Der Wert wird am rechten Ende mit 'T' geschrieben, um 100 (Ton oder Top) darzustellen.

Kreise erfordern etwas Trigonometrie, daher müssen wir die mathematische Bibliothek am Anfang des Skripts importieren. Wir verwenden sin, cos und radian, um die x- und y-Offsets vom Mittelpunkt zu berechnen, wenn ein Radius um 90 Grad gedreht wird. In jedem der vier Quadranten werden für jede Berechnung der Offsets Punkte aufgetragen.

Schritt 10: Müllsammlung, Titel und Kreise

Diese Anweisungen demonstrieren das Löschen des Bildschirms in Schwarzweiß, das Schreiben von Text auf den Bildschirm und die Verwendung der 'Garbage Collection'-Routine von gc(), um Speicherplatz freizugeben. Der Wert zeigt, dass viel Platz für ein viel größeres Skript vorhanden ist.

Das Programm zeichnet dann Kreise mit einem gemeinsamen Mittelpunkt und mit bewegten Mittelpunkten. Eine recht schnelle Routine, wenn man den Rechenaufwand bedenkt.

Als nächstes wird die Überschrift für die Zeilen-Demo geschrieben.

Schritt 11: Linien-Demo

Diese Routine gibt der line()-Routine wirklich ein Training. Aus jeder der vier Ecken des Displays werden radiale Linien mit unterschiedlichen Abständen gezogen, die Muster bilden.

Schritt 12: Die Hauptschleife: Balkendiagramm und definierte Zeichen

Dies ist die Hauptschleife des Programms. Die Werte vom Potentiometer ändern die angezeigten Werte und ändern die Länge des Balkendiagramms.

Wird die Taste gedrückt gehalten, werden die definierten Zeichen sowie 1/0 und True/False vertauscht. Diese Schleife läuft ziemlich langsam, da das Zeichnen der vordefinierten Zeichen ein langsamer Prozess ist. Sie können die Dinge beschleunigen, indem Sie einige von ihnen auskommentieren.

Es ist kein Temperatursensor eingebaut, um diese Demo einfach zu halten, also das '?' wird anstelle eines Wertes in Zeile 190 angezeigt.