Instagram photos by location for Dashing

README.md

Description

Dashing widget to display location based photos from Instagram.

##Dependencies

instagram - Official Ruby Gem

Add the following to your Dashing Gemfile:

git 'https://github.com/Instagram/instagram-ruby-gem.git' do
  gem 'instagram'
end

Run bundle install.

##Usage

To use this widget, copy instadash.coffee, instadash.html, and instadash.scss into the /widgets/instadash directory. Put the instadash.rb file in your /jobs folder.

To include the widget in a dashboard, add the following to your dashboard layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="instadash" data-view="Instadash"></div>
</li>

##Settings

• Instagram Client ID from instagram.com/developer
• Latitude and Longitude for your desired location. Easily obtained from forward geocoding sites such as geocoder.ca
• Default schedule set to fetch photos every 10 minutes but can be changed from within instadash.rb.

instadash.coffee

class Dashing.Instadash extends Dashing.Widget

  ready: ->
    @currentIndex = 0
    @photoElem = $(@node).find('.photo-container')
    @nextPhoto()
    @startCarousel()

  onData: (data) ->
    @currentIndex = 0

  startCarousel: ->
    setInterval(@nextPhoto, 10000)

  nextPhoto: =>
    photos = @get('photos')
    if photos
      @photoElem.fadeOut =>
        @currentIndex = (@currentIndex + 1) % photos.length
        @set 'current_photo', photos[@currentIndex]
        @photoElem.fadeIn()

instadash.html

<div class="photo-container">
  <img data-bind-src='current_photo.photo'/>
</div>

instadash.rb

require 'instagram'

# Instagram Client ID from http://instagram.com/developer
Instagram.configure do |config|
  config.client_id = ''
end

# Latitude, Longitude for location
instadash_location_lat = '45.429522'
instadash_location_long = '-75.689613'

SCHEDULER.every '10m', :first_in => 0 do |job|
  photos = Instagram.media_search(instadash_location_lat,instadash_location_long)
  if photos
    photos.map! do |photo|
      { photo: "#{photo.images.low_resolution.url}" }
    end    
  end
  send_event('instadash', photos: photos)
end

instadash.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #000000;

// ----------------------------------------------------------------------------
// Widget-comment styles
// ----------------------------------------------------------------------------
.widget-instadash {

  background-color: $background-color;

  .photo-container {
    display: none;
  }

}

This is awesome, thanks for sharing mate!

This is working great for me!
How would I go about making the photos bigger? Say to take up 2 data-size?

@quedayone

Change this call from:

        { photo: "#{photo.images.low_resolution.url}" }

to:

        { photo: "#{photo.images.standard_resolution.url}" }

And it should allow the image to scale with the widget size.

What's the radius of the catchment area, for example it all uploads within 1km?

The Instagram api tells me that my client_id is invalid but i used it in a Symfony project last week, worked well.

Any idea ?

Which settings does your instagram client have ? I created a new client through the developers site, got the client id, but I'm not able to view any photos.