Merge pull request #23 from MO-RISE/radar-vis

Radar vis

src/base-elements/components/mini_app/FloatAppWind.jsx

@@ -1,34 +1,53 @@
-import React from "react";
-import { Paper } from "@mui/material";
-import { Rnd } from "react-rnd";
+import React from "react"
+import { Paper } from "@mui/material"
+import { Rnd } from "react-rnd"
+import { useRecoilValue } from "recoil"
 // Component
-import AppWindCurrent from "../../../pages/conning/components/AppWindCurrent";
+import AppWindCurrent from "../../../pages/conning/components/AppWindCurrent"
+import { OS_HEADING_SETTING, OS_HEADING, OS_WIND_SETTING, OS_WIND, OS_VELOCITY, OS_VELOCITY_SETTING } from "../../../recoil/atoms"
+import { calc_wind_speed_and_dir_true } from "../../../utils"
+
 
 export default function FloatAppWind() {
-  const { innerWidth: width, innerHeight: height } = window;
+  const { innerWidth: width, innerHeight: height } = window
+
+  const osHeading = useRecoilValue(OS_HEADING)
+  const osHeadingSetting = useRecoilValue(OS_HEADING_SETTING)
+  const osWind = useRecoilValue(OS_WIND)
+  const osWindSetting = useRecoilValue(OS_WIND_SETTING)
+  const osVelocity = useRecoilValue(OS_VELOCITY)
+  const osVelocitySetting = useRecoilValue(OS_VELOCITY_SETTING)
+
+  const true_wind = calc_wind_speed_and_dir_true(
+    // osHeading[osHeadingSetting.source]?.heading,
+   45,
+    osVelocity[osVelocitySetting.source]?.sog,
+    osWind[osWindSetting.source]?.wind_speed,
+    osWind[osWindSetting.source]?.wind_angle
+  )
+
 
   return (
     <Rnd
       default={{
         x: width * 0.1,
         y: height * 0.1,
-
       }}
       style={{ zIndex: "10000" }}
     >
       <Paper
         sx={{
           width: "100%",
           height: "100%",
-
         }}
       >
         <AppWindCurrent
-          heading={45}
-          windSpeedTrue={10}
-          windSpeedRel={20}
-          windDirTrue={270}
-          windDirRel={180}
+          heading={osHeading[osHeadingSetting.source]?.heading}
+          sog={osVelocity[osVelocitySetting.source]?.sog}
+          windSpeedRel={osWind[osWindSetting.source]?.wind_speed}
+          windDirRel={osWind[osWindSetting.source]?.wind_angle}
+          windSpeedTrue={true_wind.speed}
+          windDirTrue={true_wind.direction}
           windDirDistribution={90}
           currentSpeedTrue={20}
           currentSpeedRel={10}
@@ -38,5 +57,5 @@ export default function FloatAppWind() {
         />
       </Paper>
     </Rnd>
-  );
+  )
 }

src/pages/ECDIS/components/ChartControls.jsx

@@ -16,7 +16,7 @@ import React from "react"
 import { useTheme } from "@mui/material/styles"
 import ZoomOutIcon from "@mui/icons-material/ZoomOut"
 import ZoomInIcon from "@mui/icons-material/ZoomIn"
-import { atomMapState, atomMapSetting, atomLayersTaggable, atomLayersShowing } from "./SeaChart"
+import { atomMapState, atomMapSetting, atomLayersTaggable, atomLayersShowing, atomSensorLayersShowing, atomSensorLayersTaggable } from "./SeaChart"
 import { useRecoilState, useRecoilValue } from "recoil"
 import { OS_POSITIONS, OS_POSITION_SETTING } from "../../../recoil/atoms"
 
@@ -42,6 +42,8 @@ export default function ChartControls() {
   const [mapSetting, setMapSetting] = useRecoilState(atomMapSetting)
   const layersTaggable = useRecoilValue(atomLayersTaggable)
   const [layersShowing, setLayersShowing] = useRecoilState(atomLayersShowing)
+  const sensorLayersTaggable = useRecoilValue(atomSensorLayersTaggable)
+  const [sensorLayersShowing, setSensorLayersShowing] = useRecoilState(atomSensorLayersShowing)
   const osPos = useRecoilValue(OS_POSITIONS)
   const osPosSetting = useRecoilValue(OS_POSITION_SETTING)
 
@@ -106,6 +108,19 @@ export default function ChartControls() {
     )
   }
 
+  const handleChangeSensorLayer = event => {
+    const {
+      target: { value },
+    } = event
+    setSensorLayersShowing(
+      // On autofill we get a stringified value.
+      typeof value === "string" ? value.split(",") : value
+    )
+  }
+
+
+
+
   const setOsPosChartCenter = () => {
     setMapState({
       ...mapState,
@@ -179,6 +194,33 @@ export default function ChartControls() {
           ))}
         </Select>
       </FormControl>
+
+      {/* SENSOR LAYERS SELECTOR */}
+      <FormControl sx={{ width: 500 }} size="small">
+        <InputLabel id="sensor-layer-chip-label">Sensor Layers</InputLabel>
+        <Select
+          labelId="sensor-layer-chip-label"
+          id="sensor-layer-chip"
+          multiple
+          value={sensorLayersShowing}
+          onChange={handleChangeSensorLayer}
+          input={<OutlinedInput id="select-sensor-layer-chip" label="Chart Layers" />}
+          renderValue={selected => (
+            <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
+              {selected.map(value => (
+                <Chip key={value} label={value} size="small" />
+              ))}
+            </Box>
+          )}
+          MenuProps={MenuProps}
+        >
+          {sensorLayersTaggable.map(name => (
+            <MenuItem key={name} value={name} style={getStyles(sensorLayersTaggable, name, theme)}>
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
     </Stack>
   )
 }