Closed TheodoreGalanos closed 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
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.
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...
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
Putting this here for my future reference : https://stackoverflow.com/questions/9417603/fabric-js-free-draw-a-rectangle
@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
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.
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.
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
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.