• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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-BackgroundSlideshow

Scheduled Pinned Locked Moved Solved Troubleshooting
23 Posts 5 Posters 10.2k Views 5 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 @Guest
    last edited by Nov 14, 2018, 5:01 PM

    @sean how about a portrait photo sample…

    the tv/monitor aspect ratio (16:9) doesn’t fit unless u stretch or clip the image…

    the sunrise is 6000x4000 pixels the portrait photo is 4000x6000 (both WxH)

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    ? 1 Reply Last reply Nov 14, 2018, 5:04 PM Reply Quote 0
    • S Offline
      sdetweil @Guest
      last edited by Nov 14, 2018, 5:02 PM

      @sean but it distorts the picture, not in original format… which is what I want…

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • ? Offline
        A Former User @sdetweil
        last edited by Nov 14, 2018, 5:04 PM

        @sdetweil
        There are two options for vertical photos on horizontal screen.

        • cover : whole screen will be covered by part of photos. but some areas(top and bottom) of photos will be out of screen

        • contain : whole picture will be shown from bottom to top. but some remain area of screen (left and right) will be black.

        S 1 Reply Last reply Nov 14, 2018, 5:05 PM Reply Quote 0
        • S Offline
          sdetweil @Guest
          last edited by Nov 14, 2018, 5:05 PM

          @sean i understand… but BOTH distort the image presentation

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          ? 1 Reply Last reply Nov 14, 2018, 5:06 PM Reply Quote 0
          • ? Offline
            A Former User @sdetweil
            last edited by Nov 14, 2018, 5:06 PM

            @sdetweil
            Which distortion? It’s just resizing.

            S 1 Reply Last reply Nov 14, 2018, 5:07 PM Reply Quote 0
            • S Offline
              sdetweil @Guest
              last edited by Nov 14, 2018, 5:07 PM

              @sean bingo… if something is clipped (not shown) then its wrong… I fiddled with all those css settings and finally gave up… i calculate the dimensions myself and all is good on EVERY picture

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              ? 1 Reply Last reply Nov 14, 2018, 5:15 PM Reply Quote 0
              • ? Offline
                A Former User @sdetweil
                last edited by Nov 14, 2018, 5:15 PM

                @sdetweil
                Then you can use just contain mode .
                Here is my another module handling image - MMM-Rijks with same technic.
                It can show how contain trick works.

                0_1542215709842_스크린샷 2018-11-14 18.11.15.png

                0_1542215723894_스크린샷 2018-11-14 18.11.33.png

                S 1 Reply Last reply Nov 14, 2018, 5:28 PM Reply Quote 0
                • S Offline
                  sdetweil @Guest
                  last edited by Nov 14, 2018, 5:28 PM

                  @sean ok, that doesn’t work for me… i am not background, i am foreground. (fullscreen above).

                  if I set if on the module div or on the image, I get the same extreme zoom in.

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • C Offline
                    CyruS1337 Project Sponsor @Guest
                    last edited by CyruS1337 Nov 15, 2018, 5:38 PM Nov 15, 2018, 5:36 PM

                    @sean With the module MM-Background Slideshow I have now added contain:

                    {
                        module: 'MMM-BackgroundSlideshow',
                        position: 'fullscreen_below',
                        config: {
                          imagePaths: ['modules/MMM-BackgroundSlideshow/Amerika_2018'],
                    	  slideshowSpeed: 5000,
                          transitionImages: true,
                          randomizeImageOrder: true,
                    	  backgroundSize: 'contain'
                        }
                      },
                    

                    The pictures now show it in the correct size. From the pictures, which were photographed in portrait format, it does not display correctly. Funny is that certain something in portrait mode.

                    https://picload.org/view/dcocdwwl/20181115_1834321.jpg.html

                    https://picload.org/view/dcocdwwc/20181115_1833561.jpg.html

                    ? B 2 Replies Last reply Nov 15, 2018, 5:59 PM Reply Quote 0
                    • ? Offline
                      A Former User @CyruS1337
                      last edited by Nov 15, 2018, 5:59 PM

                      @cyrus1337
                      Each JPEG taken by modern digital camera has EXIF - direction information . Many picture viewers (in PC or Phone) can show the picture of right direction by automatic rotation with that information.

                      But Most of Web Browser (including Electron/Chrome of MagicMirror) don’t have that feature yet.

                      If your photos are stored in GooglePhotos or any other “SMART” clouds, the pictures will be stored with right direction when you saved. But… As I know that BackgroundSlideShow use your local directory. Browser cannot know right direction, then It display the picture as it was taken.

                      I tried automatic rotation on MMM-DropboxWallpaper with EXIF, but not so satisfied. On browser level, it could’t be solved acceptably. Rotation on displaying could make unintended blank area, and Rotation of stored images on RPI needs too much CPU power.

                      Solution: Rotate photos by manual with image editor in your POWERFUL PC then, save and use them.

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 2 / 3
                      2 / 3
                      • First post
                        11/23
                        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