use sprites to reduce the number of requests

htdocs/css/openwebrx-globals.css

@@ -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;
+}

htdocs/css/openwebrx-header.css

@@ -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;
+}

htdocs/css/openwebrx.css

@@ -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;
+}

htdocs/include/header.include.html

@@ -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-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"><img src="static/gfx/openwebrx-rx-details-arrow.png" /></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-status"><span class="sprite sprite-panel-status"></span><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-log"><span class="sprite sprite-panel-log"></span><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>
+                <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"><img src="static/gfx/openwebrx-panel-map.png" alt="Map"/><br/>Map</a>
+                <a class="button" href="map" target="openwebrx-map"><span class="sprite sprite-panel-map"></span><br/>Map</a>
                 ${settingslink}
             </section>
         </div>

htdocs/index.html

@@ -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="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"> <img src="static/gfx/openwebrx-zoom-out.png" /></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"><img src="static/gfx/openwebrx-zoom-in-total.png" /></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"><img src="static/gfx/openwebrx-zoom-out-total.png" /></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">

htdocs/lib/BookmarkBar.js

@@ -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="edit"><span class="sprite sprite-edit"></span></div>' +
-                    '<div class="openwebrx-button action" data-action="delete"><img src="static/gfx/openwebrx-trashcan.png"></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>'

htdocs/openwebrx.js

@@ -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;