joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added more sliders and buttons, waterfall colors are now adjustable from the GUI.

Browse Source
This commit is contained in:
ha7ilm 2016-03-20 11:32:37 +01:00
parent 3c1d3b5b42
commit 06bd8b92aa
3 changed files with 266 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
htdocs/index.wrx
View File

@ -31,8 +31,8 @@
var starting_mod = "%[START_MOD]"; var starting_mod = "%[START_MOD]";
var starting_offset_frequency = %[START_OFFSET_FREQ]; var starting_offset_frequency = %[START_OFFSET_FREQ];
var waterfall_colors=%[WATERFALL_COLORS]; var waterfall_colors=%[WATERFALL_COLORS];
var waterfall_min_level=%[WATERFALL_MIN_LEVEL]; var waterfall_min_level_default=%[WATERFALL_MIN_LEVEL];
var waterfall_max_level=%[WATERFALL_MAX_LEVEL]; var waterfall_max_level_default=%[WATERFALL_MAX_LEVEL];
</script> </script>
<script src="sdr.js"></script> <script src="sdr.js"></script>
<script src="openwebrx.js"></script> <script src="openwebrx.js"></script>
@ -72,27 +72,43 @@
<div id="openwebrx-scale-container"> <div id="openwebrx-scale-container">
<canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas> <canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas>
</div> </div>
<div id="webrx-canvas-container"> <div id="webrx-canvas-container">
<div id="openwebrx-phantom-canvas"></div> <div id="openwebrx-phantom-canvas"></div>
<!-- add canvas here by javascript --> <!-- add canvas here by javascript -->
</div> </div>
<div id="openwebrx-panels-container"> <div id="openwebrx-panels-container">
<div class="openwebrx-panel" id="openwebrx-panel-receiver" data-panel-name="client-params" data-panel-pos="right" data-panel-order="0" data-panel-size="215,115"> <div class="openwebrx-panel" id="openwebrx-panel-receiver" data-panel-name="client-params" data-panel-pos="right" data-panel-order="0" data-panel-size="259,115">
<div id="webrx-actual-freq">---.--- MHz</div> <div id="webrx-actual-freq">---.--- MHz</div>
<div id="webrx-mouse-freq">---.--- MHz</div> <div id="webrx-mouse-freq">---.--- MHz</div>
<!--<div class="openwebrx-button" onclick="ws.send('SET mod=wfm');" >WFM</div>--> <!--<div class="openwebrx-button" onclick="ws.send('SET mod=wfm');" >WFM</div>-->
<div class="openwebrx-panel-line">
<div class="openwebrx-button" onclick="demodulator_analog_replace('nfm');">FM</div>
<div class="openwebrx-button" onclick="demodulator_analog_replace('am');">AM</div>
<div class="openwebrx-button" onclick="demodulator_analog_replace('lsb');">LSB</div>
<div class="openwebrx-button" onclick="demodulator_analog_replace('usb');">USB</div>
<div class="openwebrx-button" onclick="demodulator_analog_replace('cw');">CW</div>
</div>
<div class="openwebrx-panel-line">
<div id="openwebrx-mute-off" class="openwebrx-button" onclick="toggleMute()"><img src="gfx/openwebrx-speaker.png" id="openwebrx-mute-img"></div>
<input id="openwebrx-panel-volume" type="range" min="0" max="150" value="50" step="1" onchange="updateVolume()" oninput="updateVolume()">
</div>
<div class="openwebrx-panel-line">
<div class="openwebrx-button openwebrx-demodulator-button" onclick="demodulator_analog_replace('nfm');">FM</div>
<div class="openwebrx-button openwebrx-demodulator-button" onclick="demodulator_analog_replace('am');">AM</div>
<div class="openwebrx-button openwebrx-demodulator-button" onclick="demodulator_analog_replace('lsb');">LSB</div>
<div class="openwebrx-button openwebrx-demodulator-button" onclick="demodulator_analog_replace('usb');">USB</div>
<div class="openwebrx-button openwebrx-demodulator-button" onclick="demodulator_analog_replace('cw');">CW</div>
</div>
<div class="openwebrx-panel-line">
<div title="Mute on/off" id="openwebrx-mute-off" class="openwebrx-button" onclick="toggleMute();"><img src="gfx/openwebrx-speaker.png" class="openwebrx-sliderbtn-img"></div>
<input title="Volume" id="openwebrx-panel-volume" class="openwebrx-panel-slider" type="range" min="0" max="150" value="50" step="1" onchange="updateVolume()" oninput="updateVolume()">
<div title="Auto-adjust waterfall colors" id="openwebrx-waterfall-colors-auto" class="openwebrx-button" onclick="waterfall_measure_minmax_now=true;"><img src="gfx/openwebrx-waterfall-auto.png" class="openwebrx-sliderbtn-img"></div>
<input title="Waterfall minimum level" id="openwebrx-waterfall-color-min" class="openwebrx-panel-slider" type="range" min="-200" max="100" value="50" step="1" onchange="updateWaterfallColors(0);" oninput="updateVolume()">
</div>
<div class="openwebrx-panel-line">
<div title="Disable squelch" id="openwebrx-squelch-default" class="openwebrx-button" onclick="setSquelchDefault()"><img src="gfx/openwebrx-squelch-button.png" class="openwebrx-sliderbtn-img"></div>
<input title="Squelch" id="openwebrx-panel-squelch" class="openwebrx-panel-slider" type="range" min="0" max="100" value="0" step="1" onchange="updateVolume()" oninput="updateVolume()">
<div title="Set waterfall colors to default" id="openwebrx-waterfall-colors-default" class="openwebrx-button" onclick="waterfallColorsDefault()"><img src="gfx/openwebrx-waterfall-default.png" class="openwebrx-sliderbtn-img"></div>
<input title="Waterfall maximum level" id="openwebrx-waterfall-color-max" class="openwebrx-panel-slider" type="range" min="-200" max="100" value="50" step="1" onchange="updateWaterfallColors(1);" oninput="updateVolume()">
</div>
<div class="openwebrx-panel-line">
<div class="openwebrx-button openwebrx-square-button" onclick="zoomInOneStep();" title="Zoom in one step"> <img src="gfx/openwebrx-zoom-in.png" /></div>
<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutOneStep();" title="Zoom out one step"> <img src="gfx/openwebrx-zoom-out.png" /></div>
<div class="openwebrx-button openwebrx-square-button" onclick="zoomInTotal();" title="Zoom in totally"><img src="gfx/openwebrx-zoom-in-total.png" /></div>
<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutTotal();" title="Zoom out totally"><img src="gfx/openwebrx-zoom-out-total.png" /></div>
</div>
</div> </div>

