weather widget for dashing

weather.coffee

class Dashing.Weather 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.

weather.html

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

<h2 class="temp" data-bind="temp | raw"></h2>

<p class="condition" data-bind="condition"></p>

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

weather.rb

require 'open-uri'
require 'xmlsimple'

woe_id = 3369
format = 'c'

SCHEDULER.every '15m', :first_in => 0 do |job|
  raw_weather_data = open("http://weather.yahooapis.com/forecastrss?w=#{woe_id}&u=#{format}").read
  wd = XmlSimple.xml_in(raw_weather_data, { 'ForceArray' => false })['channel']['item']['condition']
  send_event('weather', { :temp => "#{wd['temp']}°#{format.upcase}", :condition => wd['text'] })
end

weather.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #47bbb3;
$value-color:       #fff;

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

// ----------------------------------------------------------------------------
// Widget-weather styles
// ----------------------------------------------------------------------------
.widget-weather { 

  background-color: $background-color;
  
  .title { 
    color: $title-color;
  }

  .temp {
    color: $value-color;
  }

  .condition {
    font-weight: 500;
    font-size: 30px;
    color: $value-color;
  }

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