Dashing Paris Velib widget

README.md

Preview

Description

Retrieve the real-time status of Paris Velib bike stations (Bikes and stands availability).

Requirements

• Gems :
• httparty
• json
• Velib API key previously retrieved from https://developer.jcdecaux.com/ (Account creation required)
• ID of the station(s) (station number found by parsing the link below)
  • https://api.jcdecaux.com/vls/v1/stations?contract=Paris&apiKey={YOUR_API_KEY}

Usage

Add this to your erb dashboard file (You have to replace {STATION_ALIAS} by the alias of your choice, this alias will be reused) :

<!-- Velib {STATION_ALIAS} station-->
<li data-row="1" data-col="1" data-sizex="4" data-sizey="3">
  <div data-id="velib-{STATION_ALIAS}" data-title="" data-view="Velib"></div>
</li>

You have to add this kind of block for each station you want to retrieve the status.

Settings

Job

You have to declare your API Key (In my case, I prefer to use an environment variable) :

API_KEY = ENV["VELIB_API_KEY"]

You can retrive multiple stations datas by adding them to the following array the key should be the STATION_ALIAS and the value should be the ID of the station(s) :

stations = {
  'victoire' => '9111', # Replace this by the station you want to retrieve
}

Widget

• Just copy velib.coffee, velib.html and velib.scss to {DASHING_PATH}/widgets/velib/
• Put the bike.svg to {DASHING_PATH}/assets/images/

NB :

Thanks to @stephenyeargin for the inspiration with his B-Cycle widget.

API Documentation here.

bike.svg

velib.coffee

class Dashing.Velib extends Dashing.Widget

    @accessor 'stateClass', ->
        if @get('state') == "OPEN"
            "station-state-open"
        else if @get('state') == "CLOSED"
            "station-state-closed"
        else
            "station-state-unknown"

    constructor: ->
        super

    ready: ->
        $(@node).addClass(@get('stateClass'))

    onData: (data) ->
        $(@node).addClass(@get('stateClass'))

velib.html

<h1 class="title" data-bind="station"></h1>

<h3>
  <ul>
  <li>
  <span data-bind="bikes_available"></span> Bikes</br>
  </li>
  <li>
  <span data-bind="stands_available"></span> Stands
  </li>
  </ul>
</h3>

<p class="more-info">State : <span data-bind="state"></span></p>

<p class="more-info" data-bind="moreinfo | raw"></p>

<p class="updated-at" data-bind="updatedAtMessage"></p>

velib.rb

#!/usr/bin/env ruby

require 'httparty'
require 'json'

## Velib API key to get on JC Decaux dev website
## more infos : https://developer.jcdecaux.com/
## --
API_KEY = ENV["VELIB_API_KEY"]

## Stations to retrieve
## --
stations = {
  'victoire' => '9111',
}

## Job itself
## --
SCHEDULER.every '2m', :first_in => 0 do |job|
  # Define keys if not defined
  API_KEY = '' unless defined?(API_KEY)

  stations.each do |station,station_id|
    begin
      url = "https://api.jcdecaux.com/vls/v1/stations/#{station_id}?contract=Paris&apiKey=#{API_KEY}"

      response = HTTParty.get(url)
      datas = JSON.parse(response.body)

      station_name = datas['name'].partition('- ').last
      status = datas['status']
      total_stands = datas['bike_stands']
      available_stands = datas['available_bike_stands']
      available_bikes = datas['available_bikes']

      if not defined?(send_event)
        puts "#------------------------------------------------------------#"
        puts "Station name     : #{station_name}"
        puts "Status           : #{status}"
        puts "Total stands     : #{total_stands}"
        puts "Available stands : #{available_stands}"
        puts "Available bikes  : #{available_bikes}"
        puts "#------------------------------------------------------------#"
      else
        title = 'velib-'+station.to_s
        send_event(title, station: station_name, state: status, bikes_available: available_bikes, stands_available: available_stands)
      end

    rescue
      puts response.body
      puts "Something went wrong ... Could not fetch the informations."
    end
  end
 
end

velib.scss

.widget-velib {
  background-image: url("/assets/bike.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 400px 400px;
  background-color: #000000;

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }

}

.station-state-open {
  background-color: #b0c964;
}

.station-state-closed {
   background-color: #d04035;
}

.station-state-unknown {
   background-color: #bfbdbe;
}

Your widget don't work, unauthorized is write on launch.... :(

Hey @JCluzet, sorry to hear that but It has been written almost 8 years ago... It's not maintained anymore.
Moreover, if I remember correctly, the provider is not JCDecaux anymore.
You might want to adapt it to use the OpenData API ;)

Happy hacking!