{"id":10306,"date":"2026-03-06T11:20:55","date_gmt":"2026-03-06T10:20:55","guid":{"rendered":"https:\/\/anb030.de\/a\/?p=10306"},"modified":"2026-03-06T11:23:02","modified_gmt":"2026-03-06T10:23:02","slug":"puxel-mein-webapp-frustprojekt","status":"publish","type":"post","link":"https:\/\/anb030.de\/a\/puxel-mein-webapp-frustprojekt\/","title":{"rendered":"Puxel: Mein Frustprojekt, das eine Sache perfekt macht \u2013 W\u00f6rter verpixeln, lokal, als WebApp und ohne Umwege"},"content":{"rendered":"
\n
\"Titelbild:<\/figure>\n<\/div>\n\n\n

Manchmal entsteht ein Projekt nicht aus einer gro\u00dfen Vision, sondern aus purer Genervtheit. Ich wollte eigentlich nur einen zuvor gemachten Screenshot \u00f6ffnen, einige sensible W\u00f6rter unkenntlich machen und das Bild dann teilen. Eine Kleinigkeit, sollte man meinen. Stattdessen fand ich im App Store \u00fcberladene Anwendungen mit Funktionen, die ich nie brauche, diverse Uralt-Apps, oder Modelle mit monatlichen In-App-K\u00e4ufen f\u00fcr etwas so Banales wie einen Pixel-Filter. Irgendwann war der Punkt erreicht, an dem ich mir sagte: \u201eDas versuche ich selbst zu bauen.\u201d Nach einigen Code-Experimenten war das fertige Projekt \u201ePuxel<\/a><\/strong>\u201c rund vier Monate sp\u00e4ter geboren. Eine kleine Web-App, deren Grundger\u00fcst gerade einmal 43 KB umfasst. Mit allen Grafiken, dem Icon und der Engine kommt das gesamte Projekt auf lediglich 1,3 MB. Es gibt keinen App Store, keinen Download im klassischen Sinn und kein Abo. Aktuell l\u00e4uft Puxel in der finalen Version 2.30 \u2013 schlank, lokal und genau auf einen Zweck fokussiert.<\/p>\n\n\n\n\n\n\n\n

<\/p>\n\n\n

\n
\"App-Icon:<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Auch das visuelle Erscheinungsbild habe ich selbst gestaltet \u2013 vom Interface samt Dock am unteren Rand, das bewusst an das iPad-Dock angelehnt ist, bis zu den kleinen Grafiken im Dock und dem App-Icon. Apropos App-Icon, das ist in einem cremefarbenen Minimalismus gehalten und spielt mit der Idee von Pixeln, die etwas verdecken wollen. Es gibt keinen generischen Baukasten-Look, sondern ein klares, reduziertes Design mit einer dunklen, Tahoma-\u00e4hnlichen Basis-Schrift samt Cursor-Balken und einem pr\u00e4gnanten Teal-Blue-Akzentton. Mir war wichtig, dass Puxel sich wie ein eigenst\u00e4ndiges Werkzeug anf\u00fchlt und nicht wie ein zuf\u00e4lliges Webprojekt mit Standard-UI.<\/p>\n\n\n\n

Der Puxel Workflow<\/h2>\n\n\n\n

Die Bedienung ist bewusst einfach gehalten. Man tippt unten im Navigations-Dock auf \u201eADD\u201c und w\u00e4hlt ein Bild oder Bildschirmfoto aus der \u201eFotos\u201c-App des iPhones\/iPads aus. Puxel analysiert das Bild direkt lokal im Browser und erkennt automatisch fast alle W\u00f6rter. Dieser Scan kann ein paar Sekunden dauern. Gedruckte Buchstaben auf farbigen Hintergr\u00fcnden werden dabei zu etwa 99 Prozent zuverl\u00e4ssig erfasst, bei handschriftlichen Texten liegt die Quote realistischerweise eher bei rund 50 Prozent. Genau hier zeigt sich, wie viel Feinarbeit in der Texterkennung steckt. Im Dock werden zwischendurch kleine Symbole angezeigt, die Tipps geben. <\/p>\n\n\n\n

Nachdem das zu bearbeitende Bild per OCR-Texterkennung gescannt wurde, gen\u00fcgt ein Fingertipp auf ein Wort, um es zu verpixeln. Tippt man erneut darauf, wird die \u00c4nderung r\u00fcckg\u00e4ngig gemacht. Nat\u00fcrlich kann man im Verpixel-Modus hoch- und runter scrollen und die Pinch-to-Zoom-Geste, also die Gestensteuerung mit Zeigefinger und Daumen, nutzen. Es ist kein umst\u00e4ndliches Markieren, Zuschneiden oder Herumziehen von K\u00e4sten n\u00f6tig. Am Ende gen\u00fcgt ein Tap auf \u201eSAVE\u201c, und das bearbeitete Bild landet wahlweise in der \u201eFotos\u201c- oder in der \u201eDateien\u201c-App von Apple. Mehr Workflow braucht es nicht.<\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Screenshots\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Die technischen H\u00fcrden von Puxel<\/h2>\n\n\n\n

Der technisch spannendste Teil von Puxel war die OCR-Erkennung auf echten iPhone-Screenshots. Die klassische Texterkennung ist darauf ausgelegt, dunklen Text auf hellem Hintergrund zu lesen. In der Realit\u00e4t sieht es jedoch oft ganz anders aus: Es gibt beispielsweise wei\u00dfen Text auf gr\u00fcnen Widgets, App-Namen auf buntem Wallpaper oder kleine Schrift auf Farbverl\u00e4ufen. Ein einzelner Durchlauf reicht hier schlicht nicht aus. Deshalb arbeitet Puxel mit f\u00fcnf unterschiedlich vorverarbeiteten Bildvarianten. <\/p>\n\n\n\n

Eine erste Stufe verst\u00e4rkt gezielt den Kontrast in Graustufen, eine zweite Stufe invertiert das Bild, um hellen Text auf dunklem Grund darzustellen. Zwei weitere Stufen setzen auf adaptive Binarisierung \u2013 einmal normal, einmal invertiert \u2013, sodass Text unabh\u00e4ngig von der globalen Helligkeit sauber vom Hintergrund getrennt werden kann. Die f\u00fcnfte und letzte Analyse betrachtet zus\u00e4tzlich die Farbs\u00e4ttigung, um Buchstaben sichtbar zu machen, die sich farblich \u2013 und nicht nur helligkeitsbedingt \u2013 von ihrer Umgebung unterscheiden.<\/p>\n\n\n\n

Anschlie\u00dfend werden alle Ergebnisse zusammengef\u00fchrt und \u00fcberlappende Erkennungen intelligent bereinigt. Das klingt nach viel Aufwand f\u00fcr eine kleine Web-App \u2013 und genau das war es auch. Gleichzeitig war dies der Moment, in dem aus einem Frustprojekt eine echte technische Herausforderung wurde. All das passiert vollst\u00e4ndig lokal auf dem Ger\u00e4t. Es werden keine Server, keine Cloud und keine Weitergabe von Bild- oder Textdaten an Dritte genutzt. Datenschutz ist hier keine Marketingfloskel, sondern eine direkte Folge der Architektur. Puxel ist damit DSGVO-konform, da die Daten das Ger\u00e4t schlicht nicht verlassen.<\/p>\n\n\n\n

Kurz und knapp gesagt \u2026\ufffc<\/h2>\n\n\n\n

In der finalen Version 2.30 ist Puxel am Ende genau das geworden, was ich mir urspr\u00fcnglich gew\u00fcnscht habe: ein Werkzeug, das eine Aufgabe sauber und unkompliziert erledigt. Ohne Funktionsballast, ohne Abo-Modell, ohne versteckte Kompromisse. 43 KB im Kern, 1,3 MB Gesamtgr\u00f6\u00dfe \u2013 und das gute Gef\u00fchl, ein allt\u00e4gliches Problem eigenst\u00e4ndig gel\u00f6st zu haben. Sollte jetzt jemand Interesse an dem Puxel Quellcode haben, darf er oder sie sich gerne unter den bekannten Kan\u00e4len bei mir melden.<\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Zur<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

\n\n\n\n

<\/p>\n\n\n\n

Ich bin ein \u201eEin-Personen-Betrieb\u201c, arbeite hauptberuflich im Gesundheitswesen und betreibe diese Seite als Hobbyprojekt in meiner Freizeit. Wenn Ihnen meine Arbeit gef\u00e4llt (die Beitr\u00e4ge, die Hintergrundbilder, mein allgemeines Auftreten \u2026 einfach alles), so d\u00fcrfen Sie gerne in Erw\u00e4gung ziehen, mir eine kleine Spende f\u00fcr zum Beispiel einen Caf\u00e9 \u2615\ufe0f per PayPal.com<\/a><\/strong> zukommen zu lassen! Ihre Beteiligung ist unglaublich wertvoll und tr\u00e4gt viel zur Unterst\u00fctzung und Erhalt dieser werbefreien Seite bei!<\/p>\n\n\n\n

<\/p>\n\n\n\n

\n
\"PayPal Unterst\u00fctzen<\/a><\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n \"Author\n

Andr\u00e9 K. ist der Autor dieses Blogartikels. <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Manchmal entsteht ein Projekt nicht aus einer gro\u00dfen Vision, sondern aus purer Genervtheit. Ich wollte eigentlich nur einen zuvor gemachten Screenshot \u00f6ffnen, einige sensible W\u00f6rter unkenntlich machen und das Bild dann teilen. Eine Kleinigkeit, sollte man meinen. Stattdessen fand ich im App Store \u00fcberladene Anwendungen mit Funktionen, die ich nie brauche, diverse Uralt-Apps, oder Modelle […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[444,488,387],"tags":[392,412,489,388,390,389,394],"class_list":["post-10306","post","type-post","status-publish","format-standard","hentry","category-app-geheimtipp","category-ipad","category-iphone_ios","tag-app","tag-grafik-graphic","tag-hth","tag-ios","tag-ipad","tag-iphone","tag-pictures","gallery-content-unit"],"_links":{"self":[{"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/posts\/10306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/comments?post=10306"}],"version-history":[{"count":19,"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/posts\/10306\/revisions"}],"predecessor-version":[{"id":10332,"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/posts\/10306\/revisions\/10332"}],"wp:attachment":[{"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/media?parent=10306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/categories?post=10306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/tags?post=10306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}