Salve a tutti, sto scrivendo la mia tesi di laurea e devo andare a modificare una pagina web scritta da un'altra persona cercando di apportare delle modifiche utili all'utente.
Il problema è che la modifica che mi è stata richiesta dal professore, prevede l'inserimento di un contatore (visibile all'utente) che si incrementi ogni volta che viene scaricata una banda di colore da Sentinel -2. Il problema su cui mi sto scervellando e su cui non riesco a trovare una soluzione è che su visual studio io vedo il download progressivo di queste bande di colore; mentre sulla pagina web che apro in locale, il contatore si aggiorna solo al termine del download di tutte le bande di colore.
Ho provato svariate soluzioni, dall'inserimento del semplice contatore, all'utilizzo di web worker, passando per setTimeout e via discorrendo, ma questo problema non sembra risolversi. La persona che ha scritto il codice mi ha detto che tutta la logica e le operazioni vengono fatte solo in questo enorme file home.html che contiene una grossisima parte in JavaScript.
Avete qualche consiglio? Vi allego la funzione che dovrebbe occuparsi del download di queste bande di colore (almeno così mi sembra di aver capito):
codice:
function dowloadRasterMetadata(group_id) {
disableResolutionSection();
fetch("/satellite/group/" + group_id + "/")
.then(response => {
if (!response.ok) {
throw new Error('Network error');
}
return response.json();
})
.then(data => {
enableResolutionSection();
isReadingSelectable = true;
showToast("Informazioni sulle immagini scaricate");
console.log(data);
readingsMetadata = {};
data.readings.forEach(function(reading_metadata, index, array) {
readingsMetadata[reading_metadata.resolution_in_meters] = reading_metadata;
});
$('#resolution-select').on("change", function() {
if (rasterLayer !== null) {
rasterLayer.remove();
rasterLayer = null;
}
disableFormulaSection();
resolution = $("#resolution-select").val();
bands = readingsMetadata[resolution].bands;
bands.forEach(function(band, index, array) {
$('#bands-list').append('<li class="list-group-item">' + band + '</li>');
});
fetch("/satellite/group/" + group_id + "/resolution/" + resolution + "/tiff/")
.then(response => response.arrayBuffer())
.then(arrayBuffer => {
parseGeoraster(arrayBuffer).then(georaster => {
console.log("georaster:", georaster);
raster = georaster;
$('#text-formula').val(defaultFormulas[resolution]);
enableFormulaSection();
computeFormula();
});
})
.catch(error => {
showToast("Download del tiff fallito");
console.error('There was a problem with the Fetch operation:', error);
});
});
$('#resolution-select').val('10').change();
})
.catch(error => {
showToast("Download delle informazioni sulle immagini scaricate fallito");
console.error('There was a problem with the Fetch operation:', error);
});