MMM-GooglePhotos

[sdetweil]

@BryceTalbot I solved that problem a while back…

need to use an onload() handler to process after the image is loaded but before shown.

the key is to minimize the total change to the dom, to reduce screen flash and dead space showing thru

so I load the images hidden and when loaded, calculate the size to make it fit on the screen without any stretch or clip. contain and cover styles both alter the image display.

then in the module dom contribution i append the image… (there might already be one being displayed)
and mark the image to be shown, with fade in
then I check if there are two, and if so, hide the 1st (with fade out) and then delete it from the dom contribution, leaving one image.

m here is a variable holding the size of the top margin
var m = window.getComputedStyle(document.body,null).getPropertyValue(‘margin-top’);

      // set the onload event handler
      // the loadurl request will happen when the html is returned to MM and inserted into the dom. 
      img.onload= function (evt) {

        // get the image of the event
        var img = evt.currentTarget;
        //Log.log("image loaded="+img.src+" size="+img.width+":"+img.height);

        // what's the size of this image and it's parent
        var w = img.width;
        var h = img.height;
        var tw = document.body.clientWidth+(parseInt(this.m)*2);
        var th = document.body.clientHeight+(parseInt(this.m)*2);

        // compute the new size and offsets
        var result = this.self.ScaleImage(w, h, tw, th, true);

        // adjust the image size
        img.width = result.width;
        img.height = result.height;

        //Log.log("image setting size to "+result.width+":"+result.height);
        //Log.log("image setting top to "+result.targetleft+":"+result.targettop);

        // adjust the image position
        img.style.left = result.targetleft+"px";
        img.style.top = result.targettop+"px";
        img.style.opacity =	this.self.config.opacity;
        img.style.transition = "opacity 1.25s";

        // if another image was already displayed
        if( this.self.wrapper.firstChild!=this.self.wrapper.lastChild)
        {
          // hide it
          this.self.wrapper.firstChild.style.opacity=0;
          // remove the image element from the div
          this.self.wrapper.removeChild(this.self.wrapper.firstChild);
        }

      }.bind({self: this, m:m});

I use this same methodology in a photo based calendar display module. it loads photos from google_drive, dropbox, and local file systems. But you cannot tell how big the image is (or its orientation) until AFTER it loaded.

[teitlebot]

@sdetweil I have the arduino and stepper motor all working and I see he has the orientation labeled in his javascript code but I have no idea how to get the mmm google photos JS to send a command to the arduino motor. Im not a real coder I can just play with other peoples code a bit.

[sdetweil]

@teitlebot yeh, no idea either myself.
Maybe a web service on the Arduino callable from mm module

https://www.survivingwithandroid.com/2016/05/arduino-rest-api-iot.html/amp

another example, thinner, more local, esp8266 wifi…

https://mancusoa74.blogspot.com/2018/02/simple-http-rest-server-on-esp8266.html
using this second set of info, I was able to add a web server to my arduino ESP8266 sketch in 10 minutes…

[A Former User]

@teitlebot
Interesting Job. I can add notifications for current photo direction.
The only problem is, If frame would be rotated, other MM modules are not rotated automatically.

[teitlebot]

@Sean I dont care about the other modules as I would have them off during rotation. Can notifications be sent out of MM to an arduino?

[teitlebot]

@sdetweil He just connects the arduino to the pi serial port. Or I can maybe use ifttt. thanks for the links though.

[teitlebot]

@Sean I think I can access IFTTT or Webhooks from my arduino. Is it possible to send out notifications that way?

[A Former User]

@teitlebot yes but… image itself will not be rotated by frames direction. It should be rotated again by direction. Think about it. It is totally different work.

[A Former User]

@teitlebot
There could be some issues.

Just rotation will not be what you expect

Unfortunately, as far as I know GooglePhotos remove all your EXIF and it’s metadata has no direction info. So cannot catch the photo direction.

With local stored original photos (or in Dropbox), it might be able to be done.
But it would be totally different program.

[teitlebot]

