Skip to content

Instantly share code, notes, and snippets.

@charlesrg
Last active March 30, 2018 17:46
Show Gist options
  • Save charlesrg/f8246808b73f872d631e41336d1b05b7 to your computer and use it in GitHub Desktop.
Save charlesrg/f8246808b73f872d631e41336d1b05b7 to your computer and use it in GitHub Desktop.
Air quality Index Widget using airnow.gov for Smashing or Dashing

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]

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)
<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>
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
.widget-airnow {
h1 {
font-size: 50px;
}
h2 {
font-size: 100px;
}
h3 {
font-size: 50px;
}
h4 {
font-size: 20px;
}
p.updated-at {
font-size: 20px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment