mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
[CodeFactor] Apply fixes
This commit is contained in:
codefactor-io
parent
ce12679f2d
commit
645b159d73
14 changed files with 504 additions and 497 deletions
|
|
@ -58,16 +58,8 @@ const gridWidgets = [
|
|||
{ x: 1, y: 1, w: 3, h: 27 },
|
||||
"Mini Heard stations",
|
||||
),
|
||||
new gridWidget(
|
||||
s_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",
|
||||
),
|
||||
new gridWidget(s_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(() => {
|
||||
grid = GridStack.init({
|
||||
|
|
@ -77,8 +69,8 @@ onMounted(() => {
|
|||
minRow: 50,
|
||||
margin: 5,
|
||||
resizable: {
|
||||
handles: 'se,sw'
|
||||
}
|
||||
handles: "se,sw",
|
||||
},
|
||||
});
|
||||
|
||||
grid.on("dragstop", function (event, element) {
|
||||
|
|
|
|||
|
|
@ -16,14 +16,29 @@ function startStopRecordAudio() {
|
|||
<div class="card w-100 h-100">
|
||||
<div class="card-header">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-outline-secondary dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
></button>
|
||||
<i class="bi bi-volume-up" style="font-size: 1rem"></i>
|
||||
<strong>Audio</strong>
|
||||
<strong>Audio</strong>
|
||||
<ul class="dropdown-menu">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,9 @@ function getMaidenheadDistance(dxGrid) {
|
|||
>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary">{{ item[1].activity_type }}</span>
|
||||
<span class="badge bg-secondary">{{
|
||||
item[1].activity_type
|
||||
}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary">{{ item[1].snr }}</span>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ function getDateTime(timestampRaw) {
|
|||
navigator.language,
|
||||
{
|
||||
hourCycle: "h23",
|
||||
|
||||
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
|
|
@ -51,7 +51,7 @@ function getMaidenheadDistance(dxGrid) {
|
|||
<tr>
|
||||
<th scope="col" id="thTime">Time</th>
|
||||
<th scope="col" id="thDxcall">DXCall</th>
|
||||
|
||||
|
||||
<th scope="col" id="thSnr">SNR</th>
|
||||
<!--<th scope="col">Off</th>-->
|
||||
</tr>
|
||||
|
|
@ -60,13 +60,11 @@ function getMaidenheadDistance(dxGrid) {
|
|||
<!--https://vuejs.org/guide/essentials/list.html-->
|
||||
<tr v-for="item in state.activities" :key="item[0]">
|
||||
<td>
|
||||
<span class="fs-6">{{
|
||||
getDateTime(item[1].timestamp)
|
||||
}}</span>
|
||||
<span class="fs-6">{{ getDateTime(item[1].timestamp) }}</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span >{{ item[1].origin }}</span>
|
||||
<span>{{ item[1].origin }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ item[1].snr }}</span>
|
||||
|
|
|
|||
|
|
@ -25,208 +25,211 @@ function set_hamlib_rf_level() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-house-door" style="font-size: 1.2rem"></i>
|
||||
<strong>Radio control</strong>
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-house-door" style="font-size: 1.2rem"></i>
|
||||
<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>
|
||||
<span class="badge bg-secondary">6m | USB</span>
|
||||
<span class="badge bg-info">EU | US</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(50308000)"
|
||||
><strong>50308 kHz</strong>
|
||||
<span class="badge bg-secondary">6m | USB</span>
|
||||
<span class="badge bg-info">US</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(28093000)"
|
||||
><strong>28093 kHz</strong>
|
||||
<span class="badge bg-secondary">10m | USB</span>
|
||||
<span class="badge bg-info">EU | US</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(27265000)"
|
||||
><strong>27265 kHz</strong>
|
||||
<span class="badge bg-secondary">11m | USB</span>
|
||||
<span class="badge bg-dark">Ch 26</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(27245000)"
|
||||
><strong>27245 kHz</strong>
|
||||
<span class="badge bg-secondary">11m | USB</span>
|
||||
<span class="badge bg-dark">Ch 25</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(24908000)"
|
||||
><strong>24908 kHz</strong>
|
||||
<span class="badge bg-secondary">12m | USB</span>
|
||||
<span class="badge bg-info">EU | US</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(21093000)"
|
||||
><strong>21093 kHz</strong>
|
||||
<span class="badge bg-secondary">15m | USB</span>
|
||||
<span class="badge bg-info">EU | US</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(14093000)"
|
||||
><strong>14093 kHz</strong>
|
||||
<span class="badge bg-secondary">20m | USB</span>
|
||||
<span class="badge bg-info">EU | US</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(7053000)"
|
||||
><strong>7053 kHz</strong>
|
||||
<span class="badge bg-secondary">40m | USB</span>
|
||||
<span class="badge bg-info">EU | US</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
<span class="badge bg-secondary">6m | USB</span>
|
||||
<span class="badge bg-info">EU | US</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(50308000)"
|
||||
><strong>50308 kHz</strong>
|
||||
<span class="badge bg-secondary">6m | USB</span>
|
||||
<span class="badge bg-info">US</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(28093000)"
|
||||
><strong>28093 kHz</strong>
|
||||
<span class="badge bg-secondary">10m | USB</span>
|
||||
<span class="badge bg-info">EU | US</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(27265000)"
|
||||
><strong>27265 kHz</strong>
|
||||
<span class="badge bg-secondary">11m | USB</span>
|
||||
<span class="badge bg-dark">Ch 26</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(27245000)"
|
||||
><strong>27245 kHz</strong>
|
||||
<span class="badge bg-secondary">11m | USB</span>
|
||||
<span class="badge bg-dark">Ch 25</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(24908000)"
|
||||
><strong>24908 kHz</strong>
|
||||
<span class="badge bg-secondary">12m | USB</span>
|
||||
<span class="badge bg-info">EU | US</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(21093000)"
|
||||
><strong>21093 kHz</strong>
|
||||
<span class="badge bg-secondary">15m | USB</span>
|
||||
<span class="badge bg-info">EU | US</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(14093000)"
|
||||
><strong>14093 kHz</strong>
|
||||
<span class="badge bg-secondary">20m | USB</span>
|
||||
<span class="badge bg-info">EU | US</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click="updateFrequencyAndApply(7053000)"
|
||||
><strong>7053 kHz</strong>
|
||||
<span class="badge bg-secondary">40m | USB</span>
|
||||
<span class="badge bg-info">EU | US</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="me-2">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text">Mode</span>
|
||||
<select
|
||||
class="form-control"
|
||||
v-model="state.mode"
|
||||
@click="set_hamlib_mode()"
|
||||
v-bind:class="{
|
||||
disabled: state.hamlib_status === 'disconnected',
|
||||
}"
|
||||
>
|
||||
<option value="USB">USB</option>
|
||||
<option value="LSB">LSB</option>
|
||||
<option value="PKTUSB">PKT-U</option>
|
||||
<option value="PKTLSB">PKT-L</option>
|
||||
<option value="AM">AM</option>
|
||||
<option value="FM">FM</option>
|
||||
<option value="PKTFM">PKTFM</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="me-2">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text">Mode</span>
|
||||
<select
|
||||
class="form-control"
|
||||
v-model="state.mode"
|
||||
@click="set_hamlib_mode()"
|
||||
v-bind:class="{
|
||||
disabled: state.hamlib_status === 'disconnected',
|
||||
}"
|
||||
>
|
||||
<option value="USB">USB</option>
|
||||
<option value="LSB">LSB</option>
|
||||
<option value="PKTUSB">PKT-U</option>
|
||||
<option value="PKTLSB">PKT-L</option>
|
||||
<option value="AM">AM</option>
|
||||
<option value="FM">FM</option>
|
||||
<option value="PKTFM">PKTFM</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="me-2">
|
||||
<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 class="me-2">
|
||||
<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>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -168,164 +168,167 @@ const scatterChartData = computed(() => ({
|
|||
}));
|
||||
var localSpectrum;
|
||||
onMounted(() => {
|
||||
// This code will be executed after the component is mounted to the DOM
|
||||
// You can access DOM elements or perform other initialization here
|
||||
//const myElement = this.$refs.waterfall; // Access the DOM element with ref
|
||||
// This code will be executed after the component is mounted to the DOM
|
||||
// You can access DOM elements or perform other initialization here
|
||||
//const myElement = this.$refs.waterfall; // Access the DOM element with ref
|
||||
|
||||
// init waterfall
|
||||
// init waterfall
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div class="card h-100" >
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<div class="btn-group" role="group">
|
||||
<div
|
||||
class="list-group bg-body-tertiary list-group-horizontal"
|
||||
id="list-tab"
|
||||
role="tablist"
|
||||
>
|
||||
<a
|
||||
class="py-0 list-group-item list-group-item-dark list-group-item-action"
|
||||
id="list-waterfall-list"
|
||||
data-bs-toggle="list"
|
||||
href="#list-waterfall"
|
||||
role="tab"
|
||||
aria-controls="list-waterfall"
|
||||
v-bind:class="{
|
||||
active: settings.local.spectrum === 'waterfall',
|
||||
}"
|
||||
@click="selectStatsControl($event)"
|
||||
><strong><i class="bi bi-water"></i></strong
|
||||
></a>
|
||||
<a
|
||||
class="py-0 list-group-item list-group-item-dark list-group-item-action"
|
||||
id="list-scatter-list"
|
||||
data-bs-toggle="list"
|
||||
href="#list-scatter"
|
||||
role="tab"
|
||||
aria-controls="list-scatter"
|
||||
v-bind:class="{
|
||||
active: settings.local.spectrum === 'scatter',
|
||||
}"
|
||||
@click="selectStatsControl($event)"
|
||||
><strong><i class="bi bi-border-outer"></i></strong
|
||||
></a>
|
||||
<a
|
||||
class="py-0 list-group-item list-group-item-dark list-group-item-action"
|
||||
id="list-chart-list"
|
||||
data-bs-toggle="list"
|
||||
href="#list-chart"
|
||||
role="tab"
|
||||
aria-controls="list-chart"
|
||||
v-bind:class="{ active: settings.local.spectrum === 'chart' }"
|
||||
@click="selectStatsControl($event)"
|
||||
><strong><i class="bi bi-graph-up-arrow"></i></strong
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Busy indicators">
|
||||
<button
|
||||
class="btn btn-sm ms-1 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[0] === true,
|
||||
'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>"
|
||||
>
|
||||
S1
|
||||
</button>
|
||||
<div class="btn-group" role="group">
|
||||
<div
|
||||
class="list-group bg-body-tertiary list-group-horizontal"
|
||||
id="list-tab"
|
||||
role="tablist"
|
||||
>
|
||||
<a
|
||||
class="py-0 list-group-item list-group-item-dark list-group-item-action"
|
||||
id="list-waterfall-list"
|
||||
data-bs-toggle="list"
|
||||
href="#list-waterfall"
|
||||
role="tab"
|
||||
aria-controls="list-waterfall"
|
||||
v-bind:class="{
|
||||
active: settings.local.spectrum === 'waterfall',
|
||||
}"
|
||||
@click="selectStatsControl($event)"
|
||||
><strong><i class="bi bi-water"></i></strong
|
||||
></a>
|
||||
<a
|
||||
class="py-0 list-group-item list-group-item-dark list-group-item-action"
|
||||
id="list-scatter-list"
|
||||
data-bs-toggle="list"
|
||||
href="#list-scatter"
|
||||
role="tab"
|
||||
aria-controls="list-scatter"
|
||||
v-bind:class="{
|
||||
active: settings.local.spectrum === 'scatter',
|
||||
}"
|
||||
@click="selectStatsControl($event)"
|
||||
><strong><i class="bi bi-border-outer"></i></strong
|
||||
></a>
|
||||
<a
|
||||
class="py-0 list-group-item list-group-item-dark list-group-item-action"
|
||||
id="list-chart-list"
|
||||
data-bs-toggle="list"
|
||||
href="#list-chart"
|
||||
role="tab"
|
||||
aria-controls="list-chart"
|
||||
v-bind:class="{ active: settings.local.spectrum === 'chart' }"
|
||||
@click="selectStatsControl($event)"
|
||||
><strong><i class="bi bi-graph-up-arrow"></i></strong
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Busy indicators">
|
||||
<button
|
||||
class="btn btn-sm ms-1 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[0] === true,
|
||||
'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>"
|
||||
>
|
||||
S1
|
||||
</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[1] === true,
|
||||
'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>"
|
||||
>
|
||||
S2
|
||||
</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[1] === true,
|
||||
'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>"
|
||||
>
|
||||
S2
|
||||
</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[2] === true,
|
||||
'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>"
|
||||
>
|
||||
S3
|
||||
</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[2] === true,
|
||||
'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>"
|
||||
>
|
||||
S3
|
||||
</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[3] === true,
|
||||
'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>"
|
||||
>
|
||||
S4
|
||||
</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[3] === true,
|
||||
'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>"
|
||||
>
|
||||
S4
|
||||
</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>
|
||||
</div>
|
||||
<div class="card-body w-100 h-100 overflow-auto">
|
||||
<div class="tab-content h-100 w-100" id="nav-stats-tabContent">
|
||||
|
|
@ -338,10 +341,7 @@ onMounted(() => {
|
|||
role="stats_tabpanel"
|
||||
aria-labelledby="list-waterfall-list"
|
||||
>
|
||||
<canvas
|
||||
id="waterfall-grid"
|
||||
class="force-gpu"
|
||||
></canvas>
|
||||
<canvas id="waterfall-grid" class="force-gpu"></canvas>
|
||||
</div>
|
||||
<div
|
||||
class="tab-pane fade"
|
||||
|
|
|
|||
|
|
@ -5,64 +5,57 @@ setActivePinia(pinia);
|
|||
|
||||
import { useStateStore } from "../store/stateStore.js";
|
||||
const state = useStateStore(pinia);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="progress mb-0 me-4 rounded-0 rounded-top"
|
||||
style="height: 22px"
|
||||
>
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
||||
id="dbfs_level"
|
||||
role="progressbar"
|
||||
:style="{ width: state.dbfs_level_percent + '%' }"
|
||||
aria-valuenow="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<p
|
||||
class="justify-content-center d-flex position-absolute w-100"
|
||||
id="dbfs_level_value"
|
||||
>
|
||||
{{ state.dbfs_level }} dBFS
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="progress mb-0 me-4 rounded-0 rounded-bottom"
|
||||
style="height: 8px"
|
||||
>
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-warning"
|
||||
role="progressbar"
|
||||
style="width: 1%"
|
||||
aria-valuenow="1"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<div
|
||||
class="progress-bar bg-success"
|
||||
role="progressbar"
|
||||
style="width: 89%"
|
||||
aria-valuenow="50"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-warning"
|
||||
role="progressbar"
|
||||
style="width: 20%"
|
||||
aria-valuenow="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-danger"
|
||||
role="progressbar"
|
||||
style="width: 29%"
|
||||
aria-valuenow="29"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<div class="progress mb-0 me-4 rounded-0 rounded-top" style="height: 22px">
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
||||
id="dbfs_level"
|
||||
role="progressbar"
|
||||
:style="{ width: state.dbfs_level_percent + '%' }"
|
||||
aria-valuenow="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<p
|
||||
class="justify-content-center d-flex position-absolute w-100"
|
||||
id="dbfs_level_value"
|
||||
>
|
||||
{{ state.dbfs_level }} dBFS
|
||||
</p>
|
||||
</div>
|
||||
<div class="progress mb-0 me-4 rounded-0 rounded-bottom" style="height: 8px">
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-warning"
|
||||
role="progressbar"
|
||||
style="width: 1%"
|
||||
aria-valuenow="1"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<div
|
||||
class="progress-bar bg-success"
|
||||
role="progressbar"
|
||||
style="width: 89%"
|
||||
aria-valuenow="50"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-warning"
|
||||
role="progressbar"
|
||||
style="width: 20%"
|
||||
aria-valuenow="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-danger"
|
||||
role="progressbar"
|
||||
style="width: 29%"
|
||||
aria-valuenow="29"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,64 +5,57 @@ setActivePinia(pinia);
|
|||
|
||||
import { useStateStore } from "../store/stateStore.js";
|
||||
const state = useStateStore(pinia);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="progress mb-0 me-4 rounded-0 rounded-top"
|
||||
style="height: 22px;"
|
||||
>
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
||||
id="noise_level"
|
||||
role="progressbar"
|
||||
:style="{ width: state.s_meter_strength_percent + '%' }"
|
||||
aria-valuenow="{{state.s_meter_strength_percent}}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<p
|
||||
class="justify-content-center d-flex position-absolute w-100"
|
||||
id="noise_level_value"
|
||||
>
|
||||
S-Meter(dB): {{ state.s_meter_strength_raw }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="progress mb-0 me-4 rounded-0 rounded-bottom"
|
||||
style="height: 8px"
|
||||
>
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-warning"
|
||||
role="progressbar"
|
||||
style="width: 1%"
|
||||
aria-valuenow="1"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<div
|
||||
class="progress-bar bg-success"
|
||||
role="progressbar"
|
||||
style="width: 89%"
|
||||
aria-valuenow="50"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-warning"
|
||||
role="progressbar"
|
||||
style="width: 20%"
|
||||
aria-valuenow="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-danger"
|
||||
role="progressbar"
|
||||
style="width: 29%"
|
||||
aria-valuenow="29"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<div class="progress mb-0 me-4 rounded-0 rounded-top" style="height: 22px">
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
||||
id="noise_level"
|
||||
role="progressbar"
|
||||
:style="{ width: state.s_meter_strength_percent + '%' }"
|
||||
aria-valuenow="{{state.s_meter_strength_percent}}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<p
|
||||
class="justify-content-center d-flex position-absolute w-100"
|
||||
id="noise_level_value"
|
||||
>
|
||||
S-Meter(dB): {{ state.s_meter_strength_raw }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="progress mb-0 me-4 rounded-0 rounded-bottom" style="height: 8px">
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-warning"
|
||||
role="progressbar"
|
||||
style="width: 1%"
|
||||
aria-valuenow="1"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<div
|
||||
class="progress-bar bg-success"
|
||||
role="progressbar"
|
||||
style="width: 89%"
|
||||
aria-valuenow="50"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-warning"
|
||||
role="progressbar"
|
||||
style="width: 20%"
|
||||
aria-valuenow="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-danger"
|
||||
role="progressbar"
|
||||
style="width: 29%"
|
||||
aria-valuenow="29"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ function getDateTime(timestampRaw) {
|
|||
|
||||
function getMaidenheadDistance(dxGrid) {
|
||||
try {
|
||||
|
||||
return parseInt(distance(settings.remote.STATION.mygrid, dxGrid));
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
|
|
@ -105,7 +104,9 @@ function getMaidenheadDistance(dxGrid) {
|
|||
>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary">{{ item[1].activity_type }}</span>
|
||||
<span class="badge bg-secondary">{{
|
||||
item[1].activity_type
|
||||
}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary">{{ item[1].snr }}</span>
|
||||
|
|
|
|||
|
|
@ -179,7 +179,13 @@ export default {
|
|||
|
||||
// init waterfall
|
||||
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>
|
||||
|
|
@ -362,7 +368,13 @@ export default {
|
|||
<canvas
|
||||
ref="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"
|
||||
></canvas>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import { settingsStore as settings } from "../store/settingsStore.js";
|
|||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -130,5 +130,4 @@ function saveSettings() {
|
|||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { settingsStore as settings } from "../store/settingsStore.js";
|
|||
var spectrum = new Object();
|
||||
|
||||
export function initWaterfall(id) {
|
||||
spectrum = new Spectrum(id, {
|
||||
spectrum = new Spectrum(id, {
|
||||
spectrumPercent: 0,
|
||||
wf_rows: 1024, //Assuming 1 row = 1 pixe1, 192 is the height of the spectrum container
|
||||
wf_size: 1024,
|
||||
|
|
@ -20,7 +20,8 @@ export function initWaterfall(id) {
|
|||
|
||||
export function addDataToWaterfall(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
|
||||
* @param {number} index colormap index to use
|
||||
|
|
@ -29,4 +30,4 @@ export function setColormap(index) {
|
|||
if (isNaN(index)) index = 0;
|
||||
//console.log("Setting waterfall colormap to " + index)
|
||||
spectrum.setColorMap(index);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ export const settingsStore = reactive({
|
|||
high_graphics: true,
|
||||
update_channel: "alpha",
|
||||
enable_sys_notification: true,
|
||||
|
||||
},
|
||||
remote: {
|
||||
AUDIO: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue