bd_group
/
gnss-tool-kit
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化显示效果，修复GSA语句卫星系统标识错误的BUG，添加软件关闭功能

master
qubiaobiao 2024-03-28 11:10:42 +08:00
parent a36b1dafd6
commit f1c8e2ea24
8 changed files with 175 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/main/api/NMEAHandler.js
View File

@ -21,6 +21,10 @@ const emit = (eventName, ...args) => {
});
}
const includes = (arr1, arr2) => {
return arr2.every(val => arr1.includes(val));
}
const handle = (value) => {
if (value.length <= 0) return
@ -32,6 +36,30 @@ const handle = (value) => {
doHandle(element)
}
nmeaObj.GSA.forEach(element => {
let nmeaCache = {
GB:{talker_id:'GB',satellites:[]},
GP:{talker_id:'GP',satellites:[]},
GL:{talker_id:'GL',satellites:[]},
GA:{talker_id:'GA',satellites:[]},
GQ:{talker_id:'GQ',satellites:[]}
};
nmeaObj.GSV.forEach(item => {
if(item.talker_id == nmeaCache[item.talker_id].talker_id){
item.satellites.forEach(index => {
nmeaCache[item.talker_id].satellites.push(Number(index.id));
});
}
});
for (const key in nmeaCache) {
const nmeaValue = nmeaCache[key];
if(includes(nmeaValue.satellites,element.satellites)){
element.talker_id = nmeaValue.talker_id;
}
}
nmeaCache = null;
});
emit('handled', nmeaObj)
nmeaObj = resetNMEAObj()
}

28
src/main/app.ts
View File

