Weatheroutlook Dashing Widget

README.md

Description

Weatheroutlook Dashing Widget displays a 5-days weather outlook from Yahoo! Weather using Climacons Font. Original project forked and modified to add the day of the week informtion.

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>
<h3 data-bind="day.day"></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 = {
			day:  day["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%

I love your widget, man, but the Climacons Font is down.
I've found http://adamwhitcroft.com/climacons/ but I can't find the 4 font files (.EOT, .WOFF, .SVG & .TTF) or the .css