• 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.
  • T Offline
    teitlebot @yupwho
    last edited by Feb 12, 2019, 12:32 AM

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

    1 Reply Last reply Reply Quote 0
    • B Offline
      BryceTalbot
      last edited by Mar 3, 2019, 12:35 AM

      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!

      ? S 2 Replies Last reply Mar 4, 2019, 8:20 AM Reply Quote 0
      • ? Offline
        A Former User @BryceTalbot
        last edited by Mar 4, 2019, 8:20 AM

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

        1 Reply Last reply Reply Quote 0
        • T Offline
          teitlebot
          last edited by Mar 12, 2019, 10:33 PM

          @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

          S ? 2 Replies Last reply Mar 12, 2019, 11:40 PM Reply Quote 0
          • S Away
            sdetweil @teitlebot
            last edited by Mar 12, 2019, 11:40 PM

            @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

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            T 1 Reply Last reply Mar 13, 2019, 1:31 AM Reply Quote 0
            • S Away
              sdetweil @BryceTalbot
              last edited by sdetweil Mar 13, 2019, 11:35 AM Mar 12, 2019, 11:42 PM

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

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • T Offline
                teitlebot @sdetweil
                last edited by Mar 13, 2019, 1:31 AM

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

                S 1 Reply Last reply Mar 13, 2019, 2:47 AM Reply Quote 0
                • S Away
                  sdetweil @teitlebot
                  last edited by sdetweil Mar 13, 2019, 10:49 AM Mar 13, 2019, 2:47 AM

                  @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…

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  T 1 Reply Last reply Mar 13, 2019, 7:05 PM Reply Quote 0
                  • ? Offline
                    A Former User @teitlebot
                    last edited by Mar 13, 2019, 7:27 AM

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

                    T 2 Replies Last reply Mar 13, 2019, 7:02 PM Reply Quote 0
                    • T Offline
                      teitlebot @Guest
                      last edited by Mar 13, 2019, 7:02 PM

                      @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?

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 8
                      • 9
                      • 10
                      • 11
                      • 12
                      • 29
                      • 30
                      • 10 / 30
                      • 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