MMM-Instagram - Pull and animate photos from Instagram feed

[schnibel]

Hi all,
Just a message to share what I did.
I tried to find out why I wasn’t able to display my images using different MMM-Instagram modules (I tried with @kapsolas ’ initial module and yo-less’ and jeffjoe’s forks).
It took me a lot of time to understand it wasn’t compatible with MMM-ProfileSwitcher module (https://github.com/tosti007/MMM-ProfileSwitcher)

If ever you have the same problem, here is a workaround (done from the last JeffJoe’s fork - https://github.com/jeffjoe/MMM-Instagram, but also works with @kapsolas’ one)
So, in MMM-Instagram.js, you just have to comment the line :

this.info.classes = 'bright medium';
-->
//this.info.classes = 'bright medium';

Indeed, it is overwriting a variable that is also used in MMM-ProfileSwitcher. (See in GitHub ProfileSwitcher description, just before the section “Current Supported Languages”. I know it’s not exactly the same thing, but the idea is the same)
I’m not going to create a new fork for this, so guys, I let you manage this.

BTW, yo-less’ fork is still bugged… there is a tempimpage variable instead of temp image
Thanks for the module

[zeular]

Hi, I would like to get pictures from two APIs in same module. Is it possible?

[kapsolas]

The current setup of the module does not allow for pulling from multiple locations (API)

[zeular]

Okay, but is it possible? Anything you could implement? I would like to be able to get in family photos in chronological order. :)

[kapsolas]

@zeular I suppose that this could be implemented. The module could be updated to make multiple requests to various sources.

Given my current availability, this would not be something I can do in the near future.

[zeular]

@kapsolas I understand, but if you had time over, I would be grateful.
Thank’s anyway, for taking your time and reply.

[kapsolas]

@zeular You are welcome!
And to be clear, when you say pull from different API, you mean different services? Like Flickr, Instagram, etc?

[zeular]

@kapsolas No, I meant two different instagram accounts …

[Garrett]

@kapsolas Forgive me if i’m wrong, (New Here) when you mean pulling images from your own feed, that means the images are loading from your own account correct? Anyway to pull from others users accounts? I know it states that in your Readme yet i’ve found no instructions on how that works. Basically I want it it load the “home feed” where other users posts you follow show up in. Any light in this area would be much appreciated! Thanks.

[kapsolas]

@Garrett Not sure if this is actually possible, but may be.
I would need to review the instragram API.
Currently, i was just interested in viewing my own photos when I wrote the module. it was more to meet my needs and then I shared it.

When I have some time, i’ll try to implement some of the requests folks have had.

[zeular]

@kapsolas In my case, I have two APIs from me and my wife’s account that I want to appear, I’ve tried to “just” to add two APIs, but it wasen’t that easy…

I first thought Instagram “sandbox” could import other accounts flow but it does not seem so. I have added my wifes account to my “sandbox” but there is no difference.

[rudibarani]

Hi @kapsolas,
I think I need some help with the settings for

min_timestamp: 0,

Is there a way to set show only images from today and show nothing if there is no image uploaded today?

Thanks for your help

[kapsolas]

@rudibarani Hi - There currently is no intelligence on the images selected. It just processes the list that is returned by the API and starts to randomly display them.

What you are asking for would need to be coded.

[rudibarani]

@kapsolas Thanks for the quick reply. Another question on the side: It seems that only images are are loaded that where on Instagram before I restarted my MM. Is that intended behaviour or am I doing something wrong?

		{
			module: 'MMM-Instagram',
			position: 'middle_center',
			disabled: false,
			config: {
				access_token: '####.####',
				count: 200,  
				min_timestamp: 0,
				animationSpeed: 2500,
				updateInterval: 30000
			}
		},

I waited an hour but non of my new images showed up. Only old ones. Even create a new account with only three images before booting my MM - and it keeps cycling those three and ignores later uploads…
Any idea?

[Yurick]

Read my post 4 months ago. I changed the code and it works fine for me. As I am a copy-paste coder, I can’t post it here for not to be damned. :) But if we ask a author to fix it using my clues it would be nice to have a working module.

[rudibarani]

Thanks @Yurick for finding the solution to the problem. Would be great to see this implemented so everyone could benefit from @kapsolas module.

[kapsolas]

The module was not loading new images. I was thinking to fix that and I have a solution i am testing.

Sounds like @Yurick has a solution for this too. If he pm’s it i can test it and incorporate into the code

[Yurick]

Here is my MMM-Instagram.js

/* global Module */

/* Magic Mirror
 * Module: MMM-Instagram
 *
 * By Jim Kapsalis https://github.com/kapsolas
 * MIT Licensed.
 */

