Weiter zum Inhalt
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Hell
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dunkel
  • 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. Visualisierung
  4. Suche Hilfe bei html/CSS

NEWS

  • Neues YouTube-Video: Visualisierung im Devices-Adapter
    BluefoxB
    Bluefox
    8
    1
    184

  • Neuer ioBroker-Blog online: Monatsrückblick März/April 2026
    BluefoxB
    Bluefox
    8
    1
    1.8k

  • Verwendung von KI bitte immer deutlich kennzeichnen
    HomoranH
    Homoran
    11
    1
    766

Suche Hilfe bei html/CSS

Geplant Angeheftet Gesperrt Verschoben Visualisierung
4 Beiträge 2 Kommentatoren 645 Aufrufe
  • Ä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.
  • A Offline
    A Offline
    andyb
    schrieb am zuletzt editiert von
    #1

    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?

    1 Antwort Letzte Antwort
    0
    • UhulaU Offline
      UhulaU Offline
      Uhula
      schrieb am zuletzt editiert von
      #2

      @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!

      Uhula - Leise und Weise
      Ex: ioBroker on Gigabyte NUC Proxmox

      1 Antwort Letzte Antwort
      0
      • A Offline
        A Offline
        andyb
        schrieb am zuletzt editiert von
        #3

        Ich hab Zweifel aber ich werde testen….

        1 Antwort Letzte Antwort
        0
        • A Offline
          A Offline
          andyb
          schrieb am zuletzt editiert von
          #4

          @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…..

          1 Antwort Letzte Antwort
          0

          Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.

          Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.

          Mit deinem Input könnte dieser Beitrag noch besser werden 💗

          Registrieren Anmelden
          Antworten
          • In einem neuen Thema antworten
          Anmelden zum Antworten
          • Älteste zuerst
          • Neuste zuerst
          • Meiste Stimmen


          Support us

          ioBroker
          Community Adapters
          Donate

          496

          Online

          32.9k

          Benutzer

          83.0k

          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