Weihnachtsangebot 2025! 🎄

[Joschi1711]

Hallo Leute,
ich habe unter Vis ein HTML Widget mit css angelegt, welchen im Browser läuft, allerdings auf dem Tablet mit der App nicht.
kann da wer was dazu sagen?

[{"tpl":"tplHqCircle","data":{"g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":"true","visibility-groups-action":"hide","oid":"","displayPrevious":true,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"g_center":true,"descriptionLeft":"active media progress","hideNumber":true,"angleOffset":"0","oid-working":"","caption":"","oid-battery":"","oid-signal":"","g_value":false,"min":"0","max":"100","digits":"0","step":"1","is_comma":"true","angleArc":"1","class":"spinnerright ","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"g_style":true,"thickness":"0.2","color":"#8a8a8a","bgcolor":"#25f613","linecap":false,"cursor":"","anticlockwise":false,"visibility-oid":"sonos.0.root.10_10_20_222.state_simple"},"style":{"left":"492px","top":"269px","width":"140px","height":"140px","z-index":"25","box-shadow":"0px 0px 25px #8a8a8a","border-radius":"270px","border-width":"","border-style":"","margin-left":"","border-color":"","background":"","background-color":"transparent","padding-left":"","padding":"","padding-top":"","padding-bottom":"","margin-bottom":""},"widgetSet":"hqwidgets"}]

css

.spinnerleft {

 

animation-name: spin;

 

animation-duration: 5000ms;

 

animation-iteration-count: infinite;

 

animation-timing-function: linear; 

 

 

 

}

 

@keyframes spin {

 

  from {

 

      transform:rotate(360deg);

 

  }

 

  to {

 

      transform:rotate(0deg);

 

  }

 

}

 

.spinnerright {

 

animation-name: spin2;

 

animation-duration: 5000ms;

 

animation-iteration-count: infinite;

 

animation-timing-function: linear; 

 

 

 

}

 

@keyframes spin2 {

 

  from {

 

      transform:rotate(0deg);

 

  }

 

  to {

 

      transform:rotate(360deg);

 

  }

 

}

[DJMarc75]

@joschi1711 in der APP in Deinem Netzwerk lokal oder von extern ?

[Joschi1711]

@djmarc75 in der App Lokal

Grafik ist da, rotiert nur leider nicht.

Iobroker ist allerding in anderem Netzwerk (VLAN) wie die Tablets.

[DJMarc75]

@joschi1711 sagte in Animationen in der Iobroker app laufen nicht:

Iobroker ist allerding in anderem Netzwerk (VLAN) wie die Tablets.

ok, also quasi dann doch "extern" ... aber bei sowas wie VLAN kann ich leider nicht helfen, sorry.... da gibts bestimmt aber Hilfe - bissle warten :call_me_hand:

[Codierknecht]

@joschi1711
1.) Anderes VLAN ist - wie @DJMarc75 schon schrieb - ja auch quasi "extern".
2.) Welches Endgerät? Vielleicht wird das CSS auch nicht vollständig unterstützt?
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration?retiredLocale=de#browser_compatibility

[Joschi1711]

das Problem ist gelöst, die App Iobroker.vis musste neu installiert werden, da warscheinlich beim Neustart doch nicht alles von Server neu geladen wird. nach neuer Installation wurden alle CSS Einträge geladen und die Rotation funktioniert.
Getestet auf Lenovo Tablet Android 10 und Samsung Tablet Android 7.
Eben nochmal mit Samsung TAB3 und Android 9 getestet, ein resync in den App-Einstellung hilft auch.
Danke an Codierknecht und DJMarc75.

[OliverIO]

@joschi1711 sagte in [gelöst] Animationen in der Iobroker app laufen nicht:

Grafik ist da, rotiert nur leider nicht.

wenn die grafik da ist, dann greift das css nicht.

leider ist das oben ganz übel formatiert.
kannst du das nochmal richtig in die code Tags setzen?
Knopf </>

[Joschi1711]

@oliverio so schaut die css aus (geändert)
diese liegt global und ein Widget (Image) hat das in den Generell als CSS-Klasse stehen

.drehen {
  -webkit-animation: rotate 4s linear infinite;
  
}

@-webkit-keyframes rotate {
  0% {
   -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

[Joschi1711]

wie geschrieben, nach resync der App hat er die CSS genommen, nach normalen Neustart nicht, obwohl der Haken für alles immer von Server laden gesetzt ist.

[Joschi1711]

hier nochmal die andere Variante, welche hier aus dem Forum stammt:

die CSS

Spoiler

 .spinnerleft {
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
  from {
      transform:rotate(360deg);
  }
  to {
      transform:rotate(0deg);
  }
}
.spinnerright {
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
}
@keyframes spin2 {
  from {
      transform:rotate(0deg);
  }
  to {
      transform:rotate(360deg);
  }
}

Das Widget

Spoiler

 [{"tpl":"tplHqCircle","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","oid":"","displayPrevious":true,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"g_center":true,"descriptionLeft":"active media progress","hideNumber":true,"angleOffset":"0","oid-working":"","caption":"","oid-battery":"","oid-signal":"","g_value":false,"min":"0","max":"100","digits":"0","step":"1","is_comma":"true","angleArc":"1","class":"spinnerright ","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"g_style":true,"thickness":"0.05","color":"#8a8a8a","bgcolor":"#8a8a8a","linecap":true,"cursor":"","anticlockwise":false},"style":{"left":"669px","top":"42px","width":"240px","height":"240px","z-index":"21","box-shadow":"0px 0px 25px #8a8a8a","border-radius":"270px","border-width":"","border-style":"","margin-left":"","border-color":"","background":"","background-color":"transparent","padding-left":"","padding":"","padding-top":"","padding-bottom":"","margin-bottom":""},"widgetSet":"hqwidgets"}] 

[OliverIO]

@joschi1711

also das funktioniert jetzt?
wenn du überall noch das webkit wegmachst, dann dürfte es auf jeder art von browser laufen.

[Homoran]

@oliverio sagte in [gelöst] Animationen in der Iobroker app laufen nicht:

leider ist das oben ganz übel formatiert.

sag das doch!
Hab oben die code-tags korrigiert

[Joschi1711]

Jap, es funktioniert.
war Fehler der Iobroker-VIS App.

nochmal vielen Dank.