2021-09-26 22:47:41 +08:00
< p align = "center" >
2023-06-11 20:04:30 +08:00
< img src = "https://github.com/ArthurSonzogni/FTXUI/assets/4759106/6925b6da-0a7e-49d9-883c-c890e1f36007" alt = "Demo image" > < / img >
2021-09-26 22:47:41 +08:00
< br / >
< a href = "#" > < img src = "https://img.shields.io/badge/c++-%2300599C.svg?style=flat&logo=c%2B%2B&logoColor=white" > < / img > < / a >
< a href = "http://opensource.org/licenses/MIT" > < img src = "https://img.shields.io/github/license/arthursonzogni/FTXUI?color=black" > < / img > < / a >
< a href = "#" > < img src = "https://img.shields.io/github/stars/ArthurSonzogni/FTXUI" > < / img > < / a >
< a href = "#" > < img src = "https://img.shields.io/github/forks/ArthurSonzogni/FTXUI" > < / img > < / a >
< a href = "#" > < img src = "https://img.shields.io/github/repo-size/ArthurSonzogni/FTXUI" > < / img > < / a >
< a href = "https://github.com/ArthurSonzogni/FTXUI/graphs/contributors" > < img src = "https://img.shields.io/github/contributors/arthursonzogni/FTXUI?color=blue" > < / img > < / a >
2023-04-04 05:07:56 +08:00
< br / >
< a href = "https://github.com/ArthurSonzogni/FTXUI/issues" > < img src = "https://img.shields.io/github/issues/ArthurSonzogni/FTXUI" > < / img > < / a >
< a href = "https://repology.org/project/ftxui/versions" > < img src = "https://repology.org/badge/latest-versions/ftxui.svg" alt = "latest packaged version(s)" > < / a >
2022-04-26 23:04:34 +08:00
< a href = "https://codecov.io/gh/ArthurSonzogni/FTXUI" >
< img src = "https://codecov.io/gh/ArthurSonzogni/FTXUI/branch/master/graph/badge.svg?token=C41FdRpNVA" / >
< / a >
2021-09-26 22:47:41 +08:00
< br / >
2021-10-08 20:12:27 +08:00
< a href = "https://arthursonzogni.github.io/FTXUI/" > Documentation< / a > ·
2022-03-02 02:07:50 +08:00
< a href = "https://github.com/ArthurSonzogni/FTXUI/issues" > Report a Bug< / a > ·
2021-09-26 22:47:41 +08:00
< a href = "https://arthursonzogni.github.io/FTXUI/examples.html" > Examples< / a > .
< a href = "https://github.com/ArthurSonzogni/FTXUI/issues" > Request Feature< / a > ·
< a href = "https://github.com/ArthurSonzogni/FTXUI/pulls" > Send a Pull Request< / a >
< / p >
2023-06-05 00:04:50 +08:00
# FTXUI
2021-09-26 22:47:41 +08:00
< i > Functional Terminal (X) User interface< / i >
2020-04-10 20:28:12 +08:00
2023-06-05 00:04:50 +08:00
A simple cross-platform C++ library for terminal based user interfaces!
2020-04-10 20:28:12 +08:00
2019-01-06 08:37:26 +08:00
## Feature
2019-01-28 00:20:55 +08:00
* Functional style. Inspired by
2024-05-01 17:40:49 +08:00
[1 ](https://hackernoon.com/building-reactive-terminal-interfaces-in-c-d392ce34e649?gi=d9fb9ce35901 )
2019-01-28 00:20:55 +08:00
and [React ](https://reactjs.org/ )
2022-03-02 02:07:50 +08:00
* Simple and elegant syntax (in my opinion)
2022-03-21 01:13:11 +08:00
* Keyboard & mouse navigation.
2022-03-02 02:07:50 +08:00
* Support for [UTF8 ](https://en.wikipedia.org/wiki/UTF-8 ) and [fullwidth chars ](https://en.wikipedia.org/wiki/Halfwidth_and_fullwidth_forms ) (→ 测试)
2022-07-10 02:47:18 +08:00
* Support for animations. [Demo 1 ](https://arthursonzogni.github.io/FTXUI/examples/?file=component/menu_underline_animated_gallery ), [Demo 2 ](https://arthursonzogni.github.io/FTXUI/examples/?file=component/button_style )
* Support for drawing. [Demo ](https://arthursonzogni.github.io/FTXUI/examples/?file=component/canvas_animated )
2022-03-02 02:07:50 +08:00
* No dependencies
2023-06-05 00:04:50 +08:00
* **Cross platform**: Linux/MacOS (main target), WebAssembly, Windows (Thanks to contributors!).
2022-03-21 01:13:11 +08:00
* Learn by [examples ](#documentation ), and [tutorials ](#documentation )
2023-06-09 19:48:11 +08:00
* Multiple packages: CMake [FetchContent ]([https://bewagner.net/programming/2020/05/02/cmake-fetchcontent/](https://cmake.org/cmake/help/latest/module/FetchContent.html )) (preferred), vcpkg, pkgbuild, conan.
2024-05-06 00:11:07 +08:00
* Good practices: documentation, tests, fuzzers, performance tests, automated CI, automated packaging, etc...
2022-03-21 01:13:11 +08:00
## Documentation
- [Starter example project ](https://github.com/ArthurSonzogni/ftxui-starter )
- [Documentation ](https://arthursonzogni.github.io/FTXUI/ )
2022-07-10 02:47:18 +08:00
- [Examples (WebAssembly) ](https://arthursonzogni.github.io/FTXUI/examples/ )
2022-07-10 00:57:30 +08:00
- [Build using CMake ](https://arthursonzogni.github.io/FTXUI/#build-cmake )
2019-01-19 05:45:25 +08:00
2021-09-26 22:47:41 +08:00
## Example
2019-01-06 08:37:26 +08:00
~~~cpp
2023-06-05 00:04:50 +08:00
vbox({
hbox({
text("one") | border,
text("two") | border | flex,
text("three") | border | flex,
}),
2023-06-05 00:05:32 +08:00
gauge(0.25) | color(Color::Red),
gauge(0.50) | color(Color::White),
gauge(0.75) | color(Color::Blue),
2023-06-05 00:04:50 +08:00
});
2019-01-06 08:37:26 +08:00
~~~
2023-06-05 00:04:50 +08:00
2019-01-06 08:37:26 +08:00
2021-12-23 22:12:22 +08:00
## Short gallery
#### DOM
2024-04-22 14:48:32 +08:00
This module defines a hierarchical set of Element. An Element manages layout and can be responsive to the terminal dimensions.
2021-12-23 22:12:22 +08:00
They are declared in [< ftxui / dom / elements . hpp > ](https://arthursonzogni.github.io/FTXUI/elements_8hpp_source.html
)
< details > < summary > Layout< / summary >
Element can be arranged together:
- horizontally with `hbox`
- vertically with `vbox`
- inside a grid with `gridbox`
- wrap along one direction using the `flexbox` .
Element can become flexible using the the `flex` decorator.
[Example ](https://arthursonzogni.github.io/FTXUI/examples_2dom_2vbox_hbox_8cpp-example.html ) using `hbox` , `vbox` and `filler` .
2023-08-16 00:47:14 +08:00
[Example ](https://arthursonzogni.github.io/FTXUI/examples_2dom_2gridbox_8cpp-example.html ) using gridbox:
2021-12-23 22:12:22 +08:00
[Example ](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/dom/hflow.cpp ) using flexbox:
2022-07-10 02:47:18 +08:00
[See ](https://arthursonzogni.github.io/FTXUI/examples_2dom_2hflow_8cpp-example.html ) also this [demo ](https://arthursonzogni.github.io/FTXUI/examples/?file=component/flexbox ).
2021-12-23 22:12:22 +08:00
< / details >
< details > < summary > Style< / summary >
An element can be decorated using the functions:
- `bold`
- `dim`
- `inverted`
- `underlined`
2023-01-22 18:02:27 +08:00
- `underlinedDouble`
2021-12-23 22:12:22 +08:00
- `blink`
2023-01-22 18:02:27 +08:00
- `strikethrough`
2021-12-23 22:12:22 +08:00
- `color`
- `bgcolor`
2023-06-05 03:06:19 +08:00
- `hyperlink`
2021-12-23 22:12:22 +08:00
[Example ](https://arthursonzogni.github.io/FTXUI/examples_2dom_2style_gallery_8cpp-example.html )
2022-03-02 02:07:50 +08:00
FTXUI supports the pipe operator. It means: `decorator1(decorator2(element))` and `element | decorator1 | decorator2` can be used.
2021-12-23 22:12:22 +08:00
< / details >
< details > < summary > Colors< / summary >
2022-03-02 02:07:50 +08:00
FTXUI support every color palette:
2021-12-23 22:12:22 +08:00
Color [gallery ](https://arthursonzogni.github.io/FTXUI/examples_2dom_2color_gallery_8cpp-example.html ):
< / details >
< details > < summary > Border and separator< / summary >
Use decorator border and element separator() to subdivide your UI:
```cpp
auto document = vbox({
text("top"),
separator(),
text("bottom"),
}) | border;
```
[Demo ](https://arthursonzogni.github.io/FTXUI/examples_2dom_2separator_8cpp-example.html ):
< / details >
< details > < summary > Text and paragraph< / summary >
A simple piece of text is represented using `text("content")` .
2022-03-02 02:07:50 +08:00
To support text wrapping following spaces the following functions are provided:
2021-12-23 22:12:22 +08:00
```cpp
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);
```
2022-03-21 01:13:11 +08:00
[Paragraph example ](https://arthursonzogni.github.io/FTXUI/examples_2dom_2paragraph_8cpp-example.html )
2021-12-23 22:12:22 +08:00
< / details >
< details > < summary > Table< / summary >
A class to easily style a table of data.
[Example ](https://arthursonzogni.github.io/FTXUI/examples_2dom_2table_8cpp-example.html ):
< / details >
< details > < summary > Canvas< / summary >
Drawing can be made on a Canvas, using braille, block, or simple characters:
Simple [example ](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/dom/canvas.cpp ):
Complex [examples ](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/component/canvas_animated.cpp ):
< / details >
#### Component
2024-04-22 14:48:32 +08:00
ftxui/component produces dynamic UI, reactive to the user's input. It defines a set of ftxui::Component. A component reacts to Events (keyboard, mouse, resize, ...) and Renders as an Element (see previous section).
2021-12-23 22:12:22 +08:00
Prebuilt components are declared in [<ftxui/component/component.hpp> ](https://arthursonzogni.github.io/FTXUI/component_8hpp_source.html )
< details > < summary > Gallery< / summary >
2022-07-10 02:47:18 +08:00
[Gallery ](https://arthursonzogni.github.io/FTXUI/examples_2component_2gallery_8cpp-example.html ) of multiple components. ([demo](https://arthursonzogni.github.io/FTXUI/examples/?file=component/gallery))
2021-12-23 22:12:22 +08:00
< / details >
< details > < summary > Radiobox< / summary >
[Example ](https://arthursonzogni.github.io/FTXUI/examples_2component_2radiobox_8cpp-example.html ):
< / details >
< details > < summary > Checkbox< / summary >
[Example ](https://arthursonzogni.github.io/FTXUI/examples_2component_2checkbox_8cpp-example.html ):
< / details >
< details > < summary > Input< / summary >
[Example ](https://arthursonzogni.github.io/FTXUI/examples_2component_2input_8cpp-example.html ):
< / details >
< details > < summary > Toggle< / summary >
[Example ](https://arthursonzogni.github.io/FTXUI/examples_2component_2toggle_8cpp-example.html ):
< / details >
< details > < summary > Slider< / summary >
[Example ](https://arthursonzogni.github.io/FTXUI/examples_2component_2slider_8cpp-example.html ):
< / details >
< details > < summary > Menu< / summary >
[Example ](https://arthursonzogni.github.io/FTXUI/examples_2component_2menu_8cpp-example.html ):
< / details >
< details > < summary > ResizableSplit< / summary >
[Example ](https://arthursonzogni.github.io/FTXUI/examples_2component_2resizable_split_8cpp-example.html ):
< / details >
< details > < summary > Dropdown< / summary >
[Example ](https://arthursonzogni.github.io/FTXUI/examples_2component_2dropdown_8cpp-example.html ):
< / details >
< details > < summary > Tab< / summary >
[Vertical ](https://arthursonzogni.github.io/FTXUI/examples_2component_2tab_vertical_8cpp-example.html ):
[Horizontal ](https://arthursonzogni.github.io/FTXUI/examples_2component_2tab_horizontal_8cpp-example.html ):
< / details >
2023-06-05 00:04:50 +08:00
## Libraries for FTXUI
2024-04-22 14:48:32 +08:00
- *Want to share a useful Component for FTXUI? Feel free to add yours here*
2023-09-03 17:45:23 +08:00
- [ftxui-grid-container ](https://github.com/mingsheng13/grid-container-ftxui )
- [ftxui-ip-input ](https://github.com/mingsheng13/ip-input-ftxui )
2021-12-23 22:12:22 +08:00
2019-01-28 00:11:43 +08:00
## Project using FTXUI
2020-04-20 03:46:37 +08:00
Feel free to add your projects here:
2022-01-10 05:00:45 +08:00
- [json-tui ](https://github.com/ArthurSonzogni/json-tui )
2021-05-23 18:52:59 +08:00
- [git-tui ](https://github.com/ArthurSonzogni/git-tui )
2024-06-09 21:50:01 +08:00
- [ostree-tui ](https://github.com/AP-Sensing/ostree-tui )
2021-05-02 21:45:52 +08:00
- [rgb-tui ](https://github.com/ArthurSonzogni/rgb-tui )
2020-05-30 04:51:34 +08:00
- [chrome-log-beautifier ](https://github.com/ArthurSonzogni/chrome-log-beautifier )
2020-05-15 01:12:35 +08:00
- [x86-64 CPU Architecture Simulation ](https://github.com/AnisBdz/CPU )
2020-08-13 04:18:59 +08:00
- [ltuiny ](https://github.com/adrianoviana87/ltuiny )
2020-04-20 03:46:37 +08:00
- [i3-termdialogs ](https://github.com/mibli/i3-termdialogs )
2020-05-01 23:12:39 +08:00
- [Just-Fast ](https://github.com/GiuseppeCesarano/just-fast )
2020-08-12 22:23:39 +08:00
- [simpPRU ](https://github.com/VedantParanjape/simpPRU )
2020-09-06 19:53:33 +08:00
- [Pigeon ROS TUI ](https://github.com/PigeonSensei/Pigeon_ros_tui )
2021-02-15 02:39:22 +08:00
- [hastur ](https://github.com/robinlinden/hastur )
- [CryptoCalculator ](https://github.com/brevis/CryptoCalculator )
2021-04-23 20:09:12 +08:00
- [todoman ](https://github.com/aaleino/todoman )
2021-09-21 15:54:58 +08:00
- [TimeAccumulator ](https://github.com/asari555/TimeAccumulator )
2021-11-10 20:06:15 +08:00
- [vantage ](https://github.com/gokulmaxi/vantage )
2021-12-07 03:18:09 +08:00
- [tabdeeli ](https://github.com/typon/tabdeeli )
2022-02-04 20:18:34 +08:00
- [tiles ](https://github.com/tusharpm/tiles )
2022-02-24 21:38:28 +08:00
- [cachyos-cli-installer ](https://github.com/cachyos/new-cli-installer )
2022-06-06 00:07:20 +08:00
- [beagle-config ](https://github.com/SAtacker/beagle-config )
2022-06-15 03:47:39 +08:00
- [turing_cmd ](https://github.com/DanArmor/turing_cmd )
2022-07-09 22:16:05 +08:00
- [StartUp ](https://github.com/StubbornVegeta/StartUp )
2022-10-10 06:10:38 +08:00
- [eCAL monitor ](https://github.com/eclipse-ecal/ecal )
2023-06-10 17:35:19 +08:00
- [Path Finder ](https://github.com/Ruebled/Path_Finder )
2023-09-19 02:10:48 +08:00
- [rw-tui ](https://github.com/LeeKyuHyuk/rw-tui )
- [resource-monitor ](https://github.com/catalincd/resource-monitor )
2023-09-19 02:09:45 +08:00
- [ftxuiFileReader ](https://github.com/J0sephDavis/ftxuiFileReader )
2023-09-03 22:21:13 +08:00
- [ftxui_CPUMeter ](https://github.com/tzzzzzzzx/ftxui_CPUMeter )
2024-01-08 14:25:38 +08:00
- [Captain's log ](https://github.com/nikoladucak/caps-log )
2024-01-08 23:48:42 +08:00
- [FTowerX ](https://github.com/MhmRhm/FTowerX )
2024-06-09 21:44:12 +08:00
- [Caravan ](https://github.com/r3w0p/caravan )
2024-07-25 17:07:38 +08:00
- [Step-Writer ](https://github.com/BrianAnakPintar/step-writer )
2024-08-04 17:05:59 +08:00
- [XJ music ](https://github.com/xjmusic/xjmusic )
2024-08-15 22:08:32 +08:00
- [UDP chat ](https://github.com/Sergeydigl3/udp-chat-tui )
2019-01-28 00:11:43 +08:00
2023-06-05 00:04:50 +08:00
### [cpp-best-practices/game_jam](https://github.com/cpp-best-practices/game_jam)
2022-04-13 05:52:35 +08:00
Several games using the FTXUI have been made during the Game Jam:
2022-07-15 23:59:13 +08:00
- [TermBreaker ](https://github.com/ArthurSonzogni/termBreaker ) [**[Play web version]**](https://arthursonzogni.com/TermBreaker/)
2022-04-13 05:52:35 +08:00
- [Minesweeper Marathon ](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/minesweeper_marathon.md ) [**[Play web version]**](https://barlasgarden.com/minesweeper/index.html)
- [Grand Rounds ](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/grandrounds.md )
- [LightsRound ](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/LightsRound.v.0.1.0.md )
- [DanteO ](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/danteo.md )
- [Sumo ](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/sumo.md )
- [Drag Me aROUND ](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/drag_me_around.md )
2022-06-27 04:52:32 +08:00
- [DisarmSelfDestruct ](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/DisarmSelfDestruct.md )
2022-04-13 05:52:35 +08:00
- [TheWorld ](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/TheWorld.md )
- [smoothlife ](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/smoothlife.md )
- [Consu ](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/consu.md )
2024-04-22 14:48:32 +08:00
## Utilization
2021-06-14 05:00:56 +08:00
2024-04-22 14:48:32 +08:00
It is **highly** recommended to use CMake FetchContent to depend on FTXUI so you may specify which commit you would like to depend on.
2022-02-21 17:27:53 +08:00
```cmake
include(FetchContent)
FetchContent_Declare(ftxui
GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
2023-10-12 23:27:18 +08:00
GIT_TAG v5.0.0
2022-02-21 17:27:53 +08:00
)
FetchContent_GetProperties(ftxui)
if(NOT ftxui_POPULATED)
FetchContent_Populate(ftxui)
add_subdirectory(${ftxui_SOURCE_DIR} ${ftxui_BINARY_DIR} EXCLUDE_FROM_ALL)
endif()
```
2021-06-14 05:00:56 +08:00
2024-04-22 14:48:32 +08:00
If you don't, FTXUI may be used from the following packages:
2023-01-12 17:16:00 +08:00
- [vcpkg ](https://vcpkgx.com/details.html?package=ftxui )
2021-06-14 05:00:56 +08:00
- [Arch Linux PKGBUILD ](https://aur.archlinux.org/packages/ftxui-git/ ).
2022-02-21 17:25:05 +08:00
- [conan.io ](https://conan.io/center/ftxui )
2023-04-03 19:49:46 +08:00
- [openSUSE ](https://build.opensuse.org/package/show/devel:libraries:c_c++/ftxui )
2024-04-22 14:48:32 +08:00
-
2023-04-04 05:07:56 +08:00
[](https://repology.org/project/ftxui/versions)
2024-04-22 14:48:32 +08:00
If you choose to build and link FTXUI yourself, `ftxui-component` must be first in the linking order relative to the other FTXUI libraries, i.e.
```bash
g++ . . . -lftxui-component -lftxui-dom -lftxui-screen . . .
```
2022-02-05 22:06:23 +08:00
## Contributors
< a href = "https://github.com/ArthurSonzogni/FTXUI/graphs/contributors" >
< img src = "https://contrib.rocks/image?repo=ArthurSonzogni/FTXUI" / >
< / a >
