README.md

Description

Dashing widget to display weather from forecast.io. This widget was forked from https://gist.github.com/mjamieson/5274790 to add Skycons and the forecast for later in the day.

##Screenshot

##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('next_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 class="updated-at" data-bind="updatedAtMessage"></div>

<div>
	<h1 class="title">RIGHT NOW</h1>
	<canvas id="current_icon" class="forecast-icon" width="85px" height="85px"></canvas>
  	<div class="temp" data-bind="current_temp | raw"></div>
  	<div class="summary" data-bind="current_desc | raw"></div>
</div>

<div style="margin-top: 10px">
	<h1 class="title">NEXT HOUR</h1>
	<canvas id="next_icon" class="forecast-icon" width="25px" height="25px"></canvas>
	<div class="summary" data-bind="next_desc | raw"></div>
</div>

<div style="margin-top: 10px">
	<h1 class="title">LATER</h1>
	<canvas id="later_icon" class="forecast-icon" width="25px" height="25px"></canvas>
	<div class="summary" data-bind="later_desc | raw"></div>
</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 = "45.429522"
forecast_location_long = "-75.689613"

# 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"]
  if forecast["minutely"]  # sometimes this is missing from the response.  I don't know why
    forecast_next_desc  = forecast["minutely"]["summary"]
    forecast_next_icon  = forecast["minutely"]["icon"]
  else
    puts "Did not get minutely forecast data again"
    forecast_next_desc  = "No data"
    forecast_next_icon  = ""
  end
  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}", next_icon: "#{forecast_next_icon}", next_desc: "#{forecast_next_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-title {
  
    color: $light-color;
    font-size: 15px;
    text-align: left;
    text-transform: uppercase;
    position: absolute;
    top: 5px;

	img {
    	vertical-align: baseline;
    	margin-right: 5px;
    	height: 16px;
	}
}

.widget-forecast {

  background-color: $background-color;
  padding-top: 15px !important;

  h1 {
    margin-bottom: 0px;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
    top: 5px;
    right: 10px;
    left: auto;
  }

  .title {
    color: $light-color;
    text-align: left;
    font-size: 25px;
  }

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

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

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

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

}

It appears that @forecast_icons.list.length for some reason alwaya 0.. so the @setIcons() will not run.

I got the skycons working by changing forecast.coffee lines 24 from

if @forecast_icons.list.length

to

if (data.current_icon && data.next_icon && data.later_icon)