So funktioniert der Joystick

Das Joystick-Modul verwendet Potentiometer für die x- und y-Achse. Wenn der Joystick bewegt wird, ändert sich der Widerstand der Potentiometer, was zu einer Änderung der Ausgangsspannung führt. Diese Spannung wird vom Arduino ausgelesen und in einen Zahlenwert zwischen 0 und 1023 umgewandelt.

Mit diesen Werte kannst du dann weiterarbeiten: Die Höhe des Werts zeigt dir an, in welche Richtung der Joystick bewegt wurde, also nach oben, unten, links oder rechts. Neben den Potis für die x- und y-Achse findest du meistens noch einen Button, den du betätigst, indem den Stick drückst. Auch das kannst du natürlich in deinem Sketch auslesen und bei Bedarf in deinem Projekt verwenden.

Und so schließt du ihn an

Ein typischer Arduino Joystick hat fünf Pins. Die Stromversorgung und die beiden Anschlüsse für die x- und y-Achse sind hierbei obligatorisch. Der Pin SW ist mit dem Button verbunden – wenn in deinem Projekt später keinen Button benötigst, brauchst du ihn nicht mit deinem Microcontroller verbinden. Im Folgenden verwenden wir jedoch alle fünf Anschlüsse:

___STEADY_PAYWALL___

Beachte, dass die Beschriftung der Pins je nach Modell variieren kann: Meistens findest du jedoch VRx für die horizontale x-Achse (HOR) und VRy für die vertikale y-Achse (VER).

Ein erster Test mit dem ARduino Joystick

Nun, wo du den Joystick angeschlossen hast, wird es Zeit für einen ersten Test. Hierbei liest du einfach die Bewegungen des Sticks und den Button aus und zeigst deine Aktionen entsprechend im Seriellen Monitor an.

Kopiere den folgenden Sketch und lade ihn auf deinen Arduino:

const int joyPinX = A0; // Pin für die x-Achse des Joysticks
const int joyPinY = A1; // Pin für die y-Achse des Joysticks
const int joyPinSW = A2; // Pin für den Button des Joysticks

void setup() {
  pinMode(joyPinSW, INPUT_PULLUP); // Button-Pin als Eingang mit internem Pull-up-Widerstand
  Serial.begin(9600); // Serielle Kommunikation starten
}

void loop() {
  int xValue = analogRead(joyPinX); // x-Achse auslesen
  int yValue = analogRead(joyPinY); // y-Achse auslesen
  int swValue = analogRead(joyPinSW); // Button auslesen

  // Richtung ermitteln
  String direction = "Mitte";
  if (xValue > 600) {
    direction = "Rechts";
  } else if (xValue < 400) {
    direction = "Links";
  }
  if (yValue > 600) {
    direction = "Unten";
  } else if (yValue < 400) {
    direction = "Oben";
  }

  // Werte im seriellen Monitor anzeigen
  Serial.print("Richtung: ");
  Serial.print(direction);
  Serial.print(" | X: ");
  Serial.print(xValue);
  Serial.print(" | Y: ");
  Serial.print(yValue);
  Serial.print(" | Button: ");
  Serial.print(swValue);
  if (swValue < 20) {
    Serial.println(" | Gedrückt!");
  } else {
    Serial.println(" | ");
  }

  delay(100); // Kurze Pause
}

Teste nun deinen Joystick – siehst du im Seriellen Monitor die Richtungen und einen Hinweis, wenn du den Button drückst? Falls du dich wunderst, dass die ermittelten Richtungen nicht mit deinen Absichten übereinstimmen: Dann positioniere deinen Arduino Joystick bitte wie auf diesem Foto.

So funktioniert der Sketch

Zunächst legst du die Pins fest, an denen dein Joystick mit dem Arduino UNO verbunden ist:

const int joyPinX = A0; // Pin für die x-Achse des Joysticks
const int joyPinY = A1; // Pin für die y-Achse des Joysticks
const int joyPinSW = A2; // Pin für den Button des Joysticks

Im Setup legst du fest, dass der Button des Arduino Joysticks den internen Pullup-Widerstand nutzt, damit du seine Werte zuverlässig auslesen kannst. Außerdem startest du den Seriellen Monitor:

void setup() {
  pinMode(joyPinSW, INPUT_PULLUP); // Button-Pin als Eingang mit internem Pull-up-Widerstand
  Serial.begin(9600); // Serielle Kommunikation starten
}

Der Loop beginnt damit, dass dein Arduino die aktuellen Werte des Joysticks einliest und basierend darauf die gedrückte Richtung ermittelt:

void loop() {
  int xValue = analogRead(joyPinX); // x-Achse auslesen
  int yValue = analogRead(joyPinY); // y-Achse auslesen
  int swValue = analogRead(joyPinSW); // Button auslesen

  // Richtung ermitteln
  String direction = "Mitte";
  if (xValue > 600) {
    direction = "Rechts";
  } else if (xValue < 400) {
    direction = "Links";
  }
  if (yValue > 600) {
    direction = "Unten";
  } else if (yValue < 400) {
    direction = "Oben";
  }

Wie eingangs erwähnt sind im Arduino Joystick zwei Potentiometer verbaut, für jede Achse eines. Am Beispiel der x-Achse bedeutet das: Ein Drücken nach links bis zum Anschlag erzeugt den Wert 0. Diese Werte steigen an, bis sie in der Ruheposition des Sticks im Bereich von 500 liegen. Dein Drücken nach rechts lässt die Werte weiter steigen, bis sie am Anschlag den vollen Wert 1023 erreichen.

Fehlen noch zwei Dinge: Die Ausgabe der Richtungen im Seriellen Monitor und der Check, ob du den Button des Sticks gedrückt hast:

  // Werte im seriellen Monitor anzeigen
  Serial.print("Richtung: ");
  Serial.print(direction);
  Serial.print(" | X: ");
  Serial.print(xValue);
  Serial.print(" | Y: ");
  Serial.print(yValue);
  Serial.print(" | Button: ");
  Serial.print(swValue);
  if (swValue < 20) {
    Serial.println(" | Gedrückt!");
  } else {
    Serial.println(" | ");
  }

  delay(100); // Kurze Pause
}

Eine Besonderheit des Arduino Joysticks ist, dass du an einem Analog-Pin ermitteln musst, ob der Button gedrückt wurde. Der ungedrückte Button liefert an seinem Pin SW immer einen Wert von ungefähr 500. Erst wenn du ihn betätigst fällt dieser Wert auf Null. Diesen Moment fängst du im Code oben mit einer If-Abfrage ein und gibst entsprechend ein Gedrückt! im Seriellen Monitor aus.

Analog-Stick und diagonale Bewegungen

Wie du im Seriellen Monitor erkennst, ermittelt dein Arduino Werte, die von der Intensität deiner Bewegungen abhängen. Das heißt konkret, dass zum Beispiel der Wert bei einer Bewegung nach rechts immer weiter ansteigt, bis er ab einer Größe von 600 als „nach rechts gedrückt“ gilt. Damit kannst du aber auch feine Bewegungen erkennen, ähnlich wie bei einem Analog-Stick eines herkömmlichen Controllers für die Playstation, Xbox oder Switch.

Falls du also für dein Projekt sowohl schnelle als auch langsame Bewegungen erkennen möchtest, setze bei den Werten mehrere Schwellenwerte: Der Wert 600 könnte dann ein gemächliches Schleichen sein, der Maximalwert von 1023 (also der Anschlag des Joysticks nach rechts) dann die volle Geschwindigkeit.

Auch diagonale Möglichkeiten sind möglich, denn diese sind nichts anderes als eine Kombination von x- und y-Werten. Ersetze in deinem Sketch den Teil Richtung ermitteln durch folgenden Code:

  // Richtung ermitteln
  String direction = "Mitte";
  if (xValue > 600 && yValue > 600) {
    direction = "Rechts-Unten";
  } else if (xValue > 600 && yValue < 400) {
    direction = "Rechts-Oben";
  } else if (xValue < 400 && yValue > 600) {
    direction = "Links-Unten";
  } else if (xValue < 400 && yValue < 400) {
    direction = "Links-Oben";
  } else if (xValue > 600) {
    direction = "Rechts";
  } else if (xValue < 400) {
    direction = "Links";
  } else if (yValue > 600) {
    direction = "Unten";
  } else if (yValue < 400) {
    direction = "Oben";
  }

Hier wird zum Beispiel eine Bewegung nach links oben erkannt, wenn sowohl der x-Wert als auch der y-Wert unter 400 liegt. Entsprechend behandelst du die anderen drei diagonalen Richtungen. Das ermöglicht dir weitere Möglichkeiten für deine Steuerung – mit etwas Fleißarbeit sind sogar noch weitere Abstufungen möglich.

Wie geht es weiter?

Jetzt wo du weißt, wie du deinen Arduino Joystick anschließt und verwendest, möchtest du bestimmt ein passendes Projekt bauen. In diesem Tutorial lernst du, wie du den Spieleklassiker Snake auf einem Arduino und ESP32 umsetzt.

Die Bibliothek ArduinoOTA

Falls du die ESP32-Boards über den Boardverwalter der Arduino-IDE hinzugefügt hast, ist die Bibliothek ArduinoOTA normalerweise schon dabei. Die Bibliothek ermöglicht dir eine unkomplizierte Integration der OTA-Funktionalität.

Sollte die Bibliothek dennoch fehlen, kannst du sie über den Bibliotheksverwalter installieren. Gehe dazu in der Arduino-IDE zu Sketch > Bibliothek einbinden > Bibliotheken verwalten und suche nach „ArduinoOTA“. Stelle sicher, dass die neueste Version installiert ist, damit du alle aktuellen Features und Sicherheitsverbesserungen nutzen kannst.

Schritt 1: Der erste Sketch für eine blinkende LED

Du startest mit einem einfachen Sketch, der eine LED am ESP32 im Sekundentakt blinken lässt. Die LED ist dabei über einen passenden Vorwiderstand an den GPIO-Pin 2 des ESP32 angeschlossen. Dieser Sketch dient als Grundlage für das OTA-Update.

#include <WiFi.h>
#include <ArduinoOTA.h>

const char* ssid = "Dein_WLAN-NETZWERK";          // Ersetze durch deinen WLAN-Namen
const char* password = "Dein_WLAN_Passwort";  // Ersetze durch dein WLAN-Passwort

#define LED_PIN 2 // GPIO-Pin der LED

unsigned long previousMillis = 0;
const long interval = 1000; // Blinkintervall in Millisekunden (1 Sekunde)

