/ 
Term-Fabulous-0.01
/ Term::Fabulous::Examples

NAME

Term::Fabulous::Examples - The example programs of the distribution, with pictures

DESCRIPTION

This page lists every example program that comes with Term::Fabulous, each with a picture of it running. An entry names the program, says what it shows and which classes it uses, lists the keys it reacts to, and links to the pages that explain the features it demonstrates. "RUNNING THE EXAMPLES" shows how to run the programs.

The programs are in three directories, and this page has one section for each:

"THE DEMO PROGRAMS"

examples: demo programs, each showing one area of Term::Fabulous (layout, text and colors, events and forms, KDL layouts, tables, charts, output without a terminal).

"THE WIDGET GALLERY"

examples/widgets: one small program per widget, showing it in its typical states. The widget's class page shows the same picture.

"THE COOKBOOK PROGRAMS"

examples/cookbook: the complete programs of the recipes in Term::Fabulous::Cookbook, grouped like the cookbook pages, and the first program of Term::Fabulous::Manual.

"PICTURES OF YOUR OWN PROGRAMS" shows how to take pictures like these of your own programs.

The explanations are elsewhere: Term::Fabulous::Manual explains the concepts, Term::Fabulous::Cookbook explains the cookbook programs line by line, and every class has a reference page of its own.

Every picture shows a program running in a terminal, taken from the shipped file after the input that is described next to it. The pictures are taken again whenever a program changes, so they always show what the code does.

RUNNING THE EXAMPLES

The programs need a terminal that uses a UTF-8 locale and supports 24-bit colors (see "REQUIREMENTS" in Term::Fabulous::Manual). Interactive programs take over the whole terminal; Ctrl+C ends any of them.

To get the files, unpack the distribution, for example with cpanm --look Term::Fabulous. Once Term::Fabulous is installed, run a program from the unpacked directory:

perl examples/form.pl

Without installing it, build the distribution first and run the programs with the built copy:

perl Makefile.PL && make
perl -Mblib examples/form.pl

THE DEMO PROGRAMS

The programs in examples show one area of Term::Fabulous each. They are grouped by topic below.

A tour of Term::Fabulous

examples/showcase.pl

A tour on one screen: a form with every input widget and two buttons, a live chart on a pixel canvas, a log that grows from a timer in a scroll box, a translucent notification that Save shows for a few seconds, and text in several scripts. Tab and Shift+Tab move between the inputs, the mouse works too.

The picture shows it after typing a name and an e-mail address and pressing Save.

A Term::Fabulous program: a sign-up form with text fields, radio buttons, a dropdown, a slider, a check box and buttons, a chart of requests per second with a translucent notification, an event log and text in several scripts

Layout

examples/layout-direction.pl

The four layout directions side by side, each in a bordered panel: numbered boxes placed left to right, top to bottom, left to right with wrapping onto a new line, and on top of each other. See "Direction" in Term::Fabulous::Manual::Layout.

Four panels: three boxes side by side, three boxes in a column, seven boxes wrapped onto two lines, and three boxes of different sizes on top of each other

examples/layout-sizing.pl

The sizing rules side by side: every row is a track as wide as the terminal, and the colored boxes in it are sized with the rule named on the left (sizing_fit, sizing_fixed, sizing_percent, sizing_grow, with minimums and maximums, and combinations). The labels share a width group, so the tracks line up. See "Sizing" in Term::Fabulous::Manual::Layout.

Eight rows, each a track with colored boxes sized by fit, fit with a minimum, fixed, percent, grow, grow with a maximum, fixed plus grow, and two grow boxes

examples/layout-padding.pl

Padding, the gap between children and the space a border takes: the same three children in three boxes with different settings. The boxes have a background, so their padding and gaps are visible. See "Padding" in Term::Fabulous::Manual::Layout, "Gap between children" in Term::Fabulous::Manual::Layout and "Borders take space" in Term::Fabulous::Manual::Layout.

Three boxes with the same three children: without padding and gap, with padding and a gap of one row, and with a border and one cell of padding

examples/layout-alignment.pl

child_alignment: nine boxes of the same size, each with one child, aligned with every combination of x (left, center, right) and y (top, center, bottom). See "Aligning and centering children" in Term::Fabulous::Manual::Layout.

Nine boxes in a grid, each with one child placed at a different combination of left, center, right and top, center, bottom

examples/flow.pl

Colored tags in a box with the flow layout: they are placed from left to right and wrap onto a new line when the row is full, so they rewrap whenever the terminal is resized. See "Flow layout" in Term::Fabulous::Manual::Layout.

Twenty colored tags in a rounded box, wrapped onto several lines

examples/stack.pl

Cards with a badge over their top right corner, and a message centered over a log, each built from a box with the stack layout: its children share one box and later ones are drawn on top. See "Stack layout" in Term::Fabulous::Manual::Layout.

Three bordered cards with colored badges in their top right corners above a log with a bordered message centered over it

examples/layout-floating.pl

Floating widgets: a menu attached below a button, a badge on the corner of a panel and a message in the bottom row of the screen. They are drawn on top of the other widgets and take no space in the layout. The File button (a click, or Tab and Enter) opens and closes the menu, which is open when the program starts. See "Floating widgets" in Term::Fabulous::Manual::Layout.

A File menu open below its button over a panel, a red badge on the panel's top right corner and a green message in the bottom row of the screen

examples/scroll-box.pl

Two Term::Fabulous::Widget::ScrollBox widgets with more lines than fit, scrolled with the mouse wheel, each with a scrollbar. See "Scrolling content" in Term::Fabulous::Manual::Layout.

The picture shows the boxes after five notches of the wheel on the left box and two on the right one.

Two framed boxes scrolled down, one with numbered lines, one with squares, each with a scrollbar in its last column whose thumb shows the visible part

Text, colors and borders

examples/text-features.pl

Term::Fabulous::Widget::Text in detail: the two wrap modes, line height, bold, italic and underlined text, wide characters, emoji and combining marks lined up in columns, and control characters made harmless. See the text chapter.

Text wrapped at spaces in a narrow panel and text broken only at newlines; a two-line text with line height 2; plain, bold, italic, underlined and combined styles; Latin, Japanese, emoji and combining accents ending in the same column; a tab shown as a space and control characters shown as replacement characters

examples/text-sizing.pl

Text in Japanese, Korean, Thai and German with emoji, wrapped to the width of its box. Wide characters take two columns, and clusters with combining marks one. See "Wide characters and emoji" in Term::Fabulous::Manual::Looks.

Four boxes with Japanese, Korean, Thai and German text and emoji

examples/colors.pl

Term::Fabulous::Color: one orange written in six formats, colors derived with darken, lighten and blend, translucent backgrounds over a light panel, and the terminal's default text color (alpha 0). See "Color formats" in Term::Fabulous::Manual::Looks and "Working with colors" in Term::Fabulous::Manual::Looks.

Six orange swatches written in different formats; a blue darkened, lightened and blended with white in steps; red swatches with alpha 255, 192, 128, 64 and 0 over a light panel; a line in the terminal's default text color

examples/themes.pl

Term::Fabulous::Theme: a panel with a text field, a check box, a progress bar and two buttons under the built-in dark and light themes and under the theme files in examples/themes/: ocean, nord, dracula and solarized-light. F2 switches to the next theme, and a theme name on the command line (perl examples/themes.pl nord) picks the first one. Every theme paints the screen in its own background, so the light themes are readable on a dark terminal. The Save button has the class primary, which the theme files draw in their accent, and the Cancel button keeps its own border color under every theme. See "THEMES" in Term::Fabulous::Manual::Looks. The pictures show the six themes in that order:

The panel in the dark theme: light text on a dark blue-gray screen, a text field holding Ada, a checked check box, a blue progress bar at 65 percent, a Save button and a Cancel button with a red border

The panel in the light theme: dark text on a near-white screen, a white text field holding Ada, a checked check box, a blue progress bar at 65 percent, a Save button and a Cancel button with a red border

The panel in the ocean theme: teal accents on a deep blue screen, a text field holding Ada, a checked check box, a progress bar at 65 percent, a Save button in the accent and a Cancel button with a red border

The panel in the nord theme: pale text on a slate gray screen, frost blue accents, a text field holding Ada, a checked check box, a progress bar at 65 percent, a round-bordered Save button in frost blue and a Cancel button with a red border

