ESP32/ESP8266: Optimizing the hell out of ESPAsyncWebServer

Das schöne an dem Microcontroller ist ja, dass man einen kleinen WebServer darauf laufen lassen kann. Damit hat man eine tolle Möglichkeit ein kleines aber immer verfügbares User Interface (UI) bereitzustellen, das mit fast allen modernen Geräten die einen Webbrowser haben (Tablet, Smartphone, Laptop, PC) sofort funktioniert.

WebServer in klein

Exception Decoder MenuWas man jedoch schnell vergisst, wenn man zuvor schon WebApplications mit WebServern wie nginx oder Apache ausgeliefert hat, ist der Ressourcenbedarf von so einem Server. Der Microcontroller ist halt klein deshalb ja auch „Micro“, hat wenig Speicher und wenig CPU-Zyklen die er für sowas entbehren kann.

Die Kunst liegt also in der Beschränkung. Doch das fällt sauschwer, wenn man erstmal einen gewissen Anspruch an seine Webseiten hatte. Niemand mag gern zurück in die Steinzeit und eine Webseite bauen z.B. ohne Stylsheets. Klar, das geht, sieht aber so schlimm aus und funktioniert auf dem Smartphone z.B. so gar nicht.

Zunächst habe ich den klassischen Weg zur Gestaltung meiner Webseite gewählt, ich hab HTML geschrieben mit Bildern darin und JavaScript das dynamisch Bilder austauscht und platziert, ich habe CSS geschrieben, das Bilder zur Gestaltung einsetzt. Es sieht wunderschön aus auf dem Desktop, aber… es crasht den WebServer des Microcontrollers. Da nutzt dann das ganze tolle Design auch nichts, wenn es letztlich nicht funktioniert.

Und ich habe zig Crashes gehabt. Ich habe mir mühsam den Arduino ESP8266/ESP32 Exception Stack Trace Decoder in der Arduino IDE installiert (Anleitung). Ein dekodierter Stacktrace sieht dann z.B. so aus:

Da sieht man, dass es im konkreten Fall eher ein Speicherproblem ist bei diesem Crash, weil eine alloc Funktion involviert ist. Aber viele andere Crashes sind eben anderer Natur.

Optimizing the hell out of it

Dann beginnt man zu begreifen und optimiert. Was kann man alles tun um zu optimieren? Anfangs dachte ich die Dateigröße wäre der Bottleneck des Microcontrollers. Ich hab die JS, CSS und HTML Dateien mittels GZIP komprimiert und mit dem content-type/gzip im Header ausliefern lassen. Das reduziert auch die Menge an Daten hervorragend. Oft wird nur noch ein Zehntel der Daten übertragen, was die Auslieferung selbst deutlich schneller macht.

Doch die Dateigröße ist gar nicht das Problem beim ESPAsyncWebServer. Das eigentliche Limit ist, dass der nur maximal 3 bis 4 Requests „gleichzeitig“ bzw. parallel bearbeiten kann. Der Rest der Requests hängt dann einfach und wartet ewig auf Antwort und wird verworfen oder führt zu einer Blockade des Webservers und einem späteren Crash. Es hat auch nichts damit zu tun, dass das SPIFFS Filesystem eine Obergrenze an gleichzeitig geöffneten Files hat wie mir ein Entwickler des ESPAsyncWebServer versicherte. Und darauf nun eine passende Antwort bzw. Optimierung zu finden ist gar nicht so einfach gewesen.

Klar, man kann das CSS und das JS alles mit in das HTML-file kippen, aber dann wird es schon arg unübersichtlich. Und des weiteren bleibt das Problem mit den vielen kleinen Icons bestehen, die alle je einen Request auslösen. Das kostet Zeit und trifft auf die Limitierung des Webservers. Das Hauptziel kann also zunächst nur sein die Anzahl initialer Requests (also der Requests die benötigt werden die Seite einmal komplett zu laden) zu minimieren. Und zwar sollte das so passieren, dass man unterhalb des Limits bleibt von max. 3-4 gleichzeitig eintreffenden Requests. Das ist natürlich ein Limit, dass sobald mehr als ein Nutzer gleichzeitig auf das UI zugreift bereits zu Problemen führen kann. Es ist schade, dass die Entwickler von ESPAsyncWebServer das nicht vorhergesehen haben und entsprechend zuviele Requests schlicht und einfach mit Fehler 503 ablehnen sondern stattdessen den Server crashen lassen. Aber vielleicht gibt es auch einen Grund der mir nicht begreiflich ist derzeit.

The Magic of Data-URI’s

