Custom Images on Control Pages

There are several sub-folders to add custom images to control pages inside of:

 /Library/Application Support/Perceptive Automation/Indigo YYYY.R/Web Assets/images/

Note Indigo 7 and earlier stores the images inside:

 /Library/Application Support/Perceptive Automation/Indigo X.Y/IndigoWebServer/images/

And also note that's the Library folder at the top level of your hard drive, not the one in your user directory. 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. Images should be in the PNG format. When upgrading Indigo, v7 and above should automatically move over any custom images, but you may need to move them over manually if upgrading from an older version. Also, if you edit an existing custom image, you may need to restart the client (or clear the cache in Indigo Touch from the settings dialog) in order to see the changes.

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 in Indigo 5 and fixed in later versions however will result in no image. A workaround is to add an image named ImageName+true.png which will be used in this case.)

Note that the dimensions of all the images with the same base image name must be the same. If they are not the layout of some of the images will be incorrect.

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.