Visibility in HABpanel

Apps & Services HABPanel
1

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.

2

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

4

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

5

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
6

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
7

Hi there,

iam not so familiar with the “habpanel” code.
Here is my Volume Silder Widget:

<style>
table{
  width: 100%;
  margin: 0;
  padding: 0;
}
td{
  width: 33.3333333333%;
  position: relative;
}
td:after {
  content: '';
  display: block;
  margin-bottom: 100%;
}
button {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 57%;
  border: 0;
  color: #def;
  outline: none;
  background: #234;
  font-size: 20px
} 
button:active 
{
  filter: brightness(130%);
  -webkit-filter: brightness(130%);
}
</style>

<table> 
  <tr>
    <td>
      <button ng-click="sendCmd('DenonAVRX2000_MainZone_Volume', +itemValue('DenonAVRX2000_MainZone_Volume') - 0.5 < 0 ? 0 : +itemValue('DenonAVRX2000_MainZone_Volume') - 0.5)">
			<i class="glyphicon glyphicon-minus"></i>
			</button>
    </td>
    <td>
      <button>
        {{itemValue('DenonAVRX2000_MainZone_Volume') + " "}}
			</button>
    </td>
    <td>
      <button ng-click="sendCmd('DenonAVRX2000_MainZone_Volume', +itemValue('DenonAVRX2000_MainZone_Volume') + 0.5 > 30 ? 30 : +itemValue('DenonAVRX2000_MainZone_Volume') + 0.5)">
			<i class="glyphicon glyphicon-plus"></i>
			</button>
    </td>
  </tr>
</table>

I want to hide the Widget if my Denon is off.
Denon item:

DenonAVRX2000_MainZone_Power

The State of the Item can be ON or OFF.

Could somebody help me with the code ?

Br Peter