• 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
    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
                • T Offline
                  teitlebot @sdetweil
                  last edited by Mar 13, 2019, 7:05 PM

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

                  1 Reply Last reply Reply Quote 0
                  • T Offline
                    teitlebot @Guest
                    last edited by Mar 15, 2019, 4:01 AM

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

                    ? 2 Replies Last reply Mar 15, 2019, 6:06 AM Reply Quote 0
                    • ? Offline
                      A Former User @teitlebot
                      last edited by Mar 15, 2019, 6:06 AM

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

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