Avaiga / taipy

Turns Data and AI algorithms into production-ready web applications in no time.
https://www.taipy.io
Apache License 2.0
9.75k stars 692 forks source link

New visual element: canvas from library taipy.gui #733

Open Makuls opened 5 months ago

Makuls commented 5 months ago

Description There is an issue in the taipy.gui library that we cannot import canvas directly from the library mentioned. Instead we have to forecully install the canvas using ! pip install canvas code. After successfully installation of canvas, if we run the code to import canvas later in the program then still it shows error like before of mportError: cannot import name 'Canvas' from 'taipy.gui' (/usr/local/lib/python3.10/dist-packages/taipy/gui/init.py)

How to reproduce

  1. from taipy.gui import Canvas
  2. !pip install Canvas
  3. again using from taipy.gui import Canvas

Expected behavior The expected outcome should be that canvas is imported from taipy.gui library without showing import error even after pip install of canvas earlier.

Screenshots Attached with this report - Screenshot 2024-01-20 234414 Screenshot 2024-01-20 234451 Screenshot 2024-01-20 234526 Screenshot 2024-01-20 234556

Runtime environment Please specify relevant indications.

FlorianJacta commented 5 months ago

HI @Makuls, what is Canvas and why do you want to import it?

Makuls commented 5 months ago

HI @Makuls, what is Canvas and why do you want to import it? Hello Sir The Canvas class in Taipy Gui is used to create a custom drawing area where you can draw shapes, text, and images using various drawing methods. It is similar to the HTML canvas element, which allows for dynamic graphics and animations.

In Taipy Gui i was using the canvas class to create custom visualizations, graphics, or interactive elements that are not available as pre-built components. We can also use the drawing methods provided by the Canvas class to create custom graphics and handle user interactions

FlorianJacta commented 5 months ago

Is this what you want to do?

Would you happen to have a use case? What about using the part block to integrate third-party components? See tips.

Makuls commented 5 months ago

Is this what you want to do?

Would you happen to have a use case? What about using the part block to integrate third-party components? See tips.

Canvas is not a third party component instead it is a part of library from python itself. I will show you an example of how i wanted to use this using taipy:

from taipy.gui import Canvas

with Canvas(value="My Canvas") as canvas: canvas.draw_rectangle(x=10, y=10, width=50, height=50, fill_color="red") canvas.draw_text(x=30, y=40, text="Hello, Taipy!", fill_color="white")

In this example, a new Canvas object is created with the value "My Canvas". Then, the draw_rectangle and draw_text methods are used to draw a red rectangle and white text on the canvas.

I know that Taipy Library also have many pre-built components for common use cases. However, canvas can be very useful for creating custom visualizations or interactive elements.

FlorianJacta commented 5 months ago

So, would you want to have a new feature like this in Taipy? Is this a bit what you have in mind? (https://www.tutorialspoint.com/python/tk_canvas.htm)

Makuls commented 5 months ago

So, would you want to have a new feature like this in Taipy? Is this a bit what you have in mind? (https://www.tutorialspoint.com/python/tk_canvas.htm)

yes sir it would be really great to have this in taipy gui because this is very useful for creating custom visualizations or interactive elements along with markdown and html tools. While working i thought it was already present in taipy.gui library but it was not there.

alubell commented 5 months ago

This is a much needed addition as a native control since the drawing could be done with results from other variables on the page. For Makul’s rectangle example, the rectangle dimensions could be taken from the value of sliders, etc. it would be inconvenient with unnecessary data transfer to have to call another app with all the variables only to generate the image and send it back for inclusion within the taipy app.