Habpanel Kacheln

Allgemeine Fragen rund um die "Smart Home" Hardware/Komponenten

Moderatoren: seppy, udo1toni

Mikele
Beiträge: 30
Registriert: 3. Jun 2021 12:04

Habpanel Kacheln

Beitrag 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

oh73
Beiträge: 285
Registriert: 7. Mär 2021 14:49
Answers: 1

Re: Habpanel Kacheln

Beitrag 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.
OH 4.0.3 auf HP 26o G1 Dm Mini Pc mit MX_Linux

Mikele
Beiträge: 30
Registriert: 3. Jun 2021 12:04

Re: Habpanel Kacheln

Beitrag 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 ! :D
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
Beiträge: 285
Registriert: 7. Mär 2021 14:49
Answers: 1

Re: Habpanel Kacheln

Beitrag 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!
OH 4.0.3 auf HP 26o G1 Dm Mini Pc mit MX_Linux

Mikele
Beiträge: 30
Registriert: 3. Jun 2021 12:04

Re: Habpanel Kacheln

Beitrag 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 ?? :o

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
Beiträge: 285
Registriert: 7. Mär 2021 14:49
Answers: 1

Re: Habpanel Kacheln

Beitrag 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!
OH 4.0.3 auf HP 26o G1 Dm Mini Pc mit MX_Linux

Benutzeravatar
PeterA
Beiträge: 1052
Registriert: 8. Feb 2019 12:12
Answers: 13

Re: Habpanel Kacheln

Beitrag von PeterA »

Hallo oh73,

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


Gruß Peter
- OpenHab 2.4
#PWRUP

oh73
Beiträge: 285
Registriert: 7. Mär 2021 14:49
Answers: 1

Re: Habpanel Kacheln

Beitrag von oh73 »

ja,

siehe oben beim Schalter wird das ja gemacht!
OH 4.0.3 auf HP 26o G1 Dm Mini Pc mit MX_Linux

Benutzeravatar
PeterA
Beiträge: 1052
Registriert: 8. Feb 2019 12:12
Answers: 13

Re: Habpanel Kacheln

Beitrag 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
- OpenHab 2.4
#PWRUP

oh73
Beiträge: 285
Registriert: 7. Mär 2021 14:49
Answers: 1

Re: Habpanel Kacheln

Beitrag 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.
OH 4.0.3 auf HP 26o G1 Dm Mini Pc mit MX_Linux

Antworten