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
563 stars 85 forks source link

Straight line segments #6

Closed TheodoreGalanos closed 4 years ago

TheodoreGalanos commented 4 years ago

Hi I was wondering if you can point me to where I can adjust code to only produce straight line segments.

I'm currently going through the repo myself, but I'd appreciate any advice on this!

Best, Theodore.

andfanilo commented 4 years ago

Hey @TheodoreGalanos ,

I was actually reading through the Fabric.js documentation on freedrawing straight lines and boxes, so far no sucess :disappointed: ... looks like the easier way is to add then manipulate a line/box

I'll keep digging and keep you updated

BR, Fanilo

TheodoreGalanos commented 4 years ago

That's excellent! Thanks for looking into that, hope for success. I apologize I can't help here, I'm completely out of my water when it comes to js.

Great work btw, really nice and quick way of prototyping drawing apps!

Best, Theodore.

andfanilo commented 4 years ago

Out of curiosity, what would be your use case :) ? Will help me look for other solutions and eventually change the underlying JS library, we never know...

TheodoreGalanos commented 4 years ago

I train surrogate models that predict indoor building performance for various performance metrics. I've made a quick streamlit app with your canvas for a user to sketch a layout and infer performance in real time using the pretrained model. It's obviously sensitive to input data (it was trained on digital layouts and not sketches).

If that doesn't work, I'll just train a model to transform sketches to digital layouts (have both of those). This is an old version of this idea: https://github.com/TheodoreGalanos/DaylightGAN

andfanilo commented 4 years ago

Putting this here for my future reference : https://stackoverflow.com/questions/9417603/fabric-js-free-draw-a-rectangle

andfanilo commented 4 years ago

@TheodoreGalanos Just released v0.2.0, try it with pip install streamlit-drawable-canvas, with the app.py script from the project, and tell me if you experience any bugs!

Thanks to you I tried to rearchitecture so it's easy to add other elements like box, polyline, straight horizontal/vertical lines ... hope to add those soon

BTW back to your digital layout example...would you rather have a JSON output of the objects on the canvas ? Seems to me it would look like: 

{"objects":[{"type":"rect","originX":"left","originY":"top","left":50,"top":50,"width":30,"height":30,"fill":"green","stroke":"black","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0}],"background":""}

So you'll have exact coordinates for drawed objects rather than a rasterized image data. It's something I have in my mind because I would like to save/load the state of the canvas in the future, see #7

Fanilo

TheodoreGalanos commented 4 years ago

Wow that's great @andfanilo ! Thank you so much for the consideration. Yes a JSON output would be great, especially considering that I could potentially directly output models that can be modelled and simulated in 3d using those json files.

Going to be downloading the new library now, apologies was in a mini vacation. Will let you know.

TheodoreGalanos commented 4 years ago

It looks great thanks! The shapes will really help and the transformation option is really nice. I don't suppose we can have snapping can we? or maybe a polyline option so that every click creates a kink in a polyline?

p.s. I'm aware my wants are becoming more and more a CAD software lol, my apologies I'm not really familiar with how many of this stuff is available in JS.

andfanilo commented 4 years ago

I've opened new issues for polyline and snapping in #10 and #11 , we will see if JS makes it easy to do this, or if another JS library would do a better job (I've been looking at the paper.js doc recently to see if it better fitted your needs)

BTW I have added JSON output of the drawn objects, it will be in the next release probably next week ;)

I'll be closing this issue, feel free to comment on the others! Thanks for your feedback and contribution too :smile:

Fanilo