Seite 1 von 2
Habpanel Kacheln
Verfasst: 12. Dez 2021 20:34
von 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
Re: Habpanel Kacheln
Verfasst: 13. Dez 2021 13:01
von 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.
Re: Habpanel Kacheln
Verfasst: 14. Dez 2021 11:32
von 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
Re: Habpanel Kacheln
Verfasst: 14. Dez 2021 11:50
von 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!
Re: Habpanel Kacheln
Verfasst: 15. Dez 2021 11:23
von 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
Re: Habpanel Kacheln
Verfasst: 15. Dez 2021 12:05
von 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!
Re: Habpanel Kacheln
Verfasst: 15. Dez 2021 12:51
von PeterA
Hallo oh73,
kann man auch anhand eines Item Zustand die Farbe eines Button/Kachel ändern ?
Gruß Peter
Re: Habpanel Kacheln
Verfasst: 15. Dez 2021 14:30
von oh73
ja,
siehe oben beim Schalter wird das ja gemacht!
Re: Habpanel Kacheln
Verfasst: 15. Dez 2021 14:53
von 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
Re: Habpanel Kacheln
Verfasst: 15. Dez 2021 17:37
von 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.
