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..384cd586 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 +125,7 @@ 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 090b5861..21edcb6b 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(foldertype, true) .then((result) => { folder_data = result; console.log(folder_data); @@ -70,7 +70,6 @@ onMount(() => { initialize_map(); - generate_openlayers_case_stops(cg_picker.get_color_stops()); }); function initialize_map() { @@ -126,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(); @@ -139,41 +139,57 @@ 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(); 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); 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])); + 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); + + // 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); 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; } - function createTileLayer_singleBand() {} - function on_slider_change(e?) { selected_band = parseInt(slider_index) + 1; refresh_band_metadata(); @@ -186,12 +202,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 +216,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 +231,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 +245,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 +277,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', @@ -260,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: { @@ -287,13 +319,65 @@ // map.setView(layer.getSource().getView()); map.setView(base_view); } + + /** + * @param {string} new_type + */ + function set_type(new_type) { + if (new_type == 'water_budget') { + foldertype = new_type; + } else if (new_type == 'water_budget_bias') { + foldertype = new_type; + } else if (new_type == 'kariba') { + foldertype = new_type; + } else if (new_type == 'vaal') { + foldertype = new_type; + } + + _fetch_foldercontent_by_type(foldertype, true) + .then((result) => { + folder_data = result; + }) + .catch((error) => { + console.log(error); + }); + } -
- +
+ + + + +
+ +
+ + + + + {#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} + {: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} 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();