2023-09-11 14:09:17 +00:00
< script setup lang = "ts" >
2023-10-22 13:52:30 +00:00
// @ts-nocheck
// reason for no check is, that we have some mixing of typescript and chart js which seems to be not to be fixed that easy
2023-10-03 13:15:17 +00:00
import { setActivePinia } from "pinia" ;
import pinia from "../store/index" ;
2023-09-11 14:09:17 +00:00
setActivePinia ( pinia ) ;
2023-10-14 13:32:30 +00:00
import { useChatStore } from "../store/chatStore.js" ;
const chat = useChatStore ( pinia ) ;
2024-01-12 20:40:27 +00:00
import { settingsStore as settings , onChange } from "../store/settingsStore.js" ;
2023-11-18 18:06:29 +00:00
import { sendModemTestFrame } from "../js/api" ;
2023-11-13 06:20:46 +00:00
import main _startup _check from "./main_startup_check.vue" ;
2024-01-28 11:32:16 +00:00
import { newMessage , deleteCallsignFromDB } from '../js/messagesHandler.ts'
2024-01-27 16:44:18 +00:00
function newChat ( ) {
newMessage ( chat . newChatCallsign , chat . newChatMessage )
}
2023-11-13 06:20:46 +00:00
2023-10-15 06:25:58 +00:00
function deleteChat ( ) {
2024-01-28 11:32:16 +00:00
deleteCallsignFromDB ( chat . selectedCallsign ) ;
2023-10-15 06:25:58 +00:00
}
2023-10-14 13:32:30 +00:00
import {
Chart as ChartJS ,
CategoryScale ,
LinearScale ,
PointElement ,
LineElement ,
Title ,
Tooltip ,
2023-10-22 08:12:00 +00:00
Legend ,
} from "chart.js" ;
2023-10-14 13:32:30 +00:00
import { Line } from "vue-chartjs" ;
2023-10-22 13:24:02 +00:00
import { computed } from "vue" ;
2023-10-14 13:32:30 +00:00
ChartJS . register (
CategoryScale ,
LinearScale ,
PointElement ,
LineElement ,
Title ,
Tooltip ,
2023-10-22 08:12:00 +00:00
Legend ,
) ;
2023-10-22 12:49:33 +00:00
// https://www.chartjs.org/docs/latest/samples/line/segments.html
const skipped = ( speedCtx , value ) =>
speedCtx . p0 . skip || speedCtx . p1 . skip ? value : undefined ;
const down = ( speedCtx , value ) =>
speedCtx . p0 . parsed . y > speedCtx . p1 . parsed . y ? value : undefined ;
var transmissionSpeedChartOptionsMessageInfo = {
//type: "line",
responsive : true ,
animations : true ,
maintainAspectRatio : false ,
cubicInterpolationMode : "monotone" ,
tension : 0.4 ,
scales : {
SNR : {
type : "linear" ,
ticks : { beginAtZero : false , color : "rgb(255, 99, 132)" } ,
position : "right" ,
} ,
SPEED : {
type : "linear" ,
ticks : { beginAtZero : false , color : "rgb(120, 100, 120)" } ,
position : "left" ,
grid : {
drawOnChartArea : false , // only want the grid lines for one axis to show up
} ,
} ,
x : { ticks : { beginAtZero : true } } ,
} ,
} ;
const transmissionSpeedChartDataMessageInfo = computed ( ( ) => ( {
labels : chat . arq _speed _list _timestamp ,
datasets : [
{
type : "line" ,
label : "SNR[dB]" ,
data : chat . arq _speed _list _snr ,
borderColor : "rgb(75, 192, 192, 1.0)" ,
pointRadius : 1 ,
segment : {
borderColor : ( speedCtx ) =>
skipped ( speedCtx , "rgb(0,0,0,0.4)" ) ||
down ( speedCtx , "rgb(192,75,75)" ) ,
borderDash : ( speedCtx ) => skipped ( speedCtx , [ 3 , 3 ] ) ,
} ,
spanGaps : true ,
backgroundColor : "rgba(75, 192, 192, 0.2)" ,
order : 1 ,
yAxisID : "SNR" ,
} ,
{
type : "bar" ,
label : "Speed[bpm]" ,
data : chat . arq _speed _list _bpm ,
borderColor : "rgb(120, 100, 120, 1.0)" ,
backgroundColor : "rgba(120, 100, 120, 0.2)" ,
order : 0 ,
yAxisID : "SPEED" ,
} ,
] ,
} ) ) ;
2023-09-11 14:09:17 +00:00
< / script >
< template >
2023-11-13 06:21:13 +00:00
< main_startup_check / >
2023-11-13 06:20:46 +00:00
2023-10-22 08:12:00 +00:00
<!-- updater release notes -- >
< div
class = "modal fade"
ref = "modalEle"
id = "updaterReleaseNotes"
tabindex = "-1"
aria - hidden = "true"
>
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< span class = "input-group-text" id = "updater_last_version" > < / span >
< span class = "input-group-text ms-1" id = "updater_last_update" > < / span >
2023-10-14 13:32:30 +00:00
2023-10-22 08:12:00 +00:00
< button
type = "button"
class = "btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "" id = "updater_release_notes" > < / div >
< / div >
< / div >
2023-10-20 18:56:52 +00:00
2023-10-22 08:12:00 +00:00
< div class = "modal-footer" >
< button
type = "button"
class = "btn btn-secondary"
data - bs - dismiss = "modal"
>
Close
< / button >
< / div >
2023-10-20 18:56:52 +00:00
< / div >
< / div >
< / div >
2023-10-18 11:45:57 +00:00
2023-10-22 08:12:00 +00:00
<!-- delete chat modal -- >
< div
class = "modal fade"
ref = "modalEle"
id = "deleteChatModal"
tabindex = "-1"
aria - labelledby = "exampleModalLabel"
aria - hidden = "true"
>
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h1 class = "modal-title fs-5" id = "deleteChatModalLabel" >
Sub menu for : { { chat . selectedCallsign } }
< / h1 >
< button
type = "button"
class = "btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
2023-10-18 11:45:57 +00:00
< / div >
2023-10-22 08:12:00 +00:00
< div class = "modal-body" >
< div class = "input-group mb-3" >
< span class = "input-group-text" id = "basic-addon1"
> Total Messages < / s p a n
>
2024-01-27 16:44:18 +00:00
< span class = "input-group-text" id = "basic-addon1" > ... < / span >
2023-10-22 08:12:00 +00:00
< / div >
2023-10-18 11:45:57 +00:00
2023-10-22 08:12:00 +00:00
< div class = "input-group mb-3" >
2023-10-18 11:45:57 +00:00
< span class = "input-group-text" id = "basic-addon1" > New Messages < / span >
2024-01-27 16:44:18 +00:00
< span class = "input-group-text" id = "basic-addon1" > ... < / span >
2023-10-22 08:12:00 +00:00
< / div >
< / div >
< div class = "modal-footer" >
< button
type = "button"
class = "btn btn-secondary"
data - bs - dismiss = "modal"
>
Close
< / button >
< button
type = "button"
class = "btn btn-danger"
@ click = "deleteChat"
data - bs - dismiss = "modal"
>
Delete Chat
< / button >
2023-10-18 11:45:57 +00:00
< / div >
2023-10-15 06:25:58 +00:00
< / div >
< / div >
< / div >
2023-10-22 08:12:00 +00:00
<!-- Message Info Modal -- >
< div
class = "modal fade"
ref = "modalEle"
id = "messageInfoModal"
tabindex = "-1"
aria - labelledby = "exampleModalLabel"
aria - hidden = "true"
>
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h1 class = "modal-title fs-5" id = "messageInfoModalLabel" >
{ { chat . selectedMessageObject [ "uuid" ] } }
< / h1 >
< button
type = "button"
class = "btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
2023-10-22 12:51:07 +00:00
< div class = "container" >
< div class = "d-flex flex-row justify-content-between" >
< div class = "input-group mb-3" >
< span class = "input-group-text" id = "basic-addon1" > Status < / span >
< span class = "input-group-text" id = "basic-addon1" > { {
chat . selectedMessageObject [ "status" ]
} } < / span >
< / div >
2023-10-22 12:49:33 +00:00
2023-10-22 12:51:07 +00:00
< div class = "input-group mb-3" >
< span class = "input-group-text" id = "basic-addon1" > Attempts < / span >
< span class = "input-group-text" id = "basic-addon1" > { {
chat . selectedMessageObject [ "attempt" ]
} } < / span >
< / div >
< / div >
2023-10-22 08:12:00 +00:00
< / div >
2023-10-14 13:32:30 +00:00
2023-10-22 12:51:07 +00:00
< div class = "container" >
< div class = "d-flex flex-row justify-content-between" >
< div class = "input-group mb-3" >
< span class = "input-group-text" id = "basic-addon1" > nacks < / span >
< span class = "input-group-text" > { {
chat . selectedMessageObject [ "nacks" ]
} } < / span >
< / div >
< div class = "input-group mb-3" >
< span class = "input-group-text" id = "basic-addon1" > hmack < / span >
< span class = "input-group-text" > { {
chat . selectedMessageObject [ "hmac_signed" ]
} } < / span >
< / div >
< / div >
2023-10-22 08:12:00 +00:00
< / div >
2023-10-14 13:32:30 +00:00
2023-10-22 12:51:07 +00:00
< div class = "container" >
< div class = "d-flex flex-row justify-content-between" >
2023-10-22 12:49:33 +00:00
< div class = "input-group mb-3" >
2023-10-22 12:51:07 +00:00
< span class = "input-group-text" id = "basic-addon1"
> Bytes per Minute < / s p a n
>
< span class = "input-group-text" id = "basic-addon1" > { {
chat . selectedMessageObject [ "bytesperminute" ]
} } < / span >
< / div >
< div class = "input-group mb-3" >
< span class = "input-group-text" id = "basic-addon1"
> Duration [ s ] < / s p a n
>
< span class = "input-group-text" > { {
parseInt ( chat . selectedMessageObject [ "duration" ] )
} } < / span >
< / div >
< / div >
< / div >
2023-10-22 12:49:33 +00:00
< div class = "card mt-2" >
2023-10-22 12:51:07 +00:00
< div class = "card-header" > Statistics < / div >
< div class = "card-body" >
< Line
: data = "transmissionSpeedChartDataMessageInfo"
: options = "transmissionSpeedChartOptionsMessageInfo"
/ >
< / div >
< / div >
2023-10-22 08:12:00 +00:00
< / div >
< div class = "modal-footer" >
< button
type = "button"
class = "btn btn-secondary"
data - bs - dismiss = "modal"
>
Close
< / button >
2023-10-14 13:32:30 +00:00
< / div >
< / div >
< / div >
< / div >
2024-01-27 16:44:18 +00:00
< div
class = "modal fade"
ref = "modalEle"
id = "newChatModal"
tabindex = "-1"
aria - hidden = "true"
>
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h1 class = "modal-title fs-5" id = "deleteChatModalLabel" >
Start a new chat
< / h1 >
< button
type = "button"
class = "btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
< div class = "alert alert-info" role = "alert" >
1. Enter destination callsign
< br >
2. Enter a first message
< br >
3. Pressing "START NEW CHAT"
< / div >
< div class = "form-floating mb-3" >
< input type = "text" class = "form-control" id = "floatingInputDestination" placeholder = "dxcallsign / destination" maxlength = "9"
style = "text-transform: uppercase" @ keypress . enter = "newChat()" v - model = "chat.newChatCallsign" >
< label for = "floatingInputDestination" > dxcallsign / destination < / label >
< / div >
< div class = "form-floating" >
< textarea class = "form-control" placeholder = "Your first message" id = "floatingTextareaNewChatMessage" style = "height: 100px" v-model = "chat.newChatMessage" > < / textarea >
< label for = "floatingTextareaNewChatMessage" > First message < / label >
< / div >
< / div >
< div class = "modal-footer" >
< button
type = "button"
class = "btn btn-secondary"
data - bs - dismiss = "modal"
>
Close
< / button >
< button
class = "btn btn-sm btn-outline-success"
id = "createNewChatButton"
type = "button"
data - bs - dismiss = "modal"
title = "Start a new chat (enter dx call sign first)"
@ click = "newChat()"
>
START NEW CHAT
< i class = "bi bi-pencil-square" style = "font-size: 1.2rem" > < / i >
< / button >
< / div >
< / div >
< / div >
< / div >
2023-10-03 13:15:17 +00:00
<!-- HELP MODALS AUDIO -- >
< div
class = "modal fade"
data - bs - backdrop = "static"
tabindex = "-1"
id = "audioHelpModal"
>
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Help < / h5 >
< button
type = "button"
class = "btn btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
< div class = "card mb-3" >
< div class = "card-body" >
< div class = "input-group input-group-sm mb-1" >
< span class = "input-group-text" >
< i class = "bi bi-mic-fill" style = "font-size: 1rem" > < / i >
< / span >
< select
class = "form-select form-select-sm"
aria - label = ".form-select-sm"
disabled
>
<!-- < option selected value = "3011" > USB Interface < / option > -- >
< / select >
< / div >
< p class = "card-text" >
Select your audio device for transmitting . It
< strong > must < / strong > be using a sample rate of
< strong > 48000 Hz < / strong >
< / p >
< / div >
< / div >
2023-09-11 14:09:17 +00:00
2023-10-03 13:15:17 +00:00
< div class = "card" >
< div class = "card-body" >
< div class = "input-group input-group-sm" >
< span class = "input-group-text" >
< i class = "bi bi-volume-up" style = "font-size: 1rem" > < / i >
< / span >
< select
class = "form-select form-select-sm"
aria - label = ".form-select-sm"
disabled
> < / select >
< / div >
< p class = "card-text" >
Select your audio device for receiving . It
< strong > must < / strong > be using a sample rate of
< strong > 48000 Hz < / strong >
< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- HELP MODALS RIGCONTROL -- >
< div
class = "modal fade"
data - bs - backdrop = "static"
tabindex = "-1"
id = "rigcontrolHelpModal"
>
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Help < / h5 >
< button
type = "button"
class = "btn btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" > Rig Control < / h5 >
< p class = "card-text" >
This section is where you configure rig control method ( none
( VOX ) or hamlib ) for both GUI and TNC . For the best experience
hamlib control is recommended .
< / p >
< / div >
< / div >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" > None / Vox < / h5 >
< p class = "card-text" >
Select "None/Vox" if you want to use Vox for triggering PTT . No
connection to rigctld will be established . No frequency
information is availble .
< / p >
< / div >
< / div >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" > Hamlib < / h5 >
< p class = "card-text" >
Select "Hamlib" if you want to have more control over your
radio . Define your hamlib settings in settings , and click the
start button to start rigctld . You may use the 'PTT test' button
to ensure rig control is working .
< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- HELP MODALS STATION -- >
< div
class = "modal fade"
data - bs - backdrop = "static"
tabindex = "-1"
id = "stationHelpModal"
>
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Help < / h5 >
< button
type = "button"
class = "btn btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
< div class = "alert alert-info" role = "alert" >
These settings will be saved automatically when changing .
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
< div
class = "input-group input-group-sm mb-0"
data - bs - placement = "bottom"
data - bs - toggle = "tooltip"
data - bs - trigger = "hover"
data - bs - html = "false"
title = "Enter your callsign and save it"
>
2023-09-11 14:09:17 +00:00
< span class = "input-group-text" >
2023-10-03 13:15:17 +00:00
< i
class = "bi bi-person-bounding-box"
style = "font-size: 1rem"
> < / i >
2023-09-11 14:09:17 +00:00
< / span >
2023-10-03 13:15:17 +00:00
< input
type = "text"
class = "form-control"
placeholder = "callsign"
pattern = "[A-Z]*"
maxlength = "8"
style = "max-width: 8rem"
aria - label = "Input group"
aria - describedby = "btnGroupAddon"
disabled
/ >
2023-09-11 14:09:17 +00:00
< select
class = "form-select form-select-sm"
aria - label = ".form-select-sm"
2023-10-03 13:15:17 +00:00
style = "max-width: 6rem"
2023-09-11 14:09:17 +00:00
disabled
>
2023-10-03 13:15:17 +00:00
< option selected value = "SSID" > SSID < / option >
2023-09-11 14:09:17 +00:00
< / select >
< / div >
2023-10-03 13:15:17 +00:00
< / h5 >
< p class = "card-text" >
Enter your callsign and SSID . Your callsign can have a maximum
length of 7 characters
< / p >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< / div >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
< div
class = "input-group input-group-sm mb-0"
data - bs - placement = "bottom"
data - bs - toggle = "tooltip"
data - bs - trigger = "hover"
data - bs - html = "false"
title = "Enter your gridsquare and save it"
>
2023-09-11 14:09:17 +00:00
< span class = "input-group-text" >
2023-10-03 13:15:17 +00:00
< i class = "bi bi-house-fill" style = "font-size: 1rem" > < / i >
2023-09-11 14:09:17 +00:00
< / span >
2023-10-03 13:15:17 +00:00
< input
type = "text"
class = "form-control mr-1"
style = "max-width: 6rem"
placeholder = "locator"
maxlength = "6"
aria - label = "Input group"
aria - describedby = "btnGroupAddon"
2023-09-11 14:09:17 +00:00
disabled
2023-10-03 13:15:17 +00:00
/ >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< / h5 >
< p class = "card-text" >
Enter your position as a 4 or 6 digit grid square , also known as
a maidenhead locator . Six digits are recommended .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
2023-10-03 13:15:17 +00:00
< / div >
<!-- HELP MODALS UPDATER -- >
< div
class = "modal fade"
data - bs - backdrop = "static"
tabindex = "-1"
id = "updaterHelpModal"
>
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Help < / h5 >
< button
type = "button"
class = "btn btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" > Auto - Updater < / h5 >
< p class = "card-text" >
The auto updater loads the latest version from Github and
installs it automatically . You can select the update channel in
settings . Once an update has been downlaoded , you need to
confirm the auto - installation and restart .
< / p >
< / div >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" > Alpha < / h5 >
< p class = "card-text" >
Alpha releases are more frequent and contain the latest
features , but are likely to be unstable and introduce bugs .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< / div >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" > Beta < / h5 >
< p class = "card-text" >
Beta releases are more stable than Alpha releases . They are a
good tradeoff between latest features and stability . They will
be updated less often . A beta release has not been released yet .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< / div >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" > Stable < / h5 >
< p class = "card-text" >
Stable releases are the most stable versions with no known major
issues . A stable release has not been released yet .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
2023-10-03 13:15:17 +00:00
< / div >
<!-- HELP MODALS LOCAL REMOTE -- >
< div
class = "modal fade"
data - bs - backdrop = "static"
tabindex = "-1"
id = "localRemoteHelpModal"
>
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Help < / h5 >
< button
type = "button"
class = "btn btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
< div
class = "btn-group btn-group-sm me-2"
role = "group"
aria - label = "local-remote-switch toggle button group"
data - bs - placement = "bottom"
data - bs - toggle = "tooltip"
data - bs - trigger = "hover"
data - bs - html = "true"
title = "Select a local or a remote location of your TNC daemon. Normally local is the preferred option."
>
< input
type = "radio"
class = "btn-check"
name = "local-remote-switch"
autocomplete = "off"
checked
disabled
/ >
< label
class = "btn btn-sm btn-outline-secondary"
for = "local-remote-switch1"
>
< i class = "bi bi-pc-display-horizontal" > < / i >
2023-10-20 11:47:42 +00:00
< span class = "ms-2 me-2" > Local modem < / span >
2023-10-03 13:15:17 +00:00
< / label >
< input
type = "radio"
class = "btn-check"
name = "local-remote-switch"
autocomplete = "off"
disabled
/ >
< label
class = "btn btn-sm btn-outline-secondary"
for = "local-remote-switch2"
>
< i class = "bi bi-ethernet" > < / i >
2023-10-20 11:47:42 +00:00
< span class = "ms-2 me-2" > Remote modem < / span >
2023-10-03 13:15:17 +00:00
< / label >
< / div >
< / h5 >
< p class = "card-text" >
Local / Remote switch . If the TNC is running on the same
computer as the GUI , select local . Otherwise choose remote and
enter the IP / Port of where the TNC is running .
< / p >
< / div >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
< div class = "input-group input-group-sm me-2" >
2023-10-20 11:47:42 +00:00
< span class = "input-group-text" > modem ip < / span >
2023-10-03 13:15:17 +00:00
< input
type = "text"
class = "form-control"
placeholder = "ip address"
value = "192.168.178.163"
maxlength = "17"
style = "width: 8rem"
aria - label = "Username"
aria - describedby = "basic-addon1"
disabled
/ >
< span class = "input-group-text" > : < / span >
< input
type = "text"
class = "form-control"
placeholder = "port"
value = "3000"
maxlength = "5"
max = "65534"
min = "1025"
style = "width: 4rem"
aria - label = "Username"
aria - describedby = "basic-addon1"
disabled
/ >
< button class = "btn btn-sm btn-danger" type = "button" disabled >
< i class = "bi bi-diagram-3" style = "font-size: 1rem" > < / i >
< / button >
< / div >
< / h5 >
< p class = "card-text" >
2023-10-20 11:47:42 +00:00
Remote IP of TNC . Port is port of daemon . The modem port will
2023-10-03 13:15:17 +00:00
automatically adjusted . ( daemon port - 1 )
< / p >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
2023-09-11 14:09:17 +00:00
2023-10-03 13:15:17 +00:00
<!-- HELP MODALS START STOP TNC -- >
< div
class = "modal fade"
data - bs - backdrop = "static"
tabindex = "-1"
id = "startStopTNCHelpModal"
>
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Help < / h5 >
< button
type = "button"
class = "btn btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
< div class = "btn-group" role = "group" >
< button
type = "button"
class = "btn btn-sm btn-outline-success"
2023-09-11 14:09:17 +00:00
data - bs - toggle = "tooltip"
data - bs - trigger = "hover"
data - bs - html = "false"
2023-10-03 13:15:17 +00:00
title = "Start the TNC. Please set your audio and radio settings first!"
disabled
2023-09-11 14:09:17 +00:00
>
2023-10-03 13:15:17 +00:00
< i class = "bi bi-play-fill" > < / i >
2023-10-20 11:47:42 +00:00
< span class = "ms-2" > Start modem < / span >
2023-10-03 13:15:17 +00:00
< / button >
< button
type = "button"
class = "btn btn-sm btn-outline-danger"
2023-09-11 14:09:17 +00:00
data - bs - toggle = "tooltip"
data - bs - trigger = "hover"
data - bs - html = "false"
2023-10-03 13:15:17 +00:00
title = "Stop the TNC."
disabled
2023-09-11 14:09:17 +00:00
>
2023-10-03 13:15:17 +00:00
< i class = "bi bi-stop-fill" > < / i >
2023-10-20 11:47:42 +00:00
< span class = "ms-2" > Stop modem < / span >
2023-10-03 13:15:17 +00:00
< / button >
< / div >
< / h5 >
< p class = "card-text" >
Start or stop the TNC service . The TNC daemon must be running
and will work whether the TNC is local or remote .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
2023-10-03 13:15:17 +00:00
< / div >
<!-- HELP MODALS AUDIO LEVEL -- >
< div
class = "modal fade"
data - bs - backdrop = "static"
tabindex = "-1"
id = "audioLevelHelpModal"
>
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Help < / h5 >
< button
type = "button"
class = "btn btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< div class = "modal-body" >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
< div class = "progress mb-0" style = "height: 22px" >
2023-09-11 14:09:17 +00:00
< div
2023-10-03 13:15:17 +00:00
class = "progress-bar progress-bar-striped bg-primary force-gpu"
role = "progressbar"
style = "width: 5%"
aria - valuenow = "5"
aria - valuemin = "0"
aria - valuemax = "100"
> < / div >
< p
class = "justify-content-center d-flex position-absolute w-100"
2023-09-11 14:09:17 +00:00
>
2023-10-03 13:15:17 +00:00
- 38 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 >
< / h5 >
< p class = "card-text" >
Represents the level of audio from transceiver . Excessively high
levels will affect decoding performance negatively .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< / div >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
< div class = "progress mb-0" style = "height: 22px" >
< div
class = "progress-bar progress-bar-striped bg-primary force-gpu"
role = "progressbar"
style = "width: 30%"
aria - valuenow = "0"
aria - valuemin = "0"
aria - valuemax = "100"
> < / div >
< p
class = "justify-content-center d-flex position-absolute w-100"
id = "noise_level_value"
>
- 24 S - Meter ( dBm )
< / 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 >
< / h5 >
< p class = "card-text" >
Represents noise level of the channel from the transceiver .
Requires hamlib rig control .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
< / div >
2023-10-03 13:15:17 +00:00
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
2023-10-22 08:12:00 +00:00
< button
type = "button"
class = "btn btn-sm btn-outline-secondary"
2023-11-18 18:06:29 +00:00
@ click = "sendModemTestFrame()"
2023-10-22 08:12:00 +00:00
>
2023-10-03 13:15:17 +00:00
Tune
< / button >
< / h5 >
< p class = "card-text" >
Adjust volume level of outgoing audio to transceiver . For best
results lower the level so that a minimum amount of ALC is used .
Can be used in combination with rig ' s mic / input gain for
furthrer refinement .
< / p >
< / div >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
< button type = "button" class = "btn btn-sm btn-outline-danger" >
Record audio
< / button >
< / h5 >
< p class = "card-text" > Create a recording of current channel < / p >
2023-09-11 14:09:17 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
2023-10-03 13:15:17 +00:00
< / div >
<!-- HELP MODALS BROADCASTS -- >
< div
class = "modal fade"
data - bs - backdrop = "static"
tabindex = "-1"
id = "broadcastsHelpModal"
>
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Help < / h5 >
< button
type = "button"
class = "btn btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
< div class = "card mb-3" >
< div class = "card-body" >
< button
class = "btn btn-sm btn-outline-secondary ms-1"
type = "button"
disabled
>
Ping
< / button >
< p class = "card-text" >
Send a ping to a remote station by entering a callsign and
optional SSID ( - 0 will be used if not specified . ) Alternatively
click on a station in the heard station list to populate the
call sign field . If the remote station decodes the ping it will
transmit a reply . If able to decode the reply , a signal report
will be listed in the heard station list .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< / div >
< div class = "card mb-3" >
< div class = "card-body" >
< button
class = "btn btn-sm btn-outline-secondary"
type = "button"
disabled
>
Call CQ
< / button >
< p class = "card-text" > Sending out a CQ CQ CQ to the world . < / p >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< / div >
< div class = "card mb-3" >
< div class = "card-body" >
< button
type = "button"
class = "btn btn-sm btn-outline-secondary"
disabled
>
< i class = "bi bi-soundwave" > < / i > Toggle beacon
< / button >
< p class = "card-text" >
Sends a periodic broadcast ( duration is definable in settings )
that announces you are available . Check explorer to see other
active stations that may have decoded your beacon .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
2023-10-03 13:15:17 +00:00
< / div >
<!-- HELP MODALS WATERFALL -- >
< div
class = "modal fade"
data - bs - backdrop = "static"
tabindex = "-1"
id = "waterfallHelpModal"
>
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Help < / h5 >
< button
type = "button"
class = "btn btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
Waterfall
< input
type = "radio"
class = "btn-check"
name = "waterfall-scatter-switch"
autocomplete = "off"
checked
/ >
< label
class = "btn btn-sm btn-outline-secondary"
for = "waterfall-scatter-switch1"
> < strong > < i class = "bi bi-water" > < / i > < / strong >
< / label >
< / h5 >
< p class = "card-text" >
Displays a waterfall for activity of current channel .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< / div >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
Busy Indicator
2023-09-11 14:09:17 +00:00
2023-10-03 13:15:17 +00:00
< button class = "btn btn-sm btn-success" type = "button" >
busy
2023-09-11 14:09:17 +00:00
< / button >
2023-10-03 13:15:17 +00:00
< / h5 >
< p class = "card-text" >
Green when channel is open and changes to red to indicate there
is activity on the channel .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< / div >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
Signal Indicator
< button class = "btn btn-sm btn-success" type = "button" >
signal
2023-09-11 14:09:17 +00:00
< / button >
2023-10-03 13:15:17 +00:00
< / h5 >
< p class = "card-text" >
Changes to green when Codec2 data is detected on channel .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
< / div >
2023-10-03 13:15:17 +00:00
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
Constellation Plot
< input type = "radio" class = "btn-check" autocomplete = "off" / >
< label class = "btn btn-sm btn-outline-secondary"
> < strong > < i class = "bi bi-border-outer" > < / i > < / strong >
< / label >
< / h5 >
< p class = "card-text" >
Displays a plot of last decoded message . A constellation plot is
a simple way to represent signal quality .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-03 13:15:17 +00:00
< / div >
< div class = "card mb-3" >
< div class = "card-body" >
< h5 class = "card-title" >
Speed Chart
2023-09-11 14:09:17 +00:00
2023-10-03 13:15:17 +00:00
< input type = "radio" class = "btn-check" autocomplete = "off" / >
< label class = "btn btn-sm btn-outline-secondary"
> < strong > < i class = "bi bi-graph-up-arrow" > < / i > < / strong >
< / label >
< / h5 >
< p class = "card-text" >
Shows history of SNR and bit rate of messages .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
2023-10-03 13:15:17 +00:00
< / div >
2023-09-11 14:09:17 +00:00
2023-10-03 13:15:17 +00:00
<!-- HELP MODALS HEARD STATIONS -- >
< div
class = "modal fade"
data - bs - backdrop = "static"
tabindex = "-1"
id = "heardStationsHelpModal"
>
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Station List Help < / h5 >
< button
type = "button"
class = "btn btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
< div class = "card mb-3" >
< div class = "card-body" >
< p class = "card-text" >
Stations that you ' ve been able to decode will be listed here .
Details such as time , frequency , message type , call sign ,
location and SNR will be listed . Existing entries are updated if
they already exist and more detailed history can be viewed in
chat window for each station .
< / p >
2023-09-11 14:09:17 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
2023-10-03 13:15:17 +00:00
< / div >
2023-09-11 14:09:17 +00:00
2023-10-03 13:15:17 +00:00
<!-- AUDIO MODAL -- >
< div
class = "modal fade"
data - bs - backdrop = "static"
tabindex = "-1"
id = "audioModal"
>
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Audio tuning < / h5 >
< button
type = "button"
class = "btn btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
2024-01-12 22:07:06 +00:00
< div class = "alert alert-info" role = "alert" >
Adjust audio levels . Value in dB . Default is < strong > 0 < / strong >
< / div >
2024-01-12 21:52:56 +00:00
2023-10-03 13:15:17 +00:00
< div class = "input-group input-group-sm mb-1" >
< span class = "input-group-text" > Test - Frame < / span >
2023-09-11 14:09:17 +00:00
< button
type = "button"
2023-10-03 13:15:17 +00:00
id = "sendTestFrame"
2023-11-18 18:06:29 +00:00
@ click = "sendModemTestFrame()"
2023-10-03 13:15:17 +00:00
class = "btn btn-danger"
>
Transmit
< / button >
2023-09-11 14:09:17 +00:00
< / div >
2023-10-31 14:29:33 +00:00
< div class = "input-group input-group-sm mb-1" >
< span class = "input-group-text" > RX Level < / span >
2024-01-12 20:40:52 +00:00
< span class = "input-group-text" > { {
settings . remote . AUDIO . rx _audio _level
} } < / span >
2023-10-31 14:29:33 +00:00
< span class = "input-group-text w-75" >
< input
type = "range"
class = "form-range"
min = "-30"
max = "20"
step = "1"
id = "audioLevelRX"
2024-01-12 20:40:27 +00:00
@ change = "onChange"
2024-01-12 21:52:56 +00:00
v - model . number = "settings.remote.AUDIO.rx_audio_level"
2023-10-31 14:29:33 +00:00
/ > < / s p a n >
< / div >
2023-10-03 13:15:17 +00:00
< div class = "input-group input-group-sm mb-1" >
< span class = "input-group-text" > TX Level < / span >
2024-01-12 20:40:52 +00:00
< span class = "input-group-text" > { {
settings . remote . AUDIO . tx _audio _level
} } < / span >
2023-10-03 13:15:17 +00:00
< span class = "input-group-text w-75" >
< input
type = "range"
class = "form-range"
2023-10-31 14:29:33 +00:00
min = "-30"
max = "20"
2023-10-03 13:15:17 +00:00
step = "1"
id = "audioLevelTX"
2024-01-12 20:40:27 +00:00
@ change = "onChange"
2024-01-12 21:52:56 +00:00
v - model . number = "settings.remote.AUDIO.tx_audio_level"
2023-10-03 13:15:17 +00:00
/ > < / s p a n >
2023-09-11 14:09:17 +00:00
< / div >
< / div >
< / div >
< / div >
2023-10-03 13:15:17 +00:00
< / div >
< / template >