void setup() {
  Serial.begin(115200);
  pinMode(LED_PIN, OUTPUT);

  // WLAN-Verbindung herstellen
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nVerbunden mit WiFi");

  // OTA-Setup
  ArduinoOTA.setHostname("esp32_led_ota");
  ArduinoOTA.setPassword("Dein_Sicheres_Passwort"); // Setze hier ein starkes Passwort für OTA-Updates, um unbefugten Zugriff zu verhindern
  ArduinoOTA.begin();
}

void loop() {
  ArduinoOTA.handle(); // Nach OTA-Updates suchen

  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= interval) {
    previousMillis = currentMillis;
    digitalWrite(LED_PIN, !digitalRead(LED_PIN)); // Zustand der LED umschalten
  }
}

So funktioniert der Sketch

1. Bibliotheken einbinden: Der Sketch beginnt mit dem Einbinden der notwendigen Bibliotheken WiFi.h und ArduinoOTA.h. Erstere ermöglicht die Verbindung des ESP32 mit einem WLAN-Netzwerk, während ArduinoOTA.h die OTA-Funktionalität bereitstellt. Diese Bibliotheken sind notwendig, um die gewünschten Netzwerk- und Update-Funktionen auf dem ESP32 zu implementieren.
2. Netzwerk-Konfiguration: Die Variablen ssid und password speichern die Zugangsdaten für dein WLAN. Diese werden verwendet, um den ESP32 mit deinem Netzwerk zu verbinden.
3. GPIO-Pin-Definition: #define LED_PIN 2 definiert den Pin, an den die LED angeschlossen ist. In diesem Fall nutzt du den GPIO-Pin 2 des ESP32.
4. WLAN-Verbindung herstellen: Im setup()-Teil des Codes wird die Verbindung zum WLAN hergestellt. Mit WiFi.begin(ssid, password) verbindet sich der ESP32 mit dem Netzwerk. Die Schleife while (WiFi.status() != WL_CONNECTED) sorgt dafür, dass das Programm wartet, bis die Verbindung hergestellt ist.
5. OTA-Setup: Im setup()-Teil wird auch die OTA-Funktionalität initialisiert. Mit ArduinoOTA.setHostname("esp32_led_ota") wird der Name des ESP32 im Netzwerk festgelegt. Dieser Name erleichtert es, das Gerät im Netzwerk zu identifizieren, besonders wenn du mehrere ESP32-Geräte verwendest. Ein (möglichst sicheres) Passwort hinterlegst du mit Hilfe der Funktion ArduinoOTA.setPassword("Mein_OTA_Passwort"), damit nur du Updates durchführen kannst. ArduinoOTA.begin() startet den OTA-Service, damit der ESP32 auf eingehende Updates wartet.
6. LED-Blinken: Die Funktion loop() enthält den Code, der die LED im Sekundentakt blinken lässt. Mit der Funktion millis() wird überprüft, ob der festgelegte Intervall (1000 Millisekunden) vergangen ist. Wenn dies der Fall ist, wird der Zustand der LED umgeschaltet mit digitalWrite(LED_PIN, !digitalRead(LED_PIN)).
7. OTA-Handler: In der loop()-Funktion wird ArduinoOTA.handle() aufgerufen, um kontinuierlich nach OTA-Updates zu suchen. Dies ermöglicht es, jederzeit ein Update zu empfangen, während das Hauptprogramm weiterläuft.

Schritt 2: OTA-Update zur Änderung des intervalls

Nun nimmst du eine Änderung am Code vor, um die Blinkfrequenz der LED auf 500 ms zu reduzieren. Diese Änderung überträgst du drahtlos per OTA auf den ESP32.

Ändere im obigen Sketch den Wert des Intervalls von 1000 auf 500:

const long interval = 500; // Blinkintervall in Millisekunden (500 ms)

Update via OTA durchführen

Nun folgt der Upload des aktualisierten Sketchs. Sofern dein ESP32 mit deinem WLAN-Netzwerk verbunden ist, sollte er in der Arduino-IDE als Netzwerkport sichtbar sein. Gehe hierfür zu Werkzeuge > Port und wähle den ESP32 (esp32_led_ota) aus.

OTA-Update hochladen: Lade den neuen Sketch (mit 500 ms Blinkintervall) über den Netzwerkport hoch. Klicke hierfür einfach wie gewohnt auf den Upload-Button – so wie du es auch machst, wenn dein ESP32 über ein USB-Kabel verbunden ist. Achte darauf, dass in deinem Update wieder die WLAN-Zugangsdaten und dein Passwort hinterlegt sind.

Die Arduino-IDE fordert dich auf, das OTA-Passwort einzugeben. Gib das definierte Passwort („Mein_OTA_Passwort“) ein und das Update wird drahtlos übertragen.

Hinweis: Solltest du Updates mit verschiedenen Passwörtern machen, kann es sein, dass die Arduino IDE ein falsches Passwort automatisch verwenden möchte. Schließe in diesem Fall die IDE und öffne sie erneut – dann wirst du wieder nach dem Passwort für deinen ESP32 gefragt.

Nachdem das Update drahtlos auf deinen ESP32 übertragen wurde, sollte die LED nun im neuen Halbsekundentakt aufleuchten. Und das war es auch schon – du kennst nun eine Möglichkeit, Programme zu aktualisieren, ohne den Microcontroller irgendwo ausbauen und an deinen Computer anschließen zu müssen. Weitere Informationen zum Thema findest du bei Espressif.

Hier kommt UX-Design ins Spiel. UX steht für „User Experience“, also Nutzererfahrung. Es geht darum, wie Menschen mit unserem Produkt interagieren und welche Erfahrungen sie dabei machen. Gutes UX-Design sorgt dafür, dass die Bedienung intuitiv, effizient und angenehm ist.

Don Norman, einer der Pioniere des UX-Designs, hat in seinem Buch „The Design of Everyday Things“ grundlegende Prinzipien formuliert, die auch für uns Maker Gold wert sind. In diesem Artikel werden wir diese Prinzipien auf die Welt der DIY-Elektronik und Maker-Projekte übertragen.

Warum ist UX-Design für Maker wichtig?

Zum einen macht es unsere Projekte zugänglicher für andere. Ein gut designtes Gerät kann von jedem genutzt werden, nicht nur vom Erfinder. Zum anderen verbessert es auch unsere eigene Nutzererfahrung. Wer hat sich nicht schon einmal über seine eigenen, unübersichtlich angeordneten Buttons und Regler geärgert?

Gutes UX-Design muss dabei nicht bedeuten, dass wir Kompromisse bei der Funktionalität eingehen. Im Gegenteil: Oft führt die Auseinandersetzung mit UX-Fragen zu cleveren Lösungen, die unser Projekt noch verbessern.

Grundprinzipien des UX-Designs nach Don Norman

In seinem wegweisenden Werk The Design of Everyday Things* hat Don Norman einige fundamentale Prinzipien des UX-Designs formuliert, die für uns Maker von großem Wert sind. In diesem Beitrag soll es um drei der wichtigsten Konzepte gehen:

1. Gulf of Execution und Gulf of Evaluation:Der Gulf of Execution beschreibt die Kluft zwischen den Zielen des Nutzers und den Möglichkeiten des Systems. Der Gulf of Evaluation ist die Kluft zwischen dem, was das System tut, und dem Verständnis des Nutzers davon.
2. Affordances und Signifiers: Affordances sind die möglichen Interaktionen zwischen einem Objekt und dem Nutzer. Ein Drehregler „bietet“ das Drehen an. Signifiers sind die sichtbaren Hinweise auf diese Möglichkeiten.
3. Feedback:Jede Aktion des Nutzers sollte eine wahrnehmbare Reaktion hervorrufen.

Diese Prinzipien bilden das Fundament für benutzerfreundliches Design. Als Maker können wir sie nutzen, um Projekte zu bauen, die nicht nur funktionieren, sondern auch Freude bei der Benutzung bereiten. In den folgenden Abschnitten werden wir uns ansehen, wie wir diese Konzepte konkret in unseren DIY-Projekten umsetzen können.

Gulf of Execution und Evaluation

Zwei zentrale Konzepte in Don Normans Theorie, die für uns Maker besonders relevant sind, sind der „Gulf of Execution“ und der „Gulf of Evaluation“. Diese beschreiben die Herausforderungen, mit denen Nutzer bei der Interaktion mit unseren Projekten konfrontiert werden.

Der „Gulf of Execution“ ist die Kluft zwischen dem, was der Nutzer tun möchte, und den Möglichkeiten, die unser Gerät bietet. Stelle dir einen selbstgebauten Synthesizer vor: Der Nutzer möchte einen bestimmten Sound erzeugen, aber wie? Sind die Regler logisch angeordnet? Sind die Funktionen klar beschriftet? Je größer diese Kluft, desto frustrierender die Erfahrung.

Der „Gulf of Evaluation“ hingegen beschreibt die Schwierigkeit, den aktuellen Zustand des Systems zu verstehen. Hat unser Arduino die Eingabe verarbeitet? Wurde die Einstellung gespeichert? Läuft das Programm überhaupt? Ohne klares Feedback tappt der Nutzer im Dunkeln.

Als Maker ist es unsere Aufgabe, Brücken über diese Klüfte zu bauen:

1. Überbrücken des Gulf of Execution:
   • Verwenden eindeutige Beschriftungen und Symbole
   • Gruppiere zusammengehörige Funktionen
   • Benutze vertraute Metaphern, zum Biespiel ein Zahnrad-Symbol für Einstellungen
2. Überbrücken des Gulf of Evaluation:
   • Integriere Status-LEDs für wichtige Funktionen
   • Verwende Displays zur Anzeige komplexer Informationen
   • Gibt akustisches Feedback bei wichtigen Ereignissen

Ein Beispiel: Bei einem Smart-Home-Projekt könnte ein Touch-Display die aktuelle Raumtemperatur anzeigen (Evaluation) und gleichzeitig als Schieberegler zur Temperatureinstellung dienen (Execution). Eine kurze Vibration bestätigt die Eingabe, während eine animierte Kurve den Temperaturverlauf visualisiert.

Indem wir diese Konzepte berücksichtigen, machen wir unsere Projekte nicht nur funktional, sondern auch intuitiv bedienbar. Das Ziel ist es, dass der Nutzer mühelos von der Idee zur Ausführung und dann zum Verständnis des Ergebnisses gelangt.

Affordances und Signifiers