@ -67,6 +67,8 @@ async function checkLaunchEnv() {
}
}
var windows:Array<BrowserWindow> = [];
function createWindow(page: string, display: any) {
const win = new BrowserWindow({
fullscreen: true,
@ -94,6 +96,9 @@ function createWindow(page: string, display: any) {
} else {
win.loadFile(`dist/render/${page}.html`)
}
windows.push(win);
return win;
}
const sleep = (timeout:number) => {
@ -128,6 +133,29 @@ async function launch() {
globalShortcut.register('F11', () => { return })
}
ipcMain.on('CLOSE', (event) => {
const res = dialog.showMessageBox({
type: 'warning',
title: '警告',
message: '确定要关闭软件吗?',
detail: '关闭软件',
cancelId: 1, // 按esc默认点击索引按钮
defaultId: 0, // 默认高亮的按钮下标
buttons: ['确认', '取消'], // 按钮按索引从右往左排序
})
res.then((data)=>{
if(data.response == 0){
windows.forEach((key:BrowserWindow) => {
key.close();
});
windows = [];
}else{
console.log('not close software')
}
})
})
async function main() {
// 异步代码
const checkReault: any = await checkLaunchEnv()

6
src/render/components/Layout/TheHeader.vue
View File

@ -3,7 +3,7 @@
<Decoration8 class="w-1/4 h-16" />
<Decoration5 class="w-2/5 h-16 mt-12" />
<Decoration8 class="w-1/4 h-16" :reverse="true" />
<div class="absolute left-1/2 transform -translate-x-2/4 text-3xl font-bold top-8 text-white">{{ title }}</div>
<div @dblclick="close" class="absolute left-1/2 transform -translate-x-2/4 text-3xl font-bold top-8 text-white">{{ title }}</div>
</div>
</template>
@ -11,6 +11,10 @@
import Decoration5 from './Decoration5.vue'
import Decoration8 from './Decoration8.vue'
const close = () => {
window.ipcRenderer.send('CLOSE')
}
defineProps({
title: String
})

82
src/render/components/NMEAAnimation.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<div id="animationList" class="animationText mb-2"></div>
<div id="newnmeaList" class="animationText"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const animationValue = ref("");
const colorId = ref(0);
var nmeaList;
var newList;
const animate = (options) => {
var start = performance.now();
requestAnimationFrame(function animate(time) {
// timeFraction 的值从 0 到 1 变化
var timeFraction = (time - start) / options.duration;
if (timeFraction > 1) timeFraction = 1;
// 动画的当前状态
var progress = options.timing(timeFraction);
options.draw(progress);
if (timeFraction < 1) {
requestAnimationFrame(animate);
}
});
};
const add = (timeFraction) => {
return 1 - Math.sin(Math.acos(timeFraction));
};
const animateText = (nmeaNode, nmeaMsg) => {
let text = nmeaMsg,
textArr = text.split("\r\n"),
showText = textArr.slice(0, 20).join("\r\n"),
to = showText.length;
animate({
duration: 1000,
timing: add,
draw: function (progress) {
nmeaNode.innerText = text.substr(0, to * progress);
},
});
};
let colorPie = ["#DAE3F3", "#FBE5D6", "#EDEDED", "#FFF2CC", "#DEEBF7", "#E2F0D9"];
const update = async (nmeaOrigin) => {
if (nmeaOrigin != undefined) {
nmeaList.innerText = animationValue.value;
nmeaList.style.color = colorPie[colorId.value];
animateText(newList, nmeaOrigin);
colorId.value++;
if (colorId.value == 6) {
colorId.value = 0;
}
newList.style.color = colorPie[colorId.value];
animationValue.value = nmeaOrigin;
}
};
defineExpose({ update });
onMounted(() => {
nmeaList = document.getElementById("animationList");
newList = document.getElementById("newnmeaList");
});
</script>
<style scoped>
.animationText {
font-size: 0.5rem;
line-height: 1rem;
}
</style>

15
src/render/components/SNRView.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="w-h-full">
<div :id="myid" class="w-h-full">
<v-chart :option="option" />
</div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { reactive, onMounted } from "vue";
import { use, graphic } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
@ -18,9 +18,17 @@ use([CanvasRenderer, BarChart, TitleComponent, GridComponent, DataZoomComponent]
const props = defineProps({
title: String,
color: String,
myid: String
});
onMounted(() => {
var mychart = document.getElementById(props.myid);
mychart.firstChild.firstChild.firstChild.style.margin = "auto";
});
let LinearStart!: string;
let LinearEnd!: string;
switch (props.color) {
case "rgb(255,50,50)":
LinearStart = "#ffc864";
@ -109,7 +117,8 @@ const option = reactive({
itemStyle: {
barBorderRadius: [50, 50, 0, 0],
color: function ({ value }) {
return !value || value[1] === 0 ? UN_POSITIONING_COLOR : IN_POSITIONING_COLOR;
// return !value || value[1] === 0 ? UN_POSITIONING_COLOR : IN_POSITIONING_COLOR;
return !value || value[2] ? IN_POSITIONING_COLOR : UN_POSITIONING_COLOR;
},
shadowColor: props.color,
shadowBlur: 6,

68
src/render/page/DataMonitorPage.vue
View File

@ -21,10 +21,7 @@
<Map ref="map" />
</div>
<div class="block-right-content w-1/5 flex flex-col py-2 px-2">
<div id="animationList" class="animationText mb-2">
</div>
<div id="newnmeaList" class="animationText">
</div>
<NMEAAnimation ref="nmeaAnimate" />
</div>
</div>
</div>
@ -39,6 +36,7 @@ import Clock from "../components/Clock.vue";
import Compass from "../components/Compass.vue";
import WaterLevel from "../components/WaterLevel.vue";
import Map from "../components/Map.vue";
import NMEAAnimation from "../components/NMEAAnimation.vue";
import { ref, reactive, onMounted } from "vue";
import { Helpers } from "nmea";
@ -49,9 +47,9 @@ const clock = ref(null);
const compass = ref(null);
const waterLevel = ref(null);
const map = ref(null);
const nmeaAnimate = ref(null);
const deepmsg = ref(null);
const animationValue = ref('');
const colorId = ref(0);
const stagingObj = reactive({
dataTime: null,
longitude: NaN,
@ -119,64 +117,11 @@ const update = (nmeaStr: string) => {
clock.value.update(stagingObj.dateTime);
compass.value.update(stagingObj.variation, stagingObj.variationPole);
waterLevel.value.update(stagingObj.alt);
console.log(deepmsg.value);
map.value.update(stagingObj.longitude, stagingObj.latitude, deepmsg.value);
};
var nmeaList;
var newList;
const animate = (options) => {
var start = performance.now();
requestAnimationFrame(function animate(time) {
// timeFraction 的值从 0 到 1 变化
var timeFraction = (time - start) / options.duration;
if (timeFraction > 1) timeFraction = 1;
// 动画的当前状态
var progress = options.timing(timeFraction);
options.draw(progress);
if (timeFraction < 1) {
requestAnimationFrame(animate);
}
});
};
const add = (timeFraction) => {
return 1 - Math.sin(Math.acos(timeFraction));
};
const animateText = (nmeaNode, nmeaMsg) => {
let text = nmeaMsg,
textArr = text.split("\r\n"),
showText = textArr.slice(0,20).join("\r\n"),
to = showText.length;
animate({
duration: 1000,
timing: add,
draw: function (progress) {
nmeaNode.innerText = text.substr(0, to*progress);
},
});
};
let colorPie = ['#DAE3F3','#FBE5D6','#EDEDED','#FFF2CC','#DEEBF7','#E2F0D9'];
const nmeaAnmiation = async (nmeaOrigin: string) => {
if (nmeaOrigin != undefined) {
nmeaList.innerText = animationValue.value;
nmeaList.style.color = colorPie[colorId.value];
animateText(newList, nmeaOrigin);
colorId.value++;
if(colorId.value == 6){
colorId.value = 0;
}
newList.style.color = colorPie[colorId.value];
animationValue.value = nmeaOrigin;
}
nmeaAnimate.value.update(nmeaOrigin);
};
const deepset = (deepArr: Array<string | boolean>) => {
@ -188,11 +133,8 @@ onMounted(() => {
ipcRenderer.receive("deep", deepset);
ipcRenderer.receive("nmea", update);
ipcRenderer.receive("NMEA_RECEIVED", nmeaAnmiation);
ipcRenderer.send("APP_MOUNTED");
}
nmeaList = document.getElementById("animationList");
newList = document.getElementById("newnmeaList");
});
</script>

16
src/render/page/SignalMonitorPage.vue
View File

@ -4,16 +4,16 @@
<div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
<div class="w-11/12 justify-self-end">
<SNRView ref="BDSNRView" color="rgb(255,50,50)" title="北斗" />
<SNRView ref="BDSNRView" color="rgb(255,50,50)" myid="bdBar" title="北斗" />
</div>
<div class="w-11/12 justify-self-start">
<SNRView ref="GPSNRView" color="rgb(0,204,255)" title="GPS" />
<SNRView ref="GPSNRView" color="rgb(0,204,255)" myid="gpsBar" title="GPS" />
</div>
<div class="w-11/12 justify-self-end">
<SNRView ref="GLSNRView" color="rgb(102,0,255)" title="GLONASS" />
<SNRView ref="GLSNRView" color="rgb(102,0,255)" myid="glonassBar" title="GLONASS" />
</div>
<div class="w-11/12 justify-self-start">
<SNRView ref="GASNRView" color="rgb(0,204,102)" title="Galileo" />
<SNRView ref="GASNRView" color="rgb(0,204,102)" myid="galileoBar" title="Galileo" />
</div>
</div>
</full-screen-container>
@ -42,6 +42,14 @@ const update = (nmeaStr: string) => {
const lineMax=bd_gp_satellite_count>gl_ga_satellite_count?bd_gp_satellite_count:gl_ga_satellite_count
// TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
// 粗细不一致，x轴长度以各数据条目自身为准
// BDSNRView.value.update(bd.GSVArr, bd.GSAArr, getSatelliteCount(bd.GSVArr))
// GPSNRView.value.update(gp.GSVArr, gp.GSAArr, getSatelliteCount(gp.GSVArr))
// GLSNRView.value.update(gl.GSVArr, gl.GSAArr, getSatelliteCount(gl.GSVArr))
// GASNRView.value.update(ga.GSVArr, ga.GSAArr, getSatelliteCount(ga.GSVArr))
// 粗细一致，x轴长度以数据最多的条目为准
BDSNRView.value.update(bd.GSVArr, bd.GSAArr, lineMax)
GPSNRView.value.update(gp.GSVArr, gp.GSAArr, lineMax)
GLSNRView.value.update(gl.GSVArr, gl.GSAArr, lineMax)

6
src/render/page/StateMonitorPage.vue
View File

@ -7,13 +7,13 @@
<PlanisphereView ref="BDPlanisphereView" color="rgb(255,50,50)" title="北斗" baseUrl="beidou" />
</div>
<div class="w-5/6 justify-self-start">
<PlanisphereView ref="GPPlanisphereView" color="rgb(10,40,100)" title="GPS" baseUrl="gps" />
<PlanisphereView ref="GPPlanisphereView" color="rgb(0,204,255)" title="GPS" baseUrl="gps" />
</div>
<div class="w-5/6 justify-self-end">
<PlanisphereView ref="GLPlanisphereView" color="rgb(10,60,170)" title="GLONASS" baseUrl="glonass" />
<PlanisphereView ref="GLPlanisphereView" color="rgb(102,0,255)" title="GLONASS" baseUrl="glonass" />
</div>
<div class="w-5/6 justify-self-start">
<PlanisphereView ref="GAPlanisphereView" color="rgb(10,60,160)" title="Galileo" baseUrl="galileo" />
<PlanisphereView ref="GAPlanisphereView" color="rgb(0,204,102)" title="Galileo" baseUrl="galileo" />
</div>
</div>
</full-screen-container>