Hier kommt dann jetzt eine Optimierungsstrategie zum Zuge, die auch bei „normalen“ Webseiten zu krass verbesserter User Experience (UX) führen kann. Das Einbetten der Bilddaten als sogenannte Daten-URI. Was ist das eine Daten-URI?

The data URI scheme is a uniform resource identifier (URI) scheme that provides a way to include data in-line in Web pages as if they were external resources. It is a form of file literal or here document. This technique allows normally separate elements such as images and style sheets to be fetched in a single Hypertext Transfer Protocol (HTTP) request […]

Das schreibt die Wikipedia dazu. und auf dieser Webseite heißt es „You can embed the image data directly into the document with data URIs.“ und genau das ist eine sehr sinnvolle Sache. Einerseits wird das Dokument (HTML, JS, CSS) in das man diese Daten dann einbettet zwar etwas größer, aber dafür unterbleiben Requests für Bilddaten komplett.

Aus folgendem Code für ein Favicon als Meta-Link im Header in HTML…

<link rel='icon' type='image/png' sizes='32x32' href='fav-icon-32x32.png'>

…wird folgender Code als eingebettete URI:

<link rel='icon' type='image/png' sizes='32x32' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9tpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDowMzhmMTQ5NC1lNGJkLTExZTEtOGQ4MC1jYjVjZDBjYjc4N2QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDJDODA5ODk0RjU1MTFFQThBRjNFQkJENEQ2MUU4MDUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDJDODA5ODg0RjU1MTFFQThBRjNFQkJENEQ2MUU4MDUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcy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'>

Der entscheidende Teil ist, dass man statt einer Hyperlink-URI eine Data-URI nutzt, die eben so ausschaut:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAA

Als Werkzeug zur Umwandlung gibt es zahlreiche Online Tools dafür, wie z.B. den Image to data-URI converter. Dort kann man seine Grafikdateien umwandeln lassen. Es gibt auch apps z.B. für macOS den Data URI Converter von Chris Yip.
Mit dem richtigen Tool ist es jedenfalls schnell gemacht.

Ergebnis: Schnell, schneller, embedded Data-URI

Die Ergebnisse sprechen absolut für sich. Nachfolgend habe ich mit zwei Screenshots im Safari Browser festgehalten, die initialen Requests und deren Laufzeit und Datenumfang, die gegen den Controller gehen im zeitlichen Verlauf. Die Ergebnisse sind absolut eindeutig: Data-URI schlägt den klassischen Weg um Längen.

Man erkennt sofort, dass nach dem Laden der initialen HTML Seite core.html weitere Requests ausgelöst werden, klar ist die core.css und core.js werden benötigt, um die Seite überhaupt korrekt anzuzeigen. Aber allein schon die erste Seite auszuliefern benötigt 1,14 Sekunden Zeit, und dann wird es problematisch, da gleich fünf weitere Requests losgehen gleichzeitig, unter anderem eben auch requests wegen Grafiken. Das schafft der Server eben manchmal nicht. Und dann sieht man auch noch, dass jedes Bild ca. 300 bis 700 Millisekunden Zeit benötigt, und das ist sehr lang!! Die gesamte Seite ist erst nach über sechs Sekunden geladen.

Die gleiche Seite optimiert mit Data-URI’s verhält sich deutlich besser. Zwar wird der initiale Download der core.html um etwa 15KB größer, interessanterweise aber kostet das kaum Zeit. Und der initiale Download führt zu lediglich zwei weiteren Requests für die core.css und core.js. Beide Dateien enthalten selbst wiederum ausschließlich Data-URI’s und führen somit zu keinen Folgerequests.

Die Auswirkung ist enorm. Die Bilddaten sind nun in 10 bis 20 Millisekunden geladen statt wie vorher in 300 bis 700. Eine Verbesserung um Faktor zehn. Insgesamt ist die ganze Seite vollständig geladen nach nur etwas über zwei Sekunden. Das erspart satte 4 Sekunden Wartezeit.

Fazit

Wer Webseiten auf dem Microcontroller ausliefert, der sollte ausschließlich inline Data-URI’s für grafische Inhalte verwenden und die Anzahl der Requests soweit wie möglich senken. Für mein Setup bestünde jetzt noch die Option auch die core.css und core.js in die core.html zu integrieren. Dann wäre nur noch eine große Datei nötig.

Aus Gründen der Code-Übersicht sehe ich davon aber erstmal ab. Sollte es aber nochmal Probleme mit dem WebServer geben, dann kann ich hier gezielt weiter optimieren.

