• 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-GooglePhotos

Scheduled Pinned Locked Moved Entertainment
294 Posts 56 Posters 234.5k Views 59 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.
  • ? Offline
    A Former User
    last edited by Jul 20, 2018, 3:15 PM

    MMM-GooglePhotos

    display images on MagicMirror from Google Photos

    Description

    • Simple photo frame. Photos are derived from your Google Photos account.
    • Not iframe. Implemented to MM with pure Javascript.

    ScreenShot

    0_1532096406799_temp2.jpg

    0_1532096583219_전체화면_2018__7__20__오후_4_22.jpg

    Download & Details

    [card:eouia/MMM-GooglePhotos]

    1 Reply Last reply Reply Quote 1
    • K Offline
      kapsolas Module Developer
      last edited by Jul 26, 2018, 11:37 PM

      Awesome! Happy to see that this was created as a module.

      In your screenshot you have a full screen image, what is the configuration for this? I imagine we would want that div to be behind all the other divs to use the image as a background and the other modules to be displayed over it.

      Thanks!

      ? 1 Reply Last reply Jul 27, 2018, 6:32 AM Reply Quote 1
      • ? Offline
        A Former User @kapsolas
        last edited by A Former User Jul 27, 2018, 6:39 AM Jul 27, 2018, 6:32 AM

        @kapsolas

        {
          module: "MMM-GooglePhotos",
          position: "fullscreen_below",
          config: {
            albumId: "<YOUR_GOOGLE_PHOTOS_ALBUM_ID>", // your album id from result of `auth_and_test.js`
            refreshInterval: 1000*60,  // too short refreshing might cause API quota limit. Under 10sec will exhaust your quota(usually total  under 25000 per day).
            scanInterval: 1000*60*60, // too many scans might cause API quota limit also.
            sort: "time", //'time', 'reverse', 'random'
            showWidth: "100%", // how large the photo will be shown as. (e.g;'100%' for fullscreen)
            showHeight: "100%",
            originalWidthPx: 1920, // original size of loaded image. (related with image quality)
            originalHeightPx: 1080, // Bigger size gives you better quality, but can give you network burden.
            mode: "cover", // "cover" or "contain" (https://www.w3schools.com/cssref/css3_pr_background-size.asp)
          }
        },
        

        And you might need to adjust your css for your purpose (margin or padding)

        K 1 Reply Last reply Jul 27, 2018, 2:51 PM Reply Quote 0
        • K Offline
          kapsolas Module Developer @Guest
          last edited by Jul 27, 2018, 2:51 PM

          @sean Thanks!

          Another question… If i have an album which I’ve shared, images from that party are not showing up.

          Actually, after adding some debugging in the node_helper file, the body (freehanded the response as I don’t have the exact body handy) from the API

          Status code: 400
          Message: “The media item is not in the user’s library it was contributed by another user to…”

          Basically, their was an unhandled exception being thrown where your case statement is for: time, reverse, random.

          Any idea how to configure the album to allow the API to pull all images regardless of who uploaded them?

          ? 1 Reply Last reply Jul 27, 2018, 2:53 PM Reply Quote 0
          • ? Offline
            A Former User @kapsolas
            last edited by Jul 27, 2018, 2:53 PM

            @kapsolas
            The picture was not created by you, right?
            I’ll research and try to fix it.

            1 Reply Last reply Reply Quote 0
            • K Offline
              kapsolas Module Developer
              last edited by Jul 27, 2018, 2:57 PM

              Correct.

              The setup is as follows:

              1. I created a shared album
              2. Invited my wife to it
              3. I uploaded photos
              4. My wife uploaded photos

              When I tried to set up the plugin, I discovered it was failing. I modified the code to print the body to the console and saw the message from the Google Photos API.

              The response is:

              error:
              { code: 400,
              message: ‘The media item is not in the user’s library. It was contributed by another user to a shared album that this user joined to.’
              status: ’ INVALID_ARGUMENT’ }
              }

              If we could get this to work, it would be a nice way to use GooglePhotos act like an online digital photo frame. Anyone with access to the shared album can upload photos.

              ? 2 Replies Last reply Jul 27, 2018, 3:00 PM Reply Quote 0
              • ? Offline
                A Former User @kapsolas
                last edited by A Former User Jul 27, 2018, 3:04 PM Jul 27, 2018, 3:00 PM

                @kapsolas
                I guess the reason is the scope rule. “readonly” is set for the scope of API using. I’ll change it to “https://www.googleapis.com/auth/photoslibrary.sharing”, but it’s just guessing. Test will be needed.
                After fixing, I’ll tell you.
                (Today, I purchased my new MBP and am migrating, so I’m not ready to develop something, so it’ll take somewhat time.)

                1 Reply Last reply Reply Quote 0
                • ? Offline
                  A Former User @kapsolas
                  last edited by Jul 27, 2018, 4:28 PM

                  @kapsolas
                  Fixed. (I think). Try it. (just git pull, no need to npm install)

                  mediaItem:search API could access photos shared from others, but mediaItem/ID API couldn’t. It looks so weird. Anyway, I changed it to use mediaItem:search. The only risk is expiration of temporary image URL, so you’d better keep scanInterval under 1 hour.

                  1 Reply Last reply Reply Quote 1
                  • K Offline
                    kapsolas Module Developer
                    last edited by Jul 29, 2018, 3:51 PM

                    Awesome! That worked and solved it!

                    I’ll need to pay around a bit with the sizes in the config (hopefully not the code) to see if I can get the images to display in the screen fully.

                    For now the images are being cropped as they are larger than the display area on the screen.

                    Again thank you!

                    ? 1 Reply Last reply Jul 29, 2018, 4:07 PM Reply Quote 0
                    • ? Offline
                      A Former User @kapsolas
                      last edited by A Former User Jul 29, 2018, 4:08 PM Jul 29, 2018, 4:07 PM

                      @kapsolas set the mode to cover or contain. cover will be fit your entire region as large as possible but cropped, contain will show the entire image but has some black tape around top and bottom or left and right by the ratio of photo width/height like movie film.

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 29
                      • 30
                      • 1 / 30
                      1 / 30
                      • First post
                        7/294
                        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