use sprites to reduce the number of requests
This commit is contained in:
Jakob Ketterl
parent
626fa7681b
commit
63c31eba22
|
|
@ -6,3 +6,7 @@ html, body
|
|||
font-family: "DejaVu Sans", Verdana, Geneva, sans-serif;
|
||||
}
|
||||
|
||||
.sprite {
|
||||
background-image: url(../gfx/openwebrx-sprites.png);
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -192,3 +192,44 @@
|
|||
text-shadow: none;
|
||||
}
|
||||
|
||||
.sprite-panel-log {
|
||||
background-position: 0 0;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.sprite-panel-receiver {
|
||||
background-position: -38px 0;
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.sprite-panel-map {
|
||||
background-position: -78px 0;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.sprite-panel-settings {
|
||||
background-position: -116px 0;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.sprite-panel-status {
|
||||
background-position: -154px 0;
|
||||
width: 44px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.sprite-rx-details-arrow-down {
|
||||
background-position: -141px -467px;
|
||||
width: 43px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.sprite-rx-details-arrow-up {
|
||||
background-position: -141px -455px;
|
||||
width: 43px;
|
||||
height: 12px;
|
||||
}
|
||||
|
|
@ -1162,3 +1162,79 @@ img.openwebrx-mirror-img
|
|||
margin: -10px;
|
||||
}
|
||||
|
||||
.sprite-zoom {
|
||||
background-size: 55px 151px;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.sprite-zoom-in {
|
||||
background-position: 0 -10px;
|
||||
}
|
||||
|
||||
.sprite-zoom-out {
|
||||
background-position: 0 -38px;
|
||||
}
|
||||
|
||||
.sprite-zoom-in-total {
|
||||
background-size: 49px 133px;
|
||||
background-position: 0 -57.5px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.sprite-zoom-out-total {
|
||||
background-size: 50px 139px;
|
||||
background-position: 0 -88.5px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.sprite-edit {
|
||||
background-size: 70.7px 193.2px;
|
||||
background-position: -35px -145.25px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.sprite-trashcan {
|
||||
background-size: 70.7px 193.2px;
|
||||
background-position: -49px -145.25px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.sprite-speaker {
|
||||
background-size: 29.2px 79.7px;
|
||||
width: 14px;
|
||||
height: 14.6px;
|
||||
}
|
||||
|
||||
#openwebrx-mute-on .sprite-speaker {
|
||||
background-position: -14.4px -20.4px;
|
||||
}
|
||||
|
||||
#openwebrx-mute-off .sprite-speaker {
|
||||
background-position: -14.4px -5.8px;
|
||||
}
|
||||
|
||||
.sprite-squelch {
|
||||
background-size: 28.3px 77.3px;
|
||||
background-position: 0 -64.3px;
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.sprite-waterfall {
|
||||
background-size: 27.7px 75.8px;
|
||||
}
|
||||
|
||||
.sprite-waterfall-auto {
|
||||
background-position: -13.7px -45.6px;
|
||||
width: 14px;
|
||||
height: 11.4px;
|
||||
}
|
||||
|
||||
.sprite-waterfall-default {
|
||||
background-position: -13.7px -33.2px;
|
||||
width: 14px;
|
||||
height: 12.5px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -9,14 +9,14 @@
|
|||
<div id="webrx-rx-desc" class="openwebrx-photo-trigger"></div>
|
||||
</div>
|
||||
<div id="openwebrx-rx-details-arrow">
|
||||
<a id="openwebrx-rx-details-arrow-up" class="openwebrx-photo-trigger" style="display: none;"><img src="static/gfx/openwebrx-rx-details-arrow-up.png" /></a>
|
||||
<a id="openwebrx-rx-details-arrow-down" class="openwebrx-photo-trigger"><img src="static/gfx/openwebrx-rx-details-arrow.png" /></a>
|
||||
<a id="openwebrx-rx-details-arrow-up" class="openwebrx-photo-trigger" style="display: none;"><span class="sprite sprite-rx-details-arrow-up"></span></a>
|
||||
<a id="openwebrx-rx-details-arrow-down" class="openwebrx-photo-trigger"><span class="sprite sprite-rx-details-arrow-down"></span></a>
|
||||
</div>
|
||||
<section id="openwebrx-main-buttons">
|
||||
<div class="button" data-toggle-panel="openwebrx-panel-status"><img src="static/gfx/openwebrx-panel-status.png" alt="Status"/><br/>Status</div>
|
||||
<div class="button" data-toggle-panel="openwebrx-panel-log"><img src="static/gfx/openwebrx-panel-log.png" alt="Log"/><br/>Log</div>
|
||||
<div class="button" data-toggle-panel="openwebrx-panel-receiver"><img src="static/gfx/openwebrx-panel-receiver.png" alt="Receiver"/><br/>Receiver</div>
|
||||
<a class="button" href="map" target="openwebrx-map"><img src="static/gfx/openwebrx-panel-map.png" alt="Map"/><br/>Map</a>
|
||||
<div class="button" data-toggle-panel="openwebrx-panel-status"><span class="sprite sprite-panel-status"></span><br/>Status</div>
|
||||
<div class="button" data-toggle-panel="openwebrx-panel-log"><span class="sprite sprite-panel-log"></span><br/>Log</div>
|
||||
<div class="button" data-toggle-panel="openwebrx-panel-receiver"><span class="sprite sprite-panel-receiver"></span><br/>Receiver</div>
|
||||
<a class="button" href="map" target="openwebrx-map"><span class="sprite sprite-panel-map"></span><br/>Map</a>
|
||||
${settingslink}
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -162,22 +162,22 @@
|
|||
</div>
|
||||
<div class="openwebrx-modes openwebrx-panel-line"></div>
|
||||
<div class="openwebrx-panel-line">
|
||||
<div title="Mute on/off" id="openwebrx-mute-off" class="openwebrx-button" onclick="toggleMute();"><img src="static/gfx/openwebrx-speaker.png" class="openwebrx-sliderbtn-img" id="openwebrx-mute-img"></div>
|
||||
<div title="Mute on/off" id="openwebrx-mute-off" class="openwebrx-button" onclick="toggleMute();"><span class="sprite sprite-speaker openwebrx-sliderbtn-img"></span></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="static/gfx/openwebrx-waterfall-auto.png" class="openwebrx-sliderbtn-img"></div>
|
||||
<div title="Auto-adjust waterfall colors" id="openwebrx-waterfall-colors-auto" class="openwebrx-button" onclick="waterfall_measure_minmax_now=true;"><span class="sprite sprite-waterfall sprite-waterfall-auto openwebrx-sliderbtn-img"></span></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="Auto-set squelch level" class="openwebrx-squelch-default openwebrx-button"><img src="static/gfx/openwebrx-squelch-button.png" class="openwebrx-sliderbtn-img"></div>
|
||||
<div title="Auto-set squelch level" class="openwebrx-squelch-default openwebrx-button"><span class="sprite sprite-squelch openwebrx-sliderbtn-img"></span></div>
|
||||
<input title="Squelch" class="openwebrx-squelch-slider openwebrx-panel-slider" type="range" min="-150" max="0" value="-150" step="1">
|
||||
<div title="Set waterfall colors to default" id="openwebrx-waterfall-colors-default" class="openwebrx-button" onclick="waterfallColorsDefault()"><img src="static/gfx/openwebrx-waterfall-default.png" class="openwebrx-sliderbtn-img"></div>
|
||||
<div title="Set waterfall colors to default" id="openwebrx-waterfall-colors-default" class="openwebrx-button" onclick="waterfallColorsDefault()"><span class="sprite sprite-waterfall sprite-waterfall-default openwebrx-sliderbtn-img"></span></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="static/gfx/openwebrx-zoom-in.png" /></div>
|
||||
<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutOneStep();" title="Zoom out one step"> <img src="static/gfx/openwebrx-zoom-out.png" /></div>
|
||||
<div class="openwebrx-button openwebrx-square-button" onclick="zoomInTotal();" title="Zoom in totally"><img src="static/gfx/openwebrx-zoom-in-total.png" /></div>
|
||||
<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutTotal();" title="Zoom out totally"><img src="static/gfx/openwebrx-zoom-out-total.png" /></div>
|
||||
<div class="openwebrx-button openwebrx-square-button" onclick="zoomInOneStep();" title="Zoom in one step"><span class="sprite sprite-zoom sprite-zoom-in"></span></div>
|
||||
<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutOneStep();" title="Zoom out one step"><span class="sprite sprite-zoom sprite-zoom-out"></span></div>
|
||||
<div class="openwebrx-button openwebrx-square-button" onclick="zoomInTotal();" title="Zoom in totally"><span class="sprite sprite-zoom sprite-zoom-in-total"></span></div>
|
||||
<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutTotal();" title="Zoom out totally"><span class="sprite sprite-zoom sprite-zoom-out-total"></span></div>
|
||||
<div id="openwebrx-smeter-db">0 dB</div>
|
||||
</div>
|
||||
<div class="openwebrx-panel-line">
|
||||
|
|
|
|||
|
|
@ -87,8 +87,8 @@ BookmarkBar.prototype.render = function(){
|
|||
var $bookmark = $(
|
||||
'<div class="bookmark" data-source="' + b.source + '"' + (b.editable?' editable="editable"':'') + '>' +
|
||||
'<div class="bookmark-actions">' +
|
||||
'<div class="openwebrx-button action" data-action="edit"><img src="static/gfx/openwebrx-edit.png"></div>' +
|
||||
'<div class="openwebrx-button action" data-action="delete"><img src="static/gfx/openwebrx-trashcan.png"></div>' +
|
||||
'<div class="openwebrx-button action" data-action="edit"><span class="sprite sprite-edit"></span></div>' +
|
||||
'<div class="openwebrx-button action" data-action="delete"><span class="sprite sprite-trashcan"><span></div>' +
|
||||
'</div>' +
|
||||
'<div class="bookmark-content">' + b.name + '</div>' +
|
||||
'</div>'
|
||||
|
|
|
|||
|
|
@ -44,13 +44,11 @@ function toggleMute() {
|
|||
if (mute) {
|
||||
mute = false;
|
||||
e("openwebrx-mute-on").id = "openwebrx-mute-off";
|
||||
e("openwebrx-mute-img").src = "static/gfx/openwebrx-speaker.png";
|
||||
e("openwebrx-panel-volume").disabled = false;
|
||||
e("openwebrx-panel-volume").value = volumeBeforeMute;
|
||||
} else {
|
||||
mute = true;
|
||||
e("openwebrx-mute-off").id = "openwebrx-mute-on";
|
||||
e("openwebrx-mute-img").src = "static/gfx/openwebrx-speaker-muted.png";
|
||||
e("openwebrx-panel-volume").disabled = true;
|
||||
volumeBeforeMute = e("openwebrx-panel-volume").value;
|
||||
e("openwebrx-panel-volume").value = 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue