März 2021
Code
Myself
2 Min. Lesezeit
Mit: Timo Lins

Styled Printer

Entwicklung von NodeJS-Scripts für erweiterte Typografie auf Thermodruckern via Raspberry Pi.

printer icon by thermal printer.
svg support

Motivation

Die Idee war simpel: Nutzer*innen sollten Nachrichten an einen entfernten Thermodrucker senden können, der an einen Raspberry Pi angeschlossen ist. Da die eingebauten Layout-Funktionen des Thermodruckers und seiner Bibliothek sehr begrenzt sind, wollte ich Features wie eigene Schriften, ordentliche Typografie, SVGs und mehr ermöglichen. Der Input sollte über eine React-App mit Live-Chat erfolgen, der alle gesendeten Nachrichten anzeigt, während der Server alle Nachrichten in einer Datenbank archiviert.

Features

🎨 Custom Layouts – Mehr als nur Standard-Styling-Parameter

⚡️ React – Senden von überall via React-App mit Live-Feed

🐘 Postgres – Datenbankanbindung und Archivierung der Ausdrucke

Frontend und Server

Eine Website bietet eine Eingabemaske und einen Live-Feed aller gedruckten Nachrichten. Der Live-Feed funktioniert über einen Websocket geräteübergreifend in Echtzeit. Ein Server, beispielsweise auf Heroku gehostet, übernimmt die Kommunikation mit den Clients (sowohl Druckern als auch Web-Frontend auf verschiedenen Geräten) und speichert alle empfangenen Nachrichten in einer Postgres-Datenbank. Wenn eine neue Nachricht am Server ankommt, wird sie sowohl an den Drucker als auch an alle anderen verbundenen Frontends gesendet. So haben alle einen Überblick über sämtliche gedruckte Nachrichten.

typographic layout by thermal printer
custom fonts and what not

Drucker

Der Drucker hört auf den Websocket und ruft bei einer neuen Nachricht einen Headless-Browser auf, der die Daten über Query-Parameter in der URL erhält. Diese Daten werden dann in eine gestylte HTML-Seite eingefügt, die anschließend mit Puppeteer als Screenshot erfasst wird. Das resultierende PNG-Bild kann über die Firmware des Thermodruckers gedruckt werden.

animation of various layouts
various layouts using styled-printer code

Credits

Dieses Projekt entstand ursprünglich bei der Entwicklung von owe.zone. Ursprüngliche Idee & große Unterstützung von Timo Lins. Demo-Bild zeigt die Faune Typeface von Alice Savoie / Cnap.