replace waterfall default button with svg

htdocs/gfx/svg-defs.svg

@@ -13,6 +13,7 @@
         <g id="speaker" stroke="#fff"><path d="M33.5 7.15 16.74 25.201H2.65v31.7h16.041L33.5 72.848z" fill="#fff" stroke-width="2.1"/><g fill="none"><path d="M46.336 16.041A20 30 0 0 1 54.3 40a20 30 0 0 1-7.964 23.959" stroke-width="3"/><path d="M52.716 9.652A30.6 38 0 0 1 64.9 40a30.6 38 0 0 1-12.184 30.348" stroke-width="4.2"/><path d="M59.035 2.065A41.1 47.5 0 0 1 75.4 40a41.1 47.5 0 0 1-16.365 37.935" stroke-width="5.4"/></g></g>
         <g id="speaker-muted"><path d="M33.5 7.15 16.74 25.201H2.65v31.7h16.041L33.5 72.848z" fill="#fff" stroke="#fff" stroke-width="2.1"/></g>
         <g id="waterfall-auto"><path d="M33.512 72.05s3.393-64.129 8.24-64.093c4.48.034 4.392 28.286 9.98 28.198 4.775-.074 5.279-13.721 6.33-17.88 1.013-4.004 2.915-5.172 5.321-4.894 2.993.346 8.205 5.925 10.588 13.761 4.16 13.677 5.53 44.907 5.53 44.907z" fill="#ccc" stroke="#ccc"/><path d="M29.3 68.8 18.4 54 7.5 68.8zM7.5 11.2 18.4 26l10.9-14.8zM18.4 26v28" fill="#fff" stroke="#fff" stroke-width="7.5"/></g>
+        <g id="waterfall-default"><path d="M36.356 75.295s3.187-34.502 7.74-34.482c4.207.018 4.125 15.218 9.374 15.171 4.485-.04 4.958-7.382 5.945-9.62.951-2.154 2.738-2.782 4.998-2.632 2.812.186 7.707 3.187 9.945 7.403 3.906 7.358 5.193 24.16 5.193 24.16z" fill="#ccc" stroke="#ccc" stroke-width=".711"/><path d="M18.4 25.424v29.075m-10.9 0L18.4 69.3l10.9-14.801zm10.9-43.875L7.5 25.425h21.801z" fill="#fff" stroke="#fff" stroke-width="7.5"/></g>
         <g id="squelch" fill="#fff" stroke-width=".767"><path d="M33.333 24.7c-.058-14.132-5.913-21.9-16.58-21.9-10.145 0-16 7.673-16 20.963 0 10.575 3.305 15.722 11.884 18.343l5.913 1.872c5.797 1.778 7.942 4.399 7.942 9.92 0 5.71-3.246 9.172-8.521 9.172-5.913 0-9.218-4.024-9.508-11.324H0C.521 66.345 6.724 74.3 17.506 74.3c10.899 0 17.333-8.142 17.333-22.087 0-10.762-3.362-16.378-11.188-18.81l-6.609-2.06c-6.203-1.965-8-3.93-8-8.89 0-5.148 2.782-8.423 7.304-8.423 5.507 0 8.58 3.743 8.87 10.669zM75.362 62.508C78.202 56.893 80 47.534 80 38.363c0-10.014-2.203-19.653-5.913-26.11C70.435 5.887 65.681 2.8 59.653 2.8S48.87 5.888 45.218 12.252C41.45 18.71 39.305 28.35 39.305 38.55s2.203 19.84 5.913 26.298c3.652 6.364 8.406 9.452 14.435 9.452 4.405 0 7.594-1.404 10.956-4.68l4.986 7.581L80 69.621zM64.638 46.13l-4.406 7.58 4.464 6.833c-1.391 1.123-3.246 1.778-5.101 1.778C52.638 62.321 48 52.869 48 38.549c0-14.412 4.58-23.771 11.652-23.771s11.652 9.358 11.652 23.864c0 5.615-.638 10.67-1.913 14.787z"/></g>
     </defs>
 </svg>

htdocs/index.html

@@ -145,7 +145,9 @@
                         <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="Set waterfall colors to default" id="openwebrx-waterfall-colors-default" class="openwebrx-button" onclick="waterfallColorsDefault()"><span class="sprite sprite-waterfall-default openwebrx-sliderbtn-img"></span></div>
+                    <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>
                 <div class="openwebrx-panel-line">

inkscape files/openwebrx-waterfall-default.svg

@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="80"
+   viewBox="0 0 80 80"
+   version="1.1"
+   id="svg2431"
+   sodipodi:docname="openwebrx-waterfall-default.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
+  <defs
+     id="defs2425" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.482556"
+     inkscape:cx="31.598969"
+     inkscape:cy="49.488518"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     units="px"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="2560"
+     inkscape:window-height="1381"
+     inkscape:window-x="0"
+     inkscape:window-y="348"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata2428">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="original image"
+     style="display:inline">
+    <image
+       width="80"
+       height="71.287132"
+       preserveAspectRatio="none"
+       xlink:href="data:image/png;base64,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
+"
+       id="image4964"
+       x="0"
+       y="4.3564358"
+       style="display:none" />
+  </g>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:inline;fill:#cccccc;fill-opacity:1;stroke:#cccccc;stroke-width:0.710862px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 36.355781,75.294569 c 0,0 3.187436,-34.501741 7.739164,-34.48213 4.207984,0.01818 4.125594,15.217675 9.375029,15.170794 4.484633,-0.04008 4.957615,-7.382141 5.945092,-9.619511 0.950801,-2.154242 2.738036,-2.78266 4.997592,-2.632998 2.811564,0.18622 7.706697,3.187908 9.944848,7.403527 3.906574,7.358113 5.193423,24.160318 5.193423,24.160318 z"
+       id="path3226"
+       sodipodi:nodetypes="cssssscc" />
+    <path
+       id="path4973"
+       style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:7.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 18.400391,25.424 V 54.499 M 7.5,54.499 18.400391,69.299781 29.300781,54.499 Z M 18.400391,10.623704 7.5,25.424485 h 21.800781 z" />
+  </g>
+</svg>