Post Pics of Your Control Pages! (LOCKED - create new topic)

[jay (support)]

Now that's what I'm talking about! Absolutely amazing, thanks for sharing.

Wow, that's all truly amazing. I'm in the middle of redesigning my control pages from the ground up (for the 3rd time.. attempt 2 was aborted as even although it looked good it wasn't very functional) and you've given me some great ideas for my new project!

Jeremyjjr, Your work is truly a stunning layout, and it's so par for the new iOS and latest look that my favorite fruit company has moved towards. Very up to date and very functional. Wow, inspirational! You could win awards with your work.

I had not gotten into graphs just yet but your inputs have given me great insight on what to do next. Thanks for posting this.

Love your clean interface but have a real time suggestion for anyone with motion sensors and control pages. I've recently been using graphicconverter to create transparent motion sensor image buttons for each room of my home. I use the original base image to cut out and create these custom buttons meant to show motion activity specific to each room. I still need to make these a bit more transparent, but here is the idea.

Base floor drawing... No motion at all.

image0.png (226.54 KiB) Viewed 12241 times

Now, using the "motion test button" to show the motion sensors all on, here is the result...

photo.png (128.42 KiB) Viewed 12241 times

When somebody walks through the upper floor from room to room, these sensors light up sequentially. And as I mentioned, these buttons need to be more transparent for a softer look but it's a work in progress.

The button sets are dropped into the devices image folder with names like

motion_upperBedroomNorth.png
motion_upperBedroomNorth+on.png

The off state button is simply a matching fully transparent image. The on state button contains the red-semitransparent highlighting. I'm doing a set of these zones for my sprinkler system zones as well, with a watery highlight shown over the grass and a bit of artwork to show actual sprinkler heads.

When positioning these buttons in indigo, you need to send them to the back so to speak, and make sure you set them to do absolutely nothing, except to graphically show the state of your room's motion sensor...unless you want it to do something. Any lights controls can be placed directly on top of these motion buttons. It would be nice to be able to "lock" these buttons down in indigo so that once placed, they don't move as you place other objects.

I can't wait to get into the 3D open roof views like those you have and eventually charting. Thanks again. -Al

@akimball, the 3D floor layouts were done using an online tool found here http://floorplanner.com. Very simple to use, free to use and a low-cost annual fee if you want to keep your designs private or export high resolution images. Really brings a floor plan to life!

@akimball, the 3D floor layouts were done using an online tool found here http://floorplanner.com. Very simple to use, free to use and a low-cost annual fee if you want to keep your designs private or export high resolution images. Really brings a floor plan to life!

Thanks very very much Will check it out this evening. I had to edit my post a couple of times due to trying to post it originally using my ipad... it kept giving my two image examples the same exact name so they didn't embed properly. I think it's correct now. My layouts are beginner's level compared with yours... love your work of art. Very functional.

FWIW, none of the pages I displayed above use iFrames. They are all built using the standard page editor in Indigo. Dynamic images are updated using the variable file name capabilities. No additional HTML exists to render these.

Very nice pages. Just to clarify, you generate static images that are autoupdated in Indigo using the Refreshing Image URL option? Is that correct?

@Shutter, in a nutshell that's right.

Take for example the Energy screen with the graphs. This consists of a simple background image and a number of 'buttons' that represent the time period you want to view - Day, month or year. Pressing a button runs an action that assigns the value 'day' to a variable called tempGraphType.

Behind the scenes there is job running every five minutes that records temperature sensor data in to a sqlLite DB. Every hour a scheduled job runs and reads in the saved data and creates three png images using gnuplot. Each file is named 'tempGraph+day', month, etc.

Back on the control page, I add the graph image 'tempGraph+.png' to the screen - and that's it. When I press a button, the variable name changes and the new graph image file is shown.

I use this principle to control almost all of the dynamic images on all of the screens.

Hope that helps.

J.

Hope that helps.

J.

It does. The graphs just happen to look different to the ones I'm generating with Karl's INDIGOPlotD plugin. (Which is really nice. It's already given me a good idea of how the house performs by plotting the indoor temp in multiple locations relative to the outside temp. And Karl kindly helped me to get my head around some of the settings).

Is there some image processing going on with the graphs to make them look like that? Not that it matters, I don't know gnuplot/matplot or any other backend stuff at all to do anything with it. I know Photoshop/Illustrator/Indesign, but of no use in this case. Which is why I still think for me to make a good looking control page I will need to make my own custom webpage and use elements from Indigo in it.

Which brings me back to my original question to forum - is that how one would make a custom webpage by adding Indigo control page element to the webpage? Using iFrames, I believe. Any recommendations for software to do this?


@jeremyjjr - just came back from your neck of the woods today. Took the in-laws up to St Albans for lunch and pleasant walk around town in the sun. We live about 25mins away.

Neat -- Status Board has a very nice looking UI. Let us know how it goes...

Been meaning to come back with this for a while. Here are some code snippets that I have been using (they're dirty and could use to be cleaned up a bit. But they do work.

JSON:

Code: Select all

#! /usr/bin/env python2.5
# -*- coding: utf-8 -*-

"""
The easiest way to understand the construction of the JSON hierarchy is to look for the
'object = {"graph" : graphObject}' line below and work upwards.

Parameters:
  Refresh is optional. In seconds. Default = 120, Min = 15.
  Graph type must be "bar" or "line"
  Graph total must be true or false. Works only with bar chart?
  Colors can be 'aqua', 'blue', 'green', 'lightGray', 'mediumGray', 'orange', 'pink', 'purple', 'red', or 'yellow'.
"""

import simplejson as json
import sqlite3

jsonFilePath = "/Users/USERNAME/Dropbox/Public/temperatures.json"
sqliteFilePath = "/Library/Application Support/Perceptive Automation/Indigo 6/Logs/indigo_history.sqlite"
numOfObs = 10

conn = sqlite3.connect(sqliteFilePath)
cur = conn.cursor()

############################## Dataset 1: Main Attic ##############################
set1 = []
cur.execute("SELECT sensorvalue FROM device_history_117494737 ORDER BY id DESC LIMIT " + str(numOfObs))

for row in cur:
   set1.append(int(row[0]))
set1.reverse()

# Is there a limit to the number of observations? Number of datasets?
x1 = {"title" : "1", "value" : set1[0]}
x2 = {"title" : "2", "value" : set1[1]}
x3 = {"title" : "3", "value" : set1[2]}
x4 = {"title" : "4", "value" : set1[3]}
x5 = {"title" : "5", "value" : set1[4]}
x6 = {"title" : "6", "value" : set1[5]}
x7 = {"title" : "7", "value" : set1[6]}
x8 = {"title" : "8", "value" : set1[7]}
x9 = {"title" : "9", "value" : set1[8]}
x10 = {"title" : "10", "value" : set1[9]}

xTitle = "Attic"
xColor = "Green"
xRefresh = 120
xDataPoints = [x1, x2, x3, x4, x5, x6, x7, x8, x9, x10,]

x = {"title" : xTitle, "color" : xColor, "refreshEveryNSeconds" : xRefresh, "datapoints" : xDataPoints}

########## Build the JSON Components ##########
# Add additional data sets here too
dataSequences = [x]

graphMin = min(min(set1)
graphMax = max(max(set1)

graphTitle = "Temperatures"
graphObject = {"title" : graphTitle, "yAxis" : {"minValue" : graphMin, "maxValue" : graphMax}, "total" : "true", "type" : "line", "datasequences" : dataSequences}

# The JSON hierarchy effectively starts here and works upwards.
object = {"graph" : graphObject}

# Close the database.
conn.close()

########## Write the JSON to file. ##########
try:
   with open(jsonFilePath, mode='w') as graphOutput:
      json.dump(object, graphOutput, indent=2)
except:
   indigo.server.log(u"Something went wrong.")

CSV:

Code: Select all

#! /usr/bin/env python2.5
# -*- coding: utf-8 -*-

"""
This script creates a CSV file based on the setting of the script and appends values to the file each time it's run.

CSV table structure:
Row 1 = Chart title and column headings
Row 2 = Color
Row 3 = Observation 1
Row n = Observation n

Totals row can be added if desired. Suggest 'Totals' in column 1 of row 3.
"""

# import csv (unused, but there may be some benefit to doing it this way.)
import os.path

csvFilePath = "/Users/USERNAME/Dropbox/Public/humidity.csv"
csvHeaders = "Humidity,Outside,Attic,Inside" + "\n"
csvColors = "Colors,Blue,Green,Red" + "\n"
dateTime = str(indigo.server.getTime())

outside = (indigo.devices[1899035475].states["relativeHumidity"]).strip('%')
outside = float(outside)
outside = str(outside)
mainAttic = str(indigo.devices[1869397554].states["sensorValue"])
inside = str(indigo.devices[1700355009].states["humidityInput1"])

# Check and see if the file exists. If not, create it and write the headers.
if not os.path.isfile(csvFilePath):
   csvFile = open(csvFilePath, "a")
   csvFile.write(csvHeaders)
   csvFile.write(csvColors)

# Write new values to the file.
csvFile = open(csvFilePath, "a")
element = dateTime + "," + outside + "," + mainAttic + "," + inside + "\n"
csvFile.write(element)

# Close the file.
csvFile.close()

Every hour a scheduled job runs and reads in the saved data and creates three png images using gnuplot.

@jeremyjjr: If you don't mind me asking, do you call gnuplot from Python or from bash? If Python, can you share the method you use to call it? I have a gnuplot script which plots fine, but for some reason when I call the job from within a Python script, while Indigo seems happy, my PNG file doesn't update.

Here's what I'm trying:

Code: Select all

from os import system
system('gnuplot path_to_file')

you have to include the full path to gnuplot

you have to include the full path to gnuplot

Thanks very much! I definitely needed to do that, but also needed to escape the spaces in the path name to the gnuplot script file.

This structure is working for me:

Code: Select all

from os import system
system('/usr/local/Cellar/gnuplot/4.6.5/bin/gnuplot /Library/Application\ Support/Perceptive\ Automation/Indigo\ 6/Scripts/temperature.gp')


you could quote the path to the file and skip the "\ "
so ("usr/...../gnuplot 'file to gnu plot file '") should work.

you can also capture the potential error message(s) by returnMessage = system(...) I believe -I am not home, this is from memory.

Karl

you could quote the path to the file and skip the "\ "
so ("usr/...../gnuplot 'file to gnu plot file '") should work.

you can also capture the potential error message(s) by returnMessage = system(...) I believe -I am not home, this is from memory.

Karl

Thanks Karl -- I'll definitely check out the return message thing.

I came cross this most awesome touch screen based Home Automation system from 1985 on the web.
I thought perhaps someone else might enjoy it too. I really love the aesthetic of this system!
More pictures here: http://imgur.com/a/Jb6jW