Ikea Hack: RIBBA Bilderrahmen zum digitalen Sprüchekalender umgebaut – SPRYGGKLOPPA

SPRYGGKLOPPA, das ist ein digitaler Sprüchekalender zum Selberbauen. Läuft mit Batterie, hat WLAN, um die Sprüche bearbeiten zu können und besitzt einen extrem hohen WAF Wert. Eignet sich auch prima als Geschenk! Ich zeige euch, was man damit machen kann und wie ich den zusammengebaut habe!

Heute bauen wir mal was, das sich prima als Geschenk für alle verwenden lässt, die auf Zitate, Mottos, Motivationsprüche usw. stehen. Im Video habe ich mal ein paar Beispiele gezeigt.

Meine Frau verteilt ja gerne Postkarten im Haus mit irgendwelchen Mottos und Zitaten. Also hatte ich die Idee, Ihre Sammlung mit einer digitalen Version zu erweitern. Man lädt die Sprüche auf den Rahmen und jeden Tag wird ein anderer angezeigt.

Ihr habt vielleicht Sprüche von eurem Nachwuchs aufgeschrieben? Da sind ja manchmal schon Knaller dabei. Die könnt ihr jetzt alle auf diesen Rahmen hochladen und der Oma an die Wand nageln.

Oder auch cooles Hochzeitsgeschenk: alle Gäste müssen einen persönlichen Gruß auf den Rahmen hochladen. Und das Brautpaar bekommt dann nach der Hochzeit jeden Tag einen neuen Gruß seiner Freunde und Familie – man kennt das Spielchen ja auch mit Postkarten.

Im wesentlichen besteht das ganze aus einem IKEA Bilderrahmen, einem ePaper Display, einem ESP32, ein paar LiFePo Akkus als Stromquelle und halt das übliche Gedöhns an Schräubchen, Kabellage usw. Die genaue Material-Liste findet ihr am Ende des Artikels. Das ganze Projekt habe ich auf Github zum runterladen geparkt. Dadrin findet ihr natürlich auch alle Material-Listen, Quellcode, Hinweise etc. pp.

Also … geile Sache, dann legen wir mal los.

Schritt 1: Bilderrahmen und Passepartout besorgen

Ich habe hier einen RIBBA Holzrahmen von IKEA verwendet. Wichtig ist natürlich, dass das Gehäuse, welches die Elektronik beherbergt, in den Bilderrahmen passt. Wenn Ihr auch einen RIBBA Bilderrahmen habt, sollte das kein Problem sein. Am Ende des Artikels findet ihr auch einen Link zum passenden Bilderrahmen.

Falls ihr einen anderen Bilderrahmen verwendet, muss die Größe sehr wahrscheinlich im CAD Programm angepasst werden. Die Dateien zu den Fusion 360 und FreeCAD Dateien findet ihr im SPRYGGKLOPPA Git Projekt, dass ihr auf GitHub herunterladen könnt.

Falls ihr keinen IKEA Bilderrahmen verwendet, muss das Innere im Bilderrahmen mindestens eine Größe von 181 x 135 mm haben. Das hängt mit dem verwendeten ePaper Display zusammen. Wenn das Glas und das Passepartout im Rahmen sind, muss mindestens eine Tiefe von 26 mm übrig sein da die Gehäusekonstruktion derzeit auf diese Tiefe ausgelegt ist. Dazu kommen noch ein paar Millimeter für die Schraubenköpfe, mit dem der Deckel befestigt wird. Der Bilderrahmen muss also schon eine gewisse Tiefe haben.

Bedenkt auch, dass das Passepartout passen muss. Wir benötigen einen mittigen Ausschnitt von 14 x 9 cm. Bei dem RIBBA Rahmen, war das bereits dabei. Ansonsten kann das jeder Passepartout-Schnitzer zurechtklöppeln, oder ihr bastelt selber was.

Schritt 2: 3D Teile drucken

Thema Bilderrahmen ist geklärt! Als nächstes müssen wir die 3D Teile Drucken. Alle 3D Teile findest du im GitHub Projekt im Ordner STL. Das sind: 

• die Halterung für das ePaper Display (Display_Mount.stl)
• der Rahmen (Frame.stl)
• die Rückenabdeckung mit der Klappe zum Batterie-Fach (Cover.stl)
• die Batteriehalterung (nicht im Repo aber auf Thingiverse)
• die Platine für den ESP (falls diese verwendet werden soll) (PCB_ESP32.stl)
• 4 PCB-Clips zur Befestigung der Platinen im Gehäuse – damit die Platinen nicht im Gehäuse rumfliegen (PCB Clip ESP v12.stl und PCB Clip ePaper HAT v12.stl)

Die Batteriehalterung gibt es in verschiedenen Größen für unterschiedliche Anzahl an Batterien. Ich habe hier 4 verwendet. 2 oder 3 sollten auch gehen, aber dann ist die Akku-Ladung natürlich schneller leergesaugt. 

Zu der Platine für den ESP Microcontroller kommt noch eine HAT Platine des ePaper-Displays hinzu, die im Gehäuse befestigt wird. Dafür sind die PCB-Clips gedacht. Ihr könnt natürlich auch die Platinen klassisch mit Distanzstücken und Schrauben befestigen. Zu den Befestigungsmöglichkeiten von Platinen mit Schrauben und meinen „pfiffigen“ Clips habe ich bereits ein Video gemacht.

Bei dem ePaper Display ist oft noch eine weitere kleinen Platine und ein Flachbandkabel dabei. Das ist im Grunde ein Verlängerungskabel zwischen HAT Platine und dem Display – habe ich hier nicht verwendet. Ich schließe das Display direkt an der HAT Platine an. Wer will kann die Platinen natürlich auch anders im Gehäuse anordnen und benötigt dann eventuell diese Verlängerung.

Die 3D-gedruckte Platine für den ESP muss auch nicht unbedingt sein. Ihr könnt das natürlich auch klassisch auf einer Lochrasterplatine verlöten, wie hier bei meinem ersten Protoypen zu sehen – oder ihr könnt es auch direkt an die Pins des ESPs löten.

Schritt 3: Display Rahmen kleben

Ich habe jetzt alle Teile gedruckt und vorbereitet. Zu dem Prinzip der Batteriehalterung und der selbstgedruckten Platine aus dem 3D-Drucker für den ESP habe ich nochmal extra Videos erstellt. In denen erkläre ich, wie man diese Teile vorbereitet. D.h. wenn ihr die Platine und die Batteriehalterung ausgedruckt habt, müsst ihr euch diese beiden Videos anschauen, um die beiden Teile vorzubereiten.

Wenn alles vorbereitet ist, gehts jetzt an den Zusammenbau des Gehäuses.

Die Displayhalterung muss auf den Rahmen geklebt werden. Achtet darauf, dass die kleinen Ecken für das Display nach unten schauen! Ich habe hier einen GEL Sekundenkleber genommen. Bei diesem Kleber hat man dann noch etwas Zeit, um die Teile zu positionieren und zu fixieren – dafür muss man den aber etwas länger trocknen lassen – auch wenn Sekundenkleber drauf steht. Ein zwei Stunden würde ich das auf jeden Fall in Ruhe lassen. Praktisch sind solche kleinen Klemmen. Zusätzlich noch ein dickes Buch drauf – wofür hat man solche Wälzer denn sonst im Regal stehen.

Schritt 4: Batteriehalterung einkleben

Als nächstes kleben wir die Batteriehalterung fest. Ich gehe davon aus ihr habt das Video zur Vorbereitung der Batteriehalterung angeschaut und umgesetzt. Ich habe hier eine Kabel mit JST Steckern gekrimpt und an die Batterie-Kontakte gelötet: das rote Kabel an den Pluspol, schwarz an den Minuspol.

Ich setze zum Einkleben die Batterien in die Halterung, denn dadurch dehnen sich die Federn und die Halterung wird größer. Diese Ausdehnung müssen wir mitberücksichtigen. Jetzt positioniere ich die Halterung mit den Federn zum Rahmen hin, auf der gegenüberliegenden Seite, wo die Öffnung für das Flachbandkabel ist. Praktisch: dieses Muster auf dem Bodenteil zeigt genau die Mittellinie an – daran kann man sich orientieren. Die Batteriehalterung sollte möglichst mittig platziert werden, damit es später beim Aufhängen an der Wand nicht schief hängt.

Zum festkleben nehme ich wieder GEL Sekundenkleber. Dünn auftragen und 30 Sekunden anpressen. Dann aber nochmal ein zwei Stunden trocknen lassen. Wenn sich nach dem Kleben was löst, liegt das meiner Erfahrung nach fast immer daran, das man zu ungeduldig war und das verklebte Teil zur früh belastet – also Gemach!

