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

https://github.com/vrnimje/quick-ftxui/assets/103848930/715c821b-b259-4e2b-ab25-2484ad3c47c1

Features

• Supports majority of FTXUI components, listed below:

  Button

  Supports System() calls (like /usr/bin/firefox) [Example](./examples/Button.qf) 
  Slider

  [Example](./examples/Slider.qf) 
  Input

  [Example](./examples/input.qf) 
  Dropdown

  [Example](./examples/menu_toggle_dropdown.qf#L15-L18) 
  Menu

  [Example](./examples/menu_toggle_dropdown.qf#L4-L8) 
  Toggle

  [Example](./examples/menu_toggle_dropdown.qf#L11-14) 
  Radiobox

  [Example](./examples/radio_check_box.qf#L5-8) 
  Checkbox

  [Example](./examples/radio_check_box.qf#L19-22) 

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

  Text

  [Example](./examples/text.qf) 
  Paragraph

  Similar to text, but adapts to size of terminal window [Example](./examples/paragraph.qf) 
  Separators

  Allows for proper division the UI into neat sections [Example](./examples/separator.qf) 
  Borders

  Borders can be applied on a block level [Example](./examples/border.qf) 

• 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

• FTXUI, by Arthur Sonzogni, for rendering the terminal graphics in backend
• Boost Spirit, for writing the parser for the custom language
• Catch2, for unit tests

Acknowledgements

• Special Thanks to Shreyas Atre and Krishna Narayanan for their very crucial foundational work and guidance.
• Thanks to Prit Kanadiya and Khushi Balia for their contributions to the rest of the codebase
• Thanks to Arthur Sonzogni for his FTXUI starter repository template, and his amazing FTXUI library