Clear drawing

[bryanongwx]

Hi there, great work btw! Just wanted to ask whether its possible to clear a drawing without refreshing the entire page. Thanks!

[andfanilo]

Hey @bryanongwx ! Glad to hear :)

For now there's no workaround without rerunning the Streamlit app (for example by changing the key parameter). What interaction would you use with the canvas to ask for a clear drawing ?

Fanilo

[bryanongwx]

Thanks for the prompt response Fanilo!

I'm trying to combine the canvas with a machine learning model, so that it can receive multiple sketch inputs from the drawable canvas. In order to do so, I was hoping that the "clear" function on the canvas could allow for the user to make multiple sketches in succession without overlapping input from the previous sketch and without prior sketch inputs lost through refreshing.

One good example might be the Sketch-RNN project by Magenta (https://magenta.tensorflow.org/assets/sketch_rnn_demo/index.html) where there's a "clear" option on the top of the page.

Bryan

[Yangxiaojun1230]

@andfanilo Same requirement, What I am doing is to integrate with object detection model training. I used background to show image and allow user to draw bounding box on it. So when the image changed , I need to clean previous drawings. Next step I need to draw bbox on the canvas via input parameters.

[andfanilo]

Thanks for your input It's coming, it's taking longer than usual because I'm kinda restructuring the whole codebase for this and other stuff keeps cropping

[Yangxiaojun1230]

@andfanilo Great job! It saved me much time. Additional question, do you know how to reduce the time of data transmission. Each time when I set update_streamlit in st_canvas(), it took round 2s to update the web. I tracked the process when update it would setup canvas twice. This could improve the experience for users.

[andfanilo]

@Yangxiaojun1230 would you believe it if I told you the rearchitecturing also solves the "send data to Streamlit twice" issue :smile: ? Also I should be able to debounce now, which prevents sending data too frequently (in case someone is drawing too many objects too fast) which should also improve user experience. I'm aiming for a end of next week release, but feel free to play with the develop branch.

[Yangxiaojun1230]

Hi @andfanilo actually I used develop version which was released 12 hours ago. And I used a button to update the data to streamlit only after all drawing finished. When the button triggered, the web fresh twice that means st_canvas() run twice, so the time cost is over 1s. As you mentioned, this issue was fixed by the develop version, is it right? Finally I found that I use a button for setting update_streamlit, at each time the button pressed, it will run twice.

[andfanilo]

Ah I misunderstood then, I was talking about something else.

For the update_streamlit button, when you press the button it goes from None to True (1 refresh), so the Drawable Canvas updates to send back data, BUT to actually send the data the component force-refreshes an update which makes for the 2nd refresh and the button goes back to None to deactivate the realtime update.

When you call Streamlit.setComponentValue(new_value), that new value is sent to Streamlit, which then re-executes the Python script from top to bottom. When the script is re-executed, the call to my_component(...) will return the new value.

The 2nd refresh part is how Streamlit works internally so I can't actually do anything about it :/ that's also actually why I removed the button from the README in the first place.

[Yangxiaojun1230]

Yes, it's internal of streamlit. So I used a button to update at final that could avoid to update at each drawing. I also want to reduce the time of function st_canvas(). Now it cost 0.35s each time, I want to know what process cost most time. Since I already use cache to save the open image. Do you have any idea?

[andfanilo]

@bryanongwx @Yangxiaojun1230 https://share.streamlit.io/andfanilo/streamlit-drawable-canvas/master/examples%2Fapp.py if you have time to test