From 32468f24037cbd566d1c180bff8b9ed4626ba879 Mon Sep 17 00:00:00 2001 From: Erik Date: Thu, 11 Jul 2024 14:10:50 +0200 Subject: [PATCH 1/4] further improved responsiveness and style of tif_map and picker components #6 --- src/lib/ColorGradientPicker.svelte | 50 +++++++------ src/lib/CustomSliderPicker.svelte | 98 +++++++++++++++++-------- src/lib/tempresults/tif_map.svelte | 114 ++++++++++++++++++----------- 3 files changed, 168 insertions(+), 94 deletions(-) diff --git a/src/lib/ColorGradientPicker.svelte b/src/lib/ColorGradientPicker.svelte index b5671267..1042c18d 100644 --- a/src/lib/ColorGradientPicker.svelte +++ b/src/lib/ColorGradientPicker.svelte @@ -302,18 +302,16 @@ } -
-
-
-
-
+
+ +
+
+
+ +
{#if show_in_bounds} {:else}
-
+ +
{#if horizontal} {:else}
-
+ +
-
-
+ + +
- +
+
- @@ -400,11 +403,13 @@
+
+
{#key color_steps} @@ -422,6 +427,7 @@
+
{#key color_steps} diff --git a/src/lib/CustomSliderPicker.svelte b/src/lib/CustomSliderPicker.svelte index a49b4f1c..b2a44edd 100644 --- a/src/lib/CustomSliderPicker.svelte +++ b/src/lib/CustomSliderPicker.svelte @@ -1,5 +1,6 @@ -{#if valMap != undefined} -
+{#if valMap} +

Bandslider

-
+
- {#each valMap as val, idx} - {#if idx % 10 == 0 || idx == valMap.length - 1} -
+ {#if visible_value_ids.includes(idx) || idx == valMap.length - 1} +
{val}
{/if} @@ -60,30 +121,7 @@ diff --git a/src/lib/tempresults/tif_map.svelte b/src/lib/tempresults/tif_map.svelte index 090b5861..3b46c820 100644 --- a/src/lib/tempresults/tif_map.svelte +++ b/src/lib/tempresults/tif_map.svelte @@ -70,7 +70,6 @@ onMount(() => { initialize_map(); - generate_openlayers_case_stops(cg_picker.get_color_stops()); }); function initialize_map() { @@ -151,16 +150,16 @@ current_band_metainfo.min = band_metadata[selected_band].min; current_band_metainfo.max = band_metadata[selected_band].max; - console.log('meta_result: ', meta_result); + // console.log('meta_result: ', meta_result); // console.log('band_metadata: ', band_metadata); - console.log('net_cdf_times: ', net_cdf_times); - console.log('net_cdf_times TYPE: ', typeof net_cdf_times); + // console.log('net_cdf_times: ', net_cdf_times); + // console.log('net_cdf_times TYPE: ', typeof net_cdf_times); band_slider_values = []; for (let i = 0; i < net_cdf_times.length; i++) { band_slider_values.push(parseFloat(net_cdf_times[i])); } - console.log('band_slider_values: ', band_slider_values); + // console.log('band_slider_values: ', band_slider_values); cg_picker.set_bounds(current_band_metainfo.min, current_band_metainfo.max); // console.log("Tif result: ", result); @@ -172,8 +171,6 @@ // API_URL + '/tippecctmp/cache/water_budget/' + selected_file; } - function createTileLayer_singleBand() {} - function on_slider_change(e?) { selected_band = parseInt(slider_index) + 1; refresh_band_metadata(); @@ -186,12 +183,12 @@ visualize_band(); } - function generate_openlayers_case_stops(color_stops: any[]) { - var color_cases = ['case', ['==', ['band', 1], 0], [0, 0, 0, 0]]; + function generate_openlayers_case_stops(color_stops: any[], layerinfo: any[]) { + var color_cases = ['case', ['==', layerinfo, 0], [0, 0, 0, 0]]; for (let i = 0; i < color_stops.length; i++) { if (i % 2 == 0) { // console.log("Current UB: ", color_stops[i], " current LB: ", color_stops[i][1]); - color_cases.push(['between', ['band', 1], color_stops[i][0], color_stops[i][1]]); + color_cases.push(['between', layerinfo, color_stops[i][0], color_stops[i][1]]); } else { color_cases.push(color_stops[i]); } @@ -200,6 +197,12 @@ // TODO: // - maybe add case here for datapoints that exceed the min-/max-values (should only // be needed when custom min/max is set) + color_cases.push(['<', layerinfo, color_stops[0][0]]); + color_cases.push(color_stops[1]); + + color_cases.push(['>', layerinfo, color_stops[color_stops.length - 2][1]]); + color_cases.push(color_stops[color_stops.length - 1]); + // adding limits // fallback value for the 'case' operator color_cases.push([0, 0, 0, 0]); @@ -209,10 +212,11 @@ } function visualize_band() { - console.log('Visualizing: '); - console.log('selected_band: ', selected_band, ' ', typeof selected_band); - console.log('selected_band_dif: ', selected_band_dif, ' ', typeof selected_band_dif); - console.log('dif_mode: ', dif_mode); + // console.log('Visualizing: '); + // console.log('selected_band: ', selected_band); + // console.log('selected_band_dif: ', selected_band_dif); + // console.log('dif_mode: ', dif_mode); + // console.log("selected url: ", selected_tif_url); // Important note: // band selection is a bit tricky here.. @@ -222,17 +226,26 @@ // - thus when loading 2 bands into the source with e.g. band-number 4 and 50, // they will be re-indexed in the TileLayer to 1 and 2 respectively + var bands_helper = []; + if (dif_mode) { + bands_helper = [selected_band, selected_band_dif]; + } else { + bands_helper = [selected_band]; + } + const source = new GeoTIFF_OL({ normalize: false, sources: [ { // Alle baender 1,2,3,4,5,6,..... bands: [selected_band, selected_band_dif], - url: selected_tif_url + // TODO: + // - there are still some errors left with some tif files, (invalid byte order value, ..) + url: selected_tif_url // url: "https://leutra.geogr.uni-jena.de/tippecc_data/tmp/water_budget/" + "CLMcom-KIT-CCLM5-0-15_v1_MOHC-HadGEM2-ES__evspsblpot_all__mm__yearsum_mean_2080_2099.tif" - //url: - // 'https://leutra.geogr.uni-jena.de/tippecc_data/tmp/water_budget/bias/' + - // 'b_CLMcom-KIT-CCLM5-0-15_v1_MPI-M-MPI-ESM-LR__water_budget_all__mm__yearsum.tif' + // url: + // 'https://leutra.geogr.uni-jena.de/tippecc_data/tmp/water_budget/bias/' + + // 'b_CLMcom-KIT-CCLM5-0-15_v1_MPI-M-MPI-ESM-LR__water_budget_all__mm__yearsum.tif' // max: current_band_metainfo.max } ] @@ -245,9 +258,9 @@ info = ['band', 1]; } - const layerbandinfo = info; + const layerinfo = info; - const color_thing = generate_openlayers_case_stops(cg_picker.get_color_stops()); + const color_thing = generate_openlayers_case_stops(cg_picker.get_color_stops(), layerinfo); // const color_thing = [ // 'case', @@ -289,11 +302,17 @@ } -
- +
+ + + + + {#if dif_mode} +
+ +
+ {:else} +
+ +
+ {/if}
{#if band_slider_values} {#if band_slider_values.length >= 2} -
-
+
+

Band meta data #{selected_band}:

MIN: {current_band_metainfo['min']}
MAX: {current_band_metainfo['max']}
-
+
{#if dif_mode} -
-
+
+

Band meta data #{selected_band_dif}:

MIN: {current_dif_band_metainfo['min']}
MAX: {current_dif_band_metainfo['max']}
-
+
- - {:else} - {/if} {/if} {/if} From 0b0054bd27de2c313626ac7fad72bbb793f730b7 Mon Sep 17 00:00:00 2001 From: Erik Date: Fri, 19 Jul 2024 14:31:55 +0200 Subject: [PATCH 2/4] response error handling and additional parameter in fetch_folder_content #6 --- src/lib/fetch_folder_content.js | 12 +++++++++--- src/lib/tempresults/tif_map.svelte | 14 ++++++++++---- src/routes/water_budget/+page.svelte | 3 ++- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/lib/fetch_folder_content.js b/src/lib/fetch_folder_content.js index be179a0c..bf8652b6 100644 --- a/src/lib/fetch_folder_content.js +++ b/src/lib/fetch_folder_content.js @@ -3,8 +3,13 @@ import { API_URL } from '../app.config'; /** * @param {string | undefined} [type] */ -export async function _fetch_foldercontent_by_type(type) { - const custom_url = API_URL + '/climate/get_content?type=' + type; +export async function _fetch_foldercontent_by_type(type, convertable = false) { + var helper = API_URL + '/climate/get_content?type=' + type; + if (convertable) { + helper += '&convertable=true'; + } + + const custom_url = helper; const res = await fetch(custom_url, { method: 'GET' @@ -12,7 +17,8 @@ export async function _fetch_foldercontent_by_type(type) { let result = []; if (!res.ok) { - throw new Error(`${res.status} ${res.statusText}`); + var msg = await res.text(); + throw new Error(`${res.status} ${res.statusText}\nReason: ${msg}`); } result = await res.json(); diff --git a/src/lib/tempresults/tif_map.svelte b/src/lib/tempresults/tif_map.svelte index 3b46c820..58cf97f1 100644 --- a/src/lib/tempresults/tif_map.svelte +++ b/src/lib/tempresults/tif_map.svelte @@ -58,7 +58,7 @@ onMount(() => { // REPLACE TYPE HERE to fetch specific folders - _fetch_foldercontent_by_type('water_budget') + _fetch_foldercontent_by_type('water_budget', true) .then((result) => { folder_data = result; console.log(folder_data); @@ -125,7 +125,8 @@ let result = []; if (!res.ok) { - throw new Error(`${res.status} ${res.statusText}`); + var err_msg = await res.text(); + throw new Error(`${res.status} ${res.statusText}\nReason: ${err_msg}`); } result = await res.json(); @@ -138,7 +139,8 @@ let meta_result = []; if (!meta_res.ok) { - throw new Error(`${meta_res.status} ${meta_res.statusText}`); + var err_msg = await res.text(); + throw new Error(`${meta_res.status} ${meta_res.statusText}\nReason: ${err_msg}`); } meta_result = await meta_res.json(); @@ -164,8 +166,12 @@ // console.log("Tif result: ", result); selected_tif_url = result.filedata.route; + + // workaround for local testing + // selected_tif_url = result.filedata.filename; + visualize_band(); - // console.log('selected_tif_url: ', selected_tif_url); + console.log('selected_tif_url: ', selected_tif_url); // let selected_file_url = // API_URL + '/tippecctmp/cache/water_budget/' + selected_file; diff --git a/src/routes/water_budget/+page.svelte b/src/routes/water_budget/+page.svelte index 1b6a8151..a536178c 100644 --- a/src/routes/water_budget/+page.svelte +++ b/src/routes/water_budget/+page.svelte @@ -159,7 +159,8 @@ let result = []; if (!res.ok) { - throw new Error(`${res.status} ${res.statusText}`); + var err_msg = await res.text(); + throw new Error(`${res.status} ${res.statusText}\nReason: ${err_msg}`); } result = await res.json(); From eb800651c06dd4da9d8411bf0f5fd7d1a78f333b Mon Sep 17 00:00:00 2001 From: Erik Date: Fri, 19 Jul 2024 15:37:50 +0200 Subject: [PATCH 3/4] added timestamp parsing for bandslider time values #6 --- src/lib/tempresults/tif_map.svelte | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/lib/tempresults/tif_map.svelte b/src/lib/tempresults/tif_map.svelte index 58cf97f1..bf87604b 100644 --- a/src/lib/tempresults/tif_map.svelte +++ b/src/lib/tempresults/tif_map.svelte @@ -146,6 +146,7 @@ meta_result = await meta_res.json(); current_metadata = meta_result.metadata; + // console.log("Current Metadata: ", current_metadata); var band_metadata = meta_result.metadata.band_metadata; var net_cdf_times = JSON.parse(meta_result.metadata.net_cdf_times); @@ -158,9 +159,21 @@ // console.log('net_cdf_times TYPE: ', typeof net_cdf_times); band_slider_values = []; - for (let i = 0; i < net_cdf_times.length; i++) { - band_slider_values.push(parseFloat(net_cdf_times[i])); + var start_date = Date.parse(current_metadata.timestamp_begin); + const TWELF = 43200000; // 12 hours in ms + + if (current_metadata.timestamp_begin == '') { + for (let i = 0; i < net_cdf_times.length; i++) { + band_slider_values.push(parseFloat(net_cdf_times[i])); + } + } else { + for (let i = 0; i < net_cdf_times.length; i++) { + band_slider_values.push( + new Date(start_date + parseFloat(net_cdf_times[i]) * TWELF * 2).getFullYear() + ); + } } + // console.log('band_slider_values: ', band_slider_values); cg_picker.set_bounds(current_band_metainfo.min, current_band_metainfo.max); @@ -279,12 +292,12 @@ // ['interpolate', ['linear'], layerbandinfo, [...cg_picker.get_color_stops()]] // ]; - console.log('COLOR_THING: ', color_thing); + // console.log('COLOR_THING: ', color_thing); // const color_thing = [ // // https://openlayers.org/workshop/en/cog/ndvi.html // 'interpolate', ['linear'], layerbandinfo, ...cg_picker.get_color_stops() // ] - console.log('color_thing: ', color_thing); + // console.log('color_thing: ', color_thing); const layer = new TileLayer({ source: source, style: { From 8db64eafcd695fc8dbfc715735dc8c2b04591152 Mon Sep 17 00:00:00 2001 From: Erik Date: Fri, 19 Jul 2024 16:06:03 +0200 Subject: [PATCH 4/4] added filetype selection to tif_map and fixed eventListener bug #6 --- src/lib/CustomSliderPicker.svelte | 6 ++- src/lib/tempresults/tif_map.svelte | 59 +++++++++++++++++++++++++++++- 2 files changed, 63 insertions(+), 2 deletions(-) diff --git a/src/lib/CustomSliderPicker.svelte b/src/lib/CustomSliderPicker.svelte index b2a44edd..384cd586 100644 --- a/src/lib/CustomSliderPicker.svelte +++ b/src/lib/CustomSliderPicker.svelte @@ -1,6 +1,6 @@ +
+ + + + +
+
{/if} + {:else if band_slider_values.length == 1} +
+
+

Single band file metadata

+
MIN: {current_dif_band_metainfo['min']}
+
MAX: {current_dif_band_metainfo['max']}
+
Start: {current_metadata.timestamp_begin}
+
+
+ {:else} + SELECT BAND {/if} {/if}