The panel in the dracula theme: white text on a dark purple-gray screen, purple accents, a text field holding Ada, a checked check box, a progress bar at 65 percent, a pink Save button and a Cancel button with a red border

The panel in the solarized-light theme: gray-blue text on a warm paper-colored screen, blue accents, an orange divider, a text field holding Ada, a checked check box, a progress bar at 65 percent, a Save button in blue and a Cancel button with a red border

examples/theme-editor.pl

Term::Fabulous::ThemeEditor: the theme editor with the theme files of examples/themes/, one per tab, as the program fabulous-theme-editor starts it. The preview on the left shows a widget of every family in the theme of the tab you are on, the form on the right every setting of the theme; F2 shows the file as text, F1 lists every key. The pictures show the form with the cursor on the palette's accent, the dialog of a setting whose value the preview shows while it is chosen, and text mode with a mistake on its last line:

The theme editor with four themes in tabs: the menu bar, the tab strip with ocean.kdl active, the preview on the left with the palette swatches, text with links and a box in the ocean theme, and the form on the right listing the theme's name and base and the palette tokens with their swatches, values and where they come from, the cursor on accent

The dialog of button.border.color at the right edge: a list of the palette's tokens with danger chosen, a field and red, green, blue and alpha sliders for a color of its own; on the left, the preview shows the Cancel button of the bordered row with a red border

