Comments (6)
Awesome! I love how it renders. This triggers in me many nice project ideas.
Keep us updated what you will achieve from this!
from ftxui.
@ArthurSonzogni Sure! I'm thinking about an interactive graph visualizer, something like that:
Screencast.from.2024-02-10.14-06-26.webm
Sure, the arrowheads are off, and there are other flaws (all because I forgot everything I learned in trigonometry since school), however your lib doing well rendering the stuff! The layout initially created by graphviz dot, then I parse it to a struct which will be feed to the canvas and that struct updated interactively.
from ftxui.
Hello @SPYFF !
I created something similar in the past. See:
https://arthursonzogni.com/Diagon/#GraphDAG
In your case, I am guessing you are going to make the "node" draggable. I think options 2 is going to work.
I would use the Container::Stacked({...})
with:
- A
Renderer
displaying thecanvas
you are talking about for the edges. - A component that would behave like a
Window
to display the edge
from ftxui.
Thanks for the helpful reply!
Yes, I'm aware of your Diagon project, and the DAG code is the best currently publicly available on the web (I've tried similar projects, like graph-easy and vijual, but they produce inferior results for large graphs).
However, its optimized for compact, static output, which is great for many cases, but I compared it to graphviz output (its unfair, I know) and that output would be better for my interactive usecase. So my plan is to convert graphviz output directly to text.
Thanks for the example and the recommendation, I'll go ahead with it.
from ftxui.
With your help I managed to do it:
Screencast.from.2024-01-05.18-18-54.webm
In case someone want to reproduce it, here is the snippet:
#include <ftxui/component/component.hpp>
#include <ftxui/component/screen_interactive.hpp>
#include <ftxui/component/component_base.hpp>
#include <ftxui/dom/elements.hpp>
#include <ftxui/dom/node.hpp>
#include <ftxui/dom/canvas.hpp>
#include <iterator>
#include <string>
using namespace ftxui;
int main() {
auto node1 = Renderer([] { return text("node1");});
auto node2 = Renderer([] { return text("node2");});
bool resize = false;
int win1h = 3;
int win1w = std::size(std::string("node1")) + 2;
int win1x = 10, win1y = 5;
int win2h = 3;
int win2w = std::size(std::string("node2")) + 2;
int win2x = 30, win2y = 5;
auto win1 = Window({
.inner = node1,
.left = &win1x,
.top = &win1y,
.width = win1w,
.height = win1h,
.resize_left = resize, .resize_right = resize, .resize_top = resize, .resize_down = resize,
});
auto win2 = Window({
.inner = node2,
.left = &win2x,
.top = &win2y,
.width = win2w,
.height = win2h,
.resize_left = resize, .resize_right = resize, .resize_top = resize, .resize_down = resize,
});
auto edges = Renderer([&] {
auto c = Canvas(400,400);
int from_x = (win1x + win1w / 2) * 2;
int from_y = (win1y + 3 / 2) * 4;
int to_x = (win2x + win2w / 2) * 2;
int to_y = (win2y + 3 / 2) * 4;
c.DrawPointLine(from_x, from_y, to_x, to_y, Color::Red);
return canvas(std::move(c));
});
auto window_container = Container::Stacked({
win1,
win2,
edges,
});
auto screen = ScreenInteractive::Fullscreen();
screen.Loop(window_container);
return EXIT_SUCCESS;
}
Thanks again!
from ftxui.
Wow! That's really cool!
from ftxui.
Related Issues (20)
- how to get a mdal dialog window (Stacked)? HOT 2
- the decoration of stacked window not work correctly HOT 1
- Mouse input does not work correctly on urxvt: Moving the cursor always claims the mouse button is clicked. HOT 4
- Cursor state (blinking, block, underline, ...) is not reset after exiting a program HOT 2
- No definition for `Component Checkbox(CheckboxOption options)` method HOT 4
- Checkbox does not `TakeFocus()` when clicked HOT 3
- ftxui_set_options.cmake: unable to compile on windows. HOT 2
- ButtonBase::OnClick ordering HOT 1
- Should Table::SelectRectangle() wrap in the way it does? HOT 1
- input.cpp field length. HOT 2
- Console doesn't clear previous renderer text after new renderer HOT 3
- Canvas background
- Introductory example fails to build HOT 2
- Custom event question HOT 2
- Add example to use system ftxui HOT 3
- "Bug or feature" HOT 3
- fatal error: string_view: No such file or directory HOT 4
- How to check if current terminal supports TUI? HOT 2
- include could not find requested file: .../lib/ftxui/cmake/ftxui-targets.cmake HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ftxui.