Is it possible to create a control panel with a sidebar?

Can OpenHab create a control panel looking like the following (I think from Apple’s homekit).

  1. I like the look of the gradient background and translucent buttons with rounded corners, but more specifically…
  2. Can we create a sidebar that loads advanced controls for the active device (on the right side). Something where after touching an on/off square for a dimmable light it then loads dimmer controls into a sidebar and maybe any timers setup for the device. Perhaps a long press loads the settings. Whatever works best.


  • If it was a dimmer device you would get dimmer controls.
  • With an RGB light strip, then you would get full RGB color controls.
  • A temperature readout might bring up the AC controls.
  • A speaker mute button might bring up a full audio player with volume.
  • Maybe any devices with an energy meter built in would bring up the energy history.
  • Etc.

I can’t answer your direct question beyond the fact that with enough work you can do pretty much anything in HABPanel. But there is nothin out of the box for openHAB that works like described.

I’ve moved this to a more appropriate category. The Tutorials and Solutions category is a place for users to post a tutorial, not a place for people to request a tutorial.

In the MainUI, the basics of a panel in a custom widget are trivial. An absolute minimum example would be something like:

component: f7-card
  title: Panel Demo
    - component: oh-button
        panelOpen: .panel.test-panel-thing
        text: ="Open Panel"
    - component: f7-panel
        side: left
        class: test-panel-thing
          - component: oh-button
              panelClose: .panel.test-panel-thing
              text: ="Close Panel"

Beyond that, as Rich said for HABPanel, how complex it gets is just a matter of how much time you want to put into it.