Cabi Dashing Widget

README.md

Capital Bikeshare (Cabi) Widget

About

This widget is based on the B-cycle widget. Capital Bikeshare (cabi) is the bike share system operating in Washington, DC. This system is operated by Alta. As far as I can tell, each Alta installation provides their own API so unlike B-cycle, there is not one place to get information about all Alta based systems. Therefore, this widget only works with Capital Bikeshare but should be easily modifiable to work with NYC, Chicago, and other bike share systems operated by Alta.

Like the B-cycle widget, this widget allows users to use the station ID to get the number of bikes and empty docks at Cabi stations.

Installation

Copy the files below to their appropriate places or use dashing to do the work for you (dashing install 7794245).

Also, add the following line to your Gemfile and then run bundle install:

gem 'xml-simple'

After installing, just add the HTML below to your dashboard. Please note, all one needs to do is change the data-id tag to cabi-ID where the ID is the ID of the station you wish to display. To get the station ID, it is usually easiest to search around the Cabi XML.

You do not need to edit any configuration files other that your dashboard's .erb file. This widget "sends" the status of every station found in the XML file download from Capitol Bikeshare. As a result, the startup time for dashing can be a few seconds as the job script parses the XML file.

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="cabi-19" data-view="Cabi" style="background-color:#dc5945;" ></div>
</li>

Icon

The icon is from The Noun Project and can be found here. Please make sure it is copied to the assests/images directory of your dashing installation.

cabi.coffee

class Dashing.Cabi extends Dashing.Widget

  ready: ->
    # This is fired when the widget is done being rendered

  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

cabi.html

<h1 class="title" data-bind="name"></h1>
 
<ul>
  <li>
    <span class="label">Bikes:</span>
    <span data-bind="bikes" class="value"></span>
  </li>
  <li>
    <span class="label">Docks:</span>
    <span data-bind="docks" class="value"></span>
  </li>
</ul>

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

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

cabi.rb

# This script connects to WMATA's API. Therefore, you need a WMATA api key.
api_uri = 'http://capitalbikeshare.com/data/stations/bikeStations.xml'

require 'xmlsimple'

SCHEDULER.every '30s', :first_in => 0  do
  uri = URI("#{api_uri}")
  req = Net::HTTP::Get.new(uri.request_uri)
  res = Net::HTTP.start(uri.hostname, uri.port) {|http|
    http.request(req)
  }
  stations = XmlSimple.xml_in(res.body, {})['station']
  stations.each do |station|
    bike_station =
      {
        id: station['id'][0],
        name: station['name'][0],
        bikes: station['nbBikes'][0],
        docks: station['nbEmptyDocks'][0],
        lastupdate: station['latestUpdateTime'][0]
      }
    
    send_event("cabi-#{station['id'][0]}", bike_station )
  end
end

cabi.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #12b0c5;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$label-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-cabi {
  background-image: url("/assets/cabi_icon.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 300px 300px;

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

  ol, ul {
    margin: 0 15px;
    text-align: left;
    color: $label-color;
  }

  ol {
    list-style-position: inside;
  }

  li {
    margin-bottom: 5px;
  }
  .label {
    color: $label-color;
  }

  .value {
    float: right;
    margin-left: 12px;
    font-weight: 600;
    color: $value-color;
  }

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

  .more-info {
    color: $moreinfo-color;
  }
}

cabi_icon.svg