Red TUI Backend

[qtxie]

In addition to the shiny GUI backends in Red, now we have an old school text-based user inferfaces (TUI) backend for the View engine.

The new TUI backend has a quite limited features set compared to the GUI backends. Here are features implemented:

• Styles: base, panel, button, field, text, progress, rich-text, image and text-list.
• Draw command: text. Both string! and rich-text! are supported.
• Keyboard handling. Only key-down and key events. Actually they are the same event with different names. The terminals only send a single key event, no down and up event.
• Mouse handling. Disable by default. Use system/view/platform/mouse-event?: yes to enable it.
• Image! Use Truecolor (24-bit RGB) for image rendering if the terminal supports it. Otherwise use 256 colors.
• Timer. Use /rate facets.
• Facets supported: /offset, /size, /text, /image, /color, /data, /enabled?, /visible?, /selected, /flags, /options, /pane, /rate, /para and /draw.
• Flags supported: password and all-over.
• Limited ANSI escape codes support in /text facet. Only Colors / Graphics Mode codes.
• Use 256 colors for text. It should works fine on most of the terminals.
• Works on the big-3 platforms (Linux, macOS and Windows 10).

To use the TUI backend, add Config: [GUI-engine: 'terminal] in addition to Needs: View in the Red header block.

Red [
    Title:  "Red TUI App"
    Needs:  View
    Config: [GUI-engine: 'terminal]
]

Here are a few examples, starting with a Hello World!:

>> view [text "Hello TUI World!"]

 Hello TUI World!

Press ESC to exit the event loop.

A progress bar with animation.

view [
    bar: progress 30% rate 10 on-time [
        data: face/data + 10%
        face/data: either data > 100% [0%][data]
        info/text: form face/data
        info/font/color: random white
    ]
    info: text 4 font-color white "30%"
]

A rich-text example:

btn-quit: rtd-layout [i/red ["Q"] "uit"]

view compose/deep [
    rich-text 40x3 transparent data [
        yellow "Hello" <bg> white red " Red " </bg> green "World!^/"
        u "Underline" /u " " s "Strike" /s i " Italic" /i
    ] return
    button "button 1"
    button 4x2 draw [text 0x0 (btn-quit)] [unview/all]
]

Press TAB key to switch focus between the buttons. Press Enter key to push the button.

An example of enable mouse. Note not all the terminals support mouse.

system/view/platform/mouse-event?: yes

view [
    panel 80x20 [
        base 11x1 center "drag me😀" loose
    ]
]

There are more examples on the red repository and the community. Here are a few screenshots of them.

Show image in both TUI and GUI.

tui.red

TUI Cat by GiuseppeChillemi