Merge pull request #505 from open-pv/feature/azimuth

Add azimuth to slope display

Author: khdlr

public/locales/de/translation.json

@@ -158,5 +158,6 @@
     "companies": "Installateure in Ihrer Nähe",
     "bbe": "Kein eigenes Dach? Tritt doch einer Bürgerenergiegenossenschaft bei!"
   },
-  "slope": "Neigung"
+  "slope": "Neigung",
+  "azimuth": "Azimuth"
 }

public/locales/en/translation.json

@@ -137,5 +137,6 @@
     "companies": "Installers near you",
     "bbe": "No own roof? Join a community energy cooperative!"
   },
-  "slope": "Slope"
+  "slope": "Slope",
+  "azimuth": "Azimuth"
 }

src/components/ThreeViewer/Controls/CustomMapControl.jsx

@@ -80,8 +80,11 @@ function CustomMapControl() {
     event.preventDefault()
     const intersects = getIntersects()
     const intersectedFace = ignoreSprites(intersects).face
-    const slope = calculateSlopeFromNormal(intersectedFace.normal)
+    const [slope, azimuth] = calculateSlopeAzimuthFromNormal(
+      intersectedFace.normal,
+    )
     sceneContext.setSlope(Math.round(slope))
+    sceneContext.setAzimuth(Math.round(azimuth))
   }
 
   useEffect(() => {
@@ -125,8 +128,17 @@ function CustomMapControl() {
 
 export default CustomMapControl
 
-const calculateSlopeFromNormal = (normal) => {
+const calculateSlopeAzimuthFromNormal = (normal) => {
   const up = new THREE.Vector3(0, 0, 1)
   const angleRad = normal.angleTo(up)
-  return THREE.MathUtils.radToDeg(angleRad)
+  const slope = THREE.MathUtils.radToDeg(angleRad)
+
+  // Swap y and x in atan to get clockwise angle from y-axis
+  const azimuthRad = Math.atan2(normal.x, normal.y)
+  let azimuth = THREE.MathUtils.radToDeg(azimuthRad)
+  if (azimuth < 0) {
+    azimuth += 360
+  }
+
+  return [slope, azimuth]
 }

src/components/ThreeViewer/Overlay.jsx

@@ -273,7 +273,9 @@ function Overlay({ frontendState, setFrontendState, geoLocation }) {
   const MouseHoverInfo = () => {
     return (
       <div className='attribution' id='footer-on-hover'>
-        {t('slope') + ': ' + sceneContext.slope}°
+        {t('slope')}: {sceneContext.slope}°
+        <br />
+        {t('azimuth')}: {sceneContext.azimuth}°
       </div>
     )
   }

src/components/ThreeViewer/Scene.jsx

@@ -35,6 +35,7 @@ const Scene = ({
   // highlighted PVSystems for deletion or calculation
   const [selectedPVSystem, setSelectedPVSystem] = useState([])
   const [slope, setSlope] = useState('')
+  const [azimuth, setAzimuth] = useState('')
 
   window.setPVPoints = setPVPoints
   const position = [
@@ -61,6 +62,8 @@ const Scene = ({
         setShowTerrain,
         slope,
         setSlope,
+        azimuth,
+        setAzimuth,
       }}
     >
       <Overlay