Skip to content

Instantly share code, notes, and snippets.

Forked from mjamieson/
Last active May 15, 2021 13:37
Show Gist options
  • Save toddq/5422352 to your computer and use it in GitHub Desktop.
Save toddq/5422352 to your computer and use it in GitHub Desktop.


Dashing widget to display weather from This widget was forked from to add Skycons and the forecast for later in the day.



To use this widget, copy, forecast.html, and forecast.scss into the /widgets/forecast directory. Put the forecast.rb file in your /jobs folder.

Get skycons.js from and put it in your assets/javascripts directory.

To include the widget in a dashboard, add the following to your dashboard layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="forecast" data-view="Forecast" data-widget_title="<img src='' />Weather Forecast"> ></div>


  • Forecast API Key from
  • Latitude and Longitude for your desired location. Easily obtained from forward geocoding sites such as
  • Configurable temperature units. (US, SI, UK)
  • Default schedule set to fetch weather every 5 minutes but can be changed from within forcast.rb.
class Dashing.Forecast extends Dashing.Widget
# Overrides Dashing.Widget method in
@accessor 'updatedAtMessage', ->
if updatedAt = @get('updatedAt')
timestamp = new Date(updatedAt * 1000)
hours = timestamp.getHours()
minutes = ("0" + timestamp.getMinutes()).slice(-2)
"Updated at #{hours}:#{minutes}"
constructor: ->
@forecast_icons = new Skycons({"color": "white"})
ready: ->
# This is fired when the widget is done being rendered
onData: (data) ->
# Handle incoming data
# We want to make sure the first time they're set is after ready()
# has been called, or the Skycons code will complain.
if @forecast_icons.list.length
setIcons: ->
setIcon: (name) ->
skycon = @toSkycon(name)
@forecast_icons.set(name, eval(skycon)) if skycon
toSkycon: (data) ->
if @get(data)
'Skycons.' + @get(data).replace(/-/g, "_").toUpperCase()
<div class="widget-title" data-bind="widget_title | raw"></div>
<div class="updated-at" data-bind="updatedAtMessage"></div>
<h1 class="title">RIGHT NOW</h1>
<canvas id="current_icon" class="forecast-icon" width="85px" height="85px"></canvas>
<div class="temp" data-bind="current_temp | raw"></div>
<div class="summary" data-bind="current_desc | raw"></div>
<div style="margin-top: 10px">
<h1 class="title">NEXT HOUR</h1>
<canvas id="next_icon" class="forecast-icon" width="25px" height="25px"></canvas>
<div class="summary" data-bind="next_desc | raw"></div>
<div style="margin-top: 10px">
<h1 class="title">LATER</h1>
<canvas id="later_icon" class="forecast-icon" width="25px" height="25px"></canvas>
<div class="summary" data-bind="later_desc | raw"></div>
require 'net/https'
require 'json'
# Forecast API Key from
forecast_api_key = ""
# Latitude, Longitude for location
forecast_location_lat = "45.429522"
forecast_location_long = "-75.689613"
# Unit Format
# "us" - U.S. Imperial
# "si" - International System of Units
# "uk" - SI w. windSpeed in mph
forecast_units = "si"
SCHEDULER.every '5m', :first_in => 0 do |job|
http ="", 443)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_PEER
response = http.request("/forecast/#{forecast_api_key}/#{forecast_location_lat},#{forecast_location_long}?units=#{forecast_units}"))
forecast = JSON.parse(response.body)
forecast_current_temp = forecast["currently"]["temperature"].round
forecast_current_icon = forecast["currently"]["icon"]
forecast_current_desc = forecast["currently"]["summary"]
if forecast["minutely"] # sometimes this is missing from the response. I don't know why
forecast_next_desc = forecast["minutely"]["summary"]
forecast_next_icon = forecast["minutely"]["icon"]
puts "Did not get minutely forecast data again"
forecast_next_desc = "No data"
forecast_next_icon = ""
forecast_later_desc = forecast["hourly"]["summary"]
forecast_later_icon = forecast["hourly"]["icon"]
send_event('forecast', { current_temp: "#{forecast_current_temp}&deg;", current_icon: "#{forecast_current_icon}", current_desc: "#{forecast_current_desc}", next_icon: "#{forecast_next_icon}", next_desc: "#{forecast_next_desc}", later_icon: "#{forecast_later_icon}", later_desc: "#{forecast_later_desc}"})
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #3CAEEC;
$full-color: rgba(255, 255, 255, 1);
$light-color: rgba(255, 255, 255, 0.7);
// ----------------------------------------------------------------------------
// Widget-forecast styles
// ----------------------------------------------------------------------------
.widget-title {
color: $light-color;
font-size: 15px;
text-align: left;
text-transform: uppercase;
position: absolute;
top: 5px;
img {
vertical-align: baseline;
margin-right: 5px;
height: 16px;
.widget-forecast {
background-color: $background-color;
padding-top: 15px !important;
h1 {
margin-bottom: 0px;
.updated-at {
color: rgba(0, 0, 0, 0.3);
top: 5px;
right: 10px;
left: auto;
.title {
color: $light-color;
text-align: left;
font-size: 25px;
.temp {
color: $full-color;
text-align: left;
font-size: 45px;
.summary {
color: $full-color;
text-align: left;
vertical-align: middle;
font-size: 17px;
.forecast-icon {
float: left;
text-align: left;
margin-right: 20px;
.more-info {
color: $light-color;
Copy link

zupo commented Feb 18, 2014

The widget works fine, but I never get "minutely" data, so the Later field is always "no data". Any ideas how to troubleshoot this?

Copy link

Using the current master branch of skycons.js wouldn't draw for me

but this commit worked

Copy link

@DanBeard: That was helpful +1

Copy link

derwin12 commented Aug 1, 2014

Just a note that your screen grab shows Last Update at the bottom but your code actually places it in the top corner of the widget. Thought maybe there was an error in the code somewhere before I realized that was intentional.

Copy link

I can't get the skycons to display. I've tried the branch that @DanBeard mentioned, but that doesn't work for me either.

Copy link

@nigelhorne same here. did you manage to figure it out?

Copy link

It appears that @forecast_icons.list.length for some reason alwaya 0.. so the @setIcons() will not run.

I got the skycons working by changing lines 24 from

if @forecast_icons.list.length


if (data.current_icon && data.next_icon && data.later_icon)

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