Schritt 5: Platinen Clips einkleben

Als nächstes kommt die Befestigung für die HAT Platine des Displays und die Platine des Microcontrollers.

Um hier die Schrauben zu sparen, und alles bequemer wieder ausbauen zu können, habe ich mir ein Clip-System ausgedacht. Diese Clips werden einfach auf den Gehäuseboden geklebt, einclippen, fertig. Zu den Clips, wie man diese auch für andere Projekte anpassen kann und wie man diese einklebt, habe ich ein eigenes Video erstellt.

Die Platinen sollen am Ende, so wie hier zu sehen, im Gehäuse angeordnet werden.

Und auch hier rate ich wieder: lasst den Kleber genug Zeit zum Trocknen!

Schritt 6: ePaper-Display einbauen

Jetzt können wir das Display einsetzen. 

Dafür sind die kleinen Ecken auf der Unterseite gedacht. 

Hier soll dass Display hineingedrückt werden. Achtet darauf, dass das Flachbandkabel auf der Seite mit der dafür vorgesehenen Aussparung ist. 

Die Ecken zur Halterung sind schon sehr knautsch geplant. Je nachdem wie präzise euer Drucker druckt und wie grob euer Druckprofil ist, kann das auch mal nicht passen. Dann müsst ihr an den Ecken noch etwas rumschnippeln. 

Zur Not eine oder mehrere Ecken ganz wegschneiden. 

Ich fixiere das Display noch mit zwei Streifen doppelseitigem Klebeband – das hält bombenfest.

Diese eine Ecke will jetzt nicht ganz abschließen, aber mit etwas Druck … geht alles in Arsch!

Da hamma den Salat! Wär ja auch langweilig wenn alles glatt laufen würde. Was ist passiert? Die Ecken für die Displayhalterung waren doch zu knautsch geplant. Das Display ließ sich an einer Ecke nicht mehr versenken. Gewalt brachte natürlich nix, ausser dass der Rahmen zerbrochen ist.

Ich fixe das Ganze, in dem ich diese widerspenstige Ecke wegschneide. In den CAD Dateien im Projekt sollten auch nur noch zwei Ecken vorhanden sein.

Die zerbrochenen Stellen repariere  ich mit meinem GEL Sekundenkleber.

Ist nicht wunderschön geworden, eine kleine Ecke fehlt auch. Macht aber nix. Verschwindet eh im Bilderrahmen. Also: nix mit Gewalt machen! Wenn was nicht passt, lieber et was wegschneiden.

Schritt 7: Display Anschließen

Um jetzt das Display anzuschließen nehme ich die HAT Platine und den Microcontroller erstmal wieder aus den Clips heraus. Dann ist das Anschließen viel einfacher.

Das ePaper Display kommt mit zwei kleinen Platinen, die mit Flachbandkabeln verbunden werden.  In meinem Aufbau verwende ich nur die größere HAT Platine. Schließt das kurze Flachbandkabel so wie hier zu sehen an die HAT Platine an. Dafür muss der Plastikbügel zunächst nach oben geklappt werden. Dann das Flachbandkabel einführen und den Plastikbügel wieder runterdrücken. Die Seite mit den Kontakten schaut dabei immer nach oben.

Für die Verbindung zum Microcontroller kommt mit dem Display ein 8-poliges Kabel mit. Ich habe hier die 8 einzelnen Pins zu einer Steckerleiste zusammengeklebt – natürlich mit Panzertape. Das macht es sehr viel einfacher, das Display mal abzubauen und wieder anzuschließen. Natürlich muss man dann auf die richtige Reihenfolge der Pins achten. Folgende Grafik sollte es verdeutlichen, wie die Pins anzuschließen bzw. zu verkleben sind.

Passt natürlich nur, wenn ihr den Microcontroller genauso verlötet habt, wie ich es hier gemacht habe bzw. wie ich es in dem Video zur selbstgedruckten ESP Platine erklärt habe, und diese Steckerleiste genauso wie bei mir belegt ist.

Markiert euch noch kurz wie der Stecker angeschlossen werden muss, fertig.

Jetzt können wir die HAT Platine und den Microcontroller auch wieder mit den Clips befestigen.

Wenn ihr das ePaper Display direkt am ESP32 anschließen wollt, könnt ihr diese PIN-Belegung verwenden. Folgende Pins werden im Code verwendet:

Schritt 8: Gehäuse in Bilderrahmen einsetzen und verschrauben