Why do I blog this? Das Problem des instabilen und ständig crashenden ESPAsyncWebServer hat mich einige endlos erscheinende Stunden des Debuggens gekostet. Weil ich auch einfach nicht wusste was den WebServer crasht und/oder blockiert und Serial.print() statements haben nicht wesentlich geholfen. Ich hoffe es hilft anderen nicht in die gleiche Falle zu tappen. Sehr hilfreiche Hinweise zum Thema ESPAsyncWebServer habe ich überigens im Diskussionsforum/Chat zu dem Server gefunden. Das hat mir sehr geholfen.

ESP32/ESP8266: Besuch in der Welt der Microcontroller

Ich habe kürzlich einen kleinen Ausflug in die Microcontrollerwelt gemacht. Eigentlich bin ich noch mittendrin. Aber ich fang am besten am Anfang an.

Erste Schritte mit dem Arduino Uno

In 2019 habe ich einen kleinen Workshop/Kurs zu Microcontrollern bei Mathias mitgemacht. Mathias ist unser Arduino bzw. Microcontroller Guru im Hackerspace. Angefixt hatte er mich mit einem Bastelnachmittag, an dem ich mein erstes eigenes Oszilloskop DSO138 gebaut (mehr so Teile nach Plan zusammengelötet) habe. Ein tolles kleines Gerät (DSO-138-Datenblatt, DSO-138-Anleitung), hier hat das mal wer reviewed.

Großartige Unterlagen im Arduino Uno Workshop und eine top Vorbereitung haben dafür gesorgt, das ich jedes Mal mit dem Gefühl aus dem Kurs kam „Ach, das geht auch damit!?“. Der Kurs hat mir die Augen geöffnet wie gut man selber Dinge mit Elektronik tun kann. Und die Bedingungen waren nie besser, da die Komponenten günstig zu haben sind und somit auch das finanzielle Risiko echt überschaubar klein ist. Ab 30 Euro ist man dabei und hat einen Arduino am Start mit par Teilen.

Während des Kurses habe ich mit Hilfe des Microcontrollers eine Mood Lamp realisiert, Drucktaster abgefragt für eine Ampelschaltung, Töne generiert, ein Dot-Matrix-Display, eine 7-Segment-Anzeige und ein LC-Display angesteuert und vieles mehr. Alles Dinge die ich vorher für unmöglich hielt das mal selber zu können.

Level Up: ESP32/ESP8266

Kaum war der Kurs vorüber, erinnerte ich mich daran, dass ich ein Lights & More Projekt begonnen hatte im Space. Das Projekt hatte im Prinzip zum Gegenstand die Beleuchtung des Hackerspace im Allgemeinen zu verbessern durch ein gemütlicheres Ambiente. Dazu zählt für mich auch Low-Light und bunte Farben. Zumal wir in Bremen einen der buntesten Tunnel haben, den ich wirklich toll finde. Und ich wette da sind auch Microcontroller involviert.

Fünf Rollen NeoPixel LEDS waren dafür bereits beschafft nachdem wir einige Experimente gemacht hatten was gut ausschaut und gutes Licht erzeugt. Doch diese LEDS wollen gesteuert werden. Und genau diese Steuerung war noch eine offene Frage. Andere im Space fühlten sich schon immer superwohl mit den Hardware-Herausforderungen, ich jetzt auch.

Nachdem ich den ersten ESP32 per USB angeschlossen habe an den Rechner und feststellte, dass das Ding fast genauso wie der Arduino programmiert werden kann, war das Feuer entzündet. Ich wollte diesem Chip jetzt beibringen Licht für uns zu machen. Doch dafür brauchte ich auch erstmal ein paar LEDs an dem Chip.

Nachdem ich mir 10 LEDs von der Rolle abgeschnitten und verkabelt hatte und dann erstmals gesehen habe, dass man die zum Leuchten bringen kann, war mir klar, das Ding muss was werden. Und die ersten Zeilen Code standen da bereits. Mia hatte mir gezeigt, dass man die LEDs auch per UDP-Datenpaketen fernsteuern könnte wenn man sich das vornimmt.

Lohnenswerte Zeit

Das Finden von Zeit ist allerdings bei solchen Dingen ein großes Problem. Durch eine Fügung ergab sich, dass ich ein wenig Zeit geschenkt bekam für Experimente bzw. die gedankliche Beschäftigung mit dem Thema.

Level Up: IDE, C++, LED-Stripes, Breadboard Action

Neben einem ESP32 der relativ leistungsstark mit 2-Kern-Architektur kommt, hatte mir Marco einen ESP8266 (der Vorgänger des ESP32) zum spielen gegeben. Die Hardware war also da, und als ich dann noch PlatformIO entdeckte, konnte es auch mit einer einigermaßen schönen IDE ans Werk gehen.

Nützliche Links

