joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add option to select coloring by mode, too

Browse Source
This commit is contained in:
Jakob Ketterl 2019-07-28 16:17:23 +02:00
parent 30d8b1327b
commit ff98b172c4
3 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
htdocs/css/map.css
View File

@ -47,3 +47,9 @@ ul {
height: 20px; height: 20px;
margin-right: 10px; margin-right: 10px;
} }
.openwebrx-map-legend select {
background-color: #FFF;
border-color: #DDD;
padding: 5px;
}

9
htdocs/map.html
View File

@ -12,6 +12,13 @@
<body> <body>
${header} ${header}
<div class="openwebrx-map"></div> <div class="openwebrx-map"></div>
<div class="openwebrx-map-legend"><h3>Colors</h3><div class="content"></div></div> <div class="openwebrx-map-legend">
<h3>Colors</h3>
<select id="openwebrx-map-colormode">
<option value="byband" selected="selected">By Band</option>
<option value="bymode">By Mode</option>
</select>
<div class="content"></div>
</div>
</body> </body>
</html> </html>

24
htdocs/map.js
View File

@ -52,7 +52,7 @@
// when the color palette changes, update all grid squares with new color // when the color palette changes, update all grid squares with new color
var reColor = function() { var reColor = function() {
$.each(rectangles, function(_, r) { $.each(rectangles, function(_, r) {
var color = getColor(r.band); var color = getColor(colorAccessor(r));
r.setOptions({ r.setOptions({
strokeColor: color, strokeColor: color,
fillColor: color fillColor: color
@ -60,6 +60,25 @@
}); });
} }
var colorMode = 'byband';
var colorAccessor = function(r) {
switch (colorMode) {
case 'byband':
return r.band;
case 'bymode':
return r.mode;
}
};
$(function(){
$('#openwebrx-map-colormode').on('change', function(){
colorMode = $(this).val();
colorKeys = {};
reColor();
updateLegend();
});
});
var updateLegend = function() { var updateLegend = function() {
var lis = $.map(colorKeys, function(value, key) { var lis = $.map(colorKeys, function(value, key) {
return '<li class="square"><span class="illustration" style="background-color:' + value + ';"></span>' + key + '</li>'; return '<li class="square"><span class="illustration" style="background-color:' + value + ';"></span>' + key + '</li>';
@ -109,7 +128,8 @@
var lon = (loc.charCodeAt(0) - 65 - 9) * 20 + Number(loc[2]) * 2; var lon = (loc.charCodeAt(0) - 65 - 9) * 20 + Number(loc[2]) * 2;
var center = new google.maps.LatLng({lat: lat + .5, lng: lon + 1}); var center = new google.maps.LatLng({lat: lat + .5, lng: lon + 1});
var rectangle; var rectangle;
var color = getColor(update.band); // the accessor is designed to work on the rectangle... but it should work on the update object, too
var color = getColor(colorAccessor(update));
if (rectangles[update.callsign]) { if (rectangles[update.callsign]) {
rectangle = rectangles[update.callsign]; rectangle = rectangles[update.callsign];
} else { } else {