README.md

Description

Dashing widget to display weather from forecast.io. This widget was forked from https://gist.github.com/toddq/5422352.

##Usage

To use this widget, copy forecast.coffee, forecast.html, and forecast.scss into the /widgets/forecast directory. Put the forecast.rb file in your /jobs folder.

Get skycons.js from https://github.com/darkskyapp/skycons and put it in your assets/javascripts directory.

To include the widget in a dashboard, add the following to your dashboard layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="forecast" data-view="Forecast" data-widget_title="<img src='http://forecast.io/favicon.ico' />Weather Forecast" ></div>
</li>

##Settings

• Forecast API Key from developer.forecast.io
• Latitude and Longitude for your desired location. Easily obtained from forward geocoding sites such as geocoder.ca
• Configurable temperature units. (US, SI, UK)
• Default schedule set to fetch weather every 5 minutes but can be changed from within forcast.rb.

forecast.coffee

class Dashing.Forecast extends Dashing.Widget

  # Overrides Dashing.Widget method in dashing.coffee
  @accessor 'updatedAtMessage', ->
    if updatedAt = @get('updatedAt')
      timestamp = new Date(updatedAt * 1000)
      hours = timestamp.getHours()
      minutes = ("0" + timestamp.getMinutes()).slice(-2)
      "Updated at #{hours}:#{minutes}"

  constructor: ->
    super
    @forecast_icons = new Skycons({"color": "white"})
    @forecast_icons.play()

  ready: ->
    # This is fired when the widget is done being rendered
    @setIcons()

  onData: (data) ->
    # Handle incoming data
    # We want to make sure the first time they're set is after ready()
    # has been called, or the Skycons code will complain.
    if @forecast_icons.list.length
      @setIcons()

  setIcons: ->
    @setIcon('current_icon')
    @setIcon('later_icon')

  setIcon: (name) ->
    skycon = @toSkycon(name)
    @forecast_icons.set(name, eval(skycon)) if skycon

  toSkycon: (data) ->
    if @get(data)
      'Skycons.' + @get(data).replace(/-/g, "_").toUpperCase()

forecast.html

<div class="widget-title" data-bind="widget_title | raw"></div>
<div>
  <canvas id="current_icon" class="forecast-icon" width="100px" height="100px"></canvas>
  <div class="temp" data-bind="current_temp | raw"></div>
  <div class="summary" data-bind="current_desc | raw"></div>
</div>
<br/>
<div>
  <h3 class="title">Next 24 hours</h3>
  <canvas id="later_icon" class="forecast-later-icon" width="50px" height="50px"></canvas>
  <div class="summary" data-bind="later_desc | raw"></div>
</div>
<div class="updated-at" data-bind="updatedAtMessage"></div>

forecast.rb

require 'net/https'
require 'json'

# Forecast API Key from https://developer.forecast.io
forecast_api_key = ""

# Latitude, Longitude for location

forecast_location_lat = ""
forecast_location_long = ""

# Unit Format
# "us" - U.S. Imperial
# "si" - International System of Units
# "uk" - SI w. windSpeed in mph
forecast_units = "si"

SCHEDULER.every '5m', :first_in => 0 do |job|
  http = Net::HTTP.new("api.forecast.io", 443)
  http.use_ssl = true
  http.verify_mode = OpenSSL::SSL::VERIFY_PEER
  response = http.request(Net::HTTP::Get.new("/forecast/#{forecast_api_key}/#{forecast_location_lat},#{forecast_location_long}?units=#{forecast_units}"))
  forecast = JSON.parse(response.body)  
  forecast_current_temp = forecast["currently"]["temperature"].round
  forecast_current_icon = forecast["currently"]["icon"]
  forecast_current_desc = forecast["currently"]["summary"]
  forecast_later_desc   = forecast["hourly"]["summary"]
  forecast_later_icon   = forecast["hourly"]["icon"]

  send_event('forecast', { current_temp: "#{forecast_current_temp}°", current_icon: "#{forecast_current_icon}", current_desc: "#{forecast_current_desc}", later_icon: "#{forecast_later_icon}", later_desc: "#{forecast_later_desc}"})

end

forecast.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #3CAEEC;

$full-color:  rgba(255, 255, 255, 1);
$light-color: rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-forecast styles
// ----------------------------------------------------------------------------
.widget-forecast {

  background-color: $background-color;

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

  .title {
    color: $light-color;
    text-align: center;
  }

  .temp {
    color: $full-color;
    text-align: left;
    font-size: 45px;
  }

  .summary {
    color: $full-color;
    text-align: left;
    vertical-align: middle;
    font-size: 18px;
  }

  .forecast-icon {
    float: left;
    text-align: left;
    margin-left: 70px;
    margin-right: 20px;
  }

  .forecast-later-icon {
    float: left;
    text-align: left;
    margin-left: 10px;
    margin-right: 20px;
  }

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

}