Why do I blog this? Seit meinem ersten Kontakt mit dem Arduino Uno, bei dem die Programme meist nicht aus mehr als 50 bis 100 Zeilen Code bestanden, hat sich eine ganze Menge getan und ich habe endlos viel gelernt und noch viel mehr Code geschrieben. Was genau, das werde ich in weiteren Blogposts dann mal beschreiben. To be continued…

Review: reMarkable e-Ink Tablet nach einem Jahr Nutzung

Im November 2017 habe ich ein reMarkable Tablet mein Eigen nennen dürfen. Das Tablet hat die Besonderheit ein e-Ink-Tablet zu sein. Zugleich hat es eine weitere Besonderheit, es ist Touch-sensitiv und lässt sich mit normalen Finger-Taps und Wischgesten bedienen und man kann darauf schreiben mit einem speziellen Stift. Die Hände oder auch Handballen auflegen stören die Eingabe nicht.

Die dritte Besonderheit ist, man kann mit diesem Stift auf der Oberfläche des Screens flüssig schreiben ohne eine nennenswerte Verzögerung oder ein gefühltes „Nachziehen“ der Linie. Die Oberfläche des Bildschirms ist so beschaffen, dass es sich sehr papierähnlich und somit natürlich anfühlt darauf zu schreiben. Vor allem fühlt es sich nicht nach Glas und ultraglatt an, wenn man es z.B. mit den Apple iPads vergleicht für die man dann auch spezielle Stifte benötigt.

Ansicht des Tablet mit einer Zeichnung

Ansicht des Tablet mit einer Zeichnung und aufgeklappter Editierleiste links

Der Stift der für Zeichnen und Schreiben nötig ist

Wenn man sich das Foto von dem Stift anschaut, dann sieht der schon ziemlich unansehnlich aus nach dieser Zeit. Ehrlich gesagt kenne ich keinen einzigen Stift (unter meinen normalen Stiften), der nach so kurzer Zeit so dramatisch optisch-ekelhaft ausschaut. Daher hab ich nach einem Tipp gesucht, wie ich den wieder schön machen kann. Und auf Reddit wurde ich fündig.

Ich hab die untere Hälfte des Stift zunächst mit Solvent 50 behandelt (damit hab ich bei Kunststoffen schon oft Glück gehabt, vor allem wenn es um gummiartige Oberflächen ging), das hat schonmal ein wenig die leicht gummiartige Beschichtung abgelöst, und die Farbe deutlich aufgehellt, aber gelb sah es immer noch aus. Dann habe ich zu feinem Schmiergelpapier gegriffen und die untere Hälfte einfach bearbeitet bis eine sichtbar aufgetragene Kunststoffschicht das makellose Weiß darunter zum Vorschein brachte.

Jetzt war allerdings die untere Hälfte viel heller als die obere. Mist, das sieht nicht aus! Also hab ich kurzerhand den Stift mit einem Chromlack lackiert. Dafür hab ich das Stiftspitzenreservoir oben ausgefahren und sauber mit Malerkrepp den Innenraum abgeklebt. Auch das Loch unten im Stift hab ich vor der Lackierung mit einem Zahnstocher verschlossen, damit die Spitzen da wieder sauber reinpassen. Das Ergebnis kann sich denke ich sehen lassen.

Stift mit neuer Lackierung in Chrom

Meh, Kommando zurück

Okay, das war keine so tolle Idee, den Stift einfach so zu lackieren. Der Lack „trocknete“ nicht richtig, bzw. war klebrig beim Anfassen und nicht glatt. Als ich näher auf die Lackdose geschaut habe stand da dann auch dass der nicht abriebfest ist und auch nicht mit Klarlack überlackiert werden kann.

Wer lesen kann ist klar im Vorteil. Also nächstes Mal vorher lesen, was da drauf steht, bevor man so schnell wie ich zur Lackierung greift. Ende vom Lied war, dass ich den Stift wieder vollständig vom Lack befreit habe mit Lackentferner. Der Stift hat es erstaunlich gut überstanden. Die Beschriftung des Stifts mit dem Logo von reMarkable ist jetzt zwar weg, aber die war vorhern schon arg angegriffen.

Jetzt sieht man allerdings die Risse im Plastik noch besser als vorher schon, weil sich da jetzt Reste vom Lack abgesetzt haben.

Der Stift selbst ist übrigens ein recht besonderer Stift, der dank des ausgelaufenen Patents von WACOM nun auch kopiert werden darf. Es ist ein sogenannter EMR Stylus, der mit elektromagnetischen Feldern arbeitet, ohne eine eigene Energieversorgung zu benötigen. Hier hat das mal wer im Detail erklärt. Die englische Fassung aus dem Patent lautet:

Our patented electro-magnetic resonance (EMR) technology allows our electronic pens to operate without cords or batteries.

How can an electronic pen operate without batteries or a power cord? It’s like magic.

Our EMR technology switches back and forth between 2 operating modes many times per second. First, there is the power mode, which is where the sensor creates a magnetic field and sends out a frequency that is picked up by the pen. This transfers energy into the pen wirelessly, like how a tuning fork makes a piano wire move without touching it. Once the pen is energized, it redirects that energy though the pen circuitry as a radio frequency (RF) signal. At that point, the sensor stops sending, and switches over to listening mode. The sensor can then hear the pen that is located above the sensor. By measuring the signal strength at several points along the sensor, we can do the calculations on-the-fly to determine precisely where the pen is located, as well as when the pen tip is pressed down, and how hard it is pressed down.

Das wiederum bedeutet, dass das wesentliche an dem Stift nicht etwa diese kleinen Spitzen sind die man nachkaufen kann, sondern der Stift selbst enthält Technik die man nicht mal eben so nachbauen kann. Daher wird der Stift ziemlich teuer verkauft. Es gibt aber auch günstigere Alternativen, z.B. den Staedtler Noris.

Mir ist diese Besonderheit des Stifts erst aufgefallen, als ich probiert habe während der lackierte Stift trocknete, diese kleinen Spitzen so ganz ohne Halterung zu benutzen, in der naiven Annahme, dass das funktioniert. Das funktioniert natürlich nicht, da die Technik im inneren des Stifts fehlt. Samsung bietet ein ähnliches Modell an das wie folgt erklärt wird:

Wie man sieht ist es ein Wechselspiel aus Senden und Empfangen von Radiowellen. Die Abbildungen oben zeigen Stifte anderer Bauart mit den Innereien. Da sieht man dass eine Spulenwicklung wesentlich für diese Art Stift ist.

Ich hab das Tablet jetzt schon eine ganze Weile in Gebrauch. Zwischenzeitlich hatte ich es echt täglich in Gebrauch auf der Arbeit. Es ist einfach sehr nützlich, um z.B. in Meetings Notizen zu machen. Die erzeugten Dokumente kann man über einen im Tablet integrierten Webservice herunterladen. Dafür etabliert das Tablet beim Anschließen an den Mac einen AdHoc Netzwerkservice unter der IP-Adresse 10.11.99.1 die man im Webbrowser aufrufen kann und dann bekommt man folgendes UI zu Gesicht.

Der AdHoc Netzwerkservice unter IP 10.11.99.1

Interessant ist, dass auf dem tablet ein Custom Linux namens `Linux remarkable 4.1.28-fslc+g7f82abb869a #1 Wed Feb 28 14:14:56 CET 2018 armv7l GNU/Linux` läuft. Das System ist Open Source und auf github.

Darin kann man mit etwas Geschick und viel Geduld auch einige Dinge anpassen. Unter dem Stickwort reHackable haben sich hier schon einige gefunden, die das reMarkable versuchen in seinen Funktionen zu erweitern.

https://github.com/reHackable/awesome-reMarkable

Web UI zum Hoch- & Runterladen von Dokumenten

Man kann ganze PDF Dokumente hochladen per Drag & Drop. Über das UI kann man sich durchklicken in Unterordner und dann einzelne Dokumente als PDF wieder herunterladen. Das funktioniert gut, aber manchmal hat dieser AdHoc Netzwerkservice per USB Anschluss Probleme sich zu initialisieren. Dann muss man es nochmal probieren.

Exportiertes PDF Dokument

Folgendes PDF-Dokument gibt eine Idee davon wie ein auf dem Tablet erstelltes Dokument ausschaut, wenn man es exportiert hat. Das was auf dem Tablet als halbtransparente Farbe angezeigt wird, wird im PDF dann als halbdurchsichtiges Gelb abgebildet.

Tablet Hacking

Eine weitere Sammlung an Infos, um das Tablet mit weiteren Funktionen zu versehen und besser zu verstehen gibt es im reMarkable Wiki. Das Wiki beschreibt sich selbst wie folgt:

This is to become a comprehensive wiki about the reMarkable paper tablet. Please refer to the sidebar for a list of available main topics.

Ich hatte da eine recht umfangreiche Anleitung gepostet, wie man die Standard Screens austauschen kann, leider hat der Wiki-Besitzer offenbar sehr viele nützliche Einträge wieder gelöscht (also da bitte keine wertvolle Info mehr beitragen, das lohnt sich nicht). Gottseidank hatte ich das meiste in meinem git-repo https://github.com/trailblazr/reMarkableHacks hinterlegt.

