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

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

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

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 Online
    M Online
    MCU
    schrieb am zuletzt editiert von MCU
    #4754

    Besondere Highlights für besondere Werte
    https://www.youtube.com/watch?v=-Rv1dbvM1EY

    Zu sehen, Umschaltung von einem TAB zum Effekt-TAB, Effekt wird nur 3x angezeigt mit zusätzlichem Blink-Effekt.
    jarvis_v222-besondereWerte.gif

    Selektiertes TAB besser sichtbar machen:
    jarvis_v222-TAB-BackgroundSelected.gif

    .MuiTab-wrapper:hover
    { 
      background-color: #00ff00;   
      color: black;
      // font-size: 80%;
      font-weight:bold;
      outline: dotted white;
    }
    
    [aria-selected = 'true'] [role='img'] 
    {   
      background-color: #00ff00;
      color: black;
    }
    
    [aria-selected = 'true'] 
    { 
      background-color: #00ff00;
      color: black;
    }
    
    .MuiTab-wrapper:active
    {   
      background-color: #00ff00;
    }
    

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

    A L 2 Antworten Letzte Antwort
    2
    • M MCU

      Besondere Highlights für besondere Werte
      https://www.youtube.com/watch?v=-Rv1dbvM1EY

      Zu sehen, Umschaltung von einem TAB zum Effekt-TAB, Effekt wird nur 3x angezeigt mit zusätzlichem Blink-Effekt.
      jarvis_v222-besondereWerte.gif

      Selektiertes TAB besser sichtbar machen:
      jarvis_v222-TAB-BackgroundSelected.gif

      .MuiTab-wrapper:hover
      { 
        background-color: #00ff00;   
        color: black;
        // font-size: 80%;
        font-weight:bold;
        outline: dotted white;
      }
      
      [aria-selected = 'true'] [role='img'] 
      {   
        background-color: #00ff00;
        color: black;
      }
      
      [aria-selected = 'true'] 
      { 
        background-color: #00ff00;
        color: black;
      }
      
      .MuiTab-wrapper:active
      {   
        background-color: #00ff00;
      }
      

      A Offline
      A Offline
      alexzi
      schrieb am zuletzt editiert von
      #4755

      Hallo zusammen,
      ich hab mir von IKEA LED Leisten mit dem Ikea ICPSHC24-30EU-IL-1 gekauft. Ist der LED Trafo der über Trädfri läuft. Über den Zigbee Adapter ist der auch eingebunden. Passt soweit.
      Beim Dimmer habe ich das Problem, dass ich Werte zwischen 1 und 67 angeben kann, ich aber nicht weiß wie ich das in Jarvis konfigurieren muss. Als min/max habe ich schon {"min":1,"max":67} eingetragen. Einheit ist aktuell leer, wenn ich jetzt den Dimmer in Jarvis verwenden will kommt die Fehlermeldung im Slider "Value provided for LevelBody not a number!". Was muss ich da machen?
      Danke für jeden Wink. ;)
      Grüße
      Alexander

      M 1 Antwort Letzte Antwort
      0
      • A alexzi

        Hallo zusammen,
        ich hab mir von IKEA LED Leisten mit dem Ikea ICPSHC24-30EU-IL-1 gekauft. Ist der LED Trafo der über Trädfri läuft. Über den Zigbee Adapter ist der auch eingebunden. Passt soweit.
        Beim Dimmer habe ich das Problem, dass ich Werte zwischen 1 und 67 angeben kann, ich aber nicht weiß wie ich das in Jarvis konfigurieren muss. Als min/max habe ich schon {"min":1,"max":67} eingetragen. Einheit ist aktuell leer, wenn ich jetzt den Dimmer in Jarvis verwenden will kommt die Fehlermeldung im Slider "Value provided for LevelBody not a number!". Was muss ich da machen?
        Danke für jeden Wink. ;)
        Grüße
        Alexander

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

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

        {"min":1,"max":67}

         {"min":"1","max":"67"}
        

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

        A 1 Antwort Letzte Antwort
        0
        • M MCU

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

          {"min":1,"max":67}

           {"min":"1","max":"67"}
          
          A Offline
          A Offline
          alexzi
          schrieb am zuletzt editiert von
          #4757

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

          {"min":"1","max":"67"}

          :man-shrugging:

          2021-07-27 15_33_07-Window.png

          2021-07-27 15_32_36-Window.png

          M 1 Antwort Letzte Antwort
          0
          • A alexzi

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

            {"min":"1","max":"67"}

            :man-shrugging:

            2021-07-27 15_33_07-Window.png

            2021-07-27 15_32_36-Window.png

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

            @alexzi
            Welches Gewerk ist eingetragen?
            bf8ec4a7-7481-4ec6-aaa0-2548fda9a08c-image.png

            6deae1dc-0f97-4d16-b657-d3ddd6bce506-image.png
            6bf3bd61-61a4-4bbb-81db-113017bcf229-image.png

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

            A 1 Antwort Letzte Antwort
            0
            • M MCU

              @alexzi
              Welches Gewerk ist eingetragen?
              bf8ec4a7-7481-4ec6-aaa0-2548fda9a08c-image.png

              6deae1dc-0f97-4d16-b657-d3ddd6bce506-image.png
              6bf3bd61-61a4-4bbb-81db-113017bcf229-image.png

              A Offline
              A Offline
              alexzi
              schrieb am zuletzt editiert von
              #4759

              @mcu
              Licht (light)
              komisch ist auch, dass ich den Slider (LevelBody) beim ausgeschalteten Zustand bekomme, sich aber nichts ändert. Sobald ich das Teil anschalte und auf den Dimmer gehe, dann kommt der Fehler. Kapiere ich nicht.
              Im zigBee-Objekt kann ich die brightness einstellen mit Wert 1-67. Wenn state auf false ist und ich eine Zahl größer 1 eintrage, dann geht der state automatisch auf true, bei 0 geht er auch automatisch auf false.

              M 1 Antwort Letzte Antwort
              0
              • A alexzi

                @mcu
                Licht (light)
                komisch ist auch, dass ich den Slider (LevelBody) beim ausgeschalteten Zustand bekomme, sich aber nichts ändert. Sobald ich das Teil anschalte und auf den Dimmer gehe, dann kommt der Fehler. Kapiere ich nicht.
                Im zigBee-Objekt kann ich die brightness einstellen mit Wert 1-67. Wenn state auf false ist und ich eine Zahl größer 1 eintrage, dann geht der state automatisch auf true, bei 0 geht er auch automatisch auf false.

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

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

                komisch ist auch, dass ich den Slider (LevelBody) beim ausgeschalteten Zustand bekomme, sich aber nichts ändert.

                Nun dann musst den Bereich von 0 beginnen, damit bei "aus" auch die "0" angezeigt werden kann.
                Was macht er denn ohne Eingrenzung?
                state ist ein Boolean?
                Zeig mal bitte die komplette Zigbee-Struktur von dem Gerät. (objects)
                0bee20ab-e473-4aab-8dcb-3822bea3acba-image.png
                Muss da nicht evtl brightness ausgewählt sein?
                037807f0-e422-4cbc-8c35-a3db0f601031-image.png

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

                A 1 Antwort Letzte Antwort
                0
                • M MCU

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

                  komisch ist auch, dass ich den Slider (LevelBody) beim ausgeschalteten Zustand bekomme, sich aber nichts ändert.

                  Nun dann musst den Bereich von 0 beginnen, damit bei "aus" auch die "0" angezeigt werden kann.
                  Was macht er denn ohne Eingrenzung?
                  state ist ein Boolean?
                  Zeig mal bitte die komplette Zigbee-Struktur von dem Gerät. (objects)
                  0bee20ab-e473-4aab-8dcb-3822bea3acba-image.png
                  Muss da nicht evtl brightness ausgewählt sein?
                  037807f0-e422-4cbc-8c35-a3db0f601031-image.png

                  A Offline
                  A Offline
                  alexzi
                  schrieb am zuletzt editiert von
                  #4761

                  @mcu
                  Alter, ich bin echt dümmer als die Schellen-Sau...... duckundweg
                  Layer 8 Problem. sorry.
                  Ich hatte aus Versehen .state im Dimmer, anstatt .brightness. upps
                  Geht problemlos. over and out.

                  1 Antwort Letzte Antwort
                  0
                  • E Offline
                    E Offline
                    eastcoast
                    schrieb am zuletzt editiert von
                    #4762

                    Hallo, erstmal vielen Dank für den super Adapter! Bisher hatte ich 'vis' in Verwendung und teste jetzt jarvis.
                    Mit der 'Statelist' habe ich jedoch ein Problem:
                    Wenn bei meinem Wand-Tablet (FullyBrowser) das Display aus ist und sich ein Status (Fensterkontakt) ändert wird beim nächsten Aktivieren des Tablets der geänderte Status nicht angezeigt.
                    Bei aktivem Display werden neue Statusänderung sofort aktualisiert.
                    Nur nach einem kompletten Page-reload sind alle Stati wieder aktuell.
                    Jemand eine Idee?

                    Jarvis v2.2.0, Admin 4.2.2, Manage Devices 0.3.16, Fully Kiosk Browser 1.43.5-fire

                    W 1 Antwort Letzte Antwort
                    0
                    • E eastcoast

                      Hallo, erstmal vielen Dank für den super Adapter! Bisher hatte ich 'vis' in Verwendung und teste jetzt jarvis.
                      Mit der 'Statelist' habe ich jedoch ein Problem:
                      Wenn bei meinem Wand-Tablet (FullyBrowser) das Display aus ist und sich ein Status (Fensterkontakt) ändert wird beim nächsten Aktivieren des Tablets der geänderte Status nicht angezeigt.
                      Bei aktivem Display werden neue Statusänderung sofort aktualisiert.
                      Nur nach einem kompletten Page-reload sind alle Stati wieder aktuell.
                      Jemand eine Idee?

                      Jarvis v2.2.0, Admin 4.2.2, Manage Devices 0.3.16, Fully Kiosk Browser 1.43.5-fire

                      W Offline
                      W Offline
                      WW1983
                      schrieb am zuletzt editiert von
                      #4763

                      @eastcoast Bei der aktuellen Version ist es leider so. Evtl. wird es ab der Version 3 geändert

                      ZefauZ 1 Antwort Letzte Antwort
                      0
                      • W WW1983

                        @eastcoast Bei der aktuellen Version ist es leider so. Evtl. wird es ab der Version 3 geändert

                        ZefauZ Offline
                        ZefauZ Offline
                        Zefau
                        schrieb am zuletzt editiert von
                        #4764

                        @ww1983 sollte mit v3 definitiv nicht mehr so sein

                        Meine Adapter: https://zefau.github.io/iobroker/

                        E 1 Antwort Letzte Antwort
                        2
                        • ZefauZ Zefau

                          @ww1983 sollte mit v3 definitiv nicht mehr so sein

                          E Offline
                          E Offline
                          eastcoast
                          schrieb am zuletzt editiert von eastcoast
                          #4765

                          @zefau
                          Ok, super danke!
                          Habe es gerade getestet, scheint zu funktionieren.

                          Mit der v3 finde ich jedoch im Modul 'DisplayImage' kein Konfigurationsfeld für die URL?

                          ZefauZ 1 Antwort Letzte Antwort
                          0
                          • E eastcoast

                            @zefau
                            Ok, super danke!
                            Habe es gerade getestet, scheint zu funktionieren.

                            Mit der v3 finde ich jedoch im Modul 'DisplayImage' kein Konfigurationsfeld für die URL?

                            ZefauZ Offline
                            ZefauZ Offline
                            Zefau
                            schrieb am zuletzt editiert von
                            #4766

                            @eastcoast die URL kommt aus dem Datenpunkt

                            Meine Adapter: https://zefau.github.io/iobroker/

                            E 1 Antwort Letzte Antwort
                            0
                            • ZefauZ Zefau

                              @eastcoast die URL kommt aus dem Datenpunkt

                              E Offline
                              E Offline
                              eastcoast
                              schrieb am zuletzt editiert von eastcoast
                              #4767

                              @zefau
                              Hatte im Widget-Module 'DisplayImage' in der v2.2.0 direkt die URL meiner Kamera (via MotionEye) eingetragen um das Bild anzuzeigen.
                              Beim 'iFrame' Module ist das nach wie vor möglich, jedoch fehlen hier die Skalierungsmöglichkeiten wie bei 'DisplayImage'.
                              Verstehe jetzt leider nicht ganz, woher die Kamera URL aus welchem Datenpunkt kommen soll?
                              Eine neues Gerät anlegen und darin als Datenpunkt eine URL zu verwenden hat nicht funktioniert.
                              Anbei noch der Screenshot von 'DisplayImage' in der v3, vielleicht haben wir uns nur missverstanden:
                              Screenshot 2021-07-28 115551.jpg

                              M 1 Antwort Letzte Antwort
                              0
                              • E eastcoast

                                @zefau
                                Hatte im Widget-Module 'DisplayImage' in der v2.2.0 direkt die URL meiner Kamera (via MotionEye) eingetragen um das Bild anzuzeigen.
                                Beim 'iFrame' Module ist das nach wie vor möglich, jedoch fehlen hier die Skalierungsmöglichkeiten wie bei 'DisplayImage'.
                                Verstehe jetzt leider nicht ganz, woher die Kamera URL aus welchem Datenpunkt kommen soll?
                                Eine neues Gerät anlegen und darin als Datenpunkt eine URL zu verwenden hat nicht funktioniert.
                                Anbei noch der Screenshot von 'DisplayImage' in der v3, vielleicht haben wir uns nur missverstanden:
                                Screenshot 2021-07-28 115551.jpg

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

                                @eastcoast
                                Du musst einen DP in ioBroker haben mit der URL:
                                5628237c-0fe5-4f3a-bc02-73de8533bc89-image.png
                                Und den dann entsprechend in jarvis als Gerät definieren und im displayimage zuordnen.

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

                                E 1 Antwort Letzte Antwort
                                1
                                • M MCU

                                  @eastcoast
                                  Du musst einen DP in ioBroker haben mit der URL:
                                  5628237c-0fe5-4f3a-bc02-73de8533bc89-image.png
                                  Und den dann entsprechend in jarvis als Gerät definieren und im displayimage zuordnen.

                                  E Offline
                                  E Offline
                                  eastcoast
                                  schrieb am zuletzt editiert von eastcoast
                                  #4769

                                  @mcu
                                  Danke für den Tipp!
                                  Schade dass es nicht mehr so einfach ist wie in v2.2.0 bzw. beim 'iFrame' Module einfach den Datenpunkt/URL direkt zu konfigurieren.
                                  Screenshot 2021-07-28 131842.jpg

                                  M 1 Antwort Letzte Antwort
                                  0
                                  • E eastcoast

                                    @mcu
                                    Danke für den Tipp!
                                    Schade dass es nicht mehr so einfach ist wie in v2.2.0 bzw. beim 'iFrame' Module einfach den Datenpunkt/URL direkt zu konfigurieren.
                                    Screenshot 2021-07-28 131842.jpg

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

                                    @eastcoast Man ist ja erst im Alpha. also abwarten. Da tut sich noch einiges bis zur stable 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.

                                    1 Antwort Letzte Antwort
                                    0
                                    • M MCU

                                      Besondere Highlights für besondere Werte
                                      https://www.youtube.com/watch?v=-Rv1dbvM1EY

                                      Zu sehen, Umschaltung von einem TAB zum Effekt-TAB, Effekt wird nur 3x angezeigt mit zusätzlichem Blink-Effekt.
                                      jarvis_v222-besondereWerte.gif

                                      Selektiertes TAB besser sichtbar machen:
                                      jarvis_v222-TAB-BackgroundSelected.gif

                                      .MuiTab-wrapper:hover
                                      { 
                                        background-color: #00ff00;   
                                        color: black;
                                        // font-size: 80%;
                                        font-weight:bold;
                                        outline: dotted white;
                                      }
                                      
                                      [aria-selected = 'true'] [role='img'] 
                                      {   
                                        background-color: #00ff00;
                                        color: black;
                                      }
                                      
                                      [aria-selected = 'true'] 
                                      { 
                                        background-color: #00ff00;
                                        color: black;
                                      }
                                      
                                      .MuiTab-wrapper:active
                                      {   
                                        background-color: #00ff00;
                                      }
                                      

                                      L Offline
                                      L Offline
                                      LoDDl
                                      schrieb am zuletzt editiert von
                                      #4771

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

                                      Besondere Highlights für besondere Werte
                                      https://www.youtube.com/watch?v=-Rv1dbvM1EY

                                      Zu sehen, Umschaltung von einem TAB zum Effekt-TAB, Effekt wird nur 3x angezeigt mit zusätzlichem Blink-Effekt.
                                      jarvis_v222-besondereWerte.gif

                                      Selektiertes TAB besser sichtbar machen:
                                      jarvis_v222-TAB-BackgroundSelected.gif

                                      .MuiTab-wrapper:hover
                                      { 
                                        background-color: #00ff00;   
                                        color: black;
                                        // font-size: 80%;
                                        font-weight:bold;
                                        outline: dotted white;
                                      }
                                      
                                      [aria-selected = 'true'] [role='img'] 
                                      {   
                                        background-color: #00ff00;
                                        color: black;
                                      }
                                      
                                      [aria-selected = 'true'] 
                                      { 
                                        background-color: #00ff00;
                                        color: black;
                                      }
                                      
                                      .MuiTab-wrapper:active
                                      {   
                                        background-color: #00ff00;
                                      }
                                      

                                      kannst du noch den Style für diesen "Snake-Effekt" teilen? Das Video macht mich nur bedingt schlauer :D

                                      M 1 Antwort Letzte Antwort
                                      0
                                      • L LoDDl

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

                                        Besondere Highlights für besondere Werte
                                        https://www.youtube.com/watch?v=-Rv1dbvM1EY

                                        Zu sehen, Umschaltung von einem TAB zum Effekt-TAB, Effekt wird nur 3x angezeigt mit zusätzlichem Blink-Effekt.
                                        jarvis_v222-besondereWerte.gif

                                        Selektiertes TAB besser sichtbar machen:
                                        jarvis_v222-TAB-BackgroundSelected.gif

                                        .MuiTab-wrapper:hover
                                        { 
                                          background-color: #00ff00;   
                                          color: black;
                                          // font-size: 80%;
                                          font-weight:bold;
                                          outline: dotted white;
                                        }
                                        
                                        [aria-selected = 'true'] [role='img'] 
                                        {   
                                          background-color: #00ff00;
                                          color: black;
                                        }
                                        
                                        [aria-selected = 'true'] 
                                        { 
                                          background-color: #00ff00;
                                          color: black;
                                        }
                                        
                                        .MuiTab-wrapper:active
                                        {   
                                          background-color: #00ff00;
                                        }
                                        

                                        kannst du noch den Style für diesen "Snake-Effekt" teilen? Das Video macht mich nur bedingt schlauer :D

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

                                        @loddl
                                        Datenpunkt-Stil

                                        {"false":{"color":"red","font-weight":"bold","text-shadow":"0 0 5px black;"}}
                                        

                                        Anzeigevariante (blink5 kann man auch weg lassen)

                                        {"false":"<div class='card'><span></span><span></span><span></span><span></span><div class='content blink5'><p>Nicht aktiv</p></div></div>","true":"<a href='https://www.google.de'>GoogleDE</a>"}
                                        

                                        Styles (für mehrere Durchgänge muss man die Anzahl anpassen: 3 forwards)

                                        
                                        .card 
                                        {
                                         position: relative;
                                         width: auto;
                                         height: 25px;
                                         display:flex;
                                         justify-content: center;
                                         align-items: center;
                                         margin: 0px;
                                         overflow:hidden;
                                        }
                                        
                                        .card .content 
                                        {
                                         padding: 10px;
                                         text-align: center;
                                        }
                                        
                                        .card span
                                        {
                                         transition: 1;
                                        }
                                        
                                        .card span:nth-child(1) 
                                        {
                                         position: absolute;
                                         top:0;
                                         left:0;
                                         width:100%;
                                         height:3px;
                                         background: linear-gradient(to right, transparent, red);
                                         animation: animate1 2s linear 3 forwards;
                                        }
                                        @keyframes animate1
                                        {  
                                         0% { transform: translateX(-100%);}
                                         100% { transform: translateX(100%);}
                                        }
                                        
                                        .card span:nth-child(2)
                                        {
                                         position: absolute;
                                         top:0;
                                         right:0;
                                         width:3px;
                                         height:100%;
                                         background: linear-gradient(to bottom, transparent, red);
                                         animation: animate2 2s linear 3 forwards;
                                         animation-delay: 1s;
                                        }
                                        @keyframes animate2
                                        {  
                                         0% { transform: translateY(-100%);}
                                         100% { transform: translateY(100%);}
                                        }
                                        
                                        .card span:nth-child(3) 
                                        {  
                                         position: absolute;  
                                         bottom:0;
                                         left:0;
                                         width:100%;
                                         height:3px;
                                         background: linear-gradient(to left, transparent, red);
                                         animation: animate3 2s linear 3 forwards;
                                        }
                                        @keyframes animate3
                                        {
                                         0% { transform: translateX(100%);}
                                         100% { transform: translateX(-100%);}
                                        }
                                        
                                        .card span:nth-child(4) 
                                        {
                                         position: absolute;
                                         top:0;
                                         left:0;
                                         width:3px;
                                         height:100%;
                                         background: linear-gradient(to top, transparent, red);
                                         animation: animate4 2s linear 3 forwards;
                                         animation-delay: 1s;
                                        }
                                        @keyframes animate4
                                        {
                                         0% { transform: translateY(100%);}
                                         100% { transform: translateY(-100%);}
                                        }
                                        
                                        

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

                                        L 1 Antwort Letzte Antwort
                                        2
                                        • M MCU

                                          @loddl
                                          Datenpunkt-Stil

                                          {"false":{"color":"red","font-weight":"bold","text-shadow":"0 0 5px black;"}}
                                          

                                          Anzeigevariante (blink5 kann man auch weg lassen)

                                          {"false":"<div class='card'><span></span><span></span><span></span><span></span><div class='content blink5'><p>Nicht aktiv</p></div></div>","true":"<a href='https://www.google.de'>GoogleDE</a>"}
                                          

                                          Styles (für mehrere Durchgänge muss man die Anzahl anpassen: 3 forwards)

                                          
                                          .card 
                                          {
                                           position: relative;
                                           width: auto;
                                           height: 25px;
                                           display:flex;
                                           justify-content: center;
                                           align-items: center;
                                           margin: 0px;
                                           overflow:hidden;
                                          }
                                          
                                          .card .content 
                                          {
                                           padding: 10px;
                                           text-align: center;
                                          }
                                          
                                          .card span
                                          {
                                           transition: 1;
                                          }
                                          
                                          .card span:nth-child(1) 
                                          {
                                           position: absolute;
                                           top:0;
                                           left:0;
                                           width:100%;
                                           height:3px;
                                           background: linear-gradient(to right, transparent, red);
                                           animation: animate1 2s linear 3 forwards;
                                          }
                                          @keyframes animate1
                                          {  
                                           0% { transform: translateX(-100%);}
                                           100% { transform: translateX(100%);}
                                          }
                                          
                                          .card span:nth-child(2)
                                          {
                                           position: absolute;
                                           top:0;
                                           right:0;
                                           width:3px;
                                           height:100%;
                                           background: linear-gradient(to bottom, transparent, red);
                                           animation: animate2 2s linear 3 forwards;
                                           animation-delay: 1s;
                                          }
                                          @keyframes animate2
                                          {  
                                           0% { transform: translateY(-100%);}
                                           100% { transform: translateY(100%);}
                                          }
                                          
                                          .card span:nth-child(3) 
                                          {  
                                           position: absolute;  
                                           bottom:0;
                                           left:0;
                                           width:100%;
                                           height:3px;
                                           background: linear-gradient(to left, transparent, red);
                                           animation: animate3 2s linear 3 forwards;
                                          }
                                          @keyframes animate3
                                          {
                                           0% { transform: translateX(100%);}
                                           100% { transform: translateX(-100%);}
                                          }
                                          
                                          .card span:nth-child(4) 
                                          {
                                           position: absolute;
                                           top:0;
                                           left:0;
                                           width:3px;
                                           height:100%;
                                           background: linear-gradient(to top, transparent, red);
                                           animation: animate4 2s linear 3 forwards;
                                           animation-delay: 1s;
                                          }
                                          @keyframes animate4
                                          {
                                           0% { transform: translateY(100%);}
                                           100% { transform: translateY(-100%);}
                                          }
                                          
                                          

                                          L Offline
                                          L Offline
                                          LoDDl
                                          schrieb am zuletzt editiert von
                                          #4773

                                          @mcu vielen Dank! :)

                                          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

                                          460

                                          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