Weatheroutlook Dashing Widget

README.md

Description

Weatheroutlook Dashing Widget displays a 5-days weather outlook from Yahoo! Weather using Climacons Font.

Preview

Dependencies

json

Add the gem to your dashing gemfile:

gem 'json'

and run bundle install.

Usage

First, copy weatheroutlook.coffee, weatheroutlook.html, and weatheroutlook.sass into the /widgets/weatheroutlook directory. Put the weatheroutlook.rb file in the /jobs folder, the 4 font files (.EOT, .WOFF, .SVG & .TTF) in the /assets/fonts directory and the climacons-font.css in the /assets/stylesheets directory.

To use the widget, put the following codes in the /dashboards directory's .erb file:

<li data-row="1" data-col="1" data-sizex="4" data-sizey="1">
  <div data-id="weatheroutlook" data-view="Weatheroutlook"></div>
</li>

Settings

Change to your desired location by editing the WOEID (Where On Earth ID) in the jobs file. Lookup your WOEID here

woeid  = 2151330   # beijing

You are also able to change the metrics unit for your widget by editing the format in the jobs file. ( Yahoo! Weather API supports both Fahrenheit (f) and Celsius (c). Change the temperature unit by editing the format variable.

format = "f"

weatheroutlook.coffee

class Dashing.Weatheroutlook extends Dashing.Widget

weatheroutlook.html

<span class="column" data-foreach-day="forecasts">
<h3 data-bind="day.date"></h3>
<h1 data-bind="day.high"></h1>
<h1 data-bind="day.low"></h1>
<h2 data-bind-class="day.code | prepend 'weatheroutlook-'"></h2>
<h4 data-bind="day.text"></h4>
</span>

weatheroutlook.rb

require "net/http"
require "json"

# WOEID for location:
# http://woeid.rosselliot.co.nz
woeid  = 2151330   # beijing 
# woeid  = 28347135   # shah alam 
# woeid  = 733075   # rotterdam
# woeid  = 28289421   # antarctica

# Units for temperature:
# f: Fahrenheit
# c: Celsius
format = "f"

query  = URI::encode "select * from weather.forecast WHERE woeid=#{woeid} and u='#{format}'&format=json"

SCHEDULER.every "15m", :first_in => 0 do |job|
  http     = Net::HTTP.new "query.yahooapis.com"
  request  = http.request Net::HTTP::Get.new("/v1/public/yql?q=#{query}")
  response = JSON.parse request.body
  results  = response["query"]["results"]["channel"]["item"]["forecast"]

  if results
  forecasts = []
	for day in (0..4) 
		day = results[day]

		this_day = {
			high: day["high"],
			low:  day["low"],
			date: day["date"],
			code: day["code"],
			text: day["text"], 
			format: format
		}
		forecasts.push(this_day)
	end
  
	send_event "weatheroutlook", { forecasts: forecasts }
  end
end

weatheroutlook.sass

$background-color: deepskyblue

.widget-weatheroutlook
  background-color: $background-color
  transition: background-color 2s linear
  -moz-transition: background-color 2s linear
  -o-transition: background-color 2s linear
  -webkit-transition: background-color 2s linear

  h1
    //display: inline-block
    vertical-align: middle
    font-size: 40px

    &:after
      content: "\00b0"

  h2
    //display: inline-block
    vertical-align: middle
    font-size: 120px
    font-family: "Climacons-Font"

  h3
    width: 100%
    //margin-top: 0px
    margin-bottom: 10px
    text-transform: uppercase
    font-size: 15px
    letter-spacing: 2px

  h4
    width: 100%
    //margin-top: 5px
    margin-bottom: 5px
    //text-transform: uppercase
    font-size: 12px
    letter-spacing: 2px



// climacons

$climacons: "\e037" "\e009" "\e009" "\e025" "\e025" "\e00f" "\e015" " \e00f" "\e00c" "\e00c" "\e00f" "\e006" "\e006" "\e015" "\e018" "\e018" "\e018" "\e012" "\e00f" "\e01e" "\e01b" "\e01e" "\e01e" "\e01e" "\e021" "\e01b" "\e000" "\e002" "\e001" "\e002" "\e001" "\e02d" "\e028" "\e001" "\e002" "\e012" "\e028" "\e025" "\e025" "\e025" "\e006" "\e036" "\e036" "\e036" "\e000" "\e025" "\e036" "\e025"

@for $index from 0 through 47
  .weatheroutlook-#{$index}:before
    content: nth($climacons, $index + 1)

  .column 
    float: left
    width: 20%
    height: 100%