Das Wiki hat allerdings hilfreiche Hinweise dazu, wie man z.B. zunächst den geschmeidigen ssh Zugriff herstellt. Ist erstmal der ssh-key hinterlegt, fluppt halt alles recht easy und man kann mit z.B.

scp *.png root@10.11.99.1:/usr/share/remarkable/. und mit
scp *.bmp root@10.11.99.1:/var/lib/uboot/.

einfach mal paar neue Splashscreens als png und bmp auf das Tablet laden.

Ich habe dann auch mal mit Hilfe meiner Elementary OS Installation eine Toolchain für Qt Applications installiert und mit Hilfe von Qt Creator unter anderem den draft launcher, fingerterm als Terminal und eine Zusatz Applikation die im Hintergrund den mittleren Button des Tablets überwacht, installiert. Wenn man jetzt den mittleren Button länger als 1 Sekunde gedrückt hält, wird die xochitl Applikation, die das Tablet standardmäßig fährt beendet, und man landet wieder im draft launcher. Dass der launcher by default nach dem Reboot des Tablet startet, hab ich natürlich über systemctl enable eingetragen und das kann man auch wieder rückgängig machen und jederzeit wieder ohne den launcher das Device benutzen.

Das funktionierte auf Anhieb ziemlich gut. Jetzt bin ich natürlich angefixt eine eigene Applikation für das Tablet zu schreiben. Dieses Qt schaut allerdings nach einer merkwürdigen Mischung aus Javascript und C++ aus kombiniert mit QML … ich vermute das steht für Qt Markup Language.

To be continued…

Die Innereien des Tablet

Nach etwas Suchen habe ich auch einen Teardown des Gerätes (De-Publizierungsschutz / PDF) bei der FCC Behörde entdeckt. Da erkennt man auch was da so alles an Technologie drin verbaut ist.

Die Revision 102 ist da auch aufgelistet. Und auch ein umfangreicher und interessanter Testreport der FCC (als PDF). [De-Publizierungsschutz]

Update: EMR Stylus

Ich hab mir jetzt einen STAEDTLER Noris Digital bestellt. Mal sehen wie der funktioniert mit dem Tablet. Hier paar Bilder davon aus dem Netz:

Inklusive Verpackung

Angekommen. Das Ding schreibt ganz gut. Schreibgefühl selbst ist deutlich besser als mit dem Original Pen. Leider ist der Original Pen in einer Hinsicht deutlich besser: Latenz. Wenn ich mit dem Original schreibe ist die Linie die ich zeichne quasi INSTANT da, bei dem Noris zieht die Linie leider etwas hinterher. Nicht stark aber doch merklich. Dennoch ist der Noris für mich eine willkommene Abwechslung und bei dem Preis von knapp 10 € auch echt noch als Versuch vertretbar.

Update: Neue Software 2.x

Ich hab das remarkable jetzt auf die neuste Version 2 mit der Software updated. Das wichtigste für mich war, dass man immer noch per ssh auf das Gerät kommt und damit alles offen ist. Da hatte ich befürchtet, nachdem da ein Venture Capitalist bei remarkable eingestiegen ist mit Geld, sofort diese Dinge dicht gemacht werden würden.

Das ist erfreulicherweise nicht passiert (noch nicht!!111). Die Anpassungen von den Statusscreens ist auch fast exakt gleich geblieben. Ich brauchte keine neuen Statusscreens bauen. Von daher Entwarnung bzw. Empfehlung durchaus auf die neue Software zu updaten.

Update: KOreader für remarkable verfügbar

Seit kurzem ist der KOreader (GitHub) verfügbar für das remarkable tablet.Hier geht es direkt zur Installationsanleitung für remarkable.

An ebook reader application supporting PDF, DjVu, EPUB, FB2 and many more formats, running on Cervantes, Kindle, Kobo, PocketBook and Android devices

Installation scheint relativ einfach zu sein:

remarkable 2 kommt

Das Remarkable Tablet bekommt ein großes Update.

Man kann es bereits vorbestellen.

Die neuen Features in der Übersicht:

Das schaut für mich nach einem super Update aus. Mehr Speed kann dem Ding nicht schaden. Vor allem aber sollte an dem Support für PDF Dokumente gearbeitet werden. Ich verstehe dass 300-seitige PDF’s schnell zum Problem werden bei den Hardware Restriktionen, aber irgendwie wäre es gut, wenn es da nicht so viele Probleme mit der Anzeige gäbe.

