Air quality Index Widget using airnow.gov for Smashing or Dashing

README.md

Display Air Quality Report from AIRNOW.gov

This requests data from Airnow API.

Preview

##Preview

Description

Simple Smashing widget (and associated job) to display Air Quality Info. Uses AirNow.gov API.

##Usage

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

To include the widget in a dashboard, add the following snippet to the dashboard layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="airnow" data-view="Airnow"></div>
</li>

##Settings

You'll need to add your API_KEY freely available from https://docs.airnowapi.org/login and your desired location to the job (you'll get New York Air quality by default). Get your API Key here click Request.

Data is fetched every 5 minutes, but you can change that by editing the job schedule.

##More API Info

For more API info go here [https://docs.airnowapi.org/forecastsbyzip/query]

airnow.coffee

class Dashing.Airnow extends Dashing.Widget

  ready: ->
    # This is fired when the widget is done being rendered

  onData: (data) ->
    if data.icon
      # reset classes
      $('i.icon').attr 'class', "icon icon-background #{data.icon}"
    if data.color
      $(@node).css('background-color', data.color)

airnow.html

<i class="icon icon-background thermometer medium-high"></i>
<h1 class="title" data-bind="title"></h1>

<h2 data-bind="aqi | raw"></h2>
<h3 data-bind="aqiName"></h3>
<h4 data-bind="location"></h4>

<p class="updated-at" data-bind="updatedAtMessage"></p>

airnow.jpg

airnow.rb

require 'net/http'

# USA Only
ZIP_CODE = 10004

# create free account on https://docs.airnowapi.org/
API_KEY = 'YOUR-API-KEY-HERE'

SCHEDULER.every '5m', :first_in => 0 do |job|

  http = Net::HTTP.new('www.airnowapi.org')
  response = http.request(Net::HTTP::Get.new("/aq/forecast/zipCode/?format=application/json&zipCode=#{ZIP_CODE}&distance=10&API_KEY=#{API_KEY}"))

  next unless '200'.eql? response.code

  air_data     = JSON.parse(response.body)
  location     = air_data[0]['ReportingArea']
  dateForecast = air_data[0]['DateForecast']
  aqiName      = air_data[0]["Category"]['Name']
  aqi          = air_data[0]['AQI']

  send_event('airnow',  { :aqi          => aqi,
                          :location     => location,
                          :aqiName      => aqiName,
                          :dateForecast => dateForecast,
                          :color        => aqi_color(aqi),
                          :icon         => aqi_icon(aqi), })
end


def aqi_color(aqi)
  case aqi.to_i
  when 0..50
    'YellowGreen'
  when 51..100
    'gold'
  when 101..150
    'orange'
  when 151..200
    'red'
  when 201..300
    'darkred'
  else
    'maroon'
  end
end

def aqi_icon(aqi)
  case aqi.to_i
  when 0..50
    'icon-smile'
  when 51..100
    'icon-stethoscope'
  when 101..150
    'icon-ambulance'
  when 151..200
    'icon-frown'
  when 201..300
    'icon-meh'
  else
    'icon-trash'
  end
end

airnow.scss

.widget-airnow {

  h1 {
        font-size: 50px;
  }
  h2 {
        font-size: 100px;
  }
  h3 {
        font-size: 50px;
  }
  h4 {
        font-size: 20px;
  }
  p.updated-at {
       font-size: 20px;
 }
}