How to scale the floor plan ?

[CanKavaloglu]

I have some floor plans that belong to real properties. What I want to do is scale the floor plan according to the real floor plan so that the final model would be consistent with the property size.

To this end, I could not find where the length of the walls (in the floor plan) are is computed. I suppose it is a simple subtraction between two 2d vectors. When subtract the "start" and "end" corner points in newWall method, it gives me the non-rounded lengths of the walls. However, I could not find where this very same computation is done in the code (whether it is in Walls or Corners) ?

Please check the image given below, it is an example of the case that I tried to describe above.

Here, as you can see at the right bottom corner there is the scale of the floor plan which indicates how long are the walls of the property in the floor plan.

So my idea is to put this image as a background of "floorplanner" div. Then, I will basically draw on the scale line (at the bottom) starting from 0 to 5m. Then I will consider this line (wall) as 5 meters. Finally, I will draw the walls (going over the background image like a carbon paper). What I expect is to have the model (3d) in the proper scale of the property.

Any suggestions how can I scale the distances between corners or/and walls ?

Thanks in advance.

[aalavandhaann]

You have different units on the top right that says "open controls". Here you can change to different units. To do a carbon copy, don't you think it's wise to convert the existing plans with imaging or vision techniques? Even then your idea of carbon copy is a good feature to add. So the idea will be that a user should upload his own floorplan and start drawing on top of it. This is difficult to be demonstrated on the GitHub hosted url but let me see if this can be done on my private hosting server.

Regards,

0K

[aalavandhaann]

Or perhaps the image of the floorplan could come from a user supplied url. Do you think that would be a good idea?

Regards,

0K

[CanKavaloglu]

You are right, that is my intention for the next step. For now, in my implementation, there is an upload form for the user to upload the floor plan as a simple image then this image is set as a background just as a carbon copy. As you can imagine, the images can be in different scales therefore I need the user to first define the scale (by drawing a simple line on the bottom right scale line) and enter the value of meters. In the case above, the user will draw a line and enter (into an input) 5 to indicate this line corresponds to 5 meters. Then I will be able to interpret the following lines (the real lines belonging to the floor plan) in a proper way since I have the scale now.

Here in the case that I explained above, my intention is not to just simply change the units of the measurement you know ? Just the opposite, I want to keep the meters but I want user to introduce the scaling first, then draw the floor plan on the carbon copy properly.

Check the image below to understand better the situation.

As you can see, I moved the floor plan to the right for you to see it better. The floor plan that the user is drawing comes on the carbon copy image. However, the issue here, lets say that the "top left" wall in the editor that is drawn by me is 3.5 meters and lets say that it exactly matches the size of the top left wall (top wall of the room that is marked as 'H' ) of the carbon copy. But in this case, if you measure the top left wall of the carbon copy by hand (rough sketch), you will see that it will correspond to like 2.5 meters.

I do not know if I managed to explain it in a better way this time.

[aalavandhaann]

I completely understand this. It's only that I am wondering how to add this functionality from an user point of view. Once you apply the image it will be having a dimension according to the floorplan framework. That can be either too small or too big. So using the idea of bottom right scaling line reference is pretty smart. But I am afraid if you let the user click on a pixel and draw a line ending at another pixel it can only be approximately scaled but not accurately scaled. Fine, I will try to implement a crude version first. We need to begin somewhere first. But this idea of yours is really valuable. Thanks for that.

If you don't mind can you please share your implementation url? It would be a lot motivating to see this being used elsewhere. But no obligations so don't worry.

Regards,

0K

[CanKavaloglu]

Thank you for your compliment. I see your point, but it does not strictly have to be precise for the first version of this idea you know ? This is just a beginning of it. For the url of my implementation, I am currently working on local but I will gladly share it here when the things are a bit tidier. So lets keep in touch on this issue !

Lastly, in which part of the code the calculation between two corners of the wall is done and the distance is computed. Also, where is this distance attached to the canvas ?

Cheers !

[aalavandhaann]

The values of pixel per centimeters and vice versa for the floorplan 2d drawings are in the class Floorplaner inside the floorplan module. [Link] (https://github.com/aalavandhaann/blueprint-js/blob/master/src/scripts/floorplanner/floorplanner.js)

[CanKavaloglu]

Thanks for the answer, I have also just found them. I think there is another problem here now. These pixel per cm values should be dynamic in my case. As we have talked about it before, one floor plan image can be too big or another one can be too small (not in terms of property size but the size of the image) so it means that this 5 meters long scale line in the picture can correspond to 7.6 meters or 2.4 meters depending on the size of the picture that I upload as a background.

So do you have any suggestions which can help with this dynamic computation of pixels per cm ?

Cheers!

[aalavandhaann]

Hey CanKavaloglu,

I have added a carbonsheet class to the floorplanner module. Also the ui has been updated in the demo to reflect this. This can been seen as a suboption in the global options of the dat.gui. supply the url field with an image location. See if this helps you.

Regards,

0K

[CanKavaloglu]

Thanks for the effort ! But I do not see how it really scales to get 5 meters in that example given above. How should I provide the information that this line is 5 meters, so scale accordingly, you know ? If it works based on a different perspective, can you enlighten me on how it is supposed work / what is the behavior sequence of the process after I provide an URL to the Carbon Sheet class ?

Cheers !

[aalavandhaann]

The idea is after you load the image from the url it will have a width and height according to the floorplan units. You can set the real width and real height of the image to match the dimensions of the floorplan. Move x and move y is to move the image on the floor plan canvas. Anchor x and anchor y is the location from which the image will be scaled. Follow the below steps to setup the carbon sheet

• Load an image from the url
• Position the image on the canvas using move x and move y(optional step)
• Draw a floorplan wall on the image that is 5 meters overlapping the image 5 meters. They won't necessarily match in size
• Set the anchor point (red Dot) to the beginning of the 5 metre line using anchor x and anchor y
• Now set the real width and real height to match the image scale to floorpan units

The above process should scale the image according to the floorplan system

Regards,

0K