Manual

The screen

When you open the page, a start screen appears first and builds up as if it came over a modem. Enter, Escape, Space, a click or the Start button open the editor. If "reduce motion" is set in your operating system, it is shown without animation.

At the top is the blue menu bar with File, Edit, Tools, Characters, View, Templates and Help. The yellow letters open a menu together with Alt, for example Alt+F for File. Alt on its own activates the bar, then use the arrow keys, Enter and Escape.

On the left are the tools, the options, the current character and the color palette. The canvas is in the middle, above it a bar with the open drawings. Below it a bar shows the characters on F1 to F10 and the number of the character set. At the very bottom is the status line with cursor position, colors, tool, insert or overwrite, canvas size and zoom. A star after the zoom means: not saved yet.

Everything works with the keyboard alone. Tab moves between the canvas and the controls.

Drawing with the keyboard

Click on the canvas and type. Every character appears in the current foreground and background color. The arrow keys move the cursor, Home and End jump to the start or end of the line, Page Up and Page Down move by one screen. Enter goes to the start of the next line.

Insert switches between overwrite and insert. In insert mode the rest of the line moves to the right and the cursor gets thicker. Backspace deletes left of the cursor, Del deletes the character under the cursor and pulls the rest of the line in.

Character sets on F1 to F10

Like in TheDraw, F1 to F10 hold special characters. There are ten sets: single lines, double lines, mixed lines, crossings, shades and blocks, symbols, arrows and more. Shift+F1 to F10 selects a set, the arrows in the bar at the bottom do the same. Set 6 is active at the start, it holds the shades and blocks.

You can change the keys: open Characters, Character table. Pick a character with the arrow keys and press a key from F1 to F10, the character is then on that key in the current set. Your own layout stays saved in the browser. Characters, Reset character sets restores the defaults.

Colors without a mouse

Ctrl+Up and Ctrl+Down change the foreground color, Ctrl+Right and Ctrl+Left the background color.

Lines with the keyboard

Ctrl+L (or Tools, Lines with keys) turns on line mode. The arrow keys then draw a line behind the cursor, single or double depending on the Double frame lines option. Corners, junctions and crossings with existing lines are set by the editor. The status line shows "Lines". Ctrl+L turns it off again.

Mouse tools

For all tools: the left mouse button uses the foreground color, the right one the background color. One mouse stroke is one undo step. Alt+click takes the character and colors of a cell in any tool.

Big text with TheDraw fonts

TheDraw fonts (.tdf) are fonts of big letters made of blocks, lines or colored characters. Most of the lettering on BBS screens was made with them.

1. Pick the Big text tool and click where the text should start.
2. Type the text. Enter starts a new line below, Backspace takes back the last letter.
3. Choose the font on the left in the Big text section or with Characters, Pick TheDraw font.

There are three kinds: block fonts use the current colors, color fonts bring their own colors, outline fonts are made of lines. Outline fonts come with the 19 outline styles of TheDraw, from single and double lines to half blocks.

Two fonts of our own come with WAnsiDraw, VGA Block and VGA Color. Load more .tdf files in the font dialog with Load fonts. One file can hold many fonts, all of them appear in the list. Loaded fonts stay in this browser until you remove them. If a lower case letter is missing, the upper case one is used.

Making your own fonts

Characters, Edit TheDraw font builds your own block and color fonts or changes existing ones:

1. Create a new font (name up to 12 characters, color or block) or choose an existing one and click Edit.
2. Close the dialog, draw a letter on the canvas and select it with Select or the magic wand.
3. Open the dialog again, click the letter in the list and then Take from selection.

Blanks on black stay transparent in the letter, blanks with a colored background are drawn. Put on the canvas places an existing letter as a floating selection, so you can change it and take it again. Every change goes straight into your own fonts in the browser (file my-fonts.tdf in the font list). Changing a font that came with WAnsiDraw or that you loaded makes a copy. Download as .tdf saves the font as a file that other programs can read too. Outline fonts can be used, but not edited.

Selection and clipboard

Select an area with the Select tool, the magic wand or with Shift+arrow keys. Ctrl+A selects everything, Escape clears the selection. Hold Shift with Select and the magic wand to add more areas, hold Ctrl to take areas away. This also makes selections that are not rectangles. Edit, Invert selection selects everything except the selection.

• Ctrl+C copies, Ctrl+X cuts, Del clears the area.
• Ctrl+V pastes as a floating selection. Move it with the mouse or the arrow keys, Enter or a click outside places it, Escape drops it.
• Center, Left justify and Right justify in the Edit menu align the text of the cursor row, or of every row inside the selection.
• In the Edit menu: fill with the current character, replace colors only, mirror horizontally or vertically. Mirroring also turns characters that point in a direction, such as half blocks, corners, junctions, brackets and slashes. Without a selection the whole picture is mirrored, with a floating selection only that.

