gao.zhiyuan
/
CraneAntiCollision
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

障碍物绘制

simplify_dependencies
巴林闲侠 2 years ago
parent
a9d6077b6f
commit
04aefef9ab
3 changed files with 129 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 148
      console/client/src/sections/console/containers/index.js
  3. 1
      console/client/src/utils/webapi.js

1
.gitignore
View File

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

148
console/client/src/sections/console/containers/index.js
View File

@ -42,8 +42,10 @@ function calculateIntersection (cx, cy, d, angle) {
return [intersection_x, intersection_y];
}
let ws;
let interval;
let dataLiveWs;
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.fillStyle = mainColor;
xyCtx.arc(
...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) {
interval = setInterval(() => {
dataLiveWs = new WebSocket(`${root.replace('http', 'ws')}/${ApiTable.dataLive}`); //建立websocket连接
dataLiveWs.onopen = function (e) {
dataLiveWsInterval = setInterval(() => {
// console.log("发送心跳保持长连接不超时断开");
this.send(JSON.stringify({ "act": "long_live" }));
}, 20000);//20秒一次
}
ws.onerror = e => {
console.log("websocket 发生错误：" + e)
dataLiveWs.onerror = 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('xz', msg)
// draw('xy', 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) {
ws.close();//关闭连接
window.clearInterval(interval);
if (dataLiveWs) {
window.clearInterval(dataLiveWsInterval);
dataLiveWs.close();//关闭连接
}
if (lidarLiveWs) {
window.clearInterval(lidarLiveWsInterval);
lidarLiveWs.close();//关闭连接
}
}
}, [])

1
console/client/src/utils/webapi.js
View File

@ -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',
};

Write Preview
Loading…
Cancel
Save