Affordances und Signifiers sind zentrale Konzepte, die uns helfen, die Interaktionen zwischen Nutzer und Objekt zu verbessern. Affordances beschreiben, welche Aktionen ein Objekt anbietet. Ein einfacher Drehregler an einem Verstärker bietet beispielsweise die Affordance, gedreht zu werden, um die Lautstärke zu verändern. Das Design eines Objekts sollte klar machen, welche Interaktionen möglich sind.

Signifiers sind die visuellen Hinweise, die dem Nutzer zeigen, wie er interagieren soll. Sie können physisch (z.B. eine Markierung auf einem Schalter) oder digital (z.B. ein Symbol auf einem Touchscreen) sein. Signifiers können oft auch dazu beitragen, Missverständnisse zu vermeiden. Wenn ein Knopf gedrückt werden soll, könnte er leicht hervorgehoben und beschriftet sein, um die Funktion deutlich zu machen.

Als Maker können wir Affordances und Signifiers gezielt einsetzen, um unsere Projekte benutzerfreundlicher zu gestalten. Zum Beispiel könnten wir:

• Einen Drehregler mit einer sichtbaren Markierung versehen, um zu verdeutlichen, in welche Richtung gedreht werden kann.
• Bei einem selbstgebauten Bedienfeld alle Tasten so gestalten, dass deren Funktionen klar erkennbar sind (z.B. durch eindeutige Symbole).
• LED-Streifen als Signifiers nutzen, um den Nutzer zu bestimmten Bereichen des Geräts zu leiten, besonders bei komplexeren Projekten.

Ein weiteres Beispiel sind Touch-Interfaces: Wenn wir ein Touchscreen-Display nutzen, sollten wir darauf achten, dass die zu drückenden Bereiche klar markiert und ausreichend groß sind, um eine präzise Eingabe zu ermöglichen. Das Verwenden von Signifiers sorgt dafür, dass der Nutzer die beabsichtigte Interaktion schnell erkennt und umsetzen kann.

Indem wir Affordances und Signifiers bewusst einsetzen, machen wir die Benutzung unserer Projekte intuitiver und senken die Einstiegshürde für neue Nutzer.

Feedback

Feedback ist ein weiterer essenzieller Aspekt des UX-Designs. Jede Aktion, die ein Nutzer durchführt, sollte eine wahrnehmbare Reaktion hervorrufen. Ohne Feedback ist es für den Nutzer schwer zu erkennen, ob seine Interaktion erfolgreich war oder ob ein Fehler aufgetreten ist – siehe den erwähnten Gulf of Evaluation.

Als Maker können wir viele verschiedene Formen von Feedback einsetzen:

• Visuelles Feedback: LED-Anzeigen, die aufleuchten, wenn eine Funktion aktiviert wird, oder ein Display, das den aktuellen Status zeigt. Zum Beispiel kann eine grüne LED anzeigen, dass ein System betriebsbereit ist, während eine rote LED einen Fehler signalisiert.
• Akustisches Feedback: Ein Piepton kann darauf hinweisen, dass eine Eingabe erfolgt ist oder ein Fehler aufgetreten ist. Ein sanfter Signalton kann bestätigen, dass eine Einstellung erfolgreich vorgenommen wurde.
• Haptisches Feedback: Vibrationen bei der Berührung eines Touchscreens können dem Nutzer zusätzliche Bestätigung bieten, dass eine Eingabe registriert wurde.

Ein Beispiel für gutes Feedback bei einem selbstgebauten Code-Schloss: Wenn der Nutzer den richtigen Code eingibt, leuchtet eine grüne LED auf. Bei einem falschen Code hingegen leuchtet eine rote LED.

Feedback hilft nicht nur dem Nutzer, die Funktionalität zu verstehen, sondern trägt auch dazu bei, Vertrauen in das System aufzubauen. Es reduziert Unsicherheit und sorgt dafür, dass der Nutzer immer weiß, was gerade passiert. Besonders bei komplexeren Projekten ist es wichtig, dass der Nutzer sofort Rückmeldung erhält, ob seine Eingaben erfolgreich waren oder nicht.

Indem wir in unseren Projekten stets Feedback einplanen, sorgen wir dafür, dass Nutzer mit unseren Kreationen besser interagieren können und die Bedienung angenehmer und effizienter wird.

Fazit

UX-Design ist ein unverzichtbarer Bestandteil des Entwicklungsprozesses, der unsere Projekte von rein technischen Spielereien zu benutzerfreundlichen und inspirierenden Kreationen macht. Indem wir die Prinzipien von Don Norman – wie den Gulf of Execution und Evaluation, Affordances und Signifiers sowie Feedback – in unsere DIY-Projekte integrieren, können wir die Benutzerfreundlichkeit erheblich steigern.

Unsere Projekte sollen nicht nur funktionieren, sondern auch von anderen Menschen genutzt und geschätzt werden können. Gutes UX-Design ermöglicht es uns, Barrieren abzubauen, die Bedienung zu vereinfachen und das Nutzererlebnis zu verbessern. Letztendlich schaffen wir damit Geräte, die nicht nur uns selbst stolz machen, sondern auch andere begeistern und inspirieren.

Also, denke bei deinen nächsten Projekten nicht nur an die Technik, sondern auch an die Menschen, die sie nutzen werden. Denn die beste Technologie ist die, die Freude bringt und von allen verstanden wird.

Inhalt diese Tutorials

• Nachrichten per Telegram senden
• E-Mails versenden
• Nachrichten per WhatsApp senden

Nachrichten per Telegram senden

Eine gängige Möglichkeit ist es, Nachrichten per Telegram zu senden – genauer gesagt an einen Telegram-Bot. Diese Nachrichten kannst du dann umgehend auf deinem Smartphone lesen. Auf Pollux Labs gibt es einige Projekte, die auf Telegram zurückgreifen, zum Beispiel einen Dash Button oder eine Fotofalle mit der ESP32-CAM. Für letzteres Projekt ist Telegram besonders interessant, denn es ist damit auch möglich, Bilder zu senden.

Zunächst benötigst du einen Telegram-Bot. Wie du diesen im Handumdrehen einrichtest, erfährst du in diesem Tutorial. Außerdem benötigst du die Bibliothek UniversalTelegramBot, die du im Bibliotheksverwalter der Arduino IDE findest. Achte darauf, die neueste Version zu installieren und die Bibliothek aktuell zu halten. Sollte die Version im Bibliotheksverwalter veraltet sein, findest du auf GitHub immer die neueste Version zum Download.

Hier der Beispiel-Sketch für deinen ESP8266. Dieser versendet nach dem Start des Boards eine Nachricht:

#include <ESP8266WiFi.h>
#include <WiFiClientSecure.h>
#include <UniversalTelegramBot.h>

// Deine WLAN-Zugangsdaten
const char* ssid = "DEIN WLAN-NETZWERK";
const char* password = "DEIN PASSWORT";

// Dein Bot-Token
#define botToken "DEIN TOKEN"  // den Bot-Token bekommst du vom Botfather)

//Deine User ID
#define userID "DEINE USER ID"

WiFiClientSecure client;
UniversalTelegramBot bot(botToken, client);

void setup() {
  Serial.begin(115200);
  client.setInsecure();

  // Verbindung zum WLAN
  Serial.print("Verbinde mit mit: ");
  Serial.println(ssid);

  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(500);
  }

  Serial.println("");
  Serial.println("Verbunden!");

  bot.sendMessage(userID, "Hier spricht dein ESP8266.", "");
}

void loop() {
}

Nach dem Upload sollte in deiner Telegram-App folgende Nachricht erscheinen:

So funktioniert der Sketch

Nachdem du die benötigten Bibliotheken eingebunden hast (die zwei ersten sind bereits vorinstalliert), musst du ein paar Daten ergänzen. Das sind deine WLAN-Zugangsdaten sowie dein Bot-Token und deine User-ID. Wenn du die beiden letzteren noch nicht hast, schau dir zunächst unser oben verlinktes Tutorial an.

Anschließend initialisierst du den WifiClient sowie den UniversalTelegramBot mit jeweiligen Instanzen:

WiFiClientSecure client;
UniversalTelegramBot bot(botToken, client);

Im Setup stellst du dann die Verbindung zu deinem WLAN her. Sobald die Verbindung steht, verwendest du die Funktion bot.sendMessage, um eine Nachricht an deinen Telegram-Bot zu senden:

bot.sendMessage(userID, "Hier spricht dein ESP8266.", "");

Der erste Parameter in dieser Funktion ist deine userID, die du zu Beginn des Sketchs hinterlegt hast – gefolgt von der Nachricht, die du senden möchtest. Und das war es im Prinzip auch schon! Du kannst dieses Muster nun für dein Projekt adaptieren, indem du die Nachricht zum Beispiel sendest, wenn eine bestimmte Temperatur überschritten wurde – als Inhalt der Nachricht könnte dann z.B. der aktuelle Messwert dienen.

Mit dem ESP32 eine Telegram-Nachricht senden

Natürlich kannst du statt des ESP8266 auch mit einem ESP32 oder einer ESP32-CAM Nachrichten per Telegram senden. Hierfür musst du nur eine Bibliothek austauschen. Statt ESP8266WiFI.h verwendest du WiFi.h.

#include <WiFi.h>
#include <WiFiClientSecure.h>
#include <UniversalTelegramBot.h>

Und: Um eine korrekte Nachricht zu senden, kannst du noch den Inhalt anpassen.

bot.sendMessage(userID, "Hier spricht dein ESP32.", "");

E-Mails mit dem ESP8266 oder ESP32 versenden

Nach Telegram schauen wir uns den Klassiker der elektronischen Nachrichten an, E-Mails. In diesem Tutorial verwenden wir den Service Gmail, um die E-Mails zu versenden. Auch wenn du schon eine Adresse bei Gmail haben solltest, empfehlen wir fürs Experimentieren auf jeden Fall eine brandneue Mail-Adresse anzulegen. Sollte etwas schief laufen, z.B. eine Kontosperrung, weil dein ESP8266 versehentlich zahllose Mails in kurzer Abfolge versendet, ist deine private Mail-Adresse hiervon nicht betroffen.

Um eine neue Adresse anzulegen, rufe zunächst hier Gmail auf und klicke auf Konto erstellen. Sobald dein Konto eingerichtet ist, benötigst du ein App-Passwort, das dein ESP8266 verwenden kann. Um ein App-Passwort anzulegen, öffne dein Google-Konto und klicke auf den Menüpunkt Sicherheit. Klicke anschließend auf den Menü-Punkt Bestätigung in zwei Schritten und folge den Anweisungen, um diese Zwei-Faktor-Authentifizierung zu aktivieren – sie ist nämlich die Voraussetzung für ein App-Passwort.

