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. Tester
  4. jarvis v2.2.0 - just another remarkable vis

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.7k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.2k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.1k

jarvis v2.2.0 - just another remarkable vis

Geplant Angeheftet Gesperrt Verschoben Tester
jarvismaterialmaterial uimaterialdesignvisvisualisierungvisualization
6.1k Beiträge 316 Kommentatoren 4.2m Aufrufe 273 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.
  • M MCU

    @renegade-0 https://forum.iobroker.net/topic/30668/jarvis-v2-2-0-just-another-remarkable-vis/4354

    R Offline
    R Offline
    Renegade 0
    schrieb am zuletzt editiert von
    #5230

    @mcu
    Perfekt genau das. Und die Überschriften wie Licht?

    M 1 Antwort Letzte Antwort
    0
    • U Offline
      U Offline
      UncleB
      schrieb am zuletzt editiert von
      #5231

      Versuche grade die die Elemente "Switch Action" auf "Button Action" zu ändern, find ich am Tablet einfacher zu bedienen, doch leider passiert nix wenn ich den Button klicke...
      Übersehe ich was?
      Screenshot - 2021-10-02T103900.293.png Screenshot - 2021-10-02T104134.662.png

      1 Antwort Letzte Antwort
      0
      • M Online
        M Online
        MCU
        schrieb am zuletzt editiert von MCU
        #5232

        @uncleb ButtonAction schaltet nur einen Wert "true" oder "false", hat aber keinen Toggle-Modus. Der Toggle-Modus kommt erst mit v3. Sehe gerade du bist ja auf v3. Welche Version?

        NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
        Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

        U 1 Antwort Letzte Antwort
        0
        • R Renegade 0

          @mcu
          Perfekt genau das. Und die Überschriften wie Licht?

          M Online
          M Online
          MCU
          schrieb am zuletzt editiert von MCU
          #5233

          @renegade-0

          .MuiTabs-scroller {
              font-size:30px; /* Schrift 14px */
              font-weight: bold; /* Fettschrift */
          }
          

          Das passt noch nicht.

          NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
          Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

          R 1 Antwort Letzte Antwort
          0
          • M MCU

            @uncleb ButtonAction schaltet nur einen Wert "true" oder "false", hat aber keinen Toggle-Modus. Der Toggle-Modus kommt erst mit v3. Sehe gerade du bist ja auf v3. Welche Version?

            U Offline
            U Offline
            UncleB
            schrieb am zuletzt editiert von UncleB
            #5234

            @mcu said in jarvis v2.2.0 - just another remarkable vis:

            @uncleb ButtonAction schaltet nur einen Wert "true" oder "false", hat aber keinen Toggle-Modus. Der Toggle-Modus kommt erst mit v3. Sehe gerade du bist ja auf v3. Welche Version?

            Bin auf V3
            "true" oder "false" würde ja reichen, aber es passiert nix wenn ich den Button klicke

            Edit

            3.0.0-alpha.84

            U 1 Antwort Letzte Antwort
            0
            • M MCU

              @diginix
              Jarvis holt die Icons alle von iconify.
              Mich wundert, dass du die Icons von materialdesignicons als SVG runterlädst?
              Wofür? Kannst du mal einen Fall genauer darstellen.

              Warum konvertierst du nach base64?

              Um welche Icon geht es, die es bei iconify nicht gibt?

              DiginixD Offline
              DiginixD Offline
              Diginix
              schrieb am zuletzt editiert von Diginix
              #5235

              @mcu sagte in jarvis v2.2.0 - just another remarkable vis:

              @diginix
              Jarvis holt die Icons alle von iconify.
              Mich wundert, dass du die Icons von materialdesignicons als SVG runterlädst?
              Wofür? Kannst du mal einen Fall genauer darstellen.

              Warum konvertierst du nach base64?

              Um welche Icon geht es, die es bei iconify nicht gibt?

              Die Quelle habe ich aus der Doku und dort steht auch dass man sie nach base64 codieren soll.
              fd269a78-34d4-40ff-b2c6-cf40a6ed7d0d-image.png

              Sind die Icons in deinem Bsp ja auch, anders kann man sie ja nicht einfügen. Bei der Ladeanimation würde ich die Standard Icons für battery-low und battery-high nutzen. Aber mir fehlen für bestimmte Geräte noch Icons und die habe ich als SVG lokal auf der Platte. Auch wenn im SVG kein fill color gesetzt ist, wird es als base64 in Jarvis immer schwarz angezeigt. Ich bräuchte also eine Lösung für komplett eigene Icons aus diversen Quellen und für die Ladeanimation hätte ich eben gern die material battery Icons, die Jarvis auch selbst verwendet.
              5d34f840-46d1-446b-a26b-c8f48f9e401e-image.png

              Bei iconify finde ich das auch: https://icon-sets.iconify.design/mdi/battery-low/
              Und nehme dann den CSS Export?

              background: url('https://api.iconify.design/mdi/battery-low.svg') no-repeat center center / contain;
              

              Wenn ich das CSS so baue

              @keyframes charging {
                  0 % {
                      background: url('https://api.iconify.design/mdi/battery-low.svg') no - repeat center center / contain;
                  }
                  50 % {
                      background: url('https://api.iconify.design/mdi/battery-medium.svg') no - repeat center center / contain;
                  }
                  100 % {
                      background: url('https://api.iconify.design/mdi/battery-high.svg') no - repeat center center / contain;
                  }
              }
              

              sieht es trotzdem so aus (natürkich animiert):
              2693f2db-fc66-48f1-b3f8-291b00006789-image.png

              ..:: So long! Tom ::..

              NUC7i3 (Ubuntu Proxmox VM) | Echo Dots 2+3. Gen | Xiaomi Sensoren | Mi Robot 1S | Yeelight | Sonoff | Shelly | H801 RGB | Gosund SP1 | NodeMCU+ESP32 | Kostal Plenticore PV+BYD | openWB

              M 1 Antwort Letzte Antwort
              0
              • DiginixD Diginix

                @mcu sagte in jarvis v2.2.0 - just another remarkable vis:

                @diginix
                Jarvis holt die Icons alle von iconify.
                Mich wundert, dass du die Icons von materialdesignicons als SVG runterlädst?
                Wofür? Kannst du mal einen Fall genauer darstellen.

                Warum konvertierst du nach base64?

                Um welche Icon geht es, die es bei iconify nicht gibt?

                Die Quelle habe ich aus der Doku und dort steht auch dass man sie nach base64 codieren soll.
                fd269a78-34d4-40ff-b2c6-cf40a6ed7d0d-image.png

                Sind die Icons in deinem Bsp ja auch, anders kann man sie ja nicht einfügen. Bei der Ladeanimation würde ich die Standard Icons für battery-low und battery-high nutzen. Aber mir fehlen für bestimmte Geräte noch Icons und die habe ich als SVG lokal auf der Platte. Auch wenn im SVG kein fill color gesetzt ist, wird es als base64 in Jarvis immer schwarz angezeigt. Ich bräuchte also eine Lösung für komplett eigene Icons aus diversen Quellen und für die Ladeanimation hätte ich eben gern die material battery Icons, die Jarvis auch selbst verwendet.
                5d34f840-46d1-446b-a26b-c8f48f9e401e-image.png

                Bei iconify finde ich das auch: https://icon-sets.iconify.design/mdi/battery-low/
                Und nehme dann den CSS Export?

                background: url('https://api.iconify.design/mdi/battery-low.svg') no-repeat center center / contain;
                

                Wenn ich das CSS so baue

                @keyframes charging {
                    0 % {
                        background: url('https://api.iconify.design/mdi/battery-low.svg') no - repeat center center / contain;
                    }
                    50 % {
                        background: url('https://api.iconify.design/mdi/battery-medium.svg') no - repeat center center / contain;
                    }
                    100 % {
                        background: url('https://api.iconify.design/mdi/battery-high.svg') no - repeat center center / contain;
                    }
                }
                

                sieht es trotzdem so aus (natürkich animiert):
                2693f2db-fc66-48f1-b3f8-291b00006789-image.png

                M Online
                M Online
                MCU
                schrieb am zuletzt editiert von MCU
                #5236

                @diginix Dann kannst du Dir ja eine Animation aus den Icons basteln?
                4d898327-bbd4-4a54-9270-8170071d61cf-image.png

                Und du willst jetzt eine andere Farbe?

                NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                DiginixD 1 Antwort Letzte Antwort
                0
                • M MCU

                  @diginix Dann kannst du Dir ja eine Animation aus den Icons basteln?
                  4d898327-bbd4-4a54-9270-8170071d61cf-image.png

                  Und du willst jetzt eine andere Farbe?

                  DiginixD Offline
                  DiginixD Offline
                  Diginix
                  schrieb am zuletzt editiert von Diginix
                  #5237

                  @mcu sagte in jarvis v2.2.0 - just another remarkable vis:

                  @diginix Dann kannst du Dir ja eine Animation aus den Icons basteln?
                  4d898327-bbd4-4a54-9270-8170071d61cf-image.png

                  Und du willst jetzt eine andere Farbe?

                  Ja, genau das will ich doch auch. Aber die Icons sind eben immer schwarz. Siehe mein editierten Post über deinem.

                  ..:: So long! Tom ::..

                  NUC7i3 (Ubuntu Proxmox VM) | Echo Dots 2+3. Gen | Xiaomi Sensoren | Mi Robot 1S | Yeelight | Sonoff | Shelly | H801 RGB | Gosund SP1 | NodeMCU+ESP32 | Kostal Plenticore PV+BYD | openWB

                  1 Antwort Letzte Antwort
                  0
                  • M MCU

                    @renegade-0

                    .MuiTabs-scroller {
                        font-size:30px; /* Schrift 14px */
                        font-weight: bold; /* Fettschrift */
                    }
                    

                    Das passt noch nicht.

                    R Offline
                    R Offline
                    Renegade 0
                    schrieb am zuletzt editiert von
                    #5238

                    @mcu
                    Da rührt sich leider nix.

                    M 1 Antwort Letzte Antwort
                    0
                    • M Online
                      M Online
                      MCU
                      schrieb am zuletzt editiert von
                      #5239

                      @diginix
                      Nicht diese URL verwenden url('https://api.iconify.design/mdi/battery-high.svg'), sondern

                      368026e3-60dd-4f93-81aa-70c192117655-image.png
                      Und dort dann "currentColor" durch var(--meine-Farbe) ersetzen.
                      Dann kannst mit

                      :root{
                        --meine-Farbe: yellow;
                      }
                      

                      es einfacher ändern.

                      NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                      Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                      DiginixD 1 Antwort Letzte Antwort
                      0
                      • R Renegade 0

                        @mcu
                        Da rührt sich leider nix.

                        M Online
                        M Online
                        MCU
                        schrieb am zuletzt editiert von MCU
                        #5240

                        @renegade-0

                        .MuiTypography-h5 {
                            font-size:40px; /* Schrift 14px */
                            font-weight: bold; /* Fettschrift */
                            /*color: red;*/
                        }
                        

                        Jetz aber.

                        NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                        Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                        R 1 Antwort Letzte Antwort
                        0
                        • M MCU

                          @diginix
                          Nicht diese URL verwenden url('https://api.iconify.design/mdi/battery-high.svg'), sondern

                          368026e3-60dd-4f93-81aa-70c192117655-image.png
                          Und dort dann "currentColor" durch var(--meine-Farbe) ersetzen.
                          Dann kannst mit

                          :root{
                            --meine-Farbe: yellow;
                          }
                          

                          es einfacher ändern.

                          DiginixD Offline
                          DiginixD Offline
                          Diginix
                          schrieb am zuletzt editiert von Diginix
                          #5241

                          @mcu Funktioniert immer noch nicht.

                          Im CSS

                          :root {
                            --highlight_red: #FFAA00;
                            --highlight_green: #39B300;
                            --highlight_blue: #00C3FF;
                          }
                          .charge{
                            color:transparent;
                            animation: charging 3s infinite;
                          }
                          @keyframes charging{
                            0% {
                              background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                            } 
                            50%{
                              background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-4.5H9v3h6v-3z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                            }  
                            100% {
                              background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-9H9v3h6V7m0%204.5H9v3h6v-3z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                          }
                          

                          Im DP dann folgendes
                          Icon JSON:

                          "battery-low charge"
                          

                          Icon Stil JSON habe ich

                          {
                            ">10": {
                              "color": "var(--highlight_green)"
                            }
                          }
                          

                          Sieht dann weiterhin so aus:
                          00ce5e97-a934-43ee-9eed-a5ef33a39175-image.png

                          ..:: So long! Tom ::..

                          NUC7i3 (Ubuntu Proxmox VM) | Echo Dots 2+3. Gen | Xiaomi Sensoren | Mi Robot 1S | Yeelight | Sonoff | Shelly | H801 RGB | Gosund SP1 | NodeMCU+ESP32 | Kostal Plenticore PV+BYD | openWB

                          M 1 Antwort Letzte Antwort
                          0
                          • DiginixD Diginix

                            @mcu Funktioniert immer noch nicht.

                            Im CSS

                            :root {
                              --highlight_red: #FFAA00;
                              --highlight_green: #39B300;
                              --highlight_blue: #00C3FF;
                            }
                            .charge{
                              color:transparent;
                              animation: charging 3s infinite;
                            }
                            @keyframes charging{
                              0% {
                                background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                              } 
                              50%{
                                background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-4.5H9v3h6v-3z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                              }  
                              100% {
                                background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-9H9v3h6V7m0%204.5H9v3h6v-3z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                            }
                            

                            Im DP dann folgendes
                            Icon JSON:

                            "battery-low charge"
                            

                            Icon Stil JSON habe ich

                            {
                              ">10": {
                                "color": "var(--highlight_green)"
                              }
                            }
                            

                            Sieht dann weiterhin so aus:
                            00ce5e97-a934-43ee-9eed-a5ef33a39175-image.png

                            M Online
                            M Online
                            MCU
                            schrieb am zuletzt editiert von MCU
                            #5242

                            @diginix sagte in jarvis v2.2.0 - just another remarkable vis:

                            #39B300;

                            Also mit der schnellen Farbänderung geht es wohl nicht.
                            Hab noch eine Stufe hinzugefügt.
                            Nur mit einer festgelegten Farbe:

                            @keyframes charging{
                              0% {
                                 background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33A1.33%201.33%200%200%200%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34A1.33%201.33%200%200%200%2018%2020.67V5.33C18%204.6%2017.4%204%2016.67%204z%22%20fill%3D%22lightgreen%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                 }
                              33% {
                                background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3%22%20fill%3D%22lightgreen%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                              } 
                              66%{
                                background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-4.5H9v3h6v-3z%22%20fill%3D%22lightgreen%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                              }  
                              100% {
                                background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-9H9v3h6V7m0%204.5H9v3h6v-3z%22%20fill%3D%22lightgreen%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                            }
                            

                            Hatte "lightgreen" verwendet, "lime" funktioniert auch.

                            NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                            Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                            DiginixD 1 Antwort Letzte Antwort
                            0
                            • M MCU

                              @renegade-0

                              .MuiTypography-h5 {
                                  font-size:40px; /* Schrift 14px */
                                  font-weight: bold; /* Fettschrift */
                                  /*color: red;*/
                              }
                              

                              Jetz aber.

                              R Offline
                              R Offline
                              Renegade 0
                              schrieb am zuletzt editiert von
                              #5243

                              @mcu
                              Supi danke, jetzt funzt es einwandfrei. :)

                              Nun gehts an den Screensaver. hrhr

                              1 Antwort Letzte Antwort
                              0
                              • M MCU

                                @diginix sagte in jarvis v2.2.0 - just another remarkable vis:

                                #39B300;

                                Also mit der schnellen Farbänderung geht es wohl nicht.
                                Hab noch eine Stufe hinzugefügt.
                                Nur mit einer festgelegten Farbe:

                                @keyframes charging{
                                  0% {
                                     background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33A1.33%201.33%200%200%200%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34A1.33%201.33%200%200%200%2018%2020.67V5.33C18%204.6%2017.4%204%2016.67%204z%22%20fill%3D%22lightgreen%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                     }
                                  33% {
                                    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3%22%20fill%3D%22lightgreen%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                  } 
                                  66%{
                                    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-4.5H9v3h6v-3z%22%20fill%3D%22lightgreen%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                  }  
                                  100% {
                                    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-9H9v3h6V7m0%204.5H9v3h6v-3z%22%20fill%3D%22lightgreen%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                }
                                

                                Hatte "lightgreen" verwendet, "lime" funktioniert auch.

                                DiginixD Offline
                                DiginixD Offline
                                Diginix
                                schrieb am zuletzt editiert von Diginix
                                #5244

                                @mcu Ok, ja mit Farbfestlegung vor dem base64 Export auf iconify funktioniert es nun auch bei mir.
                                4d76c445-ef63-4936-be4c-6c58d26f9973-image.png

                                Aber da komme ich wieder zu meiner parallelen Frage von eigenen Icons die sich nach dem globalen Stil von Jarvis richten. Dort kann man ja eine Hauptfarbe einstellen und alle Icons die man per Namen festlegt, richten sich danach. Wenn ich nun eines habe, was nicht bei iconify existiert, also nicht mit Namen in Jarvis festgelegt werden kann, kann man das dann dennoch "farb-neutral" einfügen und wenn man die globale Farbe ändert richtet es sich danach?
                                Jarvis füllt die Icons ja mit "fill="currentColor"" also ist die globale Highlight Farbe ja in currentColor.

                                Bei base64 Icons ist aber anscheinend immer eine Farbe enthalten. Die Farbe meiner Animation kann ich nun auch nicht flexibel in Jarvis ändern sondern müsste immer alle 3-4 Icons wieder bei iconify mit neuer Fabe exportieren. Das ist etwas unfexibel, aber natürlich besser als nichts.

                                ..:: So long! Tom ::..

                                NUC7i3 (Ubuntu Proxmox VM) | Echo Dots 2+3. Gen | Xiaomi Sensoren | Mi Robot 1S | Yeelight | Sonoff | Shelly | H801 RGB | Gosund SP1 | NodeMCU+ESP32 | Kostal Plenticore PV+BYD | openWB

                                M 1 Antwort Letzte Antwort
                                0
                                • DiginixD Diginix

                                  @mcu Ok, ja mit Farbfestlegung vor dem base64 Export auf iconify funktioniert es nun auch bei mir.
                                  4d76c445-ef63-4936-be4c-6c58d26f9973-image.png

                                  Aber da komme ich wieder zu meiner parallelen Frage von eigenen Icons die sich nach dem globalen Stil von Jarvis richten. Dort kann man ja eine Hauptfarbe einstellen und alle Icons die man per Namen festlegt, richten sich danach. Wenn ich nun eines habe, was nicht bei iconify existiert, also nicht mit Namen in Jarvis festgelegt werden kann, kann man das dann dennoch "farb-neutral" einfügen und wenn man die globale Farbe ändert richtet es sich danach?
                                  Jarvis füllt die Icons ja mit "fill="currentColor"" also ist die globale Highlight Farbe ja in currentColor.

                                  Bei base64 Icons ist aber anscheinend immer eine Farbe enthalten. Die Farbe meiner Animation kann ich nun auch nicht flexibel in Jarvis ändern sondern müsste immer alle 3-4 Icons wieder bei iconify mit neuer Fabe exportieren. Das ist etwas unfexibel, aber natürlich besser als nichts.

                                  M Online
                                  M Online
                                  MCU
                                  schrieb am zuletzt editiert von MCU
                                  #5245

                                  @diginix Das Problem ist das man sich ja das svg von denen live holt und die nur die allgemeinen festgelegten Farben unterstützen, die namentlich festgelegt sind. Ich hatte es auch mal versucht eine RGB-Farbe dem svg mitzugeben:

                                  anstatt 
                                  %22lime%22
                                  %22#671200%22
                                  

                                  das geht auch nicht.
                                  Er nimmt aber auch rgb(255,0,0).
                                  Du musst es ja nicht mir neuer Farbe exportieren, sondern nur im Code anpassen.
                                  0bd655b7-7b76-443c-9c84-1e5f3c68b027-image.png
                                  Normalerweise steht dort "currentColor" und das musst du ersetzen mit dem Farbnamen, den du haben willst.
                                  white,black,lime, red usw.

                                  Willst du parallel unterschiedliche Batterien mit unterschiedlichen Farben nutzen, musst du mehrere @keyframes anlegen mit unterschiedlichen Farben und unterschiedliche Klassen.
                                  .chargeLime .chargeYellow .chargeBlue

                                  NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                                  Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                                  DiginixD 1 Antwort Letzte Antwort
                                  0
                                  • M MCU

                                    @diginix Das Problem ist das man sich ja das svg von denen live holt und die nur die allgemeinen festgelegten Farben unterstützen, die namentlich festgelegt sind. Ich hatte es auch mal versucht eine RGB-Farbe dem svg mitzugeben:

                                    anstatt 
                                    %22lime%22
                                    %22#671200%22
                                    

                                    das geht auch nicht.
                                    Er nimmt aber auch rgb(255,0,0).
                                    Du musst es ja nicht mir neuer Farbe exportieren, sondern nur im Code anpassen.
                                    0bd655b7-7b76-443c-9c84-1e5f3c68b027-image.png
                                    Normalerweise steht dort "currentColor" und das musst du ersetzen mit dem Farbnamen, den du haben willst.
                                    white,black,lime, red usw.

                                    Willst du parallel unterschiedliche Batterien mit unterschiedlichen Farben nutzen, musst du mehrere @keyframes anlegen mit unterschiedlichen Farben und unterschiedliche Klassen.
                                    .chargeLime .chargeYellow .chargeBlue

                                    DiginixD Offline
                                    DiginixD Offline
                                    Diginix
                                    schrieb am zuletzt editiert von
                                    #5246

                                    @mcu Der Hexwert ist im base64 ohne #, den kann man also schon direkt editieren.
                                    Heißt aber am Ende jedes eigene Icon muss die richtige Farbe im Code mitbringen. Es kann sich nicht dem globalen currentColor unterwerfen. Und auch currentColor statt dem Hexwert im base64 funktioniert leider nicht. Wenn man also 100 eigene Icons nutzt und die Farbe ändern will, geht das über den Expertenmodus mit search/replace im JSON am sinnvollsten.

                                    ..:: So long! Tom ::..

                                    NUC7i3 (Ubuntu Proxmox VM) | Echo Dots 2+3. Gen | Xiaomi Sensoren | Mi Robot 1S | Yeelight | Sonoff | Shelly | H801 RGB | Gosund SP1 | NodeMCU+ESP32 | Kostal Plenticore PV+BYD | openWB

                                    M 1 Antwort Letzte Antwort
                                    0
                                    • DiginixD Diginix

                                      @mcu Der Hexwert ist im base64 ohne #, den kann man also schon direkt editieren.
                                      Heißt aber am Ende jedes eigene Icon muss die richtige Farbe im Code mitbringen. Es kann sich nicht dem globalen currentColor unterwerfen. Und auch currentColor statt dem Hexwert im base64 funktioniert leider nicht. Wenn man also 100 eigene Icons nutzt und die Farbe ändern will, geht das über den Expertenmodus mit search/replace im JSON am sinnvollsten.

                                      M Online
                                      M Online
                                      MCU
                                      schrieb am zuletzt editiert von MCU
                                      #5247

                                      @diginix
                                      Also, wenn ich die Farbe vom Icon ändern möchte nutze ich Icon-Stil:

                                      {"default":{"color":"var(--meine-Farbe)"}}
                                      

                                      Hat man alle Icons mit dem Default bedacht, so kann man mit einer Variablen alle Icons auf einmal ändern.
                                      Bei dem anderen geht es um eine Animation, die das Icon überlagert.
                                      Sehr wahrscheinlich würde es mit den svg auch gehen, man muss sie dann nur auf einem http-Server bei sich haben. Dann kann man auch dort mit der Variablen arbeiten, aber das müsste man noch prüfen. Ist nur eine Vermutung.

                                      NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                                      Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                                      DiginixD 1 Antwort Letzte Antwort
                                      0
                                      • M MCU

                                        @diginix
                                        Also, wenn ich die Farbe vom Icon ändern möchte nutze ich Icon-Stil:

                                        {"default":{"color":"var(--meine-Farbe)"}}
                                        

                                        Hat man alle Icons mit dem Default bedacht, so kann man mit einer Variablen alle Icons auf einmal ändern.
                                        Bei dem anderen geht es um eine Animation, die das Icon überlagert.
                                        Sehr wahrscheinlich würde es mit den svg auch gehen, man muss sie dann nur auf einem http-Server bei sich haben. Dann kann man auch dort mit der Variablen arbeiten, aber das müsste man noch prüfen. Ist nur eine Vermutung.

                                        DiginixD Offline
                                        DiginixD Offline
                                        Diginix
                                        schrieb am zuletzt editiert von Diginix
                                        #5248

                                        @mcu Ich habe z.B. diese Icon hier als base64 im Icon Feld

                                        "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MDMuMDU1IDUwMy4wNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwMy4wNTUgNTAzLjA1NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIj4KPGc+Cgk8Y2lyY2xlIGN4PSIyMDcuMTUyIiBjeT0iNDMxLjMxOSIgcj0iMTUiLz4KCTxwYXRoIGQ9Ik0yNTEuNTI3LDI0MC4wNDVjLTI0LjI1MywwLTQzLjk4MywxOS43My00My45ODMsNDMuOTgzczE5LjczLDQzLjk4Myw0My45ODMsNDMuOTgzczQzLjk4My0xOS43Myw0My45ODMtNDMuOTgzICAgUzI3NS43OCwyNDAuMDQ1LDI1MS41MjcsMjQwLjA0NXogTTI1MS41MjcsMjk4LjAxMmMtNy43MTEsMC0xMy45ODMtNi4yNzItMTMuOTgzLTEzLjk4M3M2LjI3Mi0xMy45ODMsMTMuOTgzLTEzLjk4MyAgIHMxMy45ODMsNi4yNzIsMTMuOTgzLDEzLjk4M1MyNTkuMjM4LDI5OC4wMTIsMjUxLjUyNywyOTguMDEyeiIvPgoJPHBhdGggZD0iTTc4LjU1NCw0OC45MDFjLTIxLjcxMiwwLTM5LjM3NSwxNy42NjMtMzkuMzc1LDM5LjM3NXMxNy42NjMsMzkuMzc1LDM5LjM3NSwzOS4zNzVzMzkuMzc1LTE3LjY2MywzOS4zNzUtMzkuMzc1ICAgUzEwMC4yNjYsNDguOTAxLDc4LjU1NCw0OC45MDF6IE03OC41NTQsOTcuNjUxYy01LjE2OSwwLTkuMzc1LTQuMjA2LTkuMzc1LTkuMzc1czQuMjA2LTkuMzc1LDkuMzc1LTkuMzc1czkuMzc1LDQuMjA2LDkuMzc1LDkuMzc1ICAgUzgzLjcyMyw5Ny42NTEsNzguNTU0LDk3LjY1MXoiLz4KCTxwYXRoIGQ9Ik03OC41NTQsMTQ2Ljc3N2MtMjEuNzEyLDAtMzkuMzc1LDE3LjY2My0zOS4zNzUsMzkuMzc1czE3LjY2MywzOS4zNzUsMzkuMzc1LDM5LjM3NXMzOS4zNzUtMTcuNjYzLDM5LjM3NS0zOS4zNzUgICBTMTAwLjI2NiwxNDYuNzc3LDc4LjU1NCwxNDYuNzc3eiBNNzguNTU0LDE5NS41MjdjLTUuMTY5LDAtOS4zNzUtNC4yMDYtOS4zNzUtOS4zNzVzNC4yMDYtOS4zNzUsOS4zNzUtOS4zNzUgICBzOS4zNzUsNC4yMDYsOS4zNzUsOS4zNzVTODMuNzIzLDE5NS41MjcsNzguNTU0LDE5NS41Mjd6Ii8+Cgk8cGF0aCBkPSJNNzguNTU0LDI0NC42NTNjLTIxLjcxMiwwLTM5LjM3NSwxNy42NjMtMzkuMzc1LDM5LjM3NXMxNy42NjMsMzkuMzc1LDM5LjM3NSwzOS4zNzVzMzkuMzc1LTE3LjY2MywzOS4zNzUtMzkuMzc1ICAgUzEwMC4yNjYsMjQ0LjY1Myw3OC41NTQsMjQ0LjY1M3ogTTc4LjU1NCwyOTMuNDAzYy01LjE2OSwwLTkuMzc1LTQuMjA2LTkuMzc1LTkuMzc1czQuMjA2LTkuMzc1LDkuMzc1LTkuMzc1ICAgczkuMzc1LDQuMjA2LDkuMzc1LDkuMzc1UzgzLjcyMywyOTMuNDAzLDc4LjU1NCwyOTMuNDAzeiIvPgoJPHBhdGggZD0iTTExOC4xMSw0NjguOTAyaC00LjQ4NHYtMTAwLjc1aDI4LjQ4YzguMjg0LDAsMTUtNi43MTYsMTUtMTV2LTMzNGMwLTguMjg0LTYuNzE2LTE1LTE1LTE1SDE1Yy04LjI4NCwwLTE1LDYuNzE2LTE1LDE1djMzNCAgIGMwLDguMjg0LDYuNzE2LDE1LDE1LDE1aDI4LjQ4MXYxMDAuNzVoLTQuNDg1Yy04LjI4NCwwLTE1LDYuNzE2LTE1LDE1czYuNzE2LDE1LDE1LDE1YzcuNDM3LDAsNzEuNjc0LDAsNzkuMTE0LDAgICBjOC4yODQsMCwxNS02LjcxNiwxNS0xNVMxMjYuMzk1LDQ2OC45MDIsMTE4LjExLDQ2OC45MDJ6IE0zMCwzMzguMTUydi0zMDRoOTcuMTA2djMwNEMxMTcuNjMzLDMzOC4xNTIsMzkuMTk5LDMzOC4xNTIsMzAsMzM4LjE1MnogICAgTTgzLjYyNiw0NjguOTAySDczLjQ4MXYtMTAwLjc1aDEwLjE0NVY0NjguOTAyeiIvPgoJPHBhdGggZD0iTTQ4OC4wNTUsNC4xNTJIMzYwLjk0OGMtOC4yODQsMC0xNSw2LjcxNi0xNSwxNXYzMzRjMCw4LjI4NCw2LjcxNiwxNSwxNSwxNWgyOC40OHYxMDAuNzVoLTQuNDg0Yy04LjI4NCwwLTE1LDYuNzE2LTE1LDE1ICAgczYuNzE2LDE1LDE1LDE1YzguMDM2LDAsNzEuMDIxLDAsNzkuMTE0LDBjOC4yODQsMCwxNS02LjcxNiwxNS0xNXMtNi43MTYtMTUtMTUtMTVoLTQuNDg1di0xMDAuNzVoMjguNDgxYzguMjg0LDAsMTUtNi43MTYsMTUtMTUgICB2LTMzNEM1MDMuMDU1LDEwLjg2OCw0OTYuMzM5LDQuMTUyLDQ4OC4wNTUsNC4xNTJ6IE00MjkuNTczLDQ2OC45MDJoLTEwLjE0NXYtMTAwLjc1aDEwLjE0NVY0NjguOTAyeiBNNDczLjA1NSwzMzguMTUyICAgYy05LjQ3OCwwLTg3LjkxNCwwLTk3LjEwNiwwdi0zMDRoOTcuMTA2VjMzOC4xNTJ6Ii8+Cgk8cGF0aCBkPSJNNDI0LjUwMSwxMjcuNjUxYzIxLjcxMiwwLDM5LjM3NS0xNy42NjMsMzkuMzc1LTM5LjM3NXMtMTcuNjYzLTM5LjM3NS0zOS4zNzUtMzkuMzc1cy0zOS4zNzUsMTcuNjYzLTM5LjM3NSwzOS4zNzUgICBTNDAyLjc4OSwxMjcuNjUxLDQyNC41MDEsMTI3LjY1MXogTTQyNC41MDEsNzguOTAxYzUuMTY5LDAsOS4zNzUsNC4yMDYsOS4zNzUsOS4zNzVzLTQuMjA2LDkuMzc1LTkuMzc1LDkuMzc1ICAgcy05LjM3NS00LjIwNi05LjM3NS05LjM3NVM0MTkuMzMyLDc4LjkwMSw0MjQuNTAxLDc4LjkwMXoiLz4KCTxwYXRoIGQ9Ik00MjQuNTAxLDIyNS41MjdjMjEuNzEyLDAsMzkuMzc1LTE3LjY2MywzOS4zNzUtMzkuMzc1cy0xNy42NjMtMzkuMzc1LTM5LjM3NS0zOS4zNzVzLTM5LjM3NSwxNy42NjMtMzkuMzc1LDM5LjM3NSAgIFM0MDIuNzg5LDIyNS41MjcsNDI0LjUwMSwyMjUuNTI3eiBNNDI0LjUwMSwxNzYuNzc3YzUuMTY5LDAsOS4zNzUsNC4yMDYsOS4zNzUsOS4zNzVzLTQuMjA2LDkuMzc1LTkuMzc1LDkuMzc1ICAgcy05LjM3NS00LjIwNi05LjM3NS05LjM3NVM0MTkuMzMyLDE3Ni43NzcsNDI0LjUwMSwxNzYuNzc3eiIvPgoJPHBhdGggZD0iTTQyNC41MDEsMzIzLjQwM2MyMS43MTIsMCwzOS4zNzUtMTcuNjYzLDM5LjM3NS0zOS4zNzVzLTE3LjY2My0zOS4zNzUtMzkuMzc1LTM5LjM3NXMtMzkuMzc1LDE3LjY2My0zOS4zNzUsMzkuMzc1ICAgUzQwMi43ODksMzIzLjQwMyw0MjQuNTAxLDMyMy40MDN6IE00MjQuNTAxLDI3NC42NTNjNS4xNjksMCw5LjM3NSw0LjIwNiw5LjM3NSw5LjM3NXMtNC4yMDYsOS4zNzUtOS4zNzUsOS4zNzUgICBzLTkuMzc1LTQuMjA2LTkuMzc1LTkuMzc1UzQxOS4zMzIsMjc0LjY1Myw0MjQuNTAxLDI3NC42NTN6Ii8+Cgk8cGF0aCBkPSJNMzQ2LjE5NCwzNzguNjFoLTEwLjU4NVYyMTYuMzhjMC04LjI4NC02LjcxNi0xNS0xNS0xNUgxODIuNDQ1Yy04LjI4NCwwLTE1LDYuNzE2LTE1LDE1djE2Mi4yM0gxNTYuODYgICBjLTguMjg0LDAtMTUsNi43MTYtMTUsMTV2NzUuNDE3YzAsOC4yODQsNi43MTYsMTUsMTUsMTVoMTg5LjMzNGM4LjI4NCwwLDE1LTYuNzE2LDE1LTE1VjM5My42MSAgIEMzNjEuMTk0LDM4NS4zMjYsMzU0LjQ3OSwzNzguNjEsMzQ2LjE5NCwzNzguNjF6IE0xOTcuNDQ1LDIzMS4zOGgxMDguMTY0djE0Ny4yM0gxOTcuNDQ1VjIzMS4zOHogTTMzMS4xOTQsNDU0LjAyN0gxNzEuODZWNDA4LjYxICAgYzQuOTU4LDAsMTU1LjEzMiwwLDE1OS4zMzQsMFY0NTQuMDI3eiIvPgoJPHBhdGggZD0iTTI0OS43NzcsNDQ2LjMxOWg1Mi43NWM4LjI4NCwwLDE1LTYuNzE2LDE1LTE1cy02LjcxNi0xNS0xNS0xNWgtNTIuNzVjLTguMjg0LDAtMTUsNi43MTYtMTUsMTUgICBTMjQxLjQ5Myw0NDYuMzE5LDI0OS43NzcsNDQ2LjMxOXoiLz4KCTxwYXRoIGQ9Ik0yMDguODA0LDE4NS42MDZjMTkuOTU1LDAsMzYuMTg5LTE2LjIzNCwzNi4xODktMzYuMTg5di00OS4wOThoNDkuNzAxdjEzLjQ0OWMtMi4wMTMtMC4zNDktNC4wNzktMC41NDEtNi4xODktMC41NDEgICBjLTE5Ljk1NSwwLTM2LjE4OSwxNi4yMzQtMzYuMTg5LDM2LjE4OXMxNi4yMzQsMzYuMTg5LDM2LjE4OSwzNi4xODlzMzYuMTg5LTE2LjIzNCwzNi4xODktMzYuMTg5VjQ2LjY1MmMwLTguMjg0LTYuNzE2LTE1LTE1LTE1ICAgaC03OS43MDFjLTguMjg0LDAtMTUsNi43MTYtMTUsMTV2NjcuMTE2Yy0yLjAxMy0wLjM0OS00LjA3OS0wLjU0MS02LjE4OS0wLjU0MWMtMTkuOTU1LDAtMzYuMTg5LDE2LjIzNC0zNi4xODksMzYuMTg5ICAgUzE4OC44NDksMTg1LjYwNiwyMDguODA0LDE4NS42MDZ6IE0yODguNTA1LDE1NS42MDZjLTMuNDEzLDAtNi4xODktMi43NzYtNi4xODktNi4xODlzMi43NzYtNi4xODksNi4xODktNi4xODkgICBzNi4xODksMi43NzYsNi4xODksNi4xODlTMjkxLjkxOCwxNTUuNjA2LDI4OC41MDUsMTU1LjYwNnogTTI0NC45OTMsNjEuNjUyaDQ5LjcwMXY4LjY2N2gtNDkuNzAxVjYxLjY1MnogTTIwOC44MDQsMTQzLjIyOCAgIGMzLjQxMywwLDYuMTg5LDIuNzc2LDYuMTg5LDYuMTg5cy0yLjc3Niw2LjE4OS02LjE4OSw2LjE4OXMtNi4xODktMi43NzYtNi4xODktNi4xODlTMjA1LjM5MSwxNDMuMjI4LDIwOC44MDQsMTQzLjIyOHoiLz4KPC9nPgoKCgoKCgoKCgoKCgoKCgo8L3N2Zz4K"
                                        


                                        und im Icon Stil:

                                        {
                                          "true": {
                                            "color": "var(--highlight_green)"
                                          },
                                          "default": {
                                            "color": "#ffffb3"
                                          }
                                        }
                                        

                                        Trotzdem bleibt das Icon schwarz.

                                        Oder hier ein SVG eines Echo Dot (klick auf freie Fläche)
                                        006-echo-dot-2.svg
                                        welches es weder iconify noch materialicons gibt. Das hat im Code keine Farbevorgabe, ich bekomme es aber als base64 auch nicht mit Icon Stil und color umgefärbt.

                                        ..:: So long! Tom ::..

                                        NUC7i3 (Ubuntu Proxmox VM) | Echo Dots 2+3. Gen | Xiaomi Sensoren | Mi Robot 1S | Yeelight | Sonoff | Shelly | H801 RGB | Gosund SP1 | NodeMCU+ESP32 | Kostal Plenticore PV+BYD | openWB

                                        M 1 Antwort Letzte Antwort
                                        0
                                        • DiginixD Diginix

                                          @mcu Ich habe z.B. diese Icon hier als base64 im Icon Feld

                                          "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MDMuMDU1IDUwMy4wNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwMy4wNTUgNTAzLjA1NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIj4KPGc+Cgk8Y2lyY2xlIGN4PSIyMDcuMTUyIiBjeT0iNDMxLjMxOSIgcj0iMTUiLz4KCTxwYXRoIGQ9Ik0yNTEuNTI3LDI0MC4wNDVjLTI0LjI1MywwLTQzLjk4MywxOS43My00My45ODMsNDMuOTgzczE5LjczLDQzLjk4Myw0My45ODMsNDMuOTgzczQzLjk4My0xOS43Myw0My45ODMtNDMuOTgzICAgUzI3NS43OCwyNDAuMDQ1LDI1MS41MjcsMjQwLjA0NXogTTI1MS41MjcsMjk4LjAxMmMtNy43MTEsMC0xMy45ODMtNi4yNzItMTMuOTgzLTEzLjk4M3M2LjI3Mi0xMy45ODMsMTMuOTgzLTEzLjk4MyAgIHMxMy45ODMsNi4yNzIsMTMuOTgzLDEzLjk4M1MyNTkuMjM4LDI5OC4wMTIsMjUxLjUyNywyOTguMDEyeiIvPgoJPHBhdGggZD0iTTc4LjU1NCw0OC45MDFjLTIxLjcxMiwwLTM5LjM3NSwxNy42NjMtMzkuMzc1LDM5LjM3NXMxNy42NjMsMzkuMzc1LDM5LjM3NSwzOS4zNzVzMzkuMzc1LTE3LjY2MywzOS4zNzUtMzkuMzc1ICAgUzEwMC4yNjYsNDguOTAxLDc4LjU1NCw0OC45MDF6IE03OC41NTQsOTcuNjUxYy01LjE2OSwwLTkuMzc1LTQuMjA2LTkuMzc1LTkuMzc1czQuMjA2LTkuMzc1LDkuMzc1LTkuMzc1czkuMzc1LDQuMjA2LDkuMzc1LDkuMzc1ICAgUzgzLjcyMyw5Ny42NTEsNzguNTU0LDk3LjY1MXoiLz4KCTxwYXRoIGQ9Ik03OC41NTQsMTQ2Ljc3N2MtMjEuNzEyLDAtMzkuMzc1LDE3LjY2My0zOS4zNzUsMzkuMzc1czE3LjY2MywzOS4zNzUsMzkuMzc1LDM5LjM3NXMzOS4zNzUtMTcuNjYzLDM5LjM3NS0zOS4zNzUgICBTMTAwLjI2NiwxNDYuNzc3LDc4LjU1NCwxNDYuNzc3eiBNNzguNTU0LDE5NS41MjdjLTUuMTY5LDAtOS4zNzUtNC4yMDYtOS4zNzUtOS4zNzVzNC4yMDYtOS4zNzUsOS4zNzUtOS4zNzUgICBzOS4zNzUsNC4yMDYsOS4zNzUsOS4zNzVTODMuNzIzLDE5NS41MjcsNzguNTU0LDE5NS41Mjd6Ii8+Cgk8cGF0aCBkPSJNNzguNTU0LDI0NC42NTNjLTIxLjcxMiwwLTM5LjM3NSwxNy42NjMtMzkuMzc1LDM5LjM3NXMxNy42NjMsMzkuMzc1LDM5LjM3NSwzOS4zNzVzMzkuMzc1LTE3LjY2MywzOS4zNzUtMzkuMzc1ICAgUzEwMC4yNjYsMjQ0LjY1Myw3OC41NTQsMjQ0LjY1M3ogTTc4LjU1NCwyOTMuNDAzYy01LjE2OSwwLTkuMzc1LTQuMjA2LTkuMzc1LTkuMzc1czQuMjA2LTkuMzc1LDkuMzc1LTkuMzc1ICAgczkuMzc1LDQuMjA2LDkuMzc1LDkuMzc1UzgzLjcyMywyOTMuNDAzLDc4LjU1NCwyOTMuNDAzeiIvPgoJPHBhdGggZD0iTTExOC4xMSw0NjguOTAyaC00LjQ4NHYtMTAwLjc1aDI4LjQ4YzguMjg0LDAsMTUtNi43MTYsMTUtMTV2LTMzNGMwLTguMjg0LTYuNzE2LTE1LTE1LTE1SDE1Yy04LjI4NCwwLTE1LDYuNzE2LTE1LDE1djMzNCAgIGMwLDguMjg0LDYuNzE2LDE1LDE1LDE1aDI4LjQ4MXYxMDAuNzVoLTQuNDg1Yy04LjI4NCwwLTE1LDYuNzE2LTE1LDE1czYuNzE2LDE1LDE1LDE1YzcuNDM3LDAsNzEuNjc0LDAsNzkuMTE0LDAgICBjOC4yODQsMCwxNS02LjcxNiwxNS0xNVMxMjYuMzk1LDQ2OC45MDIsMTE4LjExLDQ2OC45MDJ6IE0zMCwzMzguMTUydi0zMDRoOTcuMTA2djMwNEMxMTcuNjMzLDMzOC4xNTIsMzkuMTk5LDMzOC4xNTIsMzAsMzM4LjE1MnogICAgTTgzLjYyNiw0NjguOTAySDczLjQ4MXYtMTAwLjc1aDEwLjE0NVY0NjguOTAyeiIvPgoJPHBhdGggZD0iTTQ4OC4wNTUsNC4xNTJIMzYwLjk0OGMtOC4yODQsMC0xNSw2LjcxNi0xNSwxNXYzMzRjMCw4LjI4NCw2LjcxNiwxNSwxNSwxNWgyOC40OHYxMDAuNzVoLTQuNDg0Yy04LjI4NCwwLTE1LDYuNzE2LTE1LDE1ICAgczYuNzE2LDE1LDE1LDE1YzguMDM2LDAsNzEuMDIxLDAsNzkuMTE0LDBjOC4yODQsMCwxNS02LjcxNiwxNS0xNXMtNi43MTYtMTUtMTUtMTVoLTQuNDg1di0xMDAuNzVoMjguNDgxYzguMjg0LDAsMTUtNi43MTYsMTUtMTUgICB2LTMzNEM1MDMuMDU1LDEwLjg2OCw0OTYuMzM5LDQuMTUyLDQ4OC4wNTUsNC4xNTJ6IE00MjkuNTczLDQ2OC45MDJoLTEwLjE0NXYtMTAwLjc1aDEwLjE0NVY0NjguOTAyeiBNNDczLjA1NSwzMzguMTUyICAgYy05LjQ3OCwwLTg3LjkxNCwwLTk3LjEwNiwwdi0zMDRoOTcuMTA2VjMzOC4xNTJ6Ii8+Cgk8cGF0aCBkPSJNNDI0LjUwMSwxMjcuNjUxYzIxLjcxMiwwLDM5LjM3NS0xNy42NjMsMzkuMzc1LTM5LjM3NXMtMTcuNjYzLTM5LjM3NS0zOS4zNzUtMzkuMzc1cy0zOS4zNzUsMTcuNjYzLTM5LjM3NSwzOS4zNzUgICBTNDAyLjc4OSwxMjcuNjUxLDQyNC41MDEsMTI3LjY1MXogTTQyNC41MDEsNzguOTAxYzUuMTY5LDAsOS4zNzUsNC4yMDYsOS4zNzUsOS4zNzVzLTQuMjA2LDkuMzc1LTkuMzc1LDkuMzc1ICAgcy05LjM3NS00LjIwNi05LjM3NS05LjM3NVM0MTkuMzMyLDc4LjkwMSw0MjQuNTAxLDc4LjkwMXoiLz4KCTxwYXRoIGQ9Ik00MjQuNTAxLDIyNS41MjdjMjEuNzEyLDAsMzkuMzc1LTE3LjY2MywzOS4zNzUtMzkuMzc1cy0xNy42NjMtMzkuMzc1LTM5LjM3NS0zOS4zNzVzLTM5LjM3NSwxNy42NjMtMzkuMzc1LDM5LjM3NSAgIFM0MDIuNzg5LDIyNS41MjcsNDI0LjUwMSwyMjUuNTI3eiBNNDI0LjUwMSwxNzYuNzc3YzUuMTY5LDAsOS4zNzUsNC4yMDYsOS4zNzUsOS4zNzVzLTQuMjA2LDkuMzc1LTkuMzc1LDkuMzc1ICAgcy05LjM3NS00LjIwNi05LjM3NS05LjM3NVM0MTkuMzMyLDE3Ni43NzcsNDI0LjUwMSwxNzYuNzc3eiIvPgoJPHBhdGggZD0iTTQyNC41MDEsMzIzLjQwM2MyMS43MTIsMCwzOS4zNzUtMTcuNjYzLDM5LjM3NS0zOS4zNzVzLTE3LjY2My0zOS4zNzUtMzkuMzc1LTM5LjM3NXMtMzkuMzc1LDE3LjY2My0zOS4zNzUsMzkuMzc1ICAgUzQwMi43ODksMzIzLjQwMyw0MjQuNTAxLDMyMy40MDN6IE00MjQuNTAxLDI3NC42NTNjNS4xNjksMCw5LjM3NSw0LjIwNiw5LjM3NSw5LjM3NXMtNC4yMDYsOS4zNzUtOS4zNzUsOS4zNzUgICBzLTkuMzc1LTQuMjA2LTkuMzc1LTkuMzc1UzQxOS4zMzIsMjc0LjY1Myw0MjQuNTAxLDI3NC42NTN6Ii8+Cgk8cGF0aCBkPSJNMzQ2LjE5NCwzNzguNjFoLTEwLjU4NVYyMTYuMzhjMC04LjI4NC02LjcxNi0xNS0xNS0xNUgxODIuNDQ1Yy04LjI4NCwwLTE1LDYuNzE2LTE1LDE1djE2Mi4yM0gxNTYuODYgICBjLTguMjg0LDAtMTUsNi43MTYtMTUsMTV2NzUuNDE3YzAsOC4yODQsNi43MTYsMTUsMTUsMTVoMTg5LjMzNGM4LjI4NCwwLDE1LTYuNzE2LDE1LTE1VjM5My42MSAgIEMzNjEuMTk0LDM4NS4zMjYsMzU0LjQ3OSwzNzguNjEsMzQ2LjE5NCwzNzguNjF6IE0xOTcuNDQ1LDIzMS4zOGgxMDguMTY0djE0Ny4yM0gxOTcuNDQ1VjIzMS4zOHogTTMzMS4xOTQsNDU0LjAyN0gxNzEuODZWNDA4LjYxICAgYzQuOTU4LDAsMTU1LjEzMiwwLDE1OS4zMzQsMFY0NTQuMDI3eiIvPgoJPHBhdGggZD0iTTI0OS43NzcsNDQ2LjMxOWg1Mi43NWM4LjI4NCwwLDE1LTYuNzE2LDE1LTE1cy02LjcxNi0xNS0xNS0xNWgtNTIuNzVjLTguMjg0LDAtMTUsNi43MTYtMTUsMTUgICBTMjQxLjQ5Myw0NDYuMzE5LDI0OS43NzcsNDQ2LjMxOXoiLz4KCTxwYXRoIGQ9Ik0yMDguODA0LDE4NS42MDZjMTkuOTU1LDAsMzYuMTg5LTE2LjIzNCwzNi4xODktMzYuMTg5di00OS4wOThoNDkuNzAxdjEzLjQ0OWMtMi4wMTMtMC4zNDktNC4wNzktMC41NDEtNi4xODktMC41NDEgICBjLTE5Ljk1NSwwLTM2LjE4OSwxNi4yMzQtMzYuMTg5LDM2LjE4OXMxNi4yMzQsMzYuMTg5LDM2LjE4OSwzNi4xODlzMzYuMTg5LTE2LjIzNCwzNi4xODktMzYuMTg5VjQ2LjY1MmMwLTguMjg0LTYuNzE2LTE1LTE1LTE1ICAgaC03OS43MDFjLTguMjg0LDAtMTUsNi43MTYtMTUsMTV2NjcuMTE2Yy0yLjAxMy0wLjM0OS00LjA3OS0wLjU0MS02LjE4OS0wLjU0MWMtMTkuOTU1LDAtMzYuMTg5LDE2LjIzNC0zNi4xODksMzYuMTg5ICAgUzE4OC44NDksMTg1LjYwNiwyMDguODA0LDE4NS42MDZ6IE0yODguNTA1LDE1NS42MDZjLTMuNDEzLDAtNi4xODktMi43NzYtNi4xODktNi4xODlzMi43NzYtNi4xODksNi4xODktNi4xODkgICBzNi4xODksMi43NzYsNi4xODksNi4xODlTMjkxLjkxOCwxNTUuNjA2LDI4OC41MDUsMTU1LjYwNnogTTI0NC45OTMsNjEuNjUyaDQ5LjcwMXY4LjY2N2gtNDkuNzAxVjYxLjY1MnogTTIwOC44MDQsMTQzLjIyOCAgIGMzLjQxMywwLDYuMTg5LDIuNzc2LDYuMTg5LDYuMTg5cy0yLjc3Niw2LjE4OS02LjE4OSw2LjE4OXMtNi4xODktMi43NzYtNi4xODktNi4xODlTMjA1LjM5MSwxNDMuMjI4LDIwOC44MDQsMTQzLjIyOHoiLz4KPC9nPgoKCgoKCgoKCgoKCgoKCgo8L3N2Zz4K"
                                          


                                          und im Icon Stil:

                                          {
                                            "true": {
                                              "color": "var(--highlight_green)"
                                            },
                                            "default": {
                                              "color": "#ffffb3"
                                            }
                                          }
                                          

                                          Trotzdem bleibt das Icon schwarz.

                                          Oder hier ein SVG eines Echo Dot (klick auf freie Fläche)
                                          006-echo-dot-2.svg
                                          welches es weder iconify noch materialicons gibt. Das hat im Code keine Farbevorgabe, ich bekomme es aber als base64 auch nicht mit Icon Stil und color umgefärbt.

                                          M Online
                                          M Online
                                          MCU
                                          schrieb am zuletzt editiert von MCU
                                          #5249

                                          @diginix
                                          Schick mir mal bitte den SVG-Code vom unteren Bild. Hab ich schon.

                                          c5badca8-58fb-40dc-b3f2-c0aac1fe56a4-image.png

                                          Ich geh da mal auf Forschungsreise, melde mich dazu dann.

                                          NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                                          Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                                          DiginixD 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

                                          959

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          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