Skip to content

Instantly share code, notes, and snippets.

Last active January 11, 2019 20:37
  • Star 16 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save wesee/6362854 to your computer and use it in GitHub Desktop.
Weatheroutlook Dashing Widget


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




Add the gem to your dashing gemfile:

gem 'json'

and run bundle install.


First, copy, 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>


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"
class Dashing.Weatheroutlook extends Dashing.Widget
<span class="column" data-foreach-day="forecasts">
<h3 data-bind=""></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>
require "net/http"
require "json"
# WOEID for location:
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 = ""
request = http.request"/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
send_event "weatheroutlook", { forecasts: forecasts }
$background-color: deepskyblue
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
//display: inline-block
vertical-align: middle
font-size: 40px
content: "\00b0"
//display: inline-block
vertical-align: middle
font-size: 120px
font-family: "Climacons-Font"
width: 100%
//margin-top: 0px
margin-bottom: 10px
text-transform: uppercase
font-size: 15px
letter-spacing: 2px
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
content: nth($climacons, $index + 1)
float: left
width: 20%
height: 100%
Copy link

jmedway commented Jun 18, 2014

Just as a warning to others, trying to install this via "dashing install 6362854" fails to install weatheroutlook.sass. Manual install works fine.

Copy link

I got this working for the new Yahoo API. Just change your code as the below at your job file:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment