From 403d7f3e5e39523e17cfddeba9114f8a592b54f4 Mon Sep 17 00:00:00 2001 From: Florian Kotthoff <74312290+FlorianK13@users.noreply.github.com> Date: Thu, 29 Aug 2024 13:07:24 +0200 Subject: [PATCH 1/6] Add control help to overlay #89 --- public/locales/de/translation.json | 7 ++++ public/locales/en/translation.json | 7 ++++ src/components/ThreeViewer/Overlay.js | 54 ++++++++++++++++++++++++--- 3 files changed, 63 insertions(+), 5 deletions(-) diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index d519705a..946e4d88 100644 --- a/public/locales/de/translation.json +++ b/public/locales/de/translation.json @@ -58,5 +58,12 @@ "map": { "coordinates": "Koordinaten", "userSelection": "Manuelle Auswahl" + }, + "mapControlHelp": { + "button": "Wie bediene ich die Karte?", + "title": "Bedienungsanleitung", + "leftMouse": "Linke Maustaste: Bewegung auf der Karte", + "rightMouse": "Rechte Maustaste: Rotation der Karte", + "wheel": "Mausrad: Vergrößern und Verkleinern" } } diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 77a1ae40..763aeee2 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -58,5 +58,12 @@ "map": { "coordinates": "Coordinates", "userSelection": "Manual Selection" + }, + "mapControlHelp": { + "button": "How to control the Map?", + "title": "User Manual", + "leftMouse": "Left Mouse Button: Move on the map", + "rightMouse": "Right Mouse Button: Rotate the map", + "wheel": "Mouse Wheel: Zoom in and out" } } diff --git a/src/components/ThreeViewer/Overlay.js b/src/components/ThreeViewer/Overlay.js index 362c0afb..1e40264e 100644 --- a/src/components/ThreeViewer/Overlay.js +++ b/src/components/ThreeViewer/Overlay.js @@ -8,9 +8,17 @@ import { DrawerHeader, DrawerOverlay, FormLabel, + ListItem, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalHeader, + ModalOverlay, Stack, Switch, Text, + UnorderedList, useDisclosure, } from "@chakra-ui/react" import { useTranslation } from "react-i18next" @@ -39,7 +47,16 @@ function Overlay({ pvPoints, setPVPoints, }) { - const { isOpen, onOpen, onClose } = useDisclosure() + const { + isOpen: isOpenDrawer, + onOpen: onOpenDrawer, + onClose: onCloseDrawer, + } = useDisclosure() + const { + isOpen: isOpenModalControls, + onOpen: onOpenModalControls, + onClose: onCloseModalControls, + } = useDisclosure() const { t } = useTranslation() const btnRef = React.useRef() @@ -50,7 +67,7 @@ function Overlay({ )} + + @@ -197,3 +221,23 @@ const CustomDrawer = ({ isOpen, onClose, showTerrain, setShowTerrain }) => { } export default Overlay + +const ModalControls = ({ isOpen, onClose }) => { + const { t } = useTranslation() + return ( + + + + {t("mapControlHelp.title")} + + + + {t("mapControlHelp.leftMouse")} + {t("mapControlHelp.rightMouse")} + {t("mapControlHelp.wheel")} + + + + + ) +} From 2c50f9d472a12e5392d2384b9a9bb6f40d2885bf Mon Sep 17 00:00:00 2001 From: Florian Kotthoff <74312290+FlorianK13@users.noreply.github.com> Date: Thu, 29 Aug 2024 13:07:46 +0200 Subject: [PATCH 2/6] Delete unused i18 object #89 --- src/components/ErrorMessages/WrongAdress.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ErrorMessages/WrongAdress.js b/src/components/ErrorMessages/WrongAdress.js index 33821659..4fef6dd0 100644 --- a/src/components/ErrorMessages/WrongAdress.js +++ b/src/components/ErrorMessages/WrongAdress.js @@ -3,7 +3,7 @@ import React from "react" import { useTranslation } from "react-i18next" function WrongAdress() { - const { t, i18n } = useTranslation() + const { t } = useTranslation() return ( From f44d1ecd5b07b2ad55a1ef4fb4c987a8967ba3db Mon Sep 17 00:00:00 2001 From: Florian Kotthoff <74312290+FlorianK13@users.noreply.github.com> Date: Thu, 29 Aug 2024 14:49:01 +0200 Subject: [PATCH 3/6] Detect if device is touch or mouse #89 --- src/index.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/index.js b/src/index.js index 75c59c1c..710620db 100644 --- a/src/index.js +++ b/src/index.js @@ -18,6 +18,8 @@ const Impressum = lazy(() => import("./pages/Impressum")) const Datenschutz = lazy(() => import("./pages/Datenschutz")) const About = lazy(() => import("./pages/About")) +window.isTouchDevice = isTouchDevice() + // See https://reactjs.org/docs/strict-mode.html const StrictApp = () => ( @@ -48,3 +50,17 @@ if (rootElement.hasChildNodes()) { const root = createRoot(rootElement) root.render() } + +function isTouchDevice() { + const isTouch = + "ontouchstart" in window || + navigator.maxTouchPoints > 0 || + navigator.msMaxTouchPoints > 0 + const isCoarse = window.matchMedia("(pointer: coarse)").matches + if (isTouch && isCoarse) { + console.log("The device is of type touch") + } else { + console.log("The device is a laptop.") + } + return isTouch && isCoarse +} From daf08fbcf0f08779bd3006b29b0e1fd539f21778 Mon Sep 17 00:00:00 2001 From: Florian Kotthoff <74312290+FlorianK13@users.noreply.github.com> Date: Thu, 29 Aug 2024 15:06:07 +0200 Subject: [PATCH 4/6] Add control description for double click #89 --- public/locales/de/translation.json | 3 ++- public/locales/en/translation.json | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index 946e4d88..9c4775ba 100644 --- a/public/locales/de/translation.json +++ b/public/locales/de/translation.json @@ -64,6 +64,7 @@ "title": "Bedienungsanleitung", "leftMouse": "Linke Maustaste: Bewegung auf der Karte", "rightMouse": "Rechte Maustaste: Rotation der Karte", - "wheel": "Mausrad: Vergrößern und Verkleinern" + "wheel": "Mausrad: Vergrößern und Verkleinern", + "doubleClick": "Doppelklick: Weiteres Gebäude für Simulation auswählen" } } diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 763aeee2..e1f44967 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -64,6 +64,7 @@ "title": "User Manual", "leftMouse": "Left Mouse Button: Move on the map", "rightMouse": "Right Mouse Button: Rotate the map", - "wheel": "Mouse Wheel: Zoom in and out" + "wheel": "Mouse Wheel: Zoom in and out", + "doubleClick": "Double click: Choose another building for a simulation" } } From 17e1eea92583fa96d6ffac72bcfd5f36802f53c1 Mon Sep 17 00:00:00 2001 From: Florian Kotthoff <74312290+FlorianK13@users.noreply.github.com> Date: Thu, 29 Aug 2024 15:18:58 +0200 Subject: [PATCH 5/6] Add possibility for touch specific text #89 --- src/components/ThreeViewer/Overlay.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/ThreeViewer/Overlay.js b/src/components/ThreeViewer/Overlay.js index 1e40264e..4760cb23 100644 --- a/src/components/ThreeViewer/Overlay.js +++ b/src/components/ThreeViewer/Overlay.js @@ -224,17 +224,25 @@ export default Overlay const ModalControls = ({ isOpen, onClose }) => { const { t } = useTranslation() + const touchDeviceText = window.isTouch ? "touch." : "" return ( - {t("mapControlHelp.title")} + {t(`mapControlHelp.title`)} - {t("mapControlHelp.leftMouse")} - {t("mapControlHelp.rightMouse")} - {t("mapControlHelp.wheel")} + + {t(`mapControlHelp.${touchDeviceText}leftMouse`)} + + + {t(`mapControlHelp.${touchDeviceText}rightMouse`)} + + {t(`mapControlHelp.${touchDeviceText}wheel`)} + + {t(`mapControlHelp.${touchDeviceText}doubleClick`)} + From 1715ab79cdde92fe8cfb33fd437208dabc74bd90 Mon Sep 17 00:00:00 2001 From: Florian Kotthoff <74312290+FlorianK13@users.noreply.github.com> Date: Thu, 29 Aug 2024 16:48:01 +0200 Subject: [PATCH 6/6] Add text for touch control #89 --- public/locales/de/translation.json | 8 +++++++- public/locales/en/translation.json | 8 +++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index 9c4775ba..79aead8c 100644 --- a/public/locales/de/translation.json +++ b/public/locales/de/translation.json @@ -65,6 +65,12 @@ "leftMouse": "Linke Maustaste: Bewegung auf der Karte", "rightMouse": "Rechte Maustaste: Rotation der Karte", "wheel": "Mausrad: Vergrößern und Verkleinern", - "doubleClick": "Doppelklick: Weiteres Gebäude für Simulation auswählen" + "doubleClick": "Doppelklick: Weiteres Gebäude für Simulation auswählen", + "touch": { + "leftMouse": "Ein Finger: Bewegung auf der Karte", + "rightMouse": "Zwei Finger: Rotation der Karte", + "wheel": "Zwei Finger: Vergrößern und Verkleinern", + "doubleClick": "Zweimal kurz auf Gebäude tippen: Weiteres Gebäude für Simulation auswählen" + } } } diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index e1f44967..8a3ac8e4 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -65,6 +65,12 @@ "leftMouse": "Left Mouse Button: Move on the map", "rightMouse": "Right Mouse Button: Rotate the map", "wheel": "Mouse Wheel: Zoom in and out", - "doubleClick": "Double click: Choose another building for a simulation" + "doubleClick": "Double click: Choose another building for a simulation", + "touch": { + "leftMouse": "One finger: Move on the map", + "rightMouse": "Two fingers: Rotate the map", + "wheel": "Two fingers: Zoom in and out", + "doubleClick": "Double-tap on a building: Select another building for simulation" + } } }