Buttons to Increase/Decrease Item Value

I’m very new to Angular (as in no experience) so have been getting by with adapting other examples, so apologies if this is actually straight forward.

One thing I struggle with on my tablet is increasing and decreasing the volume. I just kind of stab at the screen at the rough place that I want the volume to be. What would be preferred is a Vol+ and Vol- button.

I’ve managed to get the following (volumeStep is a number set to 5 in my setup) which I can successfully change a volume of 5 to 0 with the minus button, then back to 5 with the plus button (hooray I thought!) and then to 55 with another click of the plus button (damn).

So itemValue + configValue is a string concatenation. If I can do an actual addition that would be great, but I can’t quite work out how and google is giving me the option to create Angular methods, which I’d rather avoid if possible.

So can I do basic math in HabPanel?

Do you search for setpoint?

https://docs.openhab.org/configuration/sitemaps.html

or is HabPanel the keyword, than maybe this can help

https://community.openhab.org/t/manipulate-numbers-via-a-button-in-a-widget/34101
https://community.openhab.org/t/template-widget-tutorial-examples-make-your-own-widget/14211/146

Thanks @hr3 - That worked like a charm. My code looks like this now:

<div class="volume-buttons">
  	<label class="vol-dn"
           ng-click="sendCmd(config.playerVolume, +itemValue(config.playerVolume) - config.volumeStep)"><i class="glyphicon glyphicon-minus"></i></label>
    {{itemValue(config.playerVolume)}}
    <label class="vol-up"
           ng-click="sendCmd(config.playerVolume, +itemValue(config.playerVolume) + config.volumeStep)"><i class="glyphicon glyphicon-plus"></i></label>
  </div>
1 Like

How do you solve min and max? Are you happy to share config please? I think lot of us are interested :slight_smile: Thank you

I have the same concern. Did you solve it? Are you willing to share it?

Thanks!

Just in case somebody is still wondering about min/max values and simple setpoint-like widget, this code works fine for me:

<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: 100%;
  border: 0;
  color: #def;
  outline: none;
  background: #234;
  font-size: 25px
} 
button:active 
{
  filter: brightness(130%);
  -webkit-filter: brightness(130%);
}
</style>

<table> 
  <tr>
    <td>
      <button ng-click="sendCmd('BA_RadiatorSetpoint', +itemValue('BA_RadiatorSetpoint') - 0.5 < 16 ? 16 : +itemValue('BA_RadiatorSetpoint') - 0.5)">
			<i class="glyphicon glyphicon-menu-left"></i>
			</button>
    </td>
    <td>
      <button>
        {{itemValue('BA_RadiatorSetpoint') + " °C"}}
			</button>
    </td>
    <td>
      <button ng-click="sendCmd('BA_RadiatorSetpoint', +itemValue('BA_RadiatorSetpoint') + 0.5 > 30 ? 30 : +itemValue('BA_RadiatorSetpoint') + 0.5)">
			<i class="glyphicon glyphicon-menu-right"></i>
			</button>
    </td>
  </tr>
</table>

which is rendering to:

Screenshot_20190917_200550

3 Likes