add bookmarks display

htdocs/css/openwebrx.css

@@ -160,6 +160,51 @@ input[type=range]:focus::-ms-fill-upper
 	position: relative;
 }
 
+#openwebrx-bookmarks-container
+{
+    height: 25px;
+    background-color: #444;
+    overflow: hidden;
+    position: relative;
+}
+
+#openwebrx-bookmarks-container .bookmark-locator {
+    display: inline-block;
+    position: absolute;
+    bottom: 0;
+}
+
+#openwebrx-bookmarks-container .bookmark {
+    font-size: 10pt;
+    background-color: #FFFF00;
+    border: 1px solid #000;
+    border-radius: 5px;
+    padding: 2px 5px;
+    cursor: pointer;
+
+    position: absolute;
+    bottom: 5px;
+    transform: translate(-50%, 0);
+}
+
+#openwebrx-bookmarks-container .bookmark:hover {
+    z-index: 11;
+}
+
+#openwebrx-bookmarks-container .bookmark:after {
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 50%;
+	width: 0;
+	height: 0;
+	border: 5px solid transparent;
+	border-top-color: #FFFF00;
+	border-bottom: 0;
+	margin-left: -5px;
+	margin-bottom: -5px;
+}
+
 #webrx-canvas-container
 {
 	/*background-image:url('../gfx/openwebrx-blank-background-1.jpg');*/

htdocs/index.html

@@ -35,6 +35,7 @@
 <div id="webrx-page-container">
     ${header}
     <div id="webrx-main-container">
+        <div id="openwebrx-bookmarks-container"></div>
         <div id="openwebrx-scale-container">
             <canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas>
         </div>

htdocs/openwebrx.js

@@ -904,6 +904,7 @@ function resize_scale()
 	scale_ctx.canvas.width  = window.innerWidth;
 	scale_ctx.canvas.height = 47;
 	mkscale();
+	position_bookmarks();
 }
 
 function canvas_mouseover(evt)
@@ -992,6 +993,7 @@ function canvas_mousemove(evt)
 			canvas_drag_last_x=evt.pageX;
 			canvas_drag_last_y=evt.pageY;
 			mkscale();
+			position_bookmarks();
 		}
 	}
 	else e("webrx-mouse-freq").innerHTML=format_frequency("{x} MHz",canvas_get_frequency(relativeX),1e6,4);
@@ -1092,6 +1094,7 @@ function zoom_step(out, where, onscreen)
 	//console.log(zoom_center_where, zoom_center_rel, where);
 	resize_canvases(true);
 	mkscale();
+	position_bookmarks();
 }
 
 function zoom_set(level)
@@ -1105,6 +1108,7 @@ function zoom_set(level)
 	console.log(zoom_center_where, zoom_center_rel, -canvases[0].offsetLeft+canvas_container.clientWidth/2);
 	resize_canvases(true);
 	mkscale();
+	position_bookmarks();
 }
 
 function zoom_calc()
@@ -1256,6 +1260,9 @@ function on_ws_recv(evt)
 					case "aprs_data":
 					    update_packet_panel(json.value);
 					    break;
+					case "bookmarks":
+					    update_bookmarks(json.value);
+					    break;
                     default:
                         console.warn('received message of unknown type: ' + json.type);
 		        }
@@ -1321,6 +1328,24 @@ function on_ws_recv(evt)
     }
 }
 
+function update_bookmarks(bookmarks) {
+    $container = $('#openwebrx-bookmarks-container');
+    $container.empty();
+    bookmarks.forEach(function(b){
+        $bookmark = $('<div class="bookmark-locator"><div class="bookmark">' + b.name + '</div></div>');
+        $bookmark.data(b);
+        $container.append($bookmark);
+    });
+    position_bookmarks();
+}
+
+function position_bookmarks() {
+    range = get_visible_freq_range();
+    $('#openwebrx-bookmarks-container .bookmark-locator').each(function(){
+        $(this).css('left', scale_px_from_freq($(this).data('frequency'), range));
+    });
+}
+
 var dial_frequencies = [];
 
 function find_dial_frequencies() {