ioBroker, HABPanel und ng-repeat - die 2.

[jahnbes]

Ich versuche in einer HABPanel-Visualisierung eine Tabelle darzustellen, in der die Prozentzahl des Batteriezustandes meiner ZigBee-Geräte gelistet ist. Dabei soll beim Unterschreiten von 70% der Hintergrund der Zelle gelb, beim Unterschreiten von 40% rot erscheinen.

Alle Versuche, dieses mit Hilfe der ng-repeat-Direktive zu erreichen sind gescheitert. Das Problem liegt offensichtlich in der Codezeile

Code: Alles auswählen

 {{'%.2f' | sprintf:itemValue({{batteries}}) }}

Hier das ganze Problem in abgespeckter Form in einer Listendarstellung, die nicht funktioniert:

Code: Alles auswählen

<ul>
    <li ng-repeat="batteries in ['zigbee.0.0c4314fffe1e2d25.battery', 'zigbee.0.b4e3f9fffed1bd72.battery']">
        {{'%.2f' | sprintf:itemValue({{batteries}}) }}
    </li>
</ul>

Die Variante

Code: Alles auswählen

<ul>
    <li ng-repeat="batteries in ['zigbee.0.0c4314fffe1e2d25.battery', 'zigbee.0.b4e3f9fffed1bd72.battery']">
        {{batteries}}
    </li>
</ul>

funktioniert problemlos. Nur ist es nicht das, was ich will, da so nur die zwei Strings ausgegeben werden:

Code: Alles auswählen

zigbee.0.0c4314fffe1e2d25.battery
zigbee.0.b4e3f9fffed1bd72.battery

Ich will aber den Inhalt der Items haben, wie ich es üblicherweise mit

Code: Alles auswählen

itemValue({{batteries}})

erreiche.

Hat jemand eine Idee, wie ich

Code: Alles auswählen

 {{'%.2f' | sprintf:itemValue({{batteries}}) }}

zum Laufen bekommen? Oder einen Tipp, wo ich nachlesen könnte?
Ich habe schon in etlichen Foren, auch allen von openHAB und HABPanel selbst gesucht und leider nichts gefunden.

[oh73]

Hallo,

ich arbeite ja viel mit dem Hab-Panel,
nur meistens mit Button´s

Beispiel von einem Button der mehrere Hintergrund Farben annehmen kann,

Code: Alles auswählen

<button class="a button energie" style="top:0%;left:0%;width:100%;bottom:50%; border: 3px solid blue;
	background: {{itemValue('momentan_Verbrauch') < -400 ? 'green' : itemValue('momentan_Verbrauch') < 0 ? 'lime' : 
	itemState('momentan_Verbrauch') < 300 ? 'yellow' : itemState('momentan_Verbrauch') < 1000 ? 'hotpink' : itemState('momentan_Verbrauch') < 4000 ? 'red' : 'orange'}} ;">
	{{'%.0f' | sprintf:itemValue('momentan_Verbrauch')}} W 
</button>

als Tabellenfeld würde das so aussehen,

Code: Alles auswählen

<table>
<tr>
<td bgcolor = "{{itemValue('momentan_Verbrauch') < -400 ? 'green' : itemValue('momentan_Verbrauch') < 0 ? 'lime' : itemState('momentan_Verbrauch') < 300 ? 'yellow' : itemState('momentan_Verbrauch') < 1000 ? 'hotpink' : itemState('momentan_Verbrauch') < 4000 ? 'red' : 'orange'}} ";>
	{{'%.0f' | sprintf:itemValue('momentan_Verbrauch')}} W 
</td>
</tr>

</table>

du willst aber mehrere Felder mit ng-repeat darstellen?

dann würde ich das mit einer Gruppe machen.

Beispiel :

Code: Alles auswählen

<div ng-repeat="(i, item) in itemsInGroup('gmeineGruppe') |  orderBy:'label' " >
<table>
<tr>
<td bgcolor = "{{item.state  < 70 ? 'green' : 'red'}}" >
		{{item.state}}
</td>
</tr>
</div>
</table>

[jahnbes]

Hallo oh73,

vielen Dank für Deine Antwort, vor allem der Hinweis auf itemsInGroup. Das hatte ich im Netz schon gesehen. Leider war kein einziges wirklich komplettes Beispiel dabei. Auch eine umfassende Dokumentation war nicht aufzutreiben.
Vielleicht kannst Du mir weiterhelfen über Dein Beipiel hinaus? Vielleicht ist meine Frage auch nur zu sehr vom Nichtwissen geprägt.

Wie muss in Deinem Beispiel die "gmeineGruppe" angelegt werden und wo? Wie muss die Gruppendefinition im Code Deines Beispiels exakt aussehen?

Code: Alles auswählen

