How to create floor plans that work nice with mobile and desktop browsers?

Question

Want to create a dynamic floor plan map of an office to show occupancy and link up to meetings etc. I have some AutoCAD files on hand and been researching for ways to make this on a browser. It seems to me that SVG would be a good contender which supports most mobile and desktop browsers (no old version of IE please), but I doubt if there are ways to bind data to each object on the floor plan. I have searched for libraries like D3.js or Raphaël and they seem to tbe the library I need. So my questions are:

1. Is there any way to convert an AutoCAD file to something like SVG, while the SVG would display the seats and rooms on the plan as individual objects?
2. Which library (D3 or Raphaël) would suit my needs? I have a MySQL database which can pump out occupancy and also the meeting data.
3. As a stopgap measure during the development, do you guys think that exporting the CAD file to an image and use vintage hacks like HTML image map to show something basic is a good idea? I am thinking if doing this can become a fallback for those good old browsers.

Answer 1

I built a floorplan application that sounds similar to what you're creating. Feel free to look at the source code and create your own fork. Hopefully you can pull some inspiration from it.

The code most relevant to SVG manipulation is Map.js, so you may want to start there. One of the map SVGs is stored in mv.svg.

Sadly, I can't point you to the live instance this is running on because it's on an internal HR server.

Architecture notes

• walls and room names are stored in an SVG file.
  • generated in Adobe Illustrator, which can import AutoCAD DWG
  • SVG edited by hand to include a JavaScript array of seat coordinates
• on page load, server-side templating inserts the SVG into the HTML source
  • otherwise, if SVG is loaded using an <object> or <image> tag or CSS background-image, you won't have access to the SVG DOM through JavaScript
• dynamic data (meetings, seats) are retrieved from a Mongo database and exposed through a JSON REST API
• a client-side JavaScript MVC application uses Backbone to insert the dynamic data into the SVG DOM and attach event handlers
  • when a person's avatar is clicked, detailed person info is shown
  • when the user types in a search box, the avatars in the SVG get CSS classes applied so avatar images that don't match the search are semi-transparent

Database schema

The Mongo database has a people collection, each of which contains a document of the following form:

{
    "_id" : ObjectId("5201db41f5f4be9ae57e37a9"),
    "fullname" : "Ben Hutchison",
    "desk" : 3,
    "office" : "mv",
    "email" : "ben",
    "title" : "Software Engineer, Graphic Designer",
    "tags" : [  "des",  "eng" ],
    "linkedInId" : 139463329,
    "mobilePhone" : "845-986-0123",
    "workPhone" : "408-550-2995"
}

The only required field is fullname (and _id, but I let Mongo autogenerate that).

Configuration

You can configure the database connection and HTTP server settings by copying the provided config.json.example to config.json and making your changes in the new file.

Screenshot

Answer 2

If you want something like a fallback for your floor plan map, you may try using some software to draw out the seats and rooms on your exported image, for example, iiCreator (http://www.iicreator.com) can import your floor plan image, and you can use tools to create the seats and rooms readily. It may not be as full-featured like the Floor plan system from Aldaviva, but it serves your purpose in the short term.