search

andfanilo / streamlit-drawable-canvas

Do you like Quick, Draw? Well what if you could train/predict doodles drawn inside Streamlit? Also draws lines, circles and boxes over background images for annotation.
https://drawable-canvas.streamlit.app/
MIT License
576 stars 88 forks source link

Freedraw brush transparency #64

Closed jonnyevans3210 closed 2 years ago

jonnyevans3210 commented 2 years ago

One more feature request; is it possible to be able to alter the transparency of the brush colour when in freedraw mode? Currently, when I alter the hex value to be semi-transparent, the brush colour is always fully opaque. This feature would be particularly useful when we want to identify two overlapping paths in an image.

andfanilo commented 2 years ago

Hello @jonnyevans3210

You can use the RGBA notation instead:

from streamlit_drawable_canvas import st_canvas

canvas_result = st_canvas(stroke_color="rgba(255, 165, 0, 0.3)")

There's probable some library to convert hex to rgb, then concatenate the alpha value at the end ;) Hope you manage to find it, I hope to read your solution soon!

Have a nice day, Fanilo

jonnyevans3210 commented 2 years ago

Hey Fanilo,

Ah of course it works in RGBA format, thank you! I've got the solution working with this just fine (see below). Only issue we have now is that the brushes overlap each other on separate strokes (see below). Ideally, it would be the same as in Label Studio's mask brush (see brush segmentation tool here), where brush strokes of the same class do not overlap, but those of different classes (in my app marked by the different colours) do overlap. I guess there is nothing in drawable canvas that could let us do that?

image

jonnyevans3210 commented 2 years ago

One more related feature request (sorry if this is the wrong place for this sort of thing, please let me know if it is :) ): Is there any way I could implement an eraser tool? i.e I select a brush which when overlayed with an existing line, removes both (like the rubber tool in MS paint). This is something our users of our tool would really appreciate.

andfanilo commented 2 years ago

I've got the solution working with this just fine

Awesome :)

Only issue we have now is that the brushes overlap each other on separate strokes...I guess there is nothing in drawable canvas that could let us do that?

Waw hmmmm to be honest I'm not sure. If you can find a demo similar to your use case in Fabric.js demo then yes it should be possible. (because we use fabric.js underneath). Maybe by tagging each line...I'll have to think about it.

Label Studio's mask brush

I don't know anything about LabelStudio but I know there's a Streamlit component for it, have you tried it? https://discuss.streamlit.io/t/new-component-streamlit-labelstudio-allows-you-to-embed-the-label-studio-annotation-frontend-into-your-application/9524

Is there any way I could implement an eraser tool?

At first I was going to say no because fabric.js does not allow it...but...apparently it's possible :o ? http://fabricjs.com/erasing Could you create a new issue with the eraser part? Thks!

PS: my bad I misread, you want to implement a brush that removes any line it crosses when mouse is down, I do think that should be possible (and if you know JS you could integrate it too). Deserves an issue in any case ;)

Have a nice day, Fanilo

jonnyevans3210 commented 2 years ago

This is all super useful, thank you for the response! Yes I'll create an issue for the eraser tool, and check out the Label Studio component.

andfanilo commented 2 years ago

Great. I'll close this one if you don't mind!

Cheers, Fanilo