Okay, nun können wir das Gehäuse mit dem Display nach unten in den Bilderrahmen setzen.

Falls der Bilderrahmen solche Metall-Flügel zum Umklappen hat, könnt ihr die verwenden, um das Gehäuse festzuklemmen. Zusätzlich hat das Gehäuse aber auch Löcher in den Seitenwänden. Dort solltet ihr das Ganze zusätzlich mit Schrauben fixieren. Insbesondere die 4 Batterien haben ganz schön Gewicht.

Schritt 9: Touch Sensor Draht einbauen

Wir müssen noch einen Draht verlegen. Dieser dient dann als Touch-Sensor, mit dem wir den Konfigurations-Modus starten können, um die Zitate zu bearbeiten. Ich nehme dafür einen unisolierten Silberdraht, den ich an einen Dupont-Stecker gekrimpt habe. In meinem Rahmen habe ich den Draht in einer kleinen Nut versenkt. Man kann den Draht aber auch einfach an der Seite entlangführen, ohne Nut. Vielleicht noch was Dekoratives draus formen. Blümchen oder so …

Diesen Draht verbinden wir mit dem einzelnen freien Pin auf der Platine. Weil der Dupont-Stecker nun doch mehr Platz einnimmt als gedacht, habe ich den Pin um 90 Grad zur Seite gebogen.

Wenn wir diesen Draht dann berühren, wird der ESP im Konfigurations-Modus neu gestartet. Dabei wird ein WLAN Access-Point erstellt. Sobald ihr euch bei diesem Access-Point mit dem Handy oder Computer anmeldet, öffnet sich das Konfigurations-Portal automatisch … mehr oder weniger. Zeige ich später nochmal, wie man da reinkommt.

Auf dem Display wird dann auch der Name des WLANs und ein QR-Code mit den Zugangsdaten angezeigt.

Schritt 10: Rückenteil vorbereiten

Zuletzt bereiten wir noch den Deckel vor. Die Batterieklappe ist im 3D Objekt so angelegt, dass man diese herausbrechen kann. Wenn das klappt, haben wir nämlich eine sehr gute Passgenauigkeit der Klappe. Wenn man daraus zwei 3D Modelle machen würde, ist es schwieriger so etwas passgenau hinzubekommen, insbesondere weil Löcher und Öffnungen in der Mitte eines 3D-Drucks gerne nicht mehr so genau sind.

Also brechen wir die Klappe mal ganz vorsichtig heraus. 

Das klappt gut. Jetzt können wir die Klappe und die Öffnung noch von eventuellen Graten befreien. Und mit einer M2 Schrauben in 4 mm Länge die Klappe befestigen.

Mit vier M2 Schrauben in 6 mm Länge schraube ich den Deckel am Gehäuse fest.

Die Schrauben natürlich nicht richtig festknallen. Die Schraubenlöcher sind gerade so angelegt, dass die Schrauben sich das Gewinde selbst ins Plastik schneiden. Das hält natürlich keine Riesenbelastungen stand.

Hardware Outro 

Zack, das wars mit dem Hardware-Teil. Und alles schön aufgeräumt und super verschlossen. Und zum Akku Aufladen haben wir sogar eine Revisionsklappe.

Und für den nächsten Schritt, können wir den Deckel gleich wieder abschrauben, denn da laden wir die Software auf den Mikrokontroller und müssen an den USB-Port des ESPs ran. Das geht leider nicht, ohne das Rückenteil abzuschrauben. Aber man braucht ja auch noch Raum für Verbesserungen.

Schritt 11: Software auf den ESP32 laden

Ok, laden wir die Software hoch. Wie gesagt, dazu erst mal den Rücken wieder abschrauben.

Wichtig: falls die Batterien am Microcontroller angeschlossen sind, müsst ihr diese unbedingt erstmal abziehen, bevor ihr das USB-Kabel anschließt! Momentan ist keine Schaltung eingebaut, die es erlaubt beide Stromquellen gleichzeitig anzuschließen!

Wer noch nie mit PlatformIO gearbeitet hat, dem empfehle ich erstmal mein Intro-Video zu PlatformIO. Dort erkläre ich, wie man PlatformIO installiert, ein Projekt erstellt und Programme auf den Microcontroller lädt. Ich gehe jetzt mal davon aus, Ihr habt VS Code und PlatformIO installiert.

