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. [gelöst] JSON Tabelle farblich formatieren

NEWS

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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.5k

[gelöst] JSON Tabelle farblich formatieren

Geplant Angeheftet Gesperrt Verschoben Visualisierung
18 Beiträge 4 Kommentatoren 1.4k Aufrufe 4 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.
  • BananaJoeB BananaJoe

    @kuddel welches Widget nimmst du? Oder stellst du das mit HTML dar? Ich nutze das JSON-Table Widget des Inventwo-Adapters.

    Und schau dir den Seitenquelltext an. Ich habe bei mir mit den doppelten \\ wohl die " Escaped, eventuell muss das bei dir gar nicht sein. Die dürfen später im Quelltext nicht zu sehen sein sondern nur noch die ", spiel damit mal ein wenig rum

    K Offline
    K Offline
    Kuddel
    schrieb am zuletzt editiert von
    #5

    @bananajoe der Tipp mit den \ war es wohl :

    if(device.Status == 0) {var_status_formatted = '<div style="color:#ff0000;">OFFLINE</div>'}
    if(device.Status == 1) {var_status_formatted = '<div style="color:#41f316;">ONLINE</div>'}
    

    4d5ecd76-06ed-4df2-83ce-3bcaa839827c-grafik.png

    CodierknechtC 1 Antwort Letzte Antwort
    0
    • BananaJoeB BananaJoe

      @kuddel welches Widget nimmst du? Oder stellst du das mit HTML dar? Ich nutze das JSON-Table Widget des Inventwo-Adapters.

      Und schau dir den Seitenquelltext an. Ich habe bei mir mit den doppelten \\ wohl die " Escaped, eventuell muss das bei dir gar nicht sein. Die dürfen später im Quelltext nicht zu sehen sein sondern nur noch die ", spiel damit mal ein wenig rum

      K Offline
      K Offline
      Kuddel
      schrieb am zuletzt editiert von Kuddel
      #6

      @bananajoe vielen Dank für deine Hilfe.

      Ich konnte mein Javasrippt Script jetzt so anpassen, das ich alle Shelly Infos inkl. formatierung per JSON anzeigen lassen kann.

      Somit muss ich keine Anpassungen mehr in der VIS vornehmen, wenn ein neue Shelly Gerät dazu gekommen ist :-)

      abc01cef-552d-46e3-9250-718d8378f718-grafik.png

      Offen ist nur noch, die ich der IP als Link eine Farbe, z.B. weiß mitgeben kann.

      var_ip_formatted = '<a href="http://'+device.IP+'"target=_blank">'+device.IP+'</a>'
      
      BananaJoeB 1 Antwort Letzte Antwort
      1
      • K Kuddel

        @bananajoe vielen Dank für deine Hilfe.

        Ich konnte mein Javasrippt Script jetzt so anpassen, das ich alle Shelly Infos inkl. formatierung per JSON anzeigen lassen kann.

        Somit muss ich keine Anpassungen mehr in der VIS vornehmen, wenn ein neue Shelly Gerät dazu gekommen ist :-)

        abc01cef-552d-46e3-9250-718d8378f718-grafik.png

        Offen ist nur noch, die ich der IP als Link eine Farbe, z.B. weiß mitgeben kann.

        var_ip_formatted = '<a href="http://'+device.IP+'"target=_blank">'+device.IP+'</a>'
        
        BananaJoeB Online
        BananaJoeB Online
        BananaJoe
        Most Active
        schrieb am zuletzt editiert von BananaJoe
        #7

        @kuddel Verschiedene Farben? Im Prinzip musst du dort genau so eine Style-Anweisung drumherum bauen, nur eben für Links:

        <p>Visit our <a href="https://www.w3docs.com/" style="color: #8ebf42">website</a>.</p>
        

        Ist ein Inline-Beispiel von hier: https://www.w3docs.com/snippets/css/how-to-change-link-colors-in-html.html
        Da im Beispiel steht es zwischen <p> und </p>, sollte mit den <div> ... </div> auch so funktionieren
        Vor deinem </a> fügt doch mal die Style-Anweisung ein.

        ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

        K 1 Antwort Letzte Antwort
        0
        • BananaJoeB BananaJoe

          @kuddel Verschiedene Farben? Im Prinzip musst du dort genau so eine Style-Anweisung drumherum bauen, nur eben für Links:

          <p>Visit our <a href="https://www.w3docs.com/" style="color: #8ebf42">website</a>.</p>
          

          Ist ein Inline-Beispiel von hier: https://www.w3docs.com/snippets/css/how-to-change-link-colors-in-html.html
          Da im Beispiel steht es zwischen <p> und </p>, sollte mit den <div> ... </div> auch so funktionieren
          Vor deinem </a> fügt doch mal die Style-Anweisung ein.

          K Offline
          K Offline
          Kuddel
          schrieb am zuletzt editiert von
          #8

          @bananajoe vielen Dank für die schneller Antwort.

          Ich habe es jetzt so probiert:

          var_ip_formatted = '<div style="color:#000000;"><a href="http://'+device.IP+'"target=_blank">'+device.IP+'</a>'
          

          Leider bleibt die Schriftfarbe schwarz.

          BananaJoeB 1 Antwort Letzte Antwort
          0
          • K Kuddel

            @bananajoe vielen Dank für die schneller Antwort.

            Ich habe es jetzt so probiert:

            var_ip_formatted = '<div style="color:#000000;"><a href="http://'+device.IP+'"target=_blank">'+device.IP+'</a>'
            

            Leider bleibt die Schriftfarbe schwarz.

            BananaJoeB Online
            BananaJoeB Online
            BananaJoe
            Most Active
            schrieb am zuletzt editiert von
            #9

            @kuddel da gibt es kein </div> und gemäß meines Beispiels probiere mal

            var_ip_formatted = '<a href="http://'+device.IP+'"target=_blank" style="color: #000000">'+device.IP+'</a>'
            

            ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

            K 1 Antwort Letzte Antwort
            0
            • BananaJoeB BananaJoe

              @kuddel da gibt es kein </div> und gemäß meines Beispiels probiere mal

              var_ip_formatted = '<a href="http://'+device.IP+'"target=_blank" style="color: #000000">'+device.IP+'</a>'
              
              K Offline
              K Offline
              Kuddel
              schrieb am zuletzt editiert von
              #10

              @bananajoe

              e08d8508-2f43-4027-a94e-5fbbd74f747d-grafik.png

              BananaJoeB 1 Antwort Letzte Antwort
              0
              • JohGreJ Offline
                JohGreJ Offline
                JohGre
                schrieb am zuletzt editiert von
                #11

                Hi, da muss ich mich jetzt mal auch kurz einklinken.
                Ich habe eine Tabelle mit Informationen zu Stromverbrauch -verkauf und errechneter Preis in einer JSON Tabelle.
                9286cf91-5a96-466a-91df-eb4e5e488daf-image.png
                Wie schaffe ich es nun eine gesamte Zeile anders einzufärben. Ich möchte einfach schnell erkennen wo ich mich zeitlich gerade befinde.

                nuc i5: RaspberryMatic, ioBroker, pi-hole, SQL-Server, OMV-NAS, Influx-DB & Grafana, OpenHab, tasmoadmin

                BananaJoeB 1 Antwort Letzte Antwort
                0
                • K Kuddel

                  @bananajoe

                  e08d8508-2f43-4027-a94e-5fbbd74f747d-grafik.png

                  BananaJoeB Online
                  BananaJoeB Online
                  BananaJoe
                  Most Active
                  schrieb am zuletzt editiert von
                  #12

                  @kuddel Naja, #000000 ist ja auch schwarz ...

                  ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

                  K 1 Antwort Letzte Antwort
                  0
                  • JohGreJ JohGre

                    Hi, da muss ich mich jetzt mal auch kurz einklinken.
                    Ich habe eine Tabelle mit Informationen zu Stromverbrauch -verkauf und errechneter Preis in einer JSON Tabelle.
                    9286cf91-5a96-466a-91df-eb4e5e488daf-image.png
                    Wie schaffe ich es nun eine gesamte Zeile anders einzufärben. Ich möchte einfach schnell erkennen wo ich mich zeitlich gerade befinde.

                    BananaJoeB Online
                    BananaJoeB Online
                    BananaJoe
                    Most Active
                    schrieb am zuletzt editiert von
                    #13

                    @johgre Die Lösung die wir in den letzten Post gerade tangieren würde die Textfarbe ändern. Dazu werden vor und nach dem jeweiligen JSON-Wert html-Befehle eingefügt.
                    Welches Widget nutzt du denn, vielleicht kann das das ja

                    ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

                    JohGreJ 1 Antwort Letzte Antwort
                    0
                    • BananaJoeB BananaJoe

                      @kuddel Naja, #000000 ist ja auch schwarz ...

                      K Offline
                      K Offline
                      Kuddel
                      schrieb am zuletzt editiert von Kuddel
                      #14

                      @bananajoe oh man :-D es kann manchmal so einfach sein.

                      Mit #ffffff funzt es jetzt natürlich.

                      Vielen Dank

                      9f210dee-2802-449b-a131-84cb02d23f6b-grafik.png

                      1 Antwort Letzte Antwort
                      0
                      • BananaJoeB BananaJoe

                        @johgre Die Lösung die wir in den letzten Post gerade tangieren würde die Textfarbe ändern. Dazu werden vor und nach dem jeweiligen JSON-Wert html-Befehle eingefügt.
                        Welches Widget nutzt du denn, vielleicht kann das das ja

                        JohGreJ Offline
                        JohGreJ Offline
                        JohGre
                        schrieb am zuletzt editiert von
                        #15

                        @bananajoe eine vis-invento - JSON Tabelle. In den Standardsettings geht halt nur gerade und ungerade Einfärbung aber nicht eine dezidierte Zeile

                        nuc i5: RaspberryMatic, ioBroker, pi-hole, SQL-Server, OMV-NAS, Influx-DB & Grafana, OpenHab, tasmoadmin

                        BananaJoeB 1 Antwort Letzte Antwort
                        0
                        • JohGreJ JohGre

                          @bananajoe eine vis-invento - JSON Tabelle. In den Standardsettings geht halt nur gerade und ungerade Einfärbung aber nicht eine dezidierte Zeile

                          BananaJoeB Online
                          BananaJoeB Online
                          BananaJoe
                          Most Active
                          schrieb am zuletzt editiert von
                          #16

                          @johgre sagte in JSON Tabelle farblich formatieren:

                          @bananajoe eine vis-invento - JSON Tabelle. In den Standardsettings geht halt nur gerade und ungerade Einfärbung aber nicht eine dezidierte Zeile

                          Die nutze ich auch, meine Lösung (die ich schon vor längerer zeit erarbeitet hatte) war das mit dem bunten Text.
                          Eventuell die Frage zum Widget stellen im Inventwo Thread, ich meine die gab es auch schon mal.
                          Das Problem ist ja das man die Inventwo-JSON-Tabelle ja auch beliebig neu sortieren kann per Klick, dann würde das ja nicht mehr passen

                          ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

                          1 Antwort Letzte Antwort
                          1
                          • K Kuddel

                            @bananajoe der Tipp mit den \ war es wohl :

                            if(device.Status == 0) {var_status_formatted = '<div style="color:#ff0000;">OFFLINE</div>'}
                            if(device.Status == 1) {var_status_formatted = '<div style="color:#41f316;">ONLINE</div>'}
                            

                            4d5ecd76-06ed-4df2-83ce-3bcaa839827c-grafik.png

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

                            @kuddel
                            Wenn man jetzt noch hingeht und das Ganze nicht hart verdrahtet sondern CSS-Klassen verwendet, kann man das an einer zentralen Stelle (im CSS der VIS) gestalten wie man Lust und Laune hat.

                            if(device.Status == 0) {var_status_formatted = '<div class="offline">OFFLINE</div>'}
                            if(device.Status == 1) {var_status_formatted = '<div class="online">ONLINE</div>'}
                            
                            .online {
                                color:#41f316;
                            }
                            .offline {
                                color:#ff0000;
                                font-weight: bold;
                            }
                            

                            Vielleicht sollte man das auch als span deklarieren statt als div. Ist ja eigentlich kein Blockelement sondern nur Text.

                            "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

                            K 1 Antwort Letzte Antwort
                            1
                            • CodierknechtC Codierknecht

                              @kuddel
                              Wenn man jetzt noch hingeht und das Ganze nicht hart verdrahtet sondern CSS-Klassen verwendet, kann man das an einer zentralen Stelle (im CSS der VIS) gestalten wie man Lust und Laune hat.

                              if(device.Status == 0) {var_status_formatted = '<div class="offline">OFFLINE</div>'}
                              if(device.Status == 1) {var_status_formatted = '<div class="online">ONLINE</div>'}
                              
                              .online {
                                  color:#41f316;
                              }
                              .offline {
                                  color:#ff0000;
                                  font-weight: bold;
                              }
                              

                              Vielleicht sollte man das auch als span deklarieren statt als div. Ist ja eigentlich kein Blockelement sondern nur Text.

                              K Offline
                              K Offline
                              Kuddel
                              schrieb am zuletzt editiert von
                              #18

                              @codierknecht das kann man bestimmt machen, nur das übersteigt aktuell mein KnowHow ^^

                              Ich bin froh, dass es jetzt erst einmal so läuft

                              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

                              574

                              Online

                              32.7k

                              Benutzer

                              82.4k

                              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