Anleitung
WAnsiDraw ist ein ANSI-Art Editor im Browser. Diese Seite erklärt alle Werkzeuge, Tasten und Dateiformate.
Die Oberfläche
Beim Aufruf erscheint zuerst ein Startbildschirm, der sich wie über ein Modem aufbaut. Enter, Escape, die Leertaste, ein Klick oder der Knopf Starten öffnen den Editor. Wer "Bewegung reduzieren" im Betriebssystem eingestellt hat, sieht ihn ohne Animation.
Oben liegt die blaue Menüleiste mit Datei, Bearbeiten, Werkzeuge, Ansicht, Vorlagen und Hilfe. Die gelben Buchstaben öffnen ein Menü zusammen mit Alt, zum Beispiel Alt+D für Datei. Alt allein aktiviert die Leiste, danach geht es mit den Pfeiltasten, Enter und Escape weiter.
Links stehen die Werkzeuge, die Optionen, das aktuelle Zeichen und die Farbpalette. In der Mitte liegt die Zeichenfläche. Darunter zeigt eine Leiste die Zeichen auf F1 bis F10 und die Nummer des Zeichensatzes. Ganz unten steht die Statuszeile mit Cursorposition, Farben, Werkzeug, Einfügen oder Überschreiben, Größe der Leinwand und Zoom. Ein Stern hinter dem Zoom heißt: noch nicht gespeichert.
Alles lässt sich auch nur mit der Tastatur bedienen. Tab wechselt zwischen Zeichenfläche und Bedienelementen.
Zeichnen mit der Tastatur
Klicke in die Zeichenfläche und tippe. Jedes Zeichen erscheint in der aktuellen Vorder- und Hintergrundfarbe. Die Pfeiltasten bewegen den Cursor, Pos1 und Ende springen an den Anfang oder das Ende der Zeile, Bild auf und Bild ab um eine Bildschirmseite. Enter springt an den Anfang der nächsten Zeile.
Einfg schaltet zwischen Überschreiben und Einfügen um. Beim Einfügen rückt der Rest der Zeile nach rechts, der Cursor wird dicker. Die Rücktaste löscht links vom Cursor, Entf löscht das Zeichen unter dem Cursor und zieht den Rest der Zeile nach.
Zeichensätze auf F1 bis F10
Wie in TheDraw liegen auf F1 bis F10 Sonderzeichen. Es gibt zehn Sätze: einfache Linien, doppelte Linien, gemischte Linien, Kreuzungen, Schattierungen und Blöcke, Symbole, Pfeile und weitere Zeichen. Umschalt+F1 bis F10 wählt den Satz, die Pfeile in der Leiste unten blättern ebenfalls. Am Anfang ist Satz 6 aktiv, er enthält die Schattierungen und Blöcke.
Die Belegung lässt sich ändern: Öffne Werkzeuge, Zeichentabelle. Dort wählst du ein Zeichen mit den Pfeiltasten und drückst eine Taste von F1 bis F10, das Zeichen liegt dann auf dieser Taste im aktuellen Satz. Die eigene Belegung bleibt im Browser gespeichert. Werkzeuge, Zeichensätze zurücksetzen stellt die Vorgabe wieder her.
Farben ohne Maus
Strg+Pfeil hoch und runter wechseln die Vordergrundfarbe, Strg+Pfeil rechts und links die Hintergrundfarbe.
Werkzeuge für die Maus
Für alle Werkzeuge gilt: Die linke Maustaste nimmt die Vordergrundfarbe, die rechte die Hintergrundfarbe. Ein Mauszug ist ein Schritt beim Rückgängigmachen. Alt+Klick übernimmt in jedem Werkzeug Zeichen und Farben der angeklickten Zelle.
| Halbblock-Pinsel | Jede Zelle besteht aus zwei Bildpunkten übereinander. Der Pinsel malt einzelne Bildpunkte und setzt automatisch die passenden Zeichen ▀ ▄ █ und Farben. So malst du wie in einem Malprogramm mit doppelter senkrechter Auflösung. Beim schnellen Ziehen werden Lücken mit einer Linie geschlossen. |
|---|---|
| Zeichenpinsel | Malt das aktuelle Zeichen in den aktuellen Farben. Die rechte Maustaste löscht. |
| Farbpinsel | Ändert nur Farben, die Zeichen bleiben. Links setzt die Vordergrundfarbe, rechts die Hintergrundfarbe. |
| Radierer | Setzt Zellen auf ein Leerzeichen mit schwarzem Hintergrund. |
| Linie, Rechteck, Ellipse | Ziehen mit gedrückter Maustaste. Die Option Gefüllt füllt Rechteck und Ellipse. Im Halbblock-Modus wird mit Bildpunkten gezeichnet, sonst mit dem aktuellen Zeichen. |
| Rahmen | Zeichnet mit Linienzeichen, einfach oder doppelt (Option Rahmen doppelt). Ziehst du in einer Zeile oder Spalte, entsteht eine Linie, sonst ein Rechteck. Wo Linien sich kreuzen oder berühren, setzt der Editor die passenden Ecken, Abzweigungen und Kreuzungen. |
| Füllen | Füllt eine zusammenhängende Fläche. Im Halbblock-Modus werden Bildpunkte gleicher Farbe gefüllt, Textzeichen bilden dabei eine Grenze. Sonst werden Zellen mit gleichem Zeichen und gleichen Farben mit dem aktuellen Zeichen gefüllt. |
| Pipette | Übernimmt Zeichen, Vorder- und Hintergrundfarbe einer Zelle. |
| Auswahl | Zieht einen rechteckigen Bereich auf, siehe nächster Abschnitt. |
Auswahl und Zwischenablage
Einen Bereich wählst du mit dem Werkzeug Auswahl oder mit Umschalt+Pfeiltasten. Strg+A wählt alles, Escape hebt die Auswahl auf.
- Strg+C kopiert, Strg+X schneidet aus, Entf leert den Bereich.
- Strg+V fügt als schwebende Auswahl ein. Du verschiebst sie mit der Maus oder den Pfeiltasten, Enter oder ein Klick daneben setzt sie ab, Escape verwirft sie.
- Im Menü Bearbeiten: mit dem aktuellen Zeichen füllen, nur die Farben ersetzen, waagerecht oder senkrecht spiegeln. Beim Spiegeln werden richtungsabhängige Zeichen mitgedreht, etwa Halbblöcke, Ecken, Abzweigungen, Klammern und Schrägstriche. Ohne Auswahl wird das ganze Bild gespiegelt, bei einer schwebenden Auswahl nur sie.
Beim Kopieren landet das Bild auch als ANSI-Text in der Zwischenablage des Systems. So kannst du es in ein Terminal oder einen Texteditor einfügen. Text aus anderen Programmen fügt der Editor als einfachen Text ein, Unicode-Zeichen werden auf CP437 abgebildet.
Rückgängig (Strg+Z) und Wiederholen (Strg+Y) reichen mindestens 200 Schritte zurück, über alle Werkzeuge hinweg.
Leinwand, Farben und Ansicht
Die Leinwand ist am Anfang 80 Spalten breit und 25 Zeilen hoch. Unter Bearbeiten, Leinwandgröße stellst du 1 bis 160 Spalten und 1 bis 1000 Zeilen ein. Zeilen und Spalten fügst du an der Cursorposition ein oder löschst sie dort.
Die Palette hat die 16 VGA-Farben. Ein V markiert die Vordergrundfarbe, ein H die Hintergrundfarbe. Linke Maustaste wählt den Vordergrund, rechte Maustaste den Hintergrund.
- iCE-Farben: Normalerweise sind nur die acht dunklen Farben als Hintergrund möglich, die hellen Hintergründe bedeuten auf echter Hardware Blinken. Mit iCE-Farben stehen alle 16 Farben als Hintergrund zur Verfügung. Der Schalter wird in SAUCE vermerkt.
- 9-Punkt-Modus: Echte VGA-Karten zeigen Textzeichen 9 Punkte breit. Die Linienzeichen von C0 bis DF werden in die neunte Spalte verlängert, damit Linien durchgehen. Auch dieser Schalter landet in SAUCE und im PNG.
- Zoom: 1x bis 4x, immer in ganzen Faktoren und ohne Glättung. Strg+Plus und Strg+Minus oder Strg+Mausrad.
- Raster: blendet die Grenzen der Zeichenzellen ein.
Alle Tasten
Die Tasten gelten, solange die Zeichenfläche den Fokus hat. Die Liste steht auch im Menü Hilfe, Tastenbelegung.
| Pfeiltasten | Cursor bewegen |
|---|---|
| Umschalt+Pfeiltasten | Auswahl aufziehen |
| Pos1, Ende | Anfang oder Ende der Zeile |
| Strg+Pos1, Strg+Ende | Anfang oder Ende des Bildes |
| Bild auf, Bild ab | Eine Seite nach oben oder unten |
| Enter | Nächste Zeile, bei schwebender Auswahl absetzen |
| Einfg | Einfügen oder Überschreiben |
| Rücktaste | Zeichen links vom Cursor löschen |
| Entf | Zeichen löschen, bei Auswahl den Bereich leeren |
| F1 bis F10 | Zeichen aus dem aktuellen Satz setzen |
| Umschalt+F1 bis F10 | Zeichensatz 1 bis 10 wählen |
| Strg+Pfeil hoch, runter | Vordergrundfarbe vor oder zurück |
| Strg+Pfeil rechts, links | Hintergrundfarbe vor oder zurück |
| Strg+Z, Strg+Y | Rückgängig, Wiederholen |
| Strg+C, Strg+X, Strg+V | Kopieren, Ausschneiden, Einfügen |
| Strg+A | Alles auswählen |
| Strg+S, Strg+O | Speichern, Öffnen |
| Strg+Plus, Strg+Minus | Zoom, auch Strg+Mausrad |
| Escape | Auswahl aufheben, schwebende Auswahl verwerfen |
| Alt | Menüleiste aktivieren |
| Alt+Buchstabe | Menü direkt öffnen |
| Alt+Klick | Pipette in jedem Werkzeug |
Strg+N, Strg+T und Strg+W gehören dem Browser und sind deshalb nicht belegt. Neu findest du im Menü Datei.
Dateien öffnen und speichern
Öffnen geht über Datei, Öffnen (Strg+O) oder indem du eine Datei auf die Seite ziehst. Gespeichert wird als Download, den Namen wählst du im Dialog.
| .ans | ANSI mit CP437 und Farbcodes. Beim Öffnen versteht der Editor Farben (auch Blinken als iCE-Hintergrund), Cursorbewegungen, Löschbefehle, Zeilenumbrüche und den automatischen Umbruch nach der Breite. Beim Speichern schreibt er möglichst wenige Steuerbefehle, keine Cursorpositionierung, CRLF als Zeilenende und am Ende ESC[0m. Leerzeichen am Zeilenende mit schwarzem Hintergrund fallen weg. |
|---|---|
| .bin | Binary Text: Paare aus Zeichen und Farbe. Die Breite steht in SAUCE, ohne SAUCE gelten 160 Spalten. |
| .asc, .txt | Nur Zeichen ohne Farben. Beim Öffnen wird UTF-8 erkannt und auf CP437 abgebildet, sonst gilt CP437. Beim Speichern wählst du CP437 (.asc) oder UTF-8 (.txt). |
| .png | Das Bild in 1x, 2x oder 3x, mit 8 oder 9 Punkten pro Zeichen wie eingestellt. |
Die Steuerzeichen 09, 0A, 0D, 1A und 1B können in .ans- und .asc-Dateien nicht als Zeichen stehen. Sie werden als Leerzeichen gespeichert, der Editor sagt dir Bescheid. In .bin bleiben sie erhalten.
Volle Zeilen mit 80 Zeichen enden trotzdem mit CRLF. Mailbox-Terminals, WebCarrier BBS und 16colo.rs zeigen das richtig an. Für sehr alte DOS-Terminals, die nach dem 80. Zeichen sofort umbrechen, lässt du die letzte Spalte frei.
SAUCE
SAUCE ist ein kleiner Block am Ende der Datei mit Angaben zum Bild. Archive wie 16colo.rs und viele Betrachter lesen ihn. Unter Datei, SAUCE-Angaben trägst du Titel (35 Zeichen), Künstler (20), Gruppe (20), Datum und Kommentare ein. Breite, Höhe, iCE-Farben, 9-Punkt-Modus und die Schrift "IBM VGA" setzt der Editor selbst. Beim Speichern ist SAUCE standardmäßig an, du kannst es im Dialog abschalten.
Vorlagen für WebCarrier BBS
Das Menü Vorlagen enthält schlichte Screens in 80x25 für WebCarrier BBS: welcome (Begrüßung), logon (nach der Anmeldung), logoff (Abmeldung) und newuser (neue Benutzer). Sie enthalten Makros wie @BBSNAME@, @SYSOP@, @USER@, @DATE@ und @TIME@ als normalen Text. WebCarrier BBS ersetzt sie beim Anzeigen durch die echten Werte.
Gestalte die Vorlage, speichere sie als .ans unter dem passenden Namen und lade sie in deiner Mailbox als Screen hoch. Welche Makros es gibt, steht im Sysop-Handbuch von WebCarrier BBS. Denk daran, dass ein Makro nach dem Ersetzen länger oder kürzer sein kann. Setze deshalb rechts neben ein Makro keinen Rahmen, oder nutze die Makros mit fester Breite wie @BBSNAME:40C@.
Wie in der Mailbox ansehen
Datei, Wie in der Mailbox ansehen spielt das Bild Zeichen für Zeichen ab, so wie es früher über ein Modem kam. Wähle 2400, 9600, 14400, 28800 oder 57600 Baud oder unbegrenzt. Escape oder ein Klick auf das Bild bricht ab, Neu starten spielt es noch einmal.
Betrachter auf Handy und Tablet
Auf Bildschirmen unter 900 Pixel Breite und auf Geräten ohne Maus startet statt des Editors ein Betrachter. Dort kannst du Dateien öffnen, ansehen, zoomen, als PNG speichern und in der Modem-Vorschau abspielen. Der Link "Trotzdem den Editor öffnen" startet den Editor auch dort, bequem zeichnen lässt es sich aber nur mit Tastatur und Maus.
Tipps für gute ANSI-Art
- Halbblöcke: Mit ▀ und ▄ hast du doppelt so viele Bildpunkte in der Höhe. Der Halbblock-Pinsel kümmert sich um Zeichen und Farben, du malst einfach.
- Schattierungen: ░ ▒ ▓ mischen Vorder- und Hintergrundfarbe. Eine Reihe wie Blau, ░ Blau auf Hellblau, ▒, ▓, Hellblau ergibt einen weichen Übergang.
- Farbverläufe: Gute Verläufe gehen über Farben, die zusammenpassen: Schwarz, Dunkelgrau, Hellgrau, Weiß. Oder Blau, Hellblau, Hellcyan, Weiß. Oder Rot, Hellrot, Gelb, Weiß.
- Kontraste: Helle Schrift auf dunklem Grund liest sich am besten. Ein dunkler Schatten unten rechts hebt Schriftzüge vom Hintergrund ab.
- Wenig ist mehr: Zwei oder drei Farbfamilien pro Bild wirken ruhiger als alle 16 Farben.
- Breite: 80 Spalten sind der Standard für Mailboxen. Plane Screens für 80x25, damit sie ohne Scrollen auf einen Bildschirm passen.
Speicherung im Browser
Der Editor sichert deine Zeichnung laufend im localStorage deines Browsers. Beim nächsten Aufruf fragt er, ob der gesicherte Stand wiederhergestellt werden soll. Neu und Öffnen fragen vorher nach, wenn es ungespeicherte Änderungen gibt.
Gespeichert werden nur die Zeichnung und deine Einstellungen (Zeichensätze, Zoom, Schalter, zuletzt gewähltes Format). Nichts davon verlässt deinen Browser, es gibt keine Cookies und keine Anfragen an fremde Server. Datei, Gespeicherte Daten löschen entfernt alles wieder. Die Sicherung ersetzt kein Speichern: In einem privaten Fenster oder nach dem Löschen der Browserdaten ist sie weg.