-
+ 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"); + + // + var server_label = document.createElement("label"); + server_label.innerHTML = "Server Address"; + var div_label = document.createElement("div").appendChild(server_label); + + // + 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); + }; + + // + 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(); + // + + + // 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); +} diff --git a/code/webClient/js/habdec_commands.js b/code/webClient/js/habdec_commands.js index bda08b6..f2adee0 100644 --- a/code/webClient/js/habdec_commands.js +++ b/code/webClient/js/habdec_commands.js @@ -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 = '