Foursquare widget for Dashing

README.md

Foursquare Widget

##Preview

 

Description

Foursquare Widget for Dashing displays current checkins, total checkins and images of people checked in at a Foursquare venue.

You must be a venue manager for the venue for this widget to work.

##Dependencies

• httparty
• json

Add the following gem to the Gemfile:

gem 'httparty'
gem 'json'

and run bundle install.

##Usage

To use the widget, copy foursquare.rb to the /jobs folder. Create a folder called foursquare under /widgets. Copy foursquare.coffee, foursquare.html and foursquare.scss into /widgets/foursquare.

Add the following code snippet to your dashboard .erb file under /dashboards:

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

Save the following image into /public: https://raw.github.com/parthibanloganathan/dashing_widgets/master/public/foursquare.png

##Settings

To configure the widget to use your venue, you must have access to a venue manager account for your Foursquare venue.

• You can get the Venue ID of your venue from it's Foursquare page. For example, 4227a500f964a520c51f1fe3 in https://foursquare.com/v/columbia-university/4227a500f964a520c51f1fe3 is the Venue ID.
• Follow the instructions on Foursquare's docs to get an access token, client id and client secret.
• Your Welcome page URL doesn't matter. You might want to use your Foursquare venue page as your Redirect URI (eg: https://foursquare.com/v/columbia-university/4227a500f964a520c51f1fe3).
• Foursquare access tokens do not expire, so you can directly make the requests once via a browser. Refer to the section titled Token flow Client applications for more information.
• You can edit the width of the images in foursquare.html so that they fit your dashboard.

foursquare.coffee

class Dashing.Foursquare extends Dashing.Widget

  onData: (data) ->
    if(data.photo == '0')
      $('#foursquare_photo').hide();
    else
      $('#foursquare_photo').show();

foursquare.html

<img src="foursquare.png" alt="Foursquare" width=140px />

<p class="title" data-bind="title"></p>

<p class="number" data-bind="value"></p>

<img id="foursquare_photo" alt=" " data-bind-src="photo | raw" width=300px />

foursquare.rb

require 'httparty'
require 'json'

herenow = 0
users = ''
total_users = 0
user_index = 0
checkins = 0

index = 0

VENUE_ID = 'INSERT VENUE ID HERE'
BASE_URL = "https://api.foursquare.com/v2/venues/#{VENUE_ID}/"

CLIENT_ID = 'INSERT CLIENT ID HERE'
CLIENT_SECRET = 'INSERT CLIENT SECRET HERE'
ACCESS_TOKEN = 'INSERT ACCESS TOKEN HERE'

SCHEDULER.every '10m', :first_in => 0 do |job|

  options = {:oauth_token => "#{ACCESS_TOKEN}", :v => "20130714"}

  # Get users here now
  response = HTTParty.get("#{BASE_URL}herenow", :query => options)

  if response.code === 200
    result = JSON.parse(response.body)['response']['hereNow']

    herenow = result['count']
    users = result['items'];
    total_users = users.size
  end

  # Get venue stats
  response = HTTParty.get("#{BASE_URL}stats", :query => options)

  if response.code === 200
    result = JSON.parse(response.body)['response']

    checkins = result['stats']['totalCheckins']
  end
end

SCHEDULER.every '5s', :first_in => '5s' do |job|

  if index == 0
    send_event('foursquare', title: 'Here right now', value: herenow, photo: '0')
  elsif index == 1
    send_event('foursquare', title: 'Total Check Ins', value: checkins, photo: '0')
  elsif index == 2

    if(users.size != 0)
      user_index = (user_index + 1)%total_users

      name = users[user_index]['user']['firstName']
      picture = users[user_index]['user']['photo']['prefix'] + "300x300" + users[user_index]['user']['photo']['suffix']
      send_event('foursquare', title: "#{name} is here", value: '', photo: picture)
    end
  end

  index = (index + 1)%3
end

foursquare.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #1286be;

$title-color:       #CCFFFC;
$number-color:      #FFFFFF;

$title-size: 120%;
$number-size: 400%;

// ----------------------------------------------------------------------------
// Widget-text styles
// ----------------------------------------------------------------------------
.widget-foursquare {

  background-color: $background-color;

  .title {
    color: $title-color;
    font-size: $title-size;
  }

  .number {
    color: $number-color;
    font-size: $number-size;
    font-weight: bold;
  }

  #foursquare_photo {
    margin: 12px 0 0 0;
  }
}