From 84248d3baa2949d45c8cc8a25bd272bc2146faf2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Francisco=20Sanz-Garc=C3=ADa?= Date: Mon, 21 Oct 2024 22:20:05 +0200 Subject: [PATCH] New slider for instensity --- frontend/templates/frontend/index.html | 158 +++++++++++++++++-------- 1 file changed, 108 insertions(+), 50 deletions(-) diff --git a/frontend/templates/frontend/index.html b/frontend/templates/frontend/index.html index 80289c8..b34a752 100644 --- a/frontend/templates/frontend/index.html +++ b/frontend/templates/frontend/index.html @@ -36,7 +36,7 @@ width: 300px; } - #slider { + .slider { margin-top: 20px; margin: 0.5em; } @@ -54,14 +54,21 @@
Select Date Range
-
+
From:
To:
+
Select Intensity
+
+
+ From:
+ To:
- - + +
@@ -71,6 +78,7 @@
Select Date Range
const csrfToken = "{{ csrf_token }}"; let allData = []; let slider; // Declare slider variable outside of fetch + let sliderIntensity; // Declare slider variable outside of fetch // Initialize the Deck.gl map const deckgl = new deck.DeckGL({ @@ -109,6 +117,10 @@
Select Date Range
setSliderRange(allData); } + if(!sliderIntensity){ + setSliderIntensity(allData); + } + // Apply filter based on current slider range const [startTimestamp, endTimestamp] = slider.noUiSlider.get().map(v => new Date(v).getTime()); const filteredData = filterDataByTimestamp(startTimestamp, endTimestamp); @@ -126,52 +138,59 @@
Select Date Range
}); } + // Function to filter data by radiation value + function filterDataByRadiation(startRadiation, endRadiation) { + return allData.filter(measurement => { + return measurement.values.radiation >= startRadiation && measurement.values.radiation <= endRadiation; + }); + } + // Function to update the map with data // Function to update the map with data and color gradient based on radiation value -function updateMap(data) { - const points = data.map(measurement => { - // Define the radiation value range - const minRadiation = 50; - const maxRadiation = 100; // Radiation over 80 will be fully red - - // Clamp the radiation value to stay within the range - const radiation = Math.max(minRadiation, Math.min(maxRadiation, measurement.values.radiation)); - - // Calculate the interpolation factor (0 means fully green, 1 means fully red) - const t = (radiation - minRadiation) / (maxRadiation - minRadiation); - - // Interpolate between green and red - const color = [ - Math.round((1 - t) * 0 + t * 155 + 100), // Red channel (100 to 255) - Math.round((1 - t) * 155 + t * 0 + 100), // Green channel (255 to 100) - 100 // Blue channel is constant (100) - ]; - - return { - position: [measurement.longitude, measurement.latitude], - values: measurement.values, - dateTime: measurement.dateTime, - size: 10, - color: color // Use the interpolated color - }; - }); - - const scatterplotLayer = new deck.ScatterplotLayer({ - id: 'scatterplot-layer', - data: points, - getPosition: d => d.position, - getRadius: d => d.size, - getFillColor: d => d.color, - radiusMinPixels: 5, - radiusMaxPixels: 10, - pickable: true, - onHover: ({object, x, y}) => handleHover(object, x, y) - }); - - deckgl.setProps({ - layers: [scatterplotLayer] - }); -} + function updateMap(data) { + const points = data.map(measurement => { + // Define the radiation value range + const minRadiation = 50; + const maxRadiation = 100; // Radiation over 80 will be fully red + + // Clamp the radiation value to stay within the range + const radiation = Math.max(minRadiation, Math.min(maxRadiation, measurement.values.radiation)); + + // Calculate the interpolation factor (0 means fully green, 1 means fully red) + const t = (radiation - minRadiation) / (maxRadiation - minRadiation); + + // Interpolate between green and red + const color = [ + Math.round((1 - t) * 0 + t * 155 + 100), // Red channel (100 to 255) + Math.round((1 - t) * 155 + t * 0 + 100), // Green channel (255 to 100) + 100 // Blue channel is constant (100) + ]; + + return { + position: [measurement.longitude, measurement.latitude], + values: measurement.values, + dateTime: measurement.dateTime, + size: 10, + color: color // Use the interpolated color + }; + }); + + const scatterplotLayer = new deck.ScatterplotLayer({ + id: 'scatterplot-layer', + data: points, + getPosition: d => d.position, + getRadius: d => d.size, + getFillColor: d => d.color, + radiusMinPixels: 5, + radiusMaxPixels: 10, + pickable: true, + onHover: ({ object, x, y }) => handleHover(object, x, y) + }); + + deckgl.setProps({ + layers: [scatterplotLayer] + }); + } // Initialize the datetime range slider const startValueEl = document.getElementById('start-value'); @@ -213,14 +232,53 @@
Select Date Range
}); } - // Function to handle hover and display popup + // Initialize the intensity range slider + const intensityStartValueEl = document.getElementById('intensity-start-value'); + const intensityEndValueEl = document.getElementById('intensity-end-value'); + + function setSliderIntensity(data) { + // Get the minimum and maximum timestamp from the data + const minRadiation = Math.min(...data.map(item => item.values.radiation)); + const maxRadiation = Math.max(...data.map(item => item.values.radiation)); + sliderIntensity = document.getElementById('slider-intensity'); // Initialize slider + + noUiSlider.create(sliderIntensity, { + start: [minRadiation, maxRadiation], + connect: true, + range: { + min: minRadiation, + max: maxRadiation + }, + tooltips: false, + format: { + to: value => value, // Display as readable datetime + from: value => value + } + }); + + // Update slider labels and filter data + sliderIntensity.noUiSlider.on('update', function (values, handle) { + const startRadiation = values[0]; + const endRadiation = values[1]; + + // Update labels + intensityStartValueEl.innerHTML = startRadiation; + intensityEndValueEl.innerHTML = endRadiation; + + // Filter data and update the map + const filteredData = filterDataByRadiation(startRadiation, endRadiation); + updateMap(filteredData); + }); + } + + // Function to handle hover and display popup function handleHover(object, x, y) { const popup = document.getElementById('popup'); const popupContent = document.getElementById('popup-content'); if (object) { // check if the object is valid - if(!object.values) { + if (!object.values) { object.values = {}; } popupContent.innerHTML = `