From e9e325d906444e5495768fc62f213f60d6d16cb2 Mon Sep 17 00:00:00 2001 From: Kalabint Date: Fri, 12 Jul 2024 17:55:03 +0200 Subject: [PATCH 1/8] Changed Color Mapping from Theme to TurboColorRamp --- src/common/util/colors.js | 23 +++++++---------------- src/map/MapRoutePath.js | 3 --- src/map/MapRoutePoints.js | 4 +--- 3 files changed, 8 insertions(+), 22 deletions(-) diff --git a/src/common/util/colors.js b/src/common/util/colors.js index 1cb35c04fe..1575794256 100644 --- a/src/common/util/colors.js +++ b/src/common/util/colors.js @@ -1,23 +1,14 @@ -import { decomposeColor } from '@mui/material'; +const turboColors = [ + [48,18,59],[50,21,67],[51,24,74],[52,27,81],[53,30,88],[54,33,95],[55,36,102],[56,39,109],[57,42,115],[58,45,121],[59,47,128],[60,50,134],[61,53,139],[62,56,145],[63,59,151],[63,62,156],[64,64,162],[65,67,167],[65,70,172],[66,73,177],[66,75,181],[67,78,186],[68,81,191],[68,84,195],[68,86,199],[69,89,203],[69,92,207],[69,94,211],[70,97,214],[70,100,218],[70,102,221],[70,105,224],[70,107,227],[71,110,230],[71,113,233],[71,115,235],[71,118,238],[71,120,240],[71,123,242],[70,125,244],[70,128,246],[70,130,248],[70,133,250],[70,135,251],[69,138,252],[69,140,253],[68,143,254],[67,145,254],[66,148,255],[65,150,255],[64,153,255],[62,155,254],[61,158,254],[59,160,253],[58,163,252],[56,165,251],[55,168,250],[53,171,248],[51,173,247],[49,175,245],[47,178,244],[46,180,242],[44,183,240],[42,185,238],[40,188,235],[39,190,233],[37,192,231],[35,195,228],[34,197,226],[32,199,223],[31,201,221],[30,203,218],[28,205,216],[27,208,213],[26,210,210],[26,212,208],[25,213,205],[24,215,202],[24,217,200],[24,219,197],[24,221,194],[24,222,192],[24,224,189],[25,226,187],[25,227,185],[26,228,182],[28,230,180],[29,231,178],[31,233,175],[32,234,172],[34,235,170],[37,236,167],[39,238,164],[42,239,161],[44,240,158],[47,241,155],[50,242,152],[53,243,148],[56,244,145],[60,245,142],[63,246,138],[67,247,135],[70,248,132],[74,248,128],[78,249,125],[82,250,122],[85,250,118],[89,251,115],[93,252,111],[97,252,108],[101,253,105],[105,253,102],[109,254,98],[113,254,95],[117,254,92],[121,254,89],[125,255,86],[128,255,83],[132,255,81],[136,255,78],[139,255,75],[143,255,73],[146,255,71],[150,254,68],[153,254,66],[156,254,64],[159,253,63],[161,253,61],[164,252,60],[167,252,58],[169,251,57],[172,251,56],[175,250,55],[177,249,54],[180,248,54],[183,247,53],[185,246,53],[188,245,52],[190,244,52],[193,243,52],[195,241,52],[198,240,52],[200,239,52],[203,237,52],[205,236,52],[208,234,52],[210,233,53],[212,231,53],[215,229,53],[217,228,54],[219,226,54],[221,224,55],[223,223,55],[225,221,55],[227,219,56],[229,217,56],[231,215,57],[233,213,57],[235,211,57],[236,209,58],[238,207,58],[239,205,58],[241,203,58],[242,201,58],[244,199,58],[245,197,58],[246,195,58],[247,193,58],[248,190,57],[249,188,57],[250,186,57],[251,184,56],[251,182,55],[252,179,54],[252,177,54],[253,174,53],[253,172,52],[254,169,51],[254,167,50],[254,164,49],[254,161,48],[254,158,47],[254,155,45],[254,153,44],[254,150,43],[254,147,42],[254,144,41],[253,141,39],[253,138,38],[252,135,37],[252,132,35],[251,129,34],[251,126,33],[250,123,31],[249,120,30],[249,117,29],[248,114,28],[247,111,26],[246,108,25],[245,105,24],[244,102,23],[243,99,21],[242,96,20],[241,93,19],[240,91,18],[239,88,17],[237,85,16],[236,83,15],[235,80,14],[234,78,13],[232,75,12],[231,73,12],[229,71,11],[228,69,10],[226,67,10],[225,65,9],[223,63,8],[221,61,8],[220,59,7],[218,57,7],[216,55,6],[214,53,6],[212,51,5],[210,49,5],[208,47,5],[206,45,4],[204,43,4],[202,42,4],[200,40,3],[197,38,3],[195,37,3],[193,35,2],[190,33,2],[188,32,2],[185,30,2],[183,29,2],[180,27,1],[178,26,1],[175,24,1],[172,23,1],[169,22,1],[167,20,1],[164,19,1],[161,18,1],[158,16,1],[155,15,1],[152,14,1],[149,13,1],[146,11,1],[142,10,1],[139,9,2],[136,8,2],[133,7,2],[129,6,2],[126,5,2],[122,4,3] +]; -export const interpolateColor = (color1, color2, factor) => { +export const getSpeedColor = (speed, max) => { + let factor = speed / max; if (factor > 1) factor = 1; if (factor < 0) factor = 0; - const c1 = decomposeColor(color1).values; - const c2 = decomposeColor(color2).values; - - const r = Math.round(c1[0] + factor * (c2[0] - c1[0])); - const g = Math.round(c1[1] + factor * (c2[1] - c1[1])); - const b = Math.round(c1[2] + factor * (c2[2] - c1[2])); + const index = Math.floor(factor * (turboColors.length - 1)); + const [r, g, b] = turboColors[index]; return `rgb(${r}, ${g}, ${b})`; }; - -export const getSpeedColor = (color1, color2, color3, speed, max) => { - const factor = speed / max; - if (factor <= 0.5) { - return interpolateColor(color1, color2, factor * 2); - } - return interpolateColor(color2, color3, (factor - 0.5) * 2); -}; diff --git a/src/map/MapRoutePath.js b/src/map/MapRoutePath.js index 716a4bd122..6338e47918 100644 --- a/src/map/MapRoutePath.js +++ b/src/map/MapRoutePath.js @@ -73,9 +73,6 @@ const MapRoutePath = ({ positions }) => { }, properties: { color: reportColor || getSpeedColor( - theme.palette.success.main, - theme.palette.warning.main, - theme.palette.error.main, positions[i + 1].speed, maxSpeed, ), diff --git a/src/map/MapRoutePoints.js b/src/map/MapRoutePoints.js index 929a0d5069..ee216aec9e 100644 --- a/src/map/MapRoutePoints.js +++ b/src/map/MapRoutePoints.js @@ -1,11 +1,9 @@ import { useId, useCallback, useEffect } from 'react'; -import { useTheme } from '@mui/styles'; import { map } from './core/MapView'; import { getSpeedColor } from '../common/util/colors'; const MapRoutePoints = ({ positions, onClick }) => { const id = useId(); - const theme = useTheme(); const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer'; const onMouseLeave = () => map.getCanvas().style.cursor = ''; @@ -72,7 +70,7 @@ const MapRoutePoints = ({ positions, onClick }) => { index, id: position.id, rotation: position.course, - color: getSpeedColor(theme.palette.success.main, theme.palette.warning.main, theme.palette.error.main, position.speed, maxSpeed), + color: getSpeedColor(position.speed, maxSpeed), }, })), }); From d0ac808dfd2e263158eb57dd5c310486ea3bf0cc Mon Sep 17 00:00:00 2001 From: Kalabint Date: Mon, 30 Sep 2024 15:01:14 +0200 Subject: [PATCH 2/8] Switch to dynamic created Turbo Colormap Switch to dynamic created Turbo Colormap - Original at https://gist.github.com/mikhailov-work/0d177465a8151eb6ede1768d51d476c7 --- src/common/util/colors.js | 81 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 75 insertions(+), 6 deletions(-) diff --git a/src/common/util/colors.js b/src/common/util/colors.js index 1575794256..0bedbed07a 100644 --- a/src/common/util/colors.js +++ b/src/common/util/colors.js @@ -1,14 +1,83 @@ -const turboColors = [ - [48,18,59],[50,21,67],[51,24,74],[52,27,81],[53,30,88],[54,33,95],[55,36,102],[56,39,109],[57,42,115],[58,45,121],[59,47,128],[60,50,134],[61,53,139],[62,56,145],[63,59,151],[63,62,156],[64,64,162],[65,67,167],[65,70,172],[66,73,177],[66,75,181],[67,78,186],[68,81,191],[68,84,195],[68,86,199],[69,89,203],[69,92,207],[69,94,211],[70,97,214],[70,100,218],[70,102,221],[70,105,224],[70,107,227],[71,110,230],[71,113,233],[71,115,235],[71,118,238],[71,120,240],[71,123,242],[70,125,244],[70,128,246],[70,130,248],[70,133,250],[70,135,251],[69,138,252],[69,140,253],[68,143,254],[67,145,254],[66,148,255],[65,150,255],[64,153,255],[62,155,254],[61,158,254],[59,160,253],[58,163,252],[56,165,251],[55,168,250],[53,171,248],[51,173,247],[49,175,245],[47,178,244],[46,180,242],[44,183,240],[42,185,238],[40,188,235],[39,190,233],[37,192,231],[35,195,228],[34,197,226],[32,199,223],[31,201,221],[30,203,218],[28,205,216],[27,208,213],[26,210,210],[26,212,208],[25,213,205],[24,215,202],[24,217,200],[24,219,197],[24,221,194],[24,222,192],[24,224,189],[25,226,187],[25,227,185],[26,228,182],[28,230,180],[29,231,178],[31,233,175],[32,234,172],[34,235,170],[37,236,167],[39,238,164],[42,239,161],[44,240,158],[47,241,155],[50,242,152],[53,243,148],[56,244,145],[60,245,142],[63,246,138],[67,247,135],[70,248,132],[74,248,128],[78,249,125],[82,250,122],[85,250,118],[89,251,115],[93,252,111],[97,252,108],[101,253,105],[105,253,102],[109,254,98],[113,254,95],[117,254,92],[121,254,89],[125,255,86],[128,255,83],[132,255,81],[136,255,78],[139,255,75],[143,255,73],[146,255,71],[150,254,68],[153,254,66],[156,254,64],[159,253,63],[161,253,61],[164,252,60],[167,252,58],[169,251,57],[172,251,56],[175,250,55],[177,249,54],[180,248,54],[183,247,53],[185,246,53],[188,245,52],[190,244,52],[193,243,52],[195,241,52],[198,240,52],[200,239,52],[203,237,52],[205,236,52],[208,234,52],[210,233,53],[212,231,53],[215,229,53],[217,228,54],[219,226,54],[221,224,55],[223,223,55],[225,221,55],[227,219,56],[229,217,56],[231,215,57],[233,213,57],[235,211,57],[236,209,58],[238,207,58],[239,205,58],[241,203,58],[242,201,58],[244,199,58],[245,197,58],[246,195,58],[247,193,58],[248,190,57],[249,188,57],[250,186,57],[251,184,56],[251,182,55],[252,179,54],[252,177,54],[253,174,53],[253,172,52],[254,169,51],[254,167,50],[254,164,49],[254,161,48],[254,158,47],[254,155,45],[254,153,44],[254,150,43],[254,147,42],[254,144,41],[253,141,39],[253,138,38],[252,135,37],[252,132,35],[251,129,34],[251,126,33],[250,123,31],[249,120,30],[249,117,29],[248,114,28],[247,111,26],[246,108,25],[245,105,24],[244,102,23],[243,99,21],[242,96,20],[241,93,19],[240,91,18],[239,88,17],[237,85,16],[236,83,15],[235,80,14],[234,78,13],[232,75,12],[231,73,12],[229,71,11],[228,69,10],[226,67,10],[225,65,9],[223,63,8],[221,61,8],[220,59,7],[218,57,7],[216,55,6],[214,53,6],[212,51,5],[210,49,5],[208,47,5],[206,45,4],[204,43,4],[202,42,4],[200,40,3],[197,38,3],[195,37,3],[193,35,2],[190,33,2],[188,32,2],[185,30,2],[183,29,2],[180,27,1],[178,26,1],[175,24,1],[172,23,1],[169,22,1],[167,20,1],[164,19,1],[161,18,1],[158,16,1],[155,15,1],[152,14,1],[149,13,1],[146,11,1],[142,10,1],[139,9,2],[136,8,2],[133,7,2],[129,6,2],[126,5,2],[122,4,3] -]; +/* + * Polynomial approximation for the Turbo colormap + * Original GLSL implementation: + * https://gist.github.com/mikhailov-work/0d177465a8151eb6ede1768d51d476c7 + * Original LUT: + * https://gist.github.com/mikhailov-work/ee72ba4191942acecc03fe6da94fc73f + * + * Adapted to JavaScript by Kalabint + * + * Authors: + * Colormap Design: Anton Mikhailov (mikhailov@google.com) + * GLSL Approximation: Ruofei Du (ruofei@google.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * SPDX-License-Identifier: Apache-2.0 + */ + +function interpolateTurbo(t) { + t = Math.max(0, Math.min(1, t)); // Clamp t to [0, 1] + const r = Math.round(255 * interpolateTurbo_srgb_fn_r(t)); + const g = Math.round(255 * interpolateTurbo_srgb_fn_g(t)); + const b = Math.round(255 * interpolateTurbo_srgb_fn_b(t)); + return [r, g, b]; +} + +function interpolateTurbo_srgb_fn_r(t) { + const t2 = t * t; + const t3 = t2 * t; + const t4 = t2 * t2; + const t5 = t3 * t2; + return ( + 0.13572138 + + 4.61539260 * t - + 42.66032258 * t2 + + 132.13108234 * t3 - + 152.94239396 * t4 + + 59.28637943 * t5 + ); +} + +function interpolateTurbo_srgb_fn_g(t) { + const t2 = t * t; + const t3 = t2 * t; + const t4 = t2 * t2; + const t5 = t3 * t2; + return ( + 0.09140261 + + 2.19418839 * t + + 4.84296658 * t2 - + 14.18503333 * t3 + + 4.27729857 * t4 + + 2.82956604 * t5 + ); +} + +function interpolateTurbo_srgb_fn_b(t) { + const t2 = t * t; + const t3 = t2 * t; + const t4 = t2 * t2; + const t5 = t3 * t2; + return ( + 0.10667330 + + 12.64194608 * t - + 60.58204836 * t2 + + 110.36276771 * t3 - + 89.90310912 * t4 + + 27.34824973 * t5 + ); +} export const getSpeedColor = (speed, max) => { let factor = speed / max; if (factor > 1) factor = 1; if (factor < 0) factor = 0; - const index = Math.floor(factor * (turboColors.length - 1)); - const [r, g, b] = turboColors[index]; - + const [r, g, b] = interpolateTurbo(factor); return `rgb(${r}, ${g}, ${b})`; }; From 7cad1f5c70829d5e2dc61722b983eceb9cb90969 Mon Sep 17 00:00:00 2001 From: Kalabint Date: Mon, 30 Sep 2024 16:45:20 +0200 Subject: [PATCH 3/8] Simplyfied colors.js --- src/common/util/colors.js | 100 +++++++++----------------------------- 1 file changed, 24 insertions(+), 76 deletions(-) diff --git a/src/common/util/colors.js b/src/common/util/colors.js index 0bedbed07a..7dc61aadb8 100644 --- a/src/common/util/colors.js +++ b/src/common/util/colors.js @@ -1,83 +1,31 @@ -/* - * Polynomial approximation for the Turbo colormap - * Original GLSL implementation: - * https://gist.github.com/mikhailov-work/0d177465a8151eb6ede1768d51d476c7 - * Original LUT: - * https://gist.github.com/mikhailov-work/ee72ba4191942acecc03fe6da94fc73f - * - * Adapted to JavaScript by Kalabint - * - * Authors: - * Colormap Design: Anton Mikhailov (mikhailov@google.com) - * GLSL Approximation: Ruofei Du (ruofei@google.com) - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * SPDX-License-Identifier: Apache-2.0 - */ - -function interpolateTurbo(t) { - t = Math.max(0, Math.min(1, t)); // Clamp t to [0, 1] - const r = Math.round(255 * interpolateTurbo_srgb_fn_r(t)); - const g = Math.round(255 * interpolateTurbo_srgb_fn_g(t)); - const b = Math.round(255 * interpolateTurbo_srgb_fn_b(t)); - return [r, g, b]; -} - -function interpolateTurbo_srgb_fn_r(t) { - const t2 = t * t; - const t3 = t2 * t; - const t4 = t2 * t2; - const t5 = t3 * t2; - return ( - 0.13572138 + - 4.61539260 * t - - 42.66032258 * t2 + - 132.13108234 * t3 - - 152.94239396 * t4 + - 59.28637943 * t5 - ); -} +// Turbo Colormap +const turboPolynomials = { + r: [0.13572138, 4.61539260, -42.66032258, 132.13108234, -152.94239396, 59.28637943], + g: [0.09140261, 2.19418839, 4.84296658, -14.18503333, 4.27729857, 2.82956604], + b: [0.10667330, 12.64194608, -60.58204836, 110.36276771, -89.90310912, 27.34824973] +}; -function interpolateTurbo_srgb_fn_g(t) { - const t2 = t * t; - const t3 = t2 * t; - const t4 = t2 * t2; - const t5 = t3 * t2; - return ( - 0.09140261 + - 2.19418839 * t + - 4.84296658 * t2 - - 14.18503333 * t3 + - 4.27729857 * t4 + - 2.82956604 * t5 - ); +function interpolateChannel(t, coeffs) { + let result = 0; + let tPower = 1; + for (let i = 0; i < coeffs.length; i++) { + result += coeffs[i] * tPower; + tPower *= t; + } + return Math.max(0, Math.min(1, result)); } -function interpolateTurbo_srgb_fn_b(t) { - const t2 = t * t; - const t3 = t2 * t; - const t4 = t2 * t2; - const t5 = t3 * t2; - return ( - 0.10667330 + - 12.64194608 * t - - 60.58204836 * t2 + - 110.36276771 * t3 - - 89.90310912 * t4 + - 27.34824973 * t5 - ); +function interpolateTurbo(t) { + t = Math.max(0, Math.min(1, t)); + return [ + Math.round(255 * interpolateChannel(t, turboPolynomials.r)), + Math.round(255 * interpolateChannel(t, turboPolynomials.g)), + Math.round(255 * interpolateChannel(t, turboPolynomials.b)) + ]; } -export const getSpeedColor = (speed, max) => { - let factor = speed / max; - if (factor > 1) factor = 1; - if (factor < 0) factor = 0; - +export function getSpeedColor(speed, max) { + const factor = Math.max(0, Math.min(1, speed / max)); const [r, g, b] = interpolateTurbo(factor); return `rgb(${r}, ${g}, ${b})`; -}; +} From 12c8aac607cece8d3229f07a5ebef00446ff63b4 Mon Sep 17 00:00:00 2001 From: Kalabint Date: Mon, 30 Sep 2024 19:33:11 +0000 Subject: [PATCH 4/8] Corrected lint issues --- src/common/util/colors.js | 30 +++++++++++++++--------------- src/map/MapRoutePath.js | 2 +- src/map/MapRoutePoints.js | 2 +- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/common/util/colors.js b/src/common/util/colors.js index 7dc61aadb8..440e9107af 100644 --- a/src/common/util/colors.js +++ b/src/common/util/colors.js @@ -2,30 +2,30 @@ const turboPolynomials = { r: [0.13572138, 4.61539260, -42.66032258, 132.13108234, -152.94239396, 59.28637943], g: [0.09140261, 2.19418839, 4.84296658, -14.18503333, 4.27729857, 2.82956604], - b: [0.10667330, 12.64194608, -60.58204836, 110.36276771, -89.90310912, 27.34824973] + b: [0.10667330, 12.64194608, -60.58204836, 110.36276771, -89.90310912, 27.34824973], }; -function interpolateChannel(t, coeffs) { +function interpolateChannel(normalizedValue, coeffs) { let result = 0; - let tPower = 1; - for (let i = 0; i < coeffs.length; i++) { - result += coeffs[i] * tPower; - tPower *= t; + for (let i = 0; i < coeffs.length; i += 1) { + result += coeffs[i] * (normalizedValue ** i); } return Math.max(0, Math.min(1, result)); } -function interpolateTurbo(t) { - t = Math.max(0, Math.min(1, t)); +function interpolateTurbo(value) { + const normalizedValue = Math.max(0, Math.min(1, value)); return [ - Math.round(255 * interpolateChannel(t, turboPolynomials.r)), - Math.round(255 * interpolateChannel(t, turboPolynomials.g)), - Math.round(255 * interpolateChannel(t, turboPolynomials.b)) + Math.round(255 * interpolateChannel(normalizedValue, turboPolynomials.r)), + Math.round(255 * interpolateChannel(normalizedValue, turboPolynomials.g)), + Math.round(255 * interpolateChannel(normalizedValue, turboPolynomials.b)), ]; } -export function getSpeedColor(speed, max) { - const factor = Math.max(0, Math.min(1, speed / max)); - const [r, g, b] = interpolateTurbo(factor); +const getSpeedColor = (speed, maxSpeed) => { + const normalizedSpeed = Math.max(0, Math.min(1, speed / maxSpeed)); + const [r, g, b] = interpolateTurbo(normalizedSpeed); return `rgb(${r}, ${g}, ${b})`; -} +}; + +export default getSpeedColor; diff --git a/src/map/MapRoutePath.js b/src/map/MapRoutePath.js index 6338e47918..ae905676ae 100644 --- a/src/map/MapRoutePath.js +++ b/src/map/MapRoutePath.js @@ -2,7 +2,7 @@ import { useTheme } from '@mui/styles'; import { useId, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { map } from './core/MapView'; -import { getSpeedColor } from '../common/util/colors'; +import getSpeedColor from '../common/util/colors'; const MapRoutePath = ({ positions }) => { const id = useId(); diff --git a/src/map/MapRoutePoints.js b/src/map/MapRoutePoints.js index ee216aec9e..7ee4dc6363 100644 --- a/src/map/MapRoutePoints.js +++ b/src/map/MapRoutePoints.js @@ -1,6 +1,6 @@ import { useId, useCallback, useEffect } from 'react'; import { map } from './core/MapView'; -import { getSpeedColor } from '../common/util/colors'; +import getSpeedColor from '../common/util/colors'; const MapRoutePoints = ({ positions, onClick }) => { const id = useId(); From 99eec1bf8a1943bf9ef09810287896ec2ec92d9b Mon Sep 17 00:00:00 2001 From: Kalabint Date: Mon, 30 Sep 2024 23:49:53 +0200 Subject: [PATCH 5/8] Align code to lambda syntax --- src/common/util/colors.js | 12 +++++------- src/map/MapRoutePath.js | 2 +- src/map/MapRoutePoints.js | 2 +- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/common/util/colors.js b/src/common/util/colors.js index 440e9107af..4e8ef70664 100644 --- a/src/common/util/colors.js +++ b/src/common/util/colors.js @@ -5,27 +5,25 @@ const turboPolynomials = { b: [0.10667330, 12.64194608, -60.58204836, 110.36276771, -89.90310912, 27.34824973], }; -function interpolateChannel(normalizedValue, coeffs) { +const interpolateChannel = (normalizedValue, coeffs) => { let result = 0; for (let i = 0; i < coeffs.length; i += 1) { result += coeffs[i] * (normalizedValue ** i); } return Math.max(0, Math.min(1, result)); -} +}; -function interpolateTurbo(value) { +const interpolateTurbo = (value) => { const normalizedValue = Math.max(0, Math.min(1, value)); return [ Math.round(255 * interpolateChannel(normalizedValue, turboPolynomials.r)), Math.round(255 * interpolateChannel(normalizedValue, turboPolynomials.g)), Math.round(255 * interpolateChannel(normalizedValue, turboPolynomials.b)), ]; -} +}; -const getSpeedColor = (speed, maxSpeed) => { +export const getSpeedColor = (speed, maxSpeed) => { const normalizedSpeed = Math.max(0, Math.min(1, speed / maxSpeed)); const [r, g, b] = interpolateTurbo(normalizedSpeed); return `rgb(${r}, ${g}, ${b})`; }; - -export default getSpeedColor; diff --git a/src/map/MapRoutePath.js b/src/map/MapRoutePath.js index ae905676ae..6338e47918 100644 --- a/src/map/MapRoutePath.js +++ b/src/map/MapRoutePath.js @@ -2,7 +2,7 @@ import { useTheme } from '@mui/styles'; import { useId, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { map } from './core/MapView'; -import getSpeedColor from '../common/util/colors'; +import { getSpeedColor } from '../common/util/colors'; const MapRoutePath = ({ positions }) => { const id = useId(); diff --git a/src/map/MapRoutePoints.js b/src/map/MapRoutePoints.js index 7ee4dc6363..ee216aec9e 100644 --- a/src/map/MapRoutePoints.js +++ b/src/map/MapRoutePoints.js @@ -1,6 +1,6 @@ import { useId, useCallback, useEffect } from 'react'; import { map } from './core/MapView'; -import getSpeedColor from '../common/util/colors'; +import { getSpeedColor } from '../common/util/colors'; const MapRoutePoints = ({ positions, onClick }) => { const id = useId(); From bc695725ad1f62dcd1afcdc5ad2e9bb45e2b2917 Mon Sep 17 00:00:00 2001 From: Kalabint Date: Mon, 30 Sep 2024 23:55:45 +0200 Subject: [PATCH 6/8] Adressed getSpeedColor export lint messages --- src/common/util/colors.js | 4 +++- src/map/MapRoutePath.js | 2 +- src/map/MapRoutePoints.js | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/common/util/colors.js b/src/common/util/colors.js index 4e8ef70664..535540e309 100644 --- a/src/common/util/colors.js +++ b/src/common/util/colors.js @@ -22,8 +22,10 @@ const interpolateTurbo = (value) => { ]; }; -export const getSpeedColor = (speed, maxSpeed) => { +const getSpeedColor = (speed, maxSpeed) => { const normalizedSpeed = Math.max(0, Math.min(1, speed / maxSpeed)); const [r, g, b] = interpolateTurbo(normalizedSpeed); return `rgb(${r}, ${g}, ${b})`; }; + +export default getSpeedColor; diff --git a/src/map/MapRoutePath.js b/src/map/MapRoutePath.js index 6338e47918..ae905676ae 100644 --- a/src/map/MapRoutePath.js +++ b/src/map/MapRoutePath.js @@ -2,7 +2,7 @@ import { useTheme } from '@mui/styles'; import { useId, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { map } from './core/MapView'; -import { getSpeedColor } from '../common/util/colors'; +import getSpeedColor from '../common/util/colors'; const MapRoutePath = ({ positions }) => { const id = useId(); diff --git a/src/map/MapRoutePoints.js b/src/map/MapRoutePoints.js index ee216aec9e..7ee4dc6363 100644 --- a/src/map/MapRoutePoints.js +++ b/src/map/MapRoutePoints.js @@ -1,6 +1,6 @@ import { useId, useCallback, useEffect } from 'react'; import { map } from './core/MapView'; -import { getSpeedColor } from '../common/util/colors'; +import getSpeedColor from '../common/util/colors'; const MapRoutePoints = ({ positions, onClick }) => { const id = useId(); From e9ac536764160cf3875f17df4f1093fcc0e4337e Mon Sep 17 00:00:00 2001 From: Kalabint Date: Tue, 1 Oct 2024 01:08:39 +0200 Subject: [PATCH 7/8] Added max device speed attribute --- src/common/attributes/useCommonUserAttributes.js | 4 ++++ src/map/MapRoutePath.js | 16 ++++++++++++---- src/map/MapRoutePoints.js | 16 +++++++++++++--- src/resources/l10n/en.json | 3 ++- 4 files changed, 31 insertions(+), 8 deletions(-) diff --git a/src/common/attributes/useCommonUserAttributes.js b/src/common/attributes/useCommonUserAttributes.js index e86e6b6b33..759bd96ebd 100644 --- a/src/common/attributes/useCommonUserAttributes.js +++ b/src/common/attributes/useCommonUserAttributes.js @@ -145,4 +145,8 @@ export default (t) => useMemo(() => ({ name: t('attributeNavigationAppTitle'), type: 'string', }, + 'ui.MaxExpectedDeviceSpeed': { + name: t('attributeUIMaxExpectedDeviceSpeed'), + type: 'number', + }, }), [t]); diff --git a/src/map/MapRoutePath.js b/src/map/MapRoutePath.js index ae905676ae..514a18c703 100644 --- a/src/map/MapRoutePath.js +++ b/src/map/MapRoutePath.js @@ -1,14 +1,16 @@ import { useTheme } from '@mui/styles'; -import { useId, useEffect } from 'react'; +import { useId, useEffect, useMemo } from 'react'; import { useSelector } from 'react-redux'; import { map } from './core/MapView'; import getSpeedColor from '../common/util/colors'; +import { useAttributePreference } from '../common/util/preferences'; const MapRoutePath = ({ positions }) => { const id = useId(); - const theme = useTheme(); + const MaxExpectedDeviceSpeed = useAttributePreference('ui.MaxExpectedDeviceSpeed'); + const reportColor = useSelector((state) => { const position = positions?.find(() => true); if (position) { @@ -23,6 +25,13 @@ const MapRoutePath = ({ positions }) => { return null; }); + const maxSpeed = useMemo(() => { + if (MaxExpectedDeviceSpeed > 0) { + return MaxExpectedDeviceSpeed; + } + return positions.map((item) => item.speed).reduce((a, b) => Math.max(a, b), -Infinity); + }, [MaxExpectedDeviceSpeed, positions]); + useEffect(() => { map.addSource(id, { type: 'geojson', @@ -62,7 +71,6 @@ const MapRoutePath = ({ positions }) => { }, []); useEffect(() => { - const maxSpeed = positions.map((item) => item.speed).reduce((a, b) => Math.max(a, b), -Infinity); const features = []; for (let i = 0; i < positions.length - 1; i += 1) { features.push({ @@ -83,7 +91,7 @@ const MapRoutePath = ({ positions }) => { type: 'FeatureCollection', features, }); - }, [theme, positions, reportColor]); + }, [theme, positions, reportColor, maxSpeed, id]); return null; }; diff --git a/src/map/MapRoutePoints.js b/src/map/MapRoutePoints.js index 7ee4dc6363..c54a5a2128 100644 --- a/src/map/MapRoutePoints.js +++ b/src/map/MapRoutePoints.js @@ -1,9 +1,13 @@ -import { useId, useCallback, useEffect } from 'react'; +import { + useId, useCallback, useEffect, useMemo, +} from 'react'; import { map } from './core/MapView'; import getSpeedColor from '../common/util/colors'; +import { useAttributePreference } from '../common/util/preferences'; const MapRoutePoints = ({ positions, onClick }) => { const id = useId(); + const MaxExpectedDeviceSpeed = useAttributePreference('ui.MaxExpectedDeviceSpeed'); const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer'; const onMouseLeave = () => map.getCanvas().style.cursor = ''; @@ -16,6 +20,13 @@ const MapRoutePoints = ({ positions, onClick }) => { } }, [onClick]); + const maxSpeed = useMemo(() => { + if (MaxExpectedDeviceSpeed > 0) { + return MaxExpectedDeviceSpeed; + } + return positions.map((p) => p.speed).reduce((a, b) => Math.max(a, b), -Infinity); + }, [MaxExpectedDeviceSpeed, positions]); + useEffect(() => { map.addSource(id, { type: 'geojson', @@ -57,7 +68,6 @@ const MapRoutePoints = ({ positions, onClick }) => { }, [onMarkerClick]); useEffect(() => { - const maxSpeed = positions.map((p) => p.speed).reduce((a, b) => Math.max(a, b), -Infinity); map.getSource(id)?.setData({ type: 'FeatureCollection', features: positions.map((position, index) => ({ @@ -74,7 +84,7 @@ const MapRoutePoints = ({ positions, onClick }) => { }, })), }); - }, [onMarkerClick, positions]); + }, [id, positions, maxSpeed]); return null; }; diff --git a/src/resources/l10n/en.json b/src/resources/l10n/en.json index 3a7cd48553..a4487d5e8d 100644 --- a/src/resources/l10n/en.json +++ b/src/resources/l10n/en.json @@ -612,5 +612,6 @@ "categoryVan": "Van", "categoryScooter": "Scooter", "maintenanceStart": "Start", - "maintenancePeriod": "Period" + "maintenancePeriod": "Period", + "attributeUIMaxExpectedDeviceSpeed": "Max Expected Device Speed" } From 19d1bfbdcd19547cf824b4705df6c2fd286535ba Mon Sep 17 00:00:00 2001 From: Kalabint Date: Tue, 1 Oct 2024 09:22:02 +0200 Subject: [PATCH 8/8] Revert "Added max device speed attribute" This reverts commit e9ac536764160cf3875f17df4f1093fcc0e4337e. --- src/common/attributes/useCommonUserAttributes.js | 4 ---- src/map/MapRoutePath.js | 16 ++++------------ src/map/MapRoutePoints.js | 16 +++------------- src/resources/l10n/en.json | 3 +-- 4 files changed, 8 insertions(+), 31 deletions(-) diff --git a/src/common/attributes/useCommonUserAttributes.js b/src/common/attributes/useCommonUserAttributes.js index 759bd96ebd..e86e6b6b33 100644 --- a/src/common/attributes/useCommonUserAttributes.js +++ b/src/common/attributes/useCommonUserAttributes.js @@ -145,8 +145,4 @@ export default (t) => useMemo(() => ({ name: t('attributeNavigationAppTitle'), type: 'string', }, - 'ui.MaxExpectedDeviceSpeed': { - name: t('attributeUIMaxExpectedDeviceSpeed'), - type: 'number', - }, }), [t]); diff --git a/src/map/MapRoutePath.js b/src/map/MapRoutePath.js index 514a18c703..ae905676ae 100644 --- a/src/map/MapRoutePath.js +++ b/src/map/MapRoutePath.js @@ -1,15 +1,13 @@ import { useTheme } from '@mui/styles'; -import { useId, useEffect, useMemo } from 'react'; +import { useId, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { map } from './core/MapView'; import getSpeedColor from '../common/util/colors'; -import { useAttributePreference } from '../common/util/preferences'; const MapRoutePath = ({ positions }) => { const id = useId(); - const theme = useTheme(); - const MaxExpectedDeviceSpeed = useAttributePreference('ui.MaxExpectedDeviceSpeed'); + const theme = useTheme(); const reportColor = useSelector((state) => { const position = positions?.find(() => true); @@ -25,13 +23,6 @@ const MapRoutePath = ({ positions }) => { return null; }); - const maxSpeed = useMemo(() => { - if (MaxExpectedDeviceSpeed > 0) { - return MaxExpectedDeviceSpeed; - } - return positions.map((item) => item.speed).reduce((a, b) => Math.max(a, b), -Infinity); - }, [MaxExpectedDeviceSpeed, positions]); - useEffect(() => { map.addSource(id, { type: 'geojson', @@ -71,6 +62,7 @@ const MapRoutePath = ({ positions }) => { }, []); useEffect(() => { + const maxSpeed = positions.map((item) => item.speed).reduce((a, b) => Math.max(a, b), -Infinity); const features = []; for (let i = 0; i < positions.length - 1; i += 1) { features.push({ @@ -91,7 +83,7 @@ const MapRoutePath = ({ positions }) => { type: 'FeatureCollection', features, }); - }, [theme, positions, reportColor, maxSpeed, id]); + }, [theme, positions, reportColor]); return null; }; diff --git a/src/map/MapRoutePoints.js b/src/map/MapRoutePoints.js index c54a5a2128..7ee4dc6363 100644 --- a/src/map/MapRoutePoints.js +++ b/src/map/MapRoutePoints.js @@ -1,13 +1,9 @@ -import { - useId, useCallback, useEffect, useMemo, -} from 'react'; +import { useId, useCallback, useEffect } from 'react'; import { map } from './core/MapView'; import getSpeedColor from '../common/util/colors'; -import { useAttributePreference } from '../common/util/preferences'; const MapRoutePoints = ({ positions, onClick }) => { const id = useId(); - const MaxExpectedDeviceSpeed = useAttributePreference('ui.MaxExpectedDeviceSpeed'); const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer'; const onMouseLeave = () => map.getCanvas().style.cursor = ''; @@ -20,13 +16,6 @@ const MapRoutePoints = ({ positions, onClick }) => { } }, [onClick]); - const maxSpeed = useMemo(() => { - if (MaxExpectedDeviceSpeed > 0) { - return MaxExpectedDeviceSpeed; - } - return positions.map((p) => p.speed).reduce((a, b) => Math.max(a, b), -Infinity); - }, [MaxExpectedDeviceSpeed, positions]); - useEffect(() => { map.addSource(id, { type: 'geojson', @@ -68,6 +57,7 @@ const MapRoutePoints = ({ positions, onClick }) => { }, [onMarkerClick]); useEffect(() => { + const maxSpeed = positions.map((p) => p.speed).reduce((a, b) => Math.max(a, b), -Infinity); map.getSource(id)?.setData({ type: 'FeatureCollection', features: positions.map((position, index) => ({ @@ -84,7 +74,7 @@ const MapRoutePoints = ({ positions, onClick }) => { }, })), }); - }, [id, positions, maxSpeed]); + }, [onMarkerClick, positions]); return null; }; diff --git a/src/resources/l10n/en.json b/src/resources/l10n/en.json index a4487d5e8d..3a7cd48553 100644 --- a/src/resources/l10n/en.json +++ b/src/resources/l10n/en.json @@ -612,6 +612,5 @@ "categoryVan": "Van", "categoryScooter": "Scooter", "maintenanceStart": "Start", - "maintenancePeriod": "Period", - "attributeUIMaxExpectedDeviceSpeed": "Max Expected Device Speed" + "maintenancePeriod": "Period" }