• 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-ImageSlideshow Showing images from a USB drive

Scheduled Pinned Locked Moved Tutorials
13 Posts 3 Posters 6.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.
  • M Offline
    MYLE-01
    last edited by MYLE-01 Jun 20, 2019, 6:50 AM Jun 20, 2019, 4:03 AM

    wanted to show off Photos that I had a a usb stick

    So I plug in my USB 16gb Stick with a photos on then
    0_1561002695555_44277b0c-2415-4624-bb20-8972412afa92-image.png

    The Stick name is call FRAME cool I can see the files

    in my MMM-ImageSlideshow folder add the folder call USB

    0_1561002891325_43e110da-651d-4391-850b-9ca3125e793d-image.png

    know terminal window write this

    ln -s /media/pi /home/pi/MagicMirror/modules/MMM-ImageSlideshow/USB

    now that create a short cut in the USB folder ( windows man HERE LOL)

    I drill down into it
    0_1561003180010_b760229c-fd11-4c51-9580-127b4bd7cfd0-image.png

    got the full path and

    and change the config to match

    	{
    		module: 'MMM-ImageSlideshow',
    		position: 'center',
    		
    		// ln -s /media/pi /home/pi/MagicMirror/modules/MMM-ImageSlideshow/USB
    		
    		config: {
    			imagePaths: ['modules/MMM-ImageSlideshow/USB/pi/FRAME'],
    			fixedImageHeight: 500
    		}
    	},
    

    hope this help some one
    only day 3 into this magic mirror still

    want rounded concers

    add this to the custom.css

    .MMM-ImageSlideshow .module-content img {
      border-radius: 15px;
    }
    

    makes

    0_1561013343174_c13af872-8a5b-44e1-89a0-374f056fd738-image.png

    1 Reply Last reply Reply Quote 0
    • M Offline
      MYLE-01
      last edited by Jun 20, 2019, 8:59 PM

      Starting to remeber all my html stuff

      0_1561064266535_728d9b91-1f98-4167-ae2b-509ea74bb6c7-image.png

      .MMM-ImageSlideshow .module-content img {
        border-radius: 15px; 
        -moz-box-shadow: 2px 2px 2px #ccc;
      	-webkit-box-shadow: 2px 2px 2px #ccc;
      	-khtml-box-shadow: 2px 2px 2px #ccc;
      }
      

      will add a 3d white frame around the images

      1 Reply Last reply Reply Quote 1
      • M Offline
        MwMagicMirror
        last edited by Aug 9, 2019, 10:48 PM

        Hi,
        I’ve configured ImageSlideshow accordingly however I do not get any photos to display, I get a box the correct size and a little icon in the upper left of the box.
        These are photos I have been using for months in Google Photos, the example photos do not display either.
        I have the width and height both set to 600
        Any Ideas
        Thanks
        MM

        S 1 Reply Last reply Aug 9, 2019, 11:11 PM Reply Quote 0
        • S Offline
          sdetweil @MwMagicMirror
          last edited by sdetweil Aug 9, 2019, 11:46 PM Aug 9, 2019, 11:11 PM

          @MwMagicMirror open the developers window, ctrl-shift-i, select the console tab, and then scroll up to see any errors. Usually red text

          what is the exact config path for the images?

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • M Offline
            MwMagicMirror
            last edited by Aug 10, 2019, 12:00 AM

            Hmm
            Failed to load resource: The server responded with a status of 404 Not Found
            I tried giving it the full path, that didnt work either.

                        {
                              module: 'MMM-ImageSlideshow',
                              position: 'top_center',
                              config: {
                              fixedImageWidth: 600,
                              fixedImageHeight: 600,
                              //imagePaths: ['modules/MMM-ImageSlideshow/example1']
                              imagePaths: ['/home/pi/MagicMirror/modules/MMM-ImageSlideshow/exampleImages']
            
            S 1 Reply Last reply Aug 10, 2019, 12:37 AM Reply Quote 0
            • S Offline
              sdetweil @MwMagicMirror
              last edited by sdetweil Aug 10, 2019, 1:53 AM Aug 10, 2019, 12:37 AM

              @MwMagicMirror if u leave out the imagePaths config entry it defaults to

               imagePaths: [ 'modules/MMM-ImageSlideshow/exampleImages' ],
              

              the web server is already using /home/pi/MagicMirror as its root, so no explicit full path will work.

              and u are specifying a folder in all cases…

              the path is case sensitive

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              M 1 Reply Last reply Aug 10, 2019, 10:56 AM Reply Quote 0
              • M Offline
                MwMagicMirror
                last edited by Aug 10, 2019, 12:50 AM

                Perfect

                I’m following now, working as advertised.

                tyvm

                1 Reply Last reply Reply Quote 0
                • M Offline
                  MwMagicMirror @sdetweil
                  last edited by Aug 10, 2019, 10:56 AM

                  I do have one question.

                  All of my pictures have the proper orientation when viewed on my windows PC, however when copied over to my MM some of them are not oriented correctly.

                  Anyone know the reason or if there is a fix?
                  I really like the ImageSlideShow, I feel like it gives me more control over the Google Photo version.
                  Thanks
                  MM

                  S 1 Reply Last reply Aug 10, 2019, 11:27 AM Reply Quote 0
                  • S Offline
                    sdetweil @MwMagicMirror
                    last edited by Aug 10, 2019, 11:27 AM

                    @MwMagicMirror sadly the browser doesn’t honor the orientation setting in the images…

                    i had a few like that and had to edit the image to force the correct orientation
                    there are a couple of libraries that could be used, but they are really pretty big.

                    I use MMM-ImagesPhotos

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    M 2 Replies Last reply Aug 10, 2019, 6:59 PM Reply Quote 0
                    • M Offline
                      MwMagicMirror @sdetweil
                      last edited by Aug 10, 2019, 6:59 PM

                      Hey Sam,
                      Hows the weather down there in TX, We are originally from the Dallas area. Miss TX alot.

                      Yea the picture orientation is a show stoppper for me, I have a hard time convincing my wife that she likes the mirror in the bathroom…lol

                      What is MMM-ImagesPhotos? I dont see it on the Builders site.

                      S 1 Reply Last reply Aug 10, 2019, 7:04 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      • 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