Setpoint Widget für HABPanel

[PeterA]

Für alle die es vielleicht interessiert habe ich ein Setpoint Widget gefunden welches
im HABPanel ganz einfache + und - Buttons erzeugt.
Das Slider Widget war mir zur Einstellung der Lautstärke am Verstärker zu ungenau denn ab und zu hat man
ruckzuck die Lautstärke zu Laut eingestellt.

hier der Code:

Code: Alles auswählen

<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>

Min und Max (hier 0 bis 30) kann im Widget begrenzt werden ebenso die Schritte (hier 0.5)

Viel Spass damit.

[EMaster]

Vielen Dank für das Widget!!!
Wie hast Du denn die anderen Buttons, welche in Deinem Screenshot noch zu sehen sind realisiert? Bordmittel oder auch eigener Code???

[PeterA]

Da ist doch garnix zu sehen
Aber ja, untendrunter sind ganz normale Buttons die hier einen festen Wert an ein Item senden
für vor definierte Lautstärke Stufen.

[EMaster]

Also, ich weiß nicht wo das Problem liegen soll aber bei mir zerschießt das Widget die anderen Widgets nebenan.

2020-11-27 23_06_57-Window.png

Hast Du vielleicht eine Idee, was da schief läuft?

[PeterA]

Ich würde sagen die Höhe des Widget ?
Hier mal mein Code zum Vergleich:

Code: Alles auswählen

  <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>  

[EMaster]

Also irgendwas stimmt da bei mir nicht.
Ich habe genau die gleichen Einstellungen, wie Du aber ein ganz seltsames Verhalten (siehe Anhang).
Ist das bei Dir genauso?

SetPointDenon.zip

[Hulli]

Hi Zusammen,

ich benutze OpenHab 4.03.
Leider funktioniert das bei mir nicht.
Ich weiß nicht was ich falsch mache oder was mir fehlt.
Folgendes geht nicht:

Weder der Minus noch der Plus Button führen irgendetwas aus. Der dargestellte Werte stimmt aber.
Mein Item habe ich als setpoint deklariert und wird auch so dargestellt.
Das Gerät was ich steuern will ist ein Tado Heizungsthermostat. Mit einem Standard-Slider läßt es sich problemlos steuern.
Der ist aber nur semioptimal da ich das alles auf einem Pad habe und mit den Finger der Slider teilweise verdeckt wird.

Bin echt ratlos?
Kennt jemand eine Lösung?

lg Hulli


hier mein Code:

Code: Alles auswählen

<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: 15px
} 
button:active 
{
  filter: brightness(130%);
  -webkit-filter: brightness(130%);
}
</style>

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

[oh73]

war mal neugierig und hab den Plus Minus Button auch mal versucht,

beim ersten Versuch hat es mir auch die Buttons nebenan zerschossen!

aber schnell gemerkt das im Script die button Einstellungen meine button Einstellungen überschreibt.

hab dann einfach aus button ein buttonpm gemacht.
meine Buttons sind dann nicht mehr zerstört worden,
aber die Ausrichtung vom Text war da nicht richtig, deshalb beim Style für buttonpm noch

Code: Alles auswählen

display: flex;
  align-items: center;
  justify-content: center;

hinzu gefügt.

und schon funktioniert alles wie es soll!
Wichtig das Item "DenonAVRX2000_MainZone_Volume" sollte vorhanden sein und ein Zahlenwert drin sein, wenn Wert NULL dann geht das nicht!