For a while I had a standard Dummy widget in HABpanel, but that didn’t look very nice, was very standard, and the different icons for different states don’t really work. When I started integrating another Raspberry Pi with a touch screen (blog post to come), I refreshed the HABpanel, added another dashboard, and along the way I wrote a new “Template” widget for the washing machine and the dryer.
This project had a number of small goals:
Make the headline (the name) bigger - in the dummy it seems to be hardcoded, and very small
Use the proper icon for every Item state (running, finished, standby)
Change the background color of the widget according to the state of the Item
Turned out that 1) and 2) are easy to do, but 3) is a challenge. Every example I found was using a ?ternary operator, which allows for 2 modes: if-then-else. Three or more states can’t be handled that way.
In the end, my solution was to define different background classes in a <style> element, and use ng-class to select the right class. Let’s look at this in detail. The mapping and the rules for the washing machine are specified here. Based on that, style classes are defined:
These styles cover all known states, three of them use the HABpanel default colors, whereas running and finished use a red and a green color, plus 30% respectively 20% opaqueness. That is realised by specifying the colors as RGB codes (using the rgb() function) and the alpha channel (using the rgba() function).
These CSS classes are used in the <div> as background color, using the ng-class selector:
Using ng-if I select the desired icon for every state of the washing machine, ng-if will simply hide the <div> if the condition is not true. Every icon in openHAB might have different versions for different states. However they don’t match across the board, the icons for the dryer state are different from the ones for the washing machine state. Please figure out which icon matches the state you have for your Item.