martinberlin/cale-integrations

[Feature Request] Add API for air quality (aqicn? airnow?)

Closed this issue ยท 11 comments

https://aqicn.org/api/
https://docs.airnowapi.org/CurrentObservationsByZip/docs -- need to have an account to view docs, but it's not difficult to get an account.

My apologies if this isn't the best place to make these suggestions. If I can, I wouldn't mind trying to help implement it, either.

Hello @kitlith,
sounds good. Will create an account and let you know. The API request is accepted.

By the way @kitlith if is not too much to ask, can you tell me what parts you consider interesting from all this information:
https://aqicn.org/forecast/berlin/
Is possible to show for example a two days forecast: https://aqicn.org/json-api/doc/

And about the configuration, providing automatic IP to lat / long detection should be fine, optionally modifying the coordinates per hand.

Personally, I'm most interested in the current air quality, but the forecasts could be useful to other people

Dear @kitlith
I was going today to take some time and implement this. But I just discovered that following this
https://aqicn.org/faq/2015-07-28/air-quality-widget-new-improved-feed/

A. Basic setup

It let's you render and customize the widget as you like. And actually if you want to display AQI for your city that is enough and much more customizable than what I was going to do.

To add in CALE just add a new Content -> HTML editor

And then just click on </> add your widget, in my case this one:

<span  id="city-aqi-container"></span> 

<script type="text/javascript" charset="utf-8">  
    (function(w,d,t,f){  w[f]=w[f]||function(c,k,n){s=w[f],k=s['k']=(s['k']||(k?('&k='+k):''));s['c']=  
    c=(c  instanceof  Array)?c:[c];s['n']=n=n||0;L=d.createElement(t),e=d.getElementsByTagName(t)[0];  
    L.async=1;L.src='//feed.aqicn.org/feed/'+(c[n].city)+'/'+(c[n].lang||'')+'/feed.v1.js?n='+n+k;  
    e.parentNode.insertBefore(L,e);  };  })(  window,document,'script','_aqiFeed'  );    
</script>
<script type="text/javascript" charset="utf-8">  
    _aqiFeed({  display:"%details",container:"city-aqi-container",  city:"beijing"  });  
</script>

IMPORTANT: You need to Save the content before hitting preview, otherwise you will save also the static generated HTML by javascript. TO be more clear, do not press </> again, just save and add this to your Screen as a content partial.

Then you should get this on your screen:
AQI_test

Assigning this to you, try it and tell me your thoughts, I'm up to integrate any API but it has to really bring something more than a number. Otherwise it's much more customizable to have a widget like this.

Yeah, that's a facepalm on my part. I hadn't gotten around to actually playing with cale proper, so I didn't realize I could just include a widget like that.

I'm going to try setting something up today, then.

Great let me know how it comes out ๐Ÿ‘
I also was not aware that the screenshot tool that is the base of CALE concept deals good with JavaScript

TODO for me:

  • Correct darksky Weather API margins

Since it's cutting the first letter of Low High. Please notice that Darksky will be most probably discontinued at end of december since it was bought by Apple

Margin correction is Live. It should look better now

Unless there is anything more to add here I'm closing this. Feel to open again and add specs so I can decide to go further. Thanks for the idea anyway @kitlith

No problem! Unfortunately, I haven't been working on it -- partially since I couldn't seem to get the javascript embed working? And partially because I haven't taken the time to look up the pinout of my e-ink device so that I could compile the firmware for it.

Just tell me if I can help with the PIN out. I've succeded so far with most Good display epapers and I have the configurations saved on the ESP-IDF component

IMPORTANT: You need to Save the content before hitting preview, otherwise you will save also the static generated HTML by javascript. TO be more clear, do not press </> again, just save and add this to your Screen as a content partial.

About the Javascript I got it working. It can be that just the Html editor is a bit picky.

yeah, every time i clicked save it just saved it as completely empty, and then i just stopped after running into the other thing.