Colors Boxes and Buttons

Colors, Boxes, and Buttons

This page explains the ideas behind ANSITerm drawing without diving into protocol details.

The mental model

Think of the terminal as a grid of character cells, like graph paper:

• Row — line number starting at 1 at the top
• Column — character position starting at 1 on the left

ANSITerm moves the cursor to a cell, then prints text or a border character.

Colors

You can set text and background colors by:

• Name — e.g. "yellow", "cyan", "black"
• Hex — e.g. "#ff8800" or short "#f80"
• Number — an 8-bit palette index (0–255)
• Red/green/blue values (in code) that get mapped to the nearest terminal color

Colors depend on your terminal app. If everything looks white, try another program or enable ANSI color support.

Boxes and tables

• Single-line box — simple frame
• Double-line box — heavier frame for titles
• Table — a grid of cells inside a frame

Corners need room: the end row/column must be greater than the start. Buttons also need a little interior space for the label.

Buttons

A “button” in ANSITerm is a framed label. Your sketch decides what happens when the user:

• Presses Enter while it is selected, or
• Clicks inside its rectangle (mouse-capable terminals)

See Example: Buttons for a complete pattern with highlighting.

Practical layout tips

1. Leave a margin — start content around row 2, column 2.
2. Keep labels shorter than the button width.
3. Test on the smallest screen you care about (many people use 80×24).
4. Prefer redrawing a whole screen after big changes; for games, update only changed cells (Graphic example).