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