Add B-cycle widgets to your Dashing dashboard.

README.md

B-cycle Widget

B-cycle is a bike sharing service that operates in several American cities. More information at their website. This widget allows you to use the station ID in a widget to get the current count of bikes and docks available to show on your Dashing dashboard.

Demo

A demo repository is available on GitHub and here is a live Dashboard on Heroku.

Installation

At the top of jobs/bcycle.rb, you will see the two required enviornment variables (or simply modify that file to suit your needs).

• BCYCLE_CITY - lowercase name of city.

Copy these files into their appropriate spot or use dashing install 7678371 in the project directory to have Dashing do it for you.

After the job is up and running, you simply add the following syntax to your {dashboard}.erb file like any other widget.

  <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
   <div data-id="bcycle_nashville_2315" data-view="Bcycle"></div>
  </li>

Note that you will want to change the bcycle_nashville_2315 to bcycle_{your_city}_{your_station_id}. You can have as many stations as you want on a dashboard. All are sent across as events in a configured city.

The bike.svg needs to be moved into your assets/images/ folder manually.

bcycle.coffee

class Dashing.Bcycle extends Dashing.Widget

    @accessor 'backgroundClass', ->
        if @get('status') == "Active"
            "bcycle-status-active"
        else if @get('status') == "Unavailable"
            "bcycle-status-unavailable"
        else
            "bcycle-status-unknown"

    constructor: ->
        super

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

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

bcycle.html

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

<h3>
<span data-bind="bikes_available">?</span> bikes,
<span data-bind="docks_available">?</span> docks
</h3>

<p class="more-info">Status: <span data-bind="status">?</span></p>

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

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

bcycle.rb

require 'net/http'
require 'uri'
require 'json'

# Configure the program city
BCYCLE_CITY = (ENV['BCYCLE_CITY'] || 'nashville').downcase

##
# Get BCycle Data
def get_bcycle_data(city, type)
  uri = URI("https://gbfs.bcycle.com/bcycle_#{city}/#{type}.json")
  http = Net::HTTP.new(uri.host, uri.port)
  http.use_ssl = true
  response = http.request(Net::HTTP::Get.new(uri.request_uri))
  JSON.parse(response.body)
rescue StandardError => e
  puts response.body
  puts e.inspect
  puts "\e[33mUnable to retrieve BCycle data.\e[0m"
end

SCHEDULER.every '5m', { first_in: 0 } do |job|
  # Stations
  stations = get_bcycle_data(BCYCLE_CITY, 'station_information')
  raise stations['error'] if stations.key?('error')

  # Statuses
  station_statuses = get_bcycle_data(BCYCLE_CITY, 'station_status')
  raise station_statuses['error'] if station_statuses.key?('error')

  # Build Status Dictionary
  statuses = {}
  station_statuses['data']['stations'].each do |status|
    statuses[status['station_id']] = status
  end

  # Send Data
  stations['data']['stations'].each do |station|
    data = {
      id: station['station_id'],
      name: station['name'],
      bikes_available: statuses[station['station_id']]['num_bikes_available'],
      docks_available: statuses[station['station_id']]['num_docks_available'],
      status: statuses[station['station_id']]['is_renting'] == 1 ? 'Active' : 'Unavailable'
    }
    send_event(station['station_id'], data)
  end
end

bcycle.scss

.widget-bcycle {
  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);
  }

}

.bcycle-status-active {
  background-color: #242876;
}

.bcycle-status-unavailable {
   background-color: #999999;
}

.bcycle-status-unknown {
   background-color: #999999;
}

bike.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://web.resource.org/cc/"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   height="725"
   width="725"
   opacity="0.1">
  <path
     style="fill:#ffffff;fill-rule:evenodd;stroke:#FFFFFF;stroke-width:2.5px"
     id="OuterCircle"
     d="M -101.56634,275.21499 C -101.56634,468.51465 -258.26668,625.21499 -451.56634,625.21499 C -644.866,625.21499 -801.56634,468.51465 -801.56634,275.21499 C -801.56634,81.915331 -644.866,-74.785013 -451.56634,-74.785013 C -258.26668,-74.785013 -101.56634,81.915331 -101.56634,275.21499 L -101.56634,275.21499 z "
     inkscape:export-xdpi="2.5599999"
     inkscape:export-ydpi="2.5599999" />
  <g
     id="g3138"
     transform="translate(-90.847666,-19.594595)"
     inkscape:export-xdpi="4.2362185"
     inkscape:export-ydpi="4.2362185">
    <circle
       transform="matrix(0.612193,0,0,0.612193,156.40859,178.29391)"
       r="161"
       cy="409"
       cx="215"
       style="fill:none;fill-opacity:1;stroke:#FFFFFF;stroke-width:40px;stroke-opacity:1"
       id="FrontWheel"
       sodipodi:cx="215"
       sodipodi:cy="409"
       sodipodi:rx="161"
       sodipodi:ry="161" />
    <circle
       transform="matrix(0.612193,0,0,0.612193,156.40859,178.29391)"
       r="161"
       cy="406"
       cx="790"
       style="fill:none;fill-opacity:1;stroke:#FFFFFF;stroke-width:40px;stroke-opacity:1"
       id="RearWheel"
       sodipodi:cx="790"
       sodipodi:cy="406"
       sodipodi:rx="161"
       sodipodi:ry="161" />
    <path
       style="fill:#FFFFFF;fill-opacity:1;fill-rule:evenodd;stroke:#FFFFFF;stroke-width:0.61219299;stroke-opacity:1"
       id="Frame"
       d="M 419.33591,187.76277 C 338.17965,188.55377 351.94299,179.37821 308.27997,319.70103 C 272.71002,431.81886 276.58445,419.592 276.39842,427.45646 C 276.26805,433.56628 281.20005,438.4105 287.39765,438.82515 C 300.28652,437.52193 294.86517,440.2191 339.55071,301.45538 C 502.83002,473.69932 441.57171,445.76834 529.44266,449.2663 C 644.92819,448.15891 654.31469,455.27788 655.68575,438.35055 C 655.52755,432.60263 652.83816,429.17498 573.58029,252.78271 L 581.17385,231.90039 L 607.27675,231.42579 L 606.32755,209.59428 L 509.03495,209.59428 C 500.43945,221.35377 512.51534,221.30103 556.02016,230.9512 L 548.42659,252.3081 L 354.31598,252.78271 C 367.39379,207.11583 360.01116,209.96341 418.86132,210.06888 L 419.33591,187.76277 z M 348.70707,276.18977 L 538.64814,275.85299 L 483.75383,423.36041 L 348.70707,276.18977 z M 561.54883,284.94591 L 507.66484,426.39139 L 625.53607,426.72816 L 561.54883,284.94591 z " />
  </g>
</svg>

when i run this, i get "cannot find end of central file directory" Any ideas?

@dmetzman Sorry for the delay, must have missed the notification. I haven't come across that one before. Can you describe which context you see it in? A google search indicates it may be related to decompressing a ZIP file, which shouldn't be a factor with this plugin.