<div ng-repeat="(i, item) in itemsInGroup('gmeineGruppe') |  orderBy:'label' " >
<table>
<tr>
<td bgcolor = "{{item.state  < 70 ? 'green' : 'red'}}" >
		{{item.state}}
</td>
</tr>
</div>
</table>

Es müsste eine Liste derartiger Items zu vereinbaren sein:

Code: Alles auswählen

'zigbee.0.0c4314fffe1e2d25.battery', 'zigbee.0.b4e3f9fffed1bd72.battery', ...

Daran bin ich bis jetzt immer gescheitert, habe dazu nichts gefunden. Es wäre Klasse, wenn Du mir einen Tipp geben könntest.

Danach kümmere ich mich um die Farben.

Viele Grüße, jahnbes.

[oh73]

kommt darauf an wie du deine Items angelegt hast,

Beispiel Zigbee.items Datei

Code: Alles auswählen

Group gZigbee 				"Zigbee Steckdosen"		
Group gZigbeeschalter		"Zigbee Schalter"		

Switch  	osram1		"Plug_1 Led Handlauf"  		<poweroutlet>	(gZigbee)	{ channel="deconz:onofflight:00212EFFFF072015:84182600000ee37a03:switch" }
Switch  	osram2    	"Plug_2 WB, Carport"  		<poweroutlet>	(gZigbee)	{ channel="deconz:onofflight:00212EFFFF072015:7cb03eaa0a01f19a03:switch" }
Switch 		osram4     	"Plug_4 Kamera Einfahrt"  	<poweroutlet>	(gZigbee)	{ channel="deconz:onofflight:00212EFFFF072015:7cb03eaa0a032a9c03:switch" }
Switch  	osram3    	"Plug_3 Kamera Garten"  	<switch>		(gZigbee)	{ channel="deconz:onofflight:00212EFFFF072015:7cb03eaa0a02a4e803:switch" }

da legt man am Anfang ein Group Item an, und bei dem Item zwischen Label und Channel in runden Klammern die Gruppe angeben.

hast du die Items über die WebGui angelegt, kannst du unten die Gruppe angeben, vorher ein Group Item erstellen!

groupitems.png

[jahnbes]

Hallo oh73,
ich glaube, da muss ich ein wenig mea culpa machen. Es ist auch schon kritisiert worden, ich habe hier nicht klar geschrieben, dass ich nicht openHAB, sondern der ioBroker nutze. Da sieht das mit dem ng-repeat und den items doch anders aus.
Ich dachte, mein Problem ist rein ein Problem von HABPanel und seiner internen Programmierung, aber, verständlicherweise, die Abhängigkeiten gehen doch auch eine Stufe höher.
Ich danke Dir trotzdem für Deine geduldigen Erklärungen! Bei der Beschäftigung mit den Farben und den if's werden sie mir auf jeden Fall helfen.
Viele Grüße, jahnbes.

[jahnbes]

Das Problem ist gelöst. Hier auf die Schnelle ein Screenshot der Lösung

zigbee_batteriezustand_1.jpg

und der zugehörige html-Code:

Code: Alles auswählen

<style>
    caption {
        color: white;
        font-size: x-large;
    }

    th {
        text-align: center;
        color: black;
        background-color: #67eea8b7;
        font-size: large;
        font-weight: normal;
    }

    .alarm {
        color: black;
        background-color: rgb(253, 116, 116);
    }

    .attention {
        color: black;
        background-color: rgb(252, 234, 115);
    }

    td {
        text-align: center;
        color: white;
        font-size: large;
    }
</style>

<table class="table table-bordered" columns="3">
    <caption>&nbsp;&nbsp;&nbsp;Zigbee-Thermometer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Batteriezustand&nbsp;&nbsp;&nbsp;- 1 -</caption>
    <div ng-app="" ng-init="geraete=[ 
    {raum:'Arbeitszimmer',adresse:'zigbee.0.00158d0008ce4367.'},
    {raum:'Schlafzimmer',adresse:'zigbee.0.00158d0008c11f15.'},
    {raum:'Wohnzimmer',adresse:'zigbee.0.00158d0008385f00.'}
    ]">
        <tr>
            <th>Raum</th>
            <th>Prozent</th>
            <th>Spannung</th>
        </tr>
        <tr ng-repeat="x in geraete">
            <td>{{x.raum}}</td>
            <td ng-init="percentV=itemValue(x.adresse+'battery')" ng-class="{'alarm': percentV <= 40, 'attention': percentV > 40 && percentV < 70}">
                {{'%.0f' | sprintf:percentV}} %</td>
            <td>{{'%.2f' | sprintf:itemValue(x.adresse+'voltage')}} V</td>
        </tr>
    </div>
</table>

Und hier ein Screenshot einer komplizierteren Tabelle:

zigbee_geraete_tabelle.jpg

Ich bereite einen ausführlichen Beitrag vor. Wenn er im Netz ist, verlinke ich ihn hier.
Viele Grüße, jahnbes.