Added more sliders and buttons, waterfall colors are now adjustable from the GUI.
This commit is contained in:
ha7ilm
parent
3c1d3b5b42
commit
06bd8b92aa
|
|
@ -31,8 +31,8 @@
|
|||
var starting_mod = "%[START_MOD]";
|
||||
var starting_offset_frequency = %[START_OFFSET_FREQ];
|
||||
var waterfall_colors=%[WATERFALL_COLORS];
|
||||
var waterfall_min_level=%[WATERFALL_MIN_LEVEL];
|
||||
var waterfall_max_level=%[WATERFALL_MAX_LEVEL];
|
||||
var waterfall_min_level_default=%[WATERFALL_MIN_LEVEL];
|
||||
var waterfall_max_level_default=%[WATERFALL_MAX_LEVEL];
|
||||
</script>
|
||||
<script src="sdr.js"></script>
|
||||
<script src="openwebrx.js"></script>
|
||||
|
|
@ -72,27 +72,43 @@
|
|||
<div id="openwebrx-scale-container">
|
||||
<canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas>
|
||||
</div>
|
||||
|
||||
<div id="webrx-canvas-container">
|
||||
|
||||
<div id="openwebrx-phantom-canvas"></div>
|
||||
<!-- add canvas here by javascript -->
|
||||
</div>
|
||||
<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-mouse-freq">---.--- MHz</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>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@ input[type=range]
|
|||
{
|
||||
-webkit-appearance: none;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
input[type=range]:focus
|
||||
{
|
||||
|
|
@ -497,6 +496,7 @@ input[type=range]:focus::-ms-fill-upper
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
.openwebrx-panel
|
||||
{
|
||||
visibility: hidden;
|
||||
|
|
@ -557,6 +557,65 @@ input[type=range]:focus::-ms-fill-upper
|
|||
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
|
||||
{
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -668,14 +727,14 @@ input[type=range]:focus::-ms-fill-upper
|
|||
color: white;
|
||||
}
|
||||
|
||||
#openwebrx-panel-volume
|
||||
.openwebrx-panel-slider
|
||||
{
|
||||
position: relative;
|
||||
top: -2px;
|
||||
width:170px;
|
||||
width:91px;
|
||||
}
|
||||
|
||||
#openwebrx-mute-img
|
||||
.openwebrx-sliderbtn-img
|
||||
{
|
||||
width: 14px;
|
||||
position:relative;
|
||||
|
|
|
|||
|
|
@ -145,7 +145,38 @@ function toggleMute()
|
|||
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 =================
|
||||
|
|
@ -961,12 +992,26 @@ function mkzoomlevels()
|
|||
function zoom_step(out, where, onscreen)
|
||||
{
|
||||
if((out&&zoom_level==0)||(!out&&zoom_level>=zoom_levels_count-1)) return;
|
||||
|
||||
if(out) --zoom_level;
|
||||
else ++zoom_level;
|
||||
|
||||
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());
|
||||
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);
|
||||
mkscale();
|
||||
}
|
||||
|
|
@ -1122,6 +1167,7 @@ function add_problem(what)
|
|||
}
|
||||
|
||||
waterfall_measure_minmax=false;
|
||||
waterfall_measure_minmax_now=false;
|
||||
waterfall_measure_minmax_min=1e100;
|
||||
waterfall_measure_minmax_max=-1e100;
|
||||
|
||||
|
|
@ -1139,6 +1185,7 @@ function waterfall_measure_minmax_print()
|
|||
function waterfall_add_queue(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);
|
||||
}
|
||||
|
||||
|
|
@ -1795,6 +1842,7 @@ function openwebrx_init()
|
|||
|
||||
//Synchronise volume with slider
|
||||
updateVolume();
|
||||
waterfallColorsDefault();
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -1951,4 +1999,3 @@ function progressbar_set(obj,val,text,over)
|
|||
if(innerText==null) return;
|
||||
innerText.innerHTML=text;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue