Drawable canvas

Custom Components
63

Hi @yadu_krishna

JSON update while using transform · Issue #36 · andfanilo/streamlit-drawable-canvas · GitHub The scale of the transform is stored in a separate scaleX and ˋscaleY` parameter, this is how the underlying library manipulâtes it’s objects and transformations :grin:

Happy drawing :writing_hand:
Fanilo

65

Hi, big fan of your library. I’m curious if there any ability for image scaling and image relation as of version 0.9.1?

1 Like
66

HI, I am loving the APP. Is there a way to clear the canvas of all objects through a method instead of showing the “bin” button of the toolbar? In my app, the user uploads an image, uses the drawable canvas to place some data points and then some post processing happens and creates a new image for the user. If the process did not provide the desired results, I’d like to have a button that is essentially a “Start Over” button without having to explain to my users “first click start over, then go back to the image and click the little trashcan, etc” .

1 Like
67

Hello @andfanilo , does drawable-canvas accepts values from JSON format for drawing purposes?

1 Like
68

Hi,

I dont’ do any image processing aside from resizing the image to fit the canvas dimensions, so the scaling is basically up to you in preprocessing.
I’m not sure I understood the image relation part?

The initial_state argument takes a JSON input representing the canvas content. I generally save the json output from the canvas as an object that I can reinject as JSON (like this one: streamlit-drawable-canvas-demo/saved_state.json at master · andfanilo/streamlit-drawable-canvas-demo (github.com))

Have a nice day
Fanilo

69

Hi Taylor!

If you change the key argument of the canvas, it remounts (so it destroys all content). If you keep the same background image it should basically destroy all content and keep the image.
So you could for example store the key argument as an id in session state and on an st.button("Reset", on_click=change_id), change the id in session_state in the change_id method to a new random one and reload this state in key, it should remount the canvas on button click.

If you manage to do it correctly, feel free to share as a temporary solution :slight_smile:

Have a nice day,
Fanilo

70

Hi,

The image relation is simply meant that I want to label and group together annotated images corresponding to their ROIs

1 Like
71

Hello, I’m new to this drawable canvas. I want to ask, is there a way to save the drawable canvas with its background? So, after I draw something with a background I want to save it with the background also.

1 Like
72

Thank you for the suggestion, I will have to try that. I moved on to another task now, and have run into another problem.

I am accessing the canvas object data from st.session_state[‘canvas_key’][‘raw’][‘objects’] and have noticed that the rectangle tool does not seem to update the height/width when drawing_mode=‘transform’.
The ‘top’ and ‘left’ data change when i move the box around, or when I change the scale using the top or left line segments, but ‘width’ and ‘height’ stay constant.

1 Like
73

Hi if I’m not mistaken, when transforming the drawable canvas objects only the scaling change. Correct me if I’m wrong since I’m also a beginner to this library

1 Like
74

Hi @andfanilo , I have encountered an issue where the canvas keep reloading when I either use the drawing tool to label something or changing the drawing mode (using selectbox). I have recorded them both using screencast but the upload limit is only 4mb

I have some clue about the bug; It is present when I set a selectbox value to change the drawing mode

1 Like
75

I too am having a canvas reloading problem.
When I added a counter that tracks the number of reruns and prints out some session states, I see that when the canvas is initialized, the app doesn’t see the key in the session_state until second re-run, but then it also reruns the app 3 times.
Locally, this seems to be fine, my screen just kind of blinks and then recovers, but when deployed to GCP App Engine, it reverts back to as if the app is freshly run.

2 Likes
76

Hello @regan_reinaldo,

There’s currently no way to do, but you could use Pillow or opencv2 to overlay/superimpose your returned drawing over the background image, since you should have both in Python variables

How to overlay / superimpose two images using python and pillow ? (moonbooks.org)

Have a nice day,
Fanilo

77

Hey @Taylor_Hutyra

Because of the nature of the underlying library, the scaling factor of the transform is kept in a separate variable, you can find the solution here: JSON update while using transform · Issue #36 · andfanilo/streamlit-drawable-canvas · GitHub

Happy Streamlitin’!
Fanilo

78

Hey @luqmannur.ai @Taylor_Hutyra

I also recently stumbled on the reloading problem too. Right now it’s something hard to debug though and I’m currently finishing other projects. I’ll come back to you ASAP :confused: can you try downgrading to earlier versions, like 0.7.0 just to see if it still happens there?

Have a nice day!
Fanilo

1 Like
79

Hi sorry for bothering you on your busy days. I have tried downgrade to several different versions:
component_error
this is what I got when I downgrade to 0.7.

When I use the 0.8 version I got the error pointing to the canvas initialization (on streamlit_drawable_canvas_init_.py", line 43 and line159).

As for 0.9, the reloading error still persist with no same pattern of it occurring. Also thanks for your suggestion, I hope this can help point out the issue. Also is there a way I could tinker with the init file to figure out what causes this issue?

80

@andfanilo
For some reason I’m having trouble with the background-image option, it works fine in my local development but when I deploy the image passed into the file uploader doesn’t print, and it returns an error:

Traceback (most recent call last):

  File "/home/appuser/venv/lib/python3.9/site-packages/streamlit/components/v1/components.py", line 321, in get

    with open(abspath, "rb") as file:

NotADirectoryError: [Errno 20] Not a directory: '/home/appuser/venv/lib/python3.9/site-packages/streamlit_drawable_canvas/frontend/build/index.html/media/c5e4e486d16a1af3e861cf714b6efa32edb661cd0696f4b5b23e2bdc.png'

This is a portion of my code:

uploaded_file = st.file_uploader("Printer Quality Report Image (jpg)", type="jpg")
if uploaded_file is not None:
    image = Image.open(uploaded_file)

if image is not None:
        # Create a canvas component
        canvas_result = st_canvas(
            fill_color="rgba(0, 0, 0, .1)",  # Fixed fill color with some opacity
            stroke_width=stroke_width,
            stroke_color=stroke_color,
            background_image=Image.open(image) if image else None,
            update_streamlit=realtime_update,
            height= int(image.size[1] * 1200 / image.size[0]),
            width= 1200,
            drawing_mode=drawing_mode,
            point_display_radius= 0,
            key="canvas",
        )

Interestingly enough, I tried uploading a background in the Demo and it didn’t work for me, which makes me wonder if it’s my connection or something blocking it?
https://share.streamlit.io/andfanilo/streamlit-drawable-canvas-demo/app.py

Some help would be appreciated, thanks.

1 Like
82

I too have had a problem with the drawable canvas background images, specifically when adding the canvas to a multi-page app using the native implementation. The background image remains blank after I add the uploaded file. However, if I run the app OUTSIDE of a multi-page app, it works just fine.

83

Hello!

This should be resolved with the latest release 0.9.2, can you upgrade and have a try again?

Have a nice day,
Fanilo

84

Hello Taylor!

Are you able to post a smaller reproducible snippet? It may be the paths in multipage apps change, so the image may not be located in the correct folder :thinking:

Have a nice day,
Fanilo