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

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.