Skip to content

Instantly share code, notes, and snippets.

@mjamieson
Last active July 30, 2020 23:17
Show Gist options
  • Save mjamieson/5274790 to your computer and use it in GitHub Desktop.
Save mjamieson/5274790 to your computer and use it in GitHub Desktop.
forecast.io for Dashing

Description

Dashing widget to display weather from forecast.io.

##Usage

To use this widget, copy forecast.coffee, 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>
</li>

##Settings

  • Forecast API Key from developer.forecast.io
  • Latitude and Longitude for your desired location. Easily obtained from forward geocoding sites such as geocoder.ca
  • 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 Forecast.io</p>
<p class="updated-at" data-bind="updatedAtMessage"></p>
require 'net/https'
require 'json'
# Forecast API Key from https://developer.forecast.io
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 = Net::HTTP.new("api.forecast.io", 443)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_PEER
response = http.request(Net::HTTP::Get.new("/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_hour_summary = forecast["minutely"]["summary"]
send_event('forecast', { temperature: "#{forecast_current_temp}&deg;", hour: "#{forecast_hour_summary}"})
end
// ----------------------------------------------------------------------------
// 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);
}
}
@xurizaemon
Copy link

@adityai that might happen if you didn't include the widget in the dashboard template (see "Usage")

@adityai
Copy link

adityai commented Jan 26, 2015

Thank you. It worked. I had saved the forecast.coffee file as forecast.coffee.txt and didn't realize till I saw your message.

@russmac
Copy link

russmac commented Jun 1, 2015

Firstly, Thankyou this is awesome.

For some reason this was "minutely" as the top level key, Was causing exception on line 24.
https://gist.github.com/mjamieson/5274790#file-forecast-rb-L24
Needs to be hourly to match json from forecast.io

forecast_hour_summary = forecast["hourly"]["summary"]

@kostasdizas
Copy link

Hey, I've been playing around with your widget and made some changes to better support and handle the forecast.io API. I'd appreciate any comments, and it would be nice to see those changes incorporated here.

@aakashjog
Copy link

Hi, I downloaded the files and added my api key and location. However, all I can see on my dashboard is this. Any ideas how I can fix this?

Edit: I have no idea what I did, but now it works. Maybe I needed to run bundle install.

@Alge
Copy link

Alge commented Jan 22, 2019

Hi, I downloaded the files and added my api key and location. However, all I can see on my dashboard is this. Any ideas how I can fix this?

Edit: I have no idea what I did, but now it works. Maybe I needed to run bundle install.

I'm having the same problem, but bundle install doesn't seem to be the solution.

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