ioBroker VIS – JSON Table Widget – Teil 2 – CSS Style

In diesem Artikel beschäftigen wir uns mit dem JSON Table Widget.

Zu keinem anderen Widget habe ich mehr Fragen und Probleme gelesen, wie zu dem ioBroker VIS JSON Table Widget. Mit dem Widget kann eine JSON-Tabelle in der Visualisierung dargestellt werden. JSON-Tabellen werden häufig von Adaptern als zusätzliche Datenpunkte zur Verfügung gestellt, in denen weitere Informationen hinterlegt sind.

Für den Artikel verwende ich hier den Adapter „yr“, mit dem Wetterinformationen des norwegischen Meteorologischen Institut in ioBroker integriert werden können. Der Adapter stellt dabei die Wettervorhersage als einzelne Datenpunkte sowie als JSON-Tabelle zur Verfügung.

Im zweiten Teil wollen wir nun das Aussehen der erstellten Tabelle über CSS verändern.

Im ersten Schritt öffnen wir nun im ioBroker VIS Editor das Projekt sowie die View, in der wie zuvor die JSON-Table eingefügt haben. In den Eigenschaften wechseln wir auf die Lasche CSS. Über die Auswahl kann hier die CSS-Definition für das aktuelle VIS-Projekt oder die globale CSS-Definition gewählt werden. Ich definiere die CSS-Definition für das aktuelle Projekt.

Auf der Lasche CSS können wir nun die folgende CSS-Definition einfügen:

.blacktable 
{
    font-size:12px;
    color:#fbfbfb;
    width:100%;
    border-width: 1px;
    border-color: #686767;
    border-collapse: collapse;
}

.blacktable th 
{
    font-size:14px;
    background-color:#171515;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #686767;
    text-align:left;
}
.blacktable tr 
{
    background-color:#2f2f2f;
}

.blacktable td 
{
    font-size:12px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #686767;
}

Mit der hier eingefügten CSS-Definition erstellen wir eine neue CSS-Klasse mit dem Namen blacktable, welche im aktuellen Projekt verfügbar ist. In der CSS-Klasse werden die Tabellen-Eigenschaften für den Header, die einzelnen Zeilen und Spalten entsprechend konfiguriert. Dabei werden verschiedene Einstellungen für Layout, Farbe und Schrift gesetzt. Für eine genaue Erklärung der Eigenschaften empfehle ich hier die folgende Webseite:

https://www.w3schools.com/css/

Im nächsten Schritt markieren wir nun das JSON-Table Widget. In den Eigenschaften müssen wir nun im Bereich CSS Allgemein die erstellte CSS-Klasse blacktable einfügen. Zudem müssen wir hier die Breite der beiden Spalten setzen. In meinem Beispiel setze ich die Breite auf 100 Pixel (100px).

Ich hoffe euch gefällt dieser Artikel. Über Kommentare unterhalb des Artikels oder per E-Mail freue ich mich wie immer 🙂