Module.register('MMM-Instagram', {

    defaults: {
        format: 'json',
        lang: 'en-us',
        id: '',
        animationSpeed: 1000,
        updateInterval: 60000, // 10 minutes
        access_token: '',
        count: 200,
        min_timestamp: 0,
        loadingText: 'Loading...'
    },
    
    // Define required scripts
    getScripts: function() {
        return ["moment.js"];
    },
    
    /*
    // Define required translations
    getTranslations: function() {
        return false;
    },
    */
    
  

    // Define start sequence
    start: function() {
	var self = this;
        Log.info('Starting module: ' + this.name);
        this.data.classes = 'bright medium';
        this.loaded = false;
        this.images = {};
        this.activeItem = 0;
        this.url = 'https://api.instagram.com/v1/users/self/media/recent' + this.getParams();
	var insturl = this.url;
//        Log.info('instaurl = ' + this.url);
	setInterval(function() {
//				Log.info('NewUrl = ' + this.url);
			        self.sendSocketNotification("INSTAGRAM_GET", insturl); 
				    }, 40000); //perform every 1000 milliseconds.	

},

    
    getStyles: function() {
        return ['instagram.css', 'font-awesome.css'];
    },

    // Override the dom generator
    getDom: function() {
        var wrapper = document.createElement("div");
        var imageDisplay = document.createElement('div'); //support for config.changeColor

        if (!this.loaded) {
            wrapper.innerHTML = this.config.loadingText;
            return wrapper;
        }
        
        // set the first item in the list...
        if (this.activeItem >= this.images.photo.length) {
            this.activeItem = 0;
        }
        
        var tempimage = this.images.photo[this.activeItem];
        
        // image
        var imageLink = document.createElement('div');
        //imageLink.innerHTML = "<img src='https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'>";
        imageLink.id = "MMM-Instagram-image";
        imageLink.innerHTML = "<img src='" + tempimage.photolink + "'>";
        
        imageDisplay.appendChild(imageLink);
        wrapper.appendChild(imageDisplay);
       
        return wrapper;
    },

    /* scheduleUpdateInterval()
     * Schedule visual update.
     */
    scheduleUpdateInterval: function() {
        var self = this;

        Log.info("Scheduled update interval set up...");
        self.updateDom(self.config.animationSpeed);
	

        setInterval(function() {
            Log.info("incrementing the activeItem and refreshing");
            self.activeItem++;
            self.updateDom(self.config.animationSpeed);
        }, this.config.updateInterval);
    },

    /*
     * getParams()
     * returns the query string required for the request to flickr to get the 
     * photo stream of the user requested
     */
    getParams: function() {
        var params = '?';
        params += 'count=' + this.config.count;
        params += '&min_timestamp=' + this.config.min_timestamp;
        params += '&access_token=' + this.config.access_token;
        return params;
    },

    // override socketNotificationReceived
    socketNotificationReceived: function(notification, payload) {
        //Log.info('socketNotificationReceived: ' + notification);
        if (notification === 'INSTAGRAM_IMAGE_LIST')
        {
            //Log.info('received INSTAGRAM_IMAGE_LIST');
            this.images = payload;
            
            //Log.info("count: " +  this.images.photo.length);
            
            // we want to update the dom the first time and then schedule next updates
            if (!this.loaded) {
            this.updateDom(1000);
                this.scheduleUpdateInterval();
            }
            
            this.loaded = true;
        }
    }

});

:::

Spoiler Text

:::

[microkost]

This post is deleted!

[microkost]

Is this module still working? Because after clonning and providing access_token according to manual is still stucked on Loading… warning.

Output from starting MagicMirror:

Connecting socket for: MMM-Instagram
Starting node_helper for module [MMM-Instagram]

OK, some debug… I finally used multi account fork from O5ten and used his API key from README 1160247792.b119586.49fa97770ee34deb92e621069c760cee then it started to show pictures, so finall problem is on my access_token. Good to know for debuging, should help someone else…

How to test that access token is OK?
Put to web browser:
https://api.instagram.com/v1/users/self/media/recent?access_token=1160247792.b119586.49fa97770ee34deb92e621069c760cee
did you see some data as result?

"data": [{"id": "1698285770916717663...

So now test your key
https://api.instagram.com/v1/users/self/media/recent?access_token=[TOKEN_HERE]
If there is result, everything is OK, if you get

data	[]

then is time to investigate! Do you have content on your wall? Because your’s last 20 posts are only accessible in sandbox https://www.instagram.com/developer/sandbox/ (!!!)
For rest and another use cases read carefully https://www.instagram.com/developer/ guide.

My problem was empty my wall… Sorry for spam, but maybe it helps someone not familiar with that with debuging.