Customizing Plan View

I have for long time had requests to be able to change the Icons for Items in the Plan view. A typical example is that a remote switch may for example control a coffee maker, but the Item used is actually a NexaLamp (which in reality is a remote switch) which has a lamp bulb as Icon.

I have been a bit reluctant to add this, because it is a bit of work and other features has always felt more important. Now I got requests to customize other aspects of the plan view as well, and then I realized that the easiest way to be able to customize anything is to allow a custom css file to be added. This is now added in the nightly build.

So, to change the Icon for a specific Item to a coffee maker, you first upload the image file (coffee32.png) to the media library (in settings). Then you find out the ID of the Item by looking at the Item details page (Id is 44 in this example) and make a small css-file that looks like this:

#ID44 li.icon.lamp_off {
    background: url(coffee32.png) no-repeat center;
}

#ID44 li.icon.lamp_on {
    background: url(coffee32.png) no-repeat center;
}

You upload the .css file in the media library, go to the plan page, click "edit this page" and select the css-file.

This is just one example a what can be changed this way.