@Sean cant you also catch the direction by height/width?

[A Former User]

@teitlebot
impossible only with width/height. Imagine some pictures in your mind and rotate it. :D
Or…

Which direction should this photo be rotated? clockwise? counterclockwise? How can we know the direction with only width/height?

[teitlebot]

@Sean Interesting but Google Photos already rotates the picture correctly for us before it sends it to the mirror. So assuming it shows correct in the google photos album it will be correct in the mirror. Now take any picture that is width/height >1 and rotate the picture one way and rotate the screen in the opposite direction and it should work.

[A Former User]

@teitlebot
If so, you can do that without notification. Just add eventlistener to target photo container element and check whether src be changed. Then you can activate xmlHTTPrequest to send request to your IFTTT server.

[teitlebot]

@Sean Thank You. Will learn up on this and see if I can do it myself

[mirrorman2]

Brilliant module - thanks for the development.

I am trying to get two instances of this module running on one magic mirror, so I can show one photo at the top and one at the bottom.

I have copied the module into a different folder, renaming it (and in the CSS files as necessary). I also set up a separate google API project and separate authorisation to see if that was an issue.

Both modules run, but the photos get loaded one on top of the other despite having different positions:

modules: [

{
  module: "MMM-GooglePhotos",
  position: "top_center",
  config: {
    albumId: "blanked for posting", // your album id(s) from result of `auth_and_test.js`
    refreshInterval: 1000*20,  
    scanInterval: 1000*60*10, // too many scans might cause API quota limit also.
    //note(2018-07-29). It is some weird. API documents said temporal image url would live for 1 hour, but it might be broken shorter. So, per 10 min scanning could prevent dead url.

    sort: "random", //'time', 'reverse', 'random'
    showWidth: "800px", // how large the photo will be shown as. (e.g;'100%' for fullscreen)
    showHeight: "400px",
    originalWidthPx: 1024, // original size of loaded image. (related with image quality)
    originalHeightPx: 728, // Bigger size gives you better quality, but can give you network burden.
    mode: "hybrid", // "cover" or "contain" (https://www.w3schools.com/cssref/css3_pr_background-size.asp)
    //ADDED. "hybrid" : if you set as "hybrid" it will change "cover" and "contain" automatically by aspect ratio.
  }
},



{
  module: "MMM-GooglePhotos2",
  position: "bottom_left",
  config: {
    albumId: "blanked for posting", // your album id(s) from result of `auth_and_test.js`
    refreshInterval: 1000*15,  
    scanInterval: 1000*60*10, // too many scans might cause API quota limit also.
    //note(2018-07-29). It is some weird. API documents said temporal image url would live for 1 hour, but it might be broken shorter. So, per 10 min scanning could prevent dead url.

    sort: "random", //'time', 'reverse', 'random'
    showWidth: "1024px", // how large the photo will be shown as. (e.g;'100%' for fullscreen)
    showHeight: "728px",
    originalWidthPx: 1024, // original size of loaded image. (related with image quality)
    originalHeightPx: 728, // Bigger size gives you better quality, but can give you network burden.
    mode: "hybrid", // "cover" or "contain" (https://www.w3schools.com/cssref/css3_pr_background-size.asp)
    //ADDED. "hybrid" : if you set as "hybrid" it will change "cover" and "contain" automatically by aspect ratio.
  }
},


]

};

Any ideas where I have gone wrong? Thanks!

[A Former User]

@mirrorman2
Each instance would be rendering different doms but they have same “Id”. That would make this behavior. Sorry, I haven’t considered duplicated instances on development.
If you want duplicated instances, modify source where “id” is used.
By example;
wrapper.id = “GPHOTO”

[stephaniesal]

This post is deleted!

[A Former User]

@stephaniesal
Is there any error or suspicious log message on execution? Without log, I cannot guess what happened.

[stephaniesal]

This post is deleted!

[gekberlin]

Hi there,
is it possible just to show the last three images of the given album ? And moreover is there any chance to display the comments which belongs to the photo ?