With a selection that is not a rectangle, clearing, filling, replacing colors and mirroring only change the selected cells. When you paste it, the cells in between stay as they are.

When you copy, the picture also goes to the system clipboard as ANSI text, so you can paste it into a terminal or a text editor. Text from other programs is pasted as plain text, Unicode characters are mapped to CP437.

Undo (Ctrl+Z) and redo (Ctrl+Y) go back at least 200 steps across all tools.

Several drawings

Up to nine drawings can be open at the same time, each in a tab of its own above the canvas. New, Open, templates and converted pictures go into a new tab, so the current drawing always stays. If the current drawing is still empty and unchanged, Open, templates and converted pictures take its tab. New and the + always open a new tab.

• A click on a tab or Alt+1 to Alt+9 switches the drawing. View, Next drawing and Previous drawing go through them in turn.
• The + right of the tabs starts a new drawing.
• The ■ in the tab or File, Close drawing closes it. With unsaved changes the editor asks first.
• Every drawing has its own undo, its own selection and its own reference image. Copy and paste work between the drawings.

View, Overview shows the whole drawing small in the lower right corner. The yellow frame shows the part that is on screen. A click or drag in the overview goes there, handy with large pictures and high zoom.

Canvas, colors and view

The canvas starts with 80 columns and 25 rows. Edit, Canvas size sets 1 to 160 columns and 1 to 1000 rows. Rows and columns are inserted or deleted at the cursor position.

The palette has the 16 VGA colors. An F marks the foreground color, a B the background color. The left mouse button picks the foreground, the right one the background.

