Crash_Override/FreeDATA
1
0
Fork 0
mirror of https://github.com/DJ2LS/FreeDATA synced 2024-05-14 08:04:33 +00:00
Code Issues Projects Releases Packages Wiki Activity

[CodeFactor] Apply fixes

Browse source
This commit is contained in:
codefactor-io 2023-12-04 03:49:02 +00:00
parent ce12679f2d
commit 645b159d73
No known key found for this signature in database
GPG key ID: B66B2D63282C190F
14 changed files with 504 additions and 497 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
gui/src/components/dynamic_components2.vue
View file

@ -58,16 +58,8 @@ const gridWidgets = [
{ x: 1, y: 1, w: 3, h: 27 }, { x: 1, y: 1, w: 3, h: 27 },
"Mini Heard stations", "Mini Heard stations",
), ),
new gridWidget( new gridWidget(s_meter, { x: 1, y: 1, w: 2, h: 4 }, "S-Meter"),
s_meter, new gridWidget(dbfs_meter, { x: 1, y: 1, w: 2, h: 4 }, "Dbfs Meter"),
{ x: 1, y: 1, w: 2, h: 4 },
"S-Meter",
),
new gridWidget(
dbfs_meter,
{ x: 1, y: 1, w: 2, h: 4 },
"Dbfs Meter",
),
]; ];
onMounted(() => { onMounted(() => {
grid = GridStack.init({ grid = GridStack.init({
@ -77,8 +69,8 @@ onMounted(() => {
minRow: 50, minRow: 50,
margin: 5, margin: 5,
resizable: { resizable: {
handles: 'se,sw' handles: "se,sw",
} },
}); });
grid.on("dragstop", function (event, element) { grid.on("dragstop", function (event, element) {

27
gui/src/components/grid_active_audio.vue
View file

@ -16,14 +16,29 @@ function startStopRecordAudio() {
<div class="card w-100 h-100"> <div class="card w-100 h-100">
<div class="card-header"> <div class="card-header">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <button
class="btn btn-sm btn-outline-secondary dropdown-toggle"
</button> type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
></button>
<i class="bi bi-volume-up" style="font-size: 1rem"></i>&nbsp; <i class="bi bi-volume-up" style="font-size: 1rem"></i>&nbsp;
<strong>Audio</strong> <strong>Audio</strong>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#audioModal" href="#">Tune</a></li> <li>
<li><a class="dropdown-item" @click="startStopRecordAudio" href="#">Record</a></li> <a
class="dropdown-item"
data-bs-toggle="modal"
data-bs-target="#audioModal"
href="#"
>Tune</a
>
</li>
<li>
<a class="dropdown-item" @click="startStopRecordAudio" href="#"
>Record</a
>
</li>
</ul> </ul>
</div> </div>
</div> </div>

4
gui/src/components/grid_active_heard_stations.vue
View file

@ -84,7 +84,9 @@ function getMaidenheadDistance(dxGrid) {
> >
</td> </td>
<td> <td>
<span class="badge bg-secondary">{{ item[1].activity_type }}</span> <span class="badge bg-secondary">{{
item[1].activity_type
}}</span>
</td> </td>
<td> <td>
<span class="badge bg-secondary">{{ item[1].snr }}</span> <span class="badge bg-secondary">{{ item[1].snr }}</span>

6
gui/src/components/grid_active_heard_stations_mini.vue
View file

@ -60,13 +60,11 @@ function getMaidenheadDistance(dxGrid) {
<!--https://vuejs.org/guide/essentials/list.html--> <!--https://vuejs.org/guide/essentials/list.html-->
<tr v-for="item in state.activities" :key="item[0]"> <tr v-for="item in state.activities" :key="item[0]">
<td> <td>
<span class="fs-6">{{ <span class="fs-6">{{ getDateTime(item[1].timestamp) }}</span>
getDateTime(item[1].timestamp)
}}</span>
</td> </td>
<td> <td>
<span >{{ item[1].origin }}</span> <span>{{ item[1].origin }}</span>
</td> </td>
<td> <td>
<span>{{ item[1].snr }}</span> <span>{{ item[1].snr }}</span>

395
gui/src/components/grid_active_rig_control.vue
View file

@ -25,208 +25,211 @@ function set_hamlib_rf_level() {
</script> </script>
<template> <template>
<div class="card h-100"> <div class="card h-100">
<div class="card-header"> <div class="card-header">
<i class="bi bi-house-door" style="font-size: 1.2rem"></i>&nbsp; <i class="bi bi-house-door" style="font-size: 1.2rem"></i>&nbsp;
<strong>Radio control</strong> <strong>Radio control</strong>
</div>
<div class="card-body overflow-auto">
<div class="input-group input-group-sm bottom-0 m-0">
<div class="me-2">
<div class="input-group input-group-sm">
<span class="input-group-text">QRG</span>
<span class="input-group-text">{{ state.frequency }} Hz</span>
<!-- Dropdown Button -->
<button
v-bind:class="{
disabled: state.hamlib_status === 'disconnected',
}"
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-bs-toggle="dropdown"
aria-expanded="false"
></button>
<!-- Dropdown Menu -->
<ul
class="dropdown-menu"
aria-labelledby="dropdownMenuButton"
style="z-index: 50"
>
<li>
<div class="input-group p-1">
<span class="input-group-text">frequency</span>
<input
v-model="state.new_frequency"
style="max-width: 8rem"
pattern="[0-9]*"
type="text"
class="form-control form-control-sm"
v-bind:class="{
disabled: state.hamlib_status === 'disconnected',
}"
placeholder="Type frequency..."
aria-label="Frequency"
/>
<button
class="btn btn-sm btn-outline-success"
type="button"
@click="set_hamlib_frequency_manually"
v-bind:class="{
disabled: state.hamlib_status === 'disconnected',
}"
>
<i class="bi bi-check-square"></i>
</button>
</div>
</li>
<!-- Dropdown Divider -->
<li><hr class="dropdown-divider" /></li>
<!-- Dropdown Items -->
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(50616000)"
><strong>50616 kHz</strong>&nbsp;
<span class="badge bg-secondary">6m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(50308000)"
><strong>50308 kHz</strong>&nbsp;
<span class="badge bg-secondary">6m | USB</span>&nbsp;
<span class="badge bg-info">US</span></a
>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(28093000)"
><strong>28093 kHz</strong>&nbsp;
<span class="badge bg-secondary">10m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(27265000)"
><strong>27265 kHz</strong>&nbsp;
<span class="badge bg-secondary">11m | USB</span>&nbsp;
<span class="badge bg-dark">Ch 26</span></a
>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(27245000)"
><strong>27245 kHz</strong>&nbsp;
<span class="badge bg-secondary">11m | USB</span>&nbsp;
<span class="badge bg-dark">Ch 25</span></a
>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(24908000)"
><strong>24908 kHz</strong>&nbsp;
<span class="badge bg-secondary">12m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(21093000)"
><strong>21093 kHz</strong>&nbsp;
<span class="badge bg-secondary">15m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(14093000)"
><strong>14093 kHz</strong>&nbsp;
<span class="badge bg-secondary">20m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(7053000)"
><strong>7053 kHz</strong>&nbsp;
<span class="badge bg-secondary">40m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
</ul>
</div>
</div> </div>
<div class="card-body overflow-auto"> <div class="me-2">
<div class="input-group input-group-sm bottom-0 m-0"> <div class="input-group input-group-sm">
<div class="me-2"> <span class="input-group-text">Mode</span>
<div class="input-group input-group-sm"> <select
<span class="input-group-text">QRG</span> class="form-control"
<span class="input-group-text">{{ state.frequency }} Hz</span> v-model="state.mode"
@click="set_hamlib_mode()"
<!-- Dropdown Button --> v-bind:class="{
<button disabled: state.hamlib_status === 'disconnected',
v-bind:class="{ }"
disabled: state.hamlib_status === 'disconnected', >
}" <option value="USB">USB</option>
class="btn btn-secondary dropdown-toggle" <option value="LSB">LSB</option>
type="button" <option value="PKTUSB">PKT-U</option>
id="dropdownMenuButton" <option value="PKTLSB">PKT-L</option>
data-bs-toggle="dropdown" <option value="AM">AM</option>
aria-expanded="false" <option value="FM">FM</option>
></button> <option value="PKTFM">PKTFM</option>
</select>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="z-index: 50;">
<li>
<div class="input-group p-1">
<span class="input-group-text">frequency</span>
<input
v-model="state.new_frequency"
style="max-width: 8rem"
pattern="[0-9]*"
type="text"
class="form-control form-control-sm"
v-bind:class="{
disabled: state.hamlib_status === 'disconnected',
}"
placeholder="Type frequency..."
aria-label="Frequency"
/>
<button
class="btn btn-sm btn-outline-success"
type="button"
@click="set_hamlib_frequency_manually"
v-bind:class="{
disabled: state.hamlib_status === 'disconnected',
}"
>
<i class="bi bi-check-square"></i>
</button>
</div>
</li>
<!-- Dropdown Divider -->
<li><hr class="dropdown-divider" /></li>
<!-- Dropdown Items -->
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(50616000)"
><strong>50616 kHz</strong>&nbsp;
<span class="badge bg-secondary">6m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(50308000)"
><strong>50308 kHz</strong>&nbsp;
<span class="badge bg-secondary">6m | USB</span>&nbsp;
<span class="badge bg-info">US</span></a
>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(28093000)"
><strong>28093 kHz</strong>&nbsp;
<span class="badge bg-secondary">10m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(27265000)"
><strong>27265 kHz</strong>&nbsp;
<span class="badge bg-secondary">11m | USB</span>&nbsp;
<span class="badge bg-dark">Ch 26</span></a
>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(27245000)"
><strong>27245 kHz</strong>&nbsp;
<span class="badge bg-secondary">11m | USB</span>&nbsp;
<span class="badge bg-dark">Ch 25</span></a
>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(24908000)"
><strong>24908 kHz</strong>&nbsp;
<span class="badge bg-secondary">12m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(21093000)"
><strong>21093 kHz</strong>&nbsp;
<span class="badge bg-secondary">15m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(14093000)"
><strong>14093 kHz</strong>&nbsp;
<span class="badge bg-secondary">20m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(7053000)"
><strong>7053 kHz</strong>&nbsp;
<span class="badge bg-secondary">40m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
</ul>
</div>
</div> </div>
</div>
<div class="me-2"> <div class="me-2">
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<span class="input-group-text">Mode</span> <span class="input-group-text">% Power</span>
<select <select
class="form-control" class="form-control"
v-model="state.mode" v-model="state.rf_level"
@click="set_hamlib_mode()" @click="set_hamlib_rf_level()"
v-bind:class="{ v-bind:class="{
disabled: state.hamlib_status === 'disconnected', disabled: state.hamlib_status === 'disconnected',
}" }"
> >
<option value="USB">USB</option> <option value="0">-</option>
<option value="LSB">LSB</option> <option value="10">10</option>
<option value="PKTUSB">PKT-U</option> <option value="20">20</option>
<option value="PKTLSB">PKT-L</option> <option value="30">30</option>
<option value="AM">AM</option> <option value="40">40</option>
<option value="FM">FM</option> <option value="50">50</option>
<option value="PKTFM">PKTFM</option> <option value="60">60</option>
</select> <option value="70">70</option>
</div> <option value="80">80</option>
</div> <option value="90">90</option>
<option value="100">100</option>
<div class="me-2"> </select>
<div class="input-group input-group-sm">
<span class="input-group-text">% Power</span>
<select
class="form-control"
v-model="state.rf_level"
@click="set_hamlib_rf_level()"
v-bind:class="{
disabled: state.hamlib_status === 'disconnected',
}"
>
<option value="0">-</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>

300
gui/src/components/grid_active_stats.vue
View file

@ -168,164 +168,167 @@ const scatterChartData = computed(() => ({
})); }));
var localSpectrum; var localSpectrum;
onMounted(() => { onMounted(() => {
// This code will be executed after the component is mounted to the DOM // This code will be executed after the component is mounted to the DOM
// You can access DOM elements or perform other initialization here // You can access DOM elements or perform other initialization here
//const myElement = this.$refs.waterfall; // Access the DOM element with ref //const myElement = this.$refs.waterfall; // Access the DOM element with ref
// init waterfall // init waterfall
localSpectrum = initWaterfall("waterfall-grid"); localSpectrum = initWaterfall("waterfall-grid");
window.addEventListener("wf-data-avail",function(evt) {localSpectrum.addData(evt.detail);},false); window.addEventListener(
"wf-data-avail",
function (evt) {
localSpectrum.addData(evt.detail);
},
false,
);
}); });
</script> </script>
<template> <template>
<div class="card h-100" > <div class="card h-100">
<div class="card-header"> <div class="card-header">
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<div <div
class="list-group bg-body-tertiary list-group-horizontal" class="list-group bg-body-tertiary list-group-horizontal"
id="list-tab" id="list-tab"
role="tablist" role="tablist"
> >
<a <a
class="py-0 list-group-item list-group-item-dark list-group-item-action" class="py-0 list-group-item list-group-item-dark list-group-item-action"
id="list-waterfall-list" id="list-waterfall-list"
data-bs-toggle="list" data-bs-toggle="list"
href="#list-waterfall" href="#list-waterfall"
role="tab" role="tab"
aria-controls="list-waterfall" aria-controls="list-waterfall"
v-bind:class="{ v-bind:class="{
active: settings.local.spectrum === 'waterfall', active: settings.local.spectrum === 'waterfall',
}" }"
@click="selectStatsControl($event)" @click="selectStatsControl($event)"
><strong><i class="bi bi-water"></i></strong ><strong><i class="bi bi-water"></i></strong
></a> ></a>
<a <a
class="py-0 list-group-item list-group-item-dark list-group-item-action" class="py-0 list-group-item list-group-item-dark list-group-item-action"
id="list-scatter-list" id="list-scatter-list"
data-bs-toggle="list" data-bs-toggle="list"
href="#list-scatter" href="#list-scatter"
role="tab" role="tab"
aria-controls="list-scatter" aria-controls="list-scatter"
v-bind:class="{ v-bind:class="{
active: settings.local.spectrum === 'scatter', active: settings.local.spectrum === 'scatter',
}" }"
@click="selectStatsControl($event)" @click="selectStatsControl($event)"
><strong><i class="bi bi-border-outer"></i></strong ><strong><i class="bi bi-border-outer"></i></strong
></a> ></a>
<a <a
class="py-0 list-group-item list-group-item-dark list-group-item-action" class="py-0 list-group-item list-group-item-dark list-group-item-action"
id="list-chart-list" id="list-chart-list"
data-bs-toggle="list" data-bs-toggle="list"
href="#list-chart" href="#list-chart"
role="tab" role="tab"
aria-controls="list-chart" aria-controls="list-chart"
v-bind:class="{ active: settings.local.spectrum === 'chart' }" v-bind:class="{ active: settings.local.spectrum === 'chart' }"
@click="selectStatsControl($event)" @click="selectStatsControl($event)"
><strong><i class="bi bi-graph-up-arrow"></i></strong ><strong><i class="bi bi-graph-up-arrow"></i></strong
></a> ></a>
</div> </div>
</div> </div>
<div class="btn-group" role="group" aria-label="Busy indicators"> <div class="btn-group" role="group" aria-label="Busy indicators">
<button <button
class="btn btn-sm ms-1 p-1 disabled" class="btn btn-sm ms-1 p-1 disabled"
type="button" type="button"
data-bs-placement="top" data-bs-placement="top"
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-trigger="hover"
data-bs-html="true" data-bs-html="true"
v-bind:class="{ v-bind:class="{
'btn-warning': state.channel_busy_slot[0] === true, 'btn-warning': state.channel_busy_slot[0] === true,
'btn-outline-secondary': state.channel_busy_slot[0] === false, 'btn-outline-secondary': state.channel_busy_slot[0] === false,
}" }"
title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>" title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>"
> >
S1 S1
</button> </button>
<button <button
class="btn btn-sm p-1 disabled" class="btn btn-sm p-1 disabled"
type="button" type="button"
data-bs-placement="top" data-bs-placement="top"
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-trigger="hover"
data-bs-html="true" data-bs-html="true"
v-bind:class="{ v-bind:class="{
'btn-warning': state.channel_busy_slot[1] === true, 'btn-warning': state.channel_busy_slot[1] === true,
'btn-outline-secondary': state.channel_busy_slot[1] === false, 'btn-outline-secondary': state.channel_busy_slot[1] === false,
}" }"
title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>" title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>"
> >
S2 S2
</button> </button>
<button <button
class="btn btn-sm p-1 disabled" class="btn btn-sm p-1 disabled"
type="button" type="button"
data-bs-placement="top" data-bs-placement="top"
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-trigger="hover"
data-bs-html="true" data-bs-html="true"
v-bind:class="{ v-bind:class="{
'btn-warning': state.channel_busy_slot[2] === true, 'btn-warning': state.channel_busy_slot[2] === true,
'btn-outline-secondary': state.channel_busy_slot[2] === false, 'btn-outline-secondary': state.channel_busy_slot[2] === false,
}" }"
title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>" title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>"
> >
S3 S3
</button> </button>
<button <button
class="btn btn-sm p-1 disabled" class="btn btn-sm p-1 disabled"
type="button" type="button"
data-bs-placement="top" data-bs-placement="top"
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-trigger="hover"
data-bs-html="true" data-bs-html="true"
v-bind:class="{ v-bind:class="{
'btn-warning': state.channel_busy_slot[3] === true, 'btn-warning': state.channel_busy_slot[3] === true,
'btn-outline-secondary': state.channel_busy_slot[3] === false, 'btn-outline-secondary': state.channel_busy_slot[3] === false,
}" }"
title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>" title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>"
> >
S4 S4
</button> </button>
<button
class="btn btn-sm p-1 disabled"
type="button"
data-bs-placement="top"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-html="true"
v-bind:class="{
'btn-warning': state.channel_busy_slot[4] === true,
'btn-outline-secondary': state.channel_busy_slot[4] === false,
}"
title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>"
>
S5
</button>
<button
class="btn btn-sm p-1 disabled"
type="button"
data-bs-placement="top"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-html="true"
title="Recieving data: illuminates <strong class='text-success'>green</strong> if receiving codec2 data"
v-bind:class="{
'btn-success': state.is_codec2_traffic === true,
'btn-outline-secondary': state.is_codec2_traffic === false,
}"
>
data
</button>
</div>
<button
class="btn btn-sm p-1 disabled"
type="button"
data-bs-placement="top"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-html="true"
v-bind:class="{
'btn-warning': state.channel_busy_slot[4] === true,
'btn-outline-secondary': state.channel_busy_slot[4] === false,
}"
title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>"
>
S5
</button>
<button
class="btn btn-sm p-1 disabled"
type="button"
data-bs-placement="top"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-html="true"
title="Recieving data: illuminates <strong class='text-success'>green</strong> if receiving codec2 data"
v-bind:class="{
'btn-success': state.is_codec2_traffic === true,
'btn-outline-secondary': state.is_codec2_traffic === false,
}"
>
data
</button>
</div>
</div> </div>
<div class="card-body w-100 h-100 overflow-auto"> <div class="card-body w-100 h-100 overflow-auto">
<div class="tab-content h-100 w-100" id="nav-stats-tabContent"> <div class="tab-content h-100 w-100" id="nav-stats-tabContent">
@ -338,10 +341,7 @@ onMounted(() => {
role="stats_tabpanel" role="stats_tabpanel"
aria-labelledby="list-waterfall-list" aria-labelledby="list-waterfall-list"
> >
<canvas <canvas id="waterfall-grid" class="force-gpu"></canvas>
id="waterfall-grid"
class="force-gpu"
></canvas>
</div> </div>
<div <div
class="tab-pane fade" class="tab-pane fade"

109
gui/src/components/grid_dbfs.vue
View file

@ -5,64 +5,57 @@ setActivePinia(pinia);
import { useStateStore } from "../store/stateStore.js"; import { useStateStore } from "../store/stateStore.js";
const state = useStateStore(pinia); const state = useStateStore(pinia);
</script> </script>
<template> <template>
<div <div class="progress mb-0 me-4 rounded-0 rounded-top" style="height: 22px">
class="progress mb-0 me-4 rounded-0 rounded-top" <div
style="height: 22px" class="progress-bar progress-bar-striped bg-primary force-gpu"
> id="dbfs_level"
<div role="progressbar"
class="progress-bar progress-bar-striped bg-primary force-gpu" :style="{ width: state.dbfs_level_percent + '%' }"
id="dbfs_level" aria-valuenow="0"
role="progressbar" aria-valuemin="0"
:style="{ width: state.dbfs_level_percent + '%' }" aria-valuemax="100"
aria-valuenow="0" ></div>
aria-valuemin="0" <p
aria-valuemax="100" class="justify-content-center d-flex position-absolute w-100"
></div> id="dbfs_level_value"
<p >
class="justify-content-center d-flex position-absolute w-100" {{ state.dbfs_level }} dBFS
id="dbfs_level_value" </p>
> </div>
{{ state.dbfs_level }} dBFS <div class="progress mb-0 me-4 rounded-0 rounded-bottom" style="height: 8px">
</p> <div
</div> class="progress-bar progress-bar-striped bg-warning"
<div role="progressbar"
class="progress mb-0 me-4 rounded-0 rounded-bottom" style="width: 1%"
style="height: 8px" aria-valuenow="1"
> aria-valuemin="0"
<div aria-valuemax="100"
class="progress-bar progress-bar-striped bg-warning" ></div>
role="progressbar" <div
style="width: 1%" class="progress-bar bg-success"
aria-valuenow="1" role="progressbar"
aria-valuemin="0" style="width: 89%"
aria-valuemax="100" aria-valuenow="50"
></div> aria-valuemin="0"
<div aria-valuemax="100"
class="progress-bar bg-success" ></div>
role="progressbar" <div
style="width: 89%" class="progress-bar progress-bar-striped bg-warning"
aria-valuenow="50" role="progressbar"
aria-valuemin="0" style="width: 20%"
aria-valuemax="100" aria-valuenow="20"
></div> aria-valuemin="0"
<div aria-valuemax="100"
class="progress-bar progress-bar-striped bg-warning" ></div>
role="progressbar" <div
style="width: 20%" class="progress-bar progress-bar-striped bg-danger"
aria-valuenow="20" role="progressbar"
aria-valuemin="0" style="width: 29%"
aria-valuemax="100" aria-valuenow="29"
></div> aria-valuemin="0"
<div aria-valuemax="100"
class="progress-bar progress-bar-striped bg-danger" ></div>
role="progressbar" </div>
style="width: 29%"
aria-valuenow="29"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</template> </template>

109
gui/src/components/grid_s-meter.vue
View file

@ -5,64 +5,57 @@ setActivePinia(pinia);
import { useStateStore } from "../store/stateStore.js"; import { useStateStore } from "../store/stateStore.js";
const state = useStateStore(pinia); const state = useStateStore(pinia);
</script> </script>
<template> <template>
<div <div class="progress mb-0 me-4 rounded-0 rounded-top" style="height: 22px">
class="progress mb-0 me-4 rounded-0 rounded-top" <div
style="height: 22px;" class="progress-bar progress-bar-striped bg-primary force-gpu"
> id="noise_level"
<div role="progressbar"
class="progress-bar progress-bar-striped bg-primary force-gpu" :style="{ width: state.s_meter_strength_percent + '%' }"
id="noise_level" aria-valuenow="{{state.s_meter_strength_percent}}"
role="progressbar" aria-valuemin="0"
:style="{ width: state.s_meter_strength_percent + '%' }" aria-valuemax="100"
aria-valuenow="{{state.s_meter_strength_percent}}" ></div>
aria-valuemin="0" <p
aria-valuemax="100" class="justify-content-center d-flex position-absolute w-100"
></div> id="noise_level_value"
<p >
class="justify-content-center d-flex position-absolute w-100" S-Meter(dB): {{ state.s_meter_strength_raw }}
id="noise_level_value" </p>
> </div>
S-Meter(dB): {{ state.s_meter_strength_raw }} <div class="progress mb-0 me-4 rounded-0 rounded-bottom" style="height: 8px">
</p> <div
</div> class="progress-bar progress-bar-striped bg-warning"
<div role="progressbar"
class="progress mb-0 me-4 rounded-0 rounded-bottom" style="width: 1%"
style="height: 8px" aria-valuenow="1"
> aria-valuemin="0"
<div aria-valuemax="100"
class="progress-bar progress-bar-striped bg-warning" ></div>
role="progressbar" <div
style="width: 1%" class="progress-bar bg-success"
aria-valuenow="1" role="progressbar"
aria-valuemin="0" style="width: 89%"
aria-valuemax="100" aria-valuenow="50"
></div> aria-valuemin="0"
<div aria-valuemax="100"
class="progress-bar bg-success" ></div>
role="progressbar" <div
style="width: 89%" class="progress-bar progress-bar-striped bg-warning"
aria-valuenow="50" role="progressbar"
aria-valuemin="0" style="width: 20%"
aria-valuemax="100" aria-valuenow="20"
></div> aria-valuemin="0"
<div aria-valuemax="100"
class="progress-bar progress-bar-striped bg-warning" ></div>
role="progressbar" <div
style="width: 20%" class="progress-bar progress-bar-striped bg-danger"
aria-valuenow="20" role="progressbar"
aria-valuemin="0" style="width: 29%"
aria-valuemax="100" aria-valuenow="29"
></div> aria-valuemin="0"
<div aria-valuemax="100"
class="progress-bar progress-bar-striped bg-danger" ></div>
role="progressbar" </div>
style="width: 29%"
aria-valuenow="29"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</template> </template>

5
gui/src/components/main_active_heard_stations.vue
View file

@ -29,7 +29,6 @@ function getDateTime(timestampRaw) {
function getMaidenheadDistance(dxGrid) { function getMaidenheadDistance(dxGrid) {
try { try {
return parseInt(distance(settings.remote.STATION.mygrid, dxGrid)); return parseInt(distance(settings.remote.STATION.mygrid, dxGrid));
} catch (e) { } catch (e) {
console.warn(e); console.warn(e);
@ -105,7 +104,9 @@ function getMaidenheadDistance(dxGrid) {
> >
</td> </td>
<td> <td>
<span class="badge bg-secondary">{{ item[1].activity_type }}</span> <span class="badge bg-secondary">{{
item[1].activity_type
}}</span>
</td> </td>
<td> <td>
<span class="badge bg-secondary">{{ item[1].snr }}</span> <span class="badge bg-secondary">{{ item[1].snr }}</span>

16
gui/src/components/main_active_stats.vue
View file

@ -179,7 +179,13 @@ export default {
// init waterfall // init waterfall
localSpectrum = initWaterfall("waterfall-main"); localSpectrum = initWaterfall("waterfall-main");
window.addEventListener("wf-data-avail",function(evt) {localSpectrum.addData(evt.detail);},false); window.addEventListener(
"wf-data-avail",
function (evt) {
localSpectrum.addData(evt.detail);
},
false,
);
}, },
}; };
</script> </script>
@ -362,7 +368,13 @@ export default {
<canvas <canvas
ref="waterfall-main" ref="waterfall-main"
id="waterfall-main" id="waterfall-main"
style="position: relative; z-index: 2;aspect-ratio:unset; width: 100%; height: 200px;" style="
position: relative;
z-index: 2;
aspect-ratio: unset;
width: 100%;
height: 200px;
"
class="force-gpu" class="force-gpu"
></canvas> ></canvas>
</div> </div>

1
gui/src/components/settings_exp.vue
View file

@ -9,7 +9,6 @@ import { settingsStore as settings } from "../store/settingsStore.js";
</script> </script>
<template> <template>
<div class="input-group input-group-sm mb-1"> <div class="input-group input-group-sm mb-1">
<label class="input-group-text w-50">Enable FSK mode</label> <label class="input-group-text w-50">Enable FSK mode</label>
<label class="input-group-text w-50"> <label class="input-group-text w-50">

1
gui/src/components/settings_gui.vue
View file

@ -130,5 +130,4 @@ function saveSettings() {
</div> </div>
</label> </label>
</div> </div>
</template> </template>

5
gui/src/js/waterfallHandler.js
View file

@ -9,7 +9,7 @@ import { settingsStore as settings } from "../store/settingsStore.js";
var spectrum = new Object(); var spectrum = new Object();
export function initWaterfall(id) { export function initWaterfall(id) {
spectrum = new Spectrum(id, { spectrum = new Spectrum(id, {
spectrumPercent: 0, spectrumPercent: 0,
wf_rows: 1024, //Assuming 1 row = 1 pixe1, 192 is the height of the spectrum container wf_rows: 1024, //Assuming 1 row = 1 pixe1, 192 is the height of the spectrum container
wf_size: 1024, wf_size: 1024,
@ -20,7 +20,8 @@ export function initWaterfall(id) {
export function addDataToWaterfall(data) { export function addDataToWaterfall(data) {
data = JSON.parse(data); data = JSON.parse(data);
window.dispatchEvent(new CustomEvent("wf-data-avail", {detail: data}));} window.dispatchEvent(new CustomEvent("wf-data-avail", { detail: data }));
}
/** /**
* Setwaterfall colormap array by index * Setwaterfall colormap array by index
* @param {number} index colormap index to use * @param {number} index colormap index to use

1
gui/src/store/settingsStore.js
View file

@ -13,7 +13,6 @@ export const settingsStore = reactive({
high_graphics: true, high_graphics: true,
update_channel: "alpha", update_channel: "alpha",
enable_sys_notification: true, enable_sys_notification: true,
}, },
remote: { remote: {
AUDIO: { AUDIO: {