Was mir tatsächlich immer wieder schmerzlich fehlt ist eine Beleuchtung bei zu geringer Umgebungshelligkeit. Es klappt supper in Sonnenlicht und am Tage, aber abends wünschte ich mir oft eine Hintergrundbeleuchtung.

ReMarkable DIY-Pencil-Spezial

Nach meiner Odyssee mit dem weißen Pencil, der ja mehr gelb verfärbt war als weiß, habe ich noch nicht aufgegeben. Ich habe einen zweiten Anlauf gestartet und diesmal Nagellack eingesetzt für eine Verschönerung.

Jetzt bin ich durchaus der Ansicht, dass ich mir erstmal die Beschaffung eines neuen Pencil sparen kann, denn ich habe eine relative hübsche Verschönerung hinbekommen mit mehreren Farben von Nagellack. In einem über zwei Tage dauernden Prozess habe ich immer nach ein paar Stunden Trocknung einen neuen Ring mit Farbe hinzugefügt und alles am Ende mit einer Schicht klarem Nagellack überzogen.

Das Ergebnis kann sich durchaus sehen lassen finde ich. Ist zwar jetzt nicht gerade eine schnelle Verbesserung gewesen, aber eine die hoffentlich von Dauer sein wird. Besonders gut gefällt mir daran, dass man die Risse am Übergang der zwei Komponenten aus denen der Stift zu bestehen scheint nicht mehr erkennt. Diese waren ja durch die vorherige Aktion erst richtig deutlich sichtbar geworden.

Außerdem ist dieser Pencil jetzt einzigartig und ich finde ihn deutlich besser/schneller wieder, weil er zugleich schön bunt ist und sogar ein wenig Glittereffekt hat. Ist doch gut wenn man verschiedene Lacke im Hause hat um mal eben ein solches Farbwerk auf ein Stück eher grottiges Plastik zu bringen.

ReMarkable Pencil mal wieder ein Stück kaputter (Update: 30.1.2021)

Die letzten 7 Wochen, habe ich das ReMarkable – und damit auch den Pen – sehr intensiv genutzt. Mitten in einer Schreibsession, brach plötzlich ein Stück Plastik an der unteren Öffnung des Stifts heraus. Ich hatte nichtmal feste gedrückt, aber plötzlich funktionierte der ganze Stift nicht mehr. Da ich ja einen Backup-Stift (den Staedtler Digital Noris Pen) habe, war ich erstmal entspannt. Aber dann wollte ich doch nicht so ohne weiteres auf meinen so schön individuell gestalteten Pen verzichten. Doch wie sollte ich dieses kleine Stück Plastik da wieder dran bekommen?

Am wenigsten gern von allen Klebstoffen habe ich Sekundenkleber

plastik_ist_kein_metall_min.png Für diese kleine Stück Plastik (da fiel mir mal wieder ein „Plastik ist kein Metall“) mit Sekundenkleber zu arbeiten, sollte sich noch als Herausforderung entpuppen. Wie fasst man so ein Stück Plaste an, um es mit Sekundenkleber an der richtigen Stelle einzukleben in den Stift. Bestenfalls sollte danach auch noch die kleine Stiftmine problemlos (so wie vorher) eingesteckt und gewechselt werden können.

Nadelarbeiten 2.0

Dann kam mir eine Idee: Warum das ganze Ding nicht einfach auf eine Stecknadel aufspießen? So ohne weiteres funktionierte das nicht denn die Nadel ging nich rein ins Plastik, die Plastemasse war zu hart. Dann dachte ich mir, warum nicht die Nadel ordentlich heiß machen. Bisher ist noch jedes Plastik bei Hitze geschmolzen. Gesagt, getan, ich benutze ein Feuerzeug und mache ein Stecknadel schön heiß an der Spitze und spieße das Stück Plaste von der Außenseite auf.

Sekundenkleber… ich hasse Sekundenkleber als Werkmaterial, bisher hat mich jede Sekundenkleber-Aktion mit ordentlich Kleber an den Händen verunstaltet. Kann mir mal wer verraten, warum Sekundenkleber in Sekunden die Haut von Fingern zusammenklebt, aber am eigentlichen Werkstück Bis zu mehrere Stunden benötigt um wirkliche Festigkeit zu erlangen? Oh, und wenn man transparente Dinge mit diesem Klebstoff kleben möchte, dann machen einem die Ausdünstungen des Klebers krasse, weiße Rückstände auf der Oberfläche, die man nicht mehr wegbekommt.

Aber dieses Mal sollte es besser laufen. Ich konnte das Plastestückchen, problemlos mit der Nadel schön weit weg von meinen Fingern halten. Soweit sogut, aber jetzt durfte auch die kleine Plastikmine im Stift nicht noch mit dem Kleber in Berührung kommen. Denn was nutzt es mir wenn ich das Plastestück wieder dran habe, dafür aber keine Mine mehr wechseln kann? Nix!