Sobald du mit der Einrichtung fertig bist, öffne wieder Sicherheit > Bestätigung in zwei Schritten und scrolle ganz nach unten zum Eintrag App-Passwörter. Erstelle nun ein Passwort für E-Mail und wähle als Gerät Andere (benutzerdefinierter Name) aus. Anschließend kannst du einen Namen vergeben, also z.B. ESP8266 oder ESP32.

Das war es zunächst mit den Vorbereitungen, weiter geht es mit einem Beispielsketch, der eine E-Mail an dich versendet.

Eine E-Mail senden

Zunächst benötigst du eine Bibliothek, die du über den Bibliotheksverwalter installieren kannst: ESP Mail Client

Nach der Installation kannst du dich gleich dem Sketch zuwenden. Wir verwenden in diesem Tutorial den Sketch des Blogs RandomNerdTutorials, der ein sehr guter Startpunkt für dieses Thema ist. Im folgenden Sketch musst du nur ein paar Anpassungen machen. Trage an den folgenden Stellen deine Daten ein:

#define WIFI_SSID "REPLACE_WITH_YOUR_SSID" //Dein WLAN-Name
#define WIFI_PASSWORD "REPLACE_WITH_YOUR_PASSWORD" //Dein WLAN-Passwort
#define AUTHOR_EMAIL "YOUR_EMAIL@XXXX.com" //Deine Absendeadresse (die du bei Gmail angelegt hast)
#define AUTHOR_PASSWORD "YOUR_EMAIL_APP_PASS" //Dein App-Passwort
#define RECIPIENT_EMAIL "RECIPIENTE_EMAIL@XXXX.com" //Die Empfänger-Adresse

Der gesamte Sketch:

/*
  Rui Santos
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  Example adapted from: https://github.com/mobizt/ESP-Mail-Client
*/

#include <Arduino.h>
#if defined(ESP32)
  #include <WiFi.h>
#elif defined(ESP8266)
  #include <ESP8266WiFi.h>
#endif
#include <ESP_Mail_Client.h>

#define WIFI_SSID "REPLACE_WITH_YOUR_SSID"
#define WIFI_PASSWORD "REPLACE_WITH_YOUR_PASSWORD"

/** The smtp host name e.g. smtp.gmail.com for GMail or smtp.office365.com for Outlook or smtp.mail.yahoo.com */
#define SMTP_HOST "smtp.gmail.com"
#define SMTP_PORT 465

/* The sign in credentials */
#define AUTHOR_EMAIL "YOUR_EMAIL@XXXX.com"
#define AUTHOR_PASSWORD "YOUR_EMAIL_APP_PASS"

/* Recipient's email*/
#define RECIPIENT_EMAIL "RECIPIENTE_EMAIL@XXXX.com"

/* Declare the global used SMTPSession object for SMTP transport */
SMTPSession smtp;

/* Callback function to get the Email sending status */
void smtpCallback(SMTP_Status status);

void setup(){
  Serial.begin(115200);
  Serial.println();
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  Serial.print("Connecting to Wi-Fi");
  while (WiFi.status() != WL_CONNECTED){
    Serial.print(".");
    delay(300);
  }
  Serial.println();
  Serial.print("Connected with IP: ");
  Serial.println(WiFi.localIP());
  Serial.println();

  /*  Set the network reconnection option */
  MailClient.networkReconnect(true);

  /** Enable the debug via Serial port
   * 0 for no debugging
   * 1 for basic level debugging
   *
   * Debug port can be changed via ESP_MAIL_DEFAULT_DEBUG_PORT in ESP_Mail_FS.h
   */
  smtp.debug(1);

  /* Set the callback function to get the sending results */
  smtp.callback(smtpCallback);

  /* Declare the Session_Config for user defined session credentials */
  Session_Config config;

  /* Set the session config */
  config.server.host_name = SMTP_HOST;
  config.server.port = SMTP_PORT;
  config.login.email = AUTHOR_EMAIL;
  config.login.password = AUTHOR_PASSWORD;
  config.login.user_domain = "";

  /*
  Set the NTP config time
  For times east of the Prime Meridian use 0-12
  For times west of the Prime Meridian add 12 to the offset.
  Ex. American/Denver GMT would be -6. 6 + 12 = 18
  See https://en.wikipedia.org/wiki/Time_zone for a list of the GMT/UTC timezone offsets
  
  config.time.ntp_server = F("pool.ntp.org,time.nist.gov");
  config.time.gmt_offset = 1;
  config.time.day_light_offset = 0;
  */

  /* Declare the message class */
  SMTP_Message message;

  /* Set the message headers */
  message.sender.name = F("ESP");
  message.sender.email = AUTHOR_EMAIL;
  message.subject = F("ESP Test Email");
  message.addRecipient(F("Sara"), RECIPIENT_EMAIL);
    
  /*Send HTML message*/
  /*String htmlMsg = "<div style=\"color:#2f4468;\"><h1>Hello World!</h1><p>- Sent from ESP board</p></div>";
  message.html.content = htmlMsg.c_str();
  message.html.content = htmlMsg.c_str();
  message.text.charSet = "us-ascii";
  message.html.transfer_encoding = Content_Transfer_Encoding::enc_7bit;*/

   
  //Send raw text message
  String textMsg = "Hallo Mensch!";
  message.text.content = textMsg.c_str();
  message.text.charSet = "us-ascii";
  message.text.transfer_encoding = Content_Transfer_Encoding::enc_7bit;
  
  message.priority = esp_mail_smtp_priority::esp_mail_smtp_priority_low;
  message.response.notify = esp_mail_smtp_notify_success | esp_mail_smtp_notify_failure | esp_mail_smtp_notify_delay;


  /* Connect to the server */
  if (!smtp.connect(&config)){
    ESP_MAIL_PRINTF("Connection error, Status Code: %d, Error Code: %d, Reason: %s", smtp.statusCode(), smtp.errorCode(), smtp.errorReason().c_str());
    return;
  }

  if (!smtp.isLoggedIn()){
    Serial.println("\nNot yet logged in.");
  }
  else{
    if (smtp.isAuthenticated())
      Serial.println("\nSuccessfully logged in.");
    else
      Serial.println("\nConnected with no Auth.");
  }

  /* Start sending Email and close the session */
  if (!MailClient.sendMail(&smtp, &message))
    ESP_MAIL_PRINTF("Error, Status Code: %d, Error Code: %d, Reason: %s", smtp.statusCode(), smtp.errorCode(), smtp.errorReason().c_str());

}

void loop(){
}

/* Callback function to get the Email sending status */
void smtpCallback(SMTP_Status status){
  /* Print the current status */
  Serial.println(status.info());

  /* Print the sending result */
  if (status.success()){
    // ESP_MAIL_PRINTF used in the examples is for format printing via debug Serial port
    // that works for all supported Arduino platform SDKs e.g. AVR, SAMD, ESP32 and ESP8266.
    // In ESP8266 and ESP32, you can use Serial.printf directly.

    Serial.println("----------------");
    ESP_MAIL_PRINTF("Message sent success: %d\n", status.completedCount());
    ESP_MAIL_PRINTF("Message sent failed: %d\n", status.failedCount());
    Serial.println("----------------\n");

    for (size_t i = 0; i < smtp.sendingResult.size(); i++)
    {
      /* Get the result item */
      SMTP_Result result = smtp.sendingResult.getItem(i);

      // In case, ESP32, ESP8266 and SAMD device, the timestamp get from result.timestamp should be valid if
      // your device time was synched with NTP server.
      // Other devices may show invalid timestamp as the device time was not set i.e. it will show Jan 1, 1970.
      // You can call smtp.setSystemTime(xxx) to set device time manually. Where xxx is timestamp (seconds since Jan 1, 1970)
      
      ESP_MAIL_PRINTF("Message No: %d\n", i + 1);
      ESP_MAIL_PRINTF("Status: %s\n", result.completed ? "success" : "failed");
      ESP_MAIL_PRINTF("Date/Time: %s\n", MailClient.Time.getDateTimeString(result.timestamp, "%B %d, %Y %H:%M:%S").c_str());
      ESP_MAIL_PRINTF("Recipient: %s\n", result.recipients.c_str());
      ESP_MAIL_PRINTF("Subject: %s\n", result.subject.c_str());
    }
    Serial.println("----------------\n");

    // You need to clear sending result as the memory usage will grow up.
    smtp.sendingResult.clear();
  }
}

So funktioniert der sketch

Weiter oben hast du bereits die Stellen kennengelernt, die du anpassen musst, damit der Sketch funktioniert. Außerdem kannst du noch deine Zeitzone einstellen, um der E-Mail den richtigen Timestamp zu geben:

  config.time.ntp_server = F("pool.ntp.org,time.nist.gov");
  config.time.gmt_offset = 1;
  config.time.day_light_offset = 0;

Der gmt_offset für Deutschland (also der Abstand zur Greenwich Mean Time) wäre in diesem Beispiel 1 – in der Winterzeit. Im Sommer sind es hingegen 2 Stunden.

Den Betreff und den Absender- bzw. Empfängernamen trägst du hier ein:

  /* Set the message headers */
  message.sender.name = F("ABSENDERNAME");
  message.sender.email = AUTHOR_EMAIL;
  message.subject = F("BETREFF");
  message.addRecipient(F("EMPFÄNGERNAME"), RECIPIENT_EMAIL);

Die eigentliche Nachricht findest du hier:

  //Send raw text message
  String textMsg = "Hallo Mensch!";

Hier kannst du, je nachdem was in deinem eigenen Projekt sinnvoll ist, natürlich auch Variablen mitsenden. Lade den Sketch mit deinen Anpassungen auf deinen ESP8266 oder ESP32. Im Seriellen Monitor kannst du mitverfolgen, wie die E-Mail versendet wird und schließlich im Posteingang deines Empfängers landet.

Der obige Sketch funktioniert sowohl für den ESP8266 als auch für den ESP32. Anpassungen sind beim Wechsel der Boards nicht nötig.

Eine WhatsApp-Nachricht mit dem ESP8266 und ESP32 versenden

Kommen wir zu dritten Möglichkeit, deinen ESP8266 oder ESP32 eine Nachricht versenden zu lassen: WhatsApp. Voraussetzung ist hier ein externer Service. Im Folgenden verwenden wir CallMeBot.com – eine kostenlose API, mit deren Hilfe du WhatsApp-Textnachrichten auf dein Smartphone senden kannst.

