8000 [Feature Request] Color Gradient support · Issue #23 · nadavrot/layout · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

[Feature Request] Color Gradient support #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up 8000 for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vpochapuis opened this issue Mar 6, 2024 · 4 comments
Open

[Feature Request] Color Gradient support #23

vpochapuis opened this issue Mar 6, 2024 · 4 comments

Comments

@vpochapuis
Copy link

Hello!
Thank you for this crate! I needed a quick way to draw graph in the browser and update it in real-time (I am using Yew as the frontend Framework), and it works great!

It would be nice to have a way to support something similar to the ColorList feature of graphivz:
https://graphviz.org/docs/attr-types/colorList/

In my specific use case I would like to represent the State of Charge of a battery as the fill color gradient. A bit like so as showed in the previous link:
image

If there is already another existing way to do so please let me know!
Thank you for your time

@nadavrot
Copy link
Owner
nadavrot commented Mar 6, 2024

Thanks for the feedback. It should be easy to implement this feature, but I am not sure if I have time in the near future. I am curious about your use of the library. Do you have a demo that I can look at?

@vpochapuis
Copy link
Author

Thanks for the feedback. It should be easy to implement this feature, but I am not sure if I have time in the near future. I am curious about your use of the library. Do you have a demo that I can look at?

Thanks for the quick reply!
I will ask whether its ok or not for me to show the actual usage of it as for now, and in the worst case i will try to make a small POC to reproduce a similar use case using yew and some dummy data.

I also use plotters extensively for things like charts. (on a Canvas backend though).

@vpochapuis
Copy link
Author
vpochapuis commented Mar 7, 2024

I have asked.

So here is 2 little video demo of how it works.

The first one shows an update of a graph generated using the library, based on the location of the cursor on a plotters chart.

2024-03-07_CursorControlSnpashotDiagramInstantView.mp4

The second one shows an automatic update of the generated graph based on the latest data received by the UI State.

2024-03-07_LiveSnpashotDiagramInstantViewUpdate.mp4

The graph is a representation of the prototype battery system that we are developing.

(All visuals are under development).

Notes

  • So in this use case, i wanted to try displaying the remaining capacity of the battery as a background colorList in order to easily/quickly show to the user the state. (as another note: the color of the nodes that are used now are for displaying another kind of information: whether the battery is in use or not).

  • It would also be great if there was a easy way to get a callback on mouse move/enter/leave/click over the nodes. But I am not sure at all how we could implement this as for now. I didn't use SVG in Web applications before. For plotters, as they use a canvas there is a need for a conversion function. But as SVG nodes are independent, it seems at the same time, more interesting (could directly get the node) and more complex (how to have callbacks for individual nodes when they are created in the library or even after parsing the result?). There must be some great solutions out there for this kind of questions, but i didn't have the time to search yet.

@nadavrot
Copy link
Owner
nadavrot commented Mar 7, 2024

Very cool!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants
0