MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-ImagesPhotos hide black screen between images

    Scheduled Pinned Locked Moved Solved Troubleshooting
    2 Posts 1 Posters 1.0k Views 1 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S Offline
      sdetweil
      last edited by sdetweil

      I am building a digital photo frame, large (cheaper that buying one). anyhow, using a linked folder to my linux box with a samba server…

      all is good, except, between images there is a big black screen… is there a way (with the html approach) to hide the image transition?

      I know in one of my modules, I had to write code to wait for the image load completed before showing the image, but I am writing directly to electron apis

      my config

      {
      	module: "MMM-ImagesPhotos",
      	position: "middle_center",
      	config: {
      		opacity: 0.9,
      		animationSpeed: 500,
      		updateInterval: 20000,
      	}
      }
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil
        last edited by

        well, i found a solution…

        I modified the ImagePhotos.js to

        • create the div once. instead of each time. this reduces the flash.

        • added an onload handler for the image in the div., start with the image hidden

        • the onload handler changes the just loaded image to the required opacity and transitions this over 1.25 seconds.
          also getting current image size, and size of screen and adjusting to not clip or zoom

        • it then checks to see if there is more than ONE image in the div
          (current and just loaded)…
          if so, it hides the old image, and then deletes that image from the div.

        repeat for next image.

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • 1 / 1
        • First post
          Last post
        Enjoying MagicMirror? Please consider a donation!
        MagicMirror created by Michael Teeuw.
        Forum managed by Sam, technical setup by Karsten.
        This forum is using NodeBB as its core | Contributors
        Contact | Privacy Policy