Visibility in HABpanel

Is it possible to have widgets dynamically appear/disappear based on item states, like it is in the regular Basic UI sitemap? I.e. if the state of my Audio Power switch is OFF, I’d like to have the volume slider and source selector hide (or at least gray out). I don’t see a configuration option for that, but I guess it could be something that’s added to a custom widget.

+1
I’m also very interested in a solution for this

Just what I was looking for this morning. Anyone with enough habpanel knowledge on how to do this?

Not sure how to make the widgets appear/disappear. But, in a template widget, you can set the opacity of an object based on the value of an item. For example, this is how I show presence in HABpanel. I have one of these for every person in the home. Note that there might be a better way to do this.

<div ng-if="itemValue('PresenceMark')=='CLOSED'">
  <span>
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'man_3'" size="64" ng-style="{opacity: 1.0}"/>
  </span>
</div>

<div ng-if="itemValue('PresenceMark')=='OPEN' || itemValue('PresenceMark')=='NULL'" ng-style="{opacity: 0.1}">
  <span>
      <widget-icon iconset="'eclipse-smarthome-classic'" icon="'man_3'" size="64"/>
  </span>
</div>

I suppose you could extend this to also include a button only when the power is ON.

<div ng-if="itemValue('AudioPower')=='ON'" ng-style="{opacity: 1.0}">
  <!-- Source selector button and image goes here-->
</div>

<div ng-if="itemValue('AudioPower')=='OFF' || itemValue('AudioPower')=='NULL'" ng-style="{opacity: 0.2}">
  <!-- Source selector image goes here-->
</div>
1 Like

My solution based on simulating the container that can be place around a widget. When placing the widget, you need to make sure that you therefore do not embed it in a container and that you select no background (check the appropriate boxes in settings of widget, I unfortunately do not know their english writing since I am on a german sysem). The widget is then wrapped like this:

<div style="height: 100%">
  <div style="display: flex; height: 100%; align-items: center; justify-items: center; padding: 10px; background: {{itemValue('myswitch') == 'ON' ? 'var(--box-bg,#234)' : 'none'}};">
     <div style="flex: 1" ng-show="itemValue('myswitch') == 'ON'">
       my widget
     </div>
   </div>
 </div>

Use myswitch to hide or show it. This however only works if there is no shadow around the widget (for instance translucent theme)

1 Like