From 2d8ae33542d80e55759c0eaf1542cc7d17cc3ab6 Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Sat, 15 May 2021 23:57:24 +0200
Subject: [PATCH] replace squelch button with svg

---
 htdocs/css/openwebrx.css             |   2 +-
 htdocs/gfx/svg-defs.svg              |   1 +
 htdocs/index.html                    |   4 +-
 inkscape files/openwebrx-squelch.svg | 145 +++++++++++++++++++++++++++
 4 files changed, 150 insertions(+), 2 deletions(-)
 create mode 100644 inkscape files/openwebrx-squelch.svg

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index d61e7d6..30be9a9 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -1371,7 +1371,7 @@ img.openwebrx-mirror-img
 .openwebrx-slider-button svg {
 	position:relative;
 	top: 1px;
-    height: 15px;
+    height: 14px;
 }
 
 .openwebrx-mute-button svg.muted {
diff --git a/htdocs/gfx/svg-defs.svg b/htdocs/gfx/svg-defs.svg
index 5ecb27f..9207068 100644
--- a/htdocs/gfx/svg-defs.svg
+++ b/htdocs/gfx/svg-defs.svg
@@ -13,5 +13,6 @@
         <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" fill-opacity=".994" 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>
\ No newline at end of file
diff --git a/htdocs/index.html b/htdocs/index.html
index 42072b3..84139d4 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -141,7 +141,9 @@
                     <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-auto openwebrx-button"><span class="sprite sprite-squelch openwebrx-sliderbtn-img"></span></div>
+                    <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="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>
                     <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()">
diff --git a/inkscape files/openwebrx-squelch.svg b/inkscape files/openwebrx-squelch.svg
new file mode 100644
index 0000000..c6be1ee
--- /dev/null
+++ b/inkscape files/openwebrx-squelch.svg	
@@ -0,0 +1,145 @@
+<?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="svg3271"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)"
+   sodipodi:docname="openwebrx-squelch.svg">
+  <defs
+     id="defs3265" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.2"
+     inkscape:cx="55.52044"
+     inkscape:cy="40.254874"
+     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="metadata3268">
+    <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="layer4"
+     inkscape:label="original image"
+     style="display:none">
+    <image
+       width="80"
+       height="74.400002"
+       preserveAspectRatio="none"
+       xlink:href="data:image/png;base64,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
+6r92T61m6hJKugAAAABJRU5ErkJggg==
+"
+       id="image4013"
+       x="0"
+       y="2.8" />
+  </g>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       aria-label="SQ"
+       transform="scale(0.78705035,1.2705667)"
+       id="text4021"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:73.656px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.767246">
+      <path
+         d="M 42.352197,19.439284 C 42.278541,8.3172282 34.839285,2.2037804 21.286582,2.2037804 c -12.8897999,0 -20.32905575,6.0397918 -20.32905575,16.4989436 0,8.323128 4.19839185,12.374208 15.09947975,14.436576 l 7.512912,1.47312 c 7.3656,1.399464 10.090871,3.461832 10.090871,7.807535 0,4.493016 -4.124735,7.218288 -10.827431,7.218288 -7.512912,0 -11.711304,-3.167208 -12.079584,-8.912376 H -1.7318726e-6 C 0.66290225,52.216203 8.5440941,58.476963 22.24411,58.476963 c 13.847327,0 22.023143,-6.408072 22.023143,-17.382816 0,-8.470439 -4.272048,-12.889799 -14.215607,-14.804855 L 21.654862,24.66886 C 13.77367,23.122084 11.490334,21.575308 11.490334,17.67154 c 0,-4.05108 3.535488,-6.62904 9.280656,-6.62904 6.99732,0 10.901088,2.94624 11.269367,8.396784 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:73.656px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.767246"
+         id="path4059" />
+      <path
+         d="m 95.752781,49.196307 c 3.609144,-4.41936 5.892479,-11.784959 5.892479,-19.003247 0,-7.881192 -2.798927,-15.46776 -7.512911,-20.5500238 C 89.492022,4.6344283 83.45223,2.2037804 75.792006,2.2037804 c -7.660224,0 -13.700016,2.4306479 -18.340344,7.4392558 C 52.664022,14.7253 49.93875,22.311868 49.93875,30.340372 c 0,8.028504 2.798928,15.615071 7.512912,20.697335 4.640328,5.008608 10.68012,7.439256 18.340344,7.439256 5.597856,0 9.648936,-1.10484 13.920984,-3.6828 l 6.334415,5.966136 5.597855,-5.966136 z m -13.626359,-12.889799 -5.597856,5.966135 5.671512,5.376888 c -1.767744,0.883872 -4.124736,1.399464 -6.481728,1.399464 -8.83872,0 -14.7312,-7.439256 -14.7312,-18.708623 0,-11.343024 5.818824,-18.708624 14.804856,-18.708624 8.986032,0 14.804855,7.3656 14.804855,18.78228 0,4.41936 -0.810215,8.396783 -2.430647,11.637647 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:73.656px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.767246"
+         id="path4061" />
+    </g>
+  </g>
+</svg>