libftxui

[brief]

Functional Terminal (X) User interface - A simple C++ library for terminal based user interfaces!

FTXUI

Functional Terminal (X) User interface

A simple C++ library for terminal based user interfaces!

Feature

Documentation

Operating systems

This is expected to be cross platform. This supports / tests:

Example

  vbox({
    hbox({
      text("left") | border,
      text("middle") | border | flex,
      text("right") | border,
    }),
    gauge(0.5) | border,
  });
┌────┐┌───────────────────────────────────────────────────────────────┐┌─────┐
│left││middle                                                         ││right│
└────┘└───────────────────────────────────────────────────────────────┘└─────┘
┌────────────────────────────────────────────────────────────────────────────┐
│██████████████████████████████████████                                      │
└────────────────────────────────────────────────────────────────────────────┘

Short gallery

DOM

This module defines a hierarchical set of Element. An element manages layout and can be responsive to the terminal dimensions.

They are declared in <ftxui/dom/elements.hpp>

Element can be arranged together:

Element can become flexible using the the flex decorator.

Example using hbox, vbox and filler.

image

Example using gridbox:

image

Example using flexbox:

image

See also this demo.

An element can be decorated using the functions:

Example

image

FTXUI supports the pipe operator. It means: decorator1(decorator2(element)) and element | decorator1 | decorator2 can be used.

FTXUI support every color palette:

Color gallery: image

Use decorator border and element separator() to subdivide your UI:

auto document = vbox({
    text("top"),
    separator(),
    text("bottom"),
}) | border;

Demo:

image

A simple piece of text is represented using text("content").

To support text wrapping following spaces the following functions are provided:

Element paragraph(std::string text);
Element paragraphAlignLeft(std::string text);
Element paragraphAlignRight(std::string text);
Element paragraphAlignCenter(std::string text);
Element paragraphAlignJustify(std::string text);

Paragraph example

ezgif com-gif-maker (4)

A class to easily style a table of data.

Example:

image

Drawing can be made on a Canvas, using braille, block, or simple characters:

Simple example:

image

Complex examples:

ezgif com-gif-maker (3)

Component

The ftxui/component is needed when you want to produce dynamic UI, reactive to the user's input. It defines a set of ftxui::Component. A component reacts to Events (keyboard, mouse, resize, ...) and Render Element (see previous section).

Prebuilt components are declared in <ftxui/component/component.hpp>

Gallery of multiple components. (demo)

image

Example:

image

Example:

image

Example:

image

Example:

image

Example:

image

Example:

image

Example:

ezgif com-gif-maker

Example:

youtube-video-gif (3)

Vertical:

ezgif com-gif-maker (1)

Horizontal:

ezgif com-gif-maker (2)

Project using FTXUI

Feel free to add your projects here:

cpp-best-practices/game_jam

Several games using the FTXUI have been made during the Game Jam:

External package

It is highly recommended to use CMake FetchContent to depend on FTXUI. This way you can specify which commit you would like to depend on.

include(FetchContent)

FetchContent_Declare(ftxui
  GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
  GIT_TAG v3.0.0
)

FetchContent_GetProperties(ftxui)
if(NOT ftxui_POPULATED)
  FetchContent_Populate(ftxui)
  add_subdirectory(${ftxui_SOURCE_DIR} ${ftxui_BINARY_DIR} EXCLUDE_FROM_ALL)
endif()

If you don't, the following packages have been created:

Contributors

license MIT
project FTXUI
url arthursonzogni.github.io/FTXUI/
doc-url arthursonzogni.github.io/FTXUI/
src-url github.com/ArthurSonzogni/FTXUI
topics C++
2 Versions
version 4.0.0
repository https://pkg.cppget.org/1/stable
depends 0
version 3.0.0+2
repository https://pkg.cppget.org/1/stable
depends 0