To develop your personalized digital photo frame, displaying images from social media feeds, you need to access the Twitter and Instagram feed, first.
We tried to integrate Twitter directly from the browser - run a query from the browser against their Javascript API, fetch data and display results. That couldn't have been more than a couple lines of code for complete implementation.
Sadly, it turns out that Twitter discontinued their 1.0 API which supported unauthenticated API access. This means that unless you're comfortable with storing your connection data publicly you require an server-client solution.
We were kind-of happy about this, as this looked like the perfect project where we can play with Node.js.
Using Node.js is super easy
Install the base system on OSX with MacBrew by simply running:
$ brew install node
In the next step add the Twit client to integrate Twitter into the Node.js app. Btw. Node.js has a great beginners guide which will get you operational in no-time.
$ npm install twit
Then you need to sort out Twitter API access - you're going to get you authentication details when you register a new app at Twitter. Copy the API authentication keys and configure Twit access details accordingly.
auth: {
consumer_key: 'API key',
consumer_secret: 'API secret',
access_token: 'Access token',
access_token_secret: 'Access token secret'
},
You're now able to access tweets in your Node.js app.
Pushing updates to clients
Since we are developer of smart e-paper displays i.e. V-tablets, we are using them as digital photo frames. Every device has it's own WebKit session so pushing content is no different than building a simple browser app for reading tweets. For that we use the Node.js server we built.
We could simply poll periodically the server for new tweets, but that's not very in the spirit of times. Proper browsers support WebSockets, which can be used to push updates directly to the client (this includes modern Google Chrome, Internet Explorer 9+, Firefox aour own Visionect Server).
Enter Engine.IO
Engine.IO lets you use WebSockets in a simple, cross-browser way. Following the examples on their page it was fairly simple to create a simple listener:
//running client-side:
var interval = null;
var initSocket = function() {
var socket = new eio.Socket('ws://' + window.location.host);
socket.on('open', function (data) {
clearInterval(interval);
interval = null;
//parse every message you get
socket.on('message', function (data) {
data = JSON.parse(data);
//update src for the image placeholder
//NOTE: missing sanatization for production purposes
$('img').attr('src', data[socket.id]);
});
socket.on('close', function() {
socket.off('open message close');
interval = setInterval(function() {
initSocket();
}, 5000);
});
});
}
initSocket();
The server component tracks for tweets with a specific hash-tag. It then searches if there is an image URL attached to the tweet and sends that URL to the client. The client script takes the incoming data, which is an image URL and puts it into the <img>
placeholder.
Full code is available at our github account.
What about Instagram?
We figured we could do the same for Instagram as we did for Twitter. But being very good lazy programmers we instead browsed the web to find a service which would connect Instagram to Twitter. It turns out there is a bunch of app-to-app solutions and most popular seem to be IFTTT (if-this-then-that) and Zapier.
We opted for the former, created an account and used an existing recipe for posting Instagram pictures as native Twitter pictures.
Voila. 10 minutes later we were pushing image updates to our Twitter clients.
Everything came together like a charm
It took us a day to develop a Node.js app which allows you to to whip out Instagram on our mobile phone and tag any new post with #ourhasthag to get it automatically pop-up on a e-paper picture frame.
Thanks to the technology behind V-Tablet, we just configure the device to point at the public URL of the new Node.js based service and presto - a nice picture frame, which will work for a couple of weeks before needing a recharge.
Comments
Please log in or sign up to comment.