89 map control description

public/locales/de/translation.json

@@ -58,5 +58,19 @@
   "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",
+    "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"
+    }
   }
 }

public/locales/en/translation.json

@@ -58,5 +58,19 @@
   "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",
+    "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"
+    }
   }
 }

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 (
     <Card>
       <CardHeader>

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({
           <Button
             ref={btnRef}
             colorScheme="teal"
-            onClick={onOpen}
+            onClick={onOpenDrawer}
             variant={"link"}
             zIndex={100}
           >
@@ -60,7 +77,7 @@ function Overlay({
             buttonLabel={"PV Anlage einzeichnen"}
             onClick={() => {
               setFrontendState("DrawPV")
-              onClose()
+              onCloseDrawer()
             }}
             hoverText={
               "PV-Anlage in der Karte einzeichnen und Jahresbetrag berechnen."
@@ -97,9 +114,16 @@ function Overlay({
           {t("button.simulateBuilding")}
         </Button>
       )}
+      <Button onClick={onOpenModalControls} colorScheme="teal" variant={"link"}>
+        {t("mapControlHelp.button")}
+      </Button>
+      <ModalControls
+        isOpen={isOpenModalControls}
+        onClose={onCloseModalControls}
+      />
       <CustomDrawer
-        isOpen={isOpen}
-        onClose={onClose}
+        isOpen={isOpenDrawer}
+        onClose={onCloseDrawer}
         showTerrain={showTerrain}
         setShowTerrain={setShowTerrain}
       />
@@ -197,3 +221,31 @@ const CustomDrawer = ({ isOpen, onClose, showTerrain, setShowTerrain }) => {
 }
 
 export default Overlay
+
+const ModalControls = ({ isOpen, onClose }) => {
+  const { t } = useTranslation()
+  const touchDeviceText = window.isTouch ? "touch." : ""
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{t(`mapControlHelp.title`)}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <UnorderedList>
+            <ListItem>
+              {t(`mapControlHelp.${touchDeviceText}leftMouse`)}
+            </ListItem>
+            <ListItem>
+              {t(`mapControlHelp.${touchDeviceText}rightMouse`)}
+            </ListItem>
+            <ListItem>{t(`mapControlHelp.${touchDeviceText}wheel`)}</ListItem>
+            <ListItem>
+              {t(`mapControlHelp.${touchDeviceText}doubleClick`)}
+            </ListItem>
+          </UnorderedList>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}

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 = () => (
   <ChakraProvider>
@@ -48,3 +50,17 @@ if (rootElement.hasChildNodes()) {
   const root = createRoot(rootElement)
   root.render(<StrictApp />)
 }
+
+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
+}