Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Tester
  4. jarvis v2.2.0 - just another remarkable vis

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    3.0k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.1k

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.4k

jarvis v2.2.0 - just another remarkable vis

Scheduled Pinned Locked Moved Tester
jarvismaterialmaterial uimaterialdesignvisvisualisierungvisualization
6.1k Posts 316 Posters 4.3m Views 273 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • 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
    wrote on last edited by
    #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 Reply Last reply
    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
      wrote on last edited by
      #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 Reply Last reply
      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
        wrote on last edited by
        #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 Reply Last reply
        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
          wrote on last edited by 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 Reply Last reply
          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
            wrote on last edited by
            #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 Reply Last reply
            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
              wrote on last edited by 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 Reply Last reply
              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
                wrote on last edited by
                #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 Reply Last reply
                0
                • E Offline
                  E Offline
                  eastcoast
                  wrote on last edited by
                  #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 Reply Last reply
                  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
                    wrote on last edited by
                    #4763

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

                    ZefauZ 1 Reply Last reply
                    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
                      wrote on last edited by
                      #4764

                      @ww1983 sollte mit v3 definitiv nicht mehr so sein

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

                      E 1 Reply Last reply
                      2
                      • ZefauZ Zefau

                        @ww1983 sollte mit v3 definitiv nicht mehr so sein

                        E Offline
                        E Offline
                        eastcoast
                        wrote on last edited by 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 Reply Last reply
                        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
                          wrote on last edited by
                          #4766

                          @eastcoast die URL kommt aus dem Datenpunkt

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

                          E 1 Reply Last reply
                          0
                          • ZefauZ Zefau

                            @eastcoast die URL kommt aus dem Datenpunkt

                            E Offline
                            E Offline
                            eastcoast
                            wrote on last edited by 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 Reply Last reply
                            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
                              wrote on last edited by
                              #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 Reply Last reply
                              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
                                wrote on last edited by 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 Reply Last reply
                                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
                                  wrote on last edited by
                                  #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 Reply Last reply
                                  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
                                    wrote on last edited by
                                    #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 Reply Last reply
                                    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
                                      wrote on last edited by
                                      #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 Reply Last reply
                                      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
                                        wrote on last edited by
                                        #4773

                                        @mcu vielen Dank! :)

                                        1 Reply Last reply
                                        0
                                        • A Offline
                                          A Offline
                                          Algie
                                          wrote on last edited by
                                          #4774

                                          Hallo,

                                          ich habe jarvis vor kurzem erst entdeckt und bin begeistert.
                                          Beim umsetzen meiner Visualisierung habe ich eine Frage. Ist es möglich die Spritpreise ohne VIS und iFrame so darzustellen?

                                          eb7698d1-9801-4ed2-baf7-b0ac413f5dd8-image.png
                                          Also die dritte Dezimalzahl erhöht?

                                          M 1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          710

                                          Online

                                          32.7k

                                          Users

                                          82.3k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe