complete dial frequency feature frontend

htdocs/css/openwebrx.css

@@ -364,6 +364,20 @@ input[type=range]:focus::-ms-fill-upper
 	text-align: center;
 }
 
+.openwebrx-dial-button svg {
+    width: 19px;
+    height: 19px;
+    vertical-align: bottom;
+}
+
+.openwebrx-dial-button #ph_dial {
+    fill: #888;
+}
+
+.openwebrx-dial-button.available #ph_dial {
+    fill: #FFF;
+}
+
 .openwebrx-square-button img
 {
 	height: 27px;
@@ -602,7 +616,7 @@ img.openwebrx-mirror-img
 
 #openwebrx-secondary-demod-listbox
 {
-	width: 201px;
+	width: 174px;
 	height: 27px;
 	padding-left:3px;
 }

htdocs/index.html

@@ -86,6 +86,16 @@
                             <option value="jt9" data-feature="wsjt-x">JT9</option>
                             <option value="ft4" data-feature="wsjt-x">FT4</option>
                         </select>
+                        <div id="openwebrx-secondary-demod-dial-button" class="openwebrx-button openwebrx-dial-button" onclick="dial_button_click();">
+                            <svg version="1.1" id="Layer_1" x="0px" y="0px" width="246px" height="246px" viewBox="0 0 246 246" enable-background="new 0 0 343 348" xmlns="http://www.w3.org/2000/svg">
+                                <g id="images" display="none">
+                                    <g id="phones.psd" display="inline" opacity="0.3"/>
+                                </g>
+                                <g id="ph_dial_1_" transform="matrix(1, 0, 0, 1, -45.398312, -50.931698)">
+                                    <path id="ph_dial" d="M238.875,190.125c3.853,7.148,34.267,4.219,50.242,2.145c0.891-5.977,1.508-12.043,1.508-18.27 c0-67.723-54.901-122.625-122.625-122.625c-67.723,0-122.625,54.902-122.625,122.625c0,67.723,54.902,122.625,122.625,122.625 c51.06,0,94.797-31.227,113.25-75.609c-13.969-9.668-41.625-18.891-41.625-18.891c-5.25,0-10.5-3-12.75-8.25 S233.625,180.375,238.875,190.125z M220.465,175.313c0,28.478-23.086,51.563-51.563,51.563c-28.478,0-51.563-23.086-51.563-51.563 c0-28.477,23.086-51.563,51.563-51.563C197.379,123.75,220.465,146.836,220.465,175.313z M185.25,64.125 c10.563,0,19.125,8.563,19.125,19.125s-8.563,19.125-19.125,19.125c-10.562,0-19.125-8.563-19.125-19.125 S174.688,64.125,185.25,64.125z M142.875,69C153.438,69,162,77.563,162,88.125s-8.563,19.125-19.125,19.125 c-10.562,0-19.125-8.563-19.125-19.125S132.313,69,142.875,69z M106.5,91.875c10.563,0,19.125,8.563,19.125,19.125 s-8.563,19.125-19.125,19.125c-10.562,0-19.125-8.562-19.125-19.125S95.938,91.875,106.5,91.875z M81.375,126.75 c10.563,0,19.125,8.563,19.125,19.125S91.938,165,81.375,165c-10.563,0-19.125-8.563-19.125-19.125S70.813,126.75,81.375,126.75z M58.125,188.625c0-10.559,8.563-19.125,19.125-19.125c10.563,0,19.125,8.566,19.125,19.125S87.813,207.75,77.25,207.75 C66.687,207.75,58.125,199.184,58.125,188.625z M75.75,229.875c0-10.559,8.563-19.125,19.125-19.125 c10.563,0,19.125,8.566,19.125,19.125S105.438,249,94.875,249C84.312,249,75.75,240.434,75.75,229.875z M126.375,276 c-10.563,0-19.125-8.566-19.125-19.125s8.563-19.125,19.125-19.125c10.563,0,19.125,8.566,19.125,19.125S136.938,276,126.375,276z M168,288c-10.563,0-19.125-8.566-19.125-19.125S157.438,249.75,168,249.75c10.563,0,19.125,8.566,19.125,19.125 S178.563,288,168,288z M210.375,276c-10.563,0-19.125-8.566-19.125-19.125s8.563-19.125,19.125-19.125 c10.563,0,19.125,8.566,19.125,19.125S220.938,276,210.375,276z M243.375,210.75c10.563,0,19.125,8.566,19.125,19.125 S253.938,249,243.375,249c-10.563,0-19.125-8.566-19.125-19.125S232.813,210.75,243.375,210.75z"/>
+                                </g>
+                            </svg>
+                        </div>
                     </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>

htdocs/openwebrx.js

@@ -1249,6 +1249,10 @@ function on_ws_recv(evt)
 					case "wsjt_message":
 					    update_wsjt_panel(json.value);
 					    break;
+					case "dial_frequencies":
+					    dial_frequencies = json.value;
+					    update_dial_button();
+					    break;
                     default:
                         console.warn('received message of unknown type: ' + json.type);
 		        }
@@ -1314,6 +1318,29 @@ function on_ws_recv(evt)
     }
 }
 
+var dial_frequencies = [];
+
+function find_dial_frequencies() {
+    var sdm = $("#openwebrx-secondary-demod-listbox")[0].value;
+    return dial_frequencies.filter(function(d){
+        return d.mode == sdm;
+    });
+}
+
+function update_dial_button() {
+    var available = find_dial_frequencies();
+    $("#openwebrx-secondary-demod-dial-button")[available.length ? "addClass" : "removeClass"]("available");
+}
+
+function dial_button_click() {
+    var available = find_dial_frequencies();
+    if (!available.length) return;
+    var frequency = available[0].frequency;
+    console.info(frequency);
+    demodulator_set_offset_frequency(0, frequency - center_freq);
+    $("#webrx-actual-freq").html(format_frequency("{x} MHz", frequency, 1e6, 4));
+}
+
 function update_metadata(meta) {
     if (meta.protocol) switch (meta.protocol) {
         case 'DMR':
@@ -2897,6 +2924,7 @@ function secondary_demod_listbox_changed()
             demodulator_digital_replace(sdm);
             break;
     }
+    update_dial_button();
 }
 
 function secondary_demod_listbox_update()