Ordentlich geklebt ist die halbe Miete

Also habe ich den Kleber nur auf dem Plastestückchen unter Einsatz einer großen Lupe aufgebracht, um es anschließend in den Stift einzusetzen. Joa, und fing das Warten an… wie schon gesagt, Menschenhaut klebt der Kleber in Sekunden, aber an Werkstücken dauert es Stunden bis der Kram seine Festigkeit erhält und ich würde echt mal gern wissen, warum das so ist. Maximal ist Zeug ein Minuten- eher aber ein Stunden-Kleber.

Das Foto zeigt sehr gut, wie ich das Stück Plastik eingepasst habe. Die Nadel habe ich genauso entfernt wie ich sie reinbekommen hatte: Ordentlich heiß machen. Und dann nach stundenlangem Warten auf die versprochene Sekunden-Festigkeit, war das Ding dann auch endlich fest genug, um die Nadel herausziehen zu können.

Das Ergebnis überzeugt mich. Und wieder muss die Natur mit einem Stück Plastik des Menschen weniger zurechtkommen. Vorerst jedenfalls! Bis vermutlich die andere Seite rausbricht irgendwann. Mein nächster Stift ist die schwarze (Metall!?) Version für den ReMarkable. Warum die so schlechtes Plastik ausliefern wäre aber noch eine zu stellende Frage. Ich hab das Tablet im normalen Arbeitseinsatz, nicht den ganzen Tag, ab und an, mal 1h am Tag aber nicht viel mehr. Das sollte so ein Stift schon vertragen. Eines bleibt festzuhalten, bevor euch die Ersatzminen von ReMarkable ausgehen, geht euch eher der Stift kaputt.

Stiftmine nach Gebrauch

Ich hab seit einiger Zeit nicht mehr die Stiftmine (bzw. diese Spitze die das Gleiten des Stifts auf der Oberfläche erlaubt) nicht mehr gewechselt. Richtige Nachteile hatte ich auch bislang nicht bemerkt. Jetzt als ich die gewechselt hab, hat mich mal interessiert, wie die denn so ausschaut. Also hab ich die mal unter mein USB-Mikroskop gehalten.

Wie man sieht, hab ich die Spitze ganz gut „spitz“ geschrieben. Ich hab das ReMarkable im Power User Modus die letzten Monate betrieben und insgesamt etwa 400 Seiten Text geschrieben. Und so sieht so eine Spitze dann nach 400 Seiten aus.

Binaerformat des ReMarkable entschluesselt

Es gibt einen schoenen Vortrag von ax3l mit dem Titel „The .lines Binary Format: Decoding, documenting and converting the internal file format of the reMarkable e-ink tablet“

reMarkable_binary_format_2018.pdf

Why do I blog this? Ich dachte mir nach dieser Zeit kann man mal ein echtes Review schreiben. Froh bin ich vor allem darüber, dass die Software bzw. Firmware bzw. die Qt-basierte Applikation die auf dem Linux das Tablet fährt, regelmäßig Updates bekommen hat. Die bisherigen Updates haben die Benutzung wirklich verbessert und Fehler ausgemerzt. Und es gab bislang keine Probleme mit den Updates bei mir. Das ist für so ein innovatives Ding, wo man nicht weiß ob die Firma das mehr als ein Jahr überleben wird, ja nicht selbstverständlich.

Auch wenn einiges verbesserungswürdig ist (vor allem die Laufzeit mit der nur läppische 3000 mAh fassenden Energiequelle ist zu schwachbrüstig für dauerhaften Einsatz 24h nonstop), finde ich das Tablet immer noch praktisch und nutze es gerne. Ein wenig tweaking der Splash Screens macht halt auch Spaß, ist aber beim nächsten Update wieder von vorn notwendig. Aber insgesamt bereue ich nicht dieses Gerät zu besitzen und das Aufladen per Micro-USB-Anschluss ist man ja mittlerweile für tausende kleine Gadgets gewöhnt.

Wenn ich wüßte, wie ich eine lauffähige Entwicklungsumgebung für die Qt-Software aufsetzen könnte, hätte ich sicher schon meine erste eigene App für das Ding gebaut. Leider scheint aber gerade das Aufsetzen einer Toolchain für dieses Tablet nicht gar so einfach. Schade, so bin ich derzeit mehr Konsument als echter Anwender. Die IDE hab ich unter Elementary OS ans Laufen bekommen und zusätzliche Apps bereits installiert. Yay!