MMM-GooglePhotos

[A Former User]

@yupwho
Set originalWidthPx and originalHeightPx to higher value.

But dithering would be unescapable destiny. Because Max Screen Size of supported in RPI would be 1920*1080 and your pictures are larger than, so Dithering should be happened.

Usually Dithering - Scaling up/down, by index of 2 (e.g: X2, X4, X1/2, X1/4) would be better than other values.
So, dithering to 800X480 from 1600x960 could be better from 2000X1200.

And I think the best values would be the same size to display.
Because, if dithering would be happened, it would be done twice - once when your Google Photo send picture to RPI by OriginalWidth/Height and once again when my module showing it by showWidth/Height.
So, The best case would be all the same sizes - your picture original, OriginalWidth/Height, showWidth/Height are same. In other case, somewhat quality down is unavoidable. My module has no correction/manipulation method because this is not photoshop. sorry.

[yupwho]

@sean Thanks for the details - agreed! I am going to experiment with various config values and picture types. Awesome work with the module - works out of the box as expected!

[Joeysface]

I have been messing around with this module for a couple of days now and am really impressed with the way it works and the aspect ratio switching. I have a question though about the way the module displays pictures with borders. Would there be a way to either: display the image at the top of the frame and leave all of the black space below the image, or display two landscape images on top of each other instead of bordering the images?

Thanks for any help with this.

[A Former User]

@joeysface
Sorry for my poor English, I have a trouble to catch your points. If you can show me the example (simple image??) It will be a help.

[Joeysface]

I actually figured out one of my questions yesterday. I use this in the top right corner with a portrait aspect ratio. when a landscape photo would come up it would put the black bars on the top and bottom (I use the hybrid mode). I wanted to put the photo at the top of the container and put all the black space below the image. I was able to edit the css file to get it to work for me.

[Taxandria]

Hee guys.

Any ideas why my magic mirror states that my config is corrupt after adding this module?

Raspberry 2 | Stretch | magic Mirror latest version
{
module: “MMM-GooglePhotos”,
position: “middle_center",
config: {
albumId: ["AN6D9_GC-eRw0Irq8BcuhBxYfwuHZPFlJpTKYbqRnR9xyHjFq3TjVVxzky9KqLEOxObDA4OFnB__”,"AN6D9_F2ZLhUpV8VrpCrp3MrQUh-D55YYop_hGeiMGtLMpMc_xNPI1IlGo5T7slIJRVfuyaS0jih”,“AN6D9_GByr6yyN-z5-VPgi_pxkG5KgBlWJZHwGzo3vHq_zwrxfYbudBygs0ePyzJmKRA-SQHl9Te”,“AN6D9_E6es9RyinVq9QoKxPU74pk-31H30p5sJW10o3YnzgDN33t6t-ZJRtb8PU2yPy4gKTpfBAM,AN6D9_GIGBaR1eBmI7ZUbneL8uq1dEfnVkcUlXKW0MnE-IZUSP7Kkg0mES07ah7rZtLxF6UHRSX3,AN6D9_Hr6iGqqA53-rOyZIESc-t9yFb4I_GF7ezQj1R-CSB2IVdzLRC_NpLgM3lMofKSM-TJjDkf”,“AN6D9_GIMMbpzErGJt5Z-bUB6HMDv5gKj44rZijAh_ynexuNxgJsyJ87jIBD4dp7aijzSaT8Dg7Z”,"AN6D9_EOTPePHltV88tdnuUi3nZOuNc3Luwg91K0wW4ikUrkDaLqGTYGyKbS1hmtA6bRSIp3d0bb”,“AN6D9_FiggE1yD2va8H3m7hLd_R2Ru_VfOYTxTZi6GNhlwbnw2hCVU9emnExm-9OqMps1RGH6xUU”], // your album id(s) from result of auth_and_test.js
refreshInterval: 100060,
scanInterval: 100060*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: "time", //'time', 'reverse', 'random'
showWidth: "800px", // how large the photo will be shown as. (e.g;'100%' for fullscreen)
showHeight: "600px",
originalWidthPx: 800, // original size of loaded image. (related with image quality)
originalHeightPx: 600, // 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.

}
},

Appreciate your help! Thanks

[ganget]

@taxandria
I see that there is a comma missing at line 10 in between the || needs to be a comma.

sort: "time", //'time', 'reverse', 'random'|,|

I’m also not sure about the difference between ” and " (notice the slight angle) being a problem or not.

p.s. It’s pretty hard to read the code when only half of it is properly styled.

[teitlebot]

@Sean
Is there a way to use this as fullscreen and have all the other modules still readable by putting a dark mask behind them?

[A Former User]

@teitlebot set view position to “fullscreen_below” and modify css to add background to other modules.

[teitlebot]

@yupwho any luck with the dithering issue? I seem to be getting them on specific pictures although im not sure why just those.

[BryceTalbot]

Hi Thank you so much for creating this module I have set it up and been loving it!

The only issue I am having, however, is that when switching between images the module will fade to black for a second before going to the next photo.

Is it possible to remove this behavior and instead fade directly to the next image?

Thank you so much for the help!

[A Former User]

@BryceTalbot
Possible by modifying source (showImage() of MMM-GooglePhotos) but not recommended. Because each picture size would be different, So the transition will make some annoying distortion on showing/hiding.

[teitlebot]

@Sean
Any idea how I can get the monitor to rotate like this guy did except I want to use google photos? He created the code for arduino to rotate but the pi has to send a signal based on rotation of the photo.
https://hackaday.io/project/16291-flipframe

[sdetweil]

@teitlebot you would have to do the same for google photos download… he could have worked out the horizontal vs vertical alignment of the picture…

google search for the stepper motor , A4988 Stepper

[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.