Tabellen in HABPanel programmieren, flexibel, mit ng-repeat

jahnbes · Beitrag von **jahnbes** » 17. Apr 2024 14:52

Ziel war eine Tabelle in einer HABPanel-Visualisierung zur einheitlichen Darstellung von Werten von ZigBee-Geräten. Wobei besonderer Wert darauf gelegt wurde, durch eine flexible Programmierung der Tabelle es möglich zu machen, mit wenig Aufwand neue ZigBee-Geräte in die Tabelle aufzunehmen.

Die flexible Programmierung der Tabellen erfolgt unter Verwendung der Direktive ng-repeat.

ng-repeat ist eine Direktive in AngularJS. So ziemlich jede Anwendung, die mit Collections operiert, benötigt den Einsatz dieser Direktive, um die Sammlungen von Daten in einer View bequem ausgeben zu können. Hier werden sie benutzt, um Tabellen in HABPanel dynamisch gestalten zu können, das heißt, eine Zeile der Tabelle wird als Schablone programmiert, dann eine Liste der darzustellenden Elemente (z.B. ZigBee-Geräte) erstellt und mit Hilfe von ng-repeat diese Liste abgearbeitet und die Tabelle mit allen Zeilen (ZigBee-Geräten) erzeugt. Neben der einfacheren Programmierung der Tabelle (es muss nur eine Zeile programmiert werden) hat das auch deutliche Vorteile, wenn Elemente (Zeilen - ZigBee-Geräten) zur Tabelle hinzukommen oder entfallen. im Code muss dann nur die Liste der Geräte geändert werden,

Hier die kleine Tabelle:

tabelle_klein.jpg

Hier der Code der kleine Tabelle:

Code: Alles auswählen

<!--
20. Februar 2024
D:\develop\Visuali - sierung\HABpanel\Zigbee\zigbee_batteriezustand_3.html
-->
<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="2">
    <caption>&nbsp;&nbsp;&nbsp;Zigbee-Schalter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Batteriezustand</caption>
    <div ng-app="" ng-init="geraete=[ 
    {raum:'Heizung-Eco (Flur)',adresse:'zigbee.0.0c4314fffe1e2d25.'},
    {raum:'Multi-Licht (Flur)',adresse:'zigbee.0.b4e3f9fffed1bd72.'},
    {raum:'Klingelkontakt (Flur)',adresse:'alias.0.Flur.Tuerklingel.'}
    ]">
        <tr>
            <th>Raum</th>
            <th>Prozent</th>
        </tr>
        <tr ng-repeat="x in geraete">
            <td>{{x.raum}}</td>
            <td ng-init="percentV=itemValue(x.adresse+'battery')" ng-class="{'alarm': percentV <= 45, 'attention': percentV > 45 && percentV <= 70}">
                {{'%.0f' | sprintf:percentV}} %</td>
        </tr>
    </div>
</table>

Hier die große Tabelle, die zusätzliche Mess- und andere Werte auflistet::

tabelle_gross.jpg

Hier der Code der großen Tabelle:

Code: Alles auswählen

<!--
22. Februar 2024
D:\Projekte\Visualisierung\HABpanel\Zigbee\zigbee_geraete_tabelle.html
-->
<style>
    th {
        text-align: center;
        color: black;
        background-color: #67eea8b7;
        font-size: large;
        font-weight: normal;
    }

    td {
        text-align: center;
        color: white;
        font-size: large;
    }

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

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

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

