Habpanel Kacheln

[Mikele]

Hallo,

wie bekomme ich zb. 2 Schalter in eine Kachel ?
Bisher habe ich in Habpanel 1 Kachel jeweils 1 Schalter !

Nun habe ich gesehen das es Habpanel gibt wo 1 Kachel ist aberin der Kachel 2 oder 3 Schalter als Gruppe sind und noch ein kleiner weisser Rahmen drum herum !
Kann mir das einerkurz erklären


Gruss Mikele

[oh73]

musst du ein Widget selbst erstellen.

bei Widget hinzu fügen, Vorlage auswählen.

und dann z.B. sowas einfügen,

Code: Alles auswählen

<!-- rechte Seite -->
<!-- Button 1-->
<button style="top:0;left:0;right:0;position:absolute;width: 100%;hight: 25%;
border: 1; color: white; background: green;
font-size: 18px"  ng-if="itemValue('xxxx')=='ON'" ng-click="sendCmd('xxxx', 'OFF')" >S-1  {{itemValue('xxxx')}} </div>
</button>
<button style="top:0;left:0;right:0;position:absolute;width: 100%;hight: 25%;
border: 1; color: white; background: darkblue;
font-size: 18px"  ng-if="itemValue('xxxx')=='OFF'" ng-click="sendCmd('xxxx', 'ON')" >S-1  {{itemValue('xxxx')}} </div>
</button>

<!-- Button 2-->
<button style="top:25%;left:0%;right:0;position:absolute;width: 100%;hight: 25%;
border: 1; color: white; background: green;
font-size: 18px"  ng-if="itemValue('yyyy')=='ON'" ng-click="sendCmd('yyyy', 'OFF')" >S-2  {{itemValue('yyyy')}} </div>
</button>
<button style="top:25%;left:0%;right:0;position:absolute;width: 100%;hight: 25%;
border: 1; color: white; background: darkblue;
font-size: 18px"  ng-if="itemValue('yyyy')=='OFF'" ng-click="sendCmd('yyyy', 'ON')" >S-2  {{itemValue('yyyy')}} </div>
</button>

must du nur bei xxxx Item name von dem 1. Schalter und
bei yyyy Item Name vom 2. Schalter einfügen.

[Mikele]

Hallo oh73,

kann ich das so 1:1 übernehmen in Vorlage einfügen und abändern ?

Welchen ITEM Namen ? Sorry da stehe ich auf dem Schlauch !
Den"normalen" Item Namen den ich auch im Widget einfüge = openHabItem oder die Bezeichnung hue:group:ecb................usw ?
Bei mir tut sich garnichts nur blaues leeres Feld !

Bin nicht so der Fachmann, sorry

Gruss Mikele

[oh73]

ja, den 'normalen ' Item Name für xxxx und yyyy einfügen!

insgesamt 6 mal xxxx und 6 mal yyyy ersetzen , dann solte das funktionieren!

wenn man aussehen , Größe und Position verändern will, dann muss man in der Zeile nach <button die Werte anpassen!
versuchen schadet nichts!

[Mikele]

Hallo oh73,

hat funktioniert , danke ! Habe die Schalter erstellt und auch schon Farbe verändert .
Für mehere Schalter habe ich einfach kopiert und Button erweitert.
Muss nachher nur nochmal schauen wie ich die Abstände zwischen den Schalter ändern kann !
habe 3 Schalter da sind die Abstände gut und der 4. hängt weit weg Wenn ich den auf 0 Stelle überdeckt er den ersten Schalter ??

Geht das mit zb, Ping Router/ NAS oder Temperaturanzeigen etc. genauso , weil es sind kein Schalter !!

Gibt es irgendwo eine Anleitung wo man nachlesen kann ?

Danke dir schonmal herzlich !! Sieht sehr gut aus !
Gruss Mikele

[oh73]

das sollte mit jedem Item gehen.

nur Anzeige ist dabei noch einfacher,
kann man ja die Zustandsabfrage und den Schaltbefehl weg lassen,

Code: Alles auswählen

<button style="top:0;left:0;right:0;position:absolute;width: 100%;hight: 25%;
border: 1; color: white; background: green;
font-size: 18px" >S-1  {{itemValue('xxxx')}} </div>
</button>

wo es eine richtige Anleitung gibt, weiß ich im Moment auch nicht,
ich frag da immer Tante Google!

[PeterA]

Hallo oh73,

kann man auch anhand eines Item Zustand die Farbe eines Button/Kachel ändern ?


Gruß Peter

[oh73]

ja,

siehe oben beim Schalter wird das ja gemacht!

[PeterA]

Hi oh73,

ah ich verstehe... langsam

Hintergrund meiner Frage ist folgender:

Ich möchte eine Kachel "blasser" anzeigen lassen wenn das Gerät nicht Online ist.
Den Status hole ich mir über ein Item. ON oder OFF ist dann der Zustand.
Wo muss ich das "einbauen" ?
Hier der Code zur aktuellen Kachel:

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>

Gruß Peter

[oh73]

tut mir leid, da blicke ich im Moment auch nicht durch.

einzelne Buttons die Farbe ändern ist kein Prolem, aber die ganze Kachel?

weiß nicht, vielleicht die ganze Kachel zu einem Button machen?

ob dann aber wieder ein Button im Button geht? müsste man versuchen.