Files
muuhd/server/tui.md
Kim Ravn Hansen 8a4eb25507 things + stff
2025-09-07 23:24:50 +02:00

5.9 KiB
Raw Blame History

Here are some ASCII and UTF-8 characters commonly used for "shading" effects in text art or terminal displays. These characters provide varying levels of density or shading:

ASCII Shading Characters

These are basic ASCII characters often used for shading:

Light shade: ░ (U+2591)
Medium shade: ▒ (U+2592)
Dark shade: ▓ (U+2593)
Full block: █ (U+2588)
Half block: ▄ (U+2584), ▀ (U+2580)

Additional UTF-8 Block Characters

These Unicode characters offer more granular shading or block patterns:

Light block: ░ (U+2591)
Medium block: ▒ (U+2592)
Dark block: ▓ (U+2593)
Solid block: █ (U+2588)
Upper half block: ▀ (U+2580)
Lower half block: ▄ (U+2584)
Left half block: ▌ (U+258C)
Right half block: ▐ (U+2590)
Quadrant blocks: ▖ (U+2596), ▗ (U+2597), ▘ (U+2598), ▝ (U+259D)
Checkerboard: ▚ (U+259A), ▞ (U+259E)

Example Usage

Heres an example of a simple shading gradient using some of these characters:

Light to Dark: ░ ▒ ▓ █
Half blocks: ▀ ▄ ▌ ▐
Quadrant pattern: ▖ ▗ ▘ ▝

Notes

  • Not all terminals or text editors display Unicode characters consistently, so ASCII characters like .:;#+ are sometimes used for basic shading in simpler environments.
  • If you want to create specific patterns or need more complex ASCII art, let me know, and I can generate or suggest more detailed designs!
  • If you meant something specific by "shading" (e.g., for a particular programming context or art style), please clarify, and Ill tailor the response further.

Below is a collection of ASCII and UTF-8 characters suitable for creating frames, borders, or "windows" in a text-based user interface (TUI), such as those built with ncurses. These characters can be used to draw boxes, lines, and corners to simulate window-like structures in a terminal.

ASCII Characters for Frames

These are basic ASCII characters that work universally in most terminals:

Horizontal line: - (U+002D)
Vertical line: | (U+007C)
Cross/intersection: + (U+002B)
Corners:
  Top-left: + (U+002B) or `
  Top-right: + (U+002B) or '
  Bottom-left: + (U+002B) or ,
  Bottom-right: + (U+002B) or .

Example simple ASCII window:

+----------+
| Content  |
+----------+

UTF-8 Box-Drawing Characters

Unicode provides a dedicated Box Drawing block (U+2500U+257F) for creating more refined frames. These are widely supported in modern terminals and ncurses:

Single-Line Box Drawing

Horizontal line: ─ (U+2500)
Vertical line: │ (U+2502)
Corners:
  Top-left: ┌ (U+250C)
  Top-right: ┐ (U+2510)
  Bottom-left: └ (U+2514)
  Bottom-right: ┘ (U+2518)
Intersections:
  T-junction top: ┬ (U+252C)
  T-junction bottom: ┴ (U+2534)
  T-junction left: ├ (U+251C)
  T-junction right: ┤ (U+2524)
  Cross: ┼ (U+253C)

Example single-line window:

┌──────────┐
│ Content  │
└──────────┘

Double-Line Box Drawing

Horizontal line: ═ (U+2550)
Vertical line: ║ (U+2551)
Corners:
  Top-left: ╔ (U+2554)
  Top-right: ╗ (U+2557)
  Bottom-left: ╚ (U+255A)
  Bottom-right: ╝ (U+255D)
Intersections:
  T-junction top: ╦ (U+2566)
  T-junction bottom: ╩ (U+2569)
  T-junction left: ╠ (U+2560)
  T-junction right: ╣ (U+2563)
  Cross: ╬ (U+256C)

Example double-line window:

╔══════════╗
║ Content  ║
╚══════════╝

Mixed and Other Box-Drawing Characters

For more complex designs, you can mix single and double lines or use specialized characters:

Single to double transitions:
  Horizontal single to double: ╼ (U+257C)
  Vertical single to double: ╽ (U+257D)
Rounded corners (less common, not always supported):
  Top-left: ╭ (U+256D)
  Top-right: ╮ (U+256E)
  Bottom-left: ╰ (U+2570)
  Bottom-right: ╯ (U+256F)

Example with rounded corners:

╭──────────╮
│ Content  │
╰──────────╯

Additional UTF-8 Characters for Decoration

These can enhance the appearance of your TUI:

Block elements for borders or shading:
  Full block: █ (U+2588)
  Half blocks: ▀ (U+2580), ▄ (U+2584), ▌ (U+258C), ▐ (U+2590)
Light shade for background: ░ (U+2591)
Medium shade: ▒ (U+2592)
Dark shade: ▓ (U+2593)

Example TUI Window with Content

Heres a sample of a more complex window using single-line box-drawing characters:

┌────────────────────┐
│ My TUI Window      │
├────────────────────┤
│ Item 1    [ OK ]   │
│ Item 2    [Cancel] │
└────────────────────┘

Notes for ncurses

  • ncurses Compatibility: ncurses supports both ASCII and UTF-8 box-drawing characters, but you must ensure the terminal supports Unicode (e.g., LANG=en_US.UTF-8 environment variable). Use initscr() and start_color() in ncurses to handle rendering.
  • Terminal Support: Some older terminals may not render UTF-8 characters correctly. Test your TUI in the target environment (e.g., xterm, gnome-terminal, or Alacritty).
  • Fallback: If Unicode support is unreliable, stick to ASCII (-, |, +) for maximum compatibility.
  • ncurses Functions: Use box() in ncurses to draw a border around a window automatically, or manually print characters with mvaddch() for custom designs.

Tips

  • Combine single and double lines for visual hierarchy (e.g., double lines for outer windows, single lines for inner sections).
  • If you need specific examples (e.g., a multi-window layout or a dialog box), let me know, and I can provide a detailed ASCII/UTF-8 mockup or even pseudocode for ncurses.
  • If you want a particular style (e.g., heavy lines, dashed lines, or specific layouts), please clarify, and Ill tailor the response.

Let me know if you need help implementing this in ncurses or want more specific frame designs!