mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
attempt fixing charts
This commit is contained in:
parent
43162ff476
commit
5909f6912c
|
@ -57,7 +57,7 @@ function chatSelected(callsign){
|
||||||
|
|
||||||
<div class="list-group m-0 p-0" id="chat-list-tab" role="chat-tablist">
|
<div class="list-group m-0 p-0" id="chat-list-tab" role="chat-tablist">
|
||||||
<template v-for="(item, key) in chat.callsign_list" :key="item.dxcallsign">
|
<template v-for="(item, key) in chat.callsign_list" :key="item.dxcallsign">
|
||||||
<a class="list-group-item list-group-item-action border-bottom border-0" :class="{ active: key==0 }" :id="`list-chat-list-${item}`" data-bs-toggle="list" :href="`#list-${item}-messages`" role="tab" aria-controls="list-{{item}}-messages" @click="chatSelected(item)">
|
<a class="list-group-item list-group-item-action border-0 border-bottom rounded-0" :class="{ active: key==0 }" :id="`list-chat-list-${item}`" data-bs-toggle="list" :href="`#list-${item}-messages`" role="tab" aria-controls="list-{{item}}-messages" @click="chatSelected(item)">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-9">{{item}}</div>
|
<div class="col-9">{{item}}</div>
|
||||||
<div class="col-3">
|
<div class="col-3">
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-footer p-0 border-top-0" v-if="message.percent < 100">
|
<div class="card-footer p-0 border-top-0" v-if="message.percent < 100">
|
||||||
<div class="progress bg-secondary" :style="{ height: '10px' }">
|
<div class="progress bg-secondary rounded-0 rounded-bottom" :style="{ height: '10px' }">
|
||||||
<div
|
<div
|
||||||
class="progress-bar progress-bar-striped overflow-visible"
|
class="progress-bar progress-bar-striped overflow-visible"
|
||||||
role="progressbar"
|
role="progressbar"
|
||||||
|
|
|
@ -119,12 +119,12 @@ function changeGuiDesign(design) {
|
||||||
|
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-auto bg-body-tertiary border-end">
|
<div class="col-sm-auto bg-body-secondary border-end">
|
||||||
<div
|
<div
|
||||||
class="d-flex flex-sm-column flex-row flex-nowrap align-items-center sticky-top"
|
class="d-flex flex-sm-column flex-row flex-nowrap align-items-center sticky-top"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="list-group"
|
class="list-group bg-body-secondary"
|
||||||
id="main-list-tab"
|
id="main-list-tab"
|
||||||
role="tablist"
|
role="tablist"
|
||||||
style="margin-top: 100px"
|
style="margin-top: 100px"
|
||||||
|
|
|
@ -76,7 +76,7 @@ function startStopRecordAudio(){
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm">
|
<div class="col-sm">
|
||||||
<div class="progress mb-0" style="height: 22px">
|
<div class="progress mb-0 rounded-0 rounded-top" style="height: 22px">
|
||||||
<div
|
<div
|
||||||
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
||||||
id="noise_level"
|
id="noise_level"
|
||||||
|
@ -93,7 +93,7 @@ function startStopRecordAudio(){
|
||||||
S-Meter(dB): {{state.s_meter_strength_raw}}
|
S-Meter(dB): {{state.s_meter_strength_raw}}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress mb-0" style="height: 8px">
|
<div class="progress mb-0 rounded-0 rounded-bottom" style="height: 8px">
|
||||||
<div
|
<div
|
||||||
class="progress-bar progress-bar-striped bg-warning"
|
class="progress-bar progress-bar-striped bg-warning"
|
||||||
role="progressbar"
|
role="progressbar"
|
||||||
|
@ -129,7 +129,7 @@ function startStopRecordAudio(){
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm">
|
<div class="col-sm">
|
||||||
<div class="progress mb-0" style="height: 22px">
|
<div class="progress mb-0 rounded-0 rounded-top" style="height: 22px">
|
||||||
<div
|
<div
|
||||||
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
||||||
id="dbfs_level"
|
id="dbfs_level"
|
||||||
|
@ -146,7 +146,7 @@ function startStopRecordAudio(){
|
||||||
{{state.dbfs_level}} dBFS
|
{{state.dbfs_level}} dBFS
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress mb-0" style="height: 8px">
|
<div class="progress mb-0 rounded-0 rounded-bottom" style="height: 8px">
|
||||||
<div
|
<div
|
||||||
class="progress-bar progress-bar-striped bg-warning"
|
class="progress-bar progress-bar-striped bg-warning"
|
||||||
role="progressbar"
|
role="progressbar"
|
||||||
|
|
|
@ -108,7 +108,7 @@ try{
|
||||||
<td>{{ getDateTime(item.timestamp) }}</td>
|
<td>{{ getDateTime(item.timestamp) }}</td>
|
||||||
<td>{{ item.frequency }}</td>
|
<td>{{ item.frequency }}</td>
|
||||||
<td> </td>
|
<td> </td>
|
||||||
<td>{{ item.dxcallsign }}</td>
|
<td><span class="badge bg-secondary">{{ item.dxcallsign }}</span></td>
|
||||||
<td>{{ item.dxgrid }}</td>
|
<td>{{ item.dxgrid }}</td>
|
||||||
<td>{{ getMaidenheadDistance(item.dxgrid)}} km</td>
|
<td>{{ getMaidenheadDistance(item.dxgrid)}} km</td>
|
||||||
<td>{{ item.datatype }}</td>
|
<td>{{ item.datatype }}</td>
|
||||||
|
|
|
@ -55,55 +55,6 @@ switch (obj.delegateTarget.id) {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const scatterChartOptions = {
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
annotation: {
|
|
||||||
annotations: {
|
|
||||||
line1: {
|
|
||||||
type: "line",
|
|
||||||
yMin: 0,
|
|
||||||
yMax: 0,
|
|
||||||
borderColor: "rgb(255, 99, 132)",
|
|
||||||
borderWidth: 2,
|
|
||||||
},
|
|
||||||
line2: {
|
|
||||||
type: "line",
|
|
||||||
xMin: 0,
|
|
||||||
xMax: 0,
|
|
||||||
borderColor: "rgb(255, 99, 132)",
|
|
||||||
borderWidth: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animations: false,
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
type: "linear",
|
|
||||||
position: "bottom",
|
|
||||||
display: true,
|
|
||||||
min: -80,
|
|
||||||
max: 80,
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
display: true,
|
|
||||||
min: -80,
|
|
||||||
max: 80,
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -119,21 +70,146 @@ ChartJS.register(
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
//state.arq_speed_list = [{"snr":0.0,"bpm":104,"timestamp":1696189769},{"snr":0.0,"bpm":80,"timestamp":1696189778},{"snr":0.0,"bpm":70,"timestamp":1696189783},{"snr":0.0,"bpm":58,"timestamp":1696189792},{"snr":0.0,"bpm":52,"timestamp":1696189797},{"snr":"NaN","bpm":42,"timestamp":1696189811},{"snr":0.0,"bpm":22,"timestamp":1696189875},{"snr":0.0,"bpm":21,"timestamp":1696189881},{"snr":0.0,"bpm":17,"timestamp":1696189913},{"snr":0.0,"bpm":15,"timestamp":1696189932},{"snr":0.0,"bpm":15,"timestamp":1696189937},{"snr":0.0,"bpm":14,"timestamp":1696189946},{"snr":-6.1,"bpm":14,"timestamp":1696189954},{"snr":-6.1,"bpm":14,"timestamp":1696189955},{"snr":-5.5,"bpm":28,"timestamp":1696189963},{"snr":-5.5,"bpm":27,"timestamp":1696189963}]
|
||||||
|
|
||||||
|
var speed_listSize = state.arq_speed_list.length
|
||||||
|
|
||||||
|
var speedDataBpm = [];
|
||||||
|
|
||||||
|
for (var i = 0; i < speed_listSize; i++) {
|
||||||
|
speedDataBpm.push(state.arq_speed_list[i].bpm);
|
||||||
|
}
|
||||||
|
|
||||||
|
var speedDataTime = [];
|
||||||
|
|
||||||
|
for (var i = 0; i < speed_listSize; i++) {
|
||||||
|
var timestamp = state.arq_speed_list[i].timestamp * 1000;
|
||||||
|
var h = new Date(timestamp).getHours();
|
||||||
|
var m = new Date(timestamp).getMinutes();
|
||||||
|
var s = new Date(timestamp).getSeconds();
|
||||||
|
var time = h + ":" + m + ":" + s;
|
||||||
|
speedDataTime.push(time);
|
||||||
|
}
|
||||||
|
|
||||||
|
var speedDataSnr = [];
|
||||||
|
for (var i = 0; i < speed_listSize; i++) {
|
||||||
|
let snr = NaN;
|
||||||
|
if (state.arq_speed_list[i].snr !== 0) {
|
||||||
|
snr = state.arq_speed_list[i].snr;
|
||||||
|
} else {
|
||||||
|
snr = NaN;
|
||||||
|
}
|
||||||
|
speedDataSnr.push(snr);
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://www.chartjs.org/docs/latest/samples/line/segments.html
|
||||||
|
const skipped = (speedCtx, value) =>
|
||||||
|
speedCtx.p0.skip || speedCtx.p1.skip ? value : undefined;
|
||||||
|
const down = (speedCtx, value) =>
|
||||||
|
speedCtx.p0.parsed.y > speedCtx.p1.parsed.y ? value : undefined;
|
||||||
|
|
||||||
|
var transmissionSpeedChartOptions = {
|
||||||
|
responsive: true,
|
||||||
|
animations: true,
|
||||||
|
cubicInterpolationMode: "monotone",
|
||||||
|
tension: 0.4,
|
||||||
|
scales: {
|
||||||
|
SNR: {
|
||||||
|
type: "linear",
|
||||||
|
ticks: { beginAtZero: false, color: "rgb(255, 99, 132)" },
|
||||||
|
position: "right",
|
||||||
|
},
|
||||||
|
SPEED: {
|
||||||
|
type: "linear",
|
||||||
|
ticks: { beginAtZero: false, color: "rgb(120, 100, 120)" },
|
||||||
|
position: "left",
|
||||||
|
grid: {
|
||||||
|
drawOnChartArea: false, // only want the grid lines for one axis to show up
|
||||||
|
},
|
||||||
|
},
|
||||||
|
x: { ticks: { beginAtZero: true } },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
const transmissionSpeedChartData = computed(() => ({
|
const transmissionSpeedChartData = computed(() => ({
|
||||||
labels: ['-10', '-5', '0', '5', '10'],
|
labels: speedDataTime,
|
||||||
datasets: [
|
datasets: [
|
||||||
{ data: state.arq_speed_list, label: 'BPM 0%' ,tension: 0.1, borderColor: 'rgb(0, 255, 0)' },
|
{
|
||||||
|
type: "line",
|
||||||
|
label: "SNR[dB]",
|
||||||
|
data: speedDataSnr,
|
||||||
|
borderColor: "rgb(75, 192, 192, 1.0)",
|
||||||
|
pointRadius: 1,
|
||||||
|
segment: {
|
||||||
|
borderColor: (speedCtx) =>
|
||||||
|
skipped(speedCtx, "rgb(0,0,0,0.4)") ||
|
||||||
|
down(speedCtx, "rgb(192,75,75)"),
|
||||||
|
borderDash: (speedCtx) => skipped(speedCtx, [3, 3]),
|
||||||
|
},
|
||||||
|
spanGaps: true,
|
||||||
|
backgroundColor: "rgba(75, 192, 192, 0.2)",
|
||||||
|
order: 1,
|
||||||
|
yAxisID: "SNR",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
label: "Speed[bpm]",
|
||||||
|
data: speedDataBpm,
|
||||||
|
borderColor: "rgb(120, 100, 120, 1.0)",
|
||||||
|
backgroundColor: "rgba(120, 100, 120, 0.2)",
|
||||||
|
order: 0,
|
||||||
|
yAxisID: "SPEED",
|
||||||
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
));
|
));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const scatterChartOptions = {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: true,
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
type: 'linear',
|
||||||
|
position: 'bottom',
|
||||||
|
grid: {
|
||||||
|
display: true,
|
||||||
|
lineWidth: 1, // Set the line width for x-axis grid lines
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
type: 'linear',
|
||||||
|
position: 'left',
|
||||||
|
grid: {
|
||||||
|
display: true,
|
||||||
|
lineWidth: 1, // Set the line width for y-axis grid lines
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
state.scatter = [{"x":"166","y":"46"},{"x":"-193","y":"-139"},{"x":"-165","y":"-291"},{"x":"311","y":"-367"},{"x":"389","y":"199"},{"x":"78","y":"372"},{"x":"242","y":"-431"},{"x":"-271","y":"-248"},{"x":"28","y":"-130"},{"x":"-20","y":"187"},{"x":"74","y":"362"},{"x":"-316","y":"-229"},{"x":"-180","y":"261"},{"x":"321","y":"360"},{"x":"438","y":"-288"},{"x":"378","y":"-94"},{"x":"462","y":"-163"},{"x":"-265","y":"248"},{"x":"210","y":"314"},{"x":"230","y":"-320"},{"x":"261","y":"-244"},{"x":"-283","y":"-373"}]
|
||||||
|
|
||||||
const scatterChartData = computed(() => ({
|
const scatterChartData = computed(() => ({
|
||||||
labels: ['-10', '-5', '0', '5', '10'],
|
|
||||||
datasets: [
|
datasets: [
|
||||||
{ type: 'scatter', data: state.scatter, label: 'PER 0%' ,tension: 0.1, borderColor: 'rgb(0, 255, 0)' },
|
{ type: 'scatter', fill: true, data: state.scatter, label: 'Scatter' ,tension: 0.1, borderColor: 'rgb(0, 255, 0)' },
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
));
|
));
|
||||||
|
@ -250,7 +326,8 @@ const scatterChartData = computed(() => ({
|
||||||
role="tabpanel"
|
role="tabpanel"
|
||||||
aria-labelledby="list-scatter-list"
|
aria-labelledby="list-scatter-list"
|
||||||
>
|
>
|
||||||
<Line :data="scatterChartData" :options="scatterChartOptions" />
|
<Scatter :data="scatterChartData" :options="scatterChartOptions" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="tab-pane fade"
|
class="tab-pane fade"
|
||||||
|
|
|
@ -238,7 +238,7 @@ const settings = useSettingsStore(pinia);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="progress w-100" style="height: 20px; min-width: 200px">
|
<div class="progress w-100 rounded-0 rounded-top" style="height: 20px; min-width: 200px">
|
||||||
<div
|
<div
|
||||||
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
||||||
id="transmission_progress"
|
id="transmission_progress"
|
||||||
|
@ -257,7 +257,7 @@ const settings = useSettingsStore(pinia);
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="progress mb-0" style="height: 10px">
|
<div class="progress mb-0 rounded-0 rounded-bottom" style="height: 10px">
|
||||||
<div
|
<div
|
||||||
class="progress-bar progress-bar-striped bg-warning"
|
class="progress-bar progress-bar-striped bg-warning"
|
||||||
id="transmission_timeleft"
|
id="transmission_timeleft"
|
||||||
|
|
|
@ -271,17 +271,16 @@ export function deleteMessageFromDB(id){
|
||||||
|
|
||||||
// function to update transmission status
|
// function to update transmission status
|
||||||
export function updateTransmissionStatus(obj){
|
export function updateTransmissionStatus(obj){
|
||||||
console.log(obj.percent)
|
|
||||||
console.log(obj.uuid)
|
|
||||||
console.log(obj.status)
|
|
||||||
|
|
||||||
// update database entries
|
// update database entries
|
||||||
databaseUpsert(obj.uuid, "percent", obj.percent)
|
databaseUpsert(obj.uuid, "percent", obj.percent)
|
||||||
databaseUpsert(obj.uuid, "bytesperminute", obj.bytesperminute)
|
databaseUpsert(obj.uuid, "bytesperminute", obj.bytesperminute)
|
||||||
|
databaseUpsert(obj.uuid, "status", obj.status)
|
||||||
|
|
||||||
// update screen rendering / messages
|
// update screen rendering / messages
|
||||||
updateUnsortedChatListEntry(obj.uuid, "percent", obj.percent)
|
updateUnsortedChatListEntry(obj.uuid, "percent", obj.percent)
|
||||||
updateUnsortedChatListEntry(obj.uuid, "bytesperminute", obj.bytesperminute)
|
updateUnsortedChatListEntry(obj.uuid, "bytesperminute", obj.bytesperminute)
|
||||||
|
updateUnsortedChatListEntry(obj.uuid, "status", obj.status)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -185,7 +185,7 @@ client.on("data", function (socketdata) {
|
||||||
stateStore.fft = data["fft"]
|
stateStore.fft = data["fft"]
|
||||||
stateStore.channel_busy = data["channel_busy"]
|
stateStore.channel_busy = data["channel_busy"]
|
||||||
stateStore.channel_busy_slot = data["channel_busy_slot"]
|
stateStore.channel_busy_slot = data["channel_busy_slot"]
|
||||||
stateStore.scatter = data["scatter"]
|
//stateStore.scatter = data["scatter"]
|
||||||
// s meter strength
|
// s meter strength
|
||||||
stateStore.s_meter_strength_raw = data["strength"]
|
stateStore.s_meter_strength_raw = data["strength"]
|
||||||
if (stateStore.s_meter_strength_raw == "") {
|
if (stateStore.s_meter_strength_raw == "") {
|
||||||
|
@ -402,12 +402,15 @@ client.on("data", function (socketdata) {
|
||||||
break;
|
break;
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
updateTransmissionStatus(data)
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
switch (data["irs"]) {
|
switch (data["irs"]) {
|
||||||
case "True":
|
case "True":
|
||||||
|
updateTransmissionStatus(data)
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
updateTransmissionStatus(data)
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
@ -436,6 +439,7 @@ client.on("data", function (socketdata) {
|
||||||
|
|
||||||
case "transmitted":
|
case "transmitted":
|
||||||
// ARQ transmitted
|
// ARQ transmitted
|
||||||
|
updateTransmissionStatus(data)
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue