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

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.
  • 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
      • A Offline
        A Offline
        Algie
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        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
          schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von 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 Antworten Letzte Antwort
              0
              • M MCU

                @algie Zeig mal Deine iFrame Einstellungen und die Anzeige.

                A Offline
                A Offline
                Algie
                schrieb am zuletzt editiert von
                #4778

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

                1 Antwort Letzte Antwort
                0
                • M MCU

                  @algie Zeig mal Deine iFrame Einstellungen und die Anzeige.

                  A Offline
                  A Offline
                  Algie
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    0
                    • M MCU

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

                      A Offline
                      A Offline
                      Algie
                      schrieb am zuletzt editiert von
                      #4781

                      @mcu ändert sich leider nichts.

                      M 1 Antwort Letzte Antwort
                      0
                      • A Algie

                        @mcu ändert sich leider nichts.

                        M Online
                        M Online
                        MCU
                        schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                        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
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          0
                          • R Renegade 0

                            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 Offline
                            N Offline
                            neunteufels
                            schrieb am zuletzt editiert von neunteufels
                            #4784

                            @renegade-0

                            Ich hatte das Problem beim Wetter-Widget dass die Icons nicht mehr angezeigt wurden.
                            Ein Update auf 2.2.2 hat geholfen.

                            Das Update wurde weiter oben schon mal diskutiert:
                            https://forum.iobroker.net/post/654032

                            lg

                            1 Antwort Letzte Antwort
                            0
                            • R Offline
                              R Offline
                              Renegade 0
                              schrieb am zuletzt editiert von
                              #4785

                              @neunteufels
                              OK, muss ich mal schauen, aber den daswetter.com Adapter brauche ich nicht im Broker oder?

                              N 1 Antwort Letzte Antwort
                              0
                              • R Renegade 0

                                @neunteufels
                                OK, muss ich mal schauen, aber den daswetter.com Adapter brauche ich nicht im Broker oder?

                                N Offline
                                N Offline
                                neunteufels
                                schrieb am zuletzt editiert von
                                #4786

                                @renegade-0

                                Kann ich nicht sagen, da ich den schon vor Jarvis in Verwendung hatte.

                                R 1 Antwort Letzte Antwort
                                0
                                • N neunteufels

                                  @renegade-0

                                  Kann ich nicht sagen, da ich den schon vor Jarvis in Verwendung hatte.

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

                                  @neunteufels
                                  Hast du das als Gerät importiert oder das weather widget verwendet?

                                  N 1 Antwort Letzte Antwort
                                  0
                                  • R Renegade 0

                                    @neunteufels
                                    Hast du das als Gerät importiert oder das weather widget verwendet?

                                    N Offline
                                    N Offline
                                    neunteufels
                                    schrieb am zuletzt editiert von
                                    #4788

                                    @renegade-0

                                    Wetter Widget

                                    R 1 Antwort Letzte Antwort
                                    0
                                    • N neunteufels

                                      @renegade-0

                                      Wetter Widget

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

                                      @neunteufels
                                      OK läuft jetzt. War wirklich das Update. Nur bei der Uhr hab ich noch permanent eine Ladeanzeige.

                                      N 1 Antwort Letzte Antwort
                                      0
                                      • R Renegade 0

                                        @neunteufels
                                        OK läuft jetzt. War wirklich das Update. Nur bei der Uhr hab ich noch permanent eine Ladeanzeige.

                                        N Offline
                                        N Offline
                                        neunteufels
                                        schrieb am zuletzt editiert von
                                        #4790

                                        @renegade-0

                                        Keine Ahnung dazu, das Problem hatte ich bis jetzt nicht.

                                        Eventuell Widget löschen, speichern und dann nochmal neu anlegen?!?

                                        1 Antwort Letzte Antwort
                                        0
                                        • C Offline
                                          C Offline
                                          Ceel
                                          schrieb am zuletzt editiert von Ceel
                                          #4791

                                          Moin
                                          Ersteinmal danke an den Ersteller von Jarvis
                                          Sehr geile Vis!

                                          Jetzt zu meiner Frage.

                                          Ist es möglich wenn ein Datenpunkt sich ändert (es hat geklingelt) automatisch ein Kamerabild anzeigen zu lassen?
                                          habe es hinbekommen das sich ein Popup öffnen mit dem Script:

                                          var jarvisNotify = {};
                                          //Beispiele
                                          jarvisNotify.title = "Es hat geklingelt";
                                          // "<b>Dies ist BOLD</b>"
                                          jarvisNotify.message= getState('synology.0.SurveillanceStation.cameras.Eingang.linkMjpegHttpPath').val;
                                          jarvisNotify.state = "unread";          //Damit bleibt die Benachrichtigung auch nach POPUP ungelesen und wird oben angezeigt mit der Zahl
                                          jarvisNotify.criticality = "none";      // error,warning,info,success
                                          jarvisNotify.display ="popup";          //drawer,snackbar,popup, none für focusTab
                                          jarvisNotify.autoHideDuration = 180000;  //5000ms -> 5 Sekunden
                                          jarvisNotify.snackbarOrigin = {};       //"snackbarOrigin": { "horizontal": "...", "vertical": "" }, 
                                                                                  // optional, applies when display is snackbar, { horizontal: 'center' | 'left' | 'right', vertical: 'bottom' | 'top' }
                                          jarvisNotify.icon = "bell-ring-outline"; //mdi Iconify
                                          jarvisNotify.iconColor = "#5D5DED";
                                          jarvisNotify.backgroundColor = "black";
                                          jarvisNotify.fontColor = "white";
                                          jarvisNotify.focusTab = ""; //focus a certain tab
                                          setState('jarvis.0.addNotification',JSON.stringify(jarvisNotify));
                                          

                                          leider wird das Bild der Kamera nicht angezeigt. Es steht im Popup nur der html Link.

                                          M 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

                                          848

                                          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