Merge pull request #20 from MO-RISE/local-mqtt

Local MQTT connector added

.gitignore

@@ -6,4 +6,5 @@ env-config.js
 firebase-debug.log
 firebase.json
 .firebaserc
-.firebase
+.firebase
+package-lock.json

package.json

@@ -10,36 +10,35 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@harmony-dev/protobufjs-cli": "^1.0.1",
-    "@mui/icons-material": "^5.10.9",
-    "@mui/material": "^5.10.9",
-    "@mui/styled-engine-sc": "^5.10.6",
+    "@mui/icons-material": "^5.10.16",
+    "@mui/material": "^5.10.17",
+    "@mui/styled-engine-sc": "^5.10.16",
     "@tensorflow-models/coco-ssd": "^2.2.2",
     "@tensorflow/tfjs": "^3.21.0",
     "@turf/turf": "^6.5.0",
     "cra-template": "^1.2.0",
-    "deck.gl": "^8.8.13",
+    "deck.gl": "^8.8.20",
     "formik": "^2.2.9",
-    "framer-motion": "^7.5.3",
+    "framer-motion": "^7.6.19",
     "google-protobuf": "^3.21.2",
-    "mapbox-gl": "^2.10.0",
+    "mapbox-gl": "^2.11.0",
     "moment-timezone": "^0.5.37",
-    "openbridge-css": "^0.2.1",
+    "openbridge-css": "^0.2.2",
     "openbridge-web-components": "^0.2.2",
-    "paho-mqtt": "^1.1.0",
     "precompiled-mqtt": "^4.3.13",
     "protobufjs": "^7.1.2",
     "protobufjs-cli-dbx": "^7.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
-    "react-live-clock": "^6.0.6",
-    "react-map-gl": "^7.0.19",
+    "react-live-clock": "^6.1.1",
+    "react-map-gl": "^7.0.20",
     "react-moment": "^1.1.2",
     "react-rnd": "^10.3.7",
     "react-router-dom": "^6.4.2",
     "react-scripts": "^5.0.1",
     "react-spring": "^9.5.5",
-    "recharts": "^2.1.15",
+    "recharts": "^2.1.16",
     "recoil": "^0.7.6",
     "styled-components": "^5.3.6",
     "web-vitals": "^3.0.3",

src/App.jsx

@@ -18,10 +18,9 @@ import PageBearingRate from "./pages/bearing-rate"
 import ELookout from "./pages/e-lookout"
 import ELookoutV2 from "./pages/e-lookout-v2"
 import DeviceSensors from "./pages/device-sensors"
-// import PageVesselSpinner from "./pages/vesselSpinner";
 // MQTT
-import RemoteMqttConnection from "./base-elements/RemoteMqttConnection"
-import { mqttSubscribe } from "./base-elements/RemoteMqttConnection"
+import MqttConnectionLOCAL from "./base-elements/MqttConnectionLOCAL"
+import { mqttSubscribeLOCAL } from "./base-elements/MqttConnectionLOCAL"
 import DeviceConnection from "./base-elements/DeviceConnection"
 
 export default function App() {
@@ -97,15 +96,16 @@ export default function App() {
   })
 
   theme = responsiveFontSizes(theme)
-
+  /* eslint-disable */
   useEffect(() => {
-    mqttSubscribe("CROWSNEST/#")
+    mqttSubscribeLOCAL("CROWSNEST/#")
   }, [])
+  /* eslint-enable */
 
   return (
     <>
-      <RemoteMqttConnection />
-      <DeviceConnection/>
+      <MqttConnectionLOCAL />
+      <DeviceConnection />
 
       <ThemeProvider theme={theme}>
         <CssBaseline />

src/base-elements/RemoteMqttConnection.jsx → src/base-elements/MqttConnectionLOCAL.jsx

@@ -1,37 +1,31 @@
 import React, { useEffect } from "react"
 import mqtt from "precompiled-mqtt"
-import { atom, useSetRecoilState, useRecoilState } from "recoil"
+import { useSetRecoilState, useRecoilState } from "recoil"
 import { wsMessageParser } from "../recoil/selectors"
+import {atomMQTTLocalState} from "../recoil/atoms"
 
 /* eslint-disable */
-const host = process.env.REACT_APP_MQTT_BROKER_ADDRESS
+// const host = process.env.REACT_APP_MQTT_BROKER_ADDRESS
+const host = "ws://localhost:80/mqtt"
 
 const options = {
   clientId: "crowsnest_app_" + Math.random(),
   connectTimeout: 4000,
-  username: process.env.REACT_APP_MQTT_USERNAME,
-  password: process.env.REACT_APP_MQTT_PASSWORD,
+  // username: process.env.REACT_APP_MQTT_USERNAME,
+  // password: process.env.REACT_APP_MQTT_PASSWORD,
   protocolVersion: 5,
 }
 /* eslint-enable */
 
 let client = mqtt.connect(host, options)
 
-export const mqttMessageAtom = atom({
-  key: "mqtt_message",
-  default: { topic: "", payload: null },
-})
 
-export const mqttStateAtom = atom({
-  key: "mqtt_state",
-  default: { connected: false },
-})
 
-export function mqttSubscribe(topic) {
+export function mqttSubscribeLOCAL(topic) {
   client.subscribe(topic, err => console.log(err))
 }
 
-export function mqttPublish(topic, qos, payload) {
+export function mqttPublishLOCAL(topic, qos, payload) {
   payload = JSON.stringify(payload)
 
   client.publish(topic, payload, { qos }, error => {
@@ -41,8 +35,8 @@ export function mqttPublish(topic, qos, payload) {
   })
 }
 
-export default function RemoteMqttConnection() {
-  const [mqttState, setMqttState] = useRecoilState(mqttStateAtom)
+export default function MqttConnectionLOCAL() {
+  const [mqttState, setMqttState] = useRecoilState(atomMQTTLocalState)
   const parseWsMessage = useSetRecoilState(wsMessageParser)
 
   useEffect(() => {

src/base-elements/components/apps/Playback.jsx

@@ -7,7 +7,7 @@ import LockOpenIcon from "@mui/icons-material/LockOpen";
 import LockIcon from "@mui/icons-material/Lock";
 import { playbackState } from "../../../recoil/atoms";
 import { useRecoilState } from "recoil";
-import { mqttPublish } from "../../RemoteMqttConnection";
+// import { mqttPublishRemote } from "../../MqttConnectionREMOTE";
 
 const TinyText = styled(Typography)({
   fontSize: "0.75rem",
@@ -39,14 +39,14 @@ export default function Playback({ setIsDraggable, isDraggable }) {
 
     let payload = { actionPlay: action };
 
-    mqttPublish(topic, qos, payload);
+    // mqttPublishRemote(topic, qos, payload);
   };
 
   const changeTimePointer = (value) => {
     let topic = "/playback/action";
     let qos = 0;  
     let payload = { timeLinePos: value };
-    mqttPublish(topic, qos, payload);
+    // mqttPublishRemote(topic, qos, payload);
 
     setPlaybackObj({
       ...playbackObj,

src/index.jsx

@@ -1,22 +1,22 @@
-import React from "react";
+import React from "react"
 // import ReactDOM from "react-dom";
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
-import { RecoilRoot } from "recoil";
+import { createRoot } from "react-dom/client"
+import "./index.css"
+import App from "./App"
+import reportWebVitals from "./reportWebVitals"
+import { RecoilRoot } from "recoil"
 
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById("root"))
 
 root.render(
   // <React.StrictMode>
-    <RecoilRoot>
-      <App />
-    </RecoilRoot>
-  // </React.StrictMode> 
-);
+  <RecoilRoot>
+    <App />
+  </RecoilRoot>
+  // </React.StrictMode>
+)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()

src/pages/ECDIS/components/SeaChart.jsx

@@ -1,23 +1,28 @@
 import React, { useEffect } from "react"
+import { calcPosFromBearingDistance } from "../../../utils"
 import { atom, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"
 import {
   lidarObservationAtom,
   targetsAIS,
   radarObservationAtom,
   OS_POSITIONS,
   OS_POSITION_SETTING,
+  OS_HEADING,
+  OS_HEADING_SETTING,
   AtomShoreRadarObservation,
 } from "../../../recoil/atoms"
 // import "mapbox-gl/dist/mapbox-gl.css"
-import { Map } from "react-map-gl"
+import { Map, StaticMap } from "react-map-gl"
 import { HeatmapLayer } from "@deck.gl/aggregation-layers"
 import DeckGL from "@deck.gl/react"
 import VesselContourLayer from "../../../base-elements/custom-deckgl-layers/vessel-contour-layer"
 import { PointCloudLayer } from "@deck.gl/layers"
 import { COORDINATE_SYSTEM } from "@deck.gl/core"
-import { BitmapLayer, IconLayer, ScatterplotLayer } from "@deck.gl/layers"
+import { BitmapLayer, IconLayer, LineLayer } from "@deck.gl/layers"
 import { TileLayer } from "@deck.gl/geo-layers"
 import PicOwnShipBlack from "../../../resources/chart_symbols/own_ship_black.png"
+import { MapView, FirstPersonView } from "@deck.gl/core"
+import 'mapbox-gl/dist/mapbox-gl.css';
 
 // Atoms
 export const vesselTargetsAtom = atom({
@@ -91,7 +96,6 @@ function getTooltip({ object }) {
   )
 }
 
-const MAPBOX_ACCESS_TOKEN = "pk.eyJ1IjoieXlkZGVldHQiLCJhIjoiY2t0eGEyNjJhMWI0NjJxcW53dGNrMmk2eSJ9.6bkGb4cvC5pbb8sisIScSw"
 
 export default function SeaChart() {
   const setClickInfo = useSetRecoilState(clickInfoAtom)
@@ -102,6 +106,8 @@ export default function SeaChart() {
 
   const os_pos = useRecoilValue(OS_POSITIONS)
   const os_pos_setting = useRecoilValue(OS_POSITION_SETTING)
+  const os_heading = useRecoilValue(OS_HEADING)
+  const os_heading_setting = useRecoilValue(OS_HEADING_SETTING)
 
   const AIStargets = useRecoilValue(targetsAIS)
   const radarFrames = useRecoilValue(radarObservationAtom)
@@ -118,6 +124,15 @@ export default function SeaChart() {
   //   maxPitch: 85,
   // })
 
+  // Viewport settings
+  const INITIAL_VIEW_STATE = {
+    longitude: -122.41669,
+    latitude: 37.7853,
+    zoom: 13,
+    pitch: 0,
+    bearing: 0,
+  }
+
   useEffect(() => {
     if (mapSetting.chartFix === "OS") {
       setMapState({
@@ -161,29 +176,6 @@ export default function SeaChart() {
       },
     }),
 
-      // SEA CHART NAVICO
-      new TileLayer({
-        id: "tail-layer-navico",
-        visible: true,
-        data: "https://backend.navionics.com/tile/{z}/{x}/{y}?LAYERS=config_1_20.00_0&TRANSPARENT=FALSE&UGC=TRUE&theme=0&navtoken=eyJrZXkiOiJOQVZJT05JQ1NfV0VCQVBQX1AwMSIsImtleURvbWFpbiI6IndlYmFwcC5uYXZpb25pY3MuY29tIiwicmVmZXJlciI6IndlYmFwcC5uYXZpb25pY3MuY29tIiwicmFuZG9tIjoxNjY3NDcxOTk2NDE4fQ",
-        minZoom: 0,
-        maxZoom: 19,
-        tileSize: 256,
-
-        renderSubLayers: props => {
-          const {
-            bbox: { west, south, east, north },
-          } = props.tile
-
-          return new BitmapLayer(props, {
-            data: null,
-            image: props.data,
-            bounds: [west, south, east, north],
-          })
-        },
-      }),
-
-
     // Open street map
     new TileLayer({
       id: "tail-layer-open-street-map",
@@ -364,7 +356,7 @@ export default function SeaChart() {
       // getPosition: d => {
       //   // console.log("HERE",d)
       //   return [d[1],d[0]]
-      // },  
+      // },
       getPosition: d => d.point, // SWEEP
       getWeight: d => d.weight,
       aggregation: "MEAN", // SUM or MEAN
@@ -380,9 +372,9 @@ export default function SeaChart() {
       id: "shore-radar-heatmapLayer",
       data: shoreRadarFrames,
       coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
-      coordinateOrigin: [(os_pos[os_pos_setting.source].longitude - 0.002), os_pos[os_pos_setting.source].latitude],
-      
-      getPosition: d => d.point, 
+      coordinateOrigin: [os_pos[os_pos_setting.source].longitude - 0.002, os_pos[os_pos_setting.source].latitude],
+
+      getPosition: d => d.point,
       getWeight: d => d.weight,
       aggregation: "MEAN", // SUM or MEAN
       weightsTextureSize: 2048, //  default 2048 Smaller texture sizes lead to visible pixelation.
@@ -415,8 +407,7 @@ export default function SeaChart() {
     //   visible: false,
     // }),
 
-
-    //  LIDAR layer 
+    //  LIDAR layer
     new PointCloudLayer({
       id: "lidar-point-cloud-layer",
       data: lidarObservations,
@@ -455,6 +446,17 @@ export default function SeaChart() {
       getPosition: d => d.pos,
       getSize: () => 5,
     }),
+
+    new LineLayer({
+      id: 'heading-line-layer',
+      visible: true,
+      data: [{ pos: [os_pos[os_pos_setting.source].longitude, os_pos[os_pos_setting.source].latitude], heading: os_heading[os_heading_setting.source].heading }],
+      pickable: true,
+      getWidth: 2,
+      getSourcePosition: d => d.pos,
+      getTargetPosition: d => calcPosFromBearingDistance(d.pos[1],d.pos[0],d.heading,10),
+      getColor: d => [0, 0, 0]
+    })
   ]
 
   const hoverMapCursor = e => {
@@ -477,24 +479,14 @@ export default function SeaChart() {
     <DeckGL
       layers={layers}
       viewState={mapState}
+      initialViewState={INITIAL_VIEW_STATE}
       onViewStateChange={e => changeViewState(e)}
       onHover={e => hoverMapCursor(e)}
       controller={{ dragPan: true, doubleClickZoom: false }}
       getTooltip={getTooltip}
       getCursor={() => "crosshair"}
     >
-      <Map
-        mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
-        fog={{
-          range: [-1, 2],
-          "horizon-blend": 0.3,
-          color: "white",
-          "high-color": "#add8e6",
-          "space-color": "#d8f2ff",
-          "star-intensity": 0.0,
-        }}
-        // mapStyle="mapbox://styles/mapbox/streets-v9"
-      />
+
     </DeckGL>
   )
 }

src/pages/ECDIS/index.jsx

@@ -13,6 +13,7 @@ export default function Ecdis() {
         sx={{
           position: "relative",
           // height: "calc(100vh - 95px)",
+          padding: "0px",
           height: "90vh",
           cursor: "crosshair",
         }}