<table class="table table-bordered" columns="9">
    <caption>&nbsp;&nbsp;&nbsp;Zigbee - Geräte</caption>
    <div ng-app="" ng-init="geraete=[ 
    {art:'Thermometer',raum:'Arbeitszimmer',adresse:'zigbee.0.00158d0008ce4367.'},
    {art:'Thermometer',raum:'Schlafzimmer',adresse:'zigbee.0.00158d0008c11f15.'},
    {art:'Thermometer',raum:'Wohnzimmer',adresse:'zigbee.0.00158d0008385f00.'},
    {art:'Thermometer',raum:'Flur',adresse:'zigbee.0.00158d0008c12e72.'},
    {art:'Thermometer',raum:'Küche',adresse:'zigbee.0.00158d0007f7a4b5.'},
    {art:'Thermometer',raum:'Bad',adresse:'zigbee.0.a4c138a06538b164.'},
    {art:'Thermometer',raum:'Keller',adresse:'zigbee.0.a4c13863047b5222.'},
    {art:'Thermometer',raum:'Waschküche',adresse:'zigbee.0.a4c138374fc3121f.'},
    {art:'Schalter Heizung-Eco',raum:'Flur',adresse:'zigbee.0.0c4314fffe1e2d25.'},
    {art:'Schalter Multi-Licht',raum:'Flur',adresse:'zigbee.0.b4e3f9fffed1bd72.'},
    {art:'Klingelkontakt',raum:'Flur',adresse:'alias.0.Flur.Tuerklingel.'},
    {art:'Repeater',raum:'Küche',adresse:'zigbee.0.e0798dfffee7ddd4.'},
    {art:'Repeater',raum:'Keller',adresse:'zigbee.0.70ac08fffe68a9b2.'}
    ]">
        <tr>
            <th>Art</th>
            <th>Raum</th>
            <th>Verfügbarkeit</th>
            <th>Verbindung</th>
            <th>Temperatur</th>
            <th>Luftfeuchtigkeit</th>
            <th>Luftdruck</th>
            <th>Batterie</th>
            <th>Spannung</th>
        </tr>
        <tr ng-repeat="x in geraete">
            <td>{{x.art}}</td>
            <td>{{x.raum}}</td>
            <td ng-init="availableV=itemValue(x.adresse+'available')" ng-class="{'alarm': availableV == 'false'}">
                {{availableV}}</td>
            <td ng-init="qualityV=itemValue(x.adresse+'link_quality')" ng-class="{'alarm': qualityV <= 20, 'attention': qualityV > 20 && qualityV < 100}">
                {{'%.0f' | sprintf:qualityV}} %</td>
            <td ng-if="itemValue(x.adresse+'temperature')">{{'%.2f' | sprintf:itemValue(x.adresse+'temperature')}} °C</td>
            <td ng-if="!itemValue(x.adresse+'temperature')"> </td>
            <td ng-if="itemValue(x.adresse+'humidity')">{{'%.2f' | sprintf:itemValue(x.adresse+'humidity')}} %</td>
            <td ng-if="!itemValue(x.adresse+'humidity')"> </td>
            <td ng-if="itemValue(x.adresse+'pressure')">{{'%.2f' | sprintf:itemValue(x.adresse+'pressure')}} mb</td>
            <td ng-if="!itemValue(x.adresse+'pressure')"> </td>
            <td ng-if="itemValue(x.adresse+'battery') && x.raum != 'Keller' && x.raum != 'Waschküche'" ng-init="percentV=itemValue(x.adresse+'battery')" ng-class="{'alarm': percentV <= 45, 'attention': percentV > 45 && percentV <= 70}">
                {{'%.0f' | sprintf:percentV}} %</td>
            <td ng-if="!itemValue(x.adresse+'battery') || x.raum == 'Keller' || x.raum == 'Waschküche'"> </td>
            <td ng-if="itemValue(x.adresse+'voltage') && x.raum != 'Keller' && x.raum != 'Waschküche'">{{'%.2f' | sprintf:itemValue(x.adresse+'voltage')}} V</td>
            <td ng-if="!itemValue(x.adresse+'voltage') || x.raum == 'Keller' || x.raum == 'Waschküche'"> </td>
        </tr>
    </div>
</table>

Den ausführlichen Beitrag mit weiteren Erläuterungen findet Ihr unter:
https://forum.iobroker.net/topic/74161/ ... -ng-repeat