Das ganze Projekt könnt ihr bei GitHub runterladen. Wer sich mit Git auskennt, weiss was zu tun ist. Man kann aber auch einfach das ganze Projekt als ZIP-Datei herunterladen und entpacken.

Geht dazu auf der Git Projekt Seite rechts auf das neuste Release, und klickt dort auf release.zip. Dann beginnt der Download. Entpackt danach die ZIP Datei.

Achtet darauf, dass der Microcontroller per USB angeschlossen ist, bevor Ihr VS Code startet. Ansonsten taucht das Gerät gern mal nicht in der Geräte-Liste auf. Ansonsten einfach VS Code nochmal komplett schließen und neu starten.

Schritt 11.1: Projekt zu PlatformIO hinzufügen

Im Projekt-Ordner findet ihr den Unterordner QuoteFrameCode. Diesen Ordner fügen wir jetzt als Projekt zu PlatformIO hinzu.

Startet dazu zunächst VS Code. Klickt auf den Alien Kopf und im PlatformIO Quick Access Panel auf PIO Home > Projects & Configuration.

Hier klicken wir auf Add Existing da wir ja kein neues leeres Projekt erzeugen, sondern ein bestehendes Projekt hinzufügen wollen.

Sucht den QuoteFrameCode Ordner in dem entpackten release Archiv und fügt diesen als Projekt hinzu indem ihr auf Open klickt.

Nun wird das Projekt in der Liste der PlatformIO Projekte angezeigt.

Schritt 11.2: Projekt Settings anpassen

Jetzt gehen wir zunächst in die Project-Settings und Prüfen, ob der USB-Port und das Microcontroller Board passen, ansonsten kann PlatformIO nix hochladen.

Klickt dazu auf Configure.

Oben sind zwei Tabs zu sehen: PIO Configuration und esp32.

PIO Configuration: hier kann man allgemeine Projekt Einstellungen vornehmen. Ich habe da nur eine Projektbeschreibung hinzugefügt. Hier müsst Ihr nix anpassen.

Ich habe die eigentliche Konfiguration unter dem Reiter esp32 angelegt. Hier können wir alles bezüglich des Microcontroller Boards und dem Port einstellen. Prinzipiell kann man beliebig viele Konfigurations-Reiter anlegen über die Schaltfläche + Configuration. Das ist sinnvoll wenn man zum Beispiel mit öfter mit verschiedenen Microcontroller arbeitet. Eine soll uns hier aber zunächst genügen.

Aktiviert den Reiter esp32 und scrollt dort nach ganz unten zu den Upload Options. Dort gibt es eine Einstellung für den upload_port. Hier ist zunächst vermutlich meine Einstellung drin /dev/cu.SLAB_USBtoUART. Das ist der typische USB Port auf dem Mac für Microcontroller.

Um diesen zu ändern, klickt zunächst auf das Kreuz, um den Eintrag zu löschen. Klickt dann auf das leere Feld und ihr bekommt eine Auswahl aller USB-Geräte, die PlatformIO findet. 

Falls euer Board dort nicht auftaucht oder ihr nicht wisst welches des richtige Port ist, schaut nochmal in mein Einführungsvideo zu PlatformIO.

Auf meinem Mac war es bisher immer dieser /dev/cu.SLAB_USBtoUART Port. Auf Windows wird es ein COM-Port sein.

Etwas weiter oben im Bereich Monitor Options muss die Einstellung für monitor_port auf den gleichen Wert wie bei upload_port gebracht werden. Der Monitor Port ist für die Serielle Ausgabe in der Konsole notwendig, ansonsten seht ihr keine Fehlermeldungen oder Debug-Texte.

Zuletzt noch ganz oben bei den Platform Options ggf. das richtige Board einstellen. Ich habe hier ein generisches esp32dev eingestellt. Es kann gut sein, dass das mit deinem ESP32 schon funktioniert. Falls du ein spezielles Board hast, durchsuche die Liste und wähle das passende aus. 

Hier muss auch in der Regel nicht genau das Board gefunden werden, was du benutzt. Wenn es ein ESP32 ist, wird esp32dev vermutlich schon funktionieren. 

Ich habe hier zum Beispiel einen speziellen ESP32 names ePulse von der Firma ThingPulse der auf wenig Stromverbrauch spezialisiert ist. Den gibts aber in dieser Liste nicht. Dieser ESP basiert auf der WROVER Variante, wie man auf dem WLAN Modul sehen kann. Da verwende ich zum Beispiel immer esp-wrover-kit als Board Einstellung. Man muss also nicht exakt seinen Boardhersteller und Modell in der Liste finden. Die generischen Vorgaben reichen in der Regel aus. Aber wenn ihr genau euer Board in der Liste findet, dann nehmt natürlich das.