• iCE colors: Normally only the eight dark colors work as a background, bright backgrounds mean blinking on real hardware. With iCE colors all 16 colors can be used as a background. The setting is stored in SAUCE.
• 9 dot mode: Real VGA cards show text characters 9 dots wide. The line characters from C0 to DF are extended into the ninth column so lines stay connected. This setting goes into SAUCE and the PNG as well.
• Zoom: 1x to 4x, always in whole steps and without smoothing. Ctrl+Plus and Ctrl+Minus or Ctrl+mouse wheel.
• Grid: shows the borders of the character cells.
• Guides: 80x25 guides show the border after 80 columns and every 25 rows, one screen. The center line marks the vertical middle.
• Blinking: Without iCE colors the foreground blinks on bright backgrounds, like on real hardware. The switch turns blinking off in the view.
• Font: IBM VGA (8x16), IBM VGA50 and EGA43 (8x8), IBM EGA (8x14) and Amiga fonts (Topaz 1 and 2, each with and without Plus, P0T-NOoDLE, mO'sOul). The font is stored in SAUCE. Amiga fonts show the characters as ISO-8859-1, typed text is converted to match.
• Palette: The 16 colors can be set freely. Own colors are stored in XBin, and in ANSI as 24 bit codes that PabloDraw, Moebius and 16colo.rs show. Other programs show the VGA colors there.
• Recently used: Below the palette are the last eight color pairs you painted or typed with. A click sets foreground and background together.
• Reference image: View, Reference image puts a PNG, JPG, GIF or WebP see-through over the drawing for tracing. Opacity and size can be set. The image is not saved, not exported and does not leave your browser.

All keys

The keys work while the canvas has the focus. The list is also in Help, Keys.

Ctrl+N, Ctrl+T and Ctrl+W belong to the browser and are not used. New is in the File menu.

Opening and saving files

Open a file with File, Open (Ctrl+O) or by dropping it on the page. Files are saved as downloads, you choose the name in the dialog.

24 bit colors in ANSI files (ESC[38;2 and the PabloDraw codes) become a palette of its own when opening. If there are more than 16 colors, the editor uses the closest ones and tells you.

The control characters 09, 0A, 0D, 1A and 1B cannot be stored as characters in .ans and .asc files. They are saved as blanks and the editor tells you. In .bin they are kept.

Full lines with 80 characters still end with CRLF. BBS terminals, WebCarrier BBS and 16colo.rs show this correctly. For very old DOS terminals that wrap right after the 80th character, keep the last column empty.

SAUCE

SAUCE is a small block at the end of the file with information about the picture. Archives like 16colo.rs and many viewers read it. In File, SAUCE info you enter title (35 characters), artist (20), group (20), date and comments. Width, height, iCE colors, 9 dot mode and the font are set by the editor. SAUCE is on by default when saving, you can turn it off in the dialog.

Templates for WebCarrier BBS

The Templates menu holds simple 80x25 screens for WebCarrier BBS: welcome, logon (after login), logoff and newuser (new users). They contain macros like @BBSNAME@, @SYSOP@, @USER@, @DATE@ and @TIME@ as plain text. WebCarrier BBS replaces them with the real values when it shows the screen.

Design the template, save it as .ans with the matching name and upload it to your board as a screen. The sysop guide of WebCarrier BBS lists all macros. Keep in mind that a macro can get longer or shorter when it is replaced. So don't put a frame right of a macro, or use the macros with a fixed width like @BBSNAME:40C@.

Converting a picture to ANSI

File, Convert a picture turns a PNG, JPG, GIF, WebP or BMP into a drawing that you can keep editing cell by cell. The preview shows the result before you take it.

• Width: 1 to 160 characters, the height follows from the aspect ratio.
• Half blocks: two dots per cell, good for logos, pixel art and clear shapes.
• Shades: one color tone per cell made of two colors and ░ ▒ ▓, good for photos and soft gradients.
• Dithering: error diffusion (Floyd-Steinberg) gives the finest transitions, the even pattern looks calmer, no dithering makes clear areas.
• Brightness and contrast help with dark or dull pictures.
• iCE colors allow bright backgrounds and give the best colors. Without iCE colors the picture does not blink in old terminals.
• Result: as a new drawing in a tab of its own, or as a floating selection in the current drawing.

The picture is converted in your browser only and is not uploaded anywhere.

View as in a BBS, GIF and video

File, View as in a BBS plays the picture character by character, the way it came over a modem back then. Choose 2400, 9600, 14400, 28800 or 57600 baud or unlimited. Escape or a click on the picture stops it, Restart plays it again.

File, Save as GIF or video saves exactly this build-up as a file, to show it on social media or on a website:

• Animated GIF: done in a few seconds. As the view you choose 80x25 like on screen (scrolls along with tall pictures) or the whole picture. It can loop forever.
• Video: MP4 or WebM, depending on what your browser can record. The video is recorded in real time, so at 2400 baud it takes as long as back then. If the browser cannot record, there is only the GIF.

You also set the speed, the scale (1x or 2x) and how long the finished picture stays at the end.

Sharing as a link

File, Share as link packs the whole drawing with colors, font, palette and SAUCE info into a link. Whoever opens it sees the picture: on a computer in the editor in a new tab, on a phone in the viewer.

The drawing is completely inside the link after the #. Browsers never send this part to a server, nothing is uploaded. With large pictures the link gets long. The dialog shows the length and warns when chat or mail programs might cut it off. Then better send the file.

Tablet, pen and phone

On tablets the editor starts with a touch bar below the canvas: Undo, Redo, paints with foreground or background, zoom, keyboard and Place for a floating selection. View, Touch bar turns it on or off, also on a computer with a touch screen.

• One finger paints with the chosen tool.
• Two fingers move the drawing, spreading and pinching zooms. A stroke that was started is taken back.
• Pen (Apple Pencil, S Pen and others): paints at once and precisely. Once a pen was used, fingers only move and zoom, so a resting hand paints nothing. The side button of the pen paints with the background color.
• Paints: background in the touch bar replaces the right mouse button. A tap on the palette then picks the background color too.
• Keyboard brings up the on-screen keyboard, typed letters go to the cursor. The characters on F1 to F10 are picked as brush characters in the bar below.

On phones (narrower than 600 pixels) a viewer starts instead of the editor. There you can open files and shared links, look at them, zoom, save them as PNG, play them in the modem preview and save them as GIF or video. The link "Open the editor anyway" starts the editor there too.

Tips for good ANSI art

• Half blocks: ▀ and ▄ give you twice as many pixels in height. The half block brush takes care of characters and colors, you just paint.
• Shades: ░ ▒ ▓ mix foreground and background color. A row like blue, ░ blue on light blue, ▒, ▓, light blue makes a soft transition.
• Gradients: Good gradients use colors that belong together: black, dark gray, light gray, white. Or blue, light blue, light cyan, white. Or red, light red, yellow, white.
• Contrast: Bright letters on a dark background read best. A dark shadow at the bottom right lifts lettering off the background.
• Less is more: Two or three color families per picture look calmer than all 16 colors.
• Width: 80 columns is the standard for BBSes. Plan screens for 80x25 so they fit on one screen without scrolling.

Storage in the browser

The editor keeps a copy of all open drawings in the localStorage of your browser all the time. On your next visit it asks whether to restore them and then opens all tabs again.

Only the drawings, your settings (character sets, zoom, switches, recently used colors, last file format), loaded TheDraw fonts and your own fonts are stored. None of it leaves your browser, there are no cookies and no requests to other servers. File, Clear stored data removes everything. The copy does not replace saving: in a private window or after clearing the browser data it is gone.