# Creation FloorPlan Device map

**URL:** <https://community.smartthings.com/t/creation-floorplan-device-map/34081>\
**Category:** Projects & Stories\
**Tags:** project\_wholehouse\
**Created:** [December 31, 2015, 8:58pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081 "2015-12-31T20:58:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![shawneric](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/shawneric/32/89185_2.png) [@shawneric](https://community.smartthings.com/u/shawneric)\
**Post date:** [December 31, 2015, 8:58pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/1 "2015-12-31T20:58:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tgauchat](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/tgauchat/32/49516_2.png) [@tgauchat](https://community.smartthings.com/u/tgauchat)\
**Post date:** [December 31, 2015, 10:08pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/2 "2015-12-31T22:08:50Z")

</div>

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._

---

<div class="post-metadata">

**Author:** ![bamarayne](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/bamarayne/32/18206_2.png) [@bamarayne](https://community.smartthings.com/u/bamarayne)\
**Post date:** [January 1, 2016, 4:01am UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/3 "2016-01-01T04:01:53Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![625alex](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/625alex/32/70989_2.png) [@625alex](https://community.smartthings.com/u/625alex)\
**Post date:** [January 3, 2016, 5:10am UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/4 "2016-01-03T05:10:31Z")

</div>

> [@shawneric](#):
>
> 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.

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](https://community.smartthings.com/t/2d-3d-dashboard/9178)

[Visual Dashboard for App - (desired feature) Show Me a Floor Plan of My Home With Devices Tagged to Spaces - #16 by icepicknz](https://community.smartthings.com/t/visual-dashboard-for-app-desired-feature-show-me-a-floor-plan-of-my-home-with-devices-tagged-to-spaces/13144/16)

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…

---

<div class="post-metadata">

**Author:** ![shawneric](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/shawneric/32/89185_2.png) [@shawneric](https://community.smartthings.com/u/shawneric)\
**Post date:** [January 4, 2016, 1:22am UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/5 "2016-01-04T01:22:46Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Kristopher](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/kristopher/32/15578_2.png) [@Kristopher](https://community.smartthings.com/u/Kristopher)\
**Post date:** [January 4, 2016, 2:27am UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/6 "2016-01-04T02:27:12Z")

</div>

@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.

Kristopher

---

<div class="post-metadata">

**Author:** ![dalec](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/dalec/32/22232_2.png) [@dalec](https://community.smartthings.com/u/dalec)\
**Post date:** [January 15, 2016, 2:41pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/7 "2016-01-15T14:41:43Z")

</div>

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](https://community.smartthings.com/t/2d-3d-dashboard/9178) the 2D/3D Dashboard thread

---

<div class="post-metadata">

**Author:** ![tgauchat](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/tgauchat/32/49516_2.png) [@tgauchat](https://community.smartthings.com/u/tgauchat)\
**Post date:** [January 15, 2016, 11:01pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/8 "2016-01-15T23:01:56Z")

</div>

> [@dalec](#):
>
> Like @Kristopher suggests I wonder if there is a way to complement **SmartTiles** functionality with this graphic interface instead of the tiles only?

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.

---

<div class="post-metadata">

**Author:** ![Egenlauf](https://avatars.discourse-cdn.com/v4/letter/e/f07891/32.png) [@Egenlauf](https://community.smartthings.com/u/Egenlauf)\
**Post date:** [August 6, 2016, 9:12pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/9 "2016-08-06T21:12:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JDRoberts](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/jdroberts/32/56577_2.png) [@JDRoberts](https://community.smartthings.com/u/JDRoberts)\
**Post date:** [August 1, 2016, 1:51am UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/10 "2016-08-01T01:51:21Z")

</div>

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

[https://www.adtpulse.com/home/how-pulse-works/portal/home-view.html](https://www.adtpulse.com/home/how-pulse-works/portal/home-view.html)

![](https://global.discourse-cdn.com/smartthings/original/3X/f/2/f23f9c5b7cb948eafcb4a1bd07c9a6e07b3f1660.jpeg)

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.

 ![](https://global.discourse-cdn.com/smartthings/original/3X/1/b/1b27b29e07f8db68eea4b38384713f28d9374b28.png)

---

<div class="post-metadata">

**Author:** ![Egenlauf](https://avatars.discourse-cdn.com/v4/letter/e/f07891/32.png) [@Egenlauf](https://community.smartthings.com/u/Egenlauf)\
**Post date:** [August 1, 2016, 2:03am UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/11 "2016-08-01T02:03:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JDRoberts](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/jdroberts/32/56577_2.png) [@JDRoberts](https://community.smartthings.com/u/JDRoberts)\
**Post date:** [August 1, 2016, 2:04am UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/12 "2016-08-01T02:04:48Z")

</div>

> [@Map based rooms and alerts](https://community.smartthings.com/t/map-based-rooms-and-alerts/54034/3):
>
> Yes something like that for smart things preferably as part of the app and  
> not a smartapp would be awesome.

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. 🕶

> [@Visual Dashboard for App - (desired feature) Show Me a Floor Plan of My Home With Devices Tagged to Spaces](https://community.smartthings.com/t/visual-dashboard-for-app-desired-feature-show-me-a-floor-plan-of-my-home-with-devices-tagged-to-spaces/13144/):
>
> Rather than just list a series of categories and devices on the SmartThings app, I would like to see a graphical representation of my home and have icons which portray the status of different devices throughout. There should be a simple tool to build the floor plan of your house and then assign each device to specific rooms, doors, windows, etc. Example include showing the front door on the plan and tag your deadbolt and open/closed sensor to that door. Individual rooms could have switches/motion sensors, etc. assigned to that space and when motion is detected or lights are on the room itself could light-up with colors or icons that represent whats happening. The way that SmartThings is designed now works fine for a few devices but once you surpass a dozen or so it becomes harder and hard…

---

<div class="post-metadata">

**Author:** ![BatraD](https://avatars.discourse-cdn.com/v4/letter/b/e8c25b/32.png) [@BatraD](https://community.smartthings.com/u/BatraD)\
**Post date:** [August 1, 2016, 12:03pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/13 "2016-08-01T12:03:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TheCellMC](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/thecellmc/32/67029_2.png) [@TheCellMC](https://community.smartthings.com/u/TheCellMC)\
**Post date:** [August 1, 2016, 12:22pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/14 "2016-08-01T12:22:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jotto](https://avatars.discourse-cdn.com/v4/letter/j/eada6e/32.png) [@jotto](https://community.smartthings.com/u/jotto)\
**Post date:** [August 1, 2016, 2:09pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/15 "2016-08-01T14:09:32Z")

</div>

I have seen a few people use[SmartTiles](http://www.smarttiles.click/) to implement a floorplan type dashboard. Here are a couple I have saved, sure there are others out there.

> [@Dashboard Theming (Custom CSS) and Mounting Hardware Ideas](https://community.smartthings.com/t/smarttiles-dashboard-theming-custom-css-and-mounting-hardware-ideas/11222/720):
>
> Here’s my layout so far. I don’t have very many Things, so when I add more, I’ll likely make more adjustments to the sizes of the tiles as well as the colors to help them stand out yet fit with the floor plan and background. I’m not a pro at CSS, but this was still quite doable without too much complexity. Thanks to Alex and Terry for making a great app for SmartThings!!

![](https://global.discourse-cdn.com/smartthings/original/3X/3/e/3e4c1e56e800822b81de7666b627df88e9f74f6f.png)

> [@Dashboard Theming (Custom CSS) and Mounting Hardware Ideas](https://community.smartthings.com/t/smarttiles-dashboard-theming-custom-css-and-mounting-hardware-ideas/11222/1143):
>
> I’m not completely done yet, but I was inspired by a concept post I saw on this thread. This is 100% functional, but the CSS code isn’t transferrable to anyone else. Still, the whole thing only took me ~1.5 hrs to get done, and I would have been watching TV otherwise, so I consider it a worthwhile investment.

![](https://global.discourse-cdn.com/smartthings/original/3X/8/d/8dd116d521333c8a577b529fb3f20029cb59a214.png)

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

---

<div class="post-metadata">

**Author:** ![tgauchat](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/tgauchat/32/49516_2.png) [@tgauchat](https://community.smartthings.com/u/tgauchat)\
**Post date:** [August 1, 2016, 4:08pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/16 "2016-08-01T16:08:18Z")

</div>

> [@Map based rooms and alerts](https://community.smartthings.com/t/map-based-rooms-and-alerts/54034/3):
>
> preferably as part of the app andnot a smartapp would be awesome.

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…

---

<div class="post-metadata">

**Author:** ![JDRoberts](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/jdroberts/32/56577_2.png) [@JDRoberts](https://community.smartthings.com/u/JDRoberts)\
**Post date:** [August 1, 2016, 4:12pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/17 "2016-08-01T16:12:53Z")

</div>

> [@Map based rooms and alerts](https://community.smartthings.com/t/map-based-rooms-and-alerts/54034/8):
>
> > [@Map based rooms and alerts](https://community.smartthings.com/t/map-based-rooms-and-alerts/54034/3):
> >
> > preferably as part of the app andnot a smartapp would be awesome.
> 
> 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…”

FWIW

---

<div class="post-metadata">

**Author:** ![tgauchat](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/tgauchat/32/49516_2.png) [@tgauchat](https://community.smartthings.com/u/tgauchat)\
**Post date:** [August 1, 2016, 4:18pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/18 "2016-08-01T16:18:07Z")

</div>

> [@Map based rooms and alerts](https://community.smartthings.com/t/map-based-rooms-and-alerts/54034/9):
>
> so that people who want floorplan view pay a couple of bucks more for the elite version than people who don’t

_A “couple bucks”??_

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

---

<div class="post-metadata">

**Author:** ![JDRoberts](https://yyz2.discourse-cdn.com/smartthings/user_avatar/community.smartthings.com/jdroberts/32/56577_2.png) [@JDRoberts](https://community.smartthings.com/u/JDRoberts)\
**Post date:** [August 1, 2016, 4:30pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/19 "2016-08-01T16:30:00Z")

</div>

I said _pay_ a couple bucks more. I never underestimate the cost of development. 😉

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.

---

<div class="post-metadata">

**Author:** ![Egenlauf](https://avatars.discourse-cdn.com/v4/letter/e/f07891/32.png) [@Egenlauf](https://community.smartthings.com/u/Egenlauf)\
**Post date:** [August 1, 2016, 4:43pm UTC](https://community.smartthings.com/t/creation-floorplan-device-map/34081/20 "2016-08-01T16:43:10Z")

</div>

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

[Next page](https://community.smartthings.com/t/creation-floorplan-device-map/34081.md?page=2)
