Skip to content

Instantly share code, notes, and snippets.

What would you like to do? for Dashing


Dashing widget to display weather from


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

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-title="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
ready: ->
# This is fired when the widget is done being rendered
onData: (data) ->
# Handle incoming data
# You can access the html node of this widget with `@node`
# Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
<h1 class="title" data-bind="title"></h1>
<h2 class="temp" data-bind="temperature | raw"></h2>
<p class="summary" data-bind="hour | raw"></p>
<p class="more-info">Powered by</p>
<p class="updated-at" data-bind="updatedAtMessage"></p>
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"
# Language
# check for supported languages
lang = "en"
SCHEDULER.every '5m', :first_in => 0 do |job|
uri = URI.parse("")
uri.path = "/forecast/#{forecast_api_key}/#{forecast_location_lat},#{forecast_location_long}"
params = {
:units => forecast_units,
:lang => lang,
:exclude => "alerts,flags"
uri.query = URI.encode_www_form(params)
http =, uri.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_PEER
response = http.request(
p if not response.kind_of? Net::HTTPSuccess then raise "Forecast HTTP error" end
forecast = JSON.parse(response.body)
if forecast.has_key?("code") then raise "Forecast Error: #{forecast['code']}: #{forecast['error']}" end
forecast_current_temp = forecast["currently"]["temperature"].round
if forecast.has_key?("minutely") then forecast_summary_key = "minutely"
elsif forecast.has_key?("houly") then forecast_summary_key = "hourly"
elsif forecast.has_key?("daily") then forecast_summary_key = "daily"
else forecast_summary_key = "currently" end
forecast_summary = forecast[forecast_summary_key]["summary"]
send_event('forecast', { temperature: "#{forecast_current_temp}&deg;", hour: "#{forecast_summary}"})
rescue => e
puts "\e[33mFor the forecast widget to work, you need to set up your API key and coordinates in jobs/forecast.rb file.\e[0m"
puts "\e[33m#{e.message}\e[0m"
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #EC3C6B;
$full-color: rgba(255, 255, 255, 1);
$light-color: rgba(255, 255, 255, 0.7);
// ----------------------------------------------------------------------------
// Widget-forecast styles
// ----------------------------------------------------------------------------
.widget-forecast {
background-color: $background-color;
.title {
color: $light-color;
.temp {
color: $full-color;
.summary {
color: $light-color;
.more-info {
color: $light-color;
.updated-at {
color: rgba(0, 0, 0, 0.3);

This comment has been minimized.

Copy link

commented Oct 27, 2015

Thanks for this work. It’ll use it instead of the original plugin.
BTW, there is a typo line 35 of the forecast.rb file.


This comment has been minimized.

Copy link

commented Nov 14, 2015

"Copy xyz into the /widgets/forecast directory " Could you be more specific about where that directory is?


This comment has been minimized.

Copy link

commented Dec 21, 2018

Another Typo in Line 40 of forecast.rb and url is changed to

Rest is fine, thank you!

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.