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

re-package code for meta panels into classes

This commit is contained in:
Jakob Ketterl 2021-01-16 19:40:22 +01:00
parent 13215960c4
commit 41f9407024
6 changed files with 156 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
htdocs/css/openwebrx.css
View File

@ -908,10 +908,15 @@ img.openwebrx-mirror-img
border-color: Red;
}
.openwebrx-meta-panel {
display: flex;
flex-direction: row;
}
.openwebrx-meta-slot {
flex: 1;
width: 145px;
height: 196px;
float: left;
margin-right: 10px;
background-color: #676767;

42
htdocs/index.html
View File

@ -65,32 +65,28 @@
<div class="openwebrx-panel openwebrx-message-panel" id="openwebrx-panel-packet-message" style="display: none; width: 619px;" data-panel-name="aprs-message"></div>
<div class="openwebrx-panel openwebrx-message-panel" id="openwebrx-panel-pocsag-message" style="display: none; width: 619px;" data-panel-name="pocsag-message"></div>
<div class="openwebrx-panel openwebrx-meta-panel" id="openwebrx-panel-metadata-ysf" style="display: none;" data-panel-name="metadata-ysf">
<div class="openwebrx-meta-frame">
<div class="openwebrx-meta-slot">
<div class="openwebrx-ysf-mode openwebrx-meta-autoclear"></div>
<div class="openwebrx-meta-user-image"></div>
<div class="openwebrx-ysf-source openwebrx-meta-autoclear"></div>
<div class="openwebrx-ysf-up openwebrx-meta-autoclear"></div>
<div class="openwebrx-ysf-down openwebrx-meta-autoclear"></div>
</div>
<div class="openwebrx-meta-slot">
<div class="openwebrx-ysf-mode openwebrx-meta-autoclear"></div>
<div class="openwebrx-meta-user-image"></div>
<div class="openwebrx-ysf-source openwebrx-meta-autoclear"></div>
<div class="openwebrx-ysf-up openwebrx-meta-autoclear"></div>
<div class="openwebrx-ysf-down openwebrx-meta-autoclear"></div>
</div>
</div>
<div class="openwebrx-panel openwebrx-meta-panel" id="openwebrx-panel-metadata-dmr" style="display: none;" data-panel-name="metadata-dmr">
<div class="openwebrx-meta-frame">
<div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
<div class="openwebrx-dmr-slot">Timeslot 1</div>
<div class="openwebrx-meta-user-image"></div>
<div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
</div>
<div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
<div class="openwebrx-dmr-slot">Timeslot 2</div>
<div class="openwebrx-meta-user-image"></div>
<div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
</div>
<div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
<div class="openwebrx-dmr-slot">Timeslot 1</div>
<div class="openwebrx-meta-user-image"></div>
<div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
</div>
<div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
<div class="openwebrx-dmr-slot">Timeslot 2</div>
<div class="openwebrx-meta-user-image"></div>
<div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
</div>
</div>
<div class="openwebrx-panel" id="openwebrx-panel-log" data-panel-name="debug" style="width: 619px;">

7
htdocs/lib/DemodulatorPanel.js
View File

@ -165,10 +165,13 @@ DemodulatorPanel.prototype.updatePanels = function() {
modulation = this.getDemodulator().get_modulation();
var showing = 'openwebrx-panel-metadata-' + modulation;
$(".openwebrx-meta-panel").each(function (_, p) {
var metaPanels = $(".openwebrx-meta-panel");
metaPanels.each(function (_, p) {
toggle_panel(p.id, p.id === showing);
});
clear_metadata();
metaPanels.metaPanel().each(function() {
this.clear();
});
};
DemodulatorPanel.prototype.getDemodulator = function() {

119
htdocs/lib/MetaPanel.js Normal file
View File

@ -0,0 +1,119 @@
function MetaPanel(el) {
this.el = el;
this.modes = [];
}
MetaPanel.prototype.update = function(data) {
};
MetaPanel.prototype.isSupported = function(data) {
return this.modes.includes(data.protocol);
};
MetaPanel.prototype.clear = function() {
this.el.find(".openwebrx-meta-autoclear").text("");
this.el.find(".openwebrx-meta-slot").removeClass("active").removeClass("sync");
};
function DmrMetaSlot(el) {
this.el = $(el);
}
DmrMetaSlot.prototype.update = function(data) {
var id = "";
var name = "";
var target = "";
var group = false;
this.el[data['sync'] ? "addClass" : "removeClass"]("sync");
if (data['sync'] && data['sync'] === "voice") {
id = (data['additional'] && data['additional']['callsign']) || data['source'] || "";
name = (data['additional'] && data['additional']['fname']) || "";
if (data['type'] === "group") {
target = "Talkgroup: ";
group = true;
}
if (data['type'] === "direct") target = "Direct: ";
target += data['target'] || "";
this.el.addClass("active");
} else {
this.el.removeClass("active");
}
this.el.find(".openwebrx-dmr-id").text(id);
this.el.find(".openwebrx-dmr-name").text(name);
this.el.find(".openwebrx-dmr-target").text(target);
this.el.find(".openwebrx-meta-user-image")[group ? "addClass" : "removeClass"]("group");
}
function DmrMetaPanel(el) {
MetaPanel.call(this, el);
this.modes = ['DMR'];
this.slots = this.el.find('.openwebrx-meta-slot').toArray().map(function(el){
return new DmrMetaSlot(el);
});
}
DmrMetaPanel.prototype = new MetaPanel();
DmrMetaPanel.prototype.update = function(data) {
if (!this.isSupported(data)) return;
if (data['slot']) {
var slot = this.slots[data['slot']];
slot.update(data);
} else {
this.clear();
}
}
DmrMetaPanel.prototype.clear = function() {
MetaPanel.prototype.clear.call(this);
this.el.find(".openwebrx-dmr-timeslot-panel").removeClass("muted");
};
function YsfMetaPanel(el) {
MetaPanel.call(this, el);
this.modes = ['YSF'];
}
YsfMetaPanel.prototype = new MetaPanel();
YsfMetaPanel.prototype.update = function(data) {
if (!this.isSupported(data)) return;
var mode = " ";
var source = "";
var up = "";
var down = "";
if (data['mode'] && data['mode'] !== "") {
mode = "Mode: " + data['mode'];
source = data['source'] || "";
if (data['lat'] && data['lon'] && data['source']) {
source = "<a class=\"openwebrx-maps-pin\" href=\"map?callsign=" + data['source'] + "\" target=\"_blank\"></a>" + source;
}
up = data['up'] ? "Up: " + data['up'] : "";
down = data['down'] ? "Down: " + data['down'] : "";
this.el.find(".openwebrx-meta-slot").addClass("active");
} else {
this.el.find(".openwebrx-meta-slot").removeClass("active");
}
this.el.find(".openwebrx-ysf-mode").text(mode);
this.el.find(".openwebrx-ysf-source").html(source);
this.el.find(".openwebrx-ysf-up").text(up);
this.el.find(".openwebrx-ysf-down").text(down);
}
MetaPanel.types = {
dmr: DmrMetaPanel,
ysf: YsfMetaPanel
};
$.fn.metaPanel = function() {
return this.map(function() {
var $self = $(this);
if (!$self.data('metapanel')) {
var matches = /^openwebrx-panel-metadata-([a-z]+)$/.exec($self.prop('id'));
var constructor = matches && MetaPanel.types[matches[1]] || MetaPanel;
$self.data('metapanel', new constructor($self));
}
return $self.data('metapanel');
});
};

77
htdocs/openwebrx.js
View File

@ -790,7 +790,9 @@ function on_ws_recv(evt) {
Modes.setFeatures(json['value']);
break;
case "metadata":
update_metadata(json['value']);
$('.openwebrx-meta-panel').metaPanel().each(function(){
this.update(json['value']);
});
break;
case "js8_message":
$("#openwebrx-panel-js8-message").js8().pushMessage(json['value']);
@ -900,75 +902,6 @@ function on_ws_recv(evt) {
}
}
function update_metadata(meta) {
var el;
if (meta['protocol']) switch (meta['protocol']) {
case 'DMR':
if (meta['slot']) {
el = $("#openwebrx-panel-metadata-dmr").find(".openwebrx-dmr-timeslot-panel").get(meta['slot']);
var id = "";
var name = "";
var target = "";
var group = false;
$(el)[meta['sync'] ? "addClass" : "removeClass"]("sync");
if (meta['sync'] && meta['sync'] === "voice") {
id = (meta['additional'] && meta['additional']['callsign']) || meta['source'] || "";
name = (meta['additional'] && meta['additional']['fname']) || "";
if (meta['type'] === "group") {
target = "Talkgroup: ";
group = true;
}
if (meta['type'] === "direct") target = "Direct: ";
target += meta['target'] || "";
$(el).addClass("active");
} else {
$(el).removeClass("active");
}
$(el).find(".openwebrx-dmr-id").text(id);
$(el).find(".openwebrx-dmr-name").text(name);
$(el).find(".openwebrx-dmr-target").text(target);
$(el).find(".openwebrx-meta-user-image")[group ? "addClass" : "removeClass"]("group");
} else {
clear_metadata();
}
break;
case 'YSF':
el = $("#openwebrx-panel-metadata-ysf");
var mode = " ";
var source = "";
var up = "";
var down = "";
if (meta['mode'] && meta['mode'] !== "") {
mode = "Mode: " + meta['mode'];
source = meta['source'] || "";
if (meta['lat'] && meta['lon'] && meta['source']) {
source = "<a class=\"openwebrx-maps-pin\" href=\"map?callsign=" + meta['source'] + "\" target=\"_blank\"></a>" + source;
}
up = meta['up'] ? "Up: " + meta['up'] : "";
down = meta['down'] ? "Down: " + meta['down'] : "";
$(el).find(".openwebrx-meta-slot").addClass("active");
} else {
$(el).find(".openwebrx-meta-slot").removeClass("active");
}
$(el).find(".openwebrx-ysf-mode").text(mode);
$(el).find(".openwebrx-ysf-source").html(source);
$(el).find(".openwebrx-ysf-up").text(up);
$(el).find(".openwebrx-ysf-down").text(down);
break;
} else {
clear_metadata();
}
}
function clear_metadata() {
$(".openwebrx-meta-panel .openwebrx-meta-autoclear").text("");
$(".openwebrx-meta-slot").removeClass("active").removeClass("sync");
$(".openwebrx-dmr-timeslot-panel").removeClass("muted");
}
var waterfall_measure_minmax_now = false;
var waterfall_measure_minmax_continuous = false;
@ -1301,6 +1234,8 @@ function digimodes_init() {
$(e.currentTarget).toggleClass("muted");
update_dmr_timeslot_filtering();
});
$('.openwebrx-meta-panel').metaPanel();
}
function update_dmr_timeslot_filtering() {
@ -1348,7 +1283,7 @@ function toggle_panel(what, on) {
item.style.transitionProperty = 'transform';
} else {
item.movement = 'expand';
item.style.display = 'block';
item.style.display = null;
setTimeout(function(){
item.style.transitionProperty = 'transform';
item.style.transform = 'perspective(600px) rotateX(0deg)';

1
owrx/controllers/assets.py
View File

@ -129,6 +129,7 @@ class CompiledAssetsController(GzipMixin, ModificationAwareController):
"lib/MessagePanel.js",
"lib/Js8Threads.js",
"lib/Modes.js",
"lib/MetaPanel.js",
],
"map.js": [
"lib/jquery-3.2.1.min.js",