Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
DIY: Wordclock/Wortuhr selber bauen mit Arduino,Wlan,NeoPixel
Als ich letztens die originale QlockTwo gesehen habe war ich sofort verliebt. Nach kurzer Recherche habe ich dann ernüchternd festgestellt, dass ich soviel Geld nicht für eine Uhr ausgeben werde und mich sofort dran gemacht nach Alternativen zu suchen. Es gibt allerlei fertige Bausätze, bei denen man sich nur noch drum kümmern muss eine Frontplatte zu bekommen. Diese bewegen sich aber auch schon im 250€-Rahmen. In meinen Augen immernoch sehr teuer. Dann bin ich auf die Seite von Edgar alias techniccontroller gestoßen und wusste: "So baue ich meine Wortuhr auch!"
Inhaltsangabe:
- Materialliste
- Frontplatte erstellen/ Folie anbringen
- Software auf dem Arduino NodeMCU installieren
- LED Matrix bauen/löten
- Weitere Komponenten verbinden/verlöten
- Fertigstellung
- Einstellungen der Web-Oberfläche
Materialliste
- ESP8266 NodeMCU V3 (ein Arduino)
- Netzteil mit Micro-Usb Kabel (5V, 3A)
- Neo-Pixel LED's (5m, 30 LED's/m) da wir 125 LED's brauchen
- Bilderrahmen 50x50 (z.B Ribba von Ikea)
- Einen Widerstand (1000 ohm, 1k ohm)
- Einen Kondenstator (1000 uf)
- Einige Kabel
- Pappkarton 50x50
- Cutter-Messer oder Schere
- Lötkolben
- Heißkleber
Frontplatte erstellen/ Folie anbringen
Die Frontplatte zu erstellen war dank Edgars Vorlage kein Problem. Ich habe die Schriftart, die Farben und ein paar Buchstaben geändert. Die bearbeitbare SVG und die fertig plotbare PDF liegen in meinem Git-Repository. (frontplatte_weiss.svg, frontplatte_weiss_pfad.pdf). Um die SVG zu bearbeiten benutzt man am einfachsten einfach Inkskape. Das Programm ist kostenlos und funktioniert wunderbar.
Bestellt habe ich meine Folie bei printingpoint.de. Dort dann einfach 50x50cm angeben und bei fast allen anderen Farben außer Schwarz die 2. Farbe auf Schwarz setzen, da man sonst Gefahr läuft, dass die Folie nicht blickdicht ist und man das Raster durchsieht.
Als die Folie da war bin ich so vorgegangen:
- Arbeitsfläche gründlich reinigen
- Die Glasplatte mit Glasreiniger gründlich reinigen
- Wasser-Seifen-Mischung (Eine Sprühflsche voll mit einem guten Schuss Spülmittel) herstellen und in eine Sprühflasche füllen
- Glasplatte mit ordentlich Wasser-Seifen-Mischung besprühen
- Klebefolie von der Folie abziehen und vorsichtig aufs Glas anbringen
- Mit einem Raken oder sonstigem harten aber stumpfen Gegenstand Luftbläschen und Wasser herausdrücken. Hierbei sollte man sich Zeit lassen.
- Ist die Folie dann platziert kann man nach etwas Trocknungszeit dann auch die 2. Folie abziehen. Hierbei aber sehr vorsichtig vorgehen! Nicht dass einzelne Buchstaben dabei zerreißen.
Bei mir sah das Ganze dann so aus (Die oberste Folie war noch nicht entfernt)
Software auf dem Arduino NodeMCU installieren
Als erstes braucht ihr Arduino IDE. Nachdem ihr das Programm installiert habt clont euch mein Git-Repository in den "Sketch" Ordner von Arduino IDE (oder downloaded das Repository als Zip und entpackt es dort). Hier gehts zum Repository: https://github.com/andreknieriem/wordclock.
Um den ESP8266 mit Arduino IDE nutzen zu können braucht die IDE erst noch die Board-Informationen. Dafür macht ihr einfach Folgendes:
- Arduino IDE starten und das File -> Preferences Fenster öffnen.
- Die folgende URL http://arduino.esp8266.com/stable/package_esp8266com_index.json muss in das "Additional Board Manager URLs" Feld. (Mehrere Url's lassen sich einfach mit Komma trennen.)
- "Boards Manager" unter "Tools > Board" öffnen und nach "esp8266" suchen. Das Gefundene dann installieren mit dem "install" Knopf.
- Jetzt noch das ESP8266 Board unter "Tools > Board" auswählen (NodeMCU 1.0)
Nun kann man das Wortuhr OS installieren.
- Öffnet wordclock_esp8266.ino in Arduino IDE
- Schließt das ESP8266 Board an euren Computer an
- Unter Tools -> Port den ESP8266 auswählen
- Nun den "Upload"-Button in Arduino IDE anklicken um das Programm zu kompilieren und zum ESP8266 hochzuladen.
Nun startet das Board neu und ihr könnt mit dem Wifi-Setup fortsetzen um die Weboberfläche zu installieren und nutzen zu können.
- Der WiFiManager wird benutzt um eine Wlan Verbindung herzustellen. Hierfür erstellt dieser beim ersten Start einen Access-Point mit dem Namen "WordclockAP". Verbindet euer Handy oder euren PC mit dem WLAN und folgt den Anweisungen.
- Nach erfolgreichem Setup verbindet sich euer ESP8266 mit dem WLAN und ihr könnt diesen über eine IP-Adresse erreichen. Zum herausfinden der IP-Adresse benutze ich die App "Fing" aus dem Playstore.
- Öffnet nun die IP in eurem Browser.
- Hier könnt ihr jetzt den Filemanager (/data/fs.hml) hochladen. Anschließend einfach den restlichen "data" Ordner über den Filemanager hinzufügen. Achtet darauf, dass ihr einen icons Ordner habt und die icons auch dort landen.
Geschafft! Die Software ist installiert und der ESP8266 ist einsatzbereit! Widmen wir uns jetzt dem Aufbau des LED's Gitters.
LED Matrix bauen und verlöten
Als erstes schneidet ihr vom LED-Band für die Buchstaben 11 Streifen á 11 LED's und einen Streifen mit 4 LED's für die Minuten ab. Zeichnet euch dann auf der Rückwand des Bilderrahmens ein Gitter, damit man die LED Streifen besser platzieren kann. Haltet euch unbedingt dafür eure Glasplatte an und macht die Linien exakt in der Mitte der Buchstaben, denn je nachdem wie man die Frontplatte gestaltet, müssen die Streifen weiter oben oder unten angesetzt werden. Um die Streifen sonst mittig zu platzieren müsst ihr einfach links und rechts 6,75cm Platz lassen. 11 LED's sind nämlich 36,5cm breit. Da der Bilderrahmen 50cm breit ist bleibt ein Rest von 13,5cm. Und diese dann halbiert sind 6,75cm.
GANZ WICHTIG
Auf dem LED Streifen sind Pfeile für die Richtung des Datenstroms. Da wir das Ganze im Zick-Zack-Muster verlöten werden müssen die Pfeile immer abwechselnd rechts und links zeigen.
Um das Gitter für die LED's zu bauen habe ich mich für dickeren Pappkarton von einem Versandpaket entschieden. Dieser ist fest genug, sodass er ohne Hilfsmittel selbst hält. Das Zuschneiden ist dabei allerdings etwas mühseliger.
Jetzt brauchen 25 Pappstreifen um das Gitter zu bauen. Die Maße dafür habe ich hier oben im Bild angezeichnet. Das war bei mir der längste Teil der Arbeit an der Uhr. Hat man das alles fertig, so kann man 24 Streifen ineinander stecken und hat ein schönes 11x11 Gitter. Die beiden seitlichen Streifen werden dabei allerdings genau auf den Lötstellen aufliegen. Hierfür müsst ihr also noch Löcher von unten hineinschneiden, damit die Kabel genug Platz und das Gitter euch nicht die Lötstellen kaputt macht.
Den 25. Streifen kann man sich nun so zurechtschneiden, dass man die 4 LED's für die Minuten baut.
Nun geht es ans Verlöten der LED-Streifen. Wie oben bereits erwähnt machen wir das Ganze im Zick-Zack. Anders als Edgar habe ich auch die 5V und GND nur im Zick-Zack verlötet, da es bei der Länge der Strecke bei mir keinen Verlust der Energie gab. Im nachfolgenden Bild kann man erkennen, was ich gemacht habe. Am Ende habe ich dann alle Stellen mit ordentlich Heißkleber befestigt und so auch isoliert.
Weitere Komponenten verbinden/verlöten
Nun, da die LED-Matrix fertig ist fehlt uns noch die Verbindung zum Strom und zum ESP8266. Hier mal ein Schaubild wie das Ganze zusammengesetzt ist. Also im Groben haben wir ein Micro-USB Datenkabel. Ein Stromkabel würde für den Betrieb ausreichen, aber eventuell möchte man ja noch mal etwas an der Software ändern und kann dann die komplette Uhr einfach an den Computer anschließen. Dieses Kabel muss man vorsichtig auftrennen und dann das rote und schwarze Kabel freilegen. Das sind dann Rot 5V und Schwarz GND. Hier muss nun ein Kondensator eingelötet werden, da sonst die LED's Schaden nehmen können und jeweils ein Kabel dann weiter an die obere LED-Leiste.
Ein Kabel mit einem Widerstand, welches vom D1 Pin des ESP8266 zum oberen Anfang des LED-Gitters auf den D-IN Steckplatz geht. Der Widerstand ist nötig, da man sonst in Gefahr läuft, dass die erste LED kaputt geht.
Auf dieser Seite stehen zum Widerstand und zum Kondensator und der generellen Stromversorgung der LED's noch auführlichere Details.
Fertigstellung
Hat man die Komponenten nun alle verklebt und verlötet kann man das Ganze ja schonmal an den Strom anschließen. Wenn alles richtig läuft, dann wird die Uhr erst die 4 Minuten Anzeiger einblenden, dann einen Durchlauf aller LED's und dann zeigt es die letzten beiden Zahlen der IP an. Anschließend geht es in den Wortuhr-Modus. Hier ein Bild meiner Uhr nachdem alles soweit fertig war. Mit Gewebe-Klebeband habe ich die Kabel und komponenten so fixiert, sodass auch nichts wackelt oder rutscht, wenn man die Uhr aufhängt.
Jetzt kommt noch etwas sehr wichtiges. Man braucht eine "Diffusionsfolie". Man möchte ja, dass der komplette Buchstabe gleichmäßig leuchtet und nicht nur der Mittelpunkt weil dort die LED ist. Hier kann man sich ganz einfach mit Butterbrot-Papier, Architekten-Papier oder weißen Backpapier behelfen. Letzteres soll es bei Lidl geben - bei meinem leider nicht. Ich habe noch dickeres Butterbrot-Papier in der Bastelkiste gefunden. Das habe ich auf die Rückseite des Glases geklebt, sodass alle Buchstaben und die Minutenanzeige komplett bedeckt sind. Hiervon habe ich leider kein Bild, ich habe aber eins gefunden, dass man es verstehen sollte.
Als letztes muss jetzt noch ein kleines Loch für das USB Kabel unten in die Mitte des Bilderrahmen gebohrt werden. Jetzt kann man alles seine Rückplatte mit der kompletten Hardware in den Bilderrahmen einlegen, die Klammern des Bilderrahmens wieder umknicken und man ist fertig. Zur Sicherheit habe ich die Rückplatte aber noch mit kleinen Schrauben fester eingestellt, damit man nicht Gefahr läuft, dass die Rückplatte vom Rahmen abfällt.
Einstellungen über die Web-Oberfläche
In der Web-Oberfläche kann man diverse Einstellungen an der Uhr vornehmen oder in einen anderen Modus wechseln. So hat man die Wahl zwischen Wortuhr, Digitaluhr, Spirale, Snake, Tetris und Pong. Bei den beiden Uhren kann man die Farbe der LED's bestimmen. Bei meiner Uhr habe ich es auch auf weiß gestellt. Bei den 3 Spielen hat man dann die Pfeiltasten zum Spielen der Spiele. In den Einstellungen kann man noch die Zeit einstellen in der die Uhr in den Nachtmodus geht, also die LED's ausschaltet, einen Demo-Modus der alle Modi nacheinander durchwechselt, die Helligkeit der LED's, sowie den Puristen-Modus ein- oder ausschalten. Im eingeschalteten Modus wird die Einleitung "Es ist" nur bei vollen und halben Stunden angezeigt. Also: Es ist Drei Uhr. Es ist halb Vier, aber ansonsten nur beispielsweise Fünf nach Zehn. Ist der Modus ausgeschaltet wird "Es ist" immer angezeigt. Also das Beispiel von gerade zeigt dann Es ist Fünf nach Zehn.
Unter dieser URL kann man sich eine Demo der Web-Oberfläche auch mal ansehen.
https://www.andrerinas.de/wortuhr/
Das wars! Ich hoffe der ein oder andere hat nun auch Lust eine Wortuhr selbst zu bauen. An dieser Stelle nochmal 1000 Dank an Edgar alias techniccontroller für seine tolle Arbeit und das Teilen dieser!
Kommentare
danke für deine super Anleitung! Dein Design für die Buchstaben auf der Folie gefällt mir sehr gut mit den hin und wieder gestanzten Elementen. Für meinen Nachbau möchte ich die Anordnung der Buchstaben aber noch etwas verändern. Leider sind aber nicht alle Buchstaben in deiner Vorlage enthalten. Woher hast du diese Schriftart bzw. kann man sich die irgendwo downloaden? Danke & LG
Vielen Dank für deine super Anleitung und das Bereitstellen des Codes. Ich habe meine Minuten Leds in die Ecken gesetzt, jedoch laufen sie falschrum, das heißt es startet auf der falschen Seite mit dem runterzählen. Kannst du mir einen Tipp geben wie ich die Reihenfolge ändern kann, außer umlöten?
Ich hätte gerne als erstes die oben links leuchten und dann im Uhrzeigersinn, aber es startet mit unten links und dann gegen den Uhrzeigersinn. Oder habe ich einen Denkfehler?
Versuche mal die Zeile durch
(*neomatrix).drawPixel(3-i, HEIGHT, color24to16bit(filteredColor));
zu ersetzen.
Ansonsten gerne einfach mal beim Edgar nachfragen. Der hat die Software ursprünglich geschrieben und ist sicherlich deutlich tiefer in der Materie.
https://techniccontroller.de/word-clock-with-wifi-and-neopixel/
Gruß Michael
https://techniccontroller.de/wp-content/uploads/HowToInkscape_Wordclock.pdf
LG André
Gibt es die Möglichkeit einen LDR und RTC einzusetzen?
https://techniccontroller.de/word-clock-with-arduino-and-neopixel/
Dann muss man natürlich die Helligkeit dann da via Ldr schalten lassen, anstelle von der Web Oberfläche. Ich empfehle dir sonst beim Edgar auf der Seite nachzufragen. LG
es schein an dem Purist modus zu liegen das der Sketch nicht komplimentiert wird. Hast Du eine Idee?
Gruß Holger
super jetzt läuft der Sketch durch. Dankeschön.
ich bin auf deinen Beitrag über die Seite von Edgar aufmerksam geworden, Die Uhr hatte ich schon fertig nur haben mir die zusätzlichen Features gefallen. Leider lässt sich der Code von GitHub nicht Kompilieren.
Viele Grüße
Rainer
In Zeile 368 (wordclock_esp8266.ino) sowie 441 wird mir angezeigt "'timeToString' was not declared in this scope".
Ausserdem in in der pong.ccp Zeile 279 "previously used here case LED_TYPE_PADDLE:
Zeile 288 "error: duplicate case value case LED_TYPE_OFF:"
Über eine Hilfe würde ich mich sehr freuen.
ich glaube es liegt daran, dass Arduino Studio den "Sketch"/Ordner Namen genauso heißen muss, wie die erste ino. Datei. Versuche mal deinen Ordner umzubenennen zu wordclock_esp8266 damit es auf wordclock_esp8266.ino matched.
Nochmals vielen Dank
sehr schönes Tutorial über die Wortuhr ;)
Mir gefällt dein Design der Weboberfläche sehr gut.
Der Puristen-Modus ist auch eine gute Idee.
VG
Edgar
Hinterlasse einen Kommentar