Skip to content

Instantly share code, notes, and snippets.

@wesee wesee/README.md
Last active Jan 11, 2019

Embed
What would you like to do?
Weatheroutlook Dashing Widget

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"
class Dashing.Weatheroutlook extends Dashing.Widget
<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>
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
$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%
@jmedway

This comment has been minimized.

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.

@Reroot-nick

This comment has been minimized.

Copy link

Reroot-nick commented Mar 8, 2017

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 = Net::HTTP.new "query.yahooapis.com"
request = https.request Net::HTTP::Get.new("/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
You can’t perform that action at this time.