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
544 stars 83 forks source link

Feature request: scatter points drawing mode #68

Closed arnauddhaene closed 2 years ago

arnauddhaene commented 2 years ago

Would it be possible to add a "Point" drawing mode? I am using circles and extracting the center coordinates for now but when just clicking they have a radius of 3 (width and height of 6 pixels).

What would be ideal for my use-case is to add just points (x,y-coordinates) when clicking in order to make the user experience more consistent with the task at hand.

Thanks in advance for your consideration!

arnauddhaene commented 2 years ago

Hey there @andfanilo,

I tried looking into the code myself and found a (hacky) fix by duplicating circle.ts into point.ts, commenting the code related to stretching a circle in the onMouseMove method, and adding the class to tools in index.ts. This works (relatively) well for my use case, but I'm sure would not be accepted in the form of a PR.

I tried looking into fabric.Point, but it does not extend fabric.Object as the other tools do. For that reason, it seems it is not as easy as simply adding a fabric.Point instance to the canvas (as the add method of the canvas class expects a fabric.Object. Additionally, I don't know exactly how I would handle showing the point (using different markers, marker size, color).

Any thoughts or suggestions? If you were to accept a PR related to the mentioned feature, what would the implementation look like for you?

andfanilo commented 2 years ago

Hi @arnauddhaene !

Sorry I missed your notification in the first place :/

I personally don't see the problem with your way of doing, but another way I could see is instead of drawing a Canvas circle, instead draw a png/svg of a dot or pointer or small triangle with a fixed size. I think, but not sure, the png won't be returned back to Python but the center coordinates would.

If you have time to compare both implementations, I'm happy to merge any of them, as the use case seems valid :)

Have a nice day, Fanilo

andfanilo commented 2 years ago

Just merged and quickly played with the feature, THIS IS SO COOL I love it, it seems to work very well!

I'll build a release somewhere this weekend and send it to the world next week. Thank you so much for your time on this new feature.

I also may plan a small video on Twitter/Linkedin to talk about the feature and quote your name in it if you don't mind

Have a nice weekend, Fanilo

arnauddhaene commented 2 years ago

Sounds great. Happy to help!

No problem to quote me, I would appreciate it.

Have nice weekend!