Merge pull request #1258 from Kalabint/route_turbo_color_ramp

Changed Speed based Color Mapping from Theme Color to TurboColorRamp

src/common/util/colors.js

@@ -1,23 +1,31 @@
-import { decomposeColor } from '@mui/material';
-
-export const interpolateColor = (color1, color2, factor) => {
-  if (factor > 1) factor = 1;
-  if (factor < 0) factor = 0;
+// 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],
+};
 
-  const c1 = decomposeColor(color1).values;
-  const c2 = decomposeColor(color2).values;
+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));
+};
 
-  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 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) => {
+  const normalizedSpeed = Math.max(0, Math.min(1, speed / maxSpeed));
+  const [r, g, b] = interpolateTurbo(normalizedSpeed);
   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);
-};
+export default getSpeedColor;

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();
@@ -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,
           ),

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';
+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),
         },
       })),
     });