Recently I changed my BasicUI sitemap from using the default OpenHab (OH) icons to material icons. The default OH icons have certain advantage such as icon states (e.g. different battery icon depending on the battery percentage), but overall is somewhat limited in terms of the available icons and the color choices. The material icons are a lot more numerous. By default, they are in black and white. However, using the iconcolor attribute you can dynamically change the icon color to something appropriate with the state of the system. Overall, the choice of icon & its color can provide you at a glance a quick status of the house state.
For example, in the screenshot below, the choice of color indicates whether the house is armed, where the light is turned on, an external door is open, and where an equipment (a fan in this case) is running. In the Outdoor panel, the icon is a cloud, representing the current weather status. In this sitemap, the house is divided into many rooms, and with a small effort, the icons can show a quick whole-house status without having to get into individual frame / panel.
The sample code looks iike this:
Text label="GreatRoom"
icon=[FF_GreatRoom_Tv == ON = material:tv, material:chair]
iconcolor=[FF_GreatRoom_Tv == ON = "orange",
FF_GreatRoom_LightSwitch == ON = "yellow"] {
Frame label="GreatRoom" {
....
}
}
Text label="Outdoor"
icon=[FF_Virtual_Weather_WeatherSymbol == 0 = material:wb_sunny,
FF_Virtual_Weather_WeatherSymbol >= 1 AND FF_Virtual_Weather_WeatherSymbol <= 4 = material:wb_cloudy,
FF_Virtual_Weather_WeatherSymbol >= 9 AND FF_Virtual_Weather_WeatherSymbol <= 9 = material:umbrella,
FF_Virtual_Weather_WeatherSymbol >= 10 AND FF_Virtual_Weather_WeatherSymbol <= 14 = material:ac_unit,
FF_Virtual_Weather_WeatherSymbol == 16 = material:air,
material:landscape]
iconcolor=[
FF_Virtual_Weather_WeatherSymbol == 0 = 'orange',
FF_Virtual_Weather_WeatherSymbol >= 1 AND FF_Virtual_Weather_WeatherSymbol <= 4 = 'purple',
FF_Virtual_Weather_WeatherSymbol >= 9 AND FF_Virtual_Weather_WeatherSymbol <= 9 = 'blue',
FF_Virtual_Weather_WeatherSymbol >= 10 AND FF_Virtual_Weather_WeatherSymbol <= 14 = 'aqua',
FF_Virtual_Weather_WeatherSymbol == 16 = 'maroon'
]
{
Frame label="Outdoor" {
...
}
}