Custom control webpage

Hi Everyone,

I'm using the latest Indigo Pro, and a bunch of Insteon hardware. I would like to make a custom control page for my home.

The idea is, and I've attached images to this post to illustrate. I want to build a simplified 3d model of both floors of my house.

I would like to then have clickable areas, say for each room that has a controllable light, that would trigger the lights to come on. I can create the webpage in a variety of ways, maybe an old school image-map, or sliced PNG images for each room.

The key here, and why I don't want to just use it as a background in control pages, is that I want to then light up the room in the 3d model, if the light is on. These would all be pre-rendered images that I could swap in and out.





What is the best way to accomplish this? Feel free to ask for any clarification.

Phil.

P.S. These are just sample images, not the final 3d images, don't judge the mockups!

Neat!! Although I hope you don't have too many lighting zones on each floor, because the number of pre-rendered images needed is going to be 2^n.

Something like this may work for you in this instance. Apologies for the example as this is my old web page for home control but it should be enough to explain how this may work.

In the following example, the outdoor floor plan is the static background image for that particular control page. Keep in mind the rest of the web page is made up various frames with their own web content and control pages.



Each of the abstract yard sections are actually custom images that represent the OFF status for each zone.

Here is the Front Grass (Zone 3) device image on its own



And here is Front Grass (Zone 3) "+on" image.



So, when you click on any part of the Front Grass, the control page is configured to turn that zone on and the image changes accordingly as such:



So in your case, you would need to create device and device+on images that represent the sections of your floor plan in both an ON and OFF status and then overlay it on your background image making sure it lines up correctly.

I hope this explains it for you but if not then let me know and I could rig something up with your own images to make it clearer.

That was a great example Skiddy, thanks for taking the time to write something so verbose.

I think I can make your setup work for me. I'm assuming I would make custom images and replace them in the Indigo folders?

I haven't made any custom control pages yet. I like your system with the html frames, seems like an easy way to add more functionality to the control page.

Is there a way to bypass the control pages altogether and just pass commands to the Indigo server with custom URL's? It might be easier to create a custom webpage with javascript and such.

I've started experimenting with a page layout. You can see it at the following address:

http://phil.centrix.ca/insteon/

It's very rough at the moment, you can toggle the floor, and on the first floor you can click anywhere to toggle the living room light on and off, but you can't toggle floors with the living room lights off, at the moment.

That was a great example Skiddy, thanks for taking the time to write something so verbose.

No problem. Happy to help out

I think I can make your setup work for me. I'm assuming I would make custom images and replace them in the Indigo folders?

Yes, you just need to make your own .png images and then drop them in /Library/Application Support/Perceptive Automation/Indigo 4/IndigoWebServer. There are various folders for background images and devices. Just add your own in there, restart the server and then when you go to Control Page they will be available for use.

I haven't made any custom control pages yet. I like your system with the html frames, seems like an easy way to add more functionality to the control page.

That example is a single html page I developed last year sometime and includes html, javascript, etc. I deployed the use of "Apple" style accordion menus used in the center section and security camera section, and used a ticker for the "upcoming actions". Like you said, it was a way to get just about all the information on a single page. The top menu (which isn't shown) had links off to device usage reports, logs etc.

Is there a way to bypass the control pages altogether and just pass commands to the Indigo server with custom URL's? It might be easier to create a custom webpage with javascript and such.

I believe there is but perhaps Jay or Matt would have a better idea. As I said, this was easy to implement as each frame used either my own html, javascript or links to the control page elements.

I've started experimenting with a page layout. You can see it at the following address:

http://phil.centrix.ca/insteon/

It's very rough at the moment, you can toggle the floor, and on the first floor you can click anywhere to toggle the living room light on and off, but you can't toggle floors with the living room lights off, at the moment.

I had a quick look. Very neat. What are you using for the graphics?

I'm a user interface designer by trade, so I spend quite a bit of time in Photoshop. The 3d model is built in Cinema4d, a professional 3d modelling application. I'm using Photoshop to assemble the images and setup all the layers.

I'm trying to determine the feasibility of my desired solution before committing a lot more time on the 3d model. I'm looking at buying more Insteon equipment to flesh out my system. I'd like an IR transmitter and maybe a couple motion sensors. I'd like to be able to click on the TV and have it turn on as well.

If this comes together like I want it to, I'll get a touchscreen LCD for my wall. I'm looking for some decent 7"-12" capacitive LCD touchscreens online. Let me know if you guys know of any good ones.

I'm open to any suggestions you guys might have on all this, I'm pretty new to the home automation game.

Phil.

I spend a lot of time in CS4 also and have a programming background hence the reason for my current project of updating my home automation web site. It's just finding the time.

Right now, I have 25+ Insteon devices throughout my home, indoors and out, with multiple devices in a single room. That's why I divided up the "accordion menus" across multiple areas of my home. As long as you can visually represent them in your graphics in the way you want them, then you should be OK.

[jay (support)]

I'm assuming I would make custom images and replace them in the Indigo folders?

Check out the wiki article on control page design.

Is there a way to bypass the control pages altogether and just pass commands to the Indigo server with custom URL's? It might be easier to create a custom webpage with javascript and such.

Indigo has a pretty complete RESTful API implementation - that's probably where you'll eventually want to go.