Added mechanism for collapsing sections of the receiver panel.
This commit is contained in:
Marat Fayzullin
parent
4ed3fea080
commit
b170fe5cad
|
|
@ -1422,3 +1422,14 @@ img.openwebrx-mirror-img
|
|||
height: 50px;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
.openwebrx-section-divider {
|
||||
border-bottom: 2px dotted white;
|
||||
margin-bottom: 5px;
|
||||
opacity: 0.25;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.openwebrx-section {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -190,65 +190,74 @@
|
|||
<select id="openwebrx-sdr-profiles-listbox" onchange="sdr_profile_changed();">
|
||||
</select>
|
||||
</div>
|
||||
<div class="openwebrx-modes openwebrx-panel-line"></div>
|
||||
<div class="openwebrx-panel-line">
|
||||
<div title="Mute on/off" class="openwebrx-button openwebrx-slider-button openwebrx-mute-button" onclick="toggleMute();">
|
||||
<svg class="unmuted" viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#speaker"></use></svg>
|
||||
<svg class="muted" viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#speaker-muted"></use></svg>
|
||||
</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="Tuning step" class="openwebrx-button openwebrx-slider-button" onclick="tuning_step_reset();">
|
||||
<svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#tuning-step"></use></svg>
|
||||
</div>
|
||||
<select id="openwebrx-tuning-step-listbox" class="openwebrx-panel-listbox" onchange="tuning_step_changed();">
|
||||
<option value="1"></option>
|
||||
<option value="100">100Hz</option>
|
||||
<option value="500">500Hz</option>
|
||||
<option value="1000">1kHz</option>
|
||||
<option value="2500">2.5kHz</option>
|
||||
<option value="3000">3kHz</option>
|
||||
<option value="5000">5kHz</option>
|
||||
<option value="6000">6kHz</option>
|
||||
<option value="9000">9kHz</option>
|
||||
<option value="10000">10kHz</option>
|
||||
<option value="12000">12kHz</option>
|
||||
<option value="50000">50kHz</option>
|
||||
</select>
|
||||
<div class="openwebrx-section-divider" onclick="toggleSection(this);"></div>
|
||||
<div class="openwebrx-section">
|
||||
<div class="openwebrx-modes openwebrx-panel-line"></div>
|
||||
</div>
|
||||
<div class="openwebrx-panel-line">
|
||||
<div title="Auto-set squelch level" class="openwebrx-squelch-auto openwebrx-button openwebrx-slider-button">
|
||||
<svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#squelch"></use></svg>
|
||||
<div class="openwebrx-section-divider" onclick="toggleSection(this);"></div>
|
||||
<div class="openwebrx-section">
|
||||
<div class="openwebrx-panel-line">
|
||||
<div title="Mute on/off" class="openwebrx-button openwebrx-slider-button openwebrx-mute-button" onclick="toggleMute();">
|
||||
<svg class="unmuted" viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#speaker"></use></svg>
|
||||
<svg class="muted" viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#speaker-muted"></use></svg>
|
||||
</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="Tuning step" class="openwebrx-button openwebrx-slider-button" onclick="tuning_step_reset();">
|
||||
<svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#tuning-step"></use></svg>
|
||||
</div>
|
||||
<select id="openwebrx-tuning-step-listbox" class="openwebrx-panel-listbox" onchange="tuning_step_changed();">
|
||||
<option value="1">1Hz</option>
|
||||
<option value="100">100Hz</option>
|
||||
<option value="500">500Hz</option>
|
||||
<option value="1000">1kHz</option>
|
||||
<option value="2500">2.5kHz</option>
|
||||
<option value="3000">3kHz</option>
|
||||
<option value="5000">5kHz</option>
|
||||
<option value="6000">6kHz</option>
|
||||
<option value="9000">9kHz</option>
|
||||
<option value="10000">10kHz</option>
|
||||
<option value="12000">12kHz</option>
|
||||
<option value="50000">50kHz</option>
|
||||
</select>
|
||||
</div>
|
||||
<input title="Squelch" class="openwebrx-squelch-slider openwebrx-panel-slider" type="range" min="-150" max="0" value="-150" step="1">
|
||||
<div title="Auto-adjust waterfall colors (right-click for continuous)" id="openwebrx-waterfall-colors-auto" class="openwebrx-button openwebrx-slider-button">
|
||||
<svg class="auto" viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#waterfall-auto"></use></svg>
|
||||
<svg class="continuous" viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#waterfall-continuous"></use></svg>
|
||||
<div class="openwebrx-panel-line">
|
||||
<div title="Auto-set squelch level" class="openwebrx-squelch-auto openwebrx-button openwebrx-slider-button">
|
||||
<svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#squelch"></use></svg>
|
||||
</div>
|
||||
<input title="Squelch" class="openwebrx-squelch-slider openwebrx-panel-slider" type="range" min="-150" max="0" value="-150" step="1">
|
||||
<div title="Auto-adjust waterfall colors (right-click for continuous)" id="openwebrx-waterfall-colors-auto" class="openwebrx-button openwebrx-slider-button">
|
||||
<svg class="auto" viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#waterfall-auto"></use></svg>
|
||||
<svg class="continuous" viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#waterfall-continuous"></use></svg>
|
||||
</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="Noise reduction on/off" class="openwebrx-nr-toggle openwebrx-button openwebrx-slider-button" onclick="toggleNR();">
|
||||
<svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#noise-reduce"></use></svg>
|
||||
</div>
|
||||
<input title="Noise reduction level" disabled id="openwebrx-panel-nr" class="openwebrx-panel-slider" type="range" min="-10" max="10" value="0" step="1" onchange="updateNR()" oninput="updateNR()">
|
||||
<div title="Set waterfall colors to default" id="openwebrx-waterfall-colors-default" class="openwebrx-button openwebrx-slider-button" onclick="waterfallColorsDefault()">
|
||||
<svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#waterfall-default"></use></svg>
|
||||
</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>
|
||||
<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="Noise reduction on/off" class="openwebrx-nr-toggle openwebrx-button openwebrx-slider-button" onclick="toggleNR();">
|
||||
<svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#noise-reduce"></use></svg>
|
||||
<div class="openwebrx-section-divider" onclick="toggleSection(this);"></div>
|
||||
<div class="openwebrx-section">
|
||||
<div class="openwebrx-panel-line">
|
||||
<div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="zoomInOneStep();" title="Zoom in one step"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#zoom-in"></use></svg></div>
|
||||
<div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="zoomOutOneStep();" title="Zoom out one step"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#zoom-out"></use></svg></div>
|
||||
<div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="zoomInTotal();" title="Zoom in totally"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#zoom-in-total"></use></svg></div>
|
||||
<div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="zoomOutTotal();" title="Zoom out totally"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#zoom-out-total"></use></svg></div>
|
||||
<div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="toggleSpectrum();" title="Toggle spectrum display"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#spectrum"></use></svg></div>
|
||||
<div class="openwebrx-button openwebrx-square-button openwebrx-record-button" onclick="toggleRecording();" title="Record audio">REC</div>
|
||||
</div>
|
||||
<input title="Noise reduction level" disabled id="openwebrx-panel-nr" class="openwebrx-panel-slider" type="range" min="-10" max="10" value="0" step="1" onchange="updateNR()" oninput="updateNR()">
|
||||
<div title="Set waterfall colors to default" id="openwebrx-waterfall-colors-default" class="openwebrx-button openwebrx-slider-button" onclick="waterfallColorsDefault()">
|
||||
<svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#waterfall-default"></use></svg>
|
||||
<div class="openwebrx-panel-line">
|
||||
<div id="openwebrx-smeter">
|
||||
<div class="openwebrx-smeter-bar"></div>
|
||||
</div>
|
||||
<div id="openwebrx-smeter-db">0 dB</div>
|
||||
</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 openwebrx-zoom-button" onclick="zoomInOneStep();" title="Zoom in one step"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#zoom-in"></use></svg></div>
|
||||
<div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="zoomOutOneStep();" title="Zoom out one step"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#zoom-out"></use></svg></div>
|
||||
<div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="zoomInTotal();" title="Zoom in totally"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#zoom-in-total"></use></svg></div>
|
||||
<div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="zoomOutTotal();" title="Zoom out totally"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#zoom-out-total"></use></svg></div>
|
||||
<div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="toggleSpectrum();" title="Toggle spectrum display"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#spectrum"></use></svg></div>
|
||||
<div class="openwebrx-button openwebrx-square-button openwebrx-record-button" onclick="toggleRecording();" title="Record audio">REC</div>
|
||||
</div>
|
||||
<div class="openwebrx-panel-line">
|
||||
<div id="openwebrx-smeter">
|
||||
<div class="openwebrx-smeter-bar"></div>
|
||||
</div>
|
||||
<div id="openwebrx-smeter-db">0 dB</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,17 @@ function updateVolume() {
|
|||
audioEngine.setVolume(parseFloat($("#openwebrx-panel-volume").val()) / 100);
|
||||
}
|
||||
|
||||
function toggleSection(el) {
|
||||
var next_el = el.nextElementSibling;
|
||||
if (next_el) {
|
||||
if (next_el.style.display === "none") {
|
||||
next_el.style.display = "block";
|
||||
} else {
|
||||
next_el.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleMute() {
|
||||
var $muteButton = $('.openwebrx-mute-button');
|
||||
var $volumePanel = $('#openwebrx-panel-volume');
|
||||
|
|
|
|||
Loading…
Reference in New Issue