Grid updates

This commit is contained in:
Mashintime 2023-12-16 11:11:16 -05:00
parent 85689a4d37
commit 436420f854
12 changed files with 324 additions and 172 deletions

View file

@ -6,7 +6,9 @@ import pinia from "../store/index";
setActivePinia(pinia);
import "../../node_modules/gridstack/dist/gridstack.min.css";
import { GridStack } from "gridstack";
import { settingsStore as settings } from "../store/settingsStore.js";
import { useStateStore } from "../store/stateStore.js";
const state = useStateStore(pinia);
import { setModemFrequency } from "../js/api";
import active_heard_stations from "./grid/grid_active_heard_stations.vue";
import mini_heard_stations from "./grid/grid_active_heard_stations_mini.vue";
@ -20,6 +22,10 @@ import dbfs_meter from "./grid/grid_dbfs.vue";
import grid_activities from "./grid/grid_activities.vue";
import grid_button from "./grid/button.vue";
import grid_ptt from "./grid/grid_ptt.vue";
import grid_mycall from "./grid/grid_mycall.vue";
import grid_CQ_btn from "./grid/grid_CQ.vue";
import grid_ping from "./grid/grid_ping.vue";
import grid_freq from "./grid/grid_frequency.vue";
import { stateDispatcher } from "../js/eventHandler";
let count = ref(0);
@ -58,7 +64,7 @@ const gridWidgets = [
),
new gridWidget(
active_stats,
{ x: 16, y: 15, w: 8, h: 69 },
{ x: 16, y: 17, w: 8, h: 80 },
"Stats (waterfall, etc)",
true,
true,
@ -68,7 +74,7 @@ const gridWidgets = [
active_audio_level,
{ x: 16, y: 0, w: 8, h: 15 },
"Audio main",
true,
false,
true,
"Audio",
),
@ -76,7 +82,7 @@ const gridWidgets = [
active_rig_control,
{ x: 6, y: 40, w: 9, h: 15 },
"Rig control main",
true,
false,
true,
"Rig",
),
@ -84,7 +90,7 @@ const gridWidgets = [
active_broadcasts,
{ x: 6, y: 70, w: 6, h: 15 },
"Broadcasts main (horizontal)",
true,
false,
true,
"Broadcasts",
),
@ -98,17 +104,17 @@ const gridWidgets = [
),
new gridWidget(
s_meter,
{ x: 1, y: 1, w: 4, h: 8 },
{ x: 16, y: 0, w: 4, h: 8 },
"S-Meter",
false,
true,
true,
"Rig",
),
new gridWidget(
dbfs_meter,
{ x: 1, y: 1, w: 4, h: 8 },
{ x: 20, y: 0, w: 4, h: 8 },
"Dbfs Meter",
false,
true,
true,
"Audio",
),
@ -122,21 +128,63 @@ const gridWidgets = [
),
new gridWidget(
active_broadcasts_vert,
{ x: 3, y: 27, w: 3, h: 27 },
{ x: 9, y: 55, w: 3, h: 27 },
"Broadcasts main (vertical)",
false,
true,
true,
"Broadcasts",
),
new gridWidget(
grid_ptt,
{ x: 17, y: 8, w: 2, h: 8 },
"Tx/PTT indicator",
true,
true,
"Rig",
),
new gridWidget(
grid_mycall,
{ x: 0, y: 95, w: 4, h: 9 },
"My callsign widget",
true,
true,
"Other",
),
new gridWidget(
grid_CQ_btn,
{ x: 3, y: 27, w: 2, h: 8 },
"PTT indicator",
"CQ Button",
false,
true,
"Broadcasts",
),
new gridWidget(
grid_ping,
{ x: 3, y: 27, w: 4, h: 9 },
"Ping Widget",
false,
true,
"Broadcasts",
),
new gridWidget(
grid_freq,
{ x: 20, y: 8, w: 4, h: 9 },
"Frequency widget",
true,
true,
"Rig",
),
];
function updateFrequencyAndApply(frequency) {
state.new_frequency = frequency;
setModemFrequency(state.new_frequency);
}
function set_hamlib_frequency_manually() {
setModemFrequency(state.new_frequency);
}
onMounted(() => {
grid = GridStack.init({
// DO NOT use grid.value = GridStack.init(), see above
@ -180,6 +228,9 @@ onMounted(() => {
break;
case "Broadcasts":
dom = document.getElementById("bcBody");
break;
case "Other":
break;
default:
console.error("Unknown widget category: " + gw.category);
@ -412,7 +463,7 @@ function quickfill() {
aria-expanded="false"
aria-controls="collapseRadioControl"
>
<strong>Radio Control</strong>
<strong>Radio Control/Status</strong>
</button>
</h2>
<div
@ -483,6 +534,128 @@ function quickfill() {
</button>
</div>
</div>
<div class="offcanvas offcanvas-end text-start" data-bs-scroll="true"
data-bs-backdrop="false" tabindex="-1" id="offcanvasFrequency" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Frequency selection</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
<p>
Commonly used frequencies are listed here, and are all USB.&nbsp; Simply click on a entry or manually enter a frequency in the textbox to tune your rig if rig control is enabled.
</p>
<ul
class="list-group"
aria-labelledby="dropdownMenuButton"
style="z-index: 50"
>
<li class="list-group-item">
<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 class="list-group-item"><hr class="dropdown-divider" /></li>
<!-- Dropdown Items -->
<a href="#" class="list-group-item list-group-item-action" @click="updateFrequencyAndApply(50616000)">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">50.616 MHz</h5>
<small>EU / US</small>
<h6>6m</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action" @click="updateFrequencyAndApply(50308000)">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">50.308 MHz</h5>
<small>US</small>
<h6>6m</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action" @click="updateFrequencyAndApply(28093000)">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">28.093 MHz</h5>
<small>EU / US</small>
<h6>10m</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action" @click="updateFrequencyAndApply(27265000)">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">27.265 MHz</h5>
<small>Ch 26</small>
<h6>11m</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action" @click="updateFrequencyAndApply(27245000)">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">27.245 MHz</h5>
<small>Ch 25</small>
<h6>11m</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action" @click="updateFrequencyAndApply(24908000)">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">24.908 MHz</h5>
<small>EU / US</small>
<h6>12m</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action" @click="updateFrequencyAndApply(21093000)">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">21.093 MHz</h5>
<small>EU / US</small>
<h6>15m</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action" @click="updateFrequencyAndApply(14093000)">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">14.093 MHz</h5>
<small>EU / US</small>
<h6>20m</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action" @click="updateFrequencyAndApply(7053000)">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">7.053 MHz</h5>
<small>EU / US</small>
<h6>40m</h6>
</div>
</a>
</ul>
</div>
</div>
</template>
<style>

View file

@ -0,0 +1,13 @@
<script setup lang="ts">
import { setActivePinia } from "pinia";
import pinia from "../../store/index";
setActivePinia(pinia);
import { sendModemCQ} from "../../js/api.js";
</script>
<template>
<div class="fill h-100" style="width: calc(100% - 24px);">
<a class="btn btn-sm btn-secondary d-flex justify-content-center align-items-center object-fill border rounded w-100 h-100" @click="sendModemCQ" title="Send a CQ call!">CQ</a>
</div>
</template>

View file

@ -1,26 +1,19 @@
<script setup lang="ts">
import { setActivePinia } from "pinia";
import pinia from "../../store/index";
import { setModemRigMode,setModemRigPowerLvl } from "../../js/api";
setActivePinia(pinia);
import { useStateStore } from "../../store/stateStore.js";
const state = useStateStore(pinia);
function updateFrequencyAndApply(frequency) {
state.new_frequency = frequency;
set_frequency(state.new_frequency);
}
function set_hamlib_frequency_manually() {
set_frequency(state.new_frequency);
}
function set_hamlib_mode() {
set_mode(state.mode);
setModemRigMode(state.mode);
}
function set_hamlib_rf_level() {
set_rf_level(state.rf_level);
setModemRigPowerLvl(state.rf_level);
}
</script>
@ -36,149 +29,11 @@ function set_hamlib_rf_level() {
<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>
<span class="input-group-text">{{ state.frequency / 1000 }} kHz</span>
<!-- Dropdown Button -->
<button
v-bind:class="{
<button class="btn btn-secondary dropdown-toggle" 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>
}" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasFrequency" aria-controls="offcanvasExample"></button>
</div>
</div>

View file

@ -0,0 +1,24 @@
<script setup lang="ts">
import { setActivePinia } from "pinia";
import pinia from "../../store/index";
setActivePinia(pinia);
import { useStateStore } from "../../store/stateStore.js";
const state = useStateStore(pinia);
</script>
<template>
<div class="w-100">
<div class="input-group input-group-sm" style="width: calc(100% - 24px);">
<span class="input-group-text">Hz</span>
<input type="text" class="form-control" style="min-width: 3em;" placeholder="mycall" v-model=state.frequency readonly>
<a class="btn btn-secondary dropdown-toggle" v-bind:class="{
disabled: state.hamlib_status === 'disconnected',
}" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasFrequency"></a>
</div>
</div>
</template>

View file

@ -0,0 +1,30 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { setActivePinia } from "pinia";
import { setConfig } from "../../js/api";
import pinia from "../../store/index";
setActivePinia(pinia);
import { settingsStore as setting } from "../../store/settingsStore.js";
const settings = reactive(setting);
import { useStateStore } from "../../store/stateStore.js";
const state = useStateStore(pinia);
function updateMyCall()
{
setConfig();
}
</script>
<template>
<div class="w-100">
<div class="input-group input-group-sm" style="width: calc(100% - 24px);">
<input type="text" class="form-control" style="min-width: 3em;" placeholder="mycall" v-model=settings.remote.STATION.mycall>
<span class="input-group-text">-</span>
<input type="text" class="form-control" style="min-width: 2em;max-width: 2.5em;" placeholder="id" v-model=settings.remote.STATION.myssid>
<a class="btn btn-sm btn-secondary" title="Apply changes to callsign/ssid" @click="updateMyCall"><i class="bi bi-check"></i></a>
</div>
</div>
</template>

View file

@ -0,0 +1,44 @@
<script setup lang="ts">
import { ref } from "vue";
import { setActivePinia } from "pinia";
import pinia from "../../store/index";
setActivePinia(pinia);
import { useStateStore } from "../../store/stateStore.js";
import { sendModemPing } from "../../js/api.js";
const state = useStateStore(pinia);
function transmitPing() {
sendModemPing(dxcallPing.value.toUpperCase());
}
var dxcallPing = ref("");
</script>
<template>
<div class="input-group" style="width: calc(100% - 24px)">
<input
type="text"
class="form-control"
style="min-width: 3rem; text-transform: uppercase; height: 31px;"
placeholder="DXcall"
pattern="[A-Z]*"
maxlength="11"
aria-label="Input group"
aria-describedby="btnGroupAddon"
v-model="dxcallPing"
/>
<a
class="btn btn-sm btn-secondary"
style="max-width: 3em;"
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"
@click="transmitPing()"
>
Ping
</a>
</div>
</template>

View file

@ -7,5 +7,5 @@ import { useStateStore } from "../../store/stateStore.js";
const state = useStateStore(pinia);
</script>
<template>
<div class="d-flex justify-content-center align-items-center object-fill border rounded w-100 h-100" :class="state.ptt_state === true ? 'text-bg-warning' : 'text-bg-light'">PTT</div>
<div class="d-flex justify-content-center align-items-center object-fill border rounded w-100 h-100" :class="state.ptt_state === true ? 'text-bg-warning' : 'text-bg-light'">TX</div>
</template>

View file

@ -60,7 +60,7 @@ function stopAllTransmissions() {
class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2 active"
id="list-modem-list"
data-bs-toggle="list"
href="#list-modem"
href="#list-grid"
role="tab"
aria-controls="list-modem"
title="Home"
@ -111,7 +111,7 @@ function stopAllTransmissions() {
class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2"
id="list-grid-list"
data-bs-toggle="list"
href="#list-grid"
href="#list-modem"
role="tab"
aria-controls="list-grid"
title="Grid test"
@ -151,7 +151,7 @@ function stopAllTransmissions() {
<div class="tab-content" id="nav-tabContent-settings">
<div
class="tab-pane fade show active"
class="tab-pane fade"
id="list-modem"
role="tabpanel"
aria-labelledby="list-modem-list"
@ -337,7 +337,7 @@ function stopAllTransmissions() {
<infoScreen />
</div>
<div
class="tab-pane fade"
class="tab-pane fade show active"
id="list-grid"
role="tabpanel"
aria-labelledby="list-grid-list"

View file

@ -112,3 +112,14 @@ export function stopModem() {
export function getModemState() {
return apiGet("/modem/state");
}
export function setModemFrequency(newFrequency) {
console.error("setModemFrequency needs implemented")
}
export function setModemRigMode(mode) {
console.error("setModemRigMode needs implemented")
}
export function setModemRigPowerLvl(power) {
console.error("setModemRigPowerLvl needs implemented")
}
;

View file

@ -21,6 +21,8 @@ export function initWaterfall(id) {
export function addDataToWaterfall(data) {
data = JSON.parse(data);
if (data.constructor !== Array)
return;
spectrums.forEach((element) => {
//console.log(element);
element.addData(data);

View file

@ -119,7 +119,7 @@ watch(settingsStore.local, (oldValue, newValue) => {
saveSettingsToConfig();
});
function saveSettingsToConfig() {
export function saveSettingsToConfig() {
nconf.set("local", settingsStore.local);
nconf.save();
console.log("Settings saved!");

View file

@ -5,8 +5,8 @@ import * as bootstrap from "bootstrap";
export const useStateStore = defineStore("stateStore", () => {
var busy_state = ref("-");
var arq_state = ref("-");
var frequency = ref("-");
var new_frequency = ref(0);
var frequency = ref(0);
var new_frequency = ref(14093000);
var mode = ref("-");
var rf_level = ref("10");
var bandwidth = ref("-");