From 4b192b870dfd4fc1eb61b244bbe455a59f7089c3 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sat, 24 Oct 2020 15:32:00 -0700 Subject: Implement category icons --- modern/public/images/icon/animal.svg | 2 ++ modern/public/images/icon/bicycle.svg | 2 ++ modern/public/images/icon/boat.svg | 2 ++ modern/public/images/icon/bus.svg | 2 ++ modern/public/images/icon/car.svg | 2 ++ modern/public/images/icon/crane.svg | 2 ++ modern/public/images/icon/default.svg | 2 ++ modern/public/images/icon/helicopter.svg | 2 ++ modern/public/images/icon/marker.svg | 2 -- modern/public/images/icon/motorcycle.svg | 2 ++ modern/public/images/icon/offroad.svg | 2 ++ modern/public/images/icon/person.svg | 2 ++ modern/public/images/icon/pickup.svg | 2 ++ modern/public/images/icon/plane.svg | 2 ++ modern/public/images/icon/scooter.svg | 2 ++ modern/public/images/icon/ship.svg | 2 ++ modern/public/images/icon/tractor.svg | 2 ++ modern/public/images/icon/train.svg | 2 ++ modern/public/images/icon/tram.svg | 2 ++ modern/public/images/icon/trolleybus.svg | 2 ++ modern/public/images/icon/truck.svg | 2 ++ modern/public/images/icon/van.svg | 2 ++ modern/src/DevicePage.js | 25 +------------------------ modern/src/DevicesList.js | 7 ++++++- modern/src/common/deviceCategories.js | 23 +++++++++++++++++++++++ modern/src/map/MainMap.js | 10 +++------- modern/src/map/mapManager.js | 10 +++++----- 27 files changed, 80 insertions(+), 39 deletions(-) create mode 100644 modern/public/images/icon/animal.svg create mode 100644 modern/public/images/icon/bicycle.svg create mode 100644 modern/public/images/icon/boat.svg create mode 100644 modern/public/images/icon/bus.svg create mode 100644 modern/public/images/icon/car.svg create mode 100644 modern/public/images/icon/crane.svg create mode 100644 modern/public/images/icon/default.svg create mode 100644 modern/public/images/icon/helicopter.svg delete mode 100644 modern/public/images/icon/marker.svg create mode 100644 modern/public/images/icon/motorcycle.svg create mode 100644 modern/public/images/icon/offroad.svg create mode 100644 modern/public/images/icon/person.svg create mode 100644 modern/public/images/icon/pickup.svg create mode 100644 modern/public/images/icon/plane.svg create mode 100644 modern/public/images/icon/scooter.svg create mode 100644 modern/public/images/icon/ship.svg create mode 100644 modern/public/images/icon/tractor.svg create mode 100644 modern/public/images/icon/train.svg create mode 100644 modern/public/images/icon/tram.svg create mode 100644 modern/public/images/icon/trolleybus.svg create mode 100644 modern/public/images/icon/truck.svg create mode 100644 modern/public/images/icon/van.svg create mode 100644 modern/src/common/deviceCategories.js (limited to 'modern') diff --git a/modern/public/images/icon/animal.svg b/modern/public/images/icon/animal.svg new file mode 100644 index 00000000..87a914ca --- /dev/null +++ b/modern/public/images/icon/animal.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/bicycle.svg b/modern/public/images/icon/bicycle.svg new file mode 100644 index 00000000..6cb40987 --- /dev/null +++ b/modern/public/images/icon/bicycle.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/boat.svg b/modern/public/images/icon/boat.svg new file mode 100644 index 00000000..592302a6 --- /dev/null +++ b/modern/public/images/icon/boat.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/bus.svg b/modern/public/images/icon/bus.svg new file mode 100644 index 00000000..aa014fb8 --- /dev/null +++ b/modern/public/images/icon/bus.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/car.svg b/modern/public/images/icon/car.svg new file mode 100644 index 00000000..2d0cae40 --- /dev/null +++ b/modern/public/images/icon/car.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/crane.svg b/modern/public/images/icon/crane.svg new file mode 100644 index 00000000..ff9dff4d --- /dev/null +++ b/modern/public/images/icon/crane.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/default.svg b/modern/public/images/icon/default.svg new file mode 100644 index 00000000..886a6670 --- /dev/null +++ b/modern/public/images/icon/default.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/helicopter.svg b/modern/public/images/icon/helicopter.svg new file mode 100644 index 00000000..19442684 --- /dev/null +++ b/modern/public/images/icon/helicopter.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/marker.svg b/modern/public/images/icon/marker.svg deleted file mode 100644 index f626547c..00000000 --- a/modern/public/images/icon/marker.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/modern/public/images/icon/motorcycle.svg b/modern/public/images/icon/motorcycle.svg new file mode 100644 index 00000000..55c47e56 --- /dev/null +++ b/modern/public/images/icon/motorcycle.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/offroad.svg b/modern/public/images/icon/offroad.svg new file mode 100644 index 00000000..80c9507a --- /dev/null +++ b/modern/public/images/icon/offroad.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/person.svg b/modern/public/images/icon/person.svg new file mode 100644 index 00000000..f470355a --- /dev/null +++ b/modern/public/images/icon/person.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/pickup.svg b/modern/public/images/icon/pickup.svg new file mode 100644 index 00000000..d14f6bb7 --- /dev/null +++ b/modern/public/images/icon/pickup.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/plane.svg b/modern/public/images/icon/plane.svg new file mode 100644 index 00000000..5f4890b7 --- /dev/null +++ b/modern/public/images/icon/plane.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/scooter.svg b/modern/public/images/icon/scooter.svg new file mode 100644 index 00000000..e3b6df0d --- /dev/null +++ b/modern/public/images/icon/scooter.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/ship.svg b/modern/public/images/icon/ship.svg new file mode 100644 index 00000000..58b21f4b --- /dev/null +++ b/modern/public/images/icon/ship.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/tractor.svg b/modern/public/images/icon/tractor.svg new file mode 100644 index 00000000..03c577ef --- /dev/null +++ b/modern/public/images/icon/tractor.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/train.svg b/modern/public/images/icon/train.svg new file mode 100644 index 00000000..db3a1077 --- /dev/null +++ b/modern/public/images/icon/train.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/tram.svg b/modern/public/images/icon/tram.svg new file mode 100644 index 00000000..549346eb --- /dev/null +++ b/modern/public/images/icon/tram.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/trolleybus.svg b/modern/public/images/icon/trolleybus.svg new file mode 100644 index 00000000..76f749c9 --- /dev/null +++ b/modern/public/images/icon/trolleybus.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/truck.svg b/modern/public/images/icon/truck.svg new file mode 100644 index 00000000..4dd910c8 --- /dev/null +++ b/modern/public/images/icon/truck.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/public/images/icon/van.svg b/modern/public/images/icon/van.svg new file mode 100644 index 00000000..7ee3cc54 --- /dev/null +++ b/modern/public/images/icon/van.svg @@ -0,0 +1,2 @@ + + diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js index d4b83e6e..7c9b5671 100644 --- a/modern/src/DevicePage.js +++ b/modern/src/DevicePage.js @@ -8,6 +8,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import EditAttributesView from './attributes/EditAttributesView'; import deviceAttributes from './attributes/deviceAttributes'; import SelectField from './form/SelectField'; +import { deviceCategories } from './common/deviceCategories'; const useStyles = makeStyles(() => ({ details: { @@ -15,30 +16,6 @@ const useStyles = makeStyles(() => ({ }, })); -const deviceCategories = [ - 'default', - 'animal', - 'bicycle', - 'boat', - 'bus', - 'car', - 'crane', - 'helicopter', - 'motorcycle', - 'offroad', - 'person', - 'pickup', - 'plane', - 'ship', - 'tractor', - 'train', - 'tram', - 'trolleybus', - 'truck', - 'van', - 'scooter', -]; - const DevicePage = () => { const classes = useStyles(); diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index 28ead786..6f8cea02 100644 --- a/modern/src/DevicesList.js +++ b/modern/src/DevicesList.js @@ -21,6 +21,11 @@ const useStyles = makeStyles(() => ({ maxHeight: '100%', overflow: 'auto', }, + icon: { + width: '25px', + height: '25px', + filter: 'brightness(0) invert(1)', + }, })); const DeviceView = ({ updateTimestamp, onMenuClick }) => { @@ -43,7 +48,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => { dispatch(devicesActions.select(item))}> - + diff --git a/modern/src/common/deviceCategories.js b/modern/src/common/deviceCategories.js new file mode 100644 index 00000000..1eda1902 --- /dev/null +++ b/modern/src/common/deviceCategories.js @@ -0,0 +1,23 @@ +export const deviceCategories = [ + 'default', + 'animal', + 'bicycle', + 'boat', + 'bus', + 'car', + 'crane', + 'helicopter', + 'motorcycle', + 'offroad', + 'person', + 'pickup', + 'plane', + 'ship', + 'tractor', + 'train', + 'tram', + 'trolleybus', + 'truck', + 'van', + 'scooter', +]; diff --git a/modern/src/map/MainMap.js b/modern/src/map/MainMap.js index c93c26dd..0b7eea25 100644 --- a/modern/src/map/MainMap.js +++ b/modern/src/map/MainMap.js @@ -30,6 +30,7 @@ const MainMap = () => { return { deviceId: position.deviceId, name: device ? device.name : '', + category: device && device.category || 'default', } }; @@ -89,7 +90,7 @@ const MainMap = () => { 'type': 'geojson', 'data': positions, }); - mapManager.addLayer('device-icon', 'positions', 'icon-marker', '{name}', markerClickHandler); + mapManager.addLayer('device-icon', 'positions', '{category}', '{name}', markerClickHandler); const bounds = mapManager.calculateBounds(positions.features); if (bounds) { @@ -118,12 +119,7 @@ const MainMap = () => { } }, [positions]); - const style = { - width: '100%', - height: '100%', - }; - - return
; + return
; } export default MainMap; diff --git a/modern/src/map/mapManager.js b/modern/src/map/mapManager.js index 5c0510c4..e496a6c5 100644 --- a/modern/src/map/mapManager.js +++ b/modern/src/map/mapManager.js @@ -1,5 +1,6 @@ import 'mapbox-gl/dist/mapbox-gl.css'; import mapboxgl from 'mapbox-gl'; +import { deviceCategories } from '../common/deviceCategories'; let readyListeners = []; @@ -32,8 +33,9 @@ const loadIcon = async (key, background, url) => { const context = canvas.getContext('2d'); context.drawImage(background, 0, 0, canvas.width, canvas.height); - const imageWidth = image.width * pixelRatio; - const imageHeight = image.height * pixelRatio; + const iconRatio = 0.5; + const imageWidth = canvas.width * iconRatio; + const imageHeight = canvas.height * iconRatio; context.drawImage(image, (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight); map.addImage(key, context.getImageData(0, 0, canvas.width, canvas.height), { pixelRatio }); @@ -156,9 +158,7 @@ map.addControl(new mapboxgl.NavigationControl()); map.on('load', async () => { const background = await loadImage('images/background.svg'); - await Promise.all([ - loadIcon('icon-marker', background, 'images/icon/marker.svg'), - ]); + await Promise.all(deviceCategories.map(async category => loadIcon(category, background, `images/icon/${category}.svg`))); if (readyListeners) { readyListeners.forEach(listener => listener()); readyListeners = null; -- cgit v1.2.3