Hey, ich zeige dir heute, wie du den ESP8266 Mikrocontroller von Heltec programmierst und mit dem kleinen OLED Display beeindruckende Daten darstellen kannst. In meinem Beispiel werde ich eine API einer Newsseite anzapfen und die aktuellen News auf dem Display anzeigen lassen. Es ist erstaunlich, welche Möglichkeiten sich mit dem ESP8266 und dem Heltec OLED eröffnen. Als Anfänger wirst du Schritt für Schritt lernen, wie du den Mikrocontroller einrichtest und die Daten abrufst. Zusammen tauchen wir in die faszinierende Welt der Programmierung ein und entdecken, wie einfach es ist, Daten auf dem OLED Display zum Leben zu erwecken. Bereit für dieses spannende Abenteuer? Dann lass uns loslegen!
Disclaimer: Ich möchte darauf hinweisen, dass ich den erwähnten ESP8266 Mikrocontroller mit integriertem 0,91″ OLED Display von der Firma AZ-Delivery persönlich erworben habe. Ich stehe in keinem geschäftlichen Verhältnis zu AZ-Delivery und erhalte keinerlei finanzielle Vergütung für die Erwähnung oder Empfehlung ihrer Produkte. Falls du Interesse hast, den Mikrocontroller zu erwerben, kannst du ihn derzeit für 7,88 € zzgl. Versandkosten auf ihrer Website unter https://www.azdelivery.de/collections/esp8266/products/esp8266-mikrocontroller-mit-integrierten-0-91-oled-display finden.
Inhaltsverzeichnis
- Schon wieder ein ESP8266?
- Warum also genau dieser ESP8266?
- Technische Daten des ESP8266 von Heltec mit OLED Display
- Lieferumfang des ESP8266 von Heltec
- Anschluss an den PC
- Erfahrung mit dem Mikrocontroller
- News auf dem Display anzeigen lassen
- Download des Codes als ZIP-Datei
- Schritt 1 – Einrichten eines Accounts bei https://newsapi.org/
- Schritt 2 – Abfrage der News Api per Postman
- Schritt 3 – Programmieren des ESP8266 in der Arduino IDE 2.0
- Installieren des Boardtreibers für den ESP8266
- Auswahl des ESP8266
- Installieren des Treibers für das OLED Display
- Installieren der Bibliothek für JSON Verarbeitung
- Aufbau einer WiFi-Verbindung
- Laden von Daten aus der NewsApi
- Absenden eines HTTP-Requests
- Auswerten des JSON-Response
- Anzeigen der News Titel auf dem OLED Display
Schon wieder ein ESP8266?
Es gibt bereits diverse Varianten des ESP8266 auf dem Markt und dieses ist auch nicht der erste mit einem OLED Display. Du findest zum Beispiel den Wemos D1 Mini mit einem kleinen OLED Display für denselben Preis.
Der Preis ist mit knapp 8€ zzgl. Versandkosten recht moderat, aber dieser wird aus Deutschland geliefert und somit war die Lieferzeit mit 3 Tagen recht flink.
Warum also genau dieser ESP8266?
Für mich war klar, dass ich diesen mir holen musste, weil ich einfach die kleinen Mikrocontroller sammle und viel mit diesen bastle. Ein großer Vorteil ist, dass bei diesem bereits ein OLED Display montiert ist und somit zumindest der Anschluss via I2C entfällt.
Ich kann dir diesen kleinen Mikrocontroller empfehlen, wenn du noch keinen ESP8266 hast und erste kleine Projekte mit diesem bewerkstelligen möchtest. Hier ist auch der Vorteil, dass bereits das Display vormontiert ist und du somit recht einfach Sensordaten oder in der Nähe befindliche WiFi-Netzwerke anzeigen lassen kannst.
Technische Daten des ESP8266 von Heltec mit OLED Display
Kommen wir zunächst zu den technischen Daten des Mikrocontrollers:
| Chip | ESP8266, Tensilica L106 32-Bit-Prozessor |
| Taktgeschwindigkeit | bis zu 160 MHz |
| Hersteller | Espressif |
| Speicher | Flash: 4MB, OTA: 512 KB |
| GPIOs | 11 GPIOs, davon neun PWM Pins, ein analoger Pin |
| Schnittstellen | UART, SPI, I2C, I2S |
| OLED Display | Auflösung: 128×32 Punkte, Farbe: Schwarz / Weiß |
| WiFi | 802.11 b/g/n, 2,4 Ghz (2400 MHz ~ 2483.5 MHz) |
| Wi-Fi Mode | Station, SoftAP, SoftAP+Station |
| Security | WPA, WPA2 |
| Encryption | WEP, TKIP, AES |
Das Datenblatt als PDF-Dokument zum ESP8266 findest du bei AZ-Delivery in englischer Sprache.
Lieferumfang des ESP8266 von Heltec
Der Mikrocontroller wird mit zwei Stiftleisten und ein Anschlusskabel für eine LiPo Batterie geliefert.
Anschluss an den PC
Für die USB-Serielle Verbindung ist ein CH9102 verbaut.
Solltest du also Probleme haben, dass der Mikrocontroller nicht erkannt wird, dann musst du den Treiber installieren. Diesen findest du zbsp. auf dem GitHub Repository Xinyuan-LilyGO/CH9102_Driver.
Erfahrung mit dem Mikrocontroller
Ich habe mit diesem kleinen Mikrocontroller einige kleine Projekte aufgebaut und möchte dir in diesem Abschnitt von meinen Erfahrungen berichten.
Schlechte Reichweite, instabile WiFi-Verbindung
Zunächst möchte ich damit beginnen, die doch recht mäßige Reichweite des WiFis zu erwähnen. Ich habe hier einen WiFi Accesspoint von der Firma TP-Link welcher seinen Dienst zuverlässig verrichtet und mit so ziemlich jedem WiFi-fähigen Mikrocontroller (2,4 HG & 5 GHz) zusammen arbeitet. Mit einem WiFi-Scanner konnte ich das Netzwerk sehen, aber im nächsten Durchgang war dieses wieder weg.
Ein Nachtest mit einem anderen ESP8266 ergab eine zuverlässige, stabile Verbindung.
Meine Lösung dazu war, dass ich mit meinem Handy einen Hotspot aufgebaut und mit diesem gearbeitet habe.
News auf dem Display anzeigen lassen
Wollen wir nun einmal mit der Programmierung beginnen und ein kleines Projekt mit diesem starten. Ich hatte dir ja bereits einige Beiträge mit dem ESP8266 auf diesem Blog präsentiert, wo ich diverse Sensoren & Aktoren angebunden habe.
- ESP8266 für Blynk einrichten
- Füllstandsanzeige mit ESP8266, Ultraschall Abstandssensor & ESPEasy
- ESP8266 – Alexa gesteuerte Steckdose
Hier möchte ich jetzt einen Schritt weiter gehen und eine Schnittstelle von einer News-Seite anzapfen und auf dem Display die Daten anzeigen.
Download des Codes als ZIP-Datei
Hier nun das Programm zum Lesen der News von NewsApi.org für den ESP8266.
Schritt 1 – Einrichten eines Accounts bei https://newsapi.org/
Es gibt im Internet diverse Seiten wo man News Beiträge abrufen kann, jedoch benötigst du bei den meisten leider einen kostenpflichtigen Account. Auf der Seite https://newsapi.org/ kannst du dir einen kostenfreien Account anlegen und über diesen bis zu 100 Beiträge pro Tag kostenfrei beziehen. Das sollte für unser kleines Projekt ausreichen.
Es gibt hier Double-Opt-in d.h. du bekommst keine E-Mail nach der Anmeldung, das ist rechtlich sehr schwierig. Jedoch kannst du hier auch Fake Daten eingeben und erhältst trotzdem einen gültigen ApiKey zum Portal.
Schritt 2 – Abfrage der News Api per Postman
Bevor wir mit der eigentlichen Programmierung beginnen, erstellen wir einen Request mit der Anwendung Postman dieses hat den Vorteil, dass wir erst einmal etwas herumspielen können und müssen nicht immer gleich das Programm auf den Mikrocontroller aufspielen.
Wenn wir nun einen Request mit der nachfolgenden Adresse absenden, dann erhalten wir einen JSON Response
https://newsapi.org/v2/top-headlines?country=de&pageSize=2&apiKey=7274xxxxxx05f3{
"status": "ok",
"totalResults": 34,
"articles": [
{
"source": {
"id": "google-news",
"name": "Google News"
},
"author": "DER SPIEGEL",
"title": "+++ Krieg in der Ukraine +++: Offenbar Autoexplosion auf Krim – Berichte über verletzten russischen Besatzer - DER SPIEGEL",
"description": null,
"url": ",
"urlToImage": null,
"publishedAt": "2023-06-19T16:07:30Z",
"content": null
},
{
"source": {
"id": "google-news",
"name": "Google News"
},
"author": "NETZWELT",
"title": "The Flash: Multiversen und andere Kleinigkeiten - diese Zeitreise-Filme ergeben wirklich Sinn! - NETZWELT",
"description": null,
"url": ",
"urlToImage": null,
"publishedAt": "2023-06-19T16:00:00Z",
"content": null
}
]
}
Schritt 3 – Programmieren des ESP8266 in der Arduino IDE 2.0
Nachdem wir nun ermittelt haben, wie wir einen Request an die Api von NewsApi.org absenden können, wollen wir dieses in ein kleines Arduino Sketch schreiben.
Installieren des Boardtreibers für den ESP8266
Damit wir den ESP8266 auswählen können, müssen wir zunächst die nachfolgende URL in den Einstellungen zu den „zusätzlichen Boardverwalter URLs“ hinzufügen.
https://arduino.esp8266.com/stable/package_esp8266com_index.jsonWenn diese Adresse eingetragen ist, dann kann im Boardverwalter (1) nach ESP8266 (2) gesucht werden. In meinem Fall habe ich diesen Treiber bereits installiert und sehe die Schaltfläche „REMOVE“ (3) in deinem Fall solltest du „INSTALL“ sehen. Wenn du diese Schaltfläche betätigt hast und danach der Treiber erfolgreich installiert wurde, dann sollte zusätzlich ein Label „<Versionsnummer> installed“ (4) erscheinen.
Auswahl des ESP8266
Nachdem der Boardtreiber installiert wurde, können wir diesen aus der Liste auswählen. In meinem Fall habe ich den Eintrag „NodeMCU 1.0 (ESP-12E Module)“ gewählt.
Installieren des Treibers für das OLED Display
Das Display selber ist quasi nur onboard auf dem ESP8266 und ist daher nicht im Boardtreiber enthalten. Für dieses müssen wir wiederum einen eigenen Treiber installieren. Hier wechseln wir vom Boardverwalter zum Bibliotheksverwalter (1) und suchen nach „adafruit ssd1306“ (2) auch diese habe ich bereits installiert und daher wird ebenso die Schaltfläche „REMOVE“ (3) angezeigt. Auch hier solltest du wieder die Schaltfläche „INSTALL“ sehen und wenn du diese installiert hast, kannst du mit der Programmierung beginnen.
Dur Bibliothek bekommst du zusätzlich noch ein paar Beispiele. Diese sind ohne Änderungen auf dem ESP8266 mit OLED Display von Heltec sofort lauffähig.
Im nachfolgenden kleinen Video zeige ich dir eines der Beispiele, in welchem auf dem Display verschiedene Features dieser Bibliothek abgespielt werden.
Installieren der Bibliothek für JSON Verarbeitung
Wir erhalten von NewsApi.org einen JSON Response (Antwort) welche wir mit einer speziellen Bibliothek auswerten können. Das JSON-Datenformat ist im Internet sehr beliebt, da dieses sehr einfach aufgebaut und von Menschen sehr leicht zu lesen ist.
Im Abschnitt zuvor hatte ich dir bereits erläutert, wie man eine Bibliothek installiert, hier sind die Schritte gleich, jedoch suchen wir hier lediglich nach „JSON“ und wählen die „Arduino_JSON by Arduino“ Bibliothek.
Wie du einen JSON mit dieser Bibliothek verarbeitest, habe ich dir bereits im Beitrag JSON-Format zur Datenübertragung zwischen zwei Mikrocontroller erläutert.
Aufbau einer WiFi-Verbindung
Damit wir die Daten aus dem Internet abrufen können, müssen wir zunächst eine WiFi-Verbindung aufbauen. Hier benötigen wir die SSID sowie das Passwort vom lokalen 2.4 GHz WLAN Netzwerk.
#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <WiFiClient.h>
//Zugangsdaten zum lokalen WiFi-Netzwerk
const char* ssid = "*******";
const char* password = "*******";
void initWiFiConnection() {
WiFi.begin(ssid, password);
Serial.print("Aufbau der WiFi Verbindung zu ");
Serial.println(ssid);
//Solange die WiFi Verbindung nicht aufgebaut ist,
//soll 500ms. gewartet und ein Punkt auf der seriellen Schnittstelle
//ausgegeben werden.
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("Verbindung erfolgreich aufgebaut!");
Serial.print("IP-Adresse lautet: ");
Serial.println(WiFi.localIP());
}
Laden von Daten aus der NewsApi
Nachdem wir nun die WiFi-Verbindung zum lokalen WLAN Netzwerk hergestellt haben, können wir jetzt die Daten aus der NewsApi auslesen. Dazu bauen wir uns zunächst einen String für die URL auf.
//Der ApiKey welcher die Berechtigung zum laden der //Daten beinhaltet. String newsApiKey = "7274266d9bb543fcbcb4d0ce907605f3"; //Sprache der News String newsApiCountry = "de"; //Anzahl der News welche geladen werden sollen const int newsApiPageSize = 6; //Es kann gesucht werden oder nur die Top-Headlines geladen werden. //everything //top-headlines String newsApiEndpoint = "top-headlines"; //URL zum laden der Daten, hier wird per HTTP und nicht per HTTPS die //Daten abgerufen. String newsApiRequest = "http://newsapi.org/v2/" + newsApiEndpoint + "?" + "country=" + newsApiCountry + "&pageSize=" + newsApiPageSize + "&apiKey=" + newsApiKey;
Absenden eines HTTP-Requests
An den Server stellen wir nun die Anfrage mit der URL und erhalten mit http.GET() die Antwort, welche wir wiederum mit http.getString() auslesen können. Diese Antwort ist, wenn der Vorgang erfolgreich war, ein JSON.
//Wenn keine WiFi-Verbindung existiert, dann eine aufbauen
if ((WiFi.status() != WL_CONNECTED)) {
initWiFiConnection();
}
//Wenn eine aktive WiFi-Verbindung existiert, dann...
if ((WiFi.status() == WL_CONNECTED)) {
WiFiClient client;
HTTPClient http;
//Aufbau der Verbindung
http.begin(client, newsApiRequest.c_str());
//abgsenden des Requests und laden der Daten
//der HTTP-Code repräsentiert das Ergebnis des Prozesses
//in Zahlenform, wobei HTTP-200 für OK steht.
//(https://de.wikipedia.org/wiki/HTTP-Statuscode)
httpCode = http.GET();
//Laden der Daten
httpResponse = http.getString();
//Beenden der Kommunikation
http.end();
}
Auswerten des JSON-Response
Wenn die Antwort HTTP-200 also OK ist dann werten wir diese aus und laden aus dem JSON die Titel der News Artikel. Da die Titel Umlaute & Symbole enthalten, welche nicht auf dem OLED Display angezeigt werden können, müssen wir diese zunächst durch andere ersetzen. Die Titel werden dann in einem Array gespeichert und im nächsten Schritt dann auf dem Display angezeigt.
#include <Arduino_JSON.h>
//Array zur Ablage der gelesenen News
String news[newsApiPageSize] = { "" };
void loop(){
....
//Wenn eine Antwort erhalten wurde, dann...
if (httpCode == 200) {
handleResponse(httpResponse);
}
}
//Ersetzt im Text Symbole welche nicht auf dem
//OLED Display angezeigt werden können.
String replaceSymbols(String text) {
String result = text;
result.replace("ä", "ae");
result.replace("Ä", "Ae");
result.replace("ö", "oe");
result.replace("Ö", "Oe");
result.replace("ü", "ue");
result.replace("Ü", "Ue");
result.replace("ß", "ss");
result.replace("\"", "'");
result.replace("„", "'");
result.replace("“", "'");
result.replace("–", "-");
return result;
}
//Verarbeitet die Antwort vom Server
//Die Antwort ist ein JSON String, dieser muss geparst und aus dem Ergebnis
//die Titel der Artikel geladen werden.
//Die Titel werden in dem Array news abgelegt.
void handleResponse(String httpResponse) {
//Parsen des JSON-Response
JSONVar jsonVar = JSON.parse(httpResponse);
//Schleife über die mögliche anzahl der geladenen Artikel
for (int i = 0; i <= newsApiPageSize - 1; i++) {
//extrahieren des Titels
String title = replaceSymbols(jsonVar["articles"][i]["title"]);
//ablegen im Array
news[i] = title;
}
}
Anzeigen der News Titel auf dem OLED Display
Kommen wir nun dazu, die News Titel auf dem OLED Display anzuzeigen. Dazu müssen wir zunächst das Display einrichten.
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 32 // OLED display height, in pixels
#define OLED_RESET 16
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
void initDisplay() {
if (!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
Serial.println(F("SSD1306 allocation failed"));
for (;;)
; // Don't proceed, loop forever
}
display.display();
delay(5000); // Pause for 2 seconds
display.clearDisplay();
delay(250);
}
void setup(){
...
initDisplay();
...
}
1 thought on “Heltec ESP8266 und OLED: Eine ideale Kombination für DIY-Projekte”