Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Wie Textfarbe von Widget "basic - Number" per javascript ändern?

    NEWS

    • Neues Video "KI im Smart Home" - ioBroker plus n8n

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • I
      ioAli last edited by

      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 Reply Last reply Reply Quote 0
      • I
        ioAli last edited by

        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 Reply Last reply Reply Quote 0
        • P
          pix last edited by

          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

          1 Reply Last reply Reply Quote 0
          • I
            ioAli last edited by

            @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 Reply Last reply Reply Quote 0
            • totocotonio
              totocotonio last edited by

              @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

              1 Reply Last reply Reply Quote 0
              • First post
                Last post

              Support us

              ioBroker
              Community Adapters
              Donate

              941
              Online

              32.1k
              Users

              80.7k
              Topics

              1.3m
              Posts

              3
              5
              1962
              Loading More Posts
              • Oldest to Newest
              • Newest to Oldest
              • Most Votes
              Reply
              • Reply as topic
              Log in to reply
              Community
              Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
              The ioBroker Community 2014-2023
              logo