5

I am looking for something like FlDraw, to allow me to draw floor plans or shopping malls, offices, industrial plants and the like.

enter image description here

The catch is that I want the parts of the floorplan to be identifiable. That is, I will embed the floorplan in a webpage and when, the user clicks, I want to be able to identify the store, office, room, etc where they clicked, preferably using AngularJs, but plain old JS will do in a pinch.

In fact, this _might_ be a two part question – one to draw the floor plans, and - the trickier part - a program to split the image into segments (imagine taking a map of the USA and delineating the states) in such a way that (Angular) JS can determine when one is clicked.

I prefer a Windows app, but am also open to Linux.

[Update] I require SVG, with each room delineated by a separate SVG path

[Update++] I only want 2D, not 3D, and I only want to draw walls, doors, stairs & the like. What I do not want are lots of options for sofas, filling cabinets, potted plants & the like. This is for shopping malls & industrial plants. I suppose I don’t object of there are some icons toilets, emergency exists, but I can live without those if I have to.

Black & white is just fine. I can add colo(u)r later, in the HTML, if I want it.

The most important thing is that each room is a separate SVG path, so two adjoin rooms really need to two touching but separate” walls” between them, not just a single line. This is so that I can enclosed each room in an SVG path and detect clicks within the room.

Bad ascii art follows

+--------------------++--------------------+
|                    ||                    |
|      Room 1        ||      Room 2        |     <----- like this
|                    ||                    |
|   /                ||  /                 |
+--/     ------------++-/        ----------+


+--------------------+--------------------+
|                    |                    |
|      Room 1        |      Room 2        |    <----- NOT like this
|                    |                    |
|   /                |  /                 |
+--/     ------------+-/        ----------+
Improve this question
3
  • 1
    Consider an image map
    – candied_orange
    Feb 25, 2017 at 11:22
  • Excellent idea. I actually coded some stuff using one once & had totally forgotten about it (+1). Now, all need is a floorplan -> image map app :-)
    – Mawg says reinstate Monica
    Feb 25, 2017 at 12:20
  • Or, I might go with the more modern HTML5 canvas, and define each room as a path and use isPointInPath() to detect clicks
    – Mawg says reinstate Monica
    Feb 27, 2017 at 15:15

1 Answer 1

Reset to default
3

To answer your two questions:

  1. I recently had to draw a floor plan and used SweetHome3D to do so (http://www.sweethome3d.com; Windows, Mac OS X 10.4 to 10.12, Linux and Solaris; "Sweet Home 3D is a free interior design application that helps you draw the plan of your house, arrange furniture on it and visit the results in 3D"). I found it very easy to use and it offers different ways to export your plan (PDF, SVG).
  2. After drawing your floor plan you could export it as a SVG, split it into different images and scale them as needed by using a vector graphics editor (Illustrator, Inkscape, ..). After that, you could put all the images back together by using HTML/CSS/JS/AngularJS and hook them to one AngularJS function which then handles the onClick.
Improve this answer
3
  • Welcom aboard! Good answer :-( I was afraid that I might have to do that (+1). Do you know of any way to automate the splititng of the SVG image?
    – Mawg says reinstate Monica
    Feb 24, 2017 at 10:18
  • 1
    Thank you! :) No, I don't know a totally automated way todo so. I normally use Adobe Illustrator for that kind of work. Illustrator offers the possibility to drag&drop different parts of an SVG onto an export field where one then can define how to one-click-export all of the dropped parts (PNG, JPG, SVG, PDF). SweetHome3D creates an SVG with multiple groups of elements. Floors are separate which could be dragged&dropped directly. Walls are connected so you would have to split them manually.
    – coreuter
    Feb 24, 2017 at 10:29
  • I am thinking of using Inkscape and putting each room on a separate layer. Viewed with layers overlapping, the floor plan will seem complete, with each room’s walls touching the next room, but I could still export each layer as an HTML5 canvas path.
    – Mawg says reinstate Monica
    Feb 27, 2017 at 15:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.