/** * pagina dei dati delle geosonde ed altri sensori agro * * Autore: Filippo Turetta - ARPAV www.arpa.veneto.it * Script in licenza CC BY-NC-SA 3.0 IT * https://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it * * Dati forniti da ARPAV in licenza CC BY 3.0 * https://creativecommons.org/licenses/by/3.0/deed.it * * E' possibile chiamare questa pagina indicando * codseqst per avere la tabella dei dati giornalieri della stazione indicata * * 10/02/2026 filippo start version * 17/02/2026 solo da un elenco di stazioni * */ // flag per avere i console.log attivi oppure no const DEBUG = false; const eleStaz =[83,98,99,100,104,105,106,108,111,112,113,117,120,122,125,126,127,144,145,159,164,166,167,169,170,178,185,186,187,221,227,266]; // elenco dei sensori visualizzati const pulsanti = []; pulsanti['TEMP'] = { pulsante: 'Temperatura', coordcd: 18, targa: 'TEMP', unitaMis: '°C'}; pulsanti['PREC'] = { pulsante: 'Precipitazione', coordcd: 23, targa: 'PREC', unitaMis: 'mm'}; pulsanti['UMID'] = { pulsante: 'Umidità', coordcd: 19, targa: 'UMID', unitaMis: '%'}; // pulsanti['VVENTO'] = { pulsante: 'Vento', coordcd: 20036, targa: 'VVENTO', unitaMis: 'm/s'}; pulsanti['RADSOL'] = { pulsante: 'Radiazione solare', coordcd: 22, targa: 'RADSOL', unitaMis: 'W/m²'}; // pulsanti['PRESS'] = { pulsante: 'Pressione', coordcd: 20, targa: 'PRESS', unitaMis: 'hPa'}; // pulsanti['LIVIDRO'] = { pulsante: 'Livello idrometrico', coordcd: 20005, targa: 'LIVIDRO', unitaMis: 'm'}; // pulsanti['PORT'] = { pulsante: 'Portata', coordcd: 10001, targa: 'PORT', unitaMis: 'm³/s'}; pulsanti['TSUOLO'] = { pulsante: 'Temp suolo', coordcd: 20008, targa: 'TSUOLO', unitaMis: '°C'}; // pulsanti['FREAT'] = { pulsante: 'Freatimetria', coordcd: 20058, targa: 'FREAT', unitaMis: 'm'}; pulsanti['BFOGL'] = { pulsante: 'Bagnatura fogliare', coordcd: 20004, targa: 'BFOGL', unitaMis: '%'}; // pulsante premuto var currentBtn; // link per recuperare le stazioni per sensore // https://api.arpa.veneto.it/REST/v1/meteo_60gg?coordcd=20058 const lnkStazioni = 'https://api.arpa.veneto.it/REST/v1/meteo_60gg?coordcd='; // link per recuperare i valori per la tabella dati giornalieri // https://api.arpa.veneto.it/REST/v1/meteo_60gg_tabella?codseqst=300003396 const lnkValoriSensori = 'https://api.arpa.veneto.it/REST/v1/meteo_60gg_tabella?codseqst='; // simbolo punto della stazione const pointDimension = 8; const colorFill = 'rgb(0, 200, 0)'; const colorLine = 'rgb(0, 0, 0)'; const sfondoEtichetta = 'rgb(240,255,255)'; const fontStz = '14px "Titillium Web", Geneva, Tahoma, sans-serif'; // colore di fondo del pulsante selezionato const btnBackgroundColor = 'skyblue'; // nome del layer aggiunto nella mappa const layerMappa = 'STZ_60GIORNI'; // oggetto mappa var map; // oggetto popup sul punto stazione var popup; // oggetto kml var kmlProvince; // momento di aggiornamento del sensore intabellato var aggiornamento; // tipo di precisione se 60 giorni freatimetri var precisionefalda; //------------------------------------------------------------------------------ // variabili per la parte grafici // stazione dei dati visualizzati var nomeStazione; var linkJsonDati; const tabs = [ 'TARIA2M', 'TARIA5M', 'TARIA8M', 'PREC', 'UMID2M', 'UMID8M', 'VVENTO10M', 'VVENTO2M', 'VVENTO5M', 'RADSOL', 'PRESS', 'LIDRO', 'PORT', 'NIVOM', 'VISIB', 'BRILLAIST' ]; // togliere i sensori che non si vogliono nei grafici const ordineSensoriTabellaDati = [ 'TARIA2M', 'TARIA5M', 'TARIA8M', 'PREC', 'PRECCUM', 'UMID2M', 'UMID8M', 'RADSOL', // 'VVMEDARIT2M', // 'VRAFFICA2M', // 'DVENTO2M', // 'VVMEDARIT5M', // 'VRAFFICA5M', // 'DVENTO5M', // 'VVMEDARIT10M', // 'VRAFFICA10M', // 'DVENTO10M', 'BFOGL', 'TSUOLO', 'PRESS' ]; const type2pulsante = []; type2pulsante['TARIA2M'] = 'TEMP'; type2pulsante['TARIA5M'] = 'TEMP'; type2pulsante['TARIA8M'] = 'TEMP'; type2pulsante['PREC'] = 'PREC'; type2pulsante['UMID2M'] = 'UMID'; type2pulsante['UMID8M'] = 'UMID'; type2pulsante['VVENTO10M'] = 'VVENTO'; type2pulsante['VVENTO2M'] = 'VVENTO'; type2pulsante['VVENTO5M'] = 'VVENTO'; type2pulsante['RADSOL'] = 'RADSOL'; type2pulsante['PRESS'] = 'PRESS'; type2pulsante['LIDRO'] = 'LIVIDRO'; type2pulsante['PORT'] = 'PORT'; type2pulsante['NIVOM'] = 'NIVOM'; type2pulsante['VISIB'] = 'VISIB'; type2pulsante['BRILLAIST'] = 'BRILLANZA'; type2pulsante['BFOGL'] = 'BFOGL'; type2pulsante['TSUOLO'] = 'TSUOLO'; // valore da mettere se manca il numero const ASSENTE = '>>'; const chartsColors = { TARIA2M: 'rgb(38, 190, 38)', TARIA5M: 'rgb(38, 190, 38)', TARIA8M: 'rgb(38, 190, 38)', PREC: 'rgb(135, 119, 255)', UMID2M: 'rgb(139, 87, 42)', UMID8M: 'rgb(139, 87, 42)', VVENTO10M: 'rgb(65, 117, 5)', VVENTO2M: 'rgb(65, 117, 5)', VVENTO5M: 'rgb(65, 117, 5)', RADSOL: 'rgb(230, 220, 111)', PRESS: 'rgb(144, 19, 254)', TARIA_MINIMA: 'rgb(0, 0, 254)', TARIA_MASSIMA: 'rgb(208, 2, 27)', UMID_MASSIMA: 'rgb(208, 2, 27)', BFOGL: 'rgb(0, 0, 0)', TSUOLO: 'rgb(109, 241, 129)', TSUOLO_10: 'rgb(221, 85, 216)', TSUOLO_20: 'rgb(54, 162, 202)', TSUOLO_30: 'rgb(3, 3, 107)' }; // costanti per la dimensione delle linee e dei pallini nei grafici const DeskLineWidth = 2; const MobileLineWidth = 0.5; const DeskPointWidth = 2; const MobilePointWidth = 0.5; /*------------------------------------------------------------------------------ ritorna vero se la pagina è visualizzata su dispositivo mobile */ function isMobile() { /* Storing user's device details in a variable*/ let details = navigator.userAgent; /* Creating a regular expression containing some mobile devices keywords to search it in details string*/ let regexp = /android|iphone|kindle|ipad/i; /* Using test() method to search regexp in details it returns boolean value*/ let isMobileDevice = regexp.test(details); return isMobileDevice; } /*------------------------------------------------------------------------------ */ function getParameterByName(name) { name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]"); var regex = new RegExp("[\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } //------------------------------------------------------------------------- // funzione di log su console se DEBUG function myConsoleLog(sFrase) { if (DEBUG) { console.log(sFrase); } } //------------------------------------------------------------------------- // ritorna vero se numero function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); } /** * ritorna la data con aggiunta di n minuti */ Date.prototype.addMinutes = function(n) { this.setTime(this.getTime() + (n*60*1000)); return this; } /* * ritorna la data con aggiunta di h ore */ Date.prototype.addHours = function(h) { this.setTime(this.getTime() + (h*60*60*1000)); return this; } /** * ritorna una data (2022-09-12T01:00:00) in UTC * in realtà , visto che tutte le date sono in solare, faccio finta che il solare * corrisponda all'UTC in modo da non avere la conversione in locale del browser */ Date.prototype.ConvIstante = function( ist, isUTC = false ) { var nSolare = 0; if (isUTC) {nSolare = 1;} // 2022-09-12T01:00:00 // 0123456789012345678 var cosa = new Date(Date.UTC(ist.substring(0, 4), parseFloat(ist.substring(5, 7))-1, ist.substring(8, 10), parseFloat(ist.substring(11,13))+nSolare, ist.substring(14,16), 0, 0) ); this.setTime( cosa.getTime() ); return this; } /** * ritorna una data (30/04/2023 02:00) in UTC * in realtà , visto che tutte le date sono in solare, faccio finta che il solare * corrisponda all'UTC in modo da non avere la conversione in locale del browser */ Date.prototype.ConvDataOra = function( ist, isUTC = false ) { var nSolare = 0; if (isUTC) {nSolare = 1;} // 30/04/2023 02:00 // 0123456789012345 var cosa = new Date(Date.UTC(ist.substring(6, 10), parseFloat(ist.substring(3, 5))-1, ist.substring(0, 2), parseFloat(ist.substring(11,13))+nSolare, ist.substring(14,16), 0, 0) ); this.setTime( cosa.getTime() ); return this; } /** * ritorna una data (30/04/2023) */ Date.prototype.ConvData = function( ist) { var nSolare = 0; // 30/04/2023 // 0123456789 var cosa = new Date(Date.UTC(ist.substring(6, 10), parseFloat(ist.substring(3, 5))-1, ist.substring(0, 2), 0, 0, 0, 0) ); this.setTime( cosa.getTime() ); return this; } /*------------------------------------------------------------------------------ ritorna una stringa con la data nel formato indicato */ Date.prototype.Formato = function( formato ) { var mm = ('0' + (this.getUTCMonth()+1) ) .slice(-2); var dd = ('0' + this.getUTCDate()).slice(-2); var yyyy = this.getUTCFullYear(); var hh = ('0' + (this.getUTCHours())).slice(-2); var mi = ('0' + this.getUTCMinutes()).slice(-2); var ss = ('0' + this.getUTCSeconds()).slice(-2); var mesi = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno','Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre']; var giorni = ['domenica', 'lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato']; var sRet = ''; switch (formato) { case 'gg g mmm YYYY': sRet =giorni[ this.getUTCDay() ] + ' ' + this.getUTCDate() + ' ' + mesi[ this.getUTCMonth() ] + ' ' + yyyy; break; case 'DD/MM/YYYY': sRet = dd + '/' + mm + '/' + yyyy; break; case 'DD/MM/YYYY HH': sRet = dd + '/' + mm + '/' + yyyy + ' ' + hh; break; case 'DD/MM/YYYY HH:mm': sRet = dd + '/' + mm + '/' + yyyy + ' ' + hh + ':' + mi; break; case 'DD HH' : sRet = dd + ' ' + hh; break; case 'DD' : sRet = dd; break; case 'HH:mm': sRet = hh + ':' + mi; break; case 'HH': sRet = hh; break; case 'mm': sRet = mi; break; case 'YYYYMMDDHHmm': sRet = yyyy + mm + dd + hh + mi; break; case 'YYYY-MM-DDTHH-mm': sRet = yyyy + '-' + mm + '-' + dd + 'T' + hh + ':' + mi + ':00'; break; default: sRet = this.toString(); break; } return sRet; } /** * Ritorno PADOVA come Padova */ function titleCase(string){ return string[0].toUpperCase() + string.slice(1).toLowerCase(); } /** * div sulla pagina con la mappa */ function CreaDivMappa() { var frase = '\