Hierfür ist keine aufwändige Registrierung nötig, du musst nur kurz deine Mobilfunknummer bei der API anmelden, um einen API-Key zu erhalten. Über den Link oben kannst du die offizielle Anleitung aufrufen – oder einfach die folgenden Schritte ausführen:

• Füge über WhatsApp die folgende Nummer deinen Kontakten hinzu (den Kontaktnamen kannst du frei wählen): +34 644 71 81 99
• Sende anschließend die folgende Nachricht an diese Nummer: I allow callmebot to send me messages
• Du erhältst daraufhin eine Antwort mit deinem API-Key – und das war’s auch schon

Die Bibliothek zum Codieren der Nachrichten

Auch um Nachrichten per WhatsApp senden zu können, benötigst du eine Bibliothek, die du ganz schnell über den Bibliotheksverwalter installieren kannst: UrlEncode

Diese brauchst du, da die Nachrichten über eine URL übertragen werden – z.B. so:

https://api.callmebot.com/whatsapp.php?phone=+49123123123&text=Dieser+Text+ist+codiert&apikey=123123

Die Bibliothek, die du gleich installierst, übernimmt die Aufgabe, deinen Nachrichten-String in das richtige Format zu bringen. Öffne also den Bibliotheksverwalter und suche nach UrlEncode. Installiere anschließend die neueste Version.

die WhatsApp-Nachricht senden

Hier kommt der vollständige Sketch, um eine WhatsApp-Nachricht mit deinem ESP8266 zu verschicken:

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <WiFiClient.h>
#include <UrlEncode.h>

const char* ssid = "DEIN WLAN-NETZ";
const char* password = "DEIN WLAN-PASSWORT";

// Deutschland +49, Beispiel: +49176999888777
String phoneNumber = "DEINE MOBILFUNKNUMMER";
String apiKey = "DEIN API-KEY";

void sendMessage(String message) {

  // Daten, die gesendet werden
  String url = "http://api.callmebot.com/whatsapp.php?phone=" + phoneNumber + "&apikey=" + apiKey + "&text=" + urlEncode(message);
  WiFiClient client;
  HTTPClient http;
  http.begin(client, url);

  // Header
  http.addHeader("Content-Type", "application/x-www-form-urlencoded");

  // HTTP Post request senden
  int httpResponseCode = http.POST(url);
  if (httpResponseCode == 200) {
    Serial.print("Message sent successfully");
  } else {
    Serial.println("Error sending the message");
    Serial.print("HTTP response code: ");
    Serial.println(httpResponseCode);
  }

  http.end();
}

void setup() {
  Serial.begin(115200);

  WiFi.begin(ssid, password);
  Serial.println("Connecting");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to WiFi network with IP Address: ");
  Serial.println(WiFi.localIP());

  // WhatsApp-Nachricht
  sendMessage("Hier spricht dein ESP8266");
}

void loop() {
}

Zu Beginn des Sketchs hinterlegst du wieder deine WLAN-Zugangsdaten. Außerdem benötigst du deine eigene Mobilfunknummer, die du im internationalen Format (also z.B. für Deutschland mit einem +49 zu Beginn) hinterlegen musst. Zuletzt trägst du noch deinen API-Key ein, den du per WhatsApp-Nachricht empfangen hast:

const char* ssid = "DEIN WLAN-NETZ";
const char* password = "DEIN WLAN-PASSWORT";

// Deutschland +49, Beispiel: +49176999888777
String phoneNumber = "DEINE MOBILFUNKNUMMER";
String apiKey = "DEIN API-KEY";

Alles weitere im Sketch dient der Verbindung zu deinem WLAN und dem API-Request (in der Funktion sendMessage(String message)). Recht weit am Ende kannst du deine Textnachricht eingeben, die gesendet werden soll:

// WhatsApp-Nachricht
sendMessage("Hier spricht dein ESP8266");

Lade den Sketch auf deinen ESP8266. Nach dem Upload sollte innerhalb von wenigen Sekunden die entsprechende Nachricht auf deinem Smartphone erscheinen.

Die WhatsApp-Nachricht mit dem ESP32 senden

Wenn du statt eines ESP8266 einen ESP32 oder eine ESP32-CAM verwenden möchtest, musst du nur ein paar andere Bibliotheken zu Beginn des Sketchs einbinden:

#include <WiFi.h>
#include <HTTPClient.h>
#include <UrlEncode.h>

Den restlichen Sketch kannst du beibehalten ohne weitere Anpassungen. Beachte bitte, dass du mit CallMeBot nur reine Textnachrichten (die natürlich auch Variablen enthalten können) senden kannst. Bilder zu senden, funktioniert mit diesem Service leider nicht. Solltest du das vorhaben, verwende besser Telegram oder schaue dir einmal textmebot.com an – diese API ist allerdings kostenpflichtig.

Fazit

In diesem Tutorial hast du drei Methoden kennengelernt, mit denen du Nachrichten versenden kannst – per Telegram, E-Mail oder WhatsApp. Passende Projekte findest du auf Pollux Labs: Du könntest zum Beispiel die ESP8266 Wetterstation um Warnungen ergänzen, die du erhältst, sobald bestimmte Messwerte über- oder unterschritten werden.

So kann dein ESP zum Beispiel alle 20 Minuten aufwachen, einen Sensorwert übermitteln und sich dann wieder schlafen legen. In diesem Tutorial erfährst du, wie du dabei vorgehst und wie den Deep-Sleep-Modus programmierst.

Benötigte Materialien

Für einen ersten Test ohne Sensoren benötigst du nicht viel:

• Ein ESP8266 Modul (z.B. NodeMCU oder Wemos D1 Mini)
• Ein USB-Kabel zum Programmieren
• Arduino IDE

Übrigens – falls du es noch nicht weißt – bei uns erfährst du, wie du deinen ESP8266 mit der Arduino IDE programmierst.

Verkabelung für den ESP8266 Deep Sleep

Die gute Nachricht, du benötigst nur ein einziges Kabel: Um den Deep-Sleep-Modus zu nutzen, muss der RESET-Pin des ESP8266 mit dem D0-Pin verbunden werden. Entweder verwendest du hier ein Female-Female-Kabel, das du direkt an die Pins des ESP steckst – oder du verwendest ein Breadboard. Mehr musst du für den Schlafmodus nicht tun.

Der Sketch

Lege in der Arduino IDE einen neuen Sketch an und füge den folgenden Code ein und lade ihn auf deinen ESP8266.

void setup() {
  // Beginne die serielle Kommunikation mit einer Baudrate von 9600
  Serial.begin(9600);

  // Ausgabe einer Nachricht, wenn der ESP8266 aufwacht
  Serial.println("Der ESP8266 ist aufgewacht!");
}

void loop() {
  // Warte ein wenig, bevor der ESP8266 in den Deep-Sleep-Modus wechselt
  delay(2000);

  // Ausgabe einer Nachricht, bevor der ESP8266 in den Deep-Sleep-Modus wechselt
  Serial.println("Der ESP8266 geht in den Deep-Sleep-Modus...");

  // Gib dem ESP8266 Zeit, die Nachricht zu senden, bevor er in den Deep-Sleep-Modus geht
  delay(100);

  // ESP8266 in den Deep-Sleep-Modus versetzen
  // Die Zeit ist in Mikrosekunden angegeben
  // 1 Sekunde = 1.000.000 Mikrosekunden
  // In diesem Fall wird der ESP8266 alle 10 Sekunden aufwachen
  ESP.deepSleep(10e6);
}

Nun sollte dein ESP8266 alle 10 Sekunden für 2 Sekunden aufwachen.

Benötigte Materialien:

1. Arduino (z.B. Arduino Uno, Mega oder Nano)
2. OLED-Display (z.B. 128×64 Pixel, I2C-Kommunikation)
3. Jumper-Kabel (männlich-männlich)
4. Breadboard (optional)

Schritt 1: Verkabelung

Bevor wir mit der Programmierung beginnen, müssen wir das Display mit dem Arduino verbinden. Hier ist, wie Du es verkabelst:

1. Schließe GND (Ground) des OLED-Displays an den GND-Pin des Arduino an.
2. Verbinde VCC (Power) des Displays mit dem 5V-Pin des Arduino.
3. Schließe SDA (Daten) des Displays an den A4-Pin (SDA) des Arduino Uno oder Mega, bzw. an den A4-Pin (SDA) des Arduino Nano an.
4. Verbinde SCL (Clock) des Displays mit dem A5-Pin (SCL) des Arduino Uno oder Mega, bzw. an den A5-Pin (SCL) des Arduino Nano.

Wenn Du ein Breadboard verwendest, stecke das -Display auf das Breadboard und verbinde es mit dem Arduino über Jumper-Kabel.

Schritt 2: Bibliotheken installieren

Um das OLED-Display mit dem Arduino zu verwenden, benötigen wir zwei Bibliotheken: die Adafruit-GFX-Bibliothek und die Adafruit-SSD1306-Bibliothek. Du kannst sie direkt aus der Arduino-IDE heraus installieren:

1. Öffne die Arduino-IDE und gehe zu „Sketch“ > „Bibliothek einbinden“ > „Bibliotheken verwalten…“.
2. Suche nach „Adafruit GFX Library“ und installiere die neueste Version.
3. Suche anschließend nach „Adafruit SSD1306“ und installiere auch hier die neueste Version.

Schritt 3: Beispielcode laden und anpassen

Jetzt, wo die Verkabelung und die Bibliotheken bereit sind, können wir den Beispielcode laden und anpassen:

1. Öffne die Arduino-IDE und gehe zu „Datei“ > „Beispiele“ > „Adafruit SSD1306“ > „ssd1306_128x64_i2c“.
2. Suche im Code nach der Zeile #define OLED_RESET 4 und ändere sie in #define OLED_RESET -1, um den Reset-Pin zu deaktivieren (wir benötigen ihn nicht).
3. Suche im Code nach der Zeile Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET); und ändere sie in Adafruit_SSD1306 display(128, 64, &Wire, -1); für ein 128×64 Pixel OLED-Display.

Schritt 4: Code hochladen und Display testen

Es ist Zeit, den angepassten Beispielcode auf Deinen Arduino zu laden und das OLED-Display zu testen:

1. Stelle sicher, dass Dein Arduino über USB mit Deinem Computer verbunden ist.
2. Wähle in der Arduino-IDE unter „Werkzeuge“ > „Board“ das richtige Arduino-Board aus (z.B. Arduino Uno, Mega oder Nano).
3. Wähle unter „Werkzeuge“ > „Port“ den richtigen USB-Anschluss für Deinen Arduino aus.
4. Klicke auf den „Hochladen“-Button (Pfeilsymbol) in der Arduino-IDE, um den Code auf Deinen Arduino zu übertragen.

