DioxusLabs / dioxus

Fullstack app framework for web, desktop, mobile, and more.
https://dioxuslabs.com
Apache License 2.0
20.07k stars 766 forks source link

Terminal Canvas #1103

Closed pms1969 closed 1 month ago

pms1969 commented 1 year ago

Specific Demand

I saw a recent post on Reddit and posted a comment and in response was asked to open an issue. So here it is.

It's very impressive that Dioxus can generate code that works in the Terminal as well as the other, more fully featured, targets. I was wondering how I might leverage that for a project I'm working on, and my mind went straight away to a Canvas, since I want to render some pipeline looking stuff; so basically just boxes and lines, but it would be handy to render other geometric shapes as well.

So my request I guess is that this becomes a discussion on how to implement a Canvas for Dioxus that can target the terminal equally as well as the web.

Implement Suggestion

I'm no terminal savant, for me it's a tool, so I have no specific recommendations, but what springs to mind is interactive SVG's?

FionaG26 commented 1 year ago

Start by defining an abstract API for the Canvas functionality you want to support. Implement a Terminal Renderer that can take the commands from the Canvas API and output them in a format suitable for the terminal. Develop a renderer that can take the same Canvas API commands and output them to a web-based canvas. Create a mechanism to select the target platform (terminal or web) for rendering.

ealmloff commented 1 year ago

The canvas interface could be exposed as part of a element-specific extension to the onmounted event.

The onmounted event could expose an element with a common trait (like ElementExt) that has information about size, etc. and an element specific trait (for the Canvas: CanvasExt).

For the canvas specifically, we could use a library like: https://github.com/linebender/piet as the drawing API. This crate is an abstract canvas API like @FionaG26 described above. The terminal could use TUI's Canvas to draw these commands.

FionaG26 commented 1 year ago

The canvas interface is not typically exposed as part of an element-specific extension to the onmounted event. Instead, the canvas element is accessed and manipulated using JavaScript's Canvas API, while the piet library and TUI's Canvas are separate entities in the Rust ecosystem for creating graphics and drawing in terminal interfaces.

jkelleyrtp commented 1 month ago

TUI has been put on ice as we re-architect around http://github.com/dioxusLabs/blitz