Suche Hilfe bei html/CSS

[andyb]

Ich speichere per Script auf Bewegung 9x alle 10 Sekunden ein Bild.

Diese verarbeite ich in einem html widget zu einem Stapel

!
alt="/cam/Cam_Huette1.jpg">
!
alt="/cam/Cam_Huette2.jpg">
!
alt="/cam/Cam_Huette3.jpg">
!
alt="/cam/Cam_Huette4.jpg">
!
alt="/cam/Cam_Huette5.jpg">
!
alt="/cam/Cam_Huette6.jpg">
!
alt="/cam/Cam_Huette7.jpg">
!
alt="/cam/Cam_Huette8.jpg">
!
alt="/cam/Cam_Huette9.jpg">

Im CSS verarbeite ich das ganze zu einer Slideshow.

! /* –----------------------------------------------
! Slideshow
! --------------------------------------------- */
! #stapel img {
! position: absolute;
! height: 34.438em;
! width: 50em;
! opacity: 0;
! animation: 54s ease-in-out infinite;
! }
! #stapel img:nth-of-type(1) {
! -webkit-animation: fade 54s ease-in-out infinite;
! animation: fade 54s ease-in-out infinite;
! }
! #stapel img:nth-of-type(2) {
! -webkit-animation: fade 54s 6s ease-in-out infinite;
! animation: fade 54s 6s ease-in-out infinite;
! }
! #stapel img:nth-of-type(3) {
! -webkit-animation: fade 30s 12s ease-in-out infinite;
! animation: fade 54s 12s ease-in-out infinite;
! }
! #stapel img:nth-of-type(4) {
! -webkit-animation: fade 54s 18s ease-in-out infinite;
! animation: fade 54s 18s ease-in-out infinite;
! }
! #stapel img:nth-of-type(5) {
! -webkit-animation: fade 54s 24s ease-in-out infinite;
! animation: fade 54s 24s ease-in-out infinite;
! }
! #stapel img:nth-of-type(6) {
! -webkit-animation: fade 54s 30s ease-in-out infinite;
! animation: fade 54s 30s ease-in-out infinite;
! }
! #stapel img:nth-of-type(7) {
! -webkit-animation: fade 54s 36s ease-in-out infinite;
! animation: fade 54s 36s ease-in-out infinite;
! }
! #stapel img:nth-of-type(8) {
! -webkit-animation: fade 54s 42s ease-in-out infinite;
! animation: fade 54s 42s ease-in-out infinite;
! }
! #stapel img:nth-of-type(9) {
! -webkit-animation: fade 54s 48s ease-in-out infinite;
! animation: fade 54s 48s ease-in-out infinite;
! }
! @-webkit-keyframes fade {
! 1.85%, 11.11% {opacity:1;}
! 0%, 100% {opacity:0;}
! }
! @keyframes fade {
! 1.85%, 11.11% {opacity:1;}
! 0%, 100% {opacity:0;}
! }

Soweit klappt das ganze auch, aber leider führt der Refresh des Widgets nicht zum gewünschten Erfolg, da die "alten" Bilder ja noch im Cache liegen.

Bei den Widgets vom Vis klappt es ja, da wird aus den Bildern an den Bildern noch "_refts" angehängt. z.B. img src="/cam/Cam_Huette.jpg?_refts=1514543429404"

Kann mir einer erklären was ich da einbauen muss?

[Uhula]

@andyb:

Kann mir einer erklären was ich da einbauen muss? `
Da deine Lösung nur auf dem Client läuft, müsstest du dort via (client-) Script den Caxche löschen bzw das Neuladen der Bilder veranlassen. Ich würde es aber anders lösen. Serverseitig. Dazu läuft auf dem Server ein Script, welches in einem Datenpunkt "javascript.0.imgPath" (musst du anlegen) nacheinander in einer Schleife die anzuzeigenden Dateinamen der Bilder einsetzt, also "…Huette1" bis "...Huette9" und wieder "...Huette1" usw.

Im Vis setzt du dann lediglich ein basic imgae Widget und zeigts dort {javascript.0.imgPath} an; über das Vis Binding müsste dann immer das korrekte Bild erscheinen. Und da es serverseitig passiert, wird auch der Client immer benachrichtigt.

Viel Erfolg!

[andyb]

Ich hab Zweifel aber ich werde testen….

[andyb]

@Uhula

Danke, aber leider genau das gleiche, geht auch erst nach einem Refresh.

Und (viel schlimmer) auf der Vis App wird damit gar kein Bild dargestellt. Und ich mach ja das Ganze um über die App von unterwegs über iobroker.pro ohne VPN Bilder zu sehen. Zuhause lass ich mir eh den Stream der Kamera anzeigen, da brauch ich das eh nicht.

Ich spiel mal noch…..