HABPanel Migration Experience

Since the update to version 5.2, openHAB has supported file-based widget deployment. That was the final challenge preventing me from replacing my legacy habpanel setup.

I currently use the habpanel dashboard as a central control unit in the living room. Consequently, it displays pretty much every value that is important to see “at a glance.” And since this solution has been in operation for nearly 10 years, that amounts to quite a few values.

I had put this task off for a long time because I dreaded the effort involved. But with this release, I decided to just go for it. And I have to say: it went faster and easier than I expected. The performance is excellent, too. Due to the sheer number of items (over 1,000), the old habpanel setup was only usable with a custom event routine; those hacks are no longer necessary.

I’m thrilled with the final result—I’m as excited as a kid—so I wanted to share it with you all. :slight_smile:

Below, you find my old legacy habpanel based dashboard

and here is my new dashboard, based on custom widgets.

I also want to mentioning the many small details in the hallway floor plan:

  • Individual rooms are highlighted in color when the lights are on; tapping that area turns the light off.
  • Windows are displayed in red if they are open. They appear green if the roller shutters are down, and yellow if the shutters are up but should actually be closed.
  • The small outdoor light icons on the floor plan glow yellow when the lights are on and red when the corresponding motion detectors are switched off.
  • Windows are also correctly illuminated in the side view of the house.
  • The CO2 display on the floor plan changes color based on the reading (red, yellow, or green).

The arrows on the three widgets (energy, ventilation, and heating) are animated and appear only when there is activity.

You can find all the corresponding widget templates here.

And last but not least, the camera widget. It displays a live snapshot from my Frigate service every three seconds. Clicking on it triggers an animated zoom to full-screen mode. What makes this special is that it directly displays the websocket-based stream from Frigate—so no mjpeg or anything like that; the browser itself supports the format natively. The only extra step is a custom implementation that reads the stream and passes it to the video element, but I’d like to share that code with you as well.

I love the new look! Nice dashboard!