Merge pull request #14 from TIPPECC/6-display-geotiff-on-map

implemented ColorGradientPicker and new tif_map #6
TIPPECC · Jul 3, 2024 · 1dba26e · 1dba26e
2 parents 058767b + 7b95df1
commit 1dba26e
Show file tree

Hide file tree

Showing 5 changed files with 296 additions and 39 deletions.
diff --git a/src/lib/ColorGradientPicker.svelte b/src/lib/ColorGradientPicker.svelte
@@ -43,10 +43,26 @@
 	export function set_bounds(min = cmin, max = cmax) {
 		cmin = min;
 		cmax = max;
-		set_value_stops();
+		set_color_stops();
 		console.log('SETTING BOUNDS: ', cmin, ' ', cmax);
 	}
 
+	function set_custom_bounds(e?) {
+		try {
+			var custom_abs_max = Math.abs(parseFloat(e.target.value));
+			if (isNaN(custom_abs_max)) {
+				throw new Error('NaN value entered as custom abs max.');
+			}
+			cmin = -custom_abs_max;
+			cmax = custom_abs_max;
+			console.log('SETTING BOUNDS: ', cmin, ' ', cmax);
+			console.log('SETTING BOUNDS: ', typeof cmin, ' ', typeof cmax);
+			set_color_stops();
+		} catch (error) {
+			console.log(error);
+		}
+	}
+
 	function set_color_scheme(e?) {
 		if (!e) {
 			return;
@@ -160,11 +176,10 @@
 		input_steps = steps;
 
 		set_color_stops();
-		set_value_stops();
 	}
 
 	set_color_stops();
-	get_color_stops_from_middle(-10, 100);
+	// get_color_stops_from_middle(-10, 100);
 
 	function set_color_stops() {
 		if (odd_middle_mode) {
@@ -260,10 +275,10 @@
 	}
 </script>
 
-<div class="p-4 {horizontal ? 'w-[640px]' : 'w-[380px]'}">
+<div class="p-4 {horizontal ? 'w-[480px]' : 'w-[380px]'}">
 	<div
 		class="grid grid-cols-1 {horizontal
-			? 'grid-cols-1 w-[640px] place-items-center'
+			? 'grid-cols-1 w-[480px] place-items-center'
 			: 'grid-cols-2 w-[380px]'}"
 	>
 		<div>
@@ -304,7 +319,15 @@
 					</button>
 				{/if}
 			</div>
-			<div class="flex">
+			<div class="flex mt-1">
+				<label for="custom_bounds_input" class="variant-outline-tertiary px-1">Custom Max:</label>
+				<input
+					id="custom_bounds_input"
+					class="text-black ml-1 w-24"
+					on:change={set_custom_bounds}
+				/>
+			</div>
+			<div class="flex mt-1">
 				<input
 					on:change={change_steps}
 					bind:value={input_steps}
@@ -334,6 +357,7 @@
 				<div class={horizontal ? 'flex items-center mt-2' : ''}>
 					{#key color_stops}
 						{#each color_stops as color, i}
+							<!-- {cmin}:{value_stops[i]}:{(cmin > value_stops[i])}:{typeof(value_stops[i])}:{typeof(cmin)} -->
 							<svg width="20" height="20">
 								{#if show_in_bounds && (cmin > value_stops[i] || cmax < value_stops[i])}
 									<rect width="20" height="20" fill={'#444444'} x="0" y="0" />

diff --git a/src/lib/CustomSlider.svelte b/src/lib/CustomSlider.svelte
@@ -1,13 +1,13 @@
-<script>
+<script lang="ts">
 	// Define custom slider steps
 	export let valMap;
-	export let onSliderChangeFunction;
+	export let onSliderChangeFunction = onSliderChange;
 	// const valMap = [0, 1, 3, 5, 10, 15, 20, 30, 50];
 
 	// This is the default position of the slider
 	export let sliderValue = 0;
 
-	function onSliderChange(event) {
+	function onSliderChange(event?) {
 		// Update the internal slider value based on input change
 		sliderValue = event.target.value;
 		console.log('DRAG END');
@@ -39,6 +39,7 @@
 
 	<div class="mt-1">
 		Selected Value: {valMap[sliderValue]}
+		SliderValue: {sliderValue}
 	</div>
 {/if}
 

diff --git a/src/lib/CustomSliderPicker.svelte b/src/lib/CustomSliderPicker.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+	// Define custom slider steps
+	export let valMap: any[];
+	export let onSliderChangeFunction = onSliderChange;
+	// const valMap = [0, 1, 3, 5, 10, 15, 20, 30, 50];
+
+	// This is the default position of the slider
+	export let slider_index: number = 0;
+	export let slider_value: number = 0;
+
+	function onSliderChange(e?) {
+		// Update the internal slider value based on input change
+		slider_index = e.target.value;
+		if (valMap) {
+			slider_value = valMap[slider_index];
+			dispatch('slider_changed', {});
+		}
+	}
+
+	// var intervalId = window.setInterval(function(){
+	// 	if (slider_index < valMap.length){
+	// 		slider_index += 1;
+	// 		dispatch('slider_changed', {});
+	// 	}
+	// }, 5000);
+</script>
+
+{#if valMap != undefined}
+	<div class="variant-outline-tertiary mt-2 px-20">
+		<h4 class="h4 text-center">Bandslider</h4>
+		<div class="slider-container mt-6">
+			<!-- Slider input with custom steps -->
+			<input
+				type="range"
+				class="slider"
+				min="0"
+				max={valMap.length - 1}
+				step="1"
+				bind:value={slider_index}
+				on:change={onSliderChangeFunction}
+			/>
+
+			<!-- Labels for the slider steps -->
+			{#each valMap as val, idx}
+				{#if idx % 10 == 0 || idx == valMap.length - 1}
+					<div class="slider-label" style="left: {(idx / (valMap.length - 1)) * 100}%">
+						{val}
+					</div>
+				{/if}
+			{/each}
+		</div>
+		<div class="grid grid-cols-1 place-items-center">
+			Value: {valMap[slider_index]} || Band: {slider_index}
+		</div>
+	</div>
+{/if}
+
+<style>
+	/* Slider styling */
+	.slider-container {
+		position: relative;
+		height: 40px;
+	}
+
+	.slider {
+		width: 100%;
+		background: transparent;
+		position: relative;
+		height: 20px;
+	}
+
+	.slider::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		background: #4caf50;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		cursor: pointer;
+	}
+
+	.slider-label {
+		position: absolute;
+		top: -20px;
+		transform: translateX(-50%);
+	}
+</style>