Sobald der Code erfolgreich hochgeladen wurde, sollte das Display verschiedene Muster und Text anzeigen. Herzlichen Glückwunsch, Du hast erfolgreich ein OLED-Display an Deinen Arduino angeschlossen und verwendet!

Schritt 5: Dein eigenes Display-Design erstellen

Nun, da Du weißt, wie Du ein OLED-Display anschließt und den Beispielcode verwendest, kannst Du Deine eigenen Designs und Texte erstellen! Hier sind einige grundlegende Funktionen, die Du nutzen kannst:

• display.clearDisplay(); – Löscht den Display-Inhalt.
• display.setTextSize(1); – Setzt die Textgröße (1, 2, 3…).
• display.setTextColor(WHITE); – Setzt die Textfarbe (OLED-Displays sind normalerweise monochrom, daher ist Weiß die Standardfarbe).
• display.setCursor(0, 0); – Setzt den Cursor an die angegebene Position (x, y).
• display.println("Hallo, Maker!"); – Gibt Text auf dem Display aus.
• display.display(); – Aktualisiert das Display, um die vorgenommenen Änderungen anzuzeigen.

Fühle Dich frei, mit diesen Funktionen zu experimentieren und Dein eigenes Display-Design zu erstellen. Denke daran, den Befehl display.display(); nach Deinen Anweisungen zu verwenden, um die Änderungen auf dem Display sichtbar zu machen. Übrigens, in diesem Tutorial lernst du, wie du Bilder auf dem OLED-Display anzeigst.

Der Anschluss am ESP8266

Der Anschluss eines OLED-Displays an einen ESP8266 ist ebenso einfach wie beim Arduino. Hier ist, wie Du es verkabelst:

Benötigte Materialien:

1. ESP8266 (z.B. NodeMCU, Wemos D1 Mini)
2. OLED-Display (z.B. 128×64 Pixel, I2C-Kommunikation)
3. Jumper-Kabel (männlich-männlich)
4. Breadboard (optional)

Schritt 1: Verkabelung und Code

Um das OLED-Display mit dem ESP8266 zu verbinden, führe die folgenden Schritte aus:

1. Schließe GND (Ground) des OLED-Displays an den GND-Pin des ESP8266 an.
2. Verbinde VCC (Power) des Displays mit dem 3.3V-Pin des ESP8266.
3. Schließe SDA (Daten) des Displays an den D2-Pin (GPIO4, SDA) des ESP8266 an.
4. Verbinde SCL (Clock) des Displays mit dem D1-Pin (GPIO5, SCL) des ESP8266.

Wenn Du ein Breadboard verwendest, stecke das OLED-Display auf das Breadboard und verbinde es mit dem ESP8266 über Jumper-Kabel.

Die restlichen Schritte zur Installation der Bibliotheken und zum Anpassen des Beispielcodes bleiben dieselben. Du musst lediglich eine kleine Änderung am Beispielcode vornehmen, um die Pin-Belegung für den ESP8266 festzulegen:

1. Füge im Code die Zeile #include <Wire.h> hinzu, um die Wire-Bibliothek einzubinden.
2. Füge direkt nach der Zeile Wire.begin(); die folgenden Zeilen hinzu, um die I2C-Pins für den ESP8266 festzulegen:

#if defined(ESP8266)
  Wire.begin(4, 5); // SDA, SCL
#endif

Das war’s! Jetzt kannst Du den angepassten Code auf Deinen ESP8266 hochladen und das Display wie zuvor beschrieben verwenden.

Was ist der VL53L0X-Sensor?

Der VL53L0X ist ein Time-of-Flight (ToF)-Laserabstandssensor, der mithilfe von Infrarot-Licht die Entfernung zu einem Objekt misst. Er ist kompakt und leicht zu integrieren, was ihn ideal für die Anwendung in Roboterprojekten, Drohnen oder zur Objekterkennung macht.

Was benötigst Du für dieses Projekt?

Neben dem Sensor benötigst du nur einen Microcontroller – in diesem Tutorial verwenden wir den Arduino UNO. Selbstverständlich kannst du auch jedes andere verwenden, sofern es über I²C verfügt.

AZDelivery Mikrocontroller Board AZ-ATmega328-Board mit USB-Kabel inklusive E-Book!

10,99 €

AZDelivery VL53L0X Time of Flight Sensor 940nm kompatibel mit Arduino inklusive E-Book!

Schnelle Reaktionszeit: 50 ms.

8,49 €

Verkabelung des Sensors mit dem Arduino UNO

Bevor wir anfangen, den Sensor zu programmieren, müssen wir ihn erst einmal mit dem Arduino UNO verbinden. Die Verkabelung ist denkbar einfach:

1. Verbinde den VCC (oder auch VIN)-Pin des VL53L0X mit dem 5V-Pin des Arduino UNO.
2. Verbinde den GND-Pin des Sensors mit dem GND-Pin des Arduino UNO.
3. Verbinde den SDA-Pin mit dem A4-Pin (SDA) des Arduino UNO.
4. Verbinde den SCL-Pin mit dem A5-Pin (SCL) des Arduino UNO.

Programmierung des Arduino UNO

Um den VL53L0X-Sensor verwenden zu können, musst Du zunächst die passende Bibliothek in Deiner Arduino IDE installieren. Hierzu gehst Du wie folgt vor:

1. Öffne die Arduino IDE auf Deinem Computer.
2. Klicke im Menü auf „Sketch“ > „Bibliothek einbinden“ > „Bibliotheken verwalten…“.
3. Suche im Bibliotheksmanager nach „VL53L0X“ und installiere die Bibliothek „VL53L0X von Pololu“.

Jetzt können wir mit dem Programmieren beginnen! Erstelle einen neuen Sketch und füge den folgenden Code ein:

#include <Wire.h>
#include <VL53L0X.h>

VL53L0X sensor;

void setup() {
  Serial.begin(9600);
  Wire.begin();

  sensor.init();
  sensor.setTimeout(500);

  Serial.println("VL53L0X-Sensor bereit!");
}

void loop() {
  int distance = sensor.readRangeSingleMillimeters();

  if (sensor.timeoutOccurred()) {
    Serial.print("Timeout! ");
  }

  Serial.print("Abstand: ");
  Serial.print(distance);
  Serial.println(" mm");

  delay(1000);
}

Lade den Sketch auf Deinen Arduino UNO hoch und öffne den seriellen Monitor. Du solltest nun alle Sekunden die gemessene Entfernung in Mill

imetern angezeigt bekommen.

Wie funktioniert der Code?

Lass uns einen Blick auf die einzelnen Bestandteile des Codes werfen, um besser zu verstehen, wie das Programm funktioniert: Zuerst binden wir die benötigten Bibliotheken ein, nämlich Wire.h für die I2C-Kommunikation und VL53L0X.h für den Sensor.

#include <Wire.h>
#include <VL53L0X.h>

Danach erstellen wir ein Objekt sensor der Klasse VL53L0X.

VL53L0X sensor;

Im setup()-Funktionsteil initialisieren wir die serielle Kommunikation mit einer Baudrate von 9600, die I2C-Kommunikation und den Sensor. Wir setzen außerdem ein Timeout von 500 ms für den Sensor, damit das Programm nicht ewig hängt, falls es Probleme bei der Messung geben sollte.

void setup() {
  Serial.begin(9600);
  Wire.begin();

  sensor.init();
  sensor.setTimeout(500);

  Serial.println("VL53L0X-Sensor bereit!");
}

In der loop()-Funktion lesen wir die Entfernung in Millimetern mit sensor.readRangeSingleMillimeters() und speichern den Wert in der Variable distance. Wir überprüfen, ob ein Timeout aufgetreten ist, und geben eine entsprechende Meldung aus. Anschließend geben wir den gemessenen Abstand auf dem seriellen Monitor aus und warten eine Sekunde, bevor wir die nächste Messung durchführen.

void loop() {
  int distance = sensor.readRangeSingleMillimeters();

  if (sensor.timeoutOccurred()) {
    Serial.print("Timeout! ");
  }

  Serial.print("Abstand: ");
  Serial.print(distance);
  Serial.println(" mm");

  delay(1000);
}

Jetzt weißt Du, wie Du den Time-of-Flight-Sensor mit Deinem Arduino UNO verbinden und verwenden kannst, um präzise Entfernungsmessungen durchzuführen. Mit dieser neuen Fähigkeit kannst Du nun kreative Projekte entwickeln, bei denen Entfernungen eine wichtige Rolle spielen, wie beispielsweise Parkassistenten, Hinderniserkennung für Roboter oder sogar interaktive Kunstinstallationen.

Die ENtfernung auf einem OLED-Display anzeigen

Um das Projekt zu erweitern und die gemessene Entfernung auf einem OLED-Display anzuzeigen, benötigst Du zusätzlich:

• Ein I2C-OLED-Display (128×64 Pixel, z.B. SSD1306)
• Ein paar zusätzliche Jumper-Kabel

Verkabelung des OLED-Displays mit dem Arduino UNO

Die Verkabelung des OLED-Displays ist ähnlich einfach wie beim VL53L0X-Sensor:

1. Verbinde den VCC-Pin des OLED-Displays mit dem 5V-Pin des Arduino UNO.
2. Verbinde den GND-Pin des OLED-Displays mit dem GND-Pin des Arduino UNO.
3. Verbinde den SDA-Pin des OLED-Displays mit dem A4-Pin (SDA) des Arduino UNO.
4. Verbinde den SCL-Pin des OLED-Displays mit dem A5-Pin (SCL) des Arduino UNO.

Da das OLED-Display und der VL53L0X-Sensor beide I2C-Geräte sind, können sie gemeinsam an den I2C-Bus des Arduino UNO angeschlossen werden.

Programmierung des Arduino UNO

Um das OLED-Display zu verwenden, musst Du zunächst die passenden Bibliotheken in Deiner Arduino IDE installieren. Hierzu gehst Du wie folgt vor:

1. Öffne die Arduino IDE auf Deinem Computer.
2. Klicke im Menü auf „Sketch“ > „Bibliothek einbinden“ > „Bibliotheken verwalten…“.
3. Suche im Bibliotheksmanager nach „Adafruit SSD1306“ und installiere die Bibliothek „Adafruit SSD1306 by Adafruit“.
4. Suche im Bibliotheksmanager nach „Adafruit GFX“ und installiere die Bibliothek „Adafruit GFX Library by Adafruit“.