Ganz wichtig: oben rechts auf Save klicken!

Schritt 11.3: Projekt öffnen und hochladen

Gut, Konfiguration ist abgeschlossen, jetzt öffnen wir das Projekt. Klickt dazu auf Projects, um in die Projekte-Übersicht zu gelangen. Und dann klickt auf Open. VS Code startet darauf sein Fenster neu und öffnet das Projekt. Links im Explorer sollte jetzt die Verzeichnisstruktur des Projekts zu sehen sein.

Übrigens: das was wir gerade bei den Einstellungen verändert haben ist am Ende nichts anderes als die Datei platformio.ini. In der findet ihr das Settings für des esp32 Reiter und die Angaben zum Bord und Port, welche ihr womöglich gerade angepasst habt. Im Grunde könnt ihr hier in dieser INI-Datei auch alles per Hand ändern. Der Link zur Dokumentation dieser INI-Datei und was man da alles einstellen kann findet ihr oben in der platformio.ini Datei selbst. Sollte man sich mal angeschaut haben.

Jetzt können wir über den Pfeil unten den Upload auf den ESP starten.

Und wenn das geklappt hat. müssen wir zuletzt noch das data-Verzeichnis hochladen. Darin liegen die HTML-Dateien für das Web-Portal der Konfigurations-Seite. 

Dazu geht wieder links in das PlatformIO Panel, also Klick auf den Alien Kopf. Da wir jetzt ein Projekt geöffnet haben, gibt es dort nun ein zusätzliches Project Tasks Panel. Dort wählt ihr aus den Project Tasks > esp32dev unter Platform den Punkt Upload Filesystem Image. Dann wird alles aus dem data-Verzeichnis auf den ESP geladen.

Jetzt sollte die Firmware und alle benötigten Dateien hochgeladen sein und wir können in Betrieb gehen.

Schritt 12: Konfigurations Modus – mit einem Device verbinden

Das Display sollte bereits eine erste Information anzeigen, nämlich dass es noch keine Zitate gibt.

Das wollen wir gleich ändern.

Bringt den Rahmen in den Konfigurations-Modus indem ihr den Silberdraht berührt. Der Bilderrahmen startet dann neu und erzeugt einen WLAN Access Point. Das Display zeigt dann auch den Namen des WLANs, das Passwort und die IP-Adresse des Rahmens in seinem Netzwerk an. Ausserdem wird auch ein QR-Code mit den WLAN-Zugangsdaten angezeigt. Verbindet eines eurer Geräte mit dem WLAN Access-Point des Rahmens. Bei iOS und macOS sollte sich automatisch dieses Webportal öffne. Bei meine Android Gerät, hat das leider nie geklappt.

Mit dem QR-Code läuft es so: 

Unter iOS einfach die Kamera öffnen, und auf den QR-Code zielen. iOS fragt, ob du dich verbinden willst, da klickste JA bzw. Verbinden. Jetzt muss man aber trotzdem noch die Einstellungen App öffnen und in den Bereich WLAN wechseln. Erst dann öffnet sich das Portal. Oder halt gleich über die WLAN Einstellungen gehen.

Auf meinem Android Gerät läuft es so: Kamera auf den QR-Code halten, Android fragt, ob du dich verbinden willst, da klickste auch JA. Neben dem WLAN Eintrag habe ich auf das Zahnrad geklickt, und dort dann auf Verwalten des Routers, dann hat sich das Portal geöffnet.

Und wenn sich das Portal nicht automatisch öffnet?

Alternativ könnt ihr immer nach dem Verbinden mit dem QuoteFrame WLAN die IP-Adresse im Browser aufrufen. Das funktioniert auf jeden Fall.

Auf dem Mac/PC im Grunde das Gleiche: mit dem Access Point verbinden. Und wenn sich nichts automatisch öffnet, die IP-Adresse des Rahmens im Browser aufrufen.

Schritt 13: Erstes Zitat anlegen

Auf der Startseite des Portals werden direkt alle Zitate aufgelistet. Zum Bearbeiten oder löschen gibt es direkt zwei Buttons unter jedem Zitat. Achtung: der Löschen Schalter funktioniert ohne Sicherheitsabfrage.

