障碍物绘制

.gitignore

@@ -0,0 +1 @@
+*development.txt

console/client/src/sections/console/containers/index.js

@@ -42,8 +42,10 @@ function calculateIntersection (cx, cy, d, angle) {
     return [intersection_x, intersection_y];
 }
 
-let ws;
+let dataLiveWs;
-let interval;
+let lidarLiveWs;
+let dataLiveWsInterval;
+let lidarLiveWsInterval;
 function Index (props) {
     const { dispatch, craneData } = props
     const xyCvs = useRef()
@@ -70,6 +72,7 @@ function Index (props) {
         const canvasHeight = canvasArea.clientHeight - 12 * 2 - 6
         const canvasWidth = canvasArea.clientWidth / 14 * 10 - 12 * 2
         const mainColor = "rgb(249,179,45)"
+        const dangerColor = "red"
         if (type == 'xy') {
             // xy 视图
             const xyCtx = xyCvs.current.getContext("2d");
@@ -78,9 +81,20 @@ function Index (props) {
             const center = [canvasWidth / 2, canvasHeight / 2]
             // 直径
             const diameter = Math.min(canvasWidth, canvasHeight)
+            // 半径
+            const radius = diameter / 2
+            console.log(radius);
+            // 参数半径和绘制半径的比值
+            const radiusRate = (params.radius || radius) / radius
+            console.log(radiusRate);
+            // 当前旋转角度
+            let curRotation =
+                params.from == 'lidarLive' ?
+                    params?.rotation || 0 :
+                    params?.rotation?.Value || 0;
             // 画圆
             xyCtx.beginPath();
-            xyCtx.arc(...center, diameter / 2, 0, 2 * Math.PI);
+            xyCtx.arc(...center, radius, 0, 2 * Math.PI);
             if (darkModde) {
                 xyCtx.strokeStyle = darkColor.subTextColor;
                 // xyCtx.fill();
@@ -93,21 +107,88 @@ function Index (props) {
             xyCtx.fillStyle = mainColor;
             xyCtx.fill();
             xyCtx.stroke();
-            // 吊臂
+            // 吊臂 - 长~
-            let curRotation = params?.rotation?.Value || 42
             xyCtx.moveTo(...center);
-            xyCtx.lineTo(...calculateIntersection(...center, diameter, curRotation));
+            xyCtx.lineTo(
-            // 配重臂
+                ...calculateIntersection(
+                    ...center,
+                    ((params.boom || radius) / radiusRate) * 2, // 臂长
+                    curRotation
+                )
+            );
+            // 配重臂 - 尾巴
             xyCtx.moveTo(...center);
             xyCtx.lineTo(...calculateIntersection(...center, diameter / 8, curRotation + 180));
             xyCtx.strokeStyle = mainColor;
             xyCtx.stroke();
-            // 索
+            // 索 - 激光雷达 小点儿
             xyCtx.beginPath();
-            xyCtx.arc(...calculateIntersection(...center, 168, curRotation), diameter / 48, 0, 2 * Math.PI);
+            xyCtx.arc(
-            xyCtx.fillStyle = mainColor;
+                ...calculateIntersection(
+                    ...center,
+                    (params.lidar / radiusRate) * 2, // 绘制的离圆心的距离
+                    curRotation
+                ),
+                diameter / 128, // 点的大小
+                0,
+                2 * Math.PI
+            );
+            xyCtx.fillStyle = dangerColor;
             xyCtx.fill();
             xyCtx.stroke();
+            // 障碍物
+            // 测试数据
+            // params.blocks = [
+            //     [
+            //         {
+            //             "X": 324,
+            //             "Y": 231
+            //         },
+            //         {
+            //             "X": 654,
+            //             "Y": 234
+            //         },
+            //         {
+            //             "X": 453,
+            //             "Y": 231
+            //         },
+            //         {
+            //             "X": 452,
+            //             "Y": 34
+            //         },
+            //         {
+            //             "X": 453,
+            //             "Y": 34
+            //         },
+            //         {
+            //             "X": 45,
+            //             "Y": 67
+            //         }
+            //     ]
+            // ]
+            if (params.blocks && params.blocks.length) {
+                for (let block of params.blocks) {
+                    if (block && block.length) {
+                        for (let i = 0; i < block.length; i++) {
+                            let point = block[i]
+                            const x = point.X / radiusRate + center[0];
+                            const y = point.Y / radiusRate + center[1];
+                            if (i == 0) {
+                                xyCtx.beginPath();
+                                xyCtx.moveTo(x, y);
+                            } else {
+                                xyCtx.lineTo(x, y);
+                            }
+                        }
+                        xyCtx.closePath();
+                        xyCtx.lineWidth = 1;
+                        xyCtx.strokeStyle = dangerColor;
+                        xyCtx.fillStyle = dangerColor;
+                        xyCtx.fill();
+                        xyCtx.stroke();
+                    }
+                }
+            }
         }
         if (type == 'xz') {
             // xz 视图
@@ -442,24 +523,45 @@ function Index (props) {
         dispatch(getCrane())
 
         // 
+
         const root = window.FS_API_ROOT
-        ws = new WebSocket(`${root.replace('http', 'ws')}/${ApiTable.dataLive}`); //建立websocket连接
+
-        ws.onopen = function (e) {
+        dataLiveWs = new WebSocket(`${root.replace('http', 'ws')}/${ApiTable.dataLive}`); //建立websocket连接
-            interval = setInterval(() => {
+        dataLiveWs.onopen = function (e) {
+            dataLiveWsInterval = setInterval(() => {
                 // console.log("发送心跳保持长连接不超时断开");
                 this.send(JSON.stringify({ "act": "long_live" }));
             }, 20000);//20秒一次
         }
-        ws.onerror = e => {
+        dataLiveWs.onerror = e => {
-            console.log("websocket 发生错误：" + e)
+            console.log("websocket dataLiveWs 发生错误：" + e)
         }
-        ws.onmessage = evt => {
+        dataLiveWs.onmessage = evt => {
             let msg = JSON.parse(evt.data);
 
             if (msg) {
                 setCraneParams(msg)
-                draw('xy', msg)
+                // draw('xy', msg)
-                draw('xz', msg)
+                // draw('xz', msg)
+            }
+        }
+
+        lidarLiveWs = new WebSocket(`${root.replace('http', 'ws')}/${ApiTable.lidarLive}`); //建立websocket连接
+        lidarLiveWs.onopen = function (e) {
+            lidarLiveWsInterval = setInterval(() => {
+                // console.log("发送心跳保持长连接不超时断开");
+                this.send(JSON.stringify({ "act": "long_live" }));
+            }, 20000);//20秒一次
+        }
+        lidarLiveWs.onerror = e => {
+            console.log("websocket lidarLiveWs 发生错误：" + e)
+        }
+        lidarLiveWs.onmessage = evt => {
+            let msg = JSON.parse(evt.data);
+
+            if (msg) {
+                console.log(msg);
+                draw('xy', { ...msg, from: 'lidarLive' })
             }
         }
 
@@ -493,9 +595,13 @@ function Index (props) {
         })
 
         return () => {
-            if (ws) {
+            if (dataLiveWs) {
-                ws.close();//关闭连接
+                window.clearInterval(dataLiveWsInterval);
-                window.clearInterval(interval);
+                dataLiveWs.close();//关闭连接
+            }
+            if (lidarLiveWs) {
+                window.clearInterval(lidarLiveWsInterval);
+                lidarLiveWs.close();//关闭连接
             }
         }
     }, [])

console/client/src/utils/webapi.js

@@ -10,6 +10,7 @@ export const ApiTable = {
     dataLatest: 'v1/data/latest',
     craneSetting: 'v1/settings',
     dataLive: 'v1/data/live',
+    lidarLive: 'v1/lidar/live',
     videoGet: 'v1/video/get',
     logoutApp: 'v1/shutdown',
 };