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.5k

  • 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.
  • 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 Offline
    BananaJoeB Offline
    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 Online
      K Online
      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 Offline
        BananaJoeB Offline
        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 Online
          K Online
          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 Offline
              BananaJoeB Offline
              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 Offline
                BananaJoeB Offline
                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 Online
                  K Online
                  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 Offline
                      BananaJoeB Offline
                      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 Online
                          K Online
                          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

                          658

                          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