Um ein neues Zitat anzulegen, könnt ihr oben auf den Plus Schalter klicken. Füllt dann das Textfeld für das neue Zitat aus. Optional kann noch der Autor des Zitats angegeben werden. Und dann auf Save klicken.

Bedenkt, dass der Schriftsatz derzeit auf ASCII Symbole beschränkt ist – d.h. leider keine Umlaute und Eszett. Diese werden dafür aber automatisch umgewandelt, falls die Software  welche findet.

Wenn ihr ein neues Zitat eingetragen habt, klickt oben auf den Restart Schalter, und der Bilderrahmen startet wieder im normalen Modus und sollte euer neues Zitat anzeigen.

Einstellungsmöglichkeiten im Konfigurations-Modus

Im Webportal stehen euch folgende Funktionen zur Verfügung:

• Startseite: Liste aller Zitate. Zitate könne hier bearbeitet oder gelöscht werden.
• Restart: Startet den Bilderrahmen neu.
• Import/Export: Hier könnt ihr alle Zitate in ein JSON-Format exportieren. Und ihr könnt im gleichen JSON-Format Zitate importieren. So kann man sehr schnell viele Zitate auf den Bilderrahmen laden. Am besten legt ihr mal einzelne Zitate an, und klickt dann auf Export. Dann seht ihr, wie das Format auszusehen hat. Weiter unten ist auch ein Beispiel zu sehen. Die count Variable wird derzeit nicht verwendet und kann immer auf 0 gestellt werden.
• Settings: Hier könnt ihr Einstellungen machen. Derzeit lediglich, wie oft das angezeigte Zitat wechseln soll.

{
  "quotes": [
    {
      "txt": "Sei immer du selbst. Es sei denn du kannst Batman sein, dann sei Batman!",
      "author": "Tony Stark",
      "count": 0
    },
    {
      "txt": "Programmiere immer so, als wäre der Typ, der am Ende mit deinem Code arbeiten muss, ein Psychopath, der weiß, wo du wohnst.",
      "author": "Martin Golding",
      "count": 0
    }
  ]
}

Denkt daran, dass der Stromverbrauch im Konfigurationsmodus sehr viel höher ist, wegen des WLANs und dem Webserver, der dann läuft. Wenn ihr viele Zitate eintragen wollt, dann nutzt am besten die Import-Funktion über eine JSON Datei. Das geht am schnellsten und verbraucht am wenigsten Strom. Oder ihr schließt das Micro-USB Kabel an, dann ists eh egal.

Outro

So, das war die Vorstellung meines SPRYGGKLOPPA Zitate-Rahmen Projekts.

Wenn euch der Artikel gefallen hat, gebt mir bitte keinen Daumen hoch beom YouTube Video. Der Daumenhoch Button ist super gefährlich. Wenn man den klickt geht schnell mal das globale Internet kaputt. Und bitte – nehmt Abstand davon meinen YouTube-Kanal zu abonnieren. Andernfalls würdet ihr immer automatisch informiert werden, wenn es etwas Neues auf dem Kanal gäbe 🙂

Immer schön rumbasteln, gesund bleiben, und digitale Sprüche-Kalender verschenken.

Bis zum nächsten mal

Tschüß 😉

Links

• GitHub QuoteFrame Repo
• Batteriehalterung von Thingiverse
• Mein YouTube Kanal
• Artikel und Video zur Batteriehalterung
• Artikel und Video zu den PCB Clips
• Artikel und Video zu Platinen aus dem 3D Drucker
• Artikel und Video zu PlatformIO Intro

Materialien für das Projekt

• Ikea RIBBA Bilderrahmen
• 7.5″ ePaper Display Waveshare + HAT
• ESP32 unverlötet
• Silberdraht, 0,6mm
• Dupont Stecker
• JST Stecker
• Schrauben Sortiment M2 M3 M4
• 4 LiFePo Akkus
• LiFePo Ladegerät

Tools aus dem Video

• 3D Drucker Artillerie Sidewinder X1
• Saitenschneider
• Pinzette
• Leatherman Rebar
• Platinenhalter
• Sekundenkleber GEL von Langlauf Schuhbedarf
• Crimpzange (falls Dupont und JST Kabel selbst erstellt werden sollten)
• Mini Klemmen von Wolfcraft
• DUDEN – Das Synonymwörterbuch 🙂