Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[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

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

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

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

Die Variante

<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:

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

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

itemValue({{batteries}})

erreiche.

Hat jemand eine Idee, wie ich

{{'%.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.

[mcm1957]

@jahnbes
I suggest to use the german section for german questions...

[Homoran]

@mcm57 suggestion accepted

[jahnbes]

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

und der zugehörige html-Code:

<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:

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