kopia lustrzana https://github.com/ogre/habdec
Merge branch 'master' into ssdv
Michal Fratczak
commit
f87d612832
|
|
@ -1,6 +1,20 @@
|
|||
|
||||
|
||||
:root {
|
||||
--HD_bg: hsl(210, 15%, 24%);
|
||||
--HD_button: hsl(210, 15%, 34%);
|
||||
--HD_button_border: hsl(210, 15%, 15%);
|
||||
--HD_button_text: hsl(0, 0%, 80%);
|
||||
--HD_label: hsl(32, 93%, 45%);
|
||||
--HD_highlight: hsl(210, 80%, 45%);
|
||||
--HD_enabled: hsl(40, 100%, 40%);
|
||||
--HD_sentence: hsl(0, 100%, 33%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
body, html {
|
||||
background-color:hsl(210, 15%, 24%);
|
||||
background-color: var(--HD_bg);
|
||||
}
|
||||
|
||||
div{
|
||||
|
|
@ -8,13 +22,13 @@ div{
|
|||
}
|
||||
|
||||
label {
|
||||
color: hsl(32, 93%, 45%);
|
||||
color: var(--HD_label);
|
||||
}
|
||||
|
||||
button {
|
||||
background-color:hsl(210, 15%, 34%);
|
||||
border: none;
|
||||
color: #AAAAAA;
|
||||
background-color:var(--HD_button);
|
||||
color: var(--HD_button_text);
|
||||
/* border: none; */
|
||||
/* padding: 15px 32px; */
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
|
@ -22,11 +36,11 @@ button {
|
|||
height: 7.0rem;
|
||||
width: 8.0rem;
|
||||
|
||||
border: 0.1rem solid hsl(210, 15%, 20%);
|
||||
border: 0.1rem solid var(--HD_button_border);
|
||||
border-radius: .4rem;
|
||||
}
|
||||
button:hover, button:focus {
|
||||
background-color: #2980B9;
|
||||
background-color: var(--HD_highlight);
|
||||
}
|
||||
|
||||
input[type=checkbox]
|
||||
|
|
@ -50,13 +64,14 @@ input[type=checkbox]
|
|||
}
|
||||
|
||||
.habsentence_text {
|
||||
font-size: 12px;
|
||||
font-size: 12px;
|
||||
color: var(--HD_sentence);
|
||||
}
|
||||
|
||||
.ctrl_box {
|
||||
color: hsl(32, 93%, 60%);
|
||||
color: var(--HD_label);
|
||||
background-color: transparent;
|
||||
border: 0.1rem solid #000000;
|
||||
border: 0.1rem solid var(--HD_button_border);
|
||||
border-radius: .4rem;
|
||||
height: 2.5rem;
|
||||
padding: .6rem 1.0rem;
|
||||
|
|
@ -64,62 +79,62 @@ input[type=checkbox]
|
|||
}
|
||||
|
||||
.increment_button {
|
||||
background-color:hsl(210, 15%, 34%);
|
||||
background-color: var(--HD_button);
|
||||
border: none;
|
||||
color: #AAAAAA;
|
||||
color: var(--HD_button_text);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
height: 60px;
|
||||
width: 80px;
|
||||
|
||||
border: 0.1rem solid hsl(210, 15%, 20%);
|
||||
border: 0.1rem solid var(--HD_button_border);
|
||||
border-radius: .4rem;
|
||||
}
|
||||
|
||||
|
||||
/* Payloads DropDown Menu */
|
||||
/* DropDown Menu */
|
||||
|
||||
/* wrapper */
|
||||
.PayloadsWrapperDiv {
|
||||
.MenuWrapperDiv {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.PayloadsWrapperDiv a:hover {background-color: #ddd}
|
||||
.MenuWrapperDiv a:hover {background-color: rgb(75, 231, 14)}
|
||||
|
||||
|
||||
.PayloadsDropButton {
|
||||
background-color:hsl(210, 15%, 34%);
|
||||
.MenuDropButton {
|
||||
background-color:var(--HD_button);
|
||||
border: none;
|
||||
color: #AAAAAA;
|
||||
color: var(--HD_button_text);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
width: 23.5rem;
|
||||
height: 7.0rem;
|
||||
|
||||
border: 0.1rem solid hsl(210, 15%, 20%);
|
||||
border: 0.1rem solid var(--HD_button_border);
|
||||
border-radius: .4rem;
|
||||
}
|
||||
.PayloadsDropButton:hover, .PayloadsDropButton:focus {
|
||||
background-color: #2980B9;
|
||||
.MenuDropButton:hover, .MenuDropButton:focus {
|
||||
background-color: var(--HD_highlight);
|
||||
}
|
||||
|
||||
|
||||
/* Dropdown Content (Hidden by Default) */
|
||||
.PayloadsDropMenu {
|
||||
.MenuDropMenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f1f1f1;
|
||||
background-color: #46d41b;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Payload Button */
|
||||
.PayloadsDropMenu button {
|
||||
.MenuDropMenu button {
|
||||
display: block;
|
||||
color: black;
|
||||
/* color: black; */
|
||||
padding: 16px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
|
|
|
|||
|
|
@ -6,107 +6,29 @@
|
|||
<script src="js/habdec_commands.js"></script>
|
||||
<script src="js/drawing.js"></script>
|
||||
<script src="js/gui.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="js/color_schemes.js"></script>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
div {
|
||||
font-family: Tahoma, Verdana, Segoe, sans-serif;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/habdec.css">
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div {
|
||||
font-family: Tahoma, Verdana, Segoe, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="css/habdec.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Power Spectrum -->
|
||||
<div style="display: grid; grid-template-columns: auto 80px; width: 100%; height: 150px;" >
|
||||
<div id="cnt_powerSpectrumCanvas" style="display: flex;">
|
||||
<canvas id="powerSpectrumCanvas" ></canvas>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" style="height: 50%; width: 100%; overflow: auto; font-size: 30px;" onclick="(function(){G_SPECTRUM_ZOOM += .1})()" > + </button><br>
|
||||
<button type="button" style="height: 50%; width: 100%; overflow: auto; font-size: 30px;" onclick="(function(){G_SPECTRUM_ZOOM -= .1})()" > - </button><br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 540px;">
|
||||
<!-- Demod Graph -->
|
||||
<div>
|
||||
<div id="cnt_demodCanvas" style="display: flex; height: 128px;">
|
||||
<canvas id="demodCanvas" height="128px"></canvas>
|
||||
</div>
|
||||
<div>
|
||||
<div id="cnt_debug" style="font-size: 12px;"></div>
|
||||
<!-- <div id="cnt_habsentence" class="habsentence">SENTENCE</div> -->
|
||||
<br>
|
||||
<div id="cnt_liveprint" class="habsentence_text" style="color: cadetblue; word-wrap: break-word;"></div>
|
||||
<div id="cnt_stats" class="habsentence_text" style="color: rgb(250, 0, 0)"></div>
|
||||
<div id="cnt_habsentence_list" class="habsentence_text"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Control Buttons -->
|
||||
<div>
|
||||
<div id="cnt_spectrum_zoom" class="ctrl_container"> </div>
|
||||
<div id="cnt_frequency" class="ctrl_container"> </div>
|
||||
<div id="cnt_decimation" class="ctrl_container"> </div>
|
||||
<div id="cnt_gain" class="ctrl_container"> </div>
|
||||
<div id="cnt_lowpass_bw" class="ctrl_container"> </div>
|
||||
<div id="cnt_lowpass_trans" class="ctrl_container"> </div>
|
||||
<div id="cnt_baud" class="ctrl_container"> </div>
|
||||
<div id="cnt_rtty_bits" class="ctrl_container"> </div>
|
||||
<div id="cnt_rtty_stops" class="ctrl_container"> </div>
|
||||
<div id="cnt_datasize" class="ctrl_container"> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: inline-block;">
|
||||
<button id="HD_biastee" onclick="SetBiasT()" > BiasTee </button>
|
||||
<button id="HD_afc" onclick="SetAFC()" > AFC </button>
|
||||
<button id="HD_dc_remove" onclick="SetDCRemove()" > DC Remove </button>
|
||||
</div>
|
||||
|
||||
<p> <button id="btnFullscreen" type="button" onclick="toggleFullscreen()">Fullscreen</button> </p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div><label>Server Address</label></div>
|
||||
<input id="server_address" value="localhost:5555" onchange="localStorage.setItem('habdec_server_address', document.getElementById('server_address').value);">
|
||||
<button onclick="OpenConnection()" >Connect</button>
|
||||
</div>
|
||||
|
||||
<!-- Payloads Dropwown Menu -->
|
||||
<div id="PayloadsWrapperDiv"></div>
|
||||
|
||||
<div id="HABDEC_UI_DIV"> </div>
|
||||
</body>
|
||||
|
||||
|
||||
<script language="javascript" type="text/javascript">
|
||||
|
||||
var G_POWER_FPS = 40;
|
||||
var G_DEMOD_FPS = 4;
|
||||
|
||||
function habdec_init()
|
||||
{
|
||||
OpenConnection();
|
||||
CreateControls();
|
||||
document.getElementById("server_address").value = localStorage.getItem('habdec_server_address');
|
||||
if(document.getElementById("server_address").value == "")
|
||||
document.getElementById("server_address").value = "192.168.1.104:5555"
|
||||
ResizeCanvas("powerSpectrumCanvas");
|
||||
ResizeCanvas("demodCanvas");
|
||||
LoadFlightsData();
|
||||
|
||||
AnimatePowerSpectrum(0);
|
||||
AnimateDemod(0);
|
||||
}
|
||||
|
||||
window.addEventListener("load", habdec_init, false);
|
||||
|
||||
</script>
|
||||
|
||||
window.addEventListener("load", () => { habdec_init("HABDEC_UI_DIV", "192.168.88.249:5555") }, false);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
|
||||
var HD_COLOR_SCHEME;
|
||||
var HD_COLOR_SCHEMES = {};
|
||||
|
||||
HD_COLOR_SCHEMES["DEFAULT"] = {
|
||||
CSS: {
|
||||
HD_bg: "hsl(210, 15%, 15%)",
|
||||
HD_fg: "hsl(210, 15%, 25%)",
|
||||
HD_button: "hsl(210, 15%, 25%)",
|
||||
HD_button_border: "hsl(210, 15%, 15%)",
|
||||
HD_button_text: "hsl(0, 0%, 55%)",
|
||||
HD_label: "hsl(32, 93%, 45%)",
|
||||
HD_highlight: "hsl(210, 80%, 45%)",
|
||||
HD_enabled: "hsl(50, 100%, 40%)",
|
||||
HD_sentence: "hsl(0, 100%, 33%)"
|
||||
},
|
||||
SPECTRUM: {
|
||||
HIGH: "hsl(30, 30%, 100%)",
|
||||
MID: "hsl(30, 80%, 75%)",
|
||||
LOW: "hsl(30, 100%, 30%)",
|
||||
FILTER: "hsla(200, 50%, 30%, .5)"
|
||||
}
|
||||
};
|
||||
|
||||
HD_COLOR_SCHEMES["RED"] = {
|
||||
CSS: {
|
||||
HD_bg: "hsl(0, 0%, 0%)",
|
||||
HD_fg: "hsl(0, 50%, 10%)",
|
||||
HD_button: "hsl(0, 100%, 5%)",
|
||||
HD_button_border: "hsl(0, 100%, 20%)",
|
||||
HD_button_text: "hsl(0, 100%, 60%)",
|
||||
HD_label: "hsl(0, 100%, 45%)",
|
||||
HD_highlight: "hsl(0, 80%, 45%)",
|
||||
HD_enabled: "hsl(0, 100%, 30%)",
|
||||
HD_sentence: "hsl(0, 100%, 33%)"
|
||||
},
|
||||
SPECTRUM: {
|
||||
HIGH: "hsl(0, 30%, 100%)",
|
||||
MID: "hsl(0, 80%, 55%)",
|
||||
LOW: "hsl(0, 100%, 10%)",
|
||||
FILTER: "hsla(0, 50%, 30%, .5)"
|
||||
}
|
||||
};
|
||||
|
||||
HD_COLOR_SCHEMES["GREEN"] = {
|
||||
CSS: {
|
||||
HD_bg: "hsl(120, 0%, 0%)",
|
||||
HD_fg: "hsl(120, 50%, 10%)",
|
||||
HD_button: "hsl(120, 100%, 2%)",
|
||||
HD_button_border: "hsl(120, 100%, 15%)",
|
||||
HD_button_text: "hsl(120, 100%, 30%)",
|
||||
HD_label: "hsl(120, 100%, 30%)",
|
||||
HD_highlight: "hsl(120, 80%, 35%)",
|
||||
HD_enabled: "hsl(120, 100%, 20%)",
|
||||
HD_sentence: "hsl(120, 100%, 33%)"
|
||||
},
|
||||
SPECTRUM: {
|
||||
HIGH: "hsl(120, 30%, 100%)",
|
||||
MID: "hsl(120, 80%, 55%)",
|
||||
LOW: "hsl(120, 100%, 10%)",
|
||||
FILTER: "hsla(120, 50%, 30%, .5)"
|
||||
}
|
||||
};
|
||||
|
||||
HD_COLOR_SCHEMES["BLUE"] = {
|
||||
CSS: {
|
||||
HD_bg: "hsl(210, 0%, 0%)",
|
||||
HD_fg: "hsl(210, 50%, 20%)",
|
||||
HD_button: "hsl(210, 100%, 4%)",
|
||||
HD_button_border: "hsl(210, 100%, 30%)",
|
||||
HD_button_text: "hsl(210, 100%, 60%)",
|
||||
HD_label: "hsl(210, 100%, 60%)",
|
||||
HD_highlight: "hsl(210, 80%, 30%)",
|
||||
HD_enabled: "hsl(210, 100%, 40%)",
|
||||
HD_sentence: "hsl(210, 100%, 75%)"
|
||||
},
|
||||
SPECTRUM: {
|
||||
HIGH: "hsl(210, 30%, 100%)",
|
||||
MID: "hsl(210, 80%, 75%)",
|
||||
LOW: "hsl(210, 100%, 20%)",
|
||||
FILTER: "hsla(210, 50%, 30%, .5)"
|
||||
}
|
||||
};
|
||||
|
||||
HD_COLOR_SCHEMES["GOLD"] = {
|
||||
CSS: {
|
||||
HD_bg: "hsl(40, 0%, 0%)",
|
||||
HD_fg: "hsl(40, 50%, 20%)",
|
||||
HD_button: "hsl(40, 100%, 4%)",
|
||||
HD_button_border: "hsl(40, 100%, 30%)",
|
||||
HD_button_text: "hsl(40, 100%, 60%)",
|
||||
HD_label: "hsl(40, 100%, 60%)",
|
||||
HD_highlight: "hsl(40, 80%, 30%)",
|
||||
HD_enabled: "hsl(40, 100%, 40%)",
|
||||
HD_sentence: "hsl(40, 100%, 75%)"
|
||||
},
|
||||
SPECTRUM: {
|
||||
HIGH: "hsl(40, 30%, 100%)",
|
||||
MID: "hsl(40, 80%, 75%)",
|
||||
LOW: "hsl(40, 100%, 20%)",
|
||||
FILTER: "hsla(40, 50%, 30%, .5)"
|
||||
}
|
||||
};
|
||||
|
||||
function HD_ApplyColorScheme(i_color_scheme) {
|
||||
HD_COLOR_SCHEME = i_color_scheme;
|
||||
let root = document.documentElement;
|
||||
for(prop in i_color_scheme['CSS'])
|
||||
{
|
||||
// document.documentElement.style.setProperty('--' + prop, i_color_scheme['CSS'][prop]);
|
||||
root.style.setProperty('--' + prop, i_color_scheme['CSS'][prop]);
|
||||
}
|
||||
|
||||
SetGuiToGlobals(HD_GLOBALS);
|
||||
|
||||
}
|
||||
|
|
@ -89,16 +89,16 @@ function DrawPowerSpectrum(i_canvas, i_spectrum)
|
|||
|
||||
// CLEAR THE CANVAS
|
||||
//
|
||||
ctx.clearRect(0, 0, i_canvas.width-1, i_canvas.height-1);
|
||||
ctx.clearRect(0, 0, i_canvas.width, i_canvas.height);
|
||||
|
||||
// BG
|
||||
//
|
||||
var grd_bg = ctx.createLinearGradient(0, 0, 0, i_canvas.height-1);
|
||||
grd_bg.addColorStop(0, "hsl(210, 15%, 24%)");
|
||||
grd_bg.addColorStop(.5, "hsl(210, 15%, 40%)");
|
||||
grd_bg.addColorStop(1, "hsl(210, 15%, 24%)");
|
||||
var grd_bg = ctx.createLinearGradient(0, 0, 0, i_canvas.height);
|
||||
grd_bg.addColorStop(0, HD_COLOR_SCHEME['CSS']['HD_bg']);
|
||||
grd_bg.addColorStop(.5, HD_COLOR_SCHEME['CSS']['HD_fg']);
|
||||
grd_bg.addColorStop(1, HD_COLOR_SCHEME['CSS']['HD_bg']);
|
||||
ctx.fillStyle = grd_bg;
|
||||
ctx.fillRect(0, 0, i_canvas.width-1, i_canvas.height-1);
|
||||
ctx.fillRect(0, 0, i_canvas.width, i_canvas.height);
|
||||
|
||||
G_SPECTRUM_ZOOM = Math.max(0, Math.min(1, G_SPECTRUM_ZOOM));
|
||||
|
||||
|
|
@ -106,22 +106,21 @@ function DrawPowerSpectrum(i_canvas, i_spectrum)
|
|||
|
||||
// LOWPASS FILTER DRAW
|
||||
//
|
||||
var _lowpass_bw_relative = GLOBALS.lowpass_bw / i_spectrum.sampling_rate_ / (1.0 - .999*zoom);
|
||||
var _lowpass_trans = GLOBALS.lowpass_trans / (1.0 - .999*zoom);
|
||||
var _lowpass_bw_relative = HD_GLOBALS.lowpass_bw / i_spectrum.sampling_rate_ / (1.0 - .999*zoom);
|
||||
var _lowpass_trans = HD_GLOBALS.lowpass_trans / (1.0 - .999*zoom);
|
||||
var grd_lowpass = ctx.createLinearGradient(0, 0, i_canvas.width-1, 0);
|
||||
var _l = Math.max(0, .5 - .5 * _lowpass_bw_relative);
|
||||
var _ll = Math.max(0, .5 - .5 * (_lowpass_bw_relative + _lowpass_trans));
|
||||
var _r = Math.min(1, .5 + .5 * _lowpass_bw_relative);
|
||||
var _rr = Math.min(1, .5 + .5 * (_lowpass_bw_relative + _lowpass_trans));
|
||||
|
||||
grd_lowpass.addColorStop(0, "rgba(15,25,50,0)");
|
||||
grd_lowpass.addColorStop(_ll, "rgba(15,25,50,0)");
|
||||
grd_lowpass.addColorStop(_l, "#113555");
|
||||
grd_lowpass.addColorStop(_r, "#113555");
|
||||
grd_lowpass.addColorStop(_rr, "rgba(15,25,50,0)");
|
||||
grd_lowpass.addColorStop(1, "rgba(15,25,50,0)");
|
||||
grd_lowpass.addColorStop(_ll, HD_COLOR_SCHEME['CSS']['HD_bg']);
|
||||
grd_lowpass.addColorStop(_l, HD_COLOR_SCHEME["SPECTRUM"]["FILTER"]);
|
||||
grd_lowpass.addColorStop(_r, HD_COLOR_SCHEME["SPECTRUM"]["FILTER"]);
|
||||
grd_lowpass.addColorStop(_rr, HD_COLOR_SCHEME['CSS']['HD_bg']);
|
||||
grd_lowpass.addColorStop(1, HD_COLOR_SCHEME['CSS']['HD_bg']);
|
||||
ctx.fillStyle = grd_lowpass;
|
||||
ctx.fillRect(0, 0, i_canvas.width-1, i_canvas.height-1);
|
||||
ctx.fillRect(0, 0, i_canvas.width, i_canvas.height);
|
||||
|
||||
// SPECTRUM
|
||||
//
|
||||
|
|
@ -159,10 +158,11 @@ function DrawPowerSpectrum(i_canvas, i_spectrum)
|
|||
// spectrum_min_avg *= 1.3; // drawing pedestal
|
||||
|
||||
// draw
|
||||
var power_grd = ctx.createLinearGradient(0, 0, 0, i_canvas.height-1);
|
||||
power_grd.addColorStop(1-Math.abs(noise_floor_avg / spectrum_min_avg), "yellow");
|
||||
power_grd.addColorStop(1-Math.abs(spectrum_max_avg / spectrum_min_avg), "#993311");
|
||||
power_grd.addColorStop(1 , "#301000");
|
||||
var power_grd = ctx.createLinearGradient(0, 0, 0, i_canvas.height);
|
||||
power_grd.addColorStop(1-Math.abs(noise_floor_avg / spectrum_min_avg), HD_COLOR_SCHEME['SPECTRUM']['HIGH']);
|
||||
power_grd.addColorStop(1-Math.abs(spectrum_max_avg / spectrum_min_avg), HD_COLOR_SCHEME['SPECTRUM']['MID']);
|
||||
power_grd.addColorStop(1 , HD_COLOR_SCHEME['SPECTRUM']['LOW']);
|
||||
|
||||
ctx.strokeStyle = power_grd;
|
||||
ctx.beginPath();
|
||||
for(var x=0; x<i_canvas.width; ++x)
|
||||
|
|
@ -190,7 +190,7 @@ function DrawPowerSpectrum(i_canvas, i_spectrum)
|
|||
var nf_0_1 = 1.0 - Math.abs(noise_floor_avg / spectrum_min_avg);
|
||||
nf_0_1 = Math.max(nf_0_1, 0);
|
||||
ctx.moveTo(0, (1-nf_0_1)*i_canvas.height - 1);
|
||||
ctx.lineTo(i_canvas.width-1, (1-nf_0_1)*i_canvas.height - 1);
|
||||
ctx.lineTo(i_canvas.width, (1-nf_0_1)*i_canvas.height - 1);
|
||||
ctx.stroke();
|
||||
|
||||
// PEAK LEFT
|
||||
|
|
@ -232,24 +232,24 @@ function DrawDemod(i_canvas, i_demod)
|
|||
|
||||
// BG
|
||||
//
|
||||
var grd_bg = ctx.createLinearGradient(0, 0, 0, i_canvas.height-1);
|
||||
grd_bg.addColorStop(0, "hsl(210, 15%, 24%)");
|
||||
grd_bg.addColorStop(.5,"hsl(210, 15%, 40%)");
|
||||
grd_bg.addColorStop(1, "hsl(210, 15%, 24%)");
|
||||
var grd_bg = ctx.createLinearGradient(0, 0, 0, i_canvas.height);
|
||||
grd_bg.addColorStop(0, HD_COLOR_SCHEME['CSS']['HD_bg']);
|
||||
grd_bg.addColorStop(.5,HD_COLOR_SCHEME['CSS']['HD_fg']);
|
||||
grd_bg.addColorStop(1, HD_COLOR_SCHEME['CSS']['HD_bg']);
|
||||
ctx.fillStyle = grd_bg;
|
||||
ctx.fillRect(0, 0, i_canvas.width-1, i_canvas.height-1);
|
||||
ctx.fillRect(0, 0, i_canvas.width, i_canvas.height);
|
||||
|
||||
// CENTER LINE
|
||||
//
|
||||
ctx.strokeStyle = 'hsl(210, 15%, 30%)';
|
||||
ctx.strokeStyle = HD_COLOR_SCHEME['SPECTRUM']['LOW'];
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, i_canvas.height/2);
|
||||
ctx.lineTo(i_canvas.width-1, i_canvas.height/2);
|
||||
ctx.lineTo(i_canvas.width, i_canvas.height/2);
|
||||
ctx.stroke();
|
||||
|
||||
// DEMOD
|
||||
//
|
||||
ctx.strokeStyle = "#aa5500";
|
||||
ctx.strokeStyle = HD_COLOR_SCHEME['SPECTRUM']['MID'];
|
||||
|
||||
ctx.beginPath();
|
||||
|
||||
|
|
@ -296,7 +296,7 @@ var G_PowerCanvas;
|
|||
function AnimatePowerSpectrum(timestamp)
|
||||
{
|
||||
if(G_PowerCanvas == undefined)
|
||||
G_PowerCanvas = document.getElementById("powerSpectrumCanvas");
|
||||
G_PowerCanvas = document.getElementById("HabDec_powerSpectrumCanvas");
|
||||
|
||||
if(!AnimatePowerSpectrum_last)
|
||||
AnimatePowerSpectrum_last = timestamp;
|
||||
|
|
@ -315,7 +315,7 @@ var G_DemodCanvas;
|
|||
function AnimateDemod(timestamp)
|
||||
{
|
||||
if(G_DemodCanvas == undefined)
|
||||
G_DemodCanvas = document.getElementById("demodCanvas");
|
||||
G_DemodCanvas = document.getElementById("HabDec_demodCanvas");
|
||||
|
||||
if(!AnimateDemod_last)
|
||||
AnimateDemod_last = timestamp;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
|
||||
|
||||
function CreateFloatBoxWithArrows( i_cnt, i_parameter, i_callback,
|
||||
i_min, i_max, i_default, step_small = 0, step_big = 0, step_box = 0)
|
||||
{
|
||||
|
|
@ -99,47 +100,55 @@ function SetGuiToGlobals(i_globals)
|
|||
}
|
||||
|
||||
// buttons
|
||||
var biastee_value = GLOBALS.biastee;
|
||||
|
||||
let root = document.documentElement;
|
||||
var rootStyles = getComputedStyle(root);
|
||||
var HD_bg = rootStyles.getPropertyValue('--HD_bg');
|
||||
var HD_button = rootStyles.getPropertyValue('--HD_button');
|
||||
var HD_button_text = rootStyles.getPropertyValue('--HD_button_text');
|
||||
var HD_enabled = rootStyles.getPropertyValue('--HD_enabled');
|
||||
|
||||
var biastee_value = HD_GLOBALS.biastee;
|
||||
if(biastee_value)
|
||||
{
|
||||
var button = document.getElementById("HD_biastee");
|
||||
button.style.backgroundColor = "#bb0";
|
||||
button.style.color = "#000";
|
||||
var button = document.getElementById("HabDecD_biastee");
|
||||
button.style.backgroundColor = HD_enabled;
|
||||
button.style.color = HD_bg;
|
||||
}
|
||||
else
|
||||
{
|
||||
var button = document.getElementById("HD_biastee");
|
||||
button.style.backgroundColor = "hsl(210, 15%, 34%)";
|
||||
button.style.color = "#AAA";
|
||||
var button = document.getElementById("HabDecD_biastee");
|
||||
button.style.backgroundColor = HD_button;
|
||||
button.style.color = HD_button_text;
|
||||
}
|
||||
|
||||
|
||||
var afc_value = GLOBALS.afc
|
||||
var afc_value = HD_GLOBALS.afc
|
||||
if(afc_value)
|
||||
{
|
||||
var button = document.getElementById("HD_afc");
|
||||
button.style.backgroundColor = "#bb0";
|
||||
button.style.color = "#000";
|
||||
var button = document.getElementById("HabDec_afc");
|
||||
button.style.backgroundColor = HD_enabled;
|
||||
button.style.color = HD_bg;
|
||||
}
|
||||
else
|
||||
{
|
||||
var button = document.getElementById("HD_afc");
|
||||
button.style.backgroundColor = "hsl(210, 15%, 34%)";
|
||||
button.style.color = "#AAA";
|
||||
var button = document.getElementById("HabDec_afc");
|
||||
button.style.backgroundColor = HD_button;
|
||||
button.style.color = HD_button_text;
|
||||
}
|
||||
|
||||
var dcremove_value = GLOBALS.dc_remove;
|
||||
var dcremove_value = HD_GLOBALS.dc_remove;
|
||||
if(dcremove_value)
|
||||
{
|
||||
var button = document.getElementById("HD_dc_remove");
|
||||
button.style.backgroundColor = "#bb0";
|
||||
button.style.color = "#000";
|
||||
var button = document.getElementById("HabDec_dc_remove");
|
||||
button.style.backgroundColor = HD_enabled;
|
||||
button.style.color = HD_bg;
|
||||
}
|
||||
else
|
||||
{
|
||||
var button = document.getElementById("HD_dc_remove");
|
||||
button.style.backgroundColor = "hsl(210, 15%, 34%)";
|
||||
button.style.color = "#AAA";
|
||||
var button = document.getElementById("HabDec_dc_remove");
|
||||
button.style.backgroundColor = HD_button;
|
||||
button.style.color = HD_button_text;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -172,7 +181,7 @@ function toggleFullscreen(elem)
|
|||
{
|
||||
elem = elem || document.documentElement;
|
||||
if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
||||
!document.webkitFullscreenElement && !document.msFullscreenElement)
|
||||
!document.webkitFullscreenElement && !document.msFullscreenElement)
|
||||
{
|
||||
if (elem.requestFullscreen) {
|
||||
elem.requestFullscreen();
|
||||
|
|
@ -210,11 +219,17 @@ function LoadFlightsData()
|
|||
var _url = 'http://habitat.habhub.org/habitat/_design/flight/_view/end_start_including_payloads?startkey=[' + now + ']&include_docs=True'
|
||||
console.debug(_url);
|
||||
|
||||
$.ajax({
|
||||
url: _url,
|
||||
dataType: "json",
|
||||
success: function(result) { LoadFlightsData_CB(result) }
|
||||
});
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', _url);
|
||||
xhr.onload = function () {
|
||||
if (xhr.status != 200) {
|
||||
console.debug("LoadFlightsData failed. Status: ", xhr.status);
|
||||
} else {
|
||||
LoadFlightsData_CB( JSON.parse(xhr.responseText) )
|
||||
}
|
||||
};
|
||||
xhr.onerror = function () { alert("LoadFlightsData: Request to HTTP server failed."); };
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -270,27 +285,33 @@ function LoadFlightsData_CB(i_data)
|
|||
}
|
||||
}
|
||||
|
||||
CreatePayloadsButton(FLIGHTS)
|
||||
UpdatePayloadsButton( FLIGHTS );
|
||||
}
|
||||
|
||||
function CreatePayloadsButton(i_Flights)
|
||||
function CreatePayloadsButton()
|
||||
{
|
||||
console.debug(i_Flights);
|
||||
|
||||
var PayloadsWrapperDiv = document.getElementById("PayloadsWrapperDiv");
|
||||
PayloadsWrapperDiv.classList.add("PayloadsDropdownWrapper")
|
||||
PayloadsWrapperDiv.classList.add("MenuDropdownWrapper");
|
||||
|
||||
var PayloadsButton = document.createElement("button");
|
||||
PayloadsButton.classList.add("PayloadsDropButton");
|
||||
PayloadsButton.classList.add("MenuDropButton");
|
||||
PayloadsButton.id = "HabDec_PayloadsButton";
|
||||
PayloadsButton.onclick = function() { document.getElementById("PayloadsDropMenuDiv").classList.toggle("show") };
|
||||
PayloadsButton.innerHTML = "HabHub Flights";
|
||||
PayloadsWrapperDiv.appendChild(PayloadsButton);
|
||||
|
||||
var DropMenuDiv = document.createElement("div");
|
||||
DropMenuDiv.id = "PayloadsDropMenuDiv";
|
||||
DropMenuDiv.classList.add("PayloadsDropMenu");
|
||||
DropMenuDiv.classList.add("MenuDropMenu");
|
||||
PayloadsWrapperDiv.appendChild(DropMenuDiv);
|
||||
|
||||
LoadFlightsData();
|
||||
}
|
||||
|
||||
function UpdatePayloadsButton(i_Flights)
|
||||
{
|
||||
var DropMenuDiv = document.getElementById("PayloadsDropMenuDiv");
|
||||
|
||||
for(f_id in i_Flights)
|
||||
{
|
||||
for(p_id in i_Flights[f_id]["payloads"])
|
||||
|
|
@ -299,20 +320,405 @@ function CreatePayloadsButton(i_Flights)
|
|||
{
|
||||
var payload = i_Flights[f_id]["payloads"][p_id];
|
||||
var label = payload["name"] + ": " + payload["baud"] + "Bd " + payload["encoding"] + "/" + payload["stop"] + " " + (parseInt(payload["frequency"])/1000000) + "MHz";
|
||||
console.debug(label, p_id);
|
||||
|
||||
var pl_button = document.createElement("button");
|
||||
pl_button.innerHTML = label;
|
||||
pl_button.onclick = function(){ SetPayload(p_id) };
|
||||
pl_button.onclick = function(){
|
||||
SetPayload(p_id);
|
||||
document.getElementById('HabDec_PayloadsButton').click();
|
||||
};
|
||||
|
||||
DropMenuDiv.appendChild(pl_button);
|
||||
}
|
||||
)(p_id)
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
///////////// Color Schemes ////////////
|
||||
////////////////////////////////////////
|
||||
|
||||
function CreateColorSchemesButton()
|
||||
{
|
||||
var ColorSchemesWrapperDiv = document.getElementById("ColorSchemesWrapperDiv");
|
||||
ColorSchemesWrapperDiv.classList.add("MenuDropdownWrapper")
|
||||
|
||||
var ColorSchemesButton = document.createElement("button");
|
||||
ColorSchemesButton.classList.add("MenuDropButton");
|
||||
ColorSchemesButton.id = "HabDec_ColorSchemesButton";
|
||||
ColorSchemesButton.onclick = function() { document.getElementById("ColorSchemesDropMenuDiv").classList.toggle("show") };
|
||||
ColorSchemesButton.innerHTML = "Colors";
|
||||
ColorSchemesWrapperDiv.appendChild(ColorSchemesButton);
|
||||
|
||||
var DropMenuDiv = document.createElement("div");
|
||||
DropMenuDiv.id = "ColorSchemesDropMenuDiv";
|
||||
DropMenuDiv.classList.add("MenuDropMenu");
|
||||
ColorSchemesWrapperDiv.appendChild(DropMenuDiv);
|
||||
UpdateColorSchemesButton(HD_COLOR_SCHEMES);
|
||||
}
|
||||
|
||||
function UpdateColorSchemesButton(i_color_schemes)
|
||||
{
|
||||
var DropMenuDiv = document.getElementById("ColorSchemesDropMenuDiv");
|
||||
|
||||
for(color in i_color_schemes)
|
||||
(
|
||||
function(i_color)
|
||||
{
|
||||
var pl_button = document.createElement("button");
|
||||
pl_button.innerHTML = i_color;
|
||||
pl_button.onclick = function(){
|
||||
HD_ApplyColorScheme(i_color_schemes[i_color]);
|
||||
document.getElementById("HabDec_ColorSchemesButton").click();
|
||||
};
|
||||
|
||||
DropMenuDiv.appendChild(pl_button);
|
||||
}
|
||||
)(color)
|
||||
}
|
||||
|
||||
|
||||
// ============================================================================
|
||||
// ============================================================================
|
||||
// ============================================================================
|
||||
|
||||
|
||||
function HABDEC_BUILD_UI_PowerSpectrum(HABDEC_POWER_SPECTRUM_DIV)
|
||||
{
|
||||
// <!-- Power Spectrum -->
|
||||
|
||||
// <div style="display: grid; grid-template-columns: auto 80px; width: 100%; height: 150px;" >
|
||||
var div_top = document.createElement("div");
|
||||
div_top.style.display = "grid";
|
||||
div_top.style.gridTemplateColumns = "auto 80px";
|
||||
div_top.style.width = "100%";
|
||||
div_top.style.height = "150px";
|
||||
|
||||
// <div id="cnt_powerSpectrumCanvas" style="display: flex;">
|
||||
var div_cnt_powerSpectrumCanvas = document.createElement("div");
|
||||
div_cnt_powerSpectrumCanvas.id = "cnt_powerSpectrumCanvas";
|
||||
div_cnt_powerSpectrumCanvas.style.display = "flex";
|
||||
|
||||
// spectrum canvas
|
||||
var spectrum_canvas = document.createElement("canvas");
|
||||
spectrum_canvas.id = "HabDec_powerSpectrumCanvas";
|
||||
div_cnt_powerSpectrumCanvas.appendChild(spectrum_canvas);
|
||||
|
||||
// +/- buttons
|
||||
// <button type="button" style="height: 50%; width: 100%; overflow: auto; font-size: 30px;" onclick="(function(){G_SPECTRUM_ZOOM += .1})()" > + </button><br>
|
||||
|
||||
var b_plus = document.createElement("button");
|
||||
b_plus.innerHTML = "+";
|
||||
b_plus.style.height = "50%";
|
||||
b_plus.style.width = "100%";
|
||||
b_plus.style.overflow = "auto";
|
||||
b_plus.style.fontSize = "30px";
|
||||
b_plus.onclick = function(){ G_SPECTRUM_ZOOM += .1 };
|
||||
|
||||
var b_minus = document.createElement("button");
|
||||
b_minus.innerHTML = "-";
|
||||
b_minus.style.height = "50%";
|
||||
b_minus.style.width = "100%";
|
||||
b_minus.style.overflow = "auto";
|
||||
b_minus.style.fontSize = "30px";
|
||||
b_minus.onclick = function(){ G_SPECTRUM_ZOOM -= .1 };
|
||||
|
||||
var buttons_div = document.createElement("div");
|
||||
|
||||
div_cnt_powerSpectrumCanvas.appendChild(spectrum_canvas);
|
||||
buttons_div.appendChild(b_plus);
|
||||
buttons_div.appendChild(b_minus);
|
||||
div_top.appendChild(div_cnt_powerSpectrumCanvas);
|
||||
div_top.appendChild(buttons_div);
|
||||
|
||||
return div_top;
|
||||
}
|
||||
|
||||
|
||||
function HABDEC_BUILD_UI_DemodAndInfo()
|
||||
{
|
||||
var div_top = document.createElement("div");
|
||||
|
||||
// <div id="cnt_demodCanvas" style="display: flex; height: 128px;">
|
||||
var div_cnt_demodCanvas = document.createElement("div");
|
||||
div_cnt_demodCanvas.id = "cnt_demodCanvas";
|
||||
div_cnt_demodCanvas.style.display= "flex";
|
||||
div_cnt_demodCanvas.style.height= "128px";
|
||||
|
||||
// demod canvas
|
||||
var demod_canvas = document.createElement("canvas");
|
||||
demod_canvas.id = "HabDec_demodCanvas";
|
||||
div_cnt_demodCanvas.appendChild(demod_canvas);
|
||||
|
||||
// info printout div
|
||||
var div_info = document.createElement("div");
|
||||
|
||||
// <div id="cnt_debug" style="font-size: 12px;"></div>
|
||||
var div_debug = document.createElement("div");
|
||||
div_debug.id = "cnt_debug";
|
||||
|
||||
// <div id="cnt_liveprint" class="habsentence_text" style="color: cadetblue; word-wrap: break-word;"></div>
|
||||
var div_cnt_liveprint = document.createElement("div");
|
||||
div_cnt_liveprint.id = "cnt_liveprint";
|
||||
div_cnt_liveprint.classList.add("habsentence_text");
|
||||
// div_cnt_liveprint.style.color = "cadetblue";
|
||||
div_cnt_liveprint.style.wordWrap = "break-word";
|
||||
|
||||
//<div id="cnt_stats" class="habsentence_text" style="color: rgb(250, 0, 0)"></div>
|
||||
var div_cnt_stats = document.createElement("div");
|
||||
div_cnt_stats.id = "cnt_stats";
|
||||
// div_cnt_stats.classList.add("habsentence_text");
|
||||
div_cnt_stats.style.color = "rgb(250, 0, 0)";
|
||||
|
||||
// <div id="cnt_habsentence_list" class="habsentence_text"></div>
|
||||
var divcnt_habsentence_list = document.createElement("div");
|
||||
divcnt_habsentence_list.id = "cnt_habsentence_list";
|
||||
divcnt_habsentence_list.classList.add("habsentence_text");
|
||||
|
||||
|
||||
div_info.appendChild(div_debug);
|
||||
div_info.appendChild( document.createElement("br") );
|
||||
div_info.appendChild(div_cnt_liveprint);
|
||||
div_info.appendChild(div_cnt_stats);
|
||||
div_info.appendChild(divcnt_habsentence_list);
|
||||
|
||||
div_top.appendChild(div_cnt_demodCanvas);
|
||||
div_top.appendChild(div_info);
|
||||
|
||||
return div_top;
|
||||
|
||||
}
|
||||
|
||||
function PayloadButtonClickCB()
|
||||
|
||||
function HABDEC_BUILD_UI_Controls()
|
||||
{
|
||||
document.getElementById("PayloadsDropMenuDiv").classList.toggle("show");
|
||||
}
|
||||
var buttons = [
|
||||
"cnt_spectrum_zoom",
|
||||
"cnt_frequency",
|
||||
"cnt_decimation",
|
||||
"cnt_gain",
|
||||
"cnt_lowpass_bw",
|
||||
"cnt_lowpass_trans",
|
||||
"cnt_baud",
|
||||
"cnt_rtty_bits",
|
||||
"cnt_rtty_stops",
|
||||
"cnt_datasize" ];
|
||||
|
||||
var div_top = document.createElement("div");
|
||||
|
||||
for(i in buttons)
|
||||
{
|
||||
// <div id="cnt_spectrum_zoom" class="ctrl_container"> </div>
|
||||
var div_buton = document.createElement("div");
|
||||
div_buton.classList.add( "ctrl_container" );
|
||||
div_buton.id = buttons[i];
|
||||
div_top.appendChild(div_buton);
|
||||
}
|
||||
|
||||
return div_top;
|
||||
}
|
||||
|
||||
|
||||
function HABDEC_BUILD_UI_DemodAndControls()
|
||||
{
|
||||
var div_demodAndInfo = HABDEC_BUILD_UI_DemodAndInfo();
|
||||
var div_controls = HABDEC_BUILD_UI_Controls();
|
||||
|
||||
// <div style="display: grid; grid-template-columns: minmax(0, 1fr) 540px;">
|
||||
var div_top = document.createElement("div");
|
||||
div_top.style.display = "grid";
|
||||
div_top.style.gridTemplateColumns = "minmax(0, 1fr) 540px";
|
||||
div_top.appendChild(div_demodAndInfo);
|
||||
div_top.appendChild(div_controls);
|
||||
|
||||
return div_top;
|
||||
|
||||
}
|
||||
|
||||
|
||||
function HABDEC_BUILD_UI_ExtraRadioButtons()
|
||||
{
|
||||
var div_top = document.createElement("div");
|
||||
|
||||
// <button id="HabDecD_biastee" onclick="SetBiasT()" > BiasTee </button>
|
||||
var b_biasTee = document.createElement("button");
|
||||
b_biasTee.id = "HabDecD_biastee";
|
||||
b_biasTee.innerHTML = "BiasTee";
|
||||
b_biasTee.onclick = SetBiasT;
|
||||
|
||||
// <button id="HabDec_afc" onclick="SetAFC()" > AFC </button>
|
||||
var b_afc = document.createElement("button");
|
||||
b_afc.id = "HabDec_afc";
|
||||
b_afc.innerHTML = "AFC";
|
||||
b_afc.onclick = SetAFC;
|
||||
|
||||
// <button id="HabDec_dc_remove" onclick="SetDCRemove()" > DC Remove </button>
|
||||
var b_dc_remove = document.createElement("button");
|
||||
b_dc_remove.id = "HabDec_dc_remove";
|
||||
b_dc_remove.innerHTML = "DC Remove";
|
||||
b_dc_remove.onclick = SetDCRemove;
|
||||
|
||||
var div_three_buttons = document.createElement("div");
|
||||
// div_three_buttons.display.style = "inline-block";
|
||||
div_three_buttons.appendChild(b_biasTee);
|
||||
div_three_buttons.appendChild(b_afc);
|
||||
div_three_buttons.appendChild(b_dc_remove);
|
||||
|
||||
// <p> <button id="btnFullscreen" type="button" onclick="toggleFullscreen()">Fullscreen</button> </p>
|
||||
var btnFullscreen = document.createElement("button");
|
||||
btnFullscreen.innerHTML = "Fullscreen";
|
||||
btnFullscreen.onclick = () => { toggleFullscreen() };
|
||||
var paragraph = document.createElement("p");
|
||||
paragraph.appendChild(btnFullscreen);
|
||||
|
||||
div_top.appendChild(div_three_buttons);
|
||||
div_top.appendChild(paragraph);
|
||||
|
||||
return div_top;
|
||||
}
|
||||
|
||||
|
||||
function HABDEC_BUILD_UI_Server()
|
||||
{
|
||||
var div_top = document.createElement("div");
|
||||
|
||||
// <div><label>Server Address</label></div>
|
||||
var server_label = document.createElement("label");
|
||||
server_label.innerHTML = "Server Address";
|
||||
var div_label = document.createElement("div").appendChild(server_label);
|
||||
|
||||
// <input id="HabDec_server_address" value="localhost:5555" onchange="localStorage.setItem('habdec_server_address', document.getElementById("HabDec_server_address").value);">
|
||||
var input_srv = document.createElement("input");
|
||||
input_srv.id = "HabDec_server_address";
|
||||
input_srv.value = "localhost:5555";
|
||||
input_srv.onchange = () => {
|
||||
localStorage.setItem('habdec_server_address', document.getElementById("HabDec_server_address").value);
|
||||
};
|
||||
|
||||
// <button onclick="OpenConnection()" >Connect</button>
|
||||
var b = document.createElement("button");
|
||||
b.innerHTML = "Connect";
|
||||
b.onclick = OpenConnection;
|
||||
|
||||
|
||||
div_top.appendChild(div_label);
|
||||
div_top.appendChild(input_srv);
|
||||
div_top.appendChild(b);
|
||||
|
||||
return div_top;
|
||||
}
|
||||
|
||||
function HB_WinMsgHandler(i_msg)
|
||||
{
|
||||
// console.debug('HB_WinMsgHandler', i_msg);
|
||||
|
||||
var i_data = i_msg.data;
|
||||
|
||||
// color scheme - with config provided
|
||||
//
|
||||
var set_rex = String.raw`cmd\:\:setColorScheme\:name=(.+)\:config=(.+)`;
|
||||
var set_re = new RegExp(set_rex);
|
||||
var set_match = set_re.exec(i_data);
|
||||
if(set_match != null)
|
||||
{
|
||||
var color_scheme = set_match[1];
|
||||
var color_config = JSON.parse( set_match[2] );
|
||||
HD_COLOR_SCHEMES[color_scheme] = color_config;
|
||||
HD_ApplyColorScheme( HD_COLOR_SCHEMES[color_scheme] );
|
||||
console.debug("HABDEC Config ColorScheme ", color_scheme);
|
||||
// console.debug(HD_COLOR_SCHEMES);
|
||||
}
|
||||
else
|
||||
{
|
||||
// color scheme - predefined
|
||||
//
|
||||
set_rex = String.raw`cmd\:\:setColorScheme\:name=(.+)`;
|
||||
set_re = new RegExp(set_rex);
|
||||
set_match = set_re.exec(i_data);
|
||||
if(set_match != null)
|
||||
{
|
||||
var color_scheme = set_match[1];
|
||||
if( color_scheme in HD_COLOR_SCHEMES)
|
||||
{
|
||||
console.debug("HABDEC Predefined ColorScheme ", color_scheme);
|
||||
HD_ApplyColorScheme( HD_COLOR_SCHEMES[color_scheme] );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// server address
|
||||
//
|
||||
set_rex = String.raw`cmd\:\:setServer\:addr=(.+)`;
|
||||
set_re = new RegExp(set_rex);
|
||||
set_match = set_re.exec(i_data);
|
||||
if(set_match != null)
|
||||
{
|
||||
console.debug('HB_WinMsgHandler ', set_match);
|
||||
var addr = set_match[1];
|
||||
document.getElementById("HabDec_server_address").value = addr;
|
||||
}
|
||||
}
|
||||
|
||||
function HABDEC_BUILD_UI(parent_div)
|
||||
{
|
||||
var div_power = HABDEC_BUILD_UI_PowerSpectrum();
|
||||
var div_demod_and_ctrls = HABDEC_BUILD_UI_DemodAndControls();
|
||||
var div_extra_radio_buttons = HABDEC_BUILD_UI_ExtraRadioButtons();
|
||||
var div_server = HABDEC_BUILD_UI_Server();
|
||||
//<!-- <div id="PayloadsWrapperDiv"></div> -->
|
||||
|
||||
|
||||
// flights list
|
||||
var div_payloads_wrapper = document.createElement("div");
|
||||
div_payloads_wrapper.id = "PayloadsWrapperDiv";
|
||||
|
||||
// color schemes list
|
||||
var div_colors_wrapper = document.createElement("div");
|
||||
div_colors_wrapper.id = "ColorSchemesWrapperDiv";
|
||||
|
||||
// div for flights and colors - in row
|
||||
var extra_options = document.createElement("div");
|
||||
extra_options.style.display = 'flex';
|
||||
extra_options.appendChild(div_payloads_wrapper);
|
||||
extra_options.appendChild(div_colors_wrapper);
|
||||
|
||||
// parent_div.display.height = "1000px";
|
||||
parent_div.appendChild(div_power);
|
||||
parent_div.appendChild(div_demod_and_ctrls);
|
||||
parent_div.appendChild(div_extra_radio_buttons);
|
||||
parent_div.appendChild(div_server);
|
||||
// parent_div.appendChild(div_payloads_wrapper);
|
||||
// parent_div.appendChild(div_colors_wrapper);
|
||||
parent_div.appendChild(extra_options);
|
||||
|
||||
CreateControls();
|
||||
CreatePayloadsButton();
|
||||
CreateColorSchemesButton();
|
||||
|
||||
window.addEventListener('message', HB_WinMsgHandler);
|
||||
|
||||
|
||||
// HD_ApplyeColorScheme( HD_COLOR_SCHEMES["DEFAULT"] );
|
||||
}
|
||||
|
||||
|
||||
function habdec_init(habdec_div, habdec_srv_url)
|
||||
{
|
||||
HABDEC_BUILD_UI( document.getElementById(habdec_div) );
|
||||
|
||||
if(habdec_srv_url)
|
||||
document.getElementById("HabDec_server_address").value = habdec_srv_url;
|
||||
|
||||
document.getElementById("HabDec_server_address").value = localStorage.getItem('habdec_server_address');
|
||||
if(document.getElementById("HabDec_server_address").value == "")
|
||||
document.getElementById("HabDec_server_address").value = "localhost:5555"
|
||||
ResizeCanvas("HabDec_powerSpectrumCanvas");
|
||||
ResizeCanvas("HabDec_demodCanvas");
|
||||
|
||||
HD_ApplyColorScheme(HD_COLOR_SCHEMES["DEFAULT"]);
|
||||
|
||||
AnimatePowerSpectrum(0);
|
||||
AnimateDemod(0);
|
||||
|
||||
setTimeout( OpenConnection, 500);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
|
||||
var G_HD_WEBSOCKET;
|
||||
var G_HD_CONNECTED = 0;
|
||||
var LastHabSentences = [];
|
||||
var G_HD_LastHabSentences = [];
|
||||
var G_SPECTRUM_DATA;
|
||||
var G_SPECTRUM_ZOOM = 0;
|
||||
var G_DEMOD_DATA;
|
||||
var G_POWER_FPS = 40;
|
||||
var G_DEMOD_FPS = 1;
|
||||
|
||||
var GLOBALS =
|
||||
var HD_GLOBALS =
|
||||
{
|
||||
frequency: 0,
|
||||
sampling_rate: 0,
|
||||
|
|
@ -38,11 +40,15 @@ function debug_print()
|
|||
function OpenConnection()
|
||||
{
|
||||
if(G_HD_CONNECTED)
|
||||
return;
|
||||
G_HD_WEBSOCKET.close();
|
||||
|
||||
var server = document.getElementById("server_address").value;
|
||||
var server = document.getElementById("HabDec_server_address").value;
|
||||
if( server.toLowerCase().startsWith('ws://') )
|
||||
server = server.substr(5, server.length);
|
||||
server = 'ws://' + server;
|
||||
console.debug("Connecting to ", server, " ...");
|
||||
G_HD_WEBSOCKET = new WebSocket("ws://" + server);
|
||||
|
||||
G_HD_WEBSOCKET = new WebSocket(server);
|
||||
G_HD_WEBSOCKET.binaryType = 'arraybuffer'; // or 'blob'
|
||||
|
||||
G_HD_WEBSOCKET.onopen = function(evt) { ws_onOpen(evt) };
|
||||
|
|
@ -72,7 +78,7 @@ function ws_onOpen(evt)
|
|||
debug_print("ws_onOpen: ", "Connected.");
|
||||
|
||||
G_HD_WEBSOCKET.send("hi");
|
||||
for(var param in GLOBALS)
|
||||
for(var param in HD_GLOBALS)
|
||||
SendCommand("get:" + param);
|
||||
|
||||
console.debug("ws_onOpen: init refresh.");
|
||||
|
|
@ -153,48 +159,48 @@ function HandleMessage(i_data)
|
|||
if(set_match != null && set_match.length == 3)
|
||||
{
|
||||
if(set_match[1] == "frequency")
|
||||
GLOBALS.frequency = parseFloat(set_match[2]);
|
||||
HD_GLOBALS.frequency = parseFloat(set_match[2]);
|
||||
if(set_match[1] == "decimation")
|
||||
GLOBALS.decimation = parseInt(set_match[2]);
|
||||
HD_GLOBALS.decimation = parseInt(set_match[2]);
|
||||
else if(set_match[1] == "gain")
|
||||
GLOBALS.gain = parseFloat(set_match[2]);
|
||||
HD_GLOBALS.gain = parseFloat(set_match[2]);
|
||||
else if(set_match[1] == "baud")
|
||||
GLOBALS.baud = parseInt(set_match[2]);
|
||||
HD_GLOBALS.baud = parseInt(set_match[2]);
|
||||
else if(set_match[1] == "lowpass_bw")
|
||||
GLOBALS.lowpass_bw = parseFloat(set_match[2]);
|
||||
HD_GLOBALS.lowpass_bw = parseFloat(set_match[2]);
|
||||
else if(set_match[1] == "lowpass_trans")
|
||||
GLOBALS.lowpass_trans = parseFloat(set_match[2]);
|
||||
HD_GLOBALS.lowpass_trans = parseFloat(set_match[2]);
|
||||
else if(set_match[1] == "rtty_bits")
|
||||
GLOBALS.rtty_bits = parseFloat(set_match[2]);
|
||||
HD_GLOBALS.rtty_bits = parseFloat(set_match[2]);
|
||||
else if(set_match[1] == "rtty_stops")
|
||||
GLOBALS.rtty_stops = parseFloat(set_match[2]);
|
||||
HD_GLOBALS.rtty_stops = parseFloat(set_match[2]);
|
||||
else if(set_match[1] == "lowPass")
|
||||
{
|
||||
GLOBALS.lowpass_bw = parseFloat(set_match[2].split(',')[0]);
|
||||
GLOBALS.lowpass_trans = parseFloat(set_match[2].split(',')[1]);
|
||||
HD_GLOBALS.lowpass_bw = parseFloat(set_match[2].split(',')[0]);
|
||||
HD_GLOBALS.lowpass_trans = parseFloat(set_match[2].split(',')[1]);
|
||||
}
|
||||
else if(set_match[1] == "biastee")
|
||||
{
|
||||
GLOBALS.biastee = parseFloat(set_match[2]);
|
||||
HD_GLOBALS.biastee = parseFloat(set_match[2]);
|
||||
debug_print("Received Message: ", i_data);
|
||||
}
|
||||
else if(set_match[1] == "afc")
|
||||
{
|
||||
GLOBALS.afc = parseFloat(set_match[2]);
|
||||
HD_GLOBALS.afc = parseFloat(set_match[2]);
|
||||
debug_print("Received Message: ", i_data);
|
||||
}
|
||||
else if(set_match[1] == "dc_remove")
|
||||
{
|
||||
GLOBALS.dc_remove = parseFloat(set_match[2]);
|
||||
HD_GLOBALS.dc_remove = parseFloat(set_match[2]);
|
||||
debug_print("Received Message: ", i_data);
|
||||
}
|
||||
else if(set_match[1] == "datasize")
|
||||
{
|
||||
GLOBALS.datasize = parseFloat(set_match[2]);
|
||||
HD_GLOBALS.datasize = parseFloat(set_match[2]);
|
||||
debug_print("Received Message: ", i_data);
|
||||
}
|
||||
|
||||
SetGuiToGlobals(GLOBALS);
|
||||
SetGuiToGlobals(HD_GLOBALS);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
|
@ -215,14 +221,14 @@ function HandleMessage(i_data)
|
|||
var cnt_habsentence_list = document.getElementById("cnt_habsentence_list")
|
||||
cnt_habsentence_list.innerHTML = '<text style=\"color: rgb(0,200,0);\">' + sntnc + '</text>';;
|
||||
|
||||
while(LastHabSentences.length > 12)
|
||||
LastHabSentences.pop();
|
||||
LastHabSentences.forEach( function(i_snt){
|
||||
while(G_HD_LastHabSentences.length > 12)
|
||||
G_HD_LastHabSentences.pop();
|
||||
G_HD_LastHabSentences.forEach( function(i_snt){
|
||||
cnt_habsentence_list.innerHTML += '<br><text>' + i_snt + '</text>';
|
||||
}
|
||||
);
|
||||
|
||||
LastHabSentences.unshift( info_match[2] );
|
||||
G_HD_LastHabSentences.unshift( info_match[2] );
|
||||
|
||||
SendCommand("stats");
|
||||
}
|
||||
|
|
@ -279,11 +285,11 @@ function DisplayStats(i_str)
|
|||
}
|
||||
|
||||
document.getElementById("cnt_stats").innerHTML =
|
||||
"OK: " + stats.ok
|
||||
+ " Dist-Line: " + (stats.dist_line / 1000).toFixed(1) + "km "
|
||||
+ " Dist-Circle: " + (stats.dist_circ / 1000).toFixed(1) + "km "
|
||||
+ " MaxDistL: " + (stats.max_dist / 1000).toFixed(1) + "km "
|
||||
+ " MinElev: " + (stats.min_elev).toFixed(1);
|
||||
"Ok: " + stats.ok
|
||||
+ " | Dist-Line: " + (stats.dist_line / 1000).toFixed(1) + "km "
|
||||
+ "(" + (stats.max_dist / 1000).toFixed(1) + "km)"
|
||||
+ " | Dist-Circle: " + (stats.dist_circ / 1000).toFixed(1) + "km "
|
||||
+ " | MinElev: " + (stats.min_elev).toFixed(1);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -308,7 +314,15 @@ function RefreshPowerSpectrum()
|
|||
|
||||
G_SPECTRUM_ZOOM = Math.max(0, Math.min(1, G_SPECTRUM_ZOOM));
|
||||
var zoom = Math.max(0, Math.min(1, G_SPECTRUM_ZOOM));
|
||||
var canvas = document.getElementById("powerSpectrumCanvas");
|
||||
var canvas = document.getElementById("HabDec_powerSpectrumCanvas");
|
||||
|
||||
// resize if canvas iz zero-size
|
||||
if( !(canvas.offsetParent === null) /*not visible*/
|
||||
&& (!canvas.width || !canvas.height) ) /*zero size*/
|
||||
{
|
||||
canvas.width = canvas.parentElement.clientWidth;
|
||||
canvas.height = canvas.parentElement.clientHeight;
|
||||
}
|
||||
|
||||
SendCommand("power:res=" + canvas.width + ",zoom=" + zoom);
|
||||
RefreshPowerSpectrum_lastReq = d.getTime();
|
||||
|
|
@ -335,7 +349,7 @@ function RefreshDemod()
|
|||
return;
|
||||
}
|
||||
|
||||
var canvas = document.getElementById("demodCanvas");
|
||||
var canvas = document.getElementById("HabDec_demodCanvas");
|
||||
|
||||
SendCommand("demod:res=" + canvas.width);
|
||||
RefreshDemod_lastReq = d.getTime();
|
||||
|
|
@ -357,18 +371,18 @@ function RefreshLivePrint()
|
|||
|
||||
function SetBiasT()
|
||||
{
|
||||
var value = GLOBALS.biastee;
|
||||
var value = HD_GLOBALS.biastee;
|
||||
if(value)
|
||||
{
|
||||
SendCommand("set:biastee=0");
|
||||
var button = document.getElementById("HD_biastee");
|
||||
var button = document.getElementById("HabDecD_biastee");
|
||||
button.style.backgroundColor = "hsl(210, 15%, 34%)";
|
||||
button.style.color = "#AAA";
|
||||
}
|
||||
else
|
||||
{
|
||||
SendCommand("set:biastee=1");
|
||||
var button = document.getElementById("HD_biastee");
|
||||
var button = document.getElementById("HabDecD_biastee");
|
||||
button.style.backgroundColor = "#bb0";
|
||||
button.style.color = "#000";
|
||||
}
|
||||
|
|
@ -377,37 +391,37 @@ function SetBiasT()
|
|||
|
||||
function SetAFC()
|
||||
{
|
||||
var value = GLOBALS.afc
|
||||
var value = HD_GLOBALS.afc
|
||||
if(value)
|
||||
{
|
||||
SendCommand("set:afc=0");
|
||||
var button = document.getElementById("HD_afc");
|
||||
var button = document.getElementById("HabDec_afc");
|
||||
button.style.backgroundColor = "hsl(210, 15%, 34%)";
|
||||
button.style.color = "#AAA";
|
||||
}
|
||||
else
|
||||
{
|
||||
SendCommand("set:afc=1");
|
||||
var button = document.getElementById("HD_afc");
|
||||
var button = document.getElementById("HabDec_afc");
|
||||
button.style.backgroundColor = "#bb0";
|
||||
button.style.color = "#000";
|
||||
}s
|
||||
}
|
||||
}
|
||||
|
||||
function SetDCRemove()
|
||||
{
|
||||
var value = GLOBALS.dc_remove;
|
||||
var value = HD_GLOBALS.dc_remove;
|
||||
if(value)
|
||||
{
|
||||
SendCommand("set:dc_remove=0");
|
||||
var button = document.getElementById("HD_dc_remove");
|
||||
var button = document.getElementById("HabDec_dc_remove");
|
||||
button.style.backgroundColor = "hsl(210, 15%, 34%)";
|
||||
button.style.color = "#AAA";
|
||||
}
|
||||
else
|
||||
{
|
||||
SendCommand("set:dc_remove=1");
|
||||
var button = document.getElementById("HD_dc_remove");
|
||||
var button = document.getElementById("HabDec_dc_remove");
|
||||
button.style.backgroundColor = "#bb0";
|
||||
button.style.color = "#000";
|
||||
}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue