Airparif Map and Pollution Index in Paris & Ile de France

README-airparif.md

Preview

Installation

smashing install 688c9a1a135fcebbbb3332e9cd8e8c82

Usage

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
    <div data-id="airparif" data-view="Airparif" data-title="Airparif"></div>
</li>

Requirements

• imagemagick installed on your system (sudo apt install imagemagick)
• mini_magick gem

Why ImageMagick?

The image provided by Airparif is not transparent friendly so it does not display nicely on Dashing/Smashing; therefore, the text needs to be removed and the outer layer filled in transparent color.

airparif.coffee

class Dashing.Airparif extends Dashing.Widget

Batman.Filters.toAirparifClassName = (value) ->
  if      value >= 0  && value < 25  then return 'vlow'
  else if value >= 25 && value < 50  then return 'low'
  else if value >= 50 && value < 75  then return 'medium'
  else if value >= 75 && value < 100 then return 'high'
  else if value >= 100               then return 'vhigh'

airparif.html

<h1 data-bind="title" data-showif="title"></h1>

<img data-bind-src="image" />

<div id="info">
    <span>Today <span id="todayIndex" data-bind-class="jour | toAirparifClassName" data-bind="jour"></span></span>
    <span data-showif="demain">Tomorrow <span id="tomorrowIndex" data-bind-class="demain | toAirparifClassName" data-bind="demain"></span></span>
</div>

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

airparif.rb

require 'mini_magick'

SCHEDULER.every '5m', first_in: 0 do
  begin
    image = MiniMagick::Image.open('https://www.airparif.asso.fr/services/cartes/indice/date/jour')
  rescue StandardError => e
    puts("ERROR: Unable to download Airparif map: #{e}")
    next
  end

  image.combine_options do |c|
    # Remove Airparif logo
    c.fill 'white'
    c.draw 'rectangle 320,276 440,345'

    # Remove date
    c.fill 'white'
    c.draw 'rectangle 310,0 440,25'

    # make transparent background
    c.fill 'none'
    c.draw 'color 0,0 floodfill'

    # Crop the unnecessary sides
    c.crop '403x323+7+20'
  end

  data = fetch_data('http://www.airparif.asso.fr/appli/api/1.1/indice')
  jour = data[1]['indice']
  demain = data[2]['indice']

  send_event('airparif',
             image: "data:image/png;base64,#{Base64.encode64(image.to_blob)}",
             jour: jour,
             demain: demain)
end

def fetch_data(path)
  response = Net::HTTP.get_response(URI(path))
  JSON.parse(response.body)
end

airparif.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #50A4AF;

$vlow-color:        #79BC6A;
$low-color:         #BBCF4C;
$medium-color:      #EEC20B;
$high-color:        #F29305;
$vhigh-color:       #960018;

// ----------------------------------------------------------------------------
// Widget-airparif styles
// ----------------------------------------------------------------------------
.widget-airparif {
	background-color: $background-color;

	#info {
		margin-top: 10px;
		margin-bottom: 30px;
	}

	#todayIndex, #tomorrowIndex {
		font-weight: bold;
		padding-left: 3px;
		padding-right: 3px;
	}

	.vlow {
		background-color: $vlow-color;
	}
	.low {
		background-color: $low-color;
	}
	.medium {
		background-color: $medium-color;
	}
	.high {
		background-color: $high-color;
	}
	.vhigh {
		background-color: $vhigh-color;
	}
}