Crash_Override/FreeDATA
1
0
Fork 0
mirror of https://github.com/DJ2LS/FreeDATA synced 2024-05-14 08:04:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

gui optimization

Browse source 
gui now much smaller. hopefully it fits better to small screens now.
This commit is contained in:
DJ2LS 2021-10-23 17:20:28 +02:00
parent b2ac19a1a3
commit da8ba695ee
3 changed files with 33 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
gui/main.js
View file

@ -67,8 +67,8 @@ var daemonProcess = null;
function createWindow() { function createWindow() {
win = new BrowserWindow({ win = new BrowserWindow({
width: 1220, width: 1000,
height: 780, height: 600,
autoHideMenuBar: true, autoHideMenuBar: true,
icon: __dirname + '/src/app-icon.png', icon: __dirname + '/src/app-icon.png',
webPreferences: { webPreferences: {

8
gui/preload-main.js
View file

@ -286,10 +286,10 @@ advancedHamlibSettingsModal
// openDataModule button clicked // openDataModule button clicked
document.getElementById("openDataModule").addEventListener("click", () => { document.getElementById("openDataModule").addEventListener("click", () => {
if (document.getElementById("mySidebar").style.width == "40%") { if (document.getElementById("transmitFileSidebar").style.width == "40%") {
document.getElementById("mySidebar").style.width = "0px"; document.getElementById("transmitFileSidebar").style.width = "0px";
} else { } else {
document.getElementById("mySidebar").style.width = "40%"; document.getElementById("transmitFileSidebar").style.width = "40%";
} }
}) })
@ -349,7 +349,7 @@ advancedHamlibSettingsModal
// START TRANSMISSION // START TRANSMISSION
document.getElementById("startTransmission").addEventListener("click", () => { document.getElementById("startTransmission").addEventListener("click", () => {
document.getElementById("mySidebar").style.width = "0px"; document.getElementById("transmitFileSidebar").style.width = "0px";
var fileList = document.getElementById("dataModalFile").files; var fileList = document.getElementById("dataModalFile").files;
var reader = new FileReader(); var reader = new FileReader();

57
gui/src/index.html
View file

@ -41,11 +41,12 @@
</div> </div>
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
<button class="btn btn-sm btn-primary me-2" id="openRFChat" type="button" disabled> <button class="btn btn-sm btn-primary me-2" id="openRFChat" type="button" disabled>
<strong>RF Chat </strong> <strong>RF Chat</strong>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-text-fill" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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"/> <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> </svg>
</button> </button>
<button class="btn btn-sm btn-primary me-2" id="openReceivedFiles" type="button"> <button class="btn btn-sm btn-primary me-2" id="openReceivedFiles" type="button">
<strong>Received Files </strong> <strong>Received Files </strong>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-arrow-down-fill" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-arrow-down-fill" viewBox="0 0 16 16">
@ -207,7 +208,7 @@
<!------------------------------------------------------------------------------------------> <!------------------------------------------------------------------------------------------>
<div class="container mt-5 p-0"> <div class="container mt-5 p-0">
<div class="row"> <div class="row">
<div class="col"> <div class="col-4">
<div class="card text-dark bg-light mb-0" > <div class="card text-dark bg-light mb-0" >
<div class="card-header p-1"> <div class="card-header p-1">
<strong>Step 1: AUDIO SETTINGS</strong> <strong>Step 1: AUDIO SETTINGS</strong>
@ -236,7 +237,7 @@
--> -->
</div> </div>
</div> </div>
<div class="col"> <div class="col-5">
<div class="card text-dark bg-light mb-0"> <div class="card text-dark bg-light mb-0">
<div class="card-header p-1"> <div class="card-header p-1">
<strong>Step 2: RADIO SETTINGS</strong> <strong>Step 2: RADIO SETTINGS</strong>
@ -554,7 +555,7 @@
--> -->
</div> </div>
</div> </div>
<div class="col"> <div class="col-3">
<div class="card text-dark bg-light mb-0" > <div class="card text-dark bg-light mb-0" >
<div class="card-header p-1"><strong>Step 3: TNC STATUS</strong></div> <div class="card-header p-1"><strong>Step 3: TNC STATUS</strong></div>
<div class="card-body p-1 mb-1"> <div class="card-body p-1 mb-1">
@ -565,24 +566,20 @@
<button type="button" id="stopTNC"class="btn btn-danger">STOP</button> <button type="button" id="stopTNC"class="btn btn-danger">STOP</button>
</div> </div>
--> -->
<div class="container"> <div class="container p-1">
<div class="row">
<div class="col-md-auto">
TNC
</div>
<div class="col">
<div class="input-group input-group-sm mb-1"> <div class="input-group input-group-sm mb-1">
<button type="button" id="startTNC"class="btn btn-success">Start</button> <button type="button" id="startTNC"class="btn btn-success">Start</button>
<span class="input-group-text" id="tnc_running_state" style="width: 7rem">---</span> <span class="input-group-text" id="tnc_running_state" style="width: 5rem">---</span>
<button type="button" id="stopTNC"class="btn btn-danger">STOP</button> <button type="button" id="stopTNC"class="btn btn-danger">STOP</button>
</div> </div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-md-auto"> <div class="col-md-auto">
CPU CPU
</div> </div>
<div class="col"> <div class="col-8">
<div class="progress" style="height: 20px;" > <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> <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> <p class="justify-content-center d-flex position-absolute w-100" id="progressbar_cpu_value"></p>
@ -593,7 +590,7 @@
<div class="col-md-auto"> <div class="col-md-auto">
RAM RAM
</div> </div>
<div class="col"> <div class="col-8">
<div class="progress" style="height: 20px;" > <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> <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> <p class="justify-content-center d-flex position-absolute w-100" id="progressbar_ram_value"></p>
@ -619,10 +616,10 @@
</div> </div>
</div> </div>
</div> </div>
<hr class="m-1"> <!--<hr class="m-1">-->
<div class="container mt-2 p-0"> <div class="container mt-2 p-0">
<div class="row"> <div class="row">
<div class="col"> <div class="col-5">
<div class="card text-dark bg-light mb-1"> <div class="card text-dark bg-light mb-1">
<div class="card-header p-1"><strong>MY STATION</strong></div> <div class="card-header p-1"><strong>MY STATION</strong></div>
<div class="card-body p-2"> <div class="card-body p-2">
@ -683,7 +680,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col-5">
<div class="card text-dark bg-light mb-1" > <div class="card text-dark bg-light mb-1" >
<div class="card-header p-1"> <div class="card-header p-1">
<div class="btn-group btn-group-sm" role="group" aria-label="waterfall-scatter-switch toggle button group"> <div class="btn-group btn-group-sm" role="group" aria-label="waterfall-scatter-switch toggle button group">
@ -693,14 +690,14 @@
<label class="btn btn-sm btn-outline-secondary" for="waterfall-scatter-switch2"><strong>SCATTER</strong></label> <label class="btn btn-sm btn-outline-secondary" for="waterfall-scatter-switch2"><strong>SCATTER</strong></label>
</div> </div>
</div> </div>
<div class="card-body p-1" style="height: 278px"> <div class="card-body p-1" style="height: 200px"> <!--278px-->
<canvas id="waterfall" style="position: relative; z-index: 2;"></canvas> <canvas id="waterfall" style="position: relative; z-index: 2;"></canvas>
<canvas id="scatter" style="position: relative; z-index: 1;"></canvas> <canvas id="scatter" style="position: relative; z-index: 1;"></canvas>
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class="card text-dark bg-light mb-1" style="height: 325px"> <div class="card text-dark bg-light mb-1" style="height: 240px"> <!--325px-->
<div class="card-header p-1"><strong>HEARD STATIONS</strong></div> <div class="card-header p-1"><strong>HEARD STATIONS</strong></div>
<div class="card-body p-2"> <div class="card-body p-2">
<!-- START OF TABLE FOR HEARD STATIONS --> <!-- START OF TABLE FOR HEARD STATIONS -->
@ -762,7 +759,7 @@
<!-- END OF RECEIVED FILES--> <!-- END OF RECEIVED FILES-->
</div> </div>
<!------------------------------- DATA SIDEBAR -----------------------> <!------------------------------- DATA SIDEBAR ----------------------->
<div id="mySidebar" class="sidebar shadow-lg rounded"> <div id="transmitFileSidebar" class="sidebar shadow-lg rounded">
<div class="container-fluid"> <div class="container-fluid">
<div class="container mt-1"> <div class="container mt-1">
<div class="row mb-1"> <div class="row mb-1">
@ -818,13 +815,13 @@
</div> </div>
<div class="card-body p-2"> <div class="card-body p-2">
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col">
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<span class="input-group-text" id="basic-addon1">Mode</span> <span class="input-group-text" id="basic-addon1">Mode</span>
<select class="form-select form-select-sm" aria-label=".form-select-sm" id="datamode"> <select class="form-select form-select-sm" aria-label=".form-select-sm" id="datamode">
<option value="14">DATAC0 - Bad path</option> <option value="14">low SNR (DC0)</option>
<option selected value="10">DATAC1 - Good path</option> <option selected value="10">high SNR (DC1)</option>
<option value="12">DATAC3 - Medium path</option> <option value="12">med SNR (DC3)</option>
</select> </select>
</div> </div>
</div> </div>
@ -918,19 +915,19 @@
</div> </div>
<div class="container-fluid" style="width:30%"> <div class="container-fluid" style="width:30%">
<div class="input-group input-group-sm"> <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="basic-addon1"><strong>Freq</strong></span>-->
<span class="input-group-text" id="frequency">---</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="basic-addon1"><strong>Mode</strong></span>-->
<span class="input-group-text" id="mode">---</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="basic-addon1"><strong>BW</strong></span>-->
<span class="input-group-text" id="bandwith">---</span> <span class="input-group-text" id="bandwith">---</span>
</div> </div>
</div> </div>
<div class="container-fluid" style="width:30%"> <div class="container-fluid" style="width:30%">
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<span class="input-group-text" id="basic-addon1"><strong>Bytes/min</strong></span> <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="bytes_per_min">---</span>
<span class="input-group-text" id="basic-addon1"><strong>Total Bytes</strong></span> <span class="input-group-text" id="basic-addon1"><strong>Total</strong></span>
<span class="input-group-text" id="total_bytes">---</span> <span class="input-group-text" id="total_bytes">---</span>
</div> </div>
</div> </div>