/quick-ftxui

A Quick & Easy way to render terminal user interfaces, using FTXUI.

Primary LanguageC++

Quick-FTXUI

A Quick & Easy way to render terminal user interfaces, using FTXUI.

Example

It converts this JSON-like code into a TUI

DoubleBorder Vertical{
    str x
    Red underlined Text("This opens firefox")
    Blue Button{
        "Open firefox",
        System("/usr/bin/firefox"),
        Animated,
        x
    }
    Light separator
    int y = 20
    Yellow Slider {
        "A Slider: ",
        y,
        0,
        100,
        1
    }
    separator
    RoundedBorder Horizontal {
        int z = 1
        int w
        Red Dropdown {
            [ "Zain", "Mahesh", "Alqama", "Vaidic", "Mundane", "Advait", ],
            z
        }
        Cyan Toggle {
            [ "On", "Off", ],
            w
        }
    }

    Dashed separator

    RedLight Button {
        "Exit",
        "Exit",
        Ascii
    }
}

Output

Screencast-from-19-09-23-11_45_10-AM-IST.mp4

Features

  • Supports majority of FTXUI components, listed below:

    Button Supports System() calls (like /usr/bin/firefox)

    Example

    Slider

    Example

    Input

    Example

    Dropdown

    Example

    Menu

    Example

    Toggle

    Example

    Radiobox

    Example

    Checkbox

    Example

  • Supports FTXUI's basic DOM elements (more coming with future releases)

    Text

    Example

    Paragraph

    Similar to text, but adapts to size of terminal window

    Example

    Alt text

    Separators

    Allows for proper division the UI into neat sections

    Example

    Borders

    Borders can be applied on a block level

    Example

  • Colours

    Quick-FTXUI supports FTXUI's 16 color pallete. Support for 256 color pallete coming soon

    Example

Note: To run the above examples, build this repository with the steps mentioned here

  • Variables

    Used as hooks, so that we can obtain the input given to the Terminal UI. Currently, supports int and str data types

    Check out the examples in this directory

    Note: To run these examples, build this repository with the steps mentioned here

  • Embedded scripting supported in C++

    Supports basic scripting functionality, with functions (or hooks) to add & access the quick-ftxui variables. We can also use C++ references to integers and string data types to access the values inside the QF script. See the example given below.

    Full Example

    #include "quick-ftxui.hpp"
    #include <iostream>
    #include <string>
    
    using namespace std;
    using namespace quick_ftxui;
    
    int main() {
        int x = 5;
        string y = "Init value";
        set_int_var("x", &x);
        set_str_var("y", &y);
        string source_code = R"(Border Vertical{
                str z = "init"
                str a
                int o = 0
                Input {
                    "Type something...",
                    y
                }
                RedLight Slider {
                    "Test: ",
                    x,
                    0,
                    100,
                    2
                }
                Magenta Button{
                    "Chrome",
                    System("/usr/bin/google-chrome-stable"),
                    Animated,
                    z
                }
                Green Menu{
                    [ "Physics",  "Maths",  "Chemistry",  "Biology",],
                    VerticalAnimated,
                    o
                }
                Button {
                    "Exit",
                    "Exit"
                }
            })";
    
        parse_qf(source_code);
    
        cout << "Slider value is: " << x << "\n";
        cout << "User input is: " << y << "\n";
        cout << "Option no. selected in Menu is: " << get_int("o") + 1 << "\n";
        cout << "Chrome debug msgs are: " << get_str("z") << "\n";
    }

    Note: To run this example, build this repository with examples, steps given here

Check out the documentation for learning more about the language: vrnimje.github.io/quick-ftxui/

Build instructions:

mkdir build
cd build
cmake .. -G "Ninja" -DQUICK_FTXUI_TESTS=ON
ninja
./quick-ftxui ../examples/Button.qf

Build with examples:

mkdir build
cd build
cmake .. -G "Ninja" -DQUICK_FTXUI_EXAMPLES=ON
ninja
./cpp_examples/quick_ftxui_example

Dependencies

Acknowledgements