Seite 1 von 1

Setpoint Widget für HABPanel

Verfasst: 3. Okt 2020 18:12
von 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.

Bild

Re: Setpoint Widget für HABPanel

Verfasst: 1. Nov 2020 18:28
von 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???

Re: Setpoint Widget für HABPanel

Verfasst: 1. Nov 2020 18:32
von 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.

Re: Setpoint Widget für HABPanel

Verfasst: 27. Nov 2020 23:12
von 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?

Re: Setpoint Widget für HABPanel

Verfasst: 27. Nov 2020 23:39
von 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>  

Re: Setpoint Widget für HABPanel

Verfasst: 4. Dez 2020 23:43
von 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

Re: Setpoint Widget für HABPanel

Verfasst: 16. Okt 2023 20:00
von 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>


Re: Setpoint Widget für HABPanel

Verfasst: 16. Okt 2023 22:05
von 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!