Drawable canvas

Custom Components
105

Hi Streamlit community,

I could test myself the “strange” behaviour described by @hanisalah while using version 0.9.2 of the “streamlit-drawable-canvas” extension.

a) Drawable-canvas in version 0.9.2 works fine when in a single page app (even with tabs).

b) However when using the “st-pages” extension (version 0.4.1) background image does no longer appear.

c) Uninstalling version 0.9.2 and installing instead version 0.9.0 clears the issue.

I didn’t see any news on issues #113 and #116? Any progress that I might have missed somehow?

PS: for records, I’m using version 1.21.0 of “streamlit” and python version 3.9.13.

106

Hey,
Just released 0.9.3 with the issues you mentioned solved by Yuichiro, could you try again?
I still have an issue with background-image on streamlit-cloud, but it does seem to work on HF Spaces. Will probably revert a functionality about background-image so it works again for every deployment…

Sorry for the late merges, life is a bit busy :confused: thank you for the comprehension

Have a nice day,
Fanilo

107

Hey Fanilo,

Thanks very much for that hint. :ok_hand:
I confirm that streamlit v1.23.1 works seamlessly with streamlit-drawable-canvas v0.9.3 and st-pages v0.4.1. I think that topic (and issues) can be closed now.

PS: We all know how time flows away, so no need to apologize. Isn’t it also the purpose of that forum to fresh up knowledge? :smile:

Nice day to you,
Jase

1 Like
108

Hey Fanilo,
I am having the same issue of keyError even on my local machine (M1 macbook) with streamlit-drawable-canvas v0.9.3 and streamlit v1.23.1. After commenting out the canvas code, everything works fine

109

@andfanilo - Is it possible to reset / delete the drawings on the canvas automatically as part of some button click?

In my app, I’m letting users to submit series of their drawings. Currently the only way is to press the delete icon on the canvas toolbar inorder to reset the canvas before next drawing. Instead I want the users to automatically present a empty canvas whenever they submit their previous drawing.

110

Hello fellas and @andfanilo. Does anyone know is it possible to set the canvas to read only and unlock by another streamlit component (like a toggle button)?

111

Hello, I encountered two issues while using Streamlit Canvas.
The first problem arises when I create a canvas with an “initial_drawing” (rectangle) and choose “drawing_mode = transform.” Everything works well, but unfortunately, the rectangle disappears when double-clicked.

The second issue occurs when I display two canvases on my page, each with “initial_drawing” and “background_image.” Sometimes, when I load the page, the background image fails to appear, and I find the following message in my terminal: “2024-01-31 17:15:18.764 MediaFileHandler: Missing file 37c72c177e97f32f2e5ac9d010ef6341661b73a1726a1dbc35827e25.png.”

Do you have any ideas on how to fix these bugs? Thank you in advance.

112

Thanks @andfanilo, I had the same issue with width, height after transform but its now resolved with this trick!.

113

Hi and thanks for this awesome component!
I am using the canvas to load existing annotations and add new ones. Is there a way to incorporate custom keys into the json_data, like e.g. a label or unique id for an annotation?

Thanks in advance,

cheers,

M

114

Is this dead now with the new streamlit update? Is there a quick hack to make it work again ?

115

In the init.py file change

import streamlit.elements.image as st_image

to

import streamlit.elements.lib.image_utils as st_image

or use my updated version

pip install git+https://github.com/bowespublishing/streamlit-drawable-canvas.git

2 Likes
116

It worked! Amazing, thank you!