Jetzt können wir den Code erweitern, um das OLED-Display zu nutzen. Erstelle einen neuen Sketch oder bearbeite den bestehenden und füge den folgenden Code ein:

#include <Wire.h>
#include <VL53L0X.h>
#include <Adafruit_SSD1306.h>
#include <Adafruit_GFX.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

VL53L0X sensor;
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire);

void setup() {
  Serial.begin(9600);
  Wire.begin();

  sensor.init();
  sensor.setTimeout(500);

  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);
  display.clearDisplay();
  display.setTextSize(1);
  display.setTextColor(WHITE);
  display.setCursor(0, 0);

  Serial.println("VL53L0X-Sensor bereit!");
}

void loop() {
  int distance = sensor.readRangeSingleMillimeters();

  if (sensor.timeoutOccurred()) {
    Serial.print("Timeout! ");
  }

  display.clearDisplay();
  display.setCursor(0, 0);
  display.print("Abstand: ");
  display.print(distance);
  display.print(" mm");
  display.display();

  Serial.print("Abstand: ");
  Serial.print(distance);
  Serial.println(" mm");

  delay(1000);
}

Lade den Sketch auf Deinen Arduino UNO hoch. Die gemessene Entfernung sollte nun auf dem OLED-Display angezeigt werden.

Möchtest du die Entfernung lieber mit Ultraschall messen? Bei uns erfährst du auch, wie das geht.

Das Internet of Things liegt im Trend und wird sicherlich auch nicht wieder verschwinden. So ist es nur logisch, dass sich auch ältere Kinder und Heranwachsende mit diesem spannenden Thema beschäftigen möchten.

Ein besonders interessanter Bausatz in diesem Bereich ist Spencer – der DIY Sprachassistent von CircuitMess.

Spencer ist ein Sprachassistent, der eine Vielzahl von Anweisungen verstehen und ebenso viele Fragen beantworten kann. Du kannst ihn z.B. nach der Uhrzeit fragen, oder wie das Wetter draußen ist. Oder ihn bitten, dir einen Witz zu erzählen. Der Fokus liegt hier auf Spaß – viele deiner Fragen wird Spencer mit einem launischen Kommentar beantworten. Trotzdem ist er immer wieder für einen Überraschung gut.

Allerdings: Aktuell (Stand Mai 2021) versteht und spricht Spencer nur Englisch. Da die Gespräche jedoch recht einfach gehalten sind, sollten auch größere Kinder (der Bausatz ist ab 11 Jahren) mit ihrem Schulenglisch gut zurecht kommen.

CircuitMess Spencer – DIY Sprachassistent Bausatz | Lerne Elektronik und Programmieren | Robotik Lernen | Mint Projekte für Kinder | ab 11 Jahren | Mint Bauspielzeug

Was kann ich lernen?

Du steckst den Bausatz nicht einfach nur zusammen und fertig. Um Spencer aufbauen zu können, musst du ein paar wenige Bauteile verlöten – deshalb ist ein Lötkolben unbedingt erforderlich. Das Löten hält sich aber in Grenzen und ist auch recht einfach gehalten. Du musst lediglich ein paar Stiftleisten, Widerstände, Kondensatoren etc. auf die Platinen löten. Schiefgehen kann hier eigentlich nichts.

Abgesehen vom Löten lernst du auch deine eigenen Programme zu erstellen. CircuitMess hat hierfür einen eigenen Code-Editor erstellt, mit dem du grafisch – also ohne tatsächlich Code zu schreiben – sogenannte Sketches für den Spencer programmieren kannst.

Die Bedienung erinnert hier stark an den beliebten Editor Scratch. Du kannst damit z.B. deinen Spencer so programmieren, dass er dir auch Knopfdruck zuhört und nachspricht, was er verstanden hat.

Was ist der CircuitMess Spencer eigentlich?

Spencer ist im Prinzip ein kleiner Kasten aus Acryl-Glas mit einem großen roten Knopf darauf. In ihm schlummert aber recht aktuelle Technik.

An der Frontseite verleiht im ein großen Panel mit LEDs ein Gesicht. Hier kannst du Animationen laufen lassen oder auch die Uhrzeit anzeigen.

Angetrieben wird Spencer von einem ESP32 – ein Microcontroller, der für seinen Bereich recht leistungsstark ist und sich auch mit deinem WLAN verbinden kann. Apropos Internet: Um Spencer sinnvoll verwenden zu können, solltest du Zugriff auf ein WLAN-Netzwerk haben.

Auf der Rückseite befindet sich ein kleiner Lautsprecher, über den dir Spencer antworten kann. Fehlt noch der große rote Knopf – diesen drückst du, um Fragen zu stellen und Anweisungen zu geben. Natürlich kannst du ihn in deinen eigenen Programmen auch anderweitig einsetzen.

Das ist im Bausatz enthalten

Du findest im Karton natürlich alle benötigten Teile:

• Zwei Platinen mit LEDs und dem ESP32
• Widerstände, Kondensatoren, LED etc. zum selbst verlöten
• Die Box aus Acrylglas
• Lautsprecher und Knopf
• Schrauben und Muttern
• Das passende USB-Kabel

Nicht enthalten ist das Werkzeug. Du benötigst du noch einen Lötkoblen samt Lötzinn, einen Saitenschneider und einen Kreuzschraubendreher.

Auch ein Netzteil ist nicht dabei – du kannst deinen Spencer zwar über USB von deinem Computer aus mit Strom versorgen. Falls du das nicht möchtest, benötigst du noch ein handelsübliches 5V-Netzeil mit USB-Port.

Spencer aufbauen

Für den Aufbau solltest du dir ungefähr zwei Stunden Zeit nehmen, um dich in aller Ruhe dem Löten widmen zu können. Denn damit fängt alles an.

CircuitMess hat eine sehr gute Anleitung bereitgestellt, die dich Schritt für Schritt mit vielen Bildern durch den Aufbau führt. Du findest die Anleitung hier. Auch diese Anleitung ist auf Englisch – allerdings sehr einfach geschrieben, sodass sie dir keine Probleme bereiten sollte.

Wie gesagt, beginnst du mit dem Löten. Hier ist alles klar beschrieben und auf den Platinen beschriftet. Damit finden sich auch Löteinsteiger gut zurecht, zumal die Lötstellen sehr gut zugänglich sind und weit entfernt von sensiblen Teilen liegen.

Die Gefahr, dass du beim Löten also etwas kaputt machst, ist sehr gering.

Nach dem Löten folgt der Zusammenbau. Auch das macht aufgrund der Einfachheit recht viel Spaß. Alle Teile passen perfekt zusammen, sodass sich die Fummelei stark in Grenzen hält.

Die Maker von CircuitMess haben hier ganze Arbeit geleistet und dafür gesorgt, dass zu keiner Zeit auch nur ein Hauch Frust aufkommt.

CircuitBlocks installieren

Nachdem du deinen Spencer zusammengebaut hast, wird es Zeit für etwas Code! Auf dem ESP32 ist bereits eine sogenannte Firmware vorinstalliert. Sobald du deinen neuen Sprachassistenten per USB mit Strom versorgst, startet er mit einer Begrüßung und dem Hinweis, dass er dein Zugangsdaten fürs Internet braucht.

Um diese Einstellung vorzunehmen – und Spencer danach auch neu zu programmieren – eignet sich der hauseigene Editor CircuitBlocks, den du hier herunterladen kannst. Sobald du CircuitBlocks installiert hast, erwartet dich eine aufgeräumte Oberfläche.

Oben rechts findest du die beiden Buttons Restore firmware und Spencer Settings. Mit ersterem kannst du deinen Spencer jederzeit wieder in den Anfangszustand versetzen. Hinter dem zweiten trägst du deine WLAN-Zugangsdaten ein und legst fest.

Wir möchten an dieser Stelle nicht zu tief in die Grundlagen von CircuitBlocks einsteigen, denn auch hierfür gibt es eine sehr gute Anleitung.

Dein erstes eigenes Programm

Diese Anleitung führt dich auch Schritt für Schritt durch die Basics und du „schreibst“ deinen ersten eigenen Code für deinen CircuitMess Spencer. Allerdings „schreibst“ du ihn nicht wirklich, sondern verwendest die Code-Blöcke auf der linken Seite. Du kannst dir aber jederzeit den Code, der hieraus in der Programmiersprache C++ generiert wird, anzeigen lassen.

Mit den Beispiel-Programmen in der Anleitung zauberst du zunächst Animationen auf das LED-Panel und lässt verschiedene Sound abspielen. Anschließend wird es allerdings schon spannender: Mit wenigen Blöcken bringst du Spencer dazu, dir zuzuhören und das, was er gehört hat, nachzusprechen. Er versteht allerdings nur Englisch, wie gesagt.

Fazit

Dieser Bausatz vom jungen, kroatischen Unternehmen CircuitMess vereint mehrere interessant Aspekte des Bastelns mit Elektronik. Da wäre zum Einen das Löten, das seinen ganz eigenen Charme hat – allerdings hier auch Anfänger nicht überfordert. Allerdings hat natürlich nicht jede*r einen Lötkolben zu Hause – diese gibt es jedoch schon sehr günstig im Handel. Und wer weiß, vielleicht ist das ja nicht das letzte Lötprojekt.

Zum Anderen, dass Spencer zum Themenbereich Internet of Things gehört, also mit der Welt da draußen interagieren kann. CircuitMess spricht auch gerne davon, dass Bastler etwas über künstliche Intelligenz und Spracherkennung lernen. Das stimmt zwar im weitesten Sinne, wir hätten uns jedoch etwas mehr „Stoff“ zu diesem Thema gewünscht.

Apropos, zu vielen Aspekten dieser Themen findest du Tutorials bei Pollux Labs.

Die Verarbeitung aller Bauteile ist exzellent und auch die Verpackung ist liebevoll gestaltet und hochwertig – was für den relativ hohen Preis auch gerechtfertigt ist.

Angehende Makerinnen und Maker finden im CircuitMess Spencer viel Anregung und eine Herausforderung, die gut zu bewältigen ist. Und auch nach dem Aufbau bietet das Programmieren und Ausprobieren noch viele Wochen Spaß – wenn das Thema denn begeistert.

CircuitMess Spencer – DIY Sprachassistent Bausatz | Lerne Elektronik und Programmieren | Robotik Lernen | Mint Projekte für Kinder | ab 11 Jahren | Mint Bauspielzeug

In diesem Tutorial erfährst du, wie du die das RTC-Modul DS1307 am Arduino anschließt und damit die aktuelle Uhrzeit samt Datum auf einem Display anzeigst.

