Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Zellen einfärben, je nach Wert

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    2.3k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    958

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

Zellen einfärben, je nach Wert

Geplant Angeheftet Gesperrt Verschoben Visualisierung
4 Beiträge 2 Kommentatoren 200 Aufrufe 2 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • B Offline
    B Offline
    Boergi23
    schrieb am zuletzt editiert von
    #1

    Hallo liebe Spezialisten,

    ich möchte in VIS den Batteriestand meiner Bewegungsmelder und Taster überwachen. Ich habe eine Tabelle erstellt, die mir die Werte der jeweiligen Datenpunkte wiedergibt. Jetzt möchte ich den Zustand noch besser sichtbar machen, indem die Zelle, in welcher der Wert steht, je nach Wert farbig ist (1-10 = rot, 10-20 = gelb, 20 - 100 grün). Könnt ihr mir helfen?

    html-code:

    <style type="text/css">
    #{wid} .tg {
    border-collapse:collapse;border-spacing:0;

    }
    #{wid} .tg td{
    font-family:Arial, sans-serif;font-size:7px;padding:2px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;

    }
    #{wid} .tg th{
    font-family:Arial, sans-serif;font-size:7px;font-weight:normal;padding:7px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;

    }
    #{wid} .tg .tg-srqd{
    font-size:9px;background-color:#ffccc9

    }
    #{wid} .tg .tg-a1rn{
    background-color:#ffffc7

    }
    #{wid} .tg .tg-ezsn{
    font-size:10px;background-color:#ffccc9;color:#000000;width:25;

    }
    #{wid} .tg .tg-vzae{
    font-size:8px;background-color:#fffc9e;

    }
    </style>
    <table class="tg">
    <tr>
    <th class="tg-ezsn">Bereich</th>
    <th class="tg-ezsn">Gerät</th>
    <th class="tg-ezsn">Kapazität</th>
    <th class="tg-ezsn">Status</th>
    <th class="tg-srqd">Batterie</th>
    </tr>
    <tr>
    <td class="tg-vzae">Küche</td>
    <td class="tg-a1rn">Bewegungsmelder</td>
    <td class="tg-a1rn"></td>
    <td class="tg-a1rn">{deconz.0.Sensors.23.battery} %</td>
    <td class="tg-a1rn">2x CR2032</td>
    </tr>
    <tr>
    <td class="tg-vzae">Flur unten</td>
    <td class="tg-a1rn">Bewegungsmelder</td>
    <td class="tg-a1rn"></td>
    <td class="tg-a1rn">{hue.0.Bewegungssensor_Iobroker.battery} %</td>
    <td class="tg-a1rn">2x AAA</td>
    </tr>
    <tr>
    <td class="tg-vzae"></td>
    <td class="tg-a1rn">Taster</td>
    <td class="tg-a1rn"></td>
    <td class="tg-a1rn">{hue.0.Dimmer_Flur.battery} %</td>
    <td class="tg-a1rn">1x CR2450</td>
    </tr>
    <tr>
    <td class="tg-vzae">Wohnzimmer</td>
    <td class="tg-a1rn">Taster</td>
    <td class="tg-a1rn"></td>
    <td class="tg-a1rn">{hue.0.Dimmer_Wohnzimmer.battery} %</td>
    <td class="tg-a1rn">1x CR2450</td>
    </tr>
    <tr>
    <td class="tg-vzae">Hauseingang</td>
    <td class="tg-a1rn">Bewegungsmelder</td>
    <td class="tg-a1rn"></td>
    <td class="tg-a1rn"></td>
    <td class="tg-a1rn"></td>
    </tr>
    <tr>
    <td class="tg-vzae">Flur oben</td>
    <td class="tg-a1rn">Bewegungsmelder</td>
    <td class="tg-a1rn"></td>
    <td class="tg-a1rn">{hue.0.Bewegungssensor_Flur_oben.battery} %</td>
    <td class="tg-a1rn">2x AAA</td>
    </tr>
    <tr>
    <td class="tg-vzae"></td>
    <td class="tg-a1rn">Taster</td>
    <td class="tg-a1rn"></td>
    <td class="tg-a1rn">{deconz.0.Sensors.8.battery} %</td>
    <td class="tg-a1rn">1x CR2032</td>
    </tr>
    <tr>
    <td class="tg-vzae">Bad</td>
    <td class="tg-a1rn">Taster</td>
    <td class="tg-a1rn"></td>
    <td class="tg-a1rn">{hue.0.Dimmer_Bad.battery} %</td>
    <td class="tg-a1rn">1x CR2450</td>
    </tr>
    <tr>
    <td class="tg-vzae">Zimmer Vince</td>
    <td class="tg-a1rn">Taster</td>
    <td class="tg-a1rn"></td>
    <td class="tg-a1rn">{deconz.0.Sensors.9.battery} %</td>
    <td class="tg-a1rn">1x CR2032</td>
    </tr>
    <tr>
    <td class="tg-vzae">Schlafzimmer</td>
    <td class="tg-a1rn">Taster (Tür)</td>
    <td class="tg-a1rn"></td>
    <td class="tg-a1rn">{hue.0.Dimmer_Schlafzimmer.battery} %</td>
    <td class="tg-a1rn">1x CR2450</td>
    </tr>

    </tr>
    </table>


    Ausgabe:
    f53eaedf-0ae4-484c-bf27-e0dd970eef41-grafik.png
    Die Zellen in der Spalte "Status" sollen, je nach Wert, farbig sein.

    Ich würde mich sehr freuen, wenn ihr mir helfen könntet!

    CodierknechtC 1 Antwort Letzte Antwort
    0
    • B Boergi23

      Hallo liebe Spezialisten,

      ich möchte in VIS den Batteriestand meiner Bewegungsmelder und Taster überwachen. Ich habe eine Tabelle erstellt, die mir die Werte der jeweiligen Datenpunkte wiedergibt. Jetzt möchte ich den Zustand noch besser sichtbar machen, indem die Zelle, in welcher der Wert steht, je nach Wert farbig ist (1-10 = rot, 10-20 = gelb, 20 - 100 grün). Könnt ihr mir helfen?

      html-code:

      <style type="text/css">
      #{wid} .tg {
      border-collapse:collapse;border-spacing:0;

      }
      #{wid} .tg td{
      font-family:Arial, sans-serif;font-size:7px;padding:2px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;

      }
      #{wid} .tg th{
      font-family:Arial, sans-serif;font-size:7px;font-weight:normal;padding:7px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;

      }
      #{wid} .tg .tg-srqd{
      font-size:9px;background-color:#ffccc9

      }
      #{wid} .tg .tg-a1rn{
      background-color:#ffffc7

      }
      #{wid} .tg .tg-ezsn{
      font-size:10px;background-color:#ffccc9;color:#000000;width:25;

      }
      #{wid} .tg .tg-vzae{
      font-size:8px;background-color:#fffc9e;

      }
      </style>
      <table class="tg">
      <tr>
      <th class="tg-ezsn">Bereich</th>
      <th class="tg-ezsn">Gerät</th>
      <th class="tg-ezsn">Kapazität</th>
      <th class="tg-ezsn">Status</th>
      <th class="tg-srqd">Batterie</th>
      </tr>
      <tr>
      <td class="tg-vzae">Küche</td>
      <td class="tg-a1rn">Bewegungsmelder</td>
      <td class="tg-a1rn"></td>
      <td class="tg-a1rn">{deconz.0.Sensors.23.battery} %</td>
      <td class="tg-a1rn">2x CR2032</td>
      </tr>
      <tr>
      <td class="tg-vzae">Flur unten</td>
      <td class="tg-a1rn">Bewegungsmelder</td>
      <td class="tg-a1rn"></td>
      <td class="tg-a1rn">{hue.0.Bewegungssensor_Iobroker.battery} %</td>
      <td class="tg-a1rn">2x AAA</td>
      </tr>
      <tr>
      <td class="tg-vzae"></td>
      <td class="tg-a1rn">Taster</td>
      <td class="tg-a1rn"></td>
      <td class="tg-a1rn">{hue.0.Dimmer_Flur.battery} %</td>
      <td class="tg-a1rn">1x CR2450</td>
      </tr>
      <tr>
      <td class="tg-vzae">Wohnzimmer</td>
      <td class="tg-a1rn">Taster</td>
      <td class="tg-a1rn"></td>
      <td class="tg-a1rn">{hue.0.Dimmer_Wohnzimmer.battery} %</td>
      <td class="tg-a1rn">1x CR2450</td>
      </tr>
      <tr>
      <td class="tg-vzae">Hauseingang</td>
      <td class="tg-a1rn">Bewegungsmelder</td>
      <td class="tg-a1rn"></td>
      <td class="tg-a1rn"></td>
      <td class="tg-a1rn"></td>
      </tr>
      <tr>
      <td class="tg-vzae">Flur oben</td>
      <td class="tg-a1rn">Bewegungsmelder</td>
      <td class="tg-a1rn"></td>
      <td class="tg-a1rn">{hue.0.Bewegungssensor_Flur_oben.battery} %</td>
      <td class="tg-a1rn">2x AAA</td>
      </tr>
      <tr>
      <td class="tg-vzae"></td>
      <td class="tg-a1rn">Taster</td>
      <td class="tg-a1rn"></td>
      <td class="tg-a1rn">{deconz.0.Sensors.8.battery} %</td>
      <td class="tg-a1rn">1x CR2032</td>
      </tr>
      <tr>
      <td class="tg-vzae">Bad</td>
      <td class="tg-a1rn">Taster</td>
      <td class="tg-a1rn"></td>
      <td class="tg-a1rn">{hue.0.Dimmer_Bad.battery} %</td>
      <td class="tg-a1rn">1x CR2450</td>
      </tr>
      <tr>
      <td class="tg-vzae">Zimmer Vince</td>
      <td class="tg-a1rn">Taster</td>
      <td class="tg-a1rn"></td>
      <td class="tg-a1rn">{deconz.0.Sensors.9.battery} %</td>
      <td class="tg-a1rn">1x CR2032</td>
      </tr>
      <tr>
      <td class="tg-vzae">Schlafzimmer</td>
      <td class="tg-a1rn">Taster (Tür)</td>
      <td class="tg-a1rn"></td>
      <td class="tg-a1rn">{hue.0.Dimmer_Schlafzimmer.battery} %</td>
      <td class="tg-a1rn">1x CR2450</td>
      </tr>

      </tr>
      </table>


      Ausgabe:
      f53eaedf-0ae4-484c-bf27-e0dd970eef41-grafik.png
      Die Zellen in der Spalte "Status" sollen, je nach Wert, farbig sein.

      Ich würde mich sehr freuen, wenn ihr mir helfen könntet!

      CodierknechtC Offline
      CodierknechtC Offline
      Codierknecht
      Developer Most Active
      schrieb am zuletzt editiert von
      #2

      @Boergi23

      <td class="tg-a1rn"><span style="color:{val:hue.0.Dimmer_Schlafzimmer.battery;val >= 20 ? 'green">' + val : val >= 10 ? 'yellow">' + val : 'red">' + val}</span>' %</td>
      

      Könnte man alternativ statt mit style auch mit class machen. Dann hätte man es später einfacher wenn die Farben mal geändert werden sollen.

      "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")

      Proxmox 9.1.1 LXC|8 GB|Core i7-6700
      HmIP|ZigBee|Tasmota|Unifi
      Zabbix Certified Specialist
      Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag

      B 1 Antwort Letzte Antwort
      0
      • CodierknechtC Codierknecht

        @Boergi23

        <td class="tg-a1rn"><span style="color:{val:hue.0.Dimmer_Schlafzimmer.battery;val >= 20 ? 'green">' + val : val >= 10 ? 'yellow">' + val : 'red">' + val}</span>' %</td>
        

        Könnte man alternativ statt mit style auch mit class machen. Dann hätte man es später einfacher wenn die Farben mal geändert werden sollen.

        B Offline
        B Offline
        Boergi23
        schrieb am zuletzt editiert von
        #3

        @codierknecht said in Zellen einfärben, je nach Wert:

        <td class="tg-a1rn"><span style="color:{val:hue.0.Dimmer_Schlafzimmer.battery;val >= 20 ? 'green">' + val : val >= 10 ? 'yellow">' + val : 'red">' + val}</span>' %</td>

        Super, das lässt sich schonmal verwenden! Vielen Dank!
        Gibt es eine Möglichkeit die ganze Zelle einzufärben? Im Moment färbt er die Zahl. Bei "backgound-color" anstatt "color" wird nur der Zahlenhintergrund verändert, nicht die ganze Zelle.

        CodierknechtC 1 Antwort Letzte Antwort
        0
        • B Boergi23

          @codierknecht said in Zellen einfärben, je nach Wert:

          <td class="tg-a1rn"><span style="color:{val:hue.0.Dimmer_Schlafzimmer.battery;val >= 20 ? 'green">' + val : val >= 10 ? 'yellow">' + val : 'red">' + val}</span>' %</td>

          Super, das lässt sich schonmal verwenden! Vielen Dank!
          Gibt es eine Möglichkeit die ganze Zelle einzufärben? Im Moment färbt er die Zahl. Bei "backgound-color" anstatt "color" wird nur der Zahlenhintergrund verändert, nicht die ganze Zelle.

          CodierknechtC Offline
          CodierknechtC Offline
          Codierknecht
          Developer Most Active
          schrieb am zuletzt editiert von
          #4

          @boergi23 sagte in Zellen einfärben, je nach Wert:

          Im Moment färbt er die Zahl. Bei "backgound-color" anstatt "color" wird nur der Zahlenhintergrund verändert, nicht die ganze Zelle.

          Du könntest style="width:100%;color: versuchen oder statt dem span ein div nehmen.

          Eigentlich müsste man die ganze Zelle (das td) formatieren, aber dazu müsste man das Binding 2x verwenden. Das finde ich eher suboptimal.

          "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")

          Proxmox 9.1.1 LXC|8 GB|Core i7-6700
          HmIP|ZigBee|Tasmota|Unifi
          Zabbix Certified Specialist
          Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag

          1 Antwort Letzte Antwort
          0
          Antworten
          • In einem neuen Thema antworten
          Anmelden zum Antworten
          • Älteste zuerst
          • Neuste zuerst
          • Meiste Stimmen


          Support us

          ioBroker
          Community Adapters
          Donate

          731

          Online

          32.6k

          Benutzer

          82.2k

          Themen

          1.3m

          Beiträge
          Community
          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
          ioBroker Community 2014-2025
          logo
          • Anmelden

          • Du hast noch kein Konto? Registrieren

          • Anmelden oder registrieren, um zu suchen
          • Erster Beitrag
            Letzter Beitrag
          0
          • Home
          • Aktuell
          • Tags
          • Ungelesen 0
          • Kategorien
          • Unreplied
          • Beliebt
          • GitHub
          • Docu
          • Hilfe