67
htdocs/openwebrx.css
View File

@ -37,7 +37,6 @@ input[type=range]
{ {
-webkit-appearance: none; -webkit-appearance: none;
margin: 10px 0; margin: 10px 0;
width: 100%;
} }
input[type=range]:focus input[type=range]:focus
{ {
@ -497,6 +496,7 @@ input[type=range]:focus::-ms-fill-upper
margin-bottom: 5px; margin-bottom: 5px;
} }
.openwebrx-panel .openwebrx-panel
{ {
visibility: hidden; visibility: hidden;
@ -557,6 +557,65 @@ input[type=range]:focus::-ms-fill-upper
color: #FFFF50; color: #FFFF50;
} }
.openwebrx-demodulator-button
{
width: 35px;
height: 19px;
font-size: 12pt;
text-align: center;
}
.openwebrx-square-button img
{
height: 30px;
}
.openwebrx-round-button
{
margin-right: -2px;
width: 35px;
height: 35px;
border-radius: 25px;
}
.openwebrx-round-button img
{
height: 30px;
}
.openwebrx-round-button-small
{
margin-right: -3px;
width: 20px;
height: 20px;
border-radius: 25px;
}
.openwebrx-round-button-small img
{
height: 20px;
}
img.openwebrx-mirror-img
{
transform: scale(-1, 1);
}
.openwebrx-round-rightarrow img
{
position: relative;
left: 12px;
top: 3px;
}
.openwebrx-round-leftarrow img
{
position: relative;
left: 7px;
top: 3px;
}
#openwebrx-client-log-title #openwebrx-client-log-title
{ {
margin-bottom: 5px; margin-bottom: 5px;
@ -668,14 +727,14 @@ input[type=range]:focus::-ms-fill-upper
color: white; color: white;
} }
#openwebrx-panel-volume .openwebrx-panel-slider
{ {
position: relative; position: relative;
top: -2px; top: -2px;
width:170px; width:91px;
} }
#openwebrx-mute-img .openwebrx-sliderbtn-img
{ {
width: 14px; width: 14px;
position:relative; position:relative;

51
htdocs/openwebrx.js
View File

@ -145,7 +145,38 @@ function toggleMute()
updateVolume(); updateVolume();
} }
function zoomInOneStep () { zoom_set(zoom_level+1); }
function zoomOutOneStep () { zoom_set(zoom_level-1); }
function zoomInTotal () { zoom_set(zoom_levels.length-1); }
function zoomOutTotal () { zoom_set(0); }
function setSquelchDefault() { e("openwebrx-panel-squelch").value=0; }
function updateWaterfallColors(which)
{
wfmax=e("openwebrx-waterfall-color-max");
wfmin=e("openwebrx-waterfall-color-min");
if(parseInt(wfmin.value)>=parseInt(wfmax.value))
{
if(!which) wfmin.value=(parseInt(wfmax.value)-1).toString();
else wfmax.value=(parseInt(wfmin.value)+1).toString();
}
waterfall_min_level=parseInt(wfmin.value);
waterfall_max_level=parseInt(wfmax.value);
}
function waterfallColorsDefault()
{
waterfall_min_level=waterfall_min_level_default;
waterfall_max_level=waterfall_max_level_default;
e("openwebrx-waterfall-color-min").value=waterfall_min_level.toString();
e("openwebrx-waterfall-color-max").value=waterfall_max_level.toString();
}
function waterfallColorsAuto()
{
e("openwebrx-waterfall-color-min").value=(waterfall_measure_minmax_min-20).toString();
e("openwebrx-waterfall-color-max").value=(waterfall_measure_minmax_max+30).toString();
updateWaterfallColors(0);
}
// ======================================================== // ========================================================
// ================= ANIMATION ROUTINES ================= // ================= ANIMATION ROUTINES =================
@ -961,12 +992,26 @@ function mkzoomlevels()
function zoom_step(out, where, onscreen) function zoom_step(out, where, onscreen)
{ {
if((out&&zoom_level==0)||(!out&&zoom_level>=zoom_levels_count-1)) return; if((out&&zoom_level==0)||(!out&&zoom_level>=zoom_levels_count-1)) return;
if(out) --zoom_level; if(out) --zoom_level;
else ++zoom_level; else ++zoom_level;
zoom_center_rel=canvas_get_freq_offset(where); zoom_center_rel=canvas_get_freq_offset(where);
//console.log("zoom_step || zlevel: "+zoom_level.toString()+" zlevel_val: "+zoom_levels[zoom_level].toString()+" zoom_center_rel: "+zoom_center_rel.toString()); //console.log("zoom_step || zlevel: "+zoom_level.toString()+" zlevel_val: "+zoom_levels[zoom_level].toString()+" zoom_center_rel: "+zoom_center_rel.toString());
zoom_center_where=onscreen; zoom_center_where=onscreen;
console.log(zoom_center_where, zoom_center_rel, where);
resize_canvases(true);
mkscale();
}
function zoom_set(level)
{
if(!(level>=0&&level<=zoom_levels.length-1)) return;
level=parseInt(level);
zoom_level = level;
//zoom_center_rel=canvas_get_freq_offset(-canvases[0].offsetLeft+canvas_container.clientWidth/2); //zoom to screen center instead of demod envelope
zoom_center_rel=demodulators[0].offset_frequency;
zoom_center_where=0.5+(zoom_center_rel/bandwidth); //this is a kind of hack
console.log(zoom_center_where, zoom_center_rel, -canvases[0].offsetLeft+canvas_container.clientWidth/2);
resize_canvases(true); resize_canvases(true);
mkscale(); mkscale();
} }
@ -1122,6 +1167,7 @@ function add_problem(what)
} }
waterfall_measure_minmax=false; waterfall_measure_minmax=false;
waterfall_measure_minmax_now=false;
waterfall_measure_minmax_min=1e100; waterfall_measure_minmax_min=1e100;
waterfall_measure_minmax_max=-1e100; waterfall_measure_minmax_max=-1e100;
@ -1139,6 +1185,7 @@ function waterfall_measure_minmax_print()
function waterfall_add_queue(what) function waterfall_add_queue(what)
{ {
if(waterfall_measure_minmax) waterfall_measure_minmax_do(what); if(waterfall_measure_minmax) waterfall_measure_minmax_do(what);
if(waterfall_measure_minmax_now) { waterfall_measure_minmax_do(what); waterfall_measure_minmax_now=false; waterfallColorsAuto(); }
waterfall_queue.push(what); waterfall_queue.push(what);
} }
@ -1795,6 +1842,7 @@ function openwebrx_init()
//Synchronise volume with slider //Synchronise volume with slider
updateVolume(); updateVolume();
waterfallColorsDefault();
} }
/* /*
@ -1951,4 +1999,3 @@ function progressbar_set(obj,val,text,over)
if(innerText==null) return; if(innerText==null) return;
innerText.innerHTML=text; innerText.innerHTML=text;
} }