Was ist eine Real Time Clock?

In den meisten Fällen erhältst du beim Kauf einer Real Time Clock* ein Modul, auf dem oft ein DS1307 samt einer kleinen Batterie verbaut ist. Diese sorgt dafür, dass dein Arduino die aktuelle Zeit ermitteln kann, auch wenn es zwischenzeitlich zu einem Stromausfall gekommen ist – denn die RTC wird weiterhin mit Strom versorgt.

Diese Bauteile sind in der Regel recht preisgünstig und werden per I²C am Microcontroller angeschlossen. Die Genauigkeit ist für die allermeisten Projekte ausreichend und die Knopfbatterie hält bis zu fünf Jahre durch.

Die RTC am Arduino anschließen

Dank der Verbindung per I²C benötigst du nur vier Kabel, um die Real Time Clock an deinem Arduino anzuschließen. Wenn du einen Arduino UNO verwendest, benötigst du (neben GND und 5V) hierfür die Pins A4 und A5. Orientiere dich an folgender Skizze:

Wenn du ein anderes Arduino-Modell verwendest, findest du die benötigten Pins in der Arduino-Referenz. Am ESP8266 kommunizierst du mit den Pins D1 (SCL) und D2 (SDA) per I²C. Da der ESP8266 über WLAN verfügt, kannst du hier natürlich aber auch die aktuelle Zeit von einem NTP-Server abfragen.

Die benötigten Bibliotheken

Um eine RTC mit dem Chip DS1307 verwenden zu können, benötigst du zwei Bibliotheken. Öffne hierfür den Bibliotheksverwalter und suche dort nach nach DS1307rtc. Du findest neben der gleichnamigen Bibliothek auch die Bibliothek Time. Installiere jeweils die aktuelle Version.

Sollte deine Real Time Clock einen anderen Chip haben, suche stattdessen nach dessen Namen. Im Folgenden arbeiten wir jedoch mit dem DS1307 weiter.

Wenn beide Bibliothek in deiner Arduino IDE installiert sind, kann es auch schon mit dem Einstellen der Uhr weitergehen.

Die aktuelle Uhrzeit in der RTC einstellen

Bevor in deinem RTC-Modul die Uhr ticken kann, muss es natürlich erst einmal wissen, wie viel Uhr es ist. Hierfür benötigst du einen Sketch, der bereits in den mitgelieferten Beispielen der Bibliothek DS1307RTC vorhanden ist.

Den Sketch findest du in der Arduino IDE unter Datei > Beispiele > DS1307RTC > SetTime

Öffne ihn und lade ihn auf deinen Arduino. Mit diesem Sketch „lädt“ dein Arduino die aktuelle Uhrzeit samt Datum von deinem Computer und speichert beides in der RTC.

Das war es auch schon mit der Konfiguration. Den Sketch SetTime musst du erst wieder nach dem nächsten Batteriewechsel ausführen.

Uhrzeit und Datum im Seriellen Monitor ausgeben

Für einen ersten Test reicht ebenfalls ein Beispiel-Sketch der Bibliothek. Öffne im gleichen Verzeichnis den Sketch ReadTest und lade ihn auf deinen Arduino.

In deinem Seriellen Monitor sollte nun im Sekundentakt die aktuelle Uhrzeit und das Datum erscheinen.

Uhrzeit und Datum auf einem LCD-Display anzeigen

Der Serielle Monitor ist das Eine – aber eine Digitaluhr ist etwas ganz Anderes. Schließe hierfür zunächst dein LCD-Display am Arduino zusätzlich zur RTC an.

Danach kommt der Sketch an die Reihe. Um es einfach zu halten, haben wir einfach den Sketch ReadTest modifiziert und um das Setup des LCD-Displays und der Ausgabe darauf erweitert.

Du findest im Loop nun unter jeder Ausgabe von Stunden, Minuten etc. auch den entsprechenden lcd.print() direkt darunter.

Ein besonderer Clou ist hierbei die Funktion void print2digits(), die auch schon im Sketch vorhanden ist. Diese Funktion sorgt dafür, dass jede Zahl zweistellig angezeigt wird. Ohne diese Funktion würde die Uhrzeit 16:08 als 16:8 auf dem Display dargestellt.

Hier nun der gesamte Sketch:

#include <Wire.h>
#include <TimeLib.h>
#include <DS1307RTC.h>

#include <LiquidCrystal.h>
const int rs = 11, en = 12, d4 = 2, d5 = 3, d6 = 4, d7 = 5; //Anschlüsse LCD -> Arduino
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

void setup() {
  Serial.begin(9600);
  while (!Serial) ; // wait for serial
  delay(200);
  Serial.println("DS1307RTC Read Test");
  Serial.println("-------------------");
}

void loop() {

  // Festlegen, wie viele Zeichen und Reihen das Display hat:
  lcd.begin(16, 2);

  tmElements_t tm;

  if (RTC.read(tm)) {
    Serial.print("Ok, Time = ");
    print2digits(tm.Hour);
    lcd.setCursor(0, 0);
    lcd.print(tm.Hour);

    Serial.write(':');
    lcd.print(':');

    print2digits(tm.Minute);
    lcd.print(tm.Minute);

    Serial.write(':');
    lcd.print(':');

    print2digits(tm.Second);
    lcd.print(tm.Second);

    Serial.print(", Date (D/M/Y) = ");
    Serial.print(tm.Day);
    lcd.setCursor(0, 1);
    lcd.print(tm.Day);

    Serial.write('/');
    lcd.print('/');
    
    Serial.print(tm.Month);
    lcd.print(tm.Month);

    Serial.write('/');
    lcd.print('/');
    
    Serial.print(tmYearToCalendar(tm.Year));
    lcd.print(tmYearToCalendar(tm.Year));
    
    Serial.println();
  } else {
    if (RTC.chipPresent()) {
      Serial.println("The DS1307 is stopped.  Please run the SetTime");
      Serial.println("example to initialize the time and begin running.");
      Serial.println();
    } else {
      Serial.println("DS1307 read error!  Please check the circuitry.");
      Serial.println();
    }
    delay(9000);
  }
  delay(1000);
}

void print2digits(int number) {
  if (number >= 0 && number < 10) {
    Serial.write('0');
    lcd.print('0');
  }
  Serial.print(number);
}

Wie geht es weiter?

Weiter Anleitungen zu Bauteilen und vollständige Arduino Projekte findest du in unserem Buch für angehende Maker:

Vom Anfänger zum Maker: Mit dem Arduino und ESP8266

• Kumbartzki, Frederik (Autor)

17,90 €

Bei Amazon kaufen

Du hast nun die Möglichkeit, in deinem Projekt immer die aktuelle Uhrzeit zu verwenden. Welche Ideen kommen dir nun in den Sinn? Wie wäre es z.B. mit einem Wecker, der dich mit einem Piezo weckt?

In diesem Tutorial lernst du, wie du den DHT11 und den DHT22 am Arduino und ESP8266 anschließt und verwendest.

Den Sensor DHT11 anschließen

Der Anschluss des DHT11 am Arduino ist ganz leicht, du benötigst lediglich drei Kabel. Orientiere dich beim Anschluss an folgender Skizze. An welchen Digital-Pin du deinen Sensor anschließt, steht dir natürlich frei. Damit der Code dieses Tutorials passt, wähle bitte den Pin 4.

Den Sensor DHT22 anschließen

Um deinen DHT22 am Arduino oder ESP8266 anzuschließen, benötigst du neben Sensor, Microcontroller, Breadboard und Kabeln einen Widerstand mit 10 kΩ. Orientiere dich beim Anschluss am Arduino an folgender Skizze:

Hier ist der Signalpin des DHT22 am Digital-Pin 4 des Arduinos angeschlossen – so passt der Anschluss zum Sketch unten. Prinzipiell steht es dir natürlich frei, welchen Digital-Pin du verwendest.

Der Anschluss am ESP8266 sieht folgendermaßen aus:

Beim Arduino kannst du den DHT11 oder DHT22 entweder mit 5 Volt oder 3,3 Volt versorgen. Beim ESP8266 stehen dir natürlich nur 3,3 Volt zur Verfügung.

Die passenden Bibliotheken

Du benötigst zwei Bibliotheken, von denen du jedoch nur eine im Sketch einbinden musst. Öffne zunächst deinen Bibliotheksmanager und suche dort nach Adafruit Unified Sensor. Installiere anschließend die aktuelle Version.

Suche nun nach DHT11 oder DHT22 und installiere die Bibliothek DHT sensor library.

Wenn du beide Bibliotheken erfolgreich installiert hast, geht es weiter mit der Messung.

Temperatur und Luftfeuchtigkeit messen

Binde als erstes die Bibliothek für den Sensor zu Beginn deines Sketchs ein:

#include "DHT.h"

Anschließend definierst du den Pin, an dem der Sensor angeschlossen ist. In der Zeile danach legst du den Typ des DHT fest: In unserem Fall also DHT22 – wenn du einen DHT11 verwendest, kannst du die Zeile entsprechend abändern.

#define DHTPIN 4   
#define DHTTYPE DHT22

Nun fehlen noch zwei Variablen für die Temperatur und die Luftfeuchtigkeit sowie ein Objekt für den Sensor namens dht.

float temp;
float humidity;

DHT dht(DHTPIN, DHTTYPE);

In der Setup-Funktion startest du den Sensor mit

dht.begin();

Die eigentliche Messung findet dann im Loop statt. Diese könnte dank der eingebundenen Bibliothek kaum einfacher sein, da es passende Funktionen gibt. Die Messergebnisse speicherst du in den entsprechenden Variablen:

temp = dht.readTemperature();
humidity = dht.readHumidity();

Und das war es schon. Hier nun der vollständige Sketch, in dem du die Messergebnisse alle zwei Sekunden im Seriellen Monitor ausgibst:

#include "DHT.h"

#define DHTPIN 4   
#define DHTTYPE DHT22

float temp;
float humidity;

DHT dht(DHTPIN, DHTTYPE);

void setup() {
  Serial.begin(9600);
  dht.begin();
}

void loop() {

  temp = dht.readTemperature();
  humidity = dht.readHumidity();
  
  Serial.print("Temperatur: ");
  Serial.print(temp);
  Serial.println(" *C");
  Serial.print("Luftfeuchtigkeit: ");
  Serial.print(humidity);
  Serial.println(" %");

  Serial.println();
  delay(2000);

}

Wie geht es weiter?

Wie wäre es mit einem eigenen ESP8266 Web Server, über den du die aktuelle Temperatur vom Smartphone aus abrufen kannst?