Weiter zum Inhalt
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Hell
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dunkel
  • 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. Wie Textfarbe von Widget "basic - Number" per javascript ändern?

NEWS

  • Neues YouTube-Video: Visualisierung im Devices-Adapter
    BluefoxB
    Bluefox
    6
    1
    82

  • Neuer ioBroker-Blog online: Monatsrückblick März/April 2026
    BluefoxB
    Bluefox
    8
    1
    1.8k

  • Verwendung von KI bitte immer deutlich kennzeichnen
    HomoranH
    Homoran
    11
    1
    756

Wie Textfarbe von Widget "basic - Number" per javascript ändern?

Geplant Angeheftet Gesperrt Verschoben Visualisierung
5 Beiträge 3 Kommentatoren 2.1k Aufrufe
  • Ä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.
  • I Offline
    I Offline
    ioAli
    schrieb am zuletzt editiert von
    #1

    Ich möchte auf meiner Wetter-Vis die Textfarbe des dargestellten UV-Index abhängig vom UV-Index-Wert ändern.

    Dazu werte ich den UV-Index aus und teile die Fraben wie folgt zu:

    ! ````
    /* ********************************************************************************** /
    /
    Merkt sich den aktuelle und max. UV-Index /
    /
    ********************************************************************************** */
    on({id: "weatherunderground.0.current.UV", valNe: true}, function (obj) {
    var actState = getState("weatherunderground.0.current.UV");
    console.log("UV: "+actState.val);
    setState("javascript.0.Wetter.Heute.UVIndexAktuell",actState,true);

    if (actState.val > getState("javascript.0.Wetter.Heute.UVIndexMax").val){
        setState("javascript.0.Wetter.Heute.UVIndexMax",actState,true);
        console.log("UVIndexMax: "+getState("javascript.0.Wetter.Heute.UVIndexMax").val);
    }
    // TextFarbe vom aktuellen UV-Index einstellen
    setState("javascript.0.Umweltsensor.UVIndexColor",getUVIndexColor(actState.val).SColor);
    
      // TextFarbe vom UV-Index-Max einstellen
    actState = getState("javascript.0.Wetter.Heute.UVIndexMax");  
    setState("javascript.0.Umweltsensor.UVIndexMaxColor",getUVIndexColor(actState.val).SColor);
    

    });

    ! /* ********************************************************************************** /
    /
    Ermittelt die Textfarbe anhand des UV-Indexwert /
    /
    ********************************************************************************** */
    function getUVIndexColor (UVidx){
    var strCol ='';

    // ermittelt die Darstellungsfarbe des UV-Index abhängig von diesem gemäß https://de.wikipedia.org/wiki/UV-Index
    if          (UVidx >= 0.0 && UVidx <= 2.5){ strCol = "#12ed43"; // grün
    }else if    (UVidx >  2.5 && UVidx <= 5.5){ strCol = "#fefd06"; // Gelb
    }else if    (UVidx >  5.5 && UVidx <= 7.7){ strCol = "#f29c26"; // orange
    }else if    (UVidx >  7.5 && UVidx <= 10.5){strCol = "#d31512"; // rot
    }else if    (UVidx > 10.5 ){                strCol = "#d22daa"; // lila
    }
    console.log("idx / Farbe: "+UVidx+" / "+strCol);
    return {
        'SColor' : strCol
    };
    

    }

    ! ````

    Nun möchte ich diesen Farbcode in den Parameter "Color" in der Gruppe "CSS Fond & Text" vom Widget "basic - Number" eintragen.

    Wie kann ich aus einen script unter javascript.0 auf das Paramterfeld zugreifen?

    ODER

    Gibt es eine Möglichkeit die Zuordnung des Farbcodes über die Kachel Skripte vom Widget zu realisieren?

    1 Antwort Letzte Antwort
    0
    • I Offline
      I Offline
      ioAli
      schrieb am zuletzt editiert von
      #2

      Hallo zusammen,

      mir ist aufgefallen (bin noch neu hier und muss mich erst orientieren) das ich dieses Thema vermutlich im falschen Forum gepostet habe.

      Es gehört eher ins Forum "ioBroker.vis Adapter", vielleicht kann ein Mod es bei Bedarf dort hin verschieben.

      Ich habe jedenfalls eine Lösung für die Aufgabe gefunden:

      In den Feldern für die Text-Farbwerte innerhalb der Widgets kann statt der konstanten Wert (z. B. #12ed43)

      auch die Referenz auf einen Datenpunkt wie folgt angegeben werden:

      {javascript.0.Umweltsensor.UVIndexColor}

      Durch die beiden {} wird als Farbwert dann der Inhalt dieses Datenpunktes verwendet.

      UVIndexColor muss dabei vom Type String sein. Damit ergeben sich ganz neue Möglichkeiten interaktiv auf das Aussehen der Widgets aus einem Script heraus zu nehmen.

      Allerdings habe ich das noch nicht in anderen Parameterfeldern der Widgets probier, steht aber in kürze an.

      1 Antwort Letzte Antwort
      0
      • P Offline
        P Offline
        pix
        schrieb am zuletzt editiert von
        #3

        Hallo ioAli,

        das ganze nennt sich Binding und ist auf der VIS Github Doku gleich am Anfang beschrieben. Es gibt viele Beispiele hier im Forum.

        Nach meiner Meinung sind das Binding und die OID-abhängige Sichtbarkeit die größten und besten Features von VIS.

        Gruß

        Pix

        ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

        1 Antwort Letzte Antwort
        0
        • I Offline
          I Offline
          ioAli
          schrieb am zuletzt editiert von
          #4

          @pix:

          …..

          Nach meiner Meinung sind das Binding und die OID-abhängige Sichtbarkeit die größten und besten Features von VIS.

          Gruß

          Pix `
          Hallo Pix

          das sehe ich genau so.

          Kann ich denn umgekehrt aus einem Skript auf die Views und deren Widget-Elemete und -Parameter zugreifen?

          Gruß

          ioAli

          1 Antwort Letzte Antwort
          0
          • totocotonioT Offline
            totocotonioT Offline
            totocotonio
            schrieb am zuletzt editiert von
            #5

            @ioAli:

            Ich möchte auf meiner Wetter-Vis die Textfarbe des dargestellten UV-Index abhängig vom UV-Index-Wert ändern.

            Dazu werte ich den UV-Index aus und teile die Fraben wie folgt zu:

            ! ````
            /* ********************************************************************************** /
            /
            Merkt sich den aktuelle und max. UV-Index /
            /
            ********************************************************************************** */
            on({id: "weatherunderground.0.current.UV", valNe: true}, function (obj) {
            var actState = getState("weatherunderground.0.current.UV");
            console.log("UV: "+actState.val);
            setState("javascript.0.Wetter.Heute.UVIndexAktuell",actState,true);

            if (actState.val > getState("javascript.0.Wetter.Heute.UVIndexMax").val){
                setState("javascript.0.Wetter.Heute.UVIndexMax",actState,true);
                console.log("UVIndexMax: "+getState("javascript.0.Wetter.Heute.UVIndexMax").val);
            }
            // TextFarbe vom aktuellen UV-Index einstellen
            setState("javascript.0.Umweltsensor.UVIndexColor",getUVIndexColor(actState.val).SColor);
            
            
              // TextFarbe vom UV-Index-Max einstellen
            actState = getState("javascript.0.Wetter.Heute.UVIndexMax");  
            setState("javascript.0.Umweltsensor.UVIndexMaxColor",getUVIndexColor(actState.val).SColor);
            

            });

            ! /* ********************************************************************************** /
            /
            Ermittelt die Textfarbe anhand des UV-Indexwert /
            /
            ********************************************************************************** */
            function getUVIndexColor (UVidx){
            var strCol ='';

            // ermittelt die Darstellungsfarbe des UV-Index abhängig von diesem gemäß https://de.wikipedia.org/wiki/UV-Index
            if          (UVidx >= 0.0 && UVidx <= 2.5){ strCol = "#12ed43"; // grün
            }else if    (UVidx >  2.5 && UVidx <= 5.5){ strCol = "#fefd06"; // Gelb
            }else if    (UVidx >  5.5 && UVidx <= 7.7){ strCol = "#f29c26"; // orange
            }else if    (UVidx >  7.5 && UVidx <= 10.5){strCol = "#d31512"; // rot
            }else if    (UVidx > 10.5 ){                strCol = "#d22daa"; // lila
            }
            console.log("idx / Farbe: "+UVidx+" / "+strCol);
            return {
                'SColor' : strCol
            };
            

            }

            ! ````

            Hi,

            ich habe das so umgestzt.

            Die Werte für den Index werden mir eingetragen.

            Nur in den Farbwerten wird immer "true" eingetragen, ws mache ich denn da falsch.

            Die pfade in Javascript stimmen.

            Kann mir da jemand helfen.

            Gruß TM

            Gruß Totocotonio

            Bin noch Anfänger in Sachen IO-Broker und lerne gerne dazu. :P

            1 Antwort Letzte Antwort
            0

            Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.

            Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.

            Mit deinem Input könnte dieser Beitrag noch besser werden 💗

            Registrieren Anmelden
            Antworten
            • In einem neuen Thema antworten
            Anmelden zum Antworten
            • Älteste zuerst
            • Neuste zuerst
            • Meiste Stimmen


            Support us

            ioBroker
            Community Adapters
            Donate

            576

            Online

            32.9k

            Benutzer

            83.0k

            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