Code Monkey home page Code Monkey logo

Comments (6)

ArthurSonzogni avatar ArthurSonzogni commented on June 2, 2024 1

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.

SPYFF avatar SPYFF commented on June 2, 2024 1

@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.

ArthurSonzogni avatar ArthurSonzogni commented on June 2, 2024

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.

See this example source

I would use the Container::Stacked({...}) with:

  • A Renderer displaying the canvas you are talking about for the edges.
  • A component that would behave like a Window to display the edge

from ftxui.

SPYFF avatar SPYFF commented on June 2, 2024

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.

SPYFF avatar SPYFF commented on June 2, 2024

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.

ArthurSonzogni avatar ArthurSonzogni commented on June 2, 2024

Wow! That's really cool!

from ftxui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.