mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 10:04:33 +02:00
more modular code
This commit is contained in:
DJ2LS
parent
f5a9528534
commit
af513864a2
176
gui_vue/src/components/main_active_audio_level.vue
Normal file
176
gui_vue/src/components/main_active_audio_level.vue
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
import {saveSettingsToFile} from '../js/settingsHandler'
|
||||
|
||||
import { setActivePinia } from 'pinia';
|
||||
import pinia from '../store/index';
|
||||
setActivePinia(pinia);
|
||||
|
||||
import { useSettingsStore } from '../store/settingsStore.js';
|
||||
const settings = useSettingsStore(pinia);
|
||||
|
||||
import { useStateStore } from '../store/stateStore.js';
|
||||
const state = useStateStore(pinia);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="card mb-1">
|
||||
<div class="card-header p-1">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-1">
|
||||
<i class="bi bi-volume-up" style="font-size: 1.2rem"></i>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<strong class="fs-5">Audio level</strong>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<button
|
||||
type="button"
|
||||
id="audioModalButton"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#audioModal"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
Tune
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
id="startStopRecording"
|
||||
class="btn btn-sm btn-outline-danger"
|
||||
>
|
||||
Record audio
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-1 text-end">
|
||||
<button
|
||||
type="button"
|
||||
id="openHelpModalAudioLevel"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#audioLevelHelpModal"
|
||||
class="btn m-0 p-0 border-0"
|
||||
>
|
||||
<i
|
||||
class="bi bi-question-circle"
|
||||
style="font-size: 1rem"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="progress mb-0" 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: {{state.s_meter_strength_raw}} dB
|
||||
</p>
|
||||
</div>
|
||||
<div class="progress mb-0" 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>
|
||||
<div class="col-sm">
|
||||
<div class="progress mb-0" style="height: 22px">
|
||||
<div
|
||||
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
||||
id="dbfs_level"
|
||||
role="progressbar"
|
||||
style="width: 0%"
|
||||
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"
|
||||
>
|
||||
dBFS (Audio Level)
|
||||
</p>
|
||||
</div>
|
||||
<div class="progress mb-0" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
128
gui_vue/src/components/main_active_broadcasts.vue
Normal file
128
gui_vue/src/components/main_active_broadcasts.vue
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
import {saveSettingsToFile} from '../js/settingsHandler'
|
||||
|
||||
import { setActivePinia } from 'pinia';
|
||||
import pinia from '../store/index';
|
||||
setActivePinia(pinia);
|
||||
|
||||
import { useSettingsStore } from '../store/settingsStore.js';
|
||||
const settings = useSettingsStore(pinia);
|
||||
|
||||
import { useStateStore } from '../store/stateStore.js';
|
||||
const state = useStateStore(pinia);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="card mb-1">
|
||||
<div class="card-header p-1">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-1">
|
||||
<i class="bi bi-broadcast" style="font-size: 1.2rem"></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<strong class="fs-5">Broadcasts</strong>
|
||||
</div>
|
||||
<div class="col-1 text-end">
|
||||
<button
|
||||
type="button"
|
||||
id="openHelpModalBroadcasts"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#broadcastsHelpModal"
|
||||
class="btn m-0 p-0 border-0"
|
||||
>
|
||||
<i
|
||||
class="bi bi-question-circle"
|
||||
style="font-size: 1rem"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
<div class="row">
|
||||
<div class="col-md-auto">
|
||||
<div class="input-group input-group-sm mb-0">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
style="max-width: 6rem; text-transform: uppercase"
|
||||
placeholder="DXcall"
|
||||
pattern="[A-Z]*"
|
||||
id="dxCall"
|
||||
maxlength="11"
|
||||
aria-label="Input group"
|
||||
aria-describedby="btnGroupAddon"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-sm btn-outline-secondary ms-1"
|
||||
id="sendPing"
|
||||
type="button"
|
||||
data-bs-placement="bottom"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-html="false"
|
||||
title="Send a ping request to a remote station"
|
||||
>
|
||||
Ping
|
||||
</button>
|
||||
<!-- disabled because it's causing confusion TODO: remove entire code some day
|
||||
<button
|
||||
class="btn btn-sm btn-outline-success ms-1"
|
||||
id="openARQSession"
|
||||
type="button"
|
||||
data-bs-placement="bottom"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-html="false"
|
||||
title="connect to a remote station"
|
||||
>
|
||||
<i
|
||||
class="bi bi-arrows-angle-contract"
|
||||
style="font-size: 0.8rem"
|
||||
></i>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-outline-danger"
|
||||
id="closeARQSession"
|
||||
type="button"
|
||||
data-bs-placement="bottom"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-html="false"
|
||||
title="disconnect from a remote station"
|
||||
>
|
||||
|
||||
<i
|
||||
class="bi bi-arrows-angle-expand"
|
||||
style="font-size: 0.8rem"
|
||||
></i>
|
||||
</button>
|
||||
-->
|
||||
|
||||
<button
|
||||
class="btn btn-sm btn-outline-secondary ms-1"
|
||||
id="sendCQ"
|
||||
type="button"
|
||||
title="Send a CQ to the world"
|
||||
>
|
||||
Call CQ
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
id="startBeacon"
|
||||
class="btn btn-sm btn-outline-secondary ms-1"
|
||||
title="Toggle beacon mode. The interval can be set in settings. While sending a beacon, you can receive ping requests and open a datachannel. If a datachannel is opened, the beacon pauses."
|
||||
>
|
||||
<i class="bi bi-soundwave"></i> Toggle beacon
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of row-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
88
gui_vue/src/components/main_active_heard_stations.vue
Normal file
88
gui_vue/src/components/main_active_heard_stations.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
import {saveSettingsToFile} from '../js/settingsHandler'
|
||||
|
||||
import { setActivePinia } from 'pinia';
|
||||
import pinia from '../store/index';
|
||||
setActivePinia(pinia);
|
||||
|
||||
import { useSettingsStore } from '../store/settingsStore.js';
|
||||
const settings = useSettingsStore(pinia);
|
||||
|
||||
import { useStateStore } from '../store/stateStore.js';
|
||||
const state = useStateStore(pinia);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
|
||||
<div class="card mb-1" style="height: 240px">
|
||||
<!--325px-->
|
||||
<div class="card-header p-1">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<i
|
||||
class="bi bi-list-columns-reverse"
|
||||
style="font-size: 1.2rem"
|
||||
></i>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<strong class="fs-5">Heard stations</strong>
|
||||
</div>
|
||||
<div class="col-1 text-end">
|
||||
<button
|
||||
type="button"
|
||||
id="openHelpModalHeardStations"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#heardStationsHelpModal"
|
||||
class="btn m-0 p-0 border-0"
|
||||
>
|
||||
<i
|
||||
class="bi bi-question-circle"
|
||||
style="font-size: 1rem"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0" style="overflow-y: overlay">
|
||||
<div class="table-responsive">
|
||||
<!-- START OF TABLE FOR HEARD STATIONS -->
|
||||
<table class="table table-sm" id="tblHeardStationList">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" id="thTime">
|
||||
<i id="hslSort" class="bi bi-sort-up"></i>Time
|
||||
</th>
|
||||
<th scope="col" id="thFreq">Frequency</th>
|
||||
<th> </th>
|
||||
<th scope="col" id="thDxcall">DXCall</th>
|
||||
<th scope="col" id="thDxgrid">DXGrid</th>
|
||||
<th scope="col" id="thDist">Distance</th>
|
||||
<th scope="col" id="thType">Type</th>
|
||||
<th scope="col" id="thSnr">SNR (rx/dx)</th>
|
||||
<!--<th scope="col">Off</th>-->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="heardstations">
|
||||
<!--https://vuejs.org/guide/essentials/list.html-->
|
||||
<tr v-for="item in state.heard_stations" :key="item.timestamp">
|
||||
<td>{{ item.timestamp }}</td>
|
||||
<td>{{ item.frequency }}</td>
|
||||
<td> </td>
|
||||
<td>{{ item.dxcallsign }}</td>
|
||||
<td>{{ item.dxgrid }}</td>
|
||||
<td>{{ item.distance }}</td>
|
||||
<td>{{ item.datatype }}</td>
|
||||
<td>{{ item.snr }}</td>
|
||||
<!--<td>{{ item.offset }}</td>-->
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- END OF HEARD STATIONS TABLE -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
133
gui_vue/src/components/main_active_stats.vue
Normal file
133
gui_vue/src/components/main_active_stats.vue
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
import {saveSettingsToFile} from '../js/settingsHandler'
|
||||
|
||||
import { setActivePinia } from 'pinia';
|
||||
import pinia from '../store/index';
|
||||
setActivePinia(pinia);
|
||||
|
||||
import { useSettingsStore } from '../store/settingsStore.js';
|
||||
const settings = useSettingsStore(pinia);
|
||||
|
||||
import { useStateStore } from '../store/stateStore.js';
|
||||
const state = useStateStore(pinia);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="card mb-1">
|
||||
<div class="card-header p-1">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-11">
|
||||
<div
|
||||
class="btn-group btn-group-sm"
|
||||
role="group"
|
||||
aria-label="waterfall-scatter-switch toggle button group"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="waterfall-scatter-switch"
|
||||
id="waterfall-scatter-switch1"
|
||||
autocomplete="off"
|
||||
checked
|
||||
/>
|
||||
<label
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
for="waterfall-scatter-switch1"
|
||||
><strong><i class="bi bi-water"></i></strong>
|
||||
</label>
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="waterfall-scatter-switch"
|
||||
id="waterfall-scatter-switch2"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
for="waterfall-scatter-switch2"
|
||||
><strong><i class="bi bi-border-outer"></i></strong>
|
||||
</label>
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="waterfall-scatter-switch"
|
||||
id="waterfall-scatter-switch3"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
for="waterfall-scatter-switch3"
|
||||
><strong><i class="bi bi-graph-up-arrow"></i></strong>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="btn-group"
|
||||
role="group"
|
||||
aria-label="Busy indicators"
|
||||
>
|
||||
<button
|
||||
class="btn btn-sm btn-secondary"
|
||||
id="channel_busy"
|
||||
type="button"
|
||||
data-bs-placement="top"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-html="true"
|
||||
title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>"
|
||||
>
|
||||
busy
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
id="c2_busy"
|
||||
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"
|
||||
>
|
||||
signal
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-1 text-end">
|
||||
<button
|
||||
type="button"
|
||||
id="openHelpModalWaterfall"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#waterfallHelpModal"
|
||||
class="btn m-0 p-0 border-0"
|
||||
>
|
||||
<i
|
||||
class="bi bi-question-circle"
|
||||
style="font-size: 1rem"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-1" style="height: 200px">
|
||||
<!--278px-->
|
||||
<canvas
|
||||
id="waterfall"
|
||||
style="position: relative; z-index: 2"
|
||||
class="force-gpu"
|
||||
></canvas>
|
||||
<canvas
|
||||
id="scatter"
|
||||
style="position: relative; z-index: 1"
|
||||
class="force-gpu"
|
||||
></canvas>
|
||||
<canvas
|
||||
id="chart"
|
||||
style="position: relative; z-index: 1"
|
||||
class="force-gpu"
|
||||
></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -24,6 +24,15 @@ export const useStateStore = defineStore('stateStore', () => {
|
|||
var tnc_running_state = ref(0)
|
||||
|
||||
var arq_total_bytes = ref(0)
|
||||
|
||||
var heard_stations = ref("")
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function updateTncState(state){
|
||||
|
|
|
|||
Loading…
Reference in a new issue