From 924efa7157d73de1b3ac3229491b9698b61ab008 Mon Sep 17 00:00:00 2001 From: Type-Style Date: Fri, 23 Aug 2024 14:36:04 +0200 Subject: [PATCH 1/3] [Revert] #109 remove polyColor Plugin --- package-lock.json | 6 ------ package.json | 1 - src/client/components/Map.tsx | 5 +---- src/client/tsconfig.json | 2 +- src/client/types_polyline.d.ts | 14 -------------- 5 files changed, 2 insertions(+), 26 deletions(-) delete mode 100644 src/client/types_polyline.d.ts diff --git a/package-lock.json b/package-lock.json index 8ed1d875..405c9b34 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,6 @@ "name": "lorex", "version": "0.0.1", "dependencies": { - "@emotion/styled": "^11.13.0", "@emotion/react": "^11.13.0", "@emotion/styled": "^11.11.5", "@mui/icons-material": "^5.16.5", @@ -871,11 +870,6 @@ "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", "license": "MIT" }, - "node_modules/@emotion/memoize": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", - "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" - }, "node_modules/@emotion/react": { "version": "11.13.0", "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.0.tgz", diff --git a/package.json b/package.json index d04e595d..d2e8abac 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,6 @@ "webpack-cli": "^5.1.4" }, "dependencies": { - "@emotion/styled": "^11.13.0", "@emotion/react": "^11.13.0", "@emotion/styled": "^11.11.5", "@mui/icons-material": "^5.16.5", diff --git a/src/client/components/Map.tsx b/src/client/components/Map.tsx index bc8aeb3a..466275aa 100644 --- a/src/client/components/Map.tsx +++ b/src/client/components/Map.tsx @@ -59,10 +59,7 @@ const MultiColorPolyline = ({ cleanEntries }: { cleanEntries: Models.IEntry[] }) const polylineArray: LatLngExpression[] = cleanEntries.map((entry) => ([entry.lat, entry.lon])); - L.polycolor(polylineArray, { - colors: colorsArray, - weight: 5 - }).addTo(map); + } }, [map]); diff --git a/src/client/tsconfig.json b/src/client/tsconfig.json index 953d1179..7777c586 100644 --- a/src/client/tsconfig.json +++ b/src/client/tsconfig.json @@ -6,5 +6,5 @@ "jsx": "react", "esModuleInterop": true }, - "include": ["**/*.tsx", "**/*.ts", "types.d.ts", "../../types.d.ts", "types_polyline.d.ts"] + "include": ["**/*.tsx", "**/*.ts", "types.d.ts", "../../types.d.ts"] } \ No newline at end of file diff --git a/src/client/types_polyline.d.ts b/src/client/types_polyline.d.ts deleted file mode 100644 index f955d35d..00000000 --- a/src/client/types_polyline.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -// Polyline plugin for native Leaflet -import * as L from 'leaflet'; - -declare module 'leaflet' { - namespace Polycolor { - interface Options { - colors: Array; - weight?: number; - } - } - - // Declare the actual polycolor function under the L namespace - function polycolor(latlngs: L.LatLngExpression[], options: Polycolor.Options): L.Polyline; -} From e846bcf39556f5cc0be5711dc2c7c4bba8c6640f Mon Sep 17 00:00:00 2001 From: Type-Style Date: Fri, 23 Aug 2024 21:33:00 +0200 Subject: [PATCH 2/3] [Fix, MultiLine] #109, refactor coloring lines; while fetchinng new data vs reloading MaxSpeed might change the more entries are fetched. Example Testcase and after 6 entries are there, reload and see colors change ... well not with this fix. --- src/client/components/Map.tsx | 77 +++++++++++++---------------- src/testData/createTestData.test.ts | 2 +- 2 files changed, 35 insertions(+), 44 deletions(-) diff --git a/src/client/components/Map.tsx b/src/client/components/Map.tsx index 466275aa..c3270bb0 100644 --- a/src/client/components/Map.tsx +++ b/src/client/components/Map.tsx @@ -1,7 +1,7 @@ -import React, { useEffect } from 'react' -import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet' +import React, { useEffect, useState } from 'react' +import { MapContainer, Marker, Polyline, Popup, TileLayer, useMap } from 'react-leaflet' import leafletPolycolor from 'leaflet-polycolor'; -import { formatRgb, toGamut, parse, Oklch } from 'culori'; +import { formatRgb, toGamut, parse, Oklch, formatCss } from 'culori'; import L, { LatLngExpression } from 'leaflet'; import 'leaflet-rotatedmarker'; import 'leaflet/dist/leaflet.css'; @@ -19,52 +19,47 @@ const MapRecenter = ({ lat, lon, zoom }: { lat: number, lon: number, zoom: numbe return null; }; + + const MultiColorPolyline = ({ cleanEntries }: { cleanEntries: Models.IEntry[] }) => { - const map = useMap(); - const useRelativeColors = true; // Change candidate; Use color in range to maximum speed, like from 0 to max, rather than fixed range + const [useRelativeColors, setUseRelativeColors] = useState(true); // Change candidate; Use color in range to maximum speed, like from 0 to max, rather than fixed range - function calculateHue(baseHue, maxSpeed, currentSpeed) { + let maxSpeed = 0; + const startColor = parse('oklch(62.8% 0.2577 29.23)') as Oklch; // red + const calculateHue = function (baseHue, maxSpeed, currentSpeed) { // range of currentSpeed and maxSpeed transfered to range from 0 to 360 const hueOffset = (currentSpeed / maxSpeed) * 360; // add baseHue to the hueOffset and overflow at 360 - const hue = (baseHue + hueOffset) % 360; - - return hue; + return (baseHue + hueOffset) % 360; } - useEffect(() => { - if (map) { - let maxSpeed = 0; - - if (useRelativeColors) { - maxSpeed = cleanEntries.reduce((maxSpeed, entry) => { - // compare the current entry's GPS speed with the maxSpeed found so far - return Math.max(maxSpeed, entry.speed.gps); - }, cleanEntries[0].speed.gps); - maxSpeed *= 3.6; // convert M/S to KM/h - } - - const colorsArray = cleanEntries.map((entry) => { - const startColor = parse('oklch(62.8% 0.2577 29.23)') as Oklch; // red - const currentSpeed = entry.speed.gps * 3.6; // convert to km/h + if (useRelativeColors) { + maxSpeed = cleanEntries.reduce((maxSpeed, entry) => { + // compare the current entry's GPS speed with the maxSpeed found so far + return Math.max(maxSpeed, entry.speed.gps); + }, cleanEntries[0].speed.gps); + maxSpeed *= 3.6; // convert M/S to KM/h + } - startColor.h = calculateHue(startColor.h, maxSpeed, currentSpeed); - startColor.l = currentSpeed > maxSpeed * 0.8 ? startColor.l = currentSpeed / maxSpeed : startColor.l; + return cleanEntries.map((entry, index) => { + if (!index) { return false; } + const previousEntry = cleanEntries[index - 1]; + const color = startColor; + const currentSpeed = entry.speed.gps * 3.6; // convert to km/h - const rgbInGamut = toGamut('rgb', 'oklch', null)(startColor); // map OKLCH to the RGB gamut - const colorRgb = formatRgb(rgbInGamut); // format the result as an RGB string + color.h = calculateHue(color.h, maxSpeed, currentSpeed); + color.l = currentSpeed > maxSpeed * 0.75 ? color.l = currentSpeed / maxSpeed : color.l; - return colorRgb; - }); + const correctedColor = toGamut('rgb', 'oklch', null)(color); // map OKLCH to the RGB gamut - const polylineArray: LatLngExpression[] = cleanEntries.map((entry) => ([entry.lat, entry.lon])); - - } - }, [map]); - - return null; -}; + return () + }); +} function Map({ entries }: { entries: Models.IEntry[] }) { if (!entries?.length) { @@ -107,7 +102,7 @@ function Map({ entries }: { entries: Models.IEntry[] }) { } return ( - + {JSON.stringify(entry, null, 2)} - - ) })} - - - + ) diff --git a/src/testData/createTestData.test.ts b/src/testData/createTestData.test.ts index 39b0c6c6..23355673 100644 --- a/src/testData/createTestData.test.ts +++ b/src/testData/createTestData.test.ts @@ -48,7 +48,7 @@ describe('test Data', () => { const lat = (start.lat + (diff.lat / (entries - 1) * i)).toFixed(8); const lon = (start.lon + (diff.lon / (entries - 1) * i)).toFixed(8); setTimeout(async () => { - await callServer(undefined, `user=xx&lat=${lat}&lon=${lon}×tamp=R3Pl4C3&hdop=${Math.floor(Math.random() * 15) + 1}&altitude=${i+1}&speed=${35.5 + i}&heading=${262 + Math.floor(Math.random() * 20) - 10}&key=test`, 200, "GET"); + await callServer(undefined, `user=xx&lat=${lat}&lon=${lon}×tamp=R3Pl4C3&hdop=${Math.floor(Math.random() * 15) + 1}&altitude=${i+1}&speed=${38 + i*2}&heading=${262 + Math.floor(Math.random() * 20) - 10}&key=test`, 200, "GET"); console.log("called server " + (i + 1) + "/" + entries); }, 1000 * 30 * i); From 114fec1152ce3e3a9a8881e59502ebdad4d4ef10 Mon Sep 17 00:00:00 2001 From: Type-Style Date: Mon, 26 Aug 2024 11:07:37 +0200 Subject: [PATCH 3/3] [Task] #109, improve polyline display, remove unused code --- src/client/components/Map.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/client/components/Map.tsx b/src/client/components/Map.tsx index c3270bb0..20ca1c89 100644 --- a/src/client/components/Map.tsx +++ b/src/client/components/Map.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from 'react' import { MapContainer, Marker, Polyline, Popup, TileLayer, useMap } from 'react-leaflet' import leafletPolycolor from 'leaflet-polycolor'; -import { formatRgb, toGamut, parse, Oklch, formatCss } from 'culori'; -import L, { LatLngExpression } from 'leaflet'; +import { toGamut, parse, Oklch, formatCss } from 'culori'; +import L from 'leaflet'; import 'leaflet-rotatedmarker'; import 'leaflet/dist/leaflet.css'; import "../css/map.css"; @@ -22,7 +22,7 @@ const MapRecenter = ({ lat, lon, zoom }: { lat: number, lon: number, zoom: numbe const MultiColorPolyline = ({ cleanEntries }: { cleanEntries: Models.IEntry[] }) => { - const [useRelativeColors, setUseRelativeColors] = useState(true); // Change candidate; Use color in range to maximum speed, like from 0 to max, rather than fixed range + const [useRelativeColors] = useState(true); // Change candidate; Use color in range to maximum speed, like from 0 to max, rather than fixed range let maxSpeed = 0; const startColor = parse('oklch(62.8% 0.2577 29.23)') as Oklch; // red