jarvis v2.2.0 - just another remarkable vis

[WW1983]

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

[Zefau]

@ww1983 sollte mit v3 definitiv nicht mehr so sein

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

[Zefau]

@eastcoast die URL kommt aus dem Datenpunkt

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

[MCU]

@eastcoast
Du musst einen DP in ioBroker haben mit der URL:

Und den dann entsprechend in jarvis als Gerät definieren und im displayimage zuordnen.

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

[MCU]

@eastcoast Man ist ja erst im Alpha. also abwarten. Da tut sich noch einiges bis zur stable Version.

[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

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