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

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    12
    1
    135

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

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

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.
  • 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
                        • A Algie

                          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 Online
                          M Online
                          MCU
                          wrote on last edited by MCU
                          #4775

                          @algie
                          Würde es so reichen?
                          3085563c-6883-4b99-ab93-85db47603e55-image.png
                          Vorraussetzung ist, die Zahl hat immer den Aufbau x.xxx

                          {"value":"val => String(val).substr(0,4)+'<sup>'+String(val).substr(4,1)+'</sup>' + ' €'"}
                          

                          92bae155-eae9-4575-b0a1-0989a27f2b8c-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
                          1
                          • M MCU

                            @algie
                            Würde es so reichen?
                            3085563c-6883-4b99-ab93-85db47603e55-image.png
                            Vorraussetzung ist, die Zahl hat immer den Aufbau x.xxx

                            {"value":"val => String(val).substr(0,4)+'<sup>'+String(val).substr(4,1)+'</sup>' + ' €'"}
                            

                            92bae155-eae9-4575-b0a1-0989a27f2b8c-image.png

                            A Offline
                            A Offline
                            Algie
                            wrote on last edited by
                            #4776

                            @mcu perfekt, vielen Dank für die schnelle Hilfe.

                            Ist es möglich VIS-Seiten in Jarvis zu skalieren? Mit iFrame geht das nicht.

                            M 1 Reply Last reply
                            0
                            • A Algie

                              @mcu perfekt, vielen Dank für die schnelle Hilfe.

                              Ist es möglich VIS-Seiten in Jarvis zu skalieren? Mit iFrame geht das nicht.

                              M Online
                              M Online
                              MCU
                              wrote on last edited by MCU
                              #4777

                              @algie Zeig mal Deine iFrame Einstellungen und die Anzeige.

                              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 2 Replies Last reply
                              0
                              • M MCU

                                @algie Zeig mal Deine iFrame Einstellungen und die Anzeige.

                                A Offline
                                A Offline
                                Algie
                                wrote on last edited by
                                #4778

                                @mcu Bildschirmfoto 2021-08-03 um 17.10.37.png

                                1 Reply Last reply
                                0
                                • M MCU

                                  @algie Zeig mal Deine iFrame Einstellungen und die Anzeige.

                                  A Offline
                                  A Offline
                                  Algie
                                  wrote on last edited by
                                  #4779

                                  @mcu Bildschirmfoto 2021-08-03 um 17.12.58.png

                                  Das ist die Anzeige. Wird abgeschnitten. Aber man kann nach links scrollen.
                                  Ich möchte aber, dass die Seite auf die Widgetgröße angepasst wird.

                                  M 1 Reply Last reply
                                  0
                                  • A Algie

                                    @mcu Bildschirmfoto 2021-08-03 um 17.12.58.png

                                    Das ist die Anzeige. Wird abgeschnitten. Aber man kann nach links scrollen.
                                    Ich möchte aber, dass die Seite auf die Widgetgröße angepasst wird.

                                    M Online
                                    M Online
                                    MCU
                                    wrote on last edited by
                                    #4780

                                    @algie
                                    Setz mal hier 100% nicht 600px
                                    4db68721-1983-4070-88e7-02b6528ffeb9-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

                                      @algie
                                      Setz mal hier 100% nicht 600px
                                      4db68721-1983-4070-88e7-02b6528ffeb9-image.png

                                      A Offline
                                      A Offline
                                      Algie
                                      wrote on last edited by
                                      #4781

                                      @mcu ändert sich leider nichts.

                                      M 1 Reply Last reply
                                      0
                                      • A Algie

                                        @mcu ändert sich leider nichts.

                                        M Online
                                        M Online
                                        MCU
                                        wrote on last edited by MCU
                                        #4782

                                        @algie
                                        Hast du mal die Skalierung raus genommen? Und mal mit den Prozentwert versucht? Also mal 90% und so weiter.
                                        Dann auch in der Höhe mal mit Prozent oder geringere Höhe arbeiten?
                                        Oder in der VIS selbst das Element (Müll) verkleinern?

                                        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 Reply Last reply
                                        0
                                        • M MCU

                                          @algie
                                          Hast du mal die Skalierung raus genommen? Und mal mit den Prozentwert versucht? Also mal 90% und so weiter.
                                          Dann auch in der Höhe mal mit Prozent oder geringere Höhe arbeiten?
                                          Oder in der VIS selbst das Element (Müll) verkleinern?

                                          R Offline
                                          R Offline
                                          Renegade 0
                                          wrote on last edited by
                                          #4783

                                          Moin,

                                          hat sonst noch wer Probleme mit Jarvis 2.2.1 Uhrzeit und Wetter-Widget?
                                          403c3917-9c86-40f8-8c9e-c1464d03bf5d-image.png

                                          hab irgendwie immer diese Ladeanzeige drinnen.

                                          N 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

                                          565

                                          Online

                                          32.7k

                                          Users

                                          82.4k

                                          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