PM10 a Crema: usare le procedure per estrarre i dati e usare più canvas

Le procedure sono utili per ripetere pezzi di programma senza continuamente fare copia e incolla.

Immaginiamo di fare una interfaccia utente così:

fig.1

Cioè su una tela metto i valori del PM10, sill'altra del NO2 etc.
Le seguenti procedure prendono il valore passato nella Label2 e ne estraggono coi metodi visti nelle altre lezioni le Date e i Valori dell'inquinante, però l'inquinante è generico, nel senso che si passa alla procedura il nome dell'inquinante e la procedura restituisce i valori corrispondenti all'inquinante e alla sua posizione (indice) all'interno della sequenza di valori. In base all'indice viene restituita la Data nella posizione corrispondente all'indice.

fig.2: estraivalore estrae il valore dal testo in base all'inquinante e alla posizione-indice

fig.3 estraidate estrae la data  dal testo in base alla posizione-indice

Esse vengono usate ("call") come in questo esempio, per la tela del PM10, all'interno della procedura plotta alla quale viene passato il nome dell'inquinante:

fig.4

Infine plotta viene usata per ciascun inquinante:

fig.5

Il risultato è il seguente:

fig.6

sorgente aia qui: https://drive.google.com/file/d/14BwI7D8p4nqUJNI1QiXI0hrSQtSlvPoe/view?usp=sharing

PM10 a Crema: plottare su tela

Decido che il plot va in un altro screen, così da mostrare come si possono passare i valori da uno screen all'altro.
Una variabile di passaggio viene caricata con i contenuti delle due Label, uniti dal carattere |

fig.1

Questa variabile viene passata e usata per plottare:

fig.2

il risultato sarà

fig.3

PM10 a Crema: mostrare i dati in tabella

Una volta ottenuti i dati ed estratti dal responseContent , bisogna mostrarli per bene a schermo.

E' comodo visualizzare le date in cui sono state rilevate le concentrazioni di PM10.
Facciamo una tabella in cui la prima riga contiene le date e la seconda le concentrazioni.
Per ora solo 2 giorni

fig.1

Il codice:

fig.2

si vede come il metodo usato per estrarre le date è diverso da quello usato per le concentrazioni poiché ARPA invia i dati sistemati nel responseContent in un modo diverso:

fig.3

quindi occorre separare i pezzettini con le date sfruttando <b>, <br/> e </b> .
Ovviamente ARPA non dovrebbe trasmettere i dati in questo modo se tenesse agli "open data", ma tant'è: è il metodo scelto a suo tempo e questo ci dobbiamo tenere....

La tabella andrà espansa fino a contenere 10 giorni (e volendo tutti gli inquinanti, 7 righe quindi).

PM10 a Crema: i dati degli inquinanti: come scaricarli da programma

ARPA Lombardia: come interrogare la pagina.

digitando questo nel browser
http://www.arpalombardia.it/sites/QAria/_layouts/15/QAria/DettaglioStazione.aspx?zona=CR&comune=1188&IdStaz=629&isPDV=True
si otterrà:

fig1

Notare che le info di 10gg sono comunque presenti, perchè cliccando sulle barre si ottiene immediatamente la visualizzazione:

fig.2 

i dati sono confusi all'interno del sorgente-pagina dopo 30 pagine di codice javascript (ma almeno sono identificabili facilmente da programma).

Per vederli : tasto destro del mouse e visualizza sorgente pagina (oppure Cntrl+u). Poi Cntrl+F per cercare dati_PM10.
Essi si presentano in questa forma:

fig.3

dati_xxx sono i 10 valori degli inquinanti

ticks sono le date in cui sono stati presi.

Costruiamo quindi un'interfaccia utente minimale: un Button e 2 Label

fig.4

quando si clicca Button, viene mandata la richiesta ad ARPA (link visto all'inizio) e 

fig.5

quando arriva la risposta (responseContent) essa viene messa interamente nella Label1, insieme al responseCode che può essere utile in caso di errore.

fig.6

Nella Label2 invece viene messo un estratto, quello coi dati utili (PM10):

1. il testo del responseContent viene spezzato dove c'è "dati_PM10 = [" in due grosse parti

2. il secondo spezzone (index=2) viene spezzato dove c'è "colors_PM10" in due parti

3. il primo spezzone (index=1) contiene i valori di interesse che finiscono in Label2

Il codice è scaricabile qui per poter essere reimportato nel proprio account thunkable e modificato a piacere.

https://drive.google.com/file/d/1Dpd509gDqtVVuImYD2axTNluYr5XFPYU/view

Per altre centraline fare così:

andare su:

http://www.arpalombardia.it/sites/QAria/_layouts/15/QAria/DettaglioStazione.aspx?

selezionare coi menu a tendina provincia-comune e centralina e poi dare Conferma;

si salta in una pagina con URL indicante i valori da usare, es Lodi:

http://www.arpalombardia.it/sites/QAria/_layouts/15/QAria/DettaglioStazione.aspx?zona=LO&comune=1459&IdStaz=600&isPDV=True

Nel blocco della figura 5

LO sostituirà CR

1251 sostituirà 1188

633 sostituirà 629

non toccare il resto ( ad esempio le &).

indice

PM10 a Crema: i dati degli inquinanti: come scaricarli da programma PM10 a Crema: mostrare i dati in tabella PM10 a Crema: plottare su tela PM10 a Crema: usare le procedure per estrarre i dati e usare più canvas