MMM-Instagram - Pull and animate photos from Instagram feed

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

:::