forecast.io for Dashing

README.md

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.

forecast.coffee

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.

forecast.html

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

forecast.rb

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}°", hour: "#{forecast_hour_summary}"})
end

forecast.scss

// ----------------------------------------------------------------------------
// 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);
  }
}

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.

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.

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.