Creation FloorPlan Device map

I’m having some trouble here putting this together. In fact, I’m not a coder and I’m pretty much overwhelmed trying to throw this together. I have a floorplan I made with the android app Magic Plan. It’s a decent and free app and I got a detailed floor plan. I want to be able to indicate where lights and sensors are, and based on their status have a light icon in a particular location turn on or off, or a door lock turn red or green, or a door image open or close, etc. I figure I could just make the floorplan the background and use jquery to make these changes, but the more I dug into this, the more I realized I didn’t know what I was doing.

So I wanted to ask if someone could please help me with this project? I intend to pass along the code and whatnot for others who want the same thing to use. Thanks all.


Great project idea, and trying not to be too discouraging, but you’re essentially building a platform similar to that which took @625alex months of development and upkeep… And several more ongoing months for a performance overhaul.

There may be a lot of overlap in our backends, so chat me up sometime if you would like to discuss your vision. SmartThings’s forum moderators discourage discussion of our SmartApp outside our own threads, so please Private Message me if you wish.

This sounds very interesting. Imagine something like this as a shell over ST. It could be on a tablet on the wall and just tapping the light icon in whatever room turns it off and on…

1 Like

Eric, this is an interesting idea and it has been discussed before. Your biggest challenge is to design an interface to that would allow you to select a floor plan and add “devices” to arbitrary places on that image. Communication with SmartThings is not a problem, as such.

2D/3D Dashboard

Visual Dashboard for App - (desired feature) Show Me a Floor Plan of My Home With Devices Tagged to Spaces

From my personal experience, placing device icons in literal floorpan “rooms” will quickly clutter the user interface, especially when using devices with more controls, such as thermostats, for example.

This would be a fun and challenging project, although might feel overwhelming if you are just starting with web development and JQuery. If you have particular questions, please let me know. Been there, done that…

1 Like

This is a message I sent tgauchat. I won’t post my floor plan publicly, but I will add that adjusting the location of an icon should be easy enough of you can find the precise location it’s in.

The Magic Plan app is free to use, to export your floor plan would cost about $3.00 but after that you can change and export it as many times as you like and in most any format that is useful. I’ve uploaded my own for plan.

Honestly this should be simple enough. All you need to do is make the floor plan a background and then place your icons with absolute tags meaning they will stay in their exact positions. The underlying code should be a jQuery that would do a few things.

First off we would need to be able to accept Json information. I intend to use IFTTT to give that information.

For example: If light goes off then send a Web request via Maker chanel with json in the link.

The server with the jquery should accept the json to either indicate a licht is on or off. Then, based on that information, you could change which icon you’re using to one indicating either on or off.

So all in all I think this should be fairly simple to do. I just don’t know jquery, json, Java or html. I know enough to get the theory down but apart from that I’m ignorant.

What do you think?

@shawneric – Definitely don’t need to use IFTTT, though if you’re just hacking something together that will work. It’s very easy to make HTTP endpoints for your devices, that is essentially how SmartTiles works. You might even be able to piggyback off SmartTiles with the Custom CSS option.



Love this idea! Absolutely keep it simple. I was reading the other threads about having the app build the floor plan etc, and I agree with you that would be nice but totally a different project. I really like the idea of building the floor plan graphic using an outside app like Magic Plan to generate a basic picture image that is the overlay. In theory it seems basic enough. A long time ago I use to interact with building automation systems that did this exact thing and it really is more intuitive to operate. Like @Kristopher suggests I wonder if there is a way to complement SmartTiles functionality with this graphic interface instead of the tiles only? Keeping my eye on 2D/3D Dashboard the 2D/3D Dashboard thread

1 Like

We definitely are not ruling out the possibility of future SmartTiles being “skinnable” in many different ways, and some degree of extra flexibility is a part of initial V6 plans.

It’s not our MVP, of course; but I personally think it would be more than a gimmick and hope we get the resources at the right time to do this.

OK here’s the idea. When an alert occurs via a open\closed sensor you would be able to have a map view of that room or the whole floor with a red flashing alert on that area. Config would start with a square that you could tap to add devices to various places inside and on the square. Then tap to attach another room to that room to generate a full floorplan. Just an idea, when looking at the “rooms” it would just be better to have a more graphical representation of the room instead of a list.

Yep. ADT has offered this for about 4 years, it’s a nice feature. Most security systems call this a “floorplan view.” :sunglasses: ADT calls it “home view.”

And there are a couple that work with Insteon and Homeseer, although the ones I’ve seen have fewer features than ADT’s. But they look nice.


Yes something like that for smart things preferably as part of the app and
not a smartapp would be awesome.

1 Like

Agreed. But it’s been requested for a couple of years now, and given that the app doesn’t yet have a landscape view or a tablet version, I don’t think this is very high on their priority list. But I’d definitely like to see it. :sunglasses:


I’ve been trying to build something like the floor plan view with ST and not been successful. Hopefully someone smarter than me can figure this out.

Maby this could be added to the Smarttiles smart app in a future update.

1 Like

I have seen a few people use SmartTiles to implement a floorplan type dashboard. Here are a couple I have saved, sure there are others out there.

Wish there were some step by step instructions out there for someone like me who is new to CSS to create something like this!!


What’s wrong with a SmartApp??

The new architecture for SmartTiles V6 will be a foundation that could support a “floor plan view”, if there is sufficient customer demand to justify the effort…


Based on the ADT implementation, my guess is going to be that this isn’t something the customers know they want upfront, but is soon as they see it they see the advantages. So it becomes a strong value-add marketing statement, particularly if the official app doesn’t offer it.

It could even be a “step up” feature version that costs more, so that people who want floorplan view pay a couple of bucks more for the elite version than people who don’t and just stick with the basic. The point is just that it’s an instantly recognizable differentiator, “Q. what’s different about the elite version? A. It has floor plan view…”



A “couple bucks”??

I’m afraid you are vastly underestimating the cost of software development, maintenance, support, and overhead…

I said pay a couple bucks more. I never underestimate the cost of development. :wink:

My point is that as a marketing feature, the visible difference between the $9.99 version and the $14.99 version of the app might well be floor plan view, where The value can be shown in a single screenshot.


Nothing wrong with a smartapp I just think it would be nice to get this
functionality built into the security monitor .

1 Like