The theme editor in text mode: the end of ocean.kdl with a new line button { text

examples/web-colors.pl

All colors of Term::Fabulous::Enum::WebColor in a grid that adapts its columns to the terminal width and scrolls. A dropdown sorts them by hue, brightness, saturation or name. The mouse wheel and the arrow keys scroll; Tab focuses the dropdown; q quits while the dropdown does not have the focus. See "Named colors" in Term::Fabulous::Manual::Looks.

A grid of color swatches with their hex values and names, and a dropdown to sort them

examples/translucency.pl

Three boxes with translucent backgrounds orbit over a screen of text. Their backgrounds are blended with the text below them, which shows through, tinted, or is covered, depending on glyphs_show_through. Space pauses the orbit and g switches glyphs_show_through on every box. See "Alpha and the terminal default color" in Term::Fabulous::Manual::Looks.

The picture shows the orbit after a few seconds.

A green, a red and a blue translucent box over a screen of text; the text shows through the green and the blue one

examples/border-showcase.pl

Every border style of Term::Fabulous::Enum::BorderStyle, one box each. See "Border styles" in Term::Fabulous::Manual::Looks.

Twenty boxes, one in each border style, labeled with the style's name

examples/border-options.pl

Borders beyond a single style: a border on some sides only, a style per side, padding inside a border, a hidden side, two boxes that share one line through border_corners, and a border drawn on the parent's background with outer_border_sides. See "Borders and space" in Term::Fabulous::Manual::Looks, "Joining borders" in Term::Fabulous::Manual::Looks and Term::Fabulous::Role::HasBorderStyle.

Six bordered panels: a border on the left and top only; a solid border with a double top and a thick left side; a round border with a cell of padding inside; a round border with a hidden bottom side; a title box and a body box sharing one line; a round border drawn on the parent's background

Events, keys and forms

examples/event-monitor.pl

Shows the events Term::Fabulous fires: a listener on the root widget logs every event that bubbles up to it, with the widget it was fired on (the target). Type into the field, press Tab, Enter, Space, function keys or Ctrl combinations, and click the widgets: the log shows the key names, the clicks, the focus moving and the events of the widgets. The hover events do not bubble, so listeners on the widgets themselves log them. The line at the bottom follows the mouse pointer. Run it to find the name of a key on your terminal. See "Listening to events" in Term::Fabulous::Manual::Events and "Key names" in Term::Fabulous::Manual::Events.

The picture shows it after Tab, typing Ada, Enter, F5, Tab and a click on the OK button.

The event monitor after Tab, typing Ada, Enter, F5, Tab and a click on the OK button: the log lists KeyPress, OnFocus, Change, Submit, OnBlur, Mouse, OnHoverStart, OnPress, Activate and OnRelease events with their targets

examples/buttons-and-keys.pl

Buttons that react to the mouse and to the keyboard, with focus, hover and press styling, application key bindings and a clock updated by a timer. Tab focuses a button, Enter or Space presses it; +, - and r change the counter; q, Escape or Ctrl+Q quits. It is the program of "Add buttons for the mouse and the keyboard (Button)" in Term::Fabulous::Cookbook::KeyboardAndMouse.

The picture shows it after Tab and three presses of +, with the mouse pointer over the Reset button.

Three buttons, the first focused and the last under the mouse pointer, a counter at 3 and a clock

examples/form.pl

Every input widget in one form, built in Perl: text fields (one masked, two validated), a text area, a dropdown, radio buttons, a slider and check boxes, with labels of equal width. A status line shows every change and what is wrong with an invalid value; checking "I accept the terms" enables the password field. Tab and Shift+Tab move between the inputs. See "FORMS AND INPUT WIDGETS" in Term::Fabulous::Manual::Forms.

The picture shows it after typing a name and a note, choosing a color from the dropdown and starting an e-mail address.

A form with name, password, notes, color, size, volume, newsletter, terms, e-mail and port; the e-mail field holds ada@ in red and the status line says email: Please enter an e-mail address.

examples/custom-widget.pl

A widget of your own: an on/off switch built on Term::Fabulous::Widget::Input, used from a KDL layout. It takes the focus, reacts to keys and clicks and fires Change events. Tab moves the focus; Space, Enter, Left, Right or a click switches. It is the program of "Write a custom input widget (a toggle switch)" in Term::Fabulous::Cookbook::Extending.

The picture shows it after Tab and Space switched Bluetooth on.

Three toggle switches, Bluetooth focused and switched on, and the status line

KDL layout files

examples/kdl-layout.pl

A screen described in a KDL layout file, examples/kdl-layout.kdl: a title bar, a sidebar of server buttons, a main panel and a status line. The program loads the file with Term::Fabulous::Layout, finds widgets by their ids and attaches the behavior: a click on a server button, or Enter on it, shows that server in the main panel. It is the complete program of "A complete program" in Term::Fabulous::Manual::KDL.

The picture shows it after Tab, Tab and Enter chose the db server.

A title bar, a sidebar with the buttons web, db and mail with db focused, and a main panel showing the details of the db server

examples/kdl-form.pl

A form described in a KDL layout instead of Perl code. The program finds the inputs by their ids, shows every change, shows all values on F2 and prints them when it ends. It is the program of "Build a form from a KDL file (text fields, radio buttons, dropdown, slider, checkbox)" in Term::Fabulous::Cookbook::Forms.

The picture shows the form filled in, after F2.

The KDL form filled in, with all values shown in the status line after F2

Tables

examples/table-directory.pl

A staff directory in a Term::Fabulous::Widget::Table: a search box above the table, rows grouped by team under headers with a payroll sum, multiple selection, formatted dates and numbers, salaries over 100,000 in yellow, people on leave in gray italics, pages, a details panel that follows the cursor, and a column chooser on F2. F3 switches the grouping off and on. In the table, Space selects a row, Left and Right close and open a group, and Up on the first row reaches the column titles, where Enter sorts. See Term::Fabulous::Manual::Tables.

The picture shows it after two rows were selected with Space and the cursor moved on.

A staff table grouped by team with two selected rows, a pager, and a details panel for the person under the cursor

examples/table-files.pl

A file browser in a Term::Fabulous::Widget::Table with nested rows (a tree): folders with sizes summed from their contents, dates and kinds, sorted folders first, a filter row that keeps the folders of every match, single selection, and a folder whose contents are loaded only when it is opened for the first time. Right or + opens a folder, Left or - closes it, e opens every folder and c closes them all; Tab reaches the filter fields. See "TREES" in Term::Fabulous::Manual::TableRows.

The first picture shows it after the cursor moved to the vendor folder and Right opened it, which loaded its two files.

A file tree in a table: open and closed folders in blue, indented files with sizes, dates and kinds, and the vendor folder just loaded

The second picture shows it in a shorter terminal, after e opened every folder and the cursor moved down past the last visible row: the rows scroll, while the column titles and the filter row stay in place. See "SIZE AND SCROLLING" in Term::Fabulous::Manual::TableStyles.

A file tree table with all folders open, scrolled down: the column titles and the filter row stay at the top, and the scrollbar right of the frame shows a thumb in its middle

Charts and canvases

examples/chart-gallery.pl

Every chart widget side by side, each with a little data of the kind it suits: values over time as lines, areas and bars, pairs of numbers as points, a distribution as a histogram, shares as a pie and a donut, counts around a circle as a polar area chart, profiles as a radar chart, and trends as sparklines. See "Which chart for which data" in Term::Fabulous::Manual::Charts.

A gallery of ten small charts: a line chart, a stacked area chart, a bar chart, a scatter plot, a histogram, a pie chart, a donut chart, a polar area chart, a radar chart, and line, area and bar sparklines

examples/canvas.pl

Waves plotted with half blocks on a Term::Fabulous::Widget::Canvas and animated by a timer. Only the cells whose pixels moved are redrawn in each frame. See "CANVASES" in Term::Fabulous::Manual::Charts.

Three waves in red, blue and green on a canvas, drawn with half blocks

examples/pixel-paint.pl

A paint program on a Term::Fabulous::Widget::PixelCanvas: the left mouse button paints, the right one erases, keys 1 to 6 pick a color and c clears. It starts with a few shapes drawn by the program. See "Drawing pixels" in Term::Fabulous::Manual::Charts.

The picture shows a red wave painted with the mouse over the shapes.

A pixel canvas with a frame, a line, a circle, a filled rectangle and a red wave painted with the mouse

examples/widgets/image.pl

Term::Fabulous::Widget::Image: a 16x16 PNG in three frames of the same fixed size, one per fit: none (the default) keeps its natural size, contain scales it to fit and keeps its proportions, stretch fills the frame. Three smaller frames show the same fits when the picture does not fit: none cuts it, contain shrinks it and keeps its proportions, stretch shrinks it to fill the frame. Needs Imager; without it, each frame shows a notice instead.

A 16x16 circle of rainbow-colored rings in three frames of 32x24 cells: at its natural size and centered (none), scaled up twice with its proportions kept (contain) and stretched twice wide and three times high to fill the frame (stretch); three frames of 12x4 cells below each other cut it (none), shrink it to half its size (contain) and shrink it to fill the frame (stretch)

examples/widgets/sixel.pl

Term::Fabulous::Widget::Sixel: a 480x320 PNG of the Mandelbrot set in three frames of the same fixed size, one per fit, drawn by the terminal in its own pixels as sixel graphics: none (the default) keeps its natural size and cuts it to the frame, contain scales it to fit and keeps its proportions, stretch fills the frame. Needs Imager, Imager::File::SIXEL and a terminal that shows sixel graphics; otherwise, each frame shows a notice instead.

A detail of the Mandelbrot set, blue and white spirals with orange and dark red bands, in sixel graphics in three frames of 28x10 cells: cut to the frame at its natural size (none), scaled down to fit the frame with its proportions kept (contain) and stretched to fill the frame (stretch)

Output without a terminal

examples/static-report.pl

Renders bordered panels with non-ASCII text once, with Term::Fabulous::Static, and prints them: colored when the output is a terminal, plain text in a pipe. See "RENDERING WITHOUT A TERMINAL" in Term::Fabulous::Manual::Programs.

Three panels with double, heavy and round borders, printed to the terminal

THE WIDGET GALLERY

The programs in examples/widgets show one widget each, in its typical states. Their pictures are also on the widget's class page, which the entry links. Tab moves the focus between the widgets, Ctrl+C quits. In the chart programs, moving the mouse over a series, a slice or a legend entry emphasizes it.

Containers and text

examples/widgets/box.pl

Term::Fabulous::Widget::Box: a card with a border, a background, padding and a gap between its children, and boxes sized to their content, to the room left over and to a fixed width.

A card with a title and body text, and three boxes labeled fit, grow and fixed(14)

examples/widgets/text.pl

Term::Fabulous::Widget::Text: text in colors, wrapped and aligned in boxes, and in several scripts.

Colored words, a sentence wrapped left-aligned, centered and right-aligned, and text in five scripts

examples/widgets/rich-text.pl

Term::Fabulous::Widget::RichText: bold words, colored phrases and highlighted ranges inside one text, from markup and from spans, every text style the terminal has, spans that run across the line breaks of a wrapped text, and links in their three looks. The picture shows it after Tab and Right selected the second link, with the mouse pointer over the third: the first link looks as every link does, underlined in the accent color.

A hint with a bold Enter and a red Esc, a log line with a bold red error and an underlined file name, a row of the words bold, italic, underline, reverse, dim, strike and overline each in its style, a wrapped paragraph whose italic green span and highlighted span continue on the next line, and a line of three links: FAQ underlined in blue, guide selected in dark text on blue, perl.org hovered in white on gray

examples/widgets/virtual-list.pl

Term::Fabulous::Widget::VirtualList: a document of fifty thousand paragraphs with a heading every twenty-five, built paragraph by paragraph as the viewport reaches them, scrolled with the wheel, the scrollbar and the Home, End, PageUp and PageDown keys. The status line shows how many of the paragraphs have been built so far.

The picture shows the document after the End key and four notches of the wheel back up: of the fifty thousand paragraphs, nineteen have been built.

A framed document near its end: numbered paragraphs of different lengths, a scrollbar whose thumb sits at the bottom, and a status line saying Paragraphs 49993-49997 of 50000, 19 built

examples/widgets/divider.pl

Term::Fabulous::Widget::Divider: a plain line, lines with a text at the start, in the center and at the end, lines in other styles and colors, and a vertical divider with a text between two columns.

Dividers: a plain line, texts at the start, the center and the end, double and heavy lines in colors, and a vertical divider with a text between two columns

examples/widgets/accordion.pl

Term::Fabulous::Widget::Accordion: a settings accordion with one section open at a time and a disabled section, and one with a border around every item, the toggles at the end of the headers and several sections open at once. Up and Down move between the headers, Enter or Space opens and closes the focused section.

Two accordions: one with the Network section open under General and a disabled Licenses section, one with borders, the toggles at the end and two sections open at once

examples/widgets/tabs.pl

Term::Fabulous::Widget::Tabs: tabs along the top of a settings page with a disabled tab, a bar at the bottom in the Heavy style with the tabs in the center, tabs along the left side as a sidebar, and tabs with downward labels without a border around the page. Left and Right (or Up and Down, Home and End) choose a tab, so does a click, and Ctrl+PageUp and Ctrl+PageDown turn the pages from anywhere inside.

Four Tabs widgets: tabs along the top with the Network page shown and a disabled Licenses tab, a sidebar of tabs along the left side, a tab bar at the bottom in the Heavy style with the tabs in the center, and tall tabs with downward labels without a page border

examples/widgets/document-tabs.pl

Term::Fabulous::Widget::DocumentTabs: a row of tabs for the open documents of an editor, some with unsaved changes (a dot), one with an error (an exclamation mark). A click on a tab shows its document, a click on its close mark or a middle click closes it, and + adds a new one; the arrows at the ends lead to the tabs that do not fit. The picture shows it after closing README.md and choosing budget.csv.

A row of document tabs at the top: notes.txt with a blue dot for unsaved changes, config.kdl with a red exclamation mark for errors, todo.md, and the active tab budget.csv in bold on a lighter background with a blue dot, each with a close mark, then an arrow to a hidden tab and a plus button. Below, the text of budget.csv, a dim line with the keys that switch, close and add tabs, and a status bar with the message Closed README.md.

Buttons, inputs and dialogs

examples/widgets/button.pl

Term::Fabulous::Widget::Button: four buttons that take the focus (shown by the border color) and react to clicks and to Enter or Space. The Archive button is disabled: it is drawn gray, Tab skips it and clicks do nothing. The picture shows it after Enter pressed Save.

Save, Cancel, Delete and Archive buttons: Save focused with a blue border, Archive disabled and drawn in gray, and the line Save was pressed

examples/widgets/checkbox.pl

Term::Fabulous::Widget::Checkbox: focused, unchecked, checked, indeterminate and disabled. Space or Enter toggles the focused box.

Five check boxes: focused, unchecked, checked, indeterminate and disabled

examples/widgets/radio.pl

Term::Fabulous::Widget::RadioGroup and Term::Fabulous::Widget::RadioButton: a group in a row (focused), a group in a column and a disabled group. The arrow keys choose a button in the focused group.

Radio buttons in a row with Medium chosen, in a column with Express shipping chosen, and a disabled group

examples/widgets/dropdown.pl

Term::Fabulous::Widget::Dropdown: one showing its placeholder, one with a selected option, and one whose list is open. Enter, Space, Alt+Down or F4 open the list, Up and Down move in it, Enter chooses and Escape closes it. The picture shows it after Enter opened the list and Down moved the highlight.

Three dropdowns: a placeholder, France selected, and an open list of colors with Blue highlighted

examples/widgets/slider.pl

Term::Fabulous::Widget::Slider: a focused slider with a percentage, one that formats its value with code, and a disabled one. Left and Right (or PageUp, PageDown, Home and End) change the value.

Three sliders: focused at 65 percent, a temperature of 21.5 degrees, and a disabled one

examples/widgets/star-rating.pl

Term::Fabulous::Widget::StarRating: a focused rating, one with half stars that shows its value, a read-only one, one out of ten without gaps, and a disabled one. Left and Right, the digits, Home and End change the value; so does a click on a star.

Star ratings: a focused one with three of five stars, one with half stars and its value, a read-only one, one out of ten with a gap of zero, and a disabled one

examples/widgets/segmented-control.pl

Term::Fabulous::Widget::SegmentedControl: a focused control, one stretched to the full width, one with a disabled segment, a vertical one and a disabled one. Left and Right, the digits, Home and End choose a segment; so does a click.

Segmented controls: a focused one with Week selected, one stretched to the full width, one with a disabled segment, a vertical one, and a disabled one

examples/widgets/color-picker.pl

Term::Fabulous::Widget::ColorPicker: a picker with named swatches, RGB sliders and an alpha slider, and one without swatches and alpha that shows its sliders in HSL, each with a line that shows the value it chose. Tab moves from part to part, Up and Down pick a swatch, Left and Right move a slider, and typing a color sets it.

Two color pickers. The upper one has a framed list of named swatches with color samples on the left, Orange selected, an empty field with a sample of the orange next to it, the RGB/HSL switch on RGB and the red, green, blue and alpha sliders at the orange. The lower one has no list and no alpha slider, its field shows #2e8b57 and its sliders show hue, saturation and lightness. Below each picker a line names the chosen value and its channels

examples/widgets/text-field.pl

Term::Fabulous::Widget::TextField: a focused field to type in, an empty one showing its placeholder, a masked password and a disabled field. Shift with the arrow keys selects text. The picture shows it after typing and selecting a word.

Four text fields: a focused field with Ada Lovelace typed and Lovelace selected, a placeholder, a masked password and a disabled field

examples/widgets/text-area.pl

Term::Fabulous::Widget::TextArea: a shopping list whose long line wraps at a space; the text is taller than the area, so a scrollbar shows the position. Shift with the arrow keys selects text, Ctrl+Z undoes.

A text area with a shopping list, a wrapped long line and a scrollbar

examples/widgets/input-validation.pl

The invalid look of the input widgets (see "Invalid values" in Term::Fabulous::Widget::Input): e-mail fields that are valid, invalid and invalid with a border, required inputs that are still empty (a field without and with a border, a check box and a dropdown), an invalid_color of its own, a theme variant that draws invalid values in the warning color, and a disabled field. Type into the first field to see the look follow the value. The picture shows it after typing ada@exa into the first field.

Eleven inputs: a focused e-mail field with ada@exa in red, a valid address in white, ada@ in red without and with a red border, an empty required field that looks normal and one whose border is red, a red unchecked check box, a dropdown showing its gray placeholder, ada@ in purple, ada@ in yellow with a yellow border, and a disabled field in gray

examples/widgets/dialog.pl

Term::Fabulous::Widget::Dialog: a dialog centered over a list of files, behind a translucent backdrop that dims them. The dialog keeps the focus inside itself: Tab moves between its two buttons, and the focused one has a blue border. Escape or a button closes it, d opens it again.

A Delete 3 files? dialog with Delete and Cancel buttons over a dimmed list of files; Delete has the focus and a blue border

examples/widgets/prompt.pl

Term::Fabulous::Widget::Prompt: a list of contacts. n opens a prompt with a name that must be filled in and an e-mail address that must look like one, and Add keeps the prompt open while a value is wrong. d asks before it deletes the last contact, starting on Cancel. The picture shows the prompt after Add with an e-mail address that is not valid.

A New contact prompt over the dimmed list of contacts: Name holds Ada Lovelace, E-mail holds ada@engine in red, and the red line E-mail: Please enter an e-mail address. sits above the Add and Cancel buttons

examples/widgets/file-dialog.pl

Term::Fabulous::Widget::FileDialog: a notes program that asks for files and folders, in a folder of sample notes it makes in a temporary directory. o opens a note (the dropdown switches between notes and all files), s saves it under a name (a name without a dot gets .txt, and an existing file is replaced only after a question), f chooses a folder; the status bar shows the answer. The picture shows the dialog to open a note after the cursor moved to reading-list.txt.

An Open a file dialog over a dimmed notes program: the folder line ends in Documents/Projects/analytical-engine/notes, the list shows two folders and four notes with their sizes and modification times, the cursor is on reading-list.txt, which is also in the File field, and below it are the Notes filter, the Show hidden files checkbox and the Open and Cancel buttons

Progress and feedback

examples/widgets/progress-bar.pl

Term::Fabulous::Widget::ProgressBar: a block bar with its percentage, one with the percentage inside, a thin line bar with a label of its own, a striped bar whose stripes move, a bar of three colored segments, an indeterminate bar with its runner, and a two-row ASCII bar. The bars fill up from a timer.

Progress bars: a block bar at 42 percent, one with the value inside, a thin line bar, a striped bar, a bar of three colored segments, an indeterminate bar with its runner, and a two-row ASCII bar

examples/widgets/toast.pl

Term::Fabulous::Widget::Toast: toasts of every kind stacked in the top right corner, a filled (important) one that stays in the bottom right corner, and one used as an alert box inside a form. The keys 1 to 4 show a toast of each kind, i an important one; the picture shows it after 1, 2, 3 and i.

Toasts stacked in the top right corner: an info, a success and a warning toast with titles, messages and close marks, a filled danger toast in the bottom right corner, and an alert box inside the form

examples/widgets/spinner.pl

Term::Fabulous::Widget::Spinner: every ready-made style with its name as the label, one-cell styles in the first column and wider and taller ones in the second, then a stopped spinner and one with frames of its own. The picture shows the frames of one moment; the program animates them.

Spinners in every style, each with its name: dots, line, arc, circle, arrow, box, pulse and bar in one cell, dots3, bounce and wave in several, and the three-row ring; a stopped one and one with frames of its own

examples/widgets/status-bar.pl

Term::Fabulous::Widget::StatusBar: a list of files with a status bar at the bottom, which shows the position of the cursor on the right and a message after s, w or e. Above the list, a status bar of each other kind. The picture shows it after Down, Down and s.

A list of files with the cursor on budget.csv and, at the bottom, a status bar with the green message Saved budget.csv. and the parts file 3 of 6 and Ctrl+C quits. Above the list, status bars with a success message, a yellow warning with a blue modified part, and a red error with a red read-only part

examples/widgets/menu.pl

Term::Fabulous::Widget::Menu as a context menu: a list of files, whose menu opens with a right click, Shift+F10 or the Menu key. Its items run the same commands as their keys, Paste is dimmed until a file was cut, and Show hidden files has a check mark. The picture shows the menu after a right click on budget.csv.

A list of files with a context menu opened over budget.csv where it was right-clicked: Open with Enter, Rename... with F2, a line, Cut with Ctrl+X, a dimmed Paste with Ctrl+V, a line, and Show hidden files with a check mark and Alt+h. The pointer highlights Rename...

examples/widgets/menu-bar.pl

Term::Fabulous::Widget::MenuBar: a small notes editor with a menu bar, a text area and a status bar. The items of the menus are commands of one table, so their keys work without the menus, and the items that cannot run now are dimmed. The picture shows the Edit menu after typing a line.

A notes editor with a menu bar of File, Edit, View and Help, each with its first letter underlined, and the caption notes.txt. The Edit menu is open below its title with Undo highlighted, Redo, Cut and Copy dimmed, Paste and Select all, each with its key. The status bar at the bottom says F10 opens the menus, Ctrl+Q quits. on the left and modified and Ln 6, Col 7 on the right

examples/widgets/key-reference.pl

Term::Fabulous::Widget::KeyReference: a small notes editor whose keys are commands of one table. F1 opens the key reference with the keys of the commands, and the keys of the text area and of the key reference itself, in groups. Typing filters it; Escape or Close closes it. The picture shows it after F1 and typing ctrl.

A Keys of the notes editor dialog over a dimmed notes editor: the search field holds ctrl, and the table below lists only the keys with Ctrl, Ctrl+N New note, Ctrl+S Save, Ctrl+A Select all and Ctrl+Q Quit under Everywhere, and the undo, copy and word keys under Text; a Close button at the bottom

Tables

examples/widgets/table.pl

Term::Fabulous::Widget::Table: a list of staff with a filter row, multiple selection with check boxes, rows sorted by the start date, formatted dates and numbers, striped rows and a pager. Space selects a row, Shift with an arrow key selects a range, Ctrl+A selects all, a click on a column title sorts, and Ctrl+PageDown and Ctrl+PageUp turn the pages. The picture shows it after Space, Down, Down and Space selected two rows.

A table of staff with a filter row, sorted by the start date, two rows selected with check boxes and a pager below

Charts

examples/widgets/chart.pl

Term::Fabulous::Widget::Chart, what every chart has, shown on four bar charts of the same data: titles aligned left, center and right, the legend at the top, the bottom, the right and the left, two palettes, a series emphasized with highlight, and a chart on a light panel that picks light-theme colors by itself. See "Titles and legends" in Term::Fabulous::Manual::Charts.

Four bar charts of the same data: the legend at the top, at the bottom under a centered title, at the right with the iOS series highlighted and the others faded, and at the left of a chart on a light panel with a right-aligned title

examples/widgets/line-chart.pl

Term::Fabulous::Widget::LineChart: three series of monthly figures with smooth monotone curves and a title on the y axis.

A line chart of monthly active users on web, iOS and Android with smooth curves, a legend at the top and the y axis titled thousands

examples/widgets/area-chart.pl

Term::Fabulous::Widget::AreaChart: the visits of a website by source, stacked, with monotone curves.

Stacked areas of visits from search, social and direct over twelve months, with smooth edges and a legend at the top

examples/widgets/bar-chart.pl

Term::Fabulous::Widget::BarChart: the revenue per quarter of two years as grouped bars, each with its value above it.

Grouped bars of the revenue per quarter in 2025 and 2026 with the value above each bar

examples/widgets/scatter-plot.pl

Term::Fabulous::Widget::ScatterPlot: the engine power and fuel use of two kinds of cars, each kind with its trend line.

Points of petrol and hybrid cars by engine power and fuel use, each kind with a dashed trend line

examples/widgets/histogram.pl

Term::Fabulous::Widget::Histogram: how long 2000 requests to two servers took, binned automatically. The two histograms are drawn over each other, translucent.

Two overlapping, translucent histograms of the response times of the eu-west and us-east servers

examples/widgets/histogram-measures.pl

Term::Fabulous::Widget::Histogram: the same observations measured four ways: the count per bin, the percent of all observations, the density (the area under the bars is 1), and cumulative percentages, which rise to 100% at the last bin. See "Measures" in Term::Fabulous::Widget::Histogram.

Four histograms of the same response times: counts per bin, percent per bin, density per bin, and cumulative percentages rising to 100%

examples/widgets/sparkline.pl

Term::Fabulous::Widget::Sparkline: a list of servers, each with its load of the last minute as a line, an area and bars, which move on every second. The picture shows it after three seconds.

Four servers, each with its current load and three sparklines of the last minute: a line, an orange area and green bars

examples/widgets/pie-chart.pl

Term::Fabulous::Widget::PieChart: the browsers of a website's visitors, largest first, with the small ones folded into Other.

A pie chart of visitors by browser, largest first, with Opera, Vivaldi and Lynx folded into Other, and percentages on the slices and in the legend

examples/widgets/pie-chart-styles.pl

Term::Fabulous::Widget::PieChart: one set of slices drawn four ways: with the characters of four markers, with gaps between the slices, with the labels or the values on the slices, sorted and with a start angle. See "Styles" in Term::Fabulous::Widget::PieChart.

Four pies of the same budget: in quadrant blocks with percentages, in sextants with gaps between the slices, in Braille dots with the slice labels, and in half blocks with the values, sorted ascending and starting at 3 o'clock

examples/widgets/donut-chart.pl

Term::Fabulous::Widget::DonutChart: a monthly budget with the total in the middle and the amounts and shares in the legend. While the mouse pointer is on a slice, the middle shows its share.

A donut chart of a monthly budget with the total in the middle and amounts and percentages in the legend

examples/widgets/donut-chart-centers.pl

Term::Fabulous::Widget::DonutChart: what the hole of a donut shows: by default the total; the share and label of the emphasized slice (under the mouse pointer, or chosen with highlight); or a center_text of your own. See "The text in the hole" in Term::Fabulous::Widget::DonutChart.

Three donuts of the same budget: the total 2170 euros in the middle of the first, 21% Food in the middle of the second with the other slices faded, and a text of its own, 2170 euros per month, in the third

examples/widgets/polar-area-chart.pl

Term::Fabulous::Widget::PolarAreaChart: commits per weekday as slices of equal angle that reach as far out as their value, with rings for the scale.

Seven slices of equal angle for the weekdays, reaching as far out as their number of commits, over rings with their values

examples/widgets/radar-chart.pl

Term::Fabulous::Widget::RadarChart: the ratings of two laptops in six categories, as filled shapes on a web of axes.

Two translucent shapes on a web of six axes: the ratings of two laptops for speed, battery, screen, keyboard, weight and price, with a dot on every value

THE COOKBOOK PROGRAMS

The programs in examples/cookbook are the complete programs of the recipes in Term::Fabulous::Cookbook, where each is explained line by line. They are grouped below like the cookbook pages, in the order of the recipes on each page. Three recipes use a program of examples; their entries point to it. A program that prints its result and ends is shown with its output; custom-events.pl and test-a-widget.pl have no picture.

The first program of the manual

first-program.pl

The program of "YOUR FIRST PROGRAM" in Term::Fabulous::Manual: a greeting in a bordered box, centered on the screen, and a key listener that quits on q or Escape.

The first program: a greeting in a box with a rounded blue border, centered on a dark blue screen

Getting started

The programs of Term::Fabulous::Cookbook::GettingStarted.

minimal-program.pl

"A minimal program to start from" in Term::Fabulous::Cookbook::GettingStarted: a line of text, and q, Escape or Ctrl+C to quit.

The minimal program: one line of text on a dark background

non-ascii-text.pl

"Show non-ASCII text (umlauts, CJK, combining accents)" in Term::Fabulous::Cookbook::GettingStarted: German, Japanese and a combining accent lined up in columns; prints the result and ends.

German, Japanese and a combining accent, each line aligned in its columns

wrap-and-align-text.pl

"Wrap, align and space text" in Term::Fabulous::Cookbook::GettingStarted: the wrap modes, alignment and line height of text in framed boxes; prints the boxes and ends.

Six framed samples: wrapped text aligned left, centered and right, text broken only at line breaks, two rows per line, and a centered label

Keyboard and mouse

The programs of Term::Fabulous::Cookbook::KeyboardAndMouse.

key-bindings.pl

"Bind a key to an action" in Term::Fabulous::Cookbook::KeyboardAndMouse: application key bindings that show the name of every key pressed. The picture shows it after Ctrl+R.

The key bindings program after Ctrl+R: the help line says reloaded and the second line shows the key name

examples/buttons-and-keys.pl

The program of "Add buttons for the mouse and the keyboard (Button)" in Term::Fabulous::Cookbook::KeyboardAndMouse; see its entry among the demo programs.

follow-links.pl

"Follow links in a text (RichText links)" in Term::Fabulous::Cookbook::KeyboardAndMouse: a help text of three pages whose links lead to each other, a footer whose links go back and quit, and a theme that draws links in green. The picture shows the second page, after Tab and Enter followed the first link and Right selected the link on the new page, with the mouse pointer over Quit.

The Keys page of the help text: its link the start page selected in dark text on green, and the footer links Back in green and Quit hovered in white on gray

click-a-word.pl

"React to a click on a word (TextClick)" in Term::Fabulous::Cookbook::KeyboardAndMouse: a left click on a word looks it up in a glossary, a right click shows everything the click reports. The picture shows it after a left click on terminal and a right click on the bold word span.

Two paragraphs, the second with the word span in bold yellow; below them the line terminal: the program that shows this one, and the line right button at column 5, row 4: offset 3, word span (2 to 6), spans [2-6]

Timers and live data

The programs of Term::Fabulous::Cookbook::LiveData.

clock.pl

"Update the screen from a timer (a clock)" in Term::Fabulous::Cookbook::LiveData: a clock that a timer updates once per second.

A clock in the middle of the terminal

scrolling-log.pl

"Add lines to a scrolling log (ScrollBox)" in Term::Fabulous::Cookbook::LiveData: a timer adds a line to a log in a scroll box. The picture shows it after a few seconds.

A framed log with ten timestamped lines

follow-log.pl

"Scroll a ScrollBox from code (keep a log at the newest line)" in Term::Fabulous::Cookbook::LiveData: a log that keeps its newest line in view. The mouse wheel or Up and Down scroll, Left and Right scroll sideways, Home goes to the top and End follows the newest line again. The picture shows it after a few seconds.

A log that shows its newest lines; every fifth line is wider than the box and cut at its edge

show-output.pl

"Show the output of a running command" in Term::Fabulous::Cookbook::LiveData: runs the command given on the command line and shows its newest lines of output and its exit status. The picture shows it running seq -f 'Line %g' 1 40.

The last lines of the output of seq and the exit status in a framed box

Forms

The programs of Term::Fabulous::Cookbook::Forms.

login-form.pl

"A login form (centered dialog, masked password)" in Term::Fabulous::Cookbook::Forms: a user name, a masked password and a check box in a centered box; Enter in a field logs in. The picture shows it after logging in.

A centered login dialog with a user name, a masked password, a checked box and the welcome message

check-form.pl

"Check the values of a form (required, validator)" in Term::Fabulous::Cookbook::Forms: a sign-up form with required fields, a field for every built-in validator, a required dropdown and a required check box, with each field's message beside it; Enter in a text field sends the form. The picture shows it after filling in some fields wrongly and pressing Enter.

A form of eleven inputs; ada@example, perl.org, 192.0.2.300, 70000 and 2026-02-29 are red with a message beside each, the empty color dropdown and the unchecked terms box have messages too, and the status line says 7 fields need your attention

own-checks.pl

"Write your own checks and restrict typing (accept, pattern, code)" in Term::Fabulous::Cookbook::Forms: fields that accept only some characters, a pattern with a message of its own, a check in Perl code, two validators at once and a text area whose lines are checked one by one. The picture shows it after typing into every field.

Five fields with messages below them: ABC12 with Three letters and three digits, such as ABC123; the name José Saramago without a message; 7 with Please enter an even number; mail.perl.org with Please use a host in example.com; and a text area of two hosts with Line 2: Please enter a host name

confirm-dialog.pl

"Ask a question in a dialog (Dialog widget)" in Term::Fabulous::Cookbook::Forms: a notes area; Ctrl+Q asks in a dialog before quitting. The picture shows the open dialog, after typing a note and Ctrl+Q.

The Really quit? dialog with Quit and Cancel buttons over the dimmed notes; Quit has the focus and a blue border

confirm-prompt.pl

"Confirm before quitting (Prompt)" in Term::Fabulous::Cookbook::Forms: the notes area of the previous program, with the question asked by a prompt in one call, which starts on Keep writing. The picture shows the prompt after typing a note and Ctrl+Q.

A Quit? prompt with the message Your notes are not saved anywhere. and the buttons Quit and Keep writing over the dimmed notes. Keep writing has the focus

ask-prompt.pl

"Ask for a number and check it (Prompt, validator)" in Term::Fabulous::Cookbook::Forms: t asks for the length of a session in minutes, a whole number from 1 to 120. The picture shows the prompt after typing 300 and Enter.

A Session length prompt asking How many minutes should the next session last?, with 300 typed in the Minutes field, the red message A session lasts 1 to 120 minutes. and the buttons OK and Cancel

open-and-save.pl

"Open and save a file (FileDialog)" in Term::Fabulous::Cookbook::Forms: a notes editor that opens and saves its note with file dialogs, in a folder of sample notes it makes in a temporary directory. The picture shows the open dialog after Ctrl+O and two steps down the list.

An Open a file dialog over the empty notes editor: the folder line ends in garden-club/season-2026/notes, the list shows garden.txt, groceries.txt and ideas.md with sizes and dates, the cursor is on groceries.txt, which is also in the File field, and below are the Notes filter, the Show hidden files checkbox and the Open and Cancel buttons

color-prompt.pl

"Ask for a color (ColorPicker in a Prompt)" in Term::Fabulous::Cookbook::Forms: c asks for the color of a highlight in a prompt with a color picker. The picture shows the prompt after two steps down the list of named colors.

A Highlight color prompt over the dimmed setting: on the left the label Color and a framed list of six named colors with samples, Mint selected; on the right the field with #98c379 and a green sample, the RGB/HSL switch on RGB and the red, green and blue sliders at 152, 195 and 121; the buttons Use it and Cancel below

inline-prompt.pl

"Ask for input below the shell's output (inline mode)" in Term::Fabulous::Cookbook::Forms: a question that draws into three rows below the shell's output instead of the whole screen. Enter answers, Escape cancels. The picture shows it after typing a name.

The inline prompt in the three rows below a shell's earlier output: the question, a text field holding Ada Lovelace and a help line

choose-options.pl

"Choose from options in Perl (Dropdown, RadioGroup, Slider)" in Term::Fabulous::Cookbook::Forms: a dropdown, a radio group and a slider built in Perl, with a status line. The picture shows it after choosing Express shipping and raising the tip.

A dropdown showing France, radio buttons with Express chosen, a slider at 15 percent and the status line

examples/kdl-form.pl

The program of "Build a form from a KDL file (text fields, radio buttons, dropdown, slider, checkbox)" in Term::Fabulous::Cookbook::Forms; see its entry among the demo programs.

disable-inputs.pl

"Disable inputs until a checkbox is checked" in Term::Fabulous::Cookbook::Forms: a field that is disabled until a check box is checked.

An unchecked check box and the grayed out VAT number field below it

focus-help-line.pl

"Show a status line that follows the focus (OnFocus)" in Term::Fabulous::Cookbook::Forms: a help line that describes the focused input. The picture shows it while the notes have the focus.

A title, notes being typed, a slider and the help line for the notes

tab-order.pl

"Change the Tab order (HasFocusOrder)" in Term::Fabulous::Cookbook::Forms: three fields whose Tab order differs from their order on the screen. The picture shows it after typing a street, Tab and a zip code: Tab went from Street straight to Zip.

Three text fields side by side: Street filled in, City still empty, and the Zip field focused with 12345 typed, because Tab went from Street straight to Zip

The programs of Term::Fabulous::Cookbook::Menus.

"Give a program a menu bar (MenuBar, Commands)" in Term::Fabulous::Cookbook::Menus: a to-do list with a menu bar whose commands add to-dos, remove the finished ones, show or hide them, and quit. The picture shows the View menu.

A to-do list of five check boxes below a menu bar with List and View and the caption To-do. The View menu is open and shows Show done with a check mark and the key Alt+d

context-menu.pl

"Open a menu with a right click or the Menu key (Menu)" in Term::Fabulous::Cookbook::Menus: a text area with a context menu of Cut, Copy, Paste and Select all. The picture shows the menu after selecting two words and a right click.

A text area whose first two words are selected, with a context menu opened over it where it was right-clicked: Cut is highlighted, then Copy, Paste, a line and Select all, each with its key

status-bar.pl

"Show messages and state in a status bar (StatusBar)" in Term::Fabulous::Cookbook::Menus: a journal with a status bar that counts the words and says when the entry was saved. The picture shows it after typing a sentence and Ctrl+S.

A journal entry in a text area and, below it, a status bar with the green message Saved the entry. on the left and 8 words on the right

help-screen.pl

"Show the keys in a help screen (KeyReference)" in Term::Fabulous::Cookbook::Menus: a to-do list whose F1 opens a help screen with the keys of its commands and of the list. The picture shows it after F1.

A Keys of the to-do list dialog over the dimmed to-do list: an empty search field, and a table of keys and actions in three groups: Everywhere with F1 Keys, Ctrl+A Check all, Ctrl+D Remove done, Alt+s Sort by name and Ctrl+Q Quit, The list with the Tab and Space keys, and This help with typing and Escape; a Close button below

document-tabs.pl

"Keep several documents open in tabs (DocumentTabs)" in Term::Fabulous::Cookbook::Menus: an editor with a tab for each open document, which asks before it closes one with unsaved changes. The picture shows it after a change to shopping.txt, Ctrl+N and a line in the new document.

An editor with the tabs shopping.txt with a blue dot, letter.txt, ideas.txt and the active Untitled 1 in bold with a blue dot, each with a close mark, and a plus button. Below, the text Plant the tulips. and a status bar with the keys

Layout and looks

The programs of Term::Fabulous::Cookbook::Layout.

width-group.pl

"Line up labels with equal widths (width_group)" in Term::Fabulous::Cookbook::Layout: labels in a width group, so their values line up; prints the result and ends.

Three label and value rows whose values start in the same column

border-sides.pl

"Use a different border style on each side" in Term::Fabulous::Cookbook::Layout: rules above and below, a heavy top edge and a thick left edge; prints the result and ends.

Three boxes: double and single rules above and below, a heavy top edge, and a thick left edge

theme-switch.pl

"Switch themes at run time (built-in themes and a theme file)" in Term::Fabulous::Cookbook::Layout: the built-in dark and light themes and the theme file examples/themes/ocean.kdl; F2 switches to the next one. The picture shows the ocean theme, after typing a line and two presses of F2.

The ocean theme after two presses of F2: teal text on a dark blue background, a text field holding Light and readable, and a Save button with a teal border

theme-editor-preview.pl

"Design a theme against your own screen (the theme editor)" in Term::Fabulous::Cookbook::Layout: the theme editor, drawn in the light theme, with a sign-in form of your own as its preview; the theme file is sign-in.kdl in the current directory or the first argument.

The theme editor drawn in the light theme, its preview showing a sign-in form in the dark theme being edited: an e-mail field with an invalid address in red, a password field, a check box and Sign in and Cancel buttons; the form on the right lists the palette

states-and-classes.pl

"Mark widgets with states and classes" in Term::Fabulous::Cookbook::Layout: a menu whose items take their colors from their states, followed by the states and classes of each item; prints the result and ends.

A menu of three items with Save in the selected color, followed by the states and classes of each item

resize-aware-layout.pl

"Change the layout with the terminal size (Start and Resize events)" in Term::Fabulous::Cookbook::Layout: two panes side by side on a wide terminal and above each other on a narrow one. The pictures show it 80 and 60 columns wide.

The Inbox and Message panes side by side on a terminal 80 columns wide

The Inbox and Message panes above each other on a terminal 60 columns wide

Tables

The programs of Term::Fabulous::Cookbook::Tables.

table-basics.pl

"Show a list of hashes in a table (sort, select, open a row)" in Term::Fabulous::Cookbook::Tables.

A table of user accounts sorted by name, two rows selected with check boxes, and two status lines below: the selected logins and the account opened with Enter

table-format.pl

"Format cells: dates, numbers, sizes and flags (mutators)" in Term::Fabulous::Cookbook::Tables.

A table of backup jobs with formatted times, durations, sizes, file counts, percentages, transfer rates and check marks, sorted by size, and a line that shows the raw value and the display text of one size

table-edit.pl

"Edit the data of a table (widget cells, add and remove rows and columns)" in Term::Fabulous::Cookbook::Tables: a to-do list with check boxes and buttons in its cells. a adds a task, Delete removes the selected tasks, h gives the task under the cursor one more hour, and n shows or hides the notes column. The picture shows it after n, two selections with Space, a, a click on the check box of the third task and h.

A to-do table with check boxes, delete buttons and a note column, two tasks selected, a new task added and the status line below

table-columns.pl

"Let the user choose the visible columns (column chooser)" in Term::Fabulous::Cookbook::Tables.

A staff table with the column chooser open over its top right corner: City unchecked, E-mail checked, and the status line with the columns to save

table-kdl.pl

"Describe a table in a KDL layout (columns, lines, sort, groups)" in Term::Fabulous::Cookbook::Tables.

A stock table built from KDL: grouped by category, sorted by quantity, two rows selected and the Displays group closed

table-report.pl

"Print a table as a report (Static)" in Term::Fabulous::Cookbook::Tables; prints the report and ends.

The printed sales report: products sorted by revenue, units and amounts formatted, shares in percent and a bold totals row under a double line

Table rows

The programs of Term::Fabulous::Cookbook::TableRows.

table-sort.pl

"Sort rows, also with your own comparison" in Term::Fabulous::Cookbook::TableRows.

A table of tickets sorted by version in natural order and then by priority, with numbered sort markers in the column titles and a line that names the sort

table-filter.pl

"Let the user filter rows (filter row and search box)" in Term::Fabulous::Cookbook::TableRows.

A table of staff with a search field above it and a filter row under the column titles holding the expressions >=2019 and >=80000, four matching rows and the line 4 of 12 rows

table-filter-perl.pl

"Filter rows from Perl (numbers, dates, text, raw or shown values)" in Term::Fabulous::Cookbook::TableRows.

A table of invoices filtered to three rows by the fourth of five filters, with a line that names the active filter and counts the rows

table-groups.pl

"Group rows by a column (collapsible group headers)" in Term::Fabulous::Cookbook::TableRows.

A table of staff grouped by team: group headers with the team name, the number of people and their total salary, the Network group closed

table-tree.pl

"Show nested data as a tree (expand and collapse rows)" in Term::Fabulous::Cookbook::TableRows.

A file tree in a table: folders with open and closed markers, indented files, sizes and dates

table-pages.pl

"Split many rows into pages (pager and page sizes)" in Term::Fabulous::Cookbook::TableRows.

A table of orders on page 3 of 30, with the pager below it and the status line naming the orders on the page

Table styles

The programs of Term::Fabulous::Cookbook::TableStyles.

table-widths.pl

"Size, align and wrap columns (widths, wrapping, widget titles)" in Term::Fabulous::Cookbook::TableStyles: fixed, growing and percentage column widths, wrapped cells, rows of two lines, alignment and a widget as a column title. Resize the terminal to see the widths change.

An order table with a fixed number column, a growing Item column, a Notes column that takes a third of the width and wraps, an address column of two lines per row, a centered quantity, prices with a left-aligned title, and a Rating title with a star

table-lines.pl

"Lines and colors per row, column and cell (conditional formatting)" in Term::Fabulous::Cookbook::TableStyles.

A budget table: a heavy line and dashed lines in the Left column, negative amounts in red, a cancelled row in gray italics and a bold totals row under a double line

table-colors.pl

"A table with colored rows and titles (block frame, no grid lines)" in Term::Fabulous::Cookbook::TableStyles.

A table of planets with an Outer block frame, no inner lines, colored column titles, striped rows and the cursor row highlighted up to the frame

table-line-styles.pl

"Compare the line options of a table (frames, grid lines, block frames)" in Term::Fabulous::Cookbook::TableStyles: the same small table with nine different settings of its lines.

Nine small tables with different lines: the default round frame, a full grid, no lines, a double frame with a heavy title line, a heavy frame with dashed row lines, ASCII lines, and Outer, Inner and Thick block frames

Charts

The programs of Term::Fabulous::Cookbook::Charts, one for each kind of chart.

chart-line.pl

"Draw a line chart with labels and points (LineChart)" in Term::Fabulous::Cookbook::Charts.

A line chart of the average monthly temperatures of Lisbon, Berlin and Oslo, with a dot on every month, a legend at the top and degree labels on the y axis

chart-bars.pl

"Grouped, stacked and horizontal bars (BarChart)" in Term::Fabulous::Cookbook::Charts.

Three bar charts: orders of the shop and the app per weekday as grouped bars with their values, support tickets per weekday as stacked bars, and the views of four pages as horizontal bars with their values

chart-pie.pl

"Show shares as a pie or donut (PieChart, DonutChart)" in Term::Fabulous::Cookbook::Charts.

A pie chart of disk usage with percentages on the slices and the legend below it, and a donut chart of sales by region with percentages on its slices, the small regions folded into Rest of world, amounts in the legend and 1150k orders in the middle

chart-scatter.pl

"A scatter plot with trend lines (ScatterPlot)" in Term::Fabulous::Cookbook::Charts.

A scatter plot of petal length and width of three species as three clusters of dots, the largest flowers drawn as diamonds, with a dashed trend line through the two larger species and dotted vertical grid lines

chart-stacked-areas.pl

"Stacked areas and shares of 100% (AreaChart)" in Term::Fabulous::Cookbook::Charts.

Two stacked area charts of electricity from coal, gas, wind and solar from 2016 to 2026: the amounts in TWh on the left, each source's share of 100 percent on the right

chart-histogram.pl

"How values are distributed (Histogram)" in Term::Fabulous::Cookbook::Charts.

Two histograms of exam scores: counts in automatic bins on the left, and the cumulative share in bins of 10 points from 0 to 100 on the right, rising to 100 percent

chart-radar.pl

"Compare profiles on radar and polar area charts (RadarChart, PolarAreaChart)" in Term::Fabulous::Cookbook::Charts.

A radar chart comparing a striker, a defender and a dashed gray average over six skills on circular rings, and a polar area chart of rain per season with Spring at the top

chart-sparklines.pl

"Show sparklines in table cells (Sparkline)" in Term::Fabulous::Cookbook::Charts.

A table of four stocks with symbol, name, last price and the change over 30 days, and a Trend column of area sparklines that span the month's prices, green for rising and red for falling stocks

Chart techniques

The programs of Term::Fabulous::Cookbook::ChartTechniques: time axes, live data, transforms, KDL layouts and printed reports.

chart-time-series.pl

"Plot values over time (time axis, from and to, a dashed forecast)" in Term::Fabulous::Cookbook::ChartTechniques.

Hourly temperatures over four days on a time axis: a solid measured line, a dashed forecast from noon of June 3rd on, and a red shaded area under the measurements from June 2nd to that noon

chart-live.pl

"A live chart that follows new data (append, max_points, span)" in Term::Fabulous::Cookbook::ChartTechniques; the picture shows it after 30 seconds.

A live chart of network traffic: received traffic as a filled area with a line on top and sent traffic as a line fill the right half of a one-minute time axis after 30 seconds, with a status line of the newest values below

chart-log-scale.pl

"Show values of very different sizes (logarithmic axis)" in Term::Fabulous::Cookbook::ChartTechniques.

The same two series twice: on a linear axis the issues and the early downloads lie flat on the bottom, on a logarithmic axis both rise as nearly straight lines

chart-transform.pl

"Smooth noisy data and index it to 100 (transforms)" in Term::Fabulous::Cookbook::ChartTechniques.

Daily visits as a dim raw line with a 7-day moving average and a dashed exponentially smoothed line over it, and below it share and bond prices both indexed to 100 at day 1

chart-kdl.pl

"Describe charts in a KDL layout (series, slices, transforms)" in Term::Fabulous::Cookbook::ChartTechniques.

A bar chart of sold and returned units per quarter with value labels and a dashed trend line, built from KDL, next to a donut chart of sales by channel that includes the Web slice added from Perl

chart-report.pl

"Print charts in a report (Static)" in Term::Fabulous::Cookbook::ChartTechniques; prints the report and ends.

The printed report: horizontal bars of the disk usage of four file systems with their percentages, and a line with the load of the last 18 hours as a bar sparkline

Chart styles

The programs of Term::Fabulous::Cookbook::ChartStyles: curves, markers, colors, line styles and hover.

chart-curves.pl

"Connect points with curves and easings (curve)" in Term::Fabulous::Cookbook::ChartStyles.

Six small charts of the same seven points connected linear, step, monotone, catmull-rom, ease-in-out-sine and ease-out-bounce

chart-styles.pl

"Draw with Braille, blocks or box lines (marker)" in Term::Fabulous::Cookbook::ChartStyles.

Nine small charts of one wave: lines in Braille, half blocks, quadrants, sextants and box drawing lines, an area in eighth blocks, and bars in quadrants, blocks and Braille

chart-colors.pl

"Light backgrounds, palettes and colors of your own" in Term::Fabulous::Cookbook::ChartStyles.

A line chart on a light background with dark text, dotted grid lines and the legend below, next to a bar chart with a rounded frame, colors of its own and a dashed red target line

chart-options.pl

"Line styles, gaps, bar widths, stack groups and grid lines" in Term::Fabulous::Cookbook::ChartStyles: six small charts, one for each group of options.

Six small charts: a solid, a dashed and a dotted line; a line with a gap next to one drawn across the gap; an area with a line and a mark on every point; narrow bars; bars of 2025 and 2026 in two stacks per quarter; a line over dashed vertical and solid horizontal grid lines

chart-hover.pl

"Show details of the point under the pointer (SeriesHover, highlight)" in Term::Fabulous::Cookbook::ChartStyles; the picture shows it with the mouse pointer over the chart.

A stacked area chart of closed issues per team with the area under the mouse pointer emphasized, the others faded, and a status line that names the team, the week and the number of issues

Canvases

The programs of Term::Fabulous::Cookbook::Canvases.

paint-with-the-mouse.pl

"Paint with the mouse (Canvas, clicks and drags)" in Term::Fabulous::Cookbook::Canvases: the left button draws, the right one erases, and a drag draws a line. The picture shows a drag and three clicks.

A wave of stars drawn by dragging the mouse over a canvas, with an o where the drag started and at three clicked cells

pixel-canvas-plot.pl

"Plot data on a pixel canvas (PixelCanvas)" in Term::Fabulous::Cookbook::Canvases.

A line chart of temperatures on a pixel canvas, red above 20 degrees

picture-viewer.pl

"Show a picture file (Image, fit)" in Term::Fabulous::Cookbook::Canvases: the picture file named as the argument, or the example picture of three translucent circles, in the whole window; n, c and s switch the fit between none, contain and stretch, b the background between the screen's and white. Needs Imager.

Three overlapping translucent circles, red, green and blue, scaled twice in a frame on the dark screen, their colors mixed where they overlap, with the file name, the picture size, the fit and the keys above them

embedded-logo.pl

"Embed a logo in the program (Image, base64)" in Term::Fabulous::Cookbook::Canvases: an about box with a logo kept in the program as base64 text. Needs Imager.

An about box with a rainbow circle logo next to the program name, a description and a hint to press q

sixel-viewer.pl

"Show a photo in sixel graphics (Sixel)" in Term::Fabulous::Cookbook::Canvases: the picture file named as the argument, or a detail of the Mandelbrot set, in sixel graphics in the whole window; n, c and s switch the fit between none, contain and stretch, h shows and hides a help box over the picture. The picture shows it after pressing h. Needs Imager, Imager::File::SIXEL and a terminal that shows sixel graphics.

A detail of the Mandelbrot set, blue and white spirals with orange and dark red bands, scaled to fit a rounded frame on the dark screen in sixel graphics, with a help box of the four keys over the top of the picture, which leaves those cells out, and the keys above the frame

Output without a terminal

The programs of Term::Fabulous::Cookbook::Output.

report-to-file.pl

"Render a report to a file or pipe (Static)" in Term::Fabulous::Cookbook::Output; prints the report and also writes it to report.txt in the current directory.

The sales report: a rounded box with a title and three regions

test-a-widget.pl

"Test a widget without a terminal" in Term::Fabulous::Cookbook::Output; a test script, run it with prove.

Your own widgets and events

The programs of Term::Fabulous::Cookbook::Extending.

examples/custom-widget.pl

The program of "Write a custom input widget (a toggle switch)" in Term::Fabulous::Cookbook::Extending; see its entry among the demo programs.

kdl-panel.pl and lib/My/Panel.pm

"Make a widget usable from KDL" in Term::Fabulous::Cookbook::Extending: a panel class of your own, used from a KDL layout; prints the result and ends.

The Network panel in a rounded frame and the Disk panel in a double frame

custom-events.pl

"Fire your own events" in Term::Fabulous::Cookbook::Extending; prints what the listeners hear.

PICTURES OF YOUR OWN PROGRAMS

The pictures on this page are taken with tools/screenshot from the distribution, which takes one of any Term::Fabulous program, as SVG or PNG. It runs the program in a pseudo terminal of a given size, sends it the keys, text and mouse actions you give, and records what the terminal shows. Time is simulated, so animations and clocks come out the same on every run. From a built copy of the distribution:

perl -Mblib tools/screenshot --size 100x30 --output form.svg examples/form.pl
perl -Mblib tools/screenshot --steps 'type "Ada"; key "Tab"' --output form.png my-program.pl

perl -Mblib tools/screenshot --help lists the options. PNG output needs Imager with PNG and FreeType support; tools/README.md describes the tools.

SEE ALSO

Term::Fabulous, Term::Fabulous::Manual, Term::Fabulous::Cookbook.