\
\

Aggiornamento alle 11:30 e 16:30 solari di ogni giorno.
\ Questi dati sono esposti in modo automatico, senza validazione preventiva.
\ ARPAV non assume responsabilità alcuna per usi diversi dalla pura informazione.
\ In seguito a validazione i dati possono subire modifiche anche notevoli, oppure possono essere invalidati e quindi non riportati negli archivi definitivi.
\

'; const divPage = document.createElement('div'); divPage.setAttribute('id', 'divPage'); divPage.innerHTML = frase; block.append(divPage); // aggiungo gli stili che uso CreaStyle('Mappa-Tabella'); // bottoni dei sensori var frase = '

'; // per tutti i bottoni previsti // pulsanti['TEMP'] = { pulsante: 'Temperatura aria', coordcd: 18, targa: 'TEMP', unitaMis: '°C'}; Object.entries(pulsanti).forEach(entry => { const [key, element] = entry; const bt = ''; frase += bt; }); frase += '

'; const divBottoni = document.createElement('div'); divBottoni.setAttribute('id', 'divBottoni'); divBottoni.innerHTML = frase + '

'; // metto i pulsanti dentro al div della mappa divBottoni.setAttribute('class', 'col-11 ol-overlaycontainer layer-button-control text-left btn-toolbar'); divBottoni.setAttribute('role', 'toolbar'); divBottoni.setAttribute('style', 'position: absolute; left: 80px; pointer-events: auto; z-index: 5;') document.getElementById('mappa').append(divBottoni); // evento click su ogni bottone in modo da fare vedere i punti delle stazioni con il sensore voluto Object.entries(pulsanti).forEach(entry => { const [key, element] = entry; const bt = document.getElementById('btn' + element.targa ); bt.setAttribute('style', 'background: white; padding: 5px 5px;') // bt.setAttribute('class', 'col-sm'); bt.onclick = function () { AggiungiLivello(element); } }); // mappa geografica CaricaMappa('mappa'); } /** * create map */ function CaricaMappa(divMappa) { // spazio dove mettere il testo del popup sulla stazione const divHint = document.createElement('div'); divHint.setAttribute('id', 'hintStazione'); divHint.setAttribute('class', 'ol-overlay-container ol-selectable'); divHint.style.transform= 'translate(-50%, -105%)'; divHint.style.borderStyle = "solid"; divHint.style.borderWidth = "thin"; divHint.style.borderRadius = "5px"; divHint.style.whiteSpace = 'nowrap'; divHint.style.backgroundColor = "#636363"; divHint.style.borderColor = "#C4C4C4"; divHint.style.padding = "5px"; divHint.style.color = "white"; divHint.style.fontFamily = '"Titillium Web",Geneva,Tahoma,sans-serif'; divHint.style.fontSize = '10px'; block.append(divHint); const MAP_DEFAULT_EXTENT = [818354.918, 5425389.1889, 1816693.282, 6070039.437]; map = new ARPAVAPI.openlayers.ol.Map({ target: divMappa, view: new ARPAVAPI.openlayers.ol.View({ center: ARPAVAPI.openlayers.proj.transform([11.9, 45.8], 'EPSG:4326', 'EPSG:3857'), zoom: 8.5, maxZoom: 13, extent: MAP_DEFAULT_EXTENT, }), controls: [ new ARPAVAPI.openlayers.control.Zoom() ] }); // aggiungo lo sfondo map.addLayer( getTileLayer() ); // add kml delle province addKmlProvince(); // popup sulla stazione popup = new ARPAVAPI.openlayers.Overlay({ element: document.getElementById('hintStazione'), stopEvent: false, autoPan: { animation: { duration: 250, }, }, }); map.addOverlay(popup) // click sul punto map.on('singleclick', function (evt) { clickMap(evt); }); // change mouse cursor when over marker map.on('pointermove', function (evt) { mouseMoveOnMap(evt); }); } /** * Get tile layer */ function getTileLayer() { return new ARPAVAPI.openlayers.layer.Tile({ source: new ARPAVAPI.openlayers.source.OSM({ url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', }), name: 'sfondo', }); } /** * gestione del click sul punto della stazione */ function clickMap(evt) { const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; }); if ( ! feature) { return; } const stz = feature.getProperties().data; if (stz) { vediDati( feature.getProperties().data ); } } /** * change mouse cursor when over marker */ function mouseMoveOnMap(evt) { if (evt.dragging) return; var pixel = evt.map.getEventPixel(evt.originalEvent); var hit = map.hasFeatureAtPixel(evt.pixel, { layerFilter: function(layer) { return (layer.get('name') === layerMappa); } }); if (hit) { evt.map.getTargetElement().style.cursor = 'pointer'; const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; }); if (feature) { const stz = feature.getProperties().data; if (stz) { const frase = stz.nome_stazione + ' (' + stz.altitude + ' m s.l.m.)'; document.getElementById('hintStazione').innerHTML = frase; popup.setPosition(evt.coordinate); } } else { evt.map.getTargetElement().style.cursor = ''; popup.setPosition(undefined); } } else { evt.map.getTargetElement().style.cursor = ''; popup.setPosition(undefined); } } /** * livello kml delle Province */ function addKmlProvince() { kmlProvince = new ARPAVAPI.openlayers.layer.Vector({ source: new ARPAVAPI.openlayers.source.Vector({ url: 'https://www.arpa.veneto.it/api/risorse/data-meteo/kml/Province.kml', format: new ARPAVAPI.openlayers.format.KML() }), name: 'kmlProvince', }); map.addLayer( kmlProvince ); } /** * carico il livello indicato */ function AggiungiLivello(btn) { // cambio del colore sul pulsante premuto if (currentBtn) { document.getElementById( 'btn' + currentBtn.targa ).classList.remove('bg-primary'); document.getElementById( 'btn' + currentBtn.targa ).classList.remove('text-white'); } currentBtn = btn; document.getElementById( 'btn' + currentBtn.targa ).classList.add('bg-primary'); document.getElementById( 'btn' + currentBtn.targa ).classList.add('text-white'); // visualizzo le stazioni del sensore indicato addStazioni(); } /** * cancello i layer delle stazioni */ function cancellaLayer() { map.getLayers().forEach(layer => { if ( layer && layer.get('name') ) { if ( layer.get('name') == layerMappa) { map.removeLayer(layer); } } }); } /** * Aggiorno il div orarioRifer */ function AggiornaOrarioRifer( dataRifer, dataAggio ) { document.getElementById('aggiornamento').innerHTML = ''; // 'Elaborazione delle ' + dataAggio.Formato('HH:mm') + ' solari.'; } /** * recupero le stazioni e le visualizzo */ async function addStazioni() { if (document.getElementById('aggiornamento')) { document.getElementById('aggiornamento').innerHTML = 'Recupero stazioni'; } const lnk = lnkStazioni + currentBtn.coordcd + '&rnd=' + Math.random(); const response = await fetch(lnk); const jsonResponse = (await response.json()); const stzData = jsonResponse.data; // oggetto geoJSON const geojsonObject = { type: 'FeatureCollection', crs: { type: 'name', properties: { name: 'EPSG:3857', }, }, features: [], }; // carico le stazioni nel geoJSON e valorizzo le variabili per le informazioni let dataAggio = 0, dataRifer = 0; let coord = []; stzData.forEach((stazione, index) => { if ( ! eleStaz.includes(stazione.codice_stazione) ) { return; } let posiz = 'bottom'; if ( coord.includes( stazione.point) ) { posiz = 'top'; } coord.push( stazione.point ); geojsonObject.features.push({ type: 'Feature', geometry: JSON.parse(stazione.point), properties: { id: stazione.codice_stazione, xTextBaseline: posiz, data: { ...stazione }, // tutte le proprietà della stazione presente nel json }, }); }); var PallinoStazione = new ARPAVAPI.openlayers.style.Circle({ radius: pointDimension, fill: new ARPAVAPI.openlayers.style.Fill({color: colorFill}), stroke: new ARPAVAPI.openlayers.style.Stroke({ color: colorLine, width: 1 }) }); // punto della stazione di colore standard let iconStyle = new ARPAVAPI.openlayers.style.Style({ image: PallinoStazione }); // label stazione var labelStyle = new ARPAVAPI.openlayers.style.Style({ text: new ARPAVAPI.openlayers.style.Text({ placement: 'point', font: fontStz, overflow: true, fill: new ARPAVAPI.openlayers.style.Fill({ color: 'black', }), stroke: new ARPAVAPI.openlayers.style.Stroke({ color: sfondoEtichetta, width: 4, }), offsetY: -3, textBaseline: 'bottom', textAlign: 'center', rotation: 0, }) }); var style = [iconStyle, labelStyle]; const vectorLayer = new ARPAVAPI.openlayers.layer.Vector({ source: new ARPAVAPI.openlayers.source.Vector({ format: new ARPAVAPI.openlayers.format.GeoJSON(), features: new ARPAVAPI.openlayers.format.GeoJSON({ featureProjection: 'EPSG:3857', }).readFeatures(geojsonObject) }), visible: true, name: layerMappa, style: function(feature) { // valore da visualizzare in base al sensore let et = feature.getProperties().data.codice_stazione; labelStyle.getText().setText( '' + et ); // posizione dell'etichetta labelStyle.getText().setTextBaseline( feature.getProperties().xTextBaseline ); return [iconStyle, labelStyle]; }, }); // cancello i layer delle stazioni e delle iso cancellaLayer(); // aggiungo il nuovo layer delle stazioni map.addLayer( vectorLayer ); document.getElementById('aggiornamento').innerHTML = ''; // tabella delle stazioni del sensore visualizzato //TabellaStazioni(stzData, lnk); } /** * ritorna i gradi decimali in sessagesimali (gradi primi secondi) */ function CoordGradi( coord ) { const g = Math.floor(coord); const p = Math.floor( (coord - g ) * 60); const s = (coord - g - (p/60) ) * 60 * 60; const s2 = Math.round(s*1000)/1000; // tre decimali arrotondati const ret = ' ' + g + '° ' + p + "' " + s2 + "'' " myConsoleLog('CoordGradi ' + coord + ' ->' + ret ); return ret; } /** * Visualizzo la tabella delle stazioni meteo */ function TabellaStazioni(stzData, lnk) { document.getElementById('tabellaStazioni').innerHTML = 'Caricamento dati'; // metto le stazioni in ordine alfabetico per provincia (sono già in ordine alfabetico basta dividerle per provincia) let ord = {'BELLUNO' : [], 'PADOVA' : [], 'ROVIGO' : [], 'TREVISO' : [], 'VENEZIA' : [], 'VICENZA' : [], 'VERONA' : [], 'UDINE' : []}; stzData.forEach((stazione, index) => { ord[ stazione.provincia ].push( stazione ); }); // myConsoleLog( JSON.stringify(ord, null, 4) ); var table = document.createElement('table'); table.setAttribute('id', 'eleStazioni'); table.setAttribute('class', 'table table-sm table-striped table-bordered table-hover table-condensed'); var body = table.createTBody(); // ciclo le province Object.keys(ord).forEach( nomeProv => { // metto la provincia solo se ci sono stazioni if ( ord[nomeProv].length == 0 ) { return; // equivalente a contineu; questo fa andare alla prossima provincia } var rowProv = body.insertRow(-1); var cellProv = rowProv.insertCell(-1); cellProv.colSpan = '2'; cellProv.innerHTML = 'Stazioni nella provincia di ' + titleCase(nomeProv); cellProv.style.textAlign = "center"; cellProv.style.backgroundColor = btnBackgroundColor; // ciclo le stazioni della provincia for (let index = 0; index < ord[nomeProv].length; index += 2) { const e1 = ord[nomeProv][index]; const e2 = ord[nomeProv][index+1]; var row = body.insertRow(-1); const cell1 = row.insertCell(-1); const cell2 = row.insertCell(-1); cell1.innerHTML = e1.nome_stazione + ' (' + e1.codice_stazione + ')'; cell1.onclick = function () { vediDati( e1 ); } cell1.onmouseover = function () { cell1.style.cursor = "pointer"; } cell1.onmouseout = function () { cell1.style.cursor = "default"; } if (e2) { cell2.innerHTML = e2.nome_stazione + ' (' + e2.codice_stazione + ')'; cell2.onclick = function () { vediDati( e2 ); } cell2.onmouseover = function () { cell2.style.cursor = "pointer"; } cell2.onmouseout = function () { cell2.style.cursor = "default"; } } else { cell2.innerHTML = ''; } } }); var divTab = document.createElement('div'); divTab.setAttribute('id', 'tabElencoStazioni'); divTab.setAttribute('class', 'bmodal-body border mb-2'); divTab.style.height = "500px"; divTab.style.overflowY = "scroll"; divTab.append(table); document.getElementById('tabellaStazioni').innerHTML = ''; document.getElementById('tabellaStazioni').append(divTab); var jsonRif = document.createElement('a'); jsonRif.setAttribute('href', lnk); jsonRif.setAttribute('target', '_blank'); jsonRif.setAttribute('type', 'text/json'); jsonRif.innerHTML = 'Anagrafica stazioni in formato JSON'; document.getElementById('tabellaStazioni').append(jsonRif); document.getElementById('tabellaStazioni').style.border = ""; } /** * cambio pagina in modo da visualizzare il grafico dei sensori della stazione */ function vediDati( tuplaStaz ) { const lnk = window.location.href.split('?')[0] + '?codseqst=' + tuplaStaz.codseqst + '&focus=' + currentBtn.targa; document.location.href = lnk; } //------------------------------------------------------------------------- // ValoriSensore: ritorna i valori dei sensori ordinati function ValoriSensore(stationdata) { let sensors = {}; stationdata.data.forEach((item) => { if (!sensors[item.tipo]) { sensors[item.tipo] = { data: [], label: item.nome_sensore, unitmeas: item.unitnm } } // momento di aggiornamento dei dati visualizzati aggiornamento = item.aggiornamento; precisionefalda = item.precisionefalda; nomeStazione = item.nome_stazione; sensors[item.tipo].data.push({ value: item.valore, date: item.dataora }); }); // ora separo, per i sensori con value: MINIMO, MEDIO o MASSIMO su sensori appositi Object.entries(sensors).forEach(([key, contenuto], index) => { console.log(`${index}: ${key} = ${contenuto.label}`); // sensori con più valori: gestione delle colonne multiple per il sensore if (key.indexOf('TARIA') >= 0 ) { sensors[ key + "_MIN" ] = { label: contenuto.label + ' (minima)', unitmeas: contenuto.unitmeas, data: []}; sensors[ key + "_MED" ] = { label: contenuto.label + ' (media)', unitmeas: contenuto.unitmeas, data: []}; sensors[ key + "_MAX" ] = { label: contenuto.label + ' (massima)', unitmeas: contenuto.unitmeas, data: []}; contenuto.data.forEach(element => { let valore = {MINIMO: null, MEDIO: null, MASSIMO: null}; if (element.value) { valore = JSON.parse(element.value); } const giorno = new Date().ConvData( element.date ); sensors[ key + "_MIN" ].data.push( { date: element.date, value: valore.MINIMO, timestamp: giorno } ); sensors[ key + "_MED" ].data.push( { date: element.date, value: valore.MEDIO, timestamp: giorno } ); sensors[ key + "_MAX" ].data.push( { date: element.date, value: valore.MASSIMO, timestamp: giorno } ); }); } if (key.indexOf('UMID') >= 0 ) { sensors[ key + "_MIN" ] = { label: contenuto.label + ' (minima)', unitmeas: contenuto.unitmeas, data: []}; sensors[ key + "_MAX" ] = { label: contenuto.label + ' (massima)', unitmeas: contenuto.unitmeas, data: []}; contenuto.data.forEach(element => { let valore = {MINIMO: null, MASSIMO: null}; if (element.value) { valore = JSON.parse(element.value); } const giorno = new Date().ConvData( element.date ); sensors[ key + "_MIN" ].data.push( { date: element.date, value: valore.MINIMO, timestamp: giorno } ); sensors[ key + "_MAX" ].data.push( { date: element.date, value: valore.MASSIMO, timestamp: giorno } ); }); } if (key.indexOf('DVENTO') >= 0 ) { sensors[ key + "_GRADI" ] = { label: contenuto.label, unitmeas: contenuto.unitmeas, data: []}; sensors[ key + "_SETTORE" ] = { label: contenuto.label, unitmeas: 'settore', data: []}; contenuto.data.forEach(element => { let valore = {GRADI: null, SETTORE: null}; if (element.value) { valore = JSON.parse(element.value); } const giorno = new Date().ConvData( element.date ); sensors[ key + "_GRADI" ].data.push( { date: element.date, value: valore.GRADI, timestamp: giorno } ); sensors[ key + "_SETTORE" ].data.push( { date: element.date, value: valore.SETTORE, timestamp: giorno } ); }); } if (key.indexOf('VRAFFICA') >= 0 ) { sensors[ key + "_MASSIMO" ] = { label: contenuto.label, unitmeas: contenuto.unitmeas, data: []}; sensors[ key + "_OREMINUTI" ] = { label: contenuto.label, unitmeas: 'ore:minuti', data: []}; contenuto.data.forEach(element => { let valore = {MASSIMO: null, OREMINUTI: null}; if (element.value) { valore = JSON.parse(element.value); } const giorno = new Date().ConvData( element.date ); sensors[ key + "_MASSIMO" ].data.push( { date: element.date, value: valore.MASSIMO, timestamp: giorno } ); sensors[ key + "_OREMINUTI" ].data.push( { date: element.date, value: valore.OREMINUTI, timestamp: giorno } ); }); } }); return sensors; } //------------------------------------------------------------------------- // creazione della tabella dati function createHTMLForTab(type, label, firstParameter) { // create tab item myConsoleLog('createHTMLForTab type ' + type + ' firstParameter ' + firstParameter); // create tab content const div = document.createElement('div'); div.setAttribute('id', 'tabcontent-' + type); div.setAttribute('class', 'modal-body' ); div.innerHTML = '

'; document.getElementById('meteoTabPanelContent').append(div); } function padTo2Digits(num) { return num.toString().padStart(2, '0'); } function formatDate(date) { return padTo2Digits(date.getDate()) + '-' + padTo2Digits(date.getMonth() +1); } //------------------------------------------------------------------------- // creo la tabella dei dati giornalieri async function GraficiStazione(codseqst, focus) { linkJsonDati = lnkValoriSensori + codseqst + '&rnd=' + Math.random(); const response = await fetch(linkJsonDati); const jsonResponse = (await response.json()); const sensors = ValoriSensore(jsonResponse); // gestione delle colonne nell'ordine corretto della tabella dei dati finale let xNomiGiusti = []; ordineSensoriTabellaDati.forEach((nomeColonna, index) => { // cerco se ho il sensore nei sensori della stazione Object.entries(sensors).forEach(entry => { const [type, sensore] = entry; // esiste il sensore da intabellare nei sesnori della stazione? if ( nomeColonna == type ) { if ( ! xNomiGiusti[ type ] ) { xNomiGiusti.push( type ); } } }); }); let parti = '

\
'; const divPagina = document.createElement('div'); divPagina.setAttribute('id', 'bodyStazione'); divPagina.innerHTML = parti block.append(divPagina); // faccio il grafico per ogni sensore xNomiGiusti.forEach((nomeColonna, index) => { const sensore = sensors[nomeColonna]; const type = nomeColonna; // create tab content const div = document.createElement('div'); div.setAttribute('id', 'tabcontent-' + type); div.setAttribute('class', 'modal-body' ); div.innerHTML = '

'; document.getElementById('agroGrafici').append(div); // grafico del sensore, gli passo tutti i sensori in modo da vare quelli multipli come la temperatura/umidità initializeChart(type, sensors); }); // tabella dei dati usati per i grafici CreaTabella('TABELLA', sensors); // evento click sul pulsante document.getElementById('btnIndietro').onclick = function () { window.history.back(); } document.getElementById('nomeStaz').innerHTML = '

' + nomeStazione + '

'; // cambio il titolo della pagina var xpath = "//h1[text()='Nuova pagina variabili meteorologiche']"; var TitoloPagina = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; if (TitoloPagina) { TitoloPagina.innerHTML = 'Dati della stazione'; } // aggiungo momento di aggiornamento dei dati presentati var fraseAggiornam = 'Nessun valore negli ultimi giorni'; if (aggiornamento) { var dAggior = new Date().ConvIstante( aggiornamento ); fraseAggiornam = 'Dati aggiornati il ' + dAggior.Formato('DD/MM/YYYY HH:mm') + ' (solare)'; } const p = document.createElement('p'); p.setAttribute('class', 'text-center table-condensed'); p.innerHTML = fraseAggiornam; document.getElementById('agroGrafici').append(p); // link per avere la tabella in formato csv // createCSV2(jsonResponse.data, 'meteoTabPanelContent'); // mi posiziono sul grafico del sensore in focus let qualeFocus = focus; let assegnato = false; Object.entries(type2pulsante).forEach(entry => { const [key, element] = entry; if ( ( ! assegnato) && (element == focus) && ( document.getElementById('tabcontent-' + key) ) ) { qualeFocus = 'tabcontent-' + key; assegnato = true; } }); const aTag = document.getElementById(qualeFocus); if (aTag) { aTag.setAttribute('tabindex', '0'); aTag.focus(); } } //------------------------------------------------------------------------- // ritorna l'altezza del sensore function AltezzaSensore(type) { var metriVento = type; if ( type.indexOf( '2M' ) >= 0 ) { metriVento = 2; } if ( type.indexOf( '5M' ) >= 0 ) { metriVento = 5; } if ( type.indexOf( '8M' ) >= 0 ) { metriVento = 8; } if ( type.indexOf( '10M' ) >= 0 ) { metriVento = 10; } return metriVento; } //------------------------------------------------------------------------- // creo la tabella dei dati presenti function CreaTabella(type, sensors) { // ho sempore due righe sul titolo var nSpanData = 'rowspan="2"'; var nSpanColone = ''; // se stazione con raffica del vento allora titolo su 3 righe var bIsRafficaVento = false; var bIsDirezVento = false; var bIsMedDVento = false; Object.entries(sensors).forEach(entry => { const [type, sensore] = entry; // se type VRAFFICA allora anche ci sono 3 righe sul titolo if ( type.indexOf( 'VRAFFICA' ) >= 0 ) { nSpanData = 'rowspan="3"'; nSpanColone = 'rowspan="2"'; bIsRafficaVento = true; } // anche per il messaggio a fine tabella della direzione di provenienza if ( type.indexOf( 'DVENTO' ) >= 0 ) { bIsDirezVento = true; } // per le colonne del vento if ( type.indexOf( 'VVMEDARIT' ) >= 0 ) { bIsMedDVento = true; } }); // gestione delle colonne nell'ordine corretto della tabella dei dati finale let xNomiGiusti = []; ordineSensoriTabellaDati.forEach((nomeColonna, index) => { // cerco se ho il sensore nei sensori della stazione Object.entries(sensors).forEach(entry => { const [type, sensore] = entry; // esiste il sensore da intabellare nei sesnori della stazione? if ( nomeColonna == type ) { if ( ! xNomiGiusti[ type ] ) { xNomiGiusti.push( type ); } } }); }); myConsoleLog('xNomiGiusti' + JSON.stringify(xNomiGiusti, null, '\t') ); // classi per centrare il contenuto const sC = ' class="align-middle text-center nowrap" '; // -------------------------------------- // titoli delle colonne dei dati presenti let titoloDati = '' + 'Data
(gg/mm/aaaa)'; let titoloDati2 = ''; // seconda riga nei titoli let titoloDati3 = ''; // terza riga nei titoli solo se esiste la raffica vento var bFattoVento = false; xNomiGiusti.forEach((nomeColonna, index) => { const sensore = sensors[nomeColonna]; const type = nomeColonna; var nomeSensore = sensore.label; // intestazioni delle colonne: nome del sensore e unità di misura if (type.indexOf('TARIA') >= 0 ) { titoloDati += 'Temp. aria
a ' + AltezzaSensore(type) + ' m
(' + sensore.unitmeas + ')'; titoloDati2 += 'min' + 'med' + 'max'; } if (type.indexOf('PREC') >= 0 ) { titoloDati += 'Precipitazione
(mm)'; titoloDati2 += 'tot'; } if (type.indexOf('UMID') >= 0 ) { titoloDati += 'Umidità rel.
a ' + AltezzaSensore(type) + ' m
(' + sensore.unitmeas + ')'; titoloDati2 += 'min' + 'max'; } if (type.indexOf('RADSOL') >= 0 ) { titoloDati += 'Radiazione
globale
(' + sensore.unitmeas + ')'; titoloDati2 += 'tot'; } if (type.indexOf('BFOGL') >= 0 ) { titoloDati += 'Bagnatura fogliare
(' + sensore.unitmeas + ' di tempo)'; titoloDati2 += 'tot'; } // se ho il vento allora metto solo una volta if ( (type.indexOf('VVMEDARIT') >= 0 ) || (type.indexOf('VRAFFICA') >= 0 ) || (type.indexOf('DVENTO') >= 0 ) ) { if ( ! bFattoVento ) { var nColSpanVento = 0; if (bIsRafficaVento) { nColSpanVento += 2;} if (bIsDirezVento) { nColSpanVento += 1;} if (bIsMedDVento) { nColSpanVento += 1;} titoloDati += 'Vento a ' + AltezzaSensore(type) + 'm'; bFattoVento = true; } // vento seconda riga nei titoli if (type.indexOf('VVMEDARIT') >= 0 ) { titoloDati2 += 'Velocità
med
(' + sensore.unitmeas + ')'; } if (type.indexOf('VRAFFICA') >= 0 ) { titoloDati2 += 'Raffica
massima'; titoloDati3 += 'oram/s'; } if (type.indexOf('DVENTO') >= 0 ) { titoloDati2 += 'Direz.
preval.'; } } if (type.indexOf('PRESS') >= 0 ) { titoloDati += '' + nomeSensore + ' (' + sensore.unitmeas + ')'; titoloDati2 += 'med'; } if (type == 'TSUOLO' ) { titoloDati += 'Temp. suolo
media
(°C)'; titoloDati2 += 'a 0 cm' + 'a -10 cm' + 'a -20 cm' + 'a -30 cm'; } if (type.indexOf('LIDRO') >= 0 ) { titoloDati += 'Livello idrometrico
(' + sensore.unitmeas + ')'; titoloDati2 += 'min' + 'med' + 'max'; } if (type.indexOf('PORT') >= 0 ) { titoloDati += 'Portata idrometrica
(' + sensore.unitmeas + ')'; titoloDati2 += 'min' + 'med' + 'max'; } if (type.indexOf('NIVOM') >= 0 ) { titoloDati += '' + nomeSensore + ' (' + sensore.unitmeas + ')'; titoloDati2 += 'med'; } if (type.indexOf('VISIB') >= 0 ) { titoloDati += '' + nomeSensore + ' (' + sensore.unitmeas + ')'; titoloDati2 += 'med'; } if (type.indexOf('LFREAT') >= 0 ) { titoloDati += '' + nomeSensore + ' (' + sensore.unitmeas + ')'; // se esiste la precisione allora la indico if (precisionefalda) { titoloDati += '
precisione ' + precisionefalda; } titoloDati += ''; titoloDati2 += 'media'; } }); titoloDati += ''; titoloDati2 += ''; // -------------------------------------- // array delle righe nella tabella let righe = []; let nRiga = 0; let iTab; // variabile per ciclare sui dati dei sensori let bAssente = false; // flag per mettere >> solo se ci sono dati assenti in tabella // ciclo tutti i sensori presenti nell'ordine delle colonne da scrivere xNomiGiusti.forEach((nomeColonna, index) => { const sensore = sensors[nomeColonna]; const type = nomeColonna; // compongo le righe e colonne della tabella dei dati sensore.data.forEach((tuplaDatiSensore, index) => { var dataora = tuplaDatiSensore.date; // 2022-09-08T05:00:00 // 0123456789012345678 dataora = dataora.substr(8, 2) + '/' + dataora.substr(5, 2) + '/' + dataora.substr(0, 4); // 08/09/2022 // cerco la riga nella righe let bCarica = true; for (iTab in righe) { // uso il for per avere il break if ( righe[iTab].dataora == '' + dataora + '' ) { bCarica = false; nRiga = iTab; break; } } if ( bCarica ) { // aggiungo la riga nella tabella da pubblicare nRiga = righe.push( { dataora: '' + dataora + '' } ); nRiga -= 1; // zero based } // valore da intabellare var valore = tuplaDatiSensore.value; var sValore; var vMin = ASSENTE, vMed = ASSENTE, vMax = ASSENTE, vMassimo = ASSENTE, vOraMinuti = ASSENTE, vGradi = ASSENTE, vSettore = ASSENTE; // sensori con più valori: gestione delle colonne multiple per il sensore if (type.indexOf('TARIA') >= 0 ) { if (valore) { valore = JSON.parse(valore); vMin = valore.MINIMO; vMed = valore.MEDIO; vMax = valore.MASSIMO; } sValore = '' + vMin + '' + '' + vMed + '' + '' + vMax + ''; } if (type.indexOf('UMID') >= 0 ) { if (valore) { valore = JSON.parse(valore); vMin = valore.MINIMO; vMax = valore.MASSIMO; } sValore = '' + vMin + '' + '' + vMax + ''; } if (type.indexOf('VRAFFICA') >= 0 ) { if (valore) { valore = JSON.parse(valore); vMassimo = valore.MASSIMO; vOraMinuti = valore.ORAMINUTI; } sValore = '' + vOraMinuti + '' + '' + vMassimo + ''; } if (type.indexOf('DVENTO') >= 0 ) { if (valore) { valore = JSON.parse(valore); vGradi = valore.GRADI; vSettore = valore.SETTORE; } sValore = '' + vSettore + ''; } if ( (type.indexOf('LIDRO') >= 0 ) || (type.indexOf('PORT') >= 0 ) ) { if (valore) { valore = JSON.parse(valore); vMin = valore.MINIMO; vMed = valore.MEDIO; vMax = valore.MASSIMO; } sValore = '' + vMin + '' + '' + vMed + '' + '' + vMax + ''; } if (type.indexOf('TSUOLO') >= 0 ) { let t0 = ASSENTE, t_10 = ASSENTE, t_20 = ASSENTE, t_30 = ASSENTE; if (sensors['TSUOLO'].data[index].value) { t0 = sensors['TSUOLO'].data[index].value.replace(',',''); } if (sensors['TSUOLO-10'].data[index].value) { t_10 = sensors['TSUOLO-10'].data[index].value.replace(',',''); } if (sensors['TSUOLO-20'].data[index].value) { t_20 = sensors['TSUOLO-20'].data[index].value.replace(',',''); } if (sensors['TSUOLO-30'].data[index].value) { t_30 = sensors['TSUOLO-30'].data[index].value.replace(',',''); } sValore = '' + t0 + '' + '' + t_10 + '' + '' + t_20 + '' + '' + t_30 + ''; } if ( ! sValore ) { if ( ! valore ) { valore = ASSENTE; } // tolgo l'eventuale , delle migliaia valore = valore.replace(',',''); if ( ! isNumeric( valore ) ) { bAssente = true; sValore = '' + ASSENTE + ''; } else { sValore = '' + valore + ''; } } righe[nRiga][type] = sValore; }); // sensore.data.forEach((valore, index) => { }); // tabella vera e propria in ordine decrescente righe.reverse(); let righeDati = ''; for (iTab in righe) { let tupla = righe[iTab]; righeDati += ''; let i; // per tutte le colonne della riga for (i in tupla) { righeDati += tupla[i]; } righeDati += ''; } // -------------------------------------- // tabella completa da visualizzare var tabDati = ''; tabDati += ''; tabDati += '' + titoloDati + titoloDati2 + titoloDati3 + ''; tabDati += '' + righeDati + ''; tabDati += '

'; // info varie e link al file xml dei dati utilizzati if ( bAssente ) { tabDati += 'Con ' + ASSENTE + ' dato assente.
'; } if ( bIsDirezVento) { tabDati += 'La provenienza del vento indica con 0=Nord, 90=Est, 180=Sud, 270=Ovest.
'; } const t = document.createElement('div'); t.setAttribute('class', 'modal-body'); // t.setAttribute('style', 'height: 800px;overflow-y: scroll;'); t.innerHTML = tabDati + 'Dati della stazione in formato JSON'; // metto la tabella nel suo posto document.getElementById('agroTabellaDati').append(t); // 18/07/2023 al momento NON faccio link al salvataggio del file in csv // createCSV('tabellaDati', 'meteoTabPanelContent'); } /** * createCSV: converte la tabella idTabella in csv per metterla in idContent */ function createCSV(idTabella, idContent) { myConsoleLog('createCSV ' + idTabella + ' ' + idContent); const table = document.getElementById(idTabella); var titoliCsv = ''; var nColonne = 0; // titoli delle colonne for (var j = 0, col; col = table.rows[0].cells[j]; j++) { const inner = col.innerHTML.replaceAll('
', ' '); let aggiungi = true; if ( inner.indexOf("aria") >= 0) { aggiungi = false; titoliCsv += inner + ' min;' + inner + ' med;' + inner + ' max;'; nColonne += 3; } if ( inner.indexOf("Umidit") >= 0) { aggiungi = false; titoliCsv += inner + ' min;' + inner + ' max;'; nColonne += 2; } if ( inner.indexOf("Vento") >= 0) { aggiungi = false; titoliCsv += inner + ' velocità;' + inner + ' raffica ora;' + inner + ' raffica m/s;' + inner + ' direz;'; nColonne += 4; } if ( inner.indexOf("idrometric") >= 0) { aggiungi = false; titoliCsv += inner + ' min;' + inner + ' med;' + inner + ' max;'; nColonne += 3; } if ( inner.indexOf("suolo") >= 0) { aggiungi = false; titoliCsv += inner + ' a 0cm;' + inner + ' a -10cm;' + inner + ' a -20cm;' + inner + ' a -30cm;'; nColonne += 4; } if (aggiungi) { titoliCsv += inner + ';'; nColonne += 1; } } // togliere l'ultimo ; e mettere a \n titoliCsv = titoliCsv.substring(0, titoliCsv.length-1) + '\n'; var righeCsv = ''; for (var i = 0, row; row = table.rows[i]; i++) { //iterate through rows //rows would be accessed using the "row" variable assigned in the for loop // salto tutte le righe che non hanno il numero di colonne previste if (row.cells.length != nColonne ) { continue; } for (var j = 0, col; col = row.cells[j]; j++) { //iterate through columns //columns would be accessed using the "col" variable assigned in the for loop var inner = col.innerHTML.replaceAll('
', ' '); inner = col.innerHTML.replaceAll('>', '>'); const separatore = ( ( j == row.cells.length-1 ) ? '\n' : ';'); righeCsv += inner + separatore; } } const tutta = titoliCsv + righeCsv; // per salvare in formato excel https://stackoverflow.com/questions/19492846/javascript-to-csv-export-encoding-issue // You should add the UTF-8 BOM at the start of the text, like: var element = document.createElement('a'); element.setAttribute('href', 'data:text/csv;charset=UTF-8,%EF%BB%BF' + encodeURI(tutta)); element.setAttribute('download', nomeStazione + '.csv'); element.innerHTML = 'Dati della stazione in formato CSV'; document.getElementById(idContent).append(element); /* var pre = document.createElement("pre"); pre.textContent = tutta; document.getElementById(idContent).append(pre); */ } /** * */ function CreaStyle(dove) { let css = '.piccolo { \ padding: 6px 6px; \ font-size: 14px; \ line-height: 1.45; \ }'; let head = document.head || document.getElementsByTagName('head')[0]; let style = document.createElement('style'); // document.getElementById( dove ).appendChild(style); head.appendChild(style); if (style.styleSheet){ // This is required for IE8 and below. style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } } /** * */ function AddStyle(quanti) { var css = '.table-condensed {'+ 'font-size: ' + quanti + 'px;'+ '}'; let head = document.head || document.getElementsByTagName('head')[0]; let style = document.createElement('style'); head.appendChild(style); if (style.styleSheet){ // This is required for IE8 and below. style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } } /*** * costruzione del grafico sensore */ function initializeChart(type, sensors) { // se non ho valori da graficare if (! sensors[type].data ) { return; } // in base al type realizzo il grafico opportuno var objGraph = null; // con taria 3 serie: minimo, medio, massimo if ( type.indexOf('TARIA') >= 0 ) { objGraph = GraficoTARIA(type, sensors); } // con umid 2 serie: minimo, massimo if ( type.indexOf('UMID') >= 0 ) { objGraph = GraficoUMID(type, sensors); } // con tsuolo le altre tsuolo if ( type.indexOf('TSUOLO') >= 0 ) { objGraph = GraficoTSUOLO(type, sensors); } // tutti gli altri sensori li faccio standard if ( ! objGraph ) { const typeGraph = ( (type == 'PREC') ? 'bar' : 'line'); objGraph = GraficoStandard(type, sensors[ type ], typeGraph); } } // ------------------------------------------------------------------------ // grafico specifico per la temperatura aria ( ci metto la temperatura minima, media e massima) function GraficoTARIA(type, sensors) { // creo il grafico standard con i dati medi var myChart = GraficoStandard(type, sensors[type + '_MED'], 'line'); let xPointStyle = 'circle'; // serie della minima var minima = { label: sensors[type + '_MIN'].label, data: sensors[type + '_MIN'].data, datalabels: { color: 'rgb(0, 0, 0)', align: 'start', anchor: 'center', offset : 2, rotation: -90, display: true, formatter: function(point, context) { // label ogni giorno var xLab = point.value; return xLab; } }, fill: false, borderColor: chartsColors['TARIA_MINIMA'], backgroundColor: chartsColors['TARIA_MINIMA'], tension: 0, pointStyle: xPointStyle, rotation: 0, pointBackgroundColor: chartsColors['TARIA_MINIMA'], pointBorderColor: chartsColors['TARIA_MINIMA'], radius: RadiusGrafici(), borderWidth: WidthGrafici(), parsing: { xAxisKey: 'date', yAxisKey: 'value', }, }; myChart.data.datasets.push(minima) // serie della massima var massima = { label: sensors[type + '_MAX'].label, data: sensors[type + '_MAX'].data, datalabels: { color: 'rgb(0, 0, 0)', align: 'end', anchor: 'center', offset : 2, rotation: -90, display: true, formatter: function(point, context) { // label ogni giorno var xLab = point.value; return xLab; } }, fill: false, borderColor: chartsColors['TARIA_MASSIMA'], backgroundColor: chartsColors['TARIA_MASSIMA'], tension: 0, pointStyle: xPointStyle, rotation: 0, pointBackgroundColor: chartsColors['TARIA_MASSIMA'], pointBorderColor: chartsColors['TARIA_MASSIMA'], radius: RadiusGrafici(), borderWidth: WidthGrafici(), parsing: { xAxisKey: 'date', yAxisKey: 'value', }, }; myChart.data.datasets.push(massima) myChart.update(); return myChart; } // ------------------------------------------------------------------------ // grafico specifico per la umidità aria ( ci metto la minima e massima) function GraficoUMID(type, sensors) { // creo il grafico standard con i dati minimi var myChart = GraficoStandard(type, sensors[type + '_MIN'], 'line'); let xPointStyle = 'circle'; // serie della massima var massima = { label: sensors[type + '_MAX'].label, data: sensors[type + '_MAX'].data, datalabels: { color: 'rgb(0, 0, 0)', align: 'end', anchor: 'center', offset : 2, rotation: -90, display: true, formatter: function(point, context) { // label ogni giorno var xLab = point.value; return xLab; } }, fill: false, borderColor: chartsColors['UMID_MASSIMA'], backgroundColor: chartsColors['UMID_MASSIMA'], tension: 0, pointStyle: xPointStyle, rotation: 0, pointBackgroundColor: chartsColors['UMID_MASSIMA'], pointBorderColor: chartsColors['UMID_MASSIMA'], radius: RadiusGrafici(), borderWidth: WidthGrafici(), parsing: { xAxisKey: 'date', yAxisKey: 'value', }, }; myChart.data.datasets.push(massima) myChart.update(); return myChart; } // ------------------------------------------------------------------------ // grafico specifico per la temperatura suolo function GraficoTSUOLO(type, sensors) { // creo il grafico standard con i dati minimi var myChart = GraficoStandard(type, sensors['TSUOLO'], 'line'); let xPointStyle = 'circle'; // serie della tsuolo-10 var t_10 = { label: sensors['TSUOLO-10'].label, data: sensors['TSUOLO-10'].data, datalabels: { color: 'rgb(0, 0, 0)', align: 'end', anchor: 'center', offset : 2, rotation: -90, display: true, formatter: function(point, context) { // label ogni giorno var xLab = point.value; // return xLab; return null; } }, fill: false, borderColor: chartsColors['TSUOLO_10'], backgroundColor: chartsColors['TSUOLO_10'], tension: 0, pointStyle: xPointStyle, rotation: 0, pointBackgroundColor: chartsColors['TSUOLO_10'], pointBorderColor: chartsColors['TSUOLO_10'], radius: RadiusGrafici(), borderWidth: WidthGrafici(), parsing: { xAxisKey: 'date', yAxisKey: 'value', }, }; myChart.data.datasets.push(t_10) // serie della tsuolo-20 var t_20 = { label: sensors['TSUOLO-20'].label, data: sensors['TSUOLO-20'].data, datalabels: { color: 'rgb(0, 0, 0)', align: 'end', anchor: 'center', offset : 2, rotation: -90, display: true, formatter: function(point, context) { // label ogni giorno var xLab = point.value; return null; } }, fill: false, borderColor: chartsColors['TSUOLO_20'], backgroundColor: chartsColors['TSUOLO_20'], tension: 0, pointStyle: xPointStyle, rotation: 0, pointBackgroundColor: chartsColors['TSUOLO_20'], pointBorderColor: chartsColors['TSUOLO_20'], radius: RadiusGrafici(), borderWidth: WidthGrafici(), parsing: { xAxisKey: 'date', yAxisKey: 'value', }, }; myChart.data.datasets.push(t_20) // serie della tsuolo-30 var t_30 = { label: sensors['TSUOLO-30'].label, data: sensors['TSUOLO-30'].data, datalabels: { color: 'rgb(0, 0, 0)', align: 'end', anchor: 'center', offset : 2, rotation: -90, display: true, formatter: function(point, context) { // label ogni giorno var xLab = point.value; return null; } }, fill: false, borderColor: chartsColors['TSUOLO_30'], backgroundColor: chartsColors['TSUOLO_30'], tension: 0, pointStyle: xPointStyle, rotation: 0, pointBackgroundColor: chartsColors['TSUOLO_30'], pointBorderColor: chartsColors['TSUOLO_30'], radius: RadiusGrafici(), borderWidth: WidthGrafici(), parsing: { xAxisKey: 'date', yAxisKey: 'value', }, }; myChart.data.datasets.push(t_30) myChart.update(); return myChart; } /** * ritorna la dimensione per il pallino sui grafici */ function RadiusGrafici() { return ( isMobile() ? MobilePointWidth : DeskPointWidth ); } /** * ritorna la width per le linee sui grafici */ function WidthGrafici() { return ( isMobile() ? MobileLineWidth : DeskLineWidth ); } // ------------------------------------------------------------------------ // grafico normale. Se su dispositivo mobile nessuna label function GraficoStandard(type, sensore, tipoGrafico) { const ctx = document.getElementById('chart-' + type); let label2 = sensore.label; // questa per la label della serie nel grafico let label3 = sensore.label; // questa per il titolo del grafico if (type.indexOf('VENTO') >= 0) { // inserisco la scritta prima dell'altezza sensore label2 = label2.replace(' vento a ', ' e direzione vento a '); label3 = label2; } if (type.indexOf('TSUOLO') >= 0) { label3 = 'Temperatura suolo'; } if (type.indexOf('TARIA') >= 0) { label3 = 'Temperatura aria'; } if (type.indexOf('UMID') >= 0) { label3 = 'Umidità relativa'; } document.getElementById('nome-' + type).innerHTML = label3; let xPointStyle = 'circle'; let xPointRotation = function(ctx) { return 0; }; let xPointColor = chartsColors[type]; // cerco il valore massimo in Y var maxY = - Infinity; var dMinima = Infinity; var dMassima = - Infinity; sensore.data.forEach((valore, index) => { // trovo la massima delle cumulate per impostare l'asse y1 maxY = Math.max(maxY, valore.value); // periodo del grafico const giorno = new Date().ConvData( valore.date ); dMassima = Math.max(dMassima, giorno); dMinima = Math.min(dMinima, giorno); }); // sul mySensor aggiungo sensor.data mettendo tutti i valori assenti al dPasso const passo = 1000*60*24; // un giorno in millisecondi var mySensor = []; var dAtteso = new Date(); dAtteso.setTime( dMinima ); sensore.data.forEach((valore, index) => { while ( dAtteso < valore.timestamp ) { mySensor.push({ value: null, date: dAtteso.Formato('YYYY-MM-DD'), timestamp: dAtteso }); dAtteso.setMilliseconds(dAtteso.getMilliseconds() + passo); } mySensor.push( valore ); dAtteso.setMilliseconds(dAtteso.getMilliseconds() + passo); }); // resto dei punti attesi while ( dAtteso < dMassima ) { mySensor.push({ value: null, date: dAtteso.Formato('YYYY-MM-DD'), timestamp: dAtteso }); dAtteso.setMilliseconds(dAtteso.getMilliseconds() + passo); } // in base al valore massimo aumento di una percentuale diversa if (maxY < 1) { maxY += maxY * 0.5; } else { maxY += maxY * 0.1; } // un solo decimale maxY = Math.round( maxY * 10 ) / 10; const typeAnchor = ( (type == 'PREC') ? 'end' : 'center' ); /* https://www.chartjs.org/ */ const myChart = new ARPAVAPI.Chart( ctx, { type: tipoGrafico, responsive: true, plugins: [ARPAVAPI.ChartDataLabels], data: { datasets: [{ label: label2, data: mySensor, datalabels: { color: 'rgb(0, 0, 0)', align: 'end', anchor: typeAnchor, offset : 2, rotation: -90, display: true, formatter: function(point, context) { // label ogni giorno var xLab = point.value; return xLab; } }, fill: false, borderColor: chartsColors[type], backgroundColor: chartsColors[type], tension: 0, pointStyle: xPointStyle, rotation: xPointRotation, pointBackgroundColor: xPointColor, pointBorderColor: xPointColor, radius: RadiusGrafici(), borderWidth: WidthGrafici(), parsing: { xAxisKey: 'date', yAxisKey: 'value', }, }] }, options: { scales: { x: { title: { display: true, text: 'Giorno - mese' }, ticks: { callback: function (value, index, ticks) { let date = new Date(this.getLabelForValue(value)); return formatDate(date); } } }, y: { title: { display: true, text: sensore.label + (sensore.unitmeas ? ' (' + sensore.unitmeas + ')' : '') }, suggestedMax: maxY, } }, plugins: { datalabels: { display: false }, tooltip: { callbacks: { title: context_list => { return new Date(context_list[0].label).toLocaleDateString("it-IT", tooltiplableformat); }, } } } }, }); return myChart; } /** * Generates HTML */ function generateHTML() { const codseqst = getParameterByName('codseqst'); const focus = getParameterByName('focus'); // elementi della pagina if (codseqst.length == 0) { // visualizzo la mappe delle stazioni CreaDivMappa(); // parto dal primo pulsante presente let primoPulsante = Object.values(pulsanti)[0].targa; document.getElementById( 'btn' + primoPulsante ).click(); } else { // imposto il font di default dei grafici il font della tabella if (isMobile() ) { ARPAVAPI.Chart.defaults.font.size = 7; AddStyle(7); } else { ARPAVAPI.Chart.defaults.font.size = 16; AddStyle(15); } GraficiStazione(codseqst, focus); } } generateHTML();

Dati agro-meteo ultimi giorni

Questa pagina ti è stata utile?