Hi everybody,
upgrading my server from openHAB 2.5 to 3 I was thinking about how to migrate a cool template I used to show in my HabPanel.
Basically it was a .png file representing a home plan and which dynamically changed the colors of windows and doors in order to show which ones were closed/opened.
As you can see from the screenshots below, the highlighted door passes from red (OPENED):
…to CLOSED:
In order to achieve this, I used to:
- create the .svg floorpan with Inkscape
- create a .css file with references to colors which should have been displayed on single doors and windows depending on their actual state (OPEN or CLOSE)
(To be clearer, I followed this tutorial: Design your SVG floorplan or dashboard for HABPanel with Inkscape)
What I’d like to do in openHAB 3 is actually import the above mentioned functionality and I was wondering how to do that…
MY IDEA:
At this time, the only expedient I thought about is the following:
- in a f7-card I would put the floorplan as image background of a f7-block
- generate custom icons to be uploaded in /icons/classic
- recall somehow the icons on the f7-block and make them dynamically change colors depending on items’ state
Whether you’re wondering why should I do that, let me show what I’m thinking about:
Here is my home alarm widget with buttons for activating and turning the system off. The last one (Sensori aperti - Opened sensors) actually shows how many sensors belonging to the group are opened.
Clicking on the “Opened sensors” col, I’d like a pop-up to appear, showing the above mentioned f7-card and relative block containing the .svg floorpan
Despite my thoughts,
I do think there’s a smarter way of achieving that and avoiding, in eg., the difficulty I’ll have to face trying to arrange all this icons exactly on window and door’s openings on the background image.
Do you have any ideas?
Thank you
Luca