Dashing widgets to display: - a user's public photos - a user's favourite photos

README.md

Flickr user's photos Dashing widget

Dashing widgets to display:

• a user's public photos
• a user's favourite photos

Live demo:

http://camilledashing.herokuapp.com/dashboard

Usage

Put the flickr.rb file in your /jobs folder

Create a new flickr folder in your /widgets folder, and add the three following files to that folder:

• flickr.scss
• flickr.html
• flickr.coffee

Add the following gem to your Gemfile:

gem 'nokogiri'

then run:

bundle

To include the widgets in a dashboard, add the following snippet:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="flickr_faves" data-view="Flickr" style="background-color:#800080;" data-moreinfo="Favourite photos"></div>
</li>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="flickr_public" data-view="Flickr" style="background-color:#96bf48;" data-moreinfo="My public photos"></div>
</li>

Settings

The only setting you have to change is the flickr user ID, which you can set by adding the following line in your config.ru file (the whole example of config.ru is available lower in the gist):

set :flickr_id, '101571970@N05'

If you don't know your flickr ID, try: http://idgettr.com/

config.ru

require 'dashing'

configure do
  set :flickr_id, '111111111@N05'

  helpers do
    def protected!
     # Put any authentication code you want in here.
     # This method is run before accessing any resource.
    end
  end
end

map Sinatra::Application.assets_prefix do
  run Sinatra::Application.sprockets
end

run Sinatra::Application

flickr.coffee

class Dashing.Flickr 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 +=1
        @currentIndex -= photos.length if @currentIndex >= photos.length
        @set 'current_photo', photos[@currentIndex]
        @photoElem.fadeIn()

flickr.html

<div class="photo-container">
  <img data-bind-src='current_photo'/>
</div>
<p class="more-info" data-bind="moreinfo"></p>

flickr.rb

require 'open-uri'
require 'nokogiri'

SCHEDULER.every '20s' do |job|
  public_photos = photo_urls "public", settings.flickr_id
  favourite_photos = photo_urls "faves", settings.flickr_id
  send_event('flickr_public', photos: public_photos)
  send_event('flickr_faves', photos: favourite_photos)
end

def photo_urls(type, flickr_id)
      doc=Nokogiri::HTML(open("http://ycpi.api.flickr.com/services/feeds/photos_#{type}.gne?id=#{flickr_id}"))
      photos = Array.new;
      doc.css('entry link').each do |link|
        if (link.attr('rel') == 'enclosure')
          photos.push(link.attr('href'))
        end
      end
      photos
end

flickr.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #222222;
 
// ----------------------------------------------------------------------------
// Widget-comment styles
// ----------------------------------------------------------------------------
.widget-flickr {
  background-color: $background-color;
  .photo-container {
    display: none;
  }
}