8 Flip-Dot-Font Editor

kompatibel mit der wwFlipGFX-Library von Rainer Radow

Daniel Eichhorn hat dankenswerterweise seinen on-line Glyph Font Editor als Open-Source frei verfügbar gemacht. So konnte ich Euch sein tolles Tool hier in deutscher Übersetzung verfügbar machen.

Zur Anpassung an die Flip-Dot Arduinowelt habe ich zwei kleine Änderungen an seinem Code vorgenommen. Bei Erstellung eines Fonts wird die Endung V3 nicht mehr an den Dateinamen gehängt - das war eine kosmetische Änderung. Damit der Font ohne Compilerwarnungn durch die Arduino IDE läuft, habe ich die Fontdefinition in const uint8_t geändert.

Wie beginne ich hier?

Wenn man einen vorhandenen Font bearbeiten möchte, lädt man ihn über den Knopf Durchsuchen in das Textfenster. Hierin kann man die Struktur studieren und auch ändern. Der Knopf Editierbare Zeichenabbilder aus dieser Font-Beschreibung generieren macht genau das, was auf ihm steht. Anschließend kann man am Seitenende jedes einzelne Zeichen komfotabel editieren.

Wer das gleich einmal testen möchte, kann auch über den Knopf Demo einen Demo-Font erzeugen und bearbeiten.

Einen ganz neuen Font erzeugt man, indem man die Font-Definition komplett ausfüllt und per Knopf Neuen Font das erste Zeichen zum sofortigen Editieren aufruft.

Was steht in der Font-Definition?

Der Font Name wird zur Erzeugung des Dateinamen verwendet und im Programmablauf zum Aufrufen des jeweiligen Fonts genutzt. Die Namenskonvention entspricht der einer Programmvariable.

#include "fonts/wetter.h"
// bindet den Font wetter.h ein, den man über den Font Namen "wetter" erstellt hat

Der erste Zeichencode legt fest, wie man später im Programm die einzelnen Zeichen aufrufen kann. Für Text gilt die ASCII Tabelle. Darin ist das erste Textzeichen das Leerzeichen, das bei dezimal 32 steht. Für erste Versuche sollte man sich einen in der wwFlipGFX vorhandenen Font in den Editor laden und dann den Aufbau studieren.

Möchte man Sonderzeichen wie z.B. Mondphasen oder Wettersymbole erzeugen, hat man diverse Möglichkeiten. Man könnte solch einen Zeichensatz z.B. mit dem Zeichen 48 beginnen lassen, was nach ASCII Code einer "0" entspricht.

ww.mSetFont(wetter);    // Font wetter.h zum aktuellen Font machen
ww.mDrawString(int16_t topLeftCornerX, int16_t topLeftCornerY, "0");
// Das über den Zeichencode 48 = ASCII "0" definierte Sonderzeichen wird ausgegeben

Die Werte Font-Breite und Font-Höhe sprechen für sich. Achtung, man kann diese bei einmal begonnenen Fonts nicht mehr ändern. Die Font-Breite legt den Maximalwert fest. Für jeden Buchstaben kann man diese dann weiter einschränken. Damit können Fonts mit fester oder variabler Breite erzeugt werden.

Wie speichere ich meinen Font?

Das Speichern des Fonts verläuft zweistufig. Zunächst wird der Font-Code aus den Grafiken erzeugt. Dieser Code erscheint rechts neben den Zeichen. Man kann ihn nicht editieren. Nach Mausklick auf Font-Code als Font-Datei speichern wird die Datei im vom Broser festgelegten Download-Ordner gespeichert. Auf meinem Windows Rechner ist das C:\Users\Rainer\Downloads.

Die neue Font-Datei muss noch "unter" den Ordner "src" der wwFlipGFX kopiert werden. Für Sonderzeichensätze lege ich spezielle Ordner an. Das kann man selbst entscheiden. Zum Beispiel liegen meine Brail Fonts unter C:\Users\Rainer\Documents\Arduino\libraries\wwFlipGFX\src\brail.

Wie editiere ich einzelne Zeichen?

Die einzelnen Pixel manipuliert man direkt in der Zeichendarstellung durch Mausklick. In der ersten Zeile jedes Zeichens erreicht man 10 Funktionen zur weiteren Bearbeitung. Jede "Taste" wird per "Tool Tip" erklärt, wenn man sie mit der Maus überfährt.

Die Funktion ")" macht das Zeichen von rechts her eine Spalte schmäler. Die Pixel der Zeile werden ausgegraut. So erzeugt man Fonts mit variabler Breite. "(" bewirkt das Gegenteil. Ein Zeichen kann bis auf die in der Font-Definton angegebenen maximalen Font-Breite erweitert werden.

Gut zu wissen: alle weißen Spalten am Ende eines Zeichen belegen keinen Speicherplatz in der Font-Dateistruktur, werden aber auf der Anzeige als Leespalte dargestellt. Leerspalten können im Programmablauf auch durch die Einstellung von mSetCharSpace(uint8_t charSpace); hinzugefügt werden.

On-Line Font-Editor


Bestehende Datei vom eigenen Computer in die Vorschau laden



oder einen -Font erzeugen


Font-Definition:
Font Name:
Erster Zeichencode:
Font-Breite:
Font-Höhe:

next



keine Verfolgung durch soziale Medien

Deprecated: Directive 'allow_url_include' is deprecated in Unknown on line 0