Skip to content

Instantly share code, notes, and snippets.

@toddq
Forked from mjamieson/README.md
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.

Description

Dashing widget to display weather from forecast.io. This widget was forked from https://gist.github.com/mjamieson/5274790 to add Skycons and the forecast for later in the day.

##Screenshot

##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.

Get skycons.js from https://github.com/darkskyapp/skycons 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='http://forecast.io/favicon.ico' />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
# Overrides Dashing.Widget method in dashing.coffee
@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: ->
super
@forecast_icons = new Skycons({"color": "white"})
@forecast_icons.play()
ready: ->
# This is fired when the widget is done being rendered
@setIcons()
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()
setIcons: ->
@setIcon('current_icon')
@setIcon('next_icon')
@setIcon('later_icon')
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>
<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>
<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>
<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>
</div>
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_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"]
else
puts "Did not get minutely forecast data again"
forecast_next_desc = "No data"
forecast_next_icon = ""
end
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}"})
end
// ----------------------------------------------------------------------------
// 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;
}
}
@zupo
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?

@DanBeard
Copy link

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

but this commit worked

https://github.com/darkskyapp/skycons/blob/c944f36a9eb8fd1df81d3fd68f618f580ddd605b/skycons.js

@avinashjoshi
Copy link

@DanBeard: That was helpful +1

@derwin12
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.

@nigelhorne
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.

@seanmckaybeck
Copy link

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

@mcyrulik
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 forecast.coffee lines 24 from

if @forecast_icons.list.length

to

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