Crash_Override/FreeDATA
1
0
Fork 0
mirror of https://github.com/DJ2LS/FreeDATA synced 2024-05-14 10:04:33 +02:00
Code Issues Packages Projects Releases Wiki Activity
FreeDATA/gui/src/index.html
dj2ls 96a4fde978 some more icons 
beautifiing the gui a little bit...
2021-12-07 19:10:59 +01:00

1090 lines
72 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
<!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self';">-->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- Waterfall CSS -->
<link rel="stylesheet" type="text/css" href="waterfall/waterfall.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--<title>codec2 | FreeDATA</title>-->
<title>FreeDATA</title>
</head>
<body>
<!-- SECONDARY NAVBAR -->
<nav class="navbar bg-light fixed-top navbar-underline mt-0 mb-1 pb-1 pt-1 shadow">
<div class="container-fluid mt-0">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<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-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" id="local-remote-switch1" autocomplete="off" checked>
<label class="btn btn-outline-secondary" for="local-remote-switch1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pc-display-horizontal" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.5 0A1.5 1.5 0 0 0 0 1.5v7A1.5 1.5 0 0 0 1.5 10H6v1H1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-5v-1h4.5A1.5 1.5 0 0 0 16 8.5v-7A1.5 1.5 0 0 0 14.5 0h-13Zm0 1a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5h-13ZM12 12.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0ZM1.5 12a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5ZM1 14.25a.25.25 0 0 1 .25-.25h5.5a.25.25 0 1 1 0 .5h-5.5a.25.25 0 0 1-.25-.25Z" />
</svg>
</label>
<input type="radio" class="btn-check" name="local-remote-switch" id="local-remote-switch2" autocomplete="off">
<label class="btn btn-outline-secondary" for="local-remote-switch2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-ethernet" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2ZM1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2Zm13 11.5v-7a.5.5 0 0 0-.5-.5H12V4.5a.5.5 0 0 0-.5-.5h-1v-.5A.5.5 0 0 0 10 3H6a.5.5 0 0 0-.5.5V4h-1a.5.5 0 0 0-.5.5V6H2.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5ZM3.75 11a.25.25 0 0 0-.25.25v1.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0-.25-.25h-.5Zm2 0a.25.25 0 0 0-.25.25v1.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0-.25-.25h-.5Zm1.75.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5ZM9.75 11a.25.25 0 0 0-.25.25v1.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0-.25-.25h-.5Zm1.75.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5Z" />
</svg>
</label>
</div>
<div class="input-group input-group-sm me-2" id="remote-tnc-field"> <span class="input-group-text" id="basic-addon1">IP</span>
<input type="text" class="form-control" placeholder="ip adress" id="tnc_adress" value="192.168.178.163" maxlength="17" style="width: 8rem" aria-label="Username" aria-describedby="basic-addon1"> <span class="input-group-text" id="basic-addon1">:</span>
<input type="text" class="form-control" placeholder="port" value="3000" id="tnc_port" maxlength="5" style="width: 4rem" aria-label="Username" aria-describedby="basic-addon1">
<button class="btn btn-sm btn-danger" id="daemon_connection_state" type="button" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-diagram-3" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z" />
</svg>
</button>
</div>
<div class="input-group input-group-sm" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-html="true" title="Start or stop the tnc process. Please set your audio and radio settings first!">
<button type="button" id="startTNC" class="btn btn-success">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
<path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
</svg>
</button>
<div class="input-group-text">TNC</div>
<!-- <span class="input-group-text" id="tnc_running_state" style="width: 5rem">---</span>-->
<button type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" id="stopTNC" class="btn btn-sm btn-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-x-octagon-fill" viewBox="0 0 16 16">
<path d="M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353L11.46.146zm-6.106 4.5L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z" />
</svg>
</button>
</div>
</div>
<div class="btn-toolbar" role="toolbar">
<button class="btn btn-sm btn-primary me-2" id="openRFChat" type="button" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-html="false" title="Open the HF chat module. This is currently just a test and not finished, yet!"> <strong>RF Chat</strong>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-chat-left-text-fill" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4.414a1 1 0 0 0-.707.293L.854 15.146A.5.5 0 0 1 0 14.793V2zm3.5 1a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 2.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 2.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5z" />
</svg>
</button> <span data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-html="false" title="View the received files. This is currently under development!">
<button class="btn btn-sm btn-primary me-2" data-bs-toggle="offcanvas" data-bs-target="#receivedFilesSidebar" id="openReceivedFiles" type="button"> <strong>Received Files </strong>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-file-earmark-arrow-down-fill" viewBox="0 0 16 16">
<path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zm-1 4v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 11.293V7.5a.5.5 0 0 1 1 0z" />
</svg>
</button>
</span>
<span data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-html="false" title="Send files through HF. This is currently under development!">
<button class="btn btn-sm btn-primary me-2" id="openDataModule" data-bs-toggle="offcanvas" data-bs-target="#transmitFileSidebar" type="button" > <strong>Transmit File </strong>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-file-earmark-arrow-up-fill" viewBox="0 0 16 16">
<path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM6.354 9.854a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 8.707V12.5a.5.5 0 0 1-1 0V8.707L6.354 9.854z" />
</svg>
</button>
</span>
</div>
</div>
</nav>
<div id="blurdiv" style="-webkit-Filter: blur(10px)">
<!--beginn of blur div -->
<!-------------------------------- MAIN AREA ---------------->
<!-------------------------------- INFO TOASTS ---------------->
<div aria-live="polite" aria-atomic="true" class="position-relative" style="z-index: 500">
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- SENDING CQ -->
<div class="toast align-items-center text-white bg-primary border-0" id="toastCQsending" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">Sending CQ CQ CQ</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- RECEIVING CQ -->
<div class="toast align-items-center text-white bg-primary border-0" id="toastCQreceiving" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">Receiving CQ CQ CQ</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- RECEIVING BEACON -->
<div class="toast align-items-center text-white bg-primary border-0" id="toastBEACONreceiving" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">Receiving a beacons signal!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- SENDING PING -->
<div class="toast align-items-center text-white bg-primary border-0" id="toastPINGsending" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">Sending Ping</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- RECEIVED PING -->
<div class="toast align-items-center text-white bg-primary border-0" id="toastPINGreceiving" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">RECEIVED PING REQUEST</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- RECEIVED PING ACK -->
<div class="toast align-items-center text-white bg-success border-0" id="toastPINGreceivedACK" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">RECEIVED PING ACKNOWLEDGE</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- DATACHANNEL OPENING -->
<div class="toast align-items-center text-white bg-secondary border-0" id="toastDATACHANNELopening" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">OPENING DATACHANNEL</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- DATACHANNEL OPEN -->
<div class="toast align-items-center text-white bg-success border-0" id="toastDATACHANNELopen" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">DATACHANNEL OPENED!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- DATACHANNEL RECEIVED OPENER -->
<div class="toast align-items-center text-white bg-secondary border-0" id="toastDATACHANNELreceivedopener" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">INCOMMING FILE TRANSMISSION</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- DATACHANNEL FAILED -->
<div class="toast align-items-center text-white bg-danger border-0" id="toastDATACHANNELfailed" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">OPENING DATACHANNEL FAILED</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- ARQ RECEIVING -->
<div class="toast align-items-center text-white bg-secondary border-0" id="toastARQreceiving" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">Receiving file...</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- ARQ RECEIVING SUCCESS -->
<div class="toast align-items-center text-white bg-success border-0" id="toastARQreceivingsuccess" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">FILE SUCCESSFULL RECEIVED!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- ARQ RECEIVING FAILED -->
<div class="toast align-items-center text-white bg-danger border-0" id="toastARQreceivingfailed" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">FILE NOT SUCCESSFULL RECEIVED!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- ARQ TRANSMITTING -->
<div class="toast align-items-center text-white bg-secondary border-0" id="toastARQtransmitting" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">TRANSMITTING FILE...</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- ARQ TRANSMITTING FAILED -->
<div class="toast align-items-center text-white bg-danger border-0" id="toastARQtransmittingfailed" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">TRANSMITTING FILE FAILED!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- ARQ TRANSMITTING SUCCESS-->
<div class="toast align-items-center text-white bg-success border-0" id="toastARQtransmittingsuccess" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">FILE SUCCESSFULLY TRANSMITTED!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------------------------------------>
<div class="container mt-5 p-0">
<div class="row collapse multi-collapse show" id="collapseFirstRow">
<div class="col">
<div class="card text-dark bg-light mb-0">
<div class="card-header p-1">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-volume-up" viewBox="0 0 16 16">
<path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z" />
<path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z" />
<path d="M10.025 8a4.486 4.486 0 0 1-1.318 3.182L8 10.475A3.489 3.489 0 0 0 9.025 8c0-.966-.392-1.841-1.025-2.475l.707-.707A4.486 4.486 0 0 1 10.025 8zM7 4a.5.5 0 0 0-.812-.39L3.825 5.5H1.5A.5.5 0 0 0 1 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 7 12V4zM4.312 6.39 6 5.04v5.92L4.312 9.61A.5.5 0 0 0 4 9.5H2v-3h2a.5.5 0 0 0 .312-.11z" />
</svg> <strong>AUDIO SETTINGS</strong>
</div>
<div class="card-body p-2 mb-1">
<div class="input-group input-group-sm mb-1"> <span class="input-group-text" id="basic-addon1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-mic-fill" viewBox="0 0 16 16">
<path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z"/>
<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
</svg>
</span>
<select class="form-select form-select-sm" id="audio_input_selectbox" aria-label=".form-select-sm">
<!-- <option selected value="3011">USB Interface</option>-->
</select>
</div>
<div class="input-group input-group-sm mb-1"> <span class="input-group-text" id="basic-addon1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-volume-up-fill" viewBox="0 0 16 16">
<path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
<path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/>
<path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
</svg>
</span>
<select class="form-select form-select-sm" id="audio_output_selectbox" aria-label=".form-select-sm"></select>
</div>
<div class="progress mb-1" style="height: 20px;">
<div class="progress-bar progress-bar-striped bg-primary" id="rms_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">RX AUDIO LEVEL</p>
</div>
</div>
<div class="card-footer text-muted small">Please select audio device for RX and TX</div>
</div>
</div>
<div class="col">
<div class="card text-dark bg-light mb-0">
<div class="card-header p-1">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-projector" viewBox="0 0 16 16">
<path d="M14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM2.5 6a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Zm0 2a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z" />
<path fill-rule="evenodd" d="M0 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2 1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1H5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1 2 2 0 0 1-2-2V6Zm2-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" />
</svg> <strong>RADIO SETTINGS</strong>
</div>
<div class="card-body p-2">
<div class="input-group input-group-sm mb-1"> <span class="input-group-text" id="basic-addon1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-projector-fill" viewBox="0 0 16 16">
<path d="M2 4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1h6a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2Zm.5 2h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1ZM14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-12 1a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z"/>
</svg>
</span>
<!--<select class="form-select form-select-sm" aria-label=".form-select-sm" id="hamlib_deviceid" style="width:7rem">-->
<input class="form-control" list="datalistOptions" id="hamlib_deviceid" placeholder="Search radio..." style="width:7rem">
<datalist id="datalistOptions">
<option value="RIG_MODEL_ADT_200A">ADAT www.adat.ch ADT-200A</option>
<option value="RIG_MODEL_DX77">Alinco DX-77</option>
<option value="RIG_MODEL_DXSR8">Alinco DX-SR8</option>
<option value="RIG_MODEL_DDS60">AmQRPDDS-60</option>
<option value="RIG_MODEL_FUNCUBEDONGLE">AMSAT-UK FUNcube Dongle</option>
<option value="RIG_MODEL_SI570PEABERRY1">AE9RBSi570 Peaberry V1</option>
<option value="RIG_MODEL_SI570PEABERRY2">AE9RBSi570 Peaberry V2</option>
<option value="RIG_MODEL_FUNCUBEDONGLEPLUS">AMSAT-UK FUNcube Dongle Pro+</option>
<option value="RIG_MODEL_AR8200">AOR AR8200</option>
<option value="RIG_MODEL_AR8000">AOR AR8000</option>
<option value="RIG_MODEL_AR7030">AOR AR7030</option>
<option value="RIG_MODEL_AR5000">AOR AR5000</option>
<option value="RIG_MODEL_AR3030">AOR AR3030</option>
<option value="RIG_MODEL_AR3000A">AOR AR3000A</option>
<option value="RIG_MODEL_AR2700">AOR AR2700</option>
<option value="RIG_MODEL_AR8600">AOR AR8600</option>
<option value="RIG_MODEL_AR5000A">AOR AR5000A</option>
<option value="RIG_MODEL_AR7030P">AOR AR7030 Plus</option>
<option value="RIG_MODEL_SR2200">AOR SR2200</option>
<option value="RIG_MODEL_BARRETT_2050">Barrett2050</option>
<option value="RIG_MODEL_BARRETT_950">Barrett950</option>
<option value="RIG_MODEL_DWT">Coding TechnologiesDigital World Travelle</option>
<option value="RIG_MODEL_DORJI_DRA818V">DorjiDRA818V</option>
<option value="RIG_MODEL_DORJI_DRA818U">DorjiDRA818U</option>
<option value="RIG_MODEL_DKR8A">DrakeR-8A</option>
<option value="RIG_MODEL_DKR8B">DrakeR-8B</option>
<option value="RIG_MODEL_DTTSP">DTTS Microwave Society DttSP IPC</option>
<option value="RIG_MODEL_DTTSP_UDP">DTTS Microwave Society DttSP UDP</option>
<option value="RIG_MODEL_ELAD_FDM_DUO">ELAD FDM-DUO</option>
<option value="RIG_MODEL_K2">Elecraft K2</option>
<option value="RIG_MODEL_K3">Elecraft K3</option>
<option value="RIG_MODEL_K4">Elecraft K4</option>
<option value="RIG_MODEL_XG3">Elecraft XG3</option>
<option value="RIG_MODEL_K3S">Elecraft K3S</option>
<option value="RIG_MODEL_KX2">Elecraft KX2</option>
<option value="RIG_MODEL_KX3">Elecraft KX3</option>
<option value="RIG_MODEL_ELEKTOR304">ElektorElektor 3/04</option>
<option value="RIG_MODEL_ELEKTOR507">ElektorElektor SDR-USB</option>
<option value="RIG_MODEL_FIFISDR">FiFi FiFi-SDR</option>
<option value="RIG_MODEL_POWERSDR">FlexRadio/ANAN PowerSDR/Thetis</option>
<option value="RIG_MODEL_F6K">FlexRadio6xxx</option>
<option value="RIG_MODEL_SDR1000">Flex-radio SDR-1000</option>
<option value="RIG_MODEL_FLRIG">FLRigFLRig</option>
<option value="RIG_MODEL_FASDR">FunkamateurFA-SDR</option>
<option value="RIG_MODEL_DUMMY">Hamlib Dummy</option>
<option value="RIG_MODEL_DUMMY_NOVFO">Hamlib Dummy No VFO</option>
<option value="RIG_MODEL_NETRIGCTL">Hamlib NET rigctl</option>
<option value="RIG_MODEL_RSHFIQ">HobbyPCB RS-HFIQ</option>
<option value="RIG_MODEL_PT8000A">Hilberling PT-8000A</option>
<option value="RIG_MODEL_IC1275">Icom IC-1275</option>
<option value="RIG_MODEL_IC271">Icom IC-271</option>
<option value="RIG_MODEL_IC275">Icom IC-275</option>
<option value="RIG_MODEL_IC471">Icom IC-471</option>
<option value="RIG_MODEL_IC475">Icom IC-475</option>
<option value="RIG_MODEL_IC575">Icom IC-575</option>
<option value="RIG_MODEL_IC706">Icom IC-706</option>
<option value="RIG_MODEL_IC706MKII">Icom IC-706MkII</option>
<option value="RIG_MODEL_IC706MKIIG">Icom IC-706MkIIG</option>
<option value="RIG_MODEL_IC707">Icom IC-707</option>
<option value="RIG_MODEL_IC718">Icom IC-718</option>
<option value="RIG_MODEL_IC725">Icom IC-725</option>
<option value="RIG_MODEL_IC726">Icom IC-726</option>
<option value="RIG_MODEL_IC728">Icom IC-728</option>
<option value="RIG_MODEL_IC729">Icom IC-729</option>
<option value="RIG_MODEL_IC735">Icom IC-735</option>
<option value="RIG_MODEL_IC736">Icom IC-736</option>
<option value="RIG_MODEL_IC737">Icom IC-737</option>
<option value="RIG_MODEL_IC738">Icom IC-738</option>
<option value="RIG_MODEL_IC746">Icom IC-746</option>
<option value="RIG_MODEL_IC751">Icom IC-751</option>
<option value="RIG_MODEL_IC756">Icom IC-756</option>
<option value="RIG_MODEL_IC756PRO">Icom IC-756PRO</option>
<option value="RIG_MODEL_IC761">Icom IC-761</option>
<option value="RIG_MODEL_IC765">Icom IC-765</option>
<option value="RIG_MODEL_IC775">Icom IC-775</option>
<option value="RIG_MODEL_IC781">Icom IC-781</option>
<option value="RIG_MODEL_IC820">Icom IC-820H</option>
<option value="RIG_MODEL_IC821H">Icom IC-821H</option>
<option value="RIG_MODEL_IC970">Icom IC-970</option>
<option value="RIG_MODEL_ICR10">Icom IC-R10</option>
<option value="RIG_MODEL_ICR71">Icom IC-R71</option>
<option value="RIG_MODEL_ICR72">Icom IC-R72</option>
<option value="RIG_MODEL_ICR75">Icom IC-R75</option>
<option value="RIG_MODEL_ICR7000">Icom IC-R7000</option>
<option value="RIG_MODEL_ICR7100">Icom IC-R7100</option>
<option value="RIG_MODEL_ICR8500">Icom ICR-8500</option>
<option value="RIG_MODEL_ICR9000">Icom IC-R9000</option>
<option value="RIG_MODEL_IC910">Icom IC-910</option>
<option value="RIG_MODEL_IC78">Icom IC-78</option>
<option value="RIG_MODEL_IC746PRO">Icom IC-746PRO</option>
<option value="RIG_MODEL_IC756PROII">Icom IC-756PROII</option>
<option value="RIG_MODEL_ICID1">Icom IC ID-1</option>
<option value="RIG_MODEL_IC703">Icom IC-703</option>
<option value="RIG_MODEL_IC7800">Icom IC-7800</option>
<option value="RIG_MODEL_IC756PROIII">Icom IC-756PROIII</option>
<option value="RIG_MODEL_ICR20">Icom IC-R20</option>
<option value="RIG_MODEL_IC7000">Icom IC-7000</option>
<option value="RIG_MODEL_IC7200">Icom IC-7200</option>
<option value="RIG_MODEL_IC7700">Icom IC-7700</option>
<option value="RIG_MODEL_IC7600">Icom IC-7600</option>
<option value="RIG_MODEL_DELTAII">Ten-TecDelta II</option>
<option value="RIG_MODEL_IC92D">Icom IC-92D</option>
<option value="RIG_MODEL_ICR9500">Icom IC-R9500</option>
<option value="RIG_MODEL_IC7410">Icom IC-7410</option>
<option value="RIG_MODEL_IC9100">Icom IC-9100</option>
<option value="RIG_MODEL_ICRX7">Icom IC-RX7</option>
<option value="RIG_MODEL_IC7100">Icom IC-7100</option>
<option value="RIG_MODEL_ID5100">Icom ID-5100</option>
<option value="RIG_MODEL_IC2730">Icom IC-2730</option>
<option value="RIG_MODEL_IC7300">Icom IC-7300</option>
<option value="RIG_MODEL_IC_M700PRO">Icom IC-M700PRO</option>
<option value="RIG_MODEL_IC_M802">Icom IC-M802</option>
<option value="RIG_MODEL_IC_M710">Icom IC-M710</option>
<option value="RIG_MODEL_IC_M803">Icom IC-M803</option>
<option value="RIG_MODEL_PERSEUS">Microtelecom Perseus</option>
<option value="RIG_MODEL_IC785x">Icom IC-785x</option>
<option value="RIG_MODEL_X108G">XeiguX108G</option>
<option value="RIG_MODEL_ICR6">Icom IC-R6</option>
<option value="RIG_MODEL_IC7610">Icom IC-7610</option>
<option value="RIG_MODEL_ICR8600">Icom IC-R8600</option>
<option value="RIG_MODEL_ICR30">Icom IC-R30</option>
<option value="RIG_MODEL_IC9700">Icom IC-9700</option>
<option value="RIG_MODEL_ID4100">Icom ID-4100</option>
<option value="RIG_MODEL_ID31">Icom ID-31</option>
<option value="RIG_MODEL_ID51">Icom ID-51</option>
<option value="RIG_MODEL_IC705">Icom IC-705</option>
<option value="RIG_MODEL_PCR1000">Icom IC-PCR1000</option>
<option value="RIG_MODEL_PCR100">Icom IC-PCR100</option>
<option value="RIG_MODEL_PCR1500">Icom IC-PCR1500</option>
<option value="RIG_MODEL_PCR2500">Icom IC-PCR2500</option>
<option value="RIG_MODEL_NRD525">JRCNRD-525</option>
<option value="RIG_MODEL_NRD535">JRCNRD-535D</option>
<option value="RIG_MODEL_NRD545">JRCNRD-545 DSP</option>
<option value="RIG_MODEL_505DSP">Kachina505DSP</option>
<option value="RIG_MODEL_SI570PICUSB">KTH-SDR kitSi570 PIC-USB</option>
<option value="RIG_MODEL_TS50">KenwoodTS-50S</option>
<option value="RIG_MODEL_TS440">KenwoodTS-440S</option>
<option value="RIG_MODEL_TS450S">KenwoodTS-450S</option>
<option value="RIG_MODEL_TS570D">KenwoodTS-570D</option>
<option value="RIG_MODEL_TS690S">KenwoodTS-690S</option>
<option value="RIG_MODEL_TS711">KenwoodTS-711</option>
<option value="RIG_MODEL_TS790">KenwoodTS-790</option>
<option value="RIG_MODEL_TS811">KenwoodTS-811</option>
<option value="RIG_MODEL_TS850">KenwoodTS-850</option>
<option value="RIG_MODEL_TS870S">KenwoodTS-870S</option>
<option value="RIG_MODEL_TS940">KenwoodTS-940S</option>
<option value="RIG_MODEL_TS950S">KenwoodTS-950S</option>
<option value="RIG_MODEL_TS950SDX">KenwoodTS-950SDX</option>
<option value="RIG_MODEL_TS2000">KenwoodTS-2000</option>
<option value="RIG_MODEL_R5000">KenwoodR-5000</option>
<option value="RIG_MODEL_TS570S">KenwoodTS-570S</option>
<option value="RIG_MODEL_THD7A">KenwoodTH-D7A</option>
<option value="RIG_MODEL_THF6A">KenwoodTH-F6A</option>
<option value="RIG_MODEL_THF7E">KenwoodTH-F7E</option>
<option value="RIG_MODEL_TS930">KenwoodTS-930</option>
<option value="RIG_MODEL_THG71">KenwoodTH-G71</option>
<option value="RIG_MODEL_TS680S">KenwoodTS-680S</option>
<option value="RIG_MODEL_TS140S">KenwoodTS-140S</option>
<option value="RIG_MODEL_TMD700">KenwoodTM-D700</option>
<option value="RIG_MODEL_TMV7">KenwoodTM-V7</option>
<option value="RIG_MODEL_TS480">KenwoodTS-480</option>
<option value="RIG_MODEL_TRC80">KenwoodTRC-80</option>
<option value="RIG_MODEL_TS590S">KenwoodTS-590S</option>
<option value="RIG_MODEL_TRANSFOX">SigFox Transfox</option>
<option value="RIG_MODEL_THD72A">KenwoodTH-D72A</option>
<option value="RIG_MODEL_TMD710">KenwoodTM-D710(G)</option>
<option value="RIG_MODEL_TS590SG">KenwoodTS-590SG</option>
<option value="RIG_MODEL_TS990S">KenwoodTS-990s</option>
<option value="RIG_MODEL_TS890S">KenwoodTS-890S</option>
<option value="RIG_MODEL_THD74">KenwoodTH-D74</option>
<option value="RIG_MODEL_HF235">Lowe HF-235</option>
<option value="RIG_MODEL_MALACHITE">MalachiteDSP</option>
<option value="RIG_MODEL_MINIVNA">mRSminiVNA</option>
<option value="RIG_MODEL_HIQSDR">N2ADRHiQSDR</option>
<option value="RIG_MODEL_OS535">OptoelectronicsOptoScan535</option>
<option value="RIG_MODEL_OS456">OptoelectronicsOptoScan456</option>
<option value="RIG_MODEL_HPSDR">OpenHPSDRPiHPSDR</option>
<option value="RIG_MODEL_PRM8060">Philips/Simoco PRM8060</option>
<option value="RIG_MODEL_RA6790">RacalRA6790/GM</option>
<option value="RIG_MODEL_RA3702">RacalRA3702</option>
<option value="RIG_MODEL_EKD500">RFTEKD-500</option>
<option value="RIG_MODEL_ESMC">Rohde&SchwarzESMC</option>
<option value="RIG_MODEL_EB200">Rohde&SchwarzEB200</option>
<option value="RIG_MODEL_XK2100">Rohde&SchwarzXK2100</option>
<option value="RIG_MODEL_TRP8000">Skanti TRP8000</option>
<option value="RIG_MODEL_TRP8255">Skanti TRP 8255 S R</option>
<option value="RIG_MODEL_DRT1">SAT-SchneiderDRT1</option>
<option value="RIG_MODEL_SI570AVRUSB">SoftRock Si570 AVR-USB</option>
<option value="RIG_MODEL_OMNIVIP">Ten-TecOmni VI Plus</option>
<option value="RIG_MODEL_TT550">Ten-TecTT-550</option>
<option value="RIG_MODEL_TT538">Ten-TecTT-538 Jupiter</option>
<option value="RIG_MODEL_RX320">Ten-TecRX-320</option>
<option value="RIG_MODEL_RX340">Ten-TecRX-340</option>
<option value="RIG_MODEL_RX350">Ten-TecRX-350</option>
<option value="RIG_MODEL_TT516">Ten-TecTT-516 Argonaut V</option>
<option value="RIG_MODEL_TT565">Ten-TecTT-565 Orion</option>
<option value="RIG_MODEL_TT585">Ten-TecTT-585 Paragon</option>
<option value="RIG_MODEL_TT588">Ten-TecTT-588 Omni VII</option>
<option value="RIG_MODEL_RX331">Ten-TecRX-331</option>
<option value="RIG_MODEL_TT599">Ten-TecTT-599 Eagle</option>
<option value="RIG_MODEL_DSP10">TAPR DSP-10</option>
<option value="RIG_MODEL_TRXMANAGER_RIG">TRXManager 5.7.630+</option>
<option value="RIG_MODEL_BC780">Uniden BC780xlt</option>
<option value="RIG_MODEL_BC245">Uniden BC245xlt</option>
<option value="RIG_MODEL_BC895">Uniden BC895xlt</option>
<option value="RIG_MODEL_PRO2052">Radio ShackPRO-2052</option>
<option value="RIG_MODEL_BC250">Uniden BC250D</option>
<option value="RIG_MODEL_BCD396T">Uniden BCD-396T</option>
<option value="RIG_MODEL_BCD996T">Uniden BCD-996T</option>
<option value="RIG_MODEL_BC898">Uniden BC898T</option>
<option value="RIG_MODEL_VX1700">Vertex StandardVX-1700</option>
<option value="RIG_MODEL_V4L">Video4LinuxSW/FM radio</option>
<option value="RIG_MODEL_V4L2">Video4Linux2 SW/FM radio</option>
<option value="RIG_MODEL_WJ8888">Watkins-JohnsonWJ-8888</option>
<option value="RIG_MODEL_WR1000">Winradio WR-1000</option>
<option value="RIG_MODEL_WR1500">Winradio WR-1500</option>
<option value="RIG_MODEL_WR1550">Winradio WR-1550</option>
<option value="RIG_MODEL_WR3100">Winradio WR-3100</option>
<option value="RIG_MODEL_WR3150">Winradio WR-3150</option>
<option value="RIG_MODEL_WR3500">Winradio WR-3500</option>
<option value="RIG_MODEL_WR3700">Winradio WR-3700</option>
<option value="RIG_MODEL_G313">Winradio WR-G313</option>
<option value="RIG_MODEL_FT847">Yaesu FT-847</option>
<option value="RIG_MODEL_FT1000D">Yaesu FT-1000D</option>
<option value="RIG_MODEL_FT1000MPMKV">YaesuMARK-V FT-1000MP</option>
<option value="RIG_MODEL_FT747">Yaesu FT-747GX</option>
<option value="RIG_MODEL_FT757">Yaesu FT-757GX</option>
<option value="RIG_MODEL_FT757GXII">Yaesu FT-757GXII</option>
<option value="RIG_MODEL_FT767">Yaesu FT-767GX</option>
<option value="RIG_MODEL_FT736R">Yaesu FT-736R</option>
<option value="RIG_MODEL_FT840">Yaesu FT-840</option>
<option value="RIG_MODEL_FT900">Yaesu FT-900</option>
<option value="RIG_MODEL_FT920">Yaesu FT-920</option>
<option value="RIG_MODEL_FT890">Yaesu FT-890</option>
<option value="RIG_MODEL_FT990">Yaesu FT-990</option>
<option value="RIG_MODEL_FRG100">Yaesu FRG-100</option>
<option value="RIG_MODEL_FRG9600">Yaesu FRG-9600</option>
<option value="RIG_MODEL_FRG8800">Yaesu FRG-8800</option>
<option value="RIG_MODEL_FT817">Yaesu FT-817</option>
<option value="RIG_MODEL_FT100">Yaesu FT-100</option>
<option value="RIG_MODEL_FT857">Yaesu FT-857</option>
<option value="RIG_MODEL_FT897">Yaesu FT-897</option>
<option value="RIG_MODEL_FT1000MP">Yaesu FT-1000MP</option>
<option value="RIG_MODEL_FT1000MPMKVFLD">Yaesu MARK-V Field FT-1000MP</option>
<option value="RIG_MODEL_VR5000">Yaesu VR-5000</option>
<option value="RIG_MODEL_FT450">Yaesu FT-450</option>
<option value="RIG_MODEL_FT950">Yaesu FT-950</option>
<option value="RIG_MODEL_FT2000">Yaesu FT-2000</option>
<option value="RIG_MODEL_FT9000">Yaesu FTDX-9000</option>
<option value="RIG_MODEL_FT980">Yaesu FT-980</option>
<option value="RIG_MODEL_FTDX5000">Yaesu FTDX-5000</option>
<option value="RIG_MODEL_FTDX1200">Yaesu FTDX-1200</option>
<option value="RIG_MODEL_FT991">Yaesu FT-991</option>
<option value="RIG_MODEL_FT891">Yaesu FT-891</option>
<option value="RIG_MODEL_FTDX3000">Yaesu FTDX-3000</option>
<option value="RIG_MODEL_FT847UNI">Yaesu FT-847UNI</option>
<option value="RIG_MODEL_FT600">Yaesu FT-600</option>
<option value="RIG_MODEL_FTDX101D">Yaesu FTDX-101D</option>
<option value="RIG_MODEL_FT818">Yaesu FT-818</option>
<option value="RIG_MODEL_FTDX10">Yaesu FTDX-10</option>
<option value="RIG_MODEL_FT897D">Yaesu FT-897D</option>
<option value="RIG_MODEL_FTDX101MP">Yaesu FTDX-101MP</option>
</datalist> <span class="input-group-text" id="basic-addon1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-alt" viewBox="0 0 16 16">
<path d="M1 13.5a.5.5 0 0 0 .5.5h3.797a.5.5 0 0 0 .439-.26L11 3h3.5a.5.5 0 0 0 0-1h-3.797a.5.5 0 0 0-.439.26L5 13H1.5a.5.5 0 0 0-.5.5zm10 0a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1h-3a.5.5 0 0 0-.5.5z"/>
</svg>
</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="hamlib_ptt_protocol" style="width: 0.5rem">
<option value="RIG">RIG</option>
<option value="RTS">Serial RTS</option>
<option value="DTR-H">Serial DTR-High</option>
<option value="DTR-H">Serial DTR-Low</option>
<option value="PARALLEL">Rig PARALLEL</option>
<option value="MICDATA">Rig MICDATA</option>
<option value="CM108">Rig CM108</option>
</select>
</div>
<!--<hr class="m-1">-->
<div class="input-group input-group-sm mb-1"> <span class="input-group-text" id="basic-addon1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-usb-symbol" viewBox="0 0 16 16">
<path d="m7.792.312-1.533 2.3A.25.25 0 0 0 6.467 3H7.5v7.319a2.5 2.5 0 0 0-.515-.298L5.909 9.56A1.5 1.5 0 0 1 5 8.18v-.266a1.5 1.5 0 1 0-1 0v.266a2.5 2.5 0 0 0 1.515 2.298l1.076.461a1.5 1.5 0 0 1 .888 1.129 2.001 2.001 0 1 0 1.021-.006v-.902a1.5 1.5 0 0 1 .756-1.303l1.484-.848A2.5 2.5 0 0 0 11.995 7h.755a.25.25 0 0 0 .25-.25v-2.5a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25v2.5c0 .138.112.25.25.25h.741a1.5 1.5 0 0 1-.747 1.142L8.76 8.99a2.584 2.584 0 0 0-.26.17V3h1.033a.25.25 0 0 0 .208-.389L8.208.312a.25.25 0 0 0-.416 0Z"/>
</svg>
</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="hamlib_deviceport" style="width:7rem">
<!--<option selected value="/dev/ttyUSB0">/dev/ttyUSB0</option>
<option value="/dev/ttyUSB1">/dev/ttyUSB1</option>-->
</select> <span class="input-group-text" id="basic-addon1">Speed</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="hamlib_serialspeed">
<option value="1200">1200</option>
<option value="2400">2400</option>
<option value="4800">4800</option>
<option selected value="9600">9600</option>
<option value="14400">14400</option>
<option value="19200">19200</option>
<option value="28800">28800</option>
<option value="38400">38400</option>
<option value="57600">57600</option>
<option value="115200">115200</option>
</select>
</div>
<div class="btn-group" role="group" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-html="true" title="Set advanced hamlib settings like stop_bits and data_bits or a different port for a ptt device">
<button type="button" id="advancedHamlibSettingsButton" data-bs-toggle="modal" data-bs-target="#advancedHamlibSettingsModal" class="btn btn-sm btn-secondary">Advanced settings</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="testHamlib" class="btn btn-sm btn-outline-secondary" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-html="true" title="Test your hamlib settings and toggle PTT once. Button will become <strong class='text-success'>green</strong> on success and <strong class='text-danger'>red</strong> if fails.">Test settings</button>
</div>
</div>
<div class="card-footer text-muted small">Please select your radio settings. Starting the TNC saves them.</div>
</div>
</div>
<!--
<div class="col-3">
<div class="card text-dark bg-light mb-0" >
<div class="card-header p-1"><strong>TNC STATUS</strong></div>
<div class="card-body p-1 mb-1">
<div class="container p-1">
<div class="input-group input-group-sm mb-1">
<button type="button" id="startTNC"class="btn btn-success">Start</button>
<span class="input-group-text" id="tnc_running_state" style="width: 5rem">---</span>
<button type="button" id="stopTNC"class="btn btn-danger">STOP</button>
</div>
<div class="row">
<div class="col-md-auto">
CPU
</div>
<div class="col-8">
<div class="progress" style="height: 20px;" >
<div class="progress-bar progress-bar-striped bg-primary" id="progressbar_cpu" 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="progressbar_cpu_value"></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-auto">
RAM
</div>
<div class="col-8">
<div class="progress" style="height: 20px;" >
<div class="progress-bar progress-bar-striped bg-primary" id="progressbar_ram" 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="progressbar_ram_value"></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-auto">
TOE
</div>
<div class="col-md-auto">
<p class="text-start mb-0" id="toe"></p>
</div>
</div>
</div>
</div>
</div>
</div>
--></div>
</div>
<!--<hr class="m-1">-->
<div class="container mt-2 p-0">
<div class="row collapse multi-collapse" id="collapseSecondRow">
<div class="col-5">
<div class="card text-dark bg-light mb-1">
<div class="card-header p-1"><strong>MY STATION</strong>
</div>
<div class="card-body p-2">
<div class="row">
<div class="col-md-auto">
<div class="input-group input-group-sm mb-0" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-html="false" title="Enter your callsign and save it"> <span class="input-group-text" id="basic-addon1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person-bounding-box" viewBox="0 0 16 16">
<path d="M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1h-3zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5zM.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5z"/>
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
</svg>
</span>
<input type="text" class="form-control" style="max-width: 6rem; text-transform:uppercase" placeholder="callsign" pattern="[A-Z]*" id="myCall" maxlength="6" aria-label="Input group" aria-describedby="btnGroupAddon">
<button class="btn btn-success" id="saveMyCall" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
</svg>
</button>
</div>
</div>
<div class="col-md-auto">
<div class="input-group input-group-sm mb-0" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-html="false" title="Enter your gridsquare and save it"> <span class="input-group-text" id="basic-addon1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
</svg>
</span>
<input type="text" class="form-control mr-1" style="max-width: 6rem" placeholder="locator" id="myGrid" maxlength="6" aria-label="Input group" aria-describedby="btnGroupAddon">
<button class="btn btn-success" id="saveMyGrid" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
</svg>
</button>
</div>
</div>
</div>
<!-- end of row-->
</div>
</div>
</div>
<div class="col">
<div class="card text-dark bg-light mb-1">
<div class="card-header p-1"><strong>PING, CQ & BEACON</strong>
</div>
<div class="card-body p-2">
<div class="row">
<div class="col-md-auto">
<div class="input-group input-group-sm mb-0" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-html="false" title="Send a ping request to a remote station"> <span class="input-group-text">Ping</span>
<input type="text" class="form-control" style="max-width: 6rem; text-transform:uppercase" placeholder="DXcall" pattern="[A-Z]*" id="dxCall" maxlength="6" aria-label="Input group" aria-describedby="btnGroupAddon">
<button class="btn btn-success" id="sendPing" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrows-angle-contract" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707zM15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707z" />
</svg>
</div>
</div>
<div class="col-md-auto">
<div class="input-group input-group-sm mb-0" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-html="false" title="Send a CQ to the world">
<button class="btn btn-success" id="sendCQ" type="button">CQ CQ CQ</button>
</div>
</div>
<div class="col-md-auto">
<div class="input-group input-group-sm" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-html="false" title="Start or stop the Beacon mode. You can also set the interval. While sending a beacon, you can receive ping requests and open a datachannel. If a datachannel is openend, the beacon pauses.">
<button type="button" id="startBeacon" class="btn btn-success">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z" />
<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z" />
</svg>
</button>
<div class="input-group-text">Beacon</div>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="beaconInterval" style="width:5rem">
<option value="5">5s</option>
<option selected value="10">10s</option>
<option value="15">15s</option>
<option value="30">30s</option>
<option value="45">45s</option>
<option value="60">60s</option>
<option value="90">90s</option>+</select>
<button type="button" id="stopBeacon" class="btn btn-sm btn-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-x-octagon-fill" viewBox="0 0 16 16">
<path d="M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353L11.46.146zm-6.106 4.5L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z" />
</svg>
</button>
</div>
</div>
</div>
<!-- end of row-->
</div>
</div>
</div>
</div>
<div class="row collapse multi-collapse" id="collapseThirdRow">
<div class="col-5">
<div class="card text-dark bg-light mb-1">
<div class="card-header p-1">
<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>WATERFALL</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>SCATTER</strong>
</label>
</div>
</div>
<div class="card-body p-1" style="height: 200px">
<!--278px-->
<canvas id="waterfall" style="position: relative; z-index: 2;"></canvas>
<canvas id="scatter" style="position: relative; z-index: 1;"></canvas>
</div>
</div>
</div>
<div class="col">
<div class="card text-dark bg-light mb-1" style="height: 240px">
<!--325px-->
<div class="card-header p-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-columns-reverse" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M0 .5A.5.5 0 0 1 .5 0h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 0 .5Zm4 0a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1h-10A.5.5 0 0 1 4 .5Zm-4 2A.5.5 0 0 1 .5 2h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm4 0a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm-4 2A.5.5 0 0 1 .5 4h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm4 0a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5Zm-4 2A.5.5 0 0 1 .5 6h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm4 0a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm-4 2A.5.5 0 0 1 .5 8h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm4 0a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm-4 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm4 0a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1h-10a.5.5 0 0 1-.5-.5Zm-4 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm4 0a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm-4 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm4 0a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5Z" />
</svg><strong> HEARD STATIONS</strong>
</div>
<div class="card-body p-0">
<!-- START OF TABLE FOR HEARD STATIONS -->
<table class="table table-sm">
<thead>
<tr>
<th scope="col">Time</th>
<th scope="col">Frequency</th>
<th scope="col">DXCall</th>
<th scope="col">DXGrid</th>
<th scope="col">Distance</th>
<th scope="col">Type</th>
<th scope="col">SNR</th>
<th scope="col">Off</th>
</tr>
</thead>
<tbody id="heardstations">
<!--
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
-->
</tbody>
</table>
<!-- END OF HEARD STATIONS TABLE -->
</div>
</div>
</div>
</div>
</div>
</div>
<!------------------------------- RECEIVED FILES SIDEBAR ----------------------->
<div class="offcanvas offcanvas-end" tabindex="-1" id="receivedFilesSidebar" aria-labelledby="receivedFilesSidebarLabel">
<div class="offcanvas-header p-2">
<h5 id="receivedFilesSidebarLabel">
Received Files
</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-0">
<!-- START OF TABLE FOR RECEIVED FILES-->
<table class="table">
<thead>
<tr>
<th scope="col">Time</th>
<th scope="col">DXCall</th>
<!--<th scope="col">DXGrid</th>
<th scope="col">Distance</th>-->
<th scope="col">Filename</th>
<!--<th scope="col">SNR</th>-->
</tr>
</thead>
<tbody id="rx-data">
<!--
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
-->
</tbody>
</table>
<!-- END OF RECEIVED FILES-->
</div>
</div>
<!------------------------------- DATA SIDEBAR ----------------------->
<div class="offcanvas offcanvas-end" tabindex="-1" id="transmitFileSidebar" aria-labelledby="transmitFileSidebarLabel">
<div class="offcanvas-header p-2">
<h5 id="transmitFileSidebarLabel">Transmit Files</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-0">
<!--<div id="transmitFileSidebar" class="sidebar shadow-lg rounded">-->
<div class="container-fluid">
<div class="container mt-1">
<div class="row mb-1">
<div class="col">
<div class="card text-dark bg-light mb-0 ">
<div class="card-header p-1"> <strong>DX Station</strong>
</div>
<div class="card-body p-2">
<div class="row">
<div class="col-auto">
<div class="input-group input-group-sm mb-0">
<input type="text" class="form-control" style="max-width: 6rem; text-transform:uppercase" pattern="[A-Z]" placeholder="DXcall" id="dataModalDxCall" maxlength="6" aria-label="Input group" aria-describedby="btnGroupAddon">
</div>
</div>
<div class="col-auto">
<div class="input-group input-group-sm mb-0">
<button class="btn btn-success" id="dataModalSendPing" type="button">Ping</button> <span class="input-group-text text-secondary" id="dataModalPingACK">ACK</span>
<span class="input-group-text" id="dataModalPingDistance">0000 km</span>
<span class="input-group-text" id="dataModalPingDB">0 dB</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--col-->
</div>
<!--row-->
<div class="row mb-1">
<div class="col">
<div class="card text-dark bg-light mb-0 ">
<div class="card-header p-1"> <strong>Data</strong>
</div>
<div class="card-body p-2">
<div class="input-group input-group-sm mb-0">
<input type="file" class="form-control" id="dataModalFile">
<label class="input-group-text" for="inputGroupFile02">kB</label>
</div>
</div>
</div>
</div>
<!--col-->
</div>
<!--row-->
<div class="row mb-1">
<div class="col">
<div class="card text-dark bg-light mb-0">
<div class="card-header p-1"> <strong>Mode</strong>
</div>
<div class="card-body p-2">
<div class="row">
<div class="col">
<div class="input-group input-group-sm"> <span class="input-group-text" id="basic-addon1">Mode</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="datamode">
<!--<option value="14">low SNR (DC0)</option>-->
<option selected value="10">HIGH SNR (DC1)</option>
<option value="12">MED SNR (DC3)</option>
</select>
</div>
</div>
<div class="col-auto">
<div class="input-group input-group-sm"> <span class="input-group-text" id="basic-addon1">Frames</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="framesperburst">
<option selected value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!--col-->
</div>
<!--row-->
</div>
<div class="row mb-1">
<div class="col">
<button type="button" id="startTransmission" data-bs-dismiss="offcanvas" class="btn btn-success" style="width:100%" disabled>START TRANSMISSION</button>
</div>
<div class="col-md-auto">
<button type="button" id="stopTransmission" class="btn btn-danger" style="width:100%" disabled>STOP</button>
</div>
</div>
<!--
<div class="row">
<div class="col">
<div class="card text-dark bg-light mb-0" >
<div class="card-header p-2">Info </div>
<div class="card-body p-2">
123
</div>
</div>
</div>
</div>
-->
<div class="row">
<div class="col"></div>
</div>
<!--row-->
</div>
<!--container-->
<!--</div>-->
</div>
</div>
</div>
</div>
<!--end of blur div -->
<!---------------------------------------------------------------------- FOOTER AREA ------------------------------------------------------------>
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<div class="btn-toolbar" style="width:20%" role="toolbar">
<div class="btn-group btn-group-sm me-2" role="group">
<button class="btn btn-secondary" id="ptt_state" type="button" data-bs-placement="top" data-bs-toggle="tooltip" data-bs-html="true" title="PTT state:<strong class='text-success'>RECEIVING</strong> / <strong class='text-danger'>TRANSMITTING</strong>">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-broadcast-pin" viewBox="0 0 16 16">
<path d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707zm2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708zm5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708zm2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM6 8a2 2 0 1 1 2.5 1.937V15.5a.5.5 0 0 1-1 0V9.937A2 2 0 0 1 6 8z" />
</svg>
</button>
</div>
<div class="btn-group btn-group-sm me-2" role="group">
<button class="btn btn-secondary" id="busy_state" type="button" data-bs-placement="top" data-bs-toggle="tooltip" data-bs-html="true" title="TNC busy state: <strong class='text-success'>IDLE</strong> / <strong class='text-danger'>BUSY</strong>">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cpu" viewBox="0 0 16 16">
<path d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0zm-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3h-7zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z" />
</svg>
</button>
</div>
<div class="btn-group btn-group-sm me-2" role="group">
<button class="btn btn-secondary" id="arq_state" type="button" data-bs-placement="top" data-bs-toggle="tooltip" data-bs-html="true" title="DATA-CHANNEL state: <strong class='text-warning'>OPEN</strong>">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z" />
</svg>
</button>
</div>
<div class="btn-group btn-group-sm" role="group" style="visibility:hidden">
<button class="btn btn-secondary" id="signalling_state" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-code" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z" />
<path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z" />
<path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z" />
</svg>
</button>
<button class="btn btn-secondary" id="data_state" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-richtext" viewBox="0 0 16 16">
<path d="M7.5 3.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm-.861 1.542 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047L11 4.75V7a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 7v-.5s1.54-1.274 1.639-1.208zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z" />
<path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z" />
<path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z" />
</svg>
</button>
</div>
</div>
<div class="container-fluid" style="width:30%">
<div class="input-group input-group-sm">
<!--<span class="input-group-text" id="basic-addon1"><strong>Freq</strong></span>--> <span class="input-group-text" id="frequency">---</span>
<!--<span class="input-group-text" id="basic-addon1"><strong>Mode</strong></span>--> <span class="input-group-text" id="mode">---</span>
<!--<span class="input-group-text" id="basic-addon1"><strong>BW</strong></span>--> <span class="input-group-text" id="bandwith">---</span>
</div>
</div>
<div class="container-fluid" style="width:30%">
<div class="input-group input-group-sm"> <span class="input-group-text" id="basic-addon1"><strong>B/min</strong></span>
<span class="input-group-text" id="bytes_per_min">---</span>
<span class="input-group-text" id="basic-addon1"><strong>Total</strong></span>
<span class="input-group-text" id="total_bytes">---</span>
</div>
</div>
<div class="container-fluid" style="width:20%">
<div class="progress" style="height: 30px;">
<div class="progress-bar progress-bar-striped bg-primary" id="transmission_progress" 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">PROGRESS</p>-->
</div>
</div>
</div>
</nav>
<!-- bootstrap -->
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- chart.js -->
<script src="../node_modules/chart.js/dist/chart.min.js"></script>
<script src="../node_modules/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.min.js"></script>
<!--<script src="../ui.js"></script>-->
<!-- WATERFALL -->
<script src="waterfall/colormap.js"></script>
<script src="waterfall/spectrum.js"></script>
<script src="waterfall/spectrogram.js"></script>
<!--<script src="waterfall/script.js"></script>-->
<!-- HAMLIB ADVANCED SETTINGS MODAL -->
<div class="modal fade" data-bs-backdrop="static" tabindex="-1" id="advancedHamlibSettingsModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Hamlib advanced settings</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="input-group input-group-sm mb-1"> <span class="input-group-text" id="basic-addon1">Port</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="hamlib_deviceport_advanced">
<!--<option selected value="/dev/ttyUSB0">/dev/ttyUSB0</option>
<option value="/dev/ttyUSB1">/dev/ttyUSB1</option>-->
</select> <span class="input-group-text" id="basic-addon1">Speed</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="hamlib_serialspeed_advanced">
<option value="1200">1200</option>
<option value="2400">2400</option>
<option value="4800">4800</option>
<option selected value="9600">9600</option>
<option value="14400">14400</option>
<option value="19200">19200</option>
<option value="28800">28800</option>
<option value="38400">38400</option>
<option value="57600">57600</option>
<option value="115200">115200</option>
</select>
</div>
<div class="input-group input-group-sm mb-1"> <span class="input-group-text" id="basic-addon1">PTT</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="hamlib_ptt_protocol_advanced" style="width: 0.5rem">
<option value="RIG">RIG</option>
<option value="RTS">Serial RTS</option>
<option value="DTR-H">Serial DTR-High</option>
<option value="DTR-H">Serial DTR-Low</option>
<option value="PARALLEL">Rig PARALLEL</option>
<option value="MICDATA">Rig MICDATA</option>
<option value="CM108">Rig CM108</option>
</select>
</div>
<div class="input-group input-group-sm mb-1"> <span class="input-group-text" id="basic-addon1">Data bits</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="hamlib_databits_advanced">
<option value="7">7</option>
<option value="8">8 (Default)</option>
</select>
</div>
<div class="input-group input-group-sm mb-1"> <span class="input-group-text" id="basic-addon1">Stop bits</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="hamlib_stopbits_advanced">
<option value="1">1 (Default)</option>
<option value="2">2</option>
</select>
</div>
<div class="input-group input-group-sm mb-1"> <span class="input-group-text" id="basic-addon1">Handshake</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="hamlib_handshake_advanced">
<option value="None">None (Default)</option>
</select>
</div>
<div class="input-group input-group-sm mb-1"> <span class="input-group-text" id="basic-addon1">PTT Port</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="hamlib_ptt_port_advanced">
<!--<option selected value="/dev/ttyUSB0">/dev/ttyUSB0</option>
<option value="/dev/ttyUSB1">/dev/ttyUSB1</option>-->
</select> <span class="input-group-text" id="basic-addon1">PTT Speed</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="hamlib_pttspeed_advanced">
<option value="1200">1200</option>
<option value="2400">2400</option>
<option value="4800">4800</option>
<option selected value="9600">9600</option>
<option value="14400">14400</option>
<option value="19200">19200</option>
<option value="28800">28800</option>
<option value="38400">38400</option>
<option value="57600">57600</option>
<option value="115200">115200</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" id="testHamlibAdvanced" class="btn btn-sm btn-outline-secondary">Test settings</button>
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink