Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[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.

Selektiertes TAB besser sichtbar machen:

Notwendige Einträge bei Styles

.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

[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)

Styles-Einträge für snake-Effekt

.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%);}
}

[LoDDl]

@mcu vielen Dank! :)

[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?

Also die dritte Dezimalzahl erhöht?

[MCU]

@algie
Würde es so reichen?

Vorraussetzung ist, die Zahl hat immer den Aufbau x.xxx

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

[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.

[MCU]

@algie Zeig mal Deine iFrame Einstellungen und die Anzeige.

[Algie]

@mcu

[Algie]

@mcu

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.

[MCU]

@algie
Setz mal hier 100% nicht 600px

[Algie]

@mcu ändert sich leider nichts.

[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?

[Renegade 0]

Moin,

hat sonst noch wer Probleme mit Jarvis 2.2.1 Uhrzeit und Wetter-Widget?

hab irgendwie immer diese Ladeanzeige drinnen.

[neunteufels]

@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

[Renegade 0]

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

[neunteufels]

@renegade-0

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

[Renegade 0]

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

[neunteufels]

@renegade-0

Wetter Widget

[Renegade 0]

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

[neunteufels]

@renegade-0

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

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