Custom Images on Control Pages

There are several places to add custom images to control pages. NOTE: images should be in PNG format. If you look in the following directory:

/Library/Application Support/Perceptive Automation/Indigo 6/IndigoWebServer/images

(change 6 to 5 or 4 for whichever version you're using). You'll find a couple of directories under there:

1. backgrounds - put images here that you want to use for control page backgrounds
2. controls - in this directory, there are 3 more:
   • devices - in this directory, put in images to represent devices. In Indigo 4.1 and higher, we've added some heuristics that will allow you to add many more images. See Image Selection Heuristics below for details.
   • static - in this directory, you can just put static images that are shown when you select Static Image / Caption from the Display: popup in the control page editor.
   • variable - in this directory, you can put images that represent variables. In Indigo 4.1 and higher, we've added some heuristics that will allow you to add many more images. See Image Selection Heuristics below for details.

So, adding images is as simple as inserting them into the correct directory above based on what you want to use them for and restarting the Indigo Server. When do a minor upgrade, these images should remain in place. However, when you do a major upgrade (i.e. Indigo 4 → Indigo 5), you may need to manually move them over.

Before v4.1, we had a simple mechanism for selecting images based on values: for devices, you could have a file named MyDeviceImage.png, which would be shown if the device was OFF, and MyDeviceImage+on.png, which would be shown if the device was ON. Likewise, for variables, you could create an image called MyVariableImage.png, which would show when false, and MyVariableImage+true.png which would show when the variable value was true.

We've expanded the image selection criteria so that it can find much more interesting images based on values. To signify that an image should use these more complex image heuristics (described below), end the base file name with a ”+”: ImageName+.png. The ”+” at the end is a hint to the Indigo Web Server and Indigo Touch that it may need to contact the server for the right image. The heuristic works like this now:

1. Search for an image of the form ImageName+VALUE.png, where VALUE is the current value. For ON/OFF type devices it will be on and off; just like before. For devices that have numerical state values (brightness, temperature, etc.) it will be the numerical value for that state. For variables, it's a bit different: it will be an exact match of the current value of the variable. So if your current variable value is “summer”, then we'll look for an image named ImageName+summer.png. Spaces should work correctly as well, but other special characters may cause problems, so be careful as you plan specific values. If the variable value is empty then the base image ImageName+.png will be used.
2. If a match isn't found above, then Indigo attempts to find a numeric match in the following way: search for an image with a name that is the closest increment counting by 5. So, for instance, if the value of the device or variable is 13 (and there was no exact match to ImageName+13.png), we'll look for an image named ImageName+15.png. If that isn't matched, we'll look for the next closest increment counting by ten (in this example, ImageName+10.png since 13 is closer to 10 than to 20). Next, we'll look for the next increment counting by 20 (ImageName+20.png). Finally, if that isn't matched, we'll look for the next increment by counting by 25 (ImageName+25.png). This will work for variables that are valid integers (whole numbers) as well.
3. If neither #1 or #2 match, then the intention was to have the base image ImageName+.png displayed. A bug in image selection however will result in no image. A workaround is to add an image named ImageName+true.png which will be used in this case.

We think this will give you much more flexibility in displaying images that match your needs. This works for all control pages regardless of whether they're viewed in a web browser or in Indigo Touch.

Now, if you're REALLY brave (and know Python), and have a situation that doesn't match the above scenarios (like fractional numbers for instance), you can actually change this behavior by hacking the GetImagePath() method in indigoutil.py file. Of course, you should always make back copies of any Indigo files that you manually alter in case something goes wrong. Any changes you make to this method will work for both web browsers and for Indigo Touch as long as you make sure the base image name (the one you select in the control page editor) ends with a ”+”.