Components at a glance

The UI, data and type pieces are components: they draw your data, in your colours, and the ones that can be used take keys and clicks. Each one's documentation has the same sections: its Options, its Colours part by part, the Keys and clicks it takes (or that it takes none), what it tells Screen readers, and an Example. This page is the map.

What every component shares

• Your data as options, checked against the piece's defaults, given to Ascii.new/2 and taken up while it plays with Ascii.put_options/2 (or a Phoenix player's options). Pieces that can carry on from where they were do: a gauge's needle swings, bars ease, a terminal keeps typing. See Live data.
• Your colours: one ink or a gradient (:ink, :gradient, see Ascii.Ink), and part by part (:parts, see Ascii.Parts), parts: true for the colours each suggests, or for a light page with paper: true. On a page, colours can be CSS variables.
• Keys and clicks for those that can be used (Ascii.handle_event/2), with what was chosen in their options; in Phoenix a player's interactive (and notify to be told), in ExRatatui Ascii.ExRatatui.handle_event/3, in a terminal mix ascii.play --interactive. Ascii.part_at/4 says which part is under a click, on any piece that knows its parts.
• Words for screen readers from their data (Ascii.describe/1), which the Phoenix players and components use as their label.
• Frames like any piece's: into panels and layouts with Ascii.Compose, out as ANSI, HTML or SVG.

The components

"size" says which options set the frame's size; "parts" how many parts it colours one by one; "keys" whether it takes keys and clicks.

Fed from your app: Ascii.BEAM gives options for cpu-meters, sparkline, gauge and progress-bar from this VM, and Ascii.Telemetry for sparkline and gauge from your :telemetry events.

One of each

board = [
  {"gauge", %{label: "load", value: 72}},
  {"boot-log", %{title: "deploy", steps: [%{text: "built", status: "ok"}]}},
  {"file-tree", %{walk: false, paths: ["lib/app.ex", "mix.exs"], root: "app"}}
]

for {piece, options} <- board do
  piece |> Ascii.new!(options: options, parts: true) |> Ascii.describe()
end
#=> ["load: 72%", "deploy: 1 step, 1 ok", "file tree of app: 1 folder, 2 files"]