Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-mod-status: channel_analysis: use svg grad

Browse source 
Instead of using a second, semitransparent quadliteral of the
same station color to highlight the main 20 MHz channel of a
station with a bandwidht wider than 20 MHz, use a semitransparent,
black svg gradient with the same shape and size.
This has the benefit that it is harder to mistake for a second,
overlain station.

The gradient is black because this way it can be reused for
all stations, instead of having to create a separate one for
each station color.

Signed-off-by: Frank Löffler <frank.loeffler@uni-jena.de>
This commit is contained in:
Frank Löffler 2023-12-10 22:54:02 +01:00
parent 66a00ed8e4
commit 008c1cf356
No known key found for this signature in database
GPG key ID: E933A62A7E239F64
2 changed files with 54 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
modules/luci-mod-status/htdocs/luci-static/resources/svg/channel_analysis.svg
View file

@ -16,4 +16,21 @@
<line x1="0" y1="90%" x2="100%" y2="90%" style="stroke:black;stroke-width:0.1" />
<text id="label_10" x="10" y="89%" style="fill:#eee; font-size:9pt; font-family:sans-serif; text-shadow:1px 1px 1px #000">-90 dbm</text>
<defs>
<linearGradient id="GradientVerticalCenteredBlack">
<stop class="stopinvis" offset="0%" />
<stop class="stopblack" offset="50%" />
<stop class="stopinvis" offset="100%" />
</linearGradient>
</defs>
<style>
.stopinvis {
stop-color: "transparent";
stop-opacity: 0;
}
.stopblack {
stop-color: "black";
stop-opacity: .1;
}
</style>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

69
modules/luci-mod-status/htdocs/luci-static/resources/view/status/channel_analysis.js
View file

@ -63,7 +63,41 @@ return view.extend({
if (scanCache[res.bssid].graph == null)
scanCache[res.bssid].graph = [];
function add_channel_to_graph(chan_analysis, res, scanCache, i, channel, channel_width, label) {
channels.forEach(function(channel) {
if (scanCache[res.bssid].graph[i] == null) {
var group = document.createElementNS('http://www.w3.org/2000/svg', 'g'),
line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline'),
text = document.createElementNS('http://www.w3.org/2000/svg', 'text'),
color = scanCache[res.bssid].color;
line.setAttribute('style', 'fill:'+color+'4f'+';stroke:'+color+';stroke-width:0.5');
text.setAttribute('style', 'fill:'+color+';font-size:9pt; font-family:sans-serif; text-shadow:1px 1px 1px #000');
text.appendChild(document.createTextNode(res.ssid || res.bssid));
group.appendChild(line)
group.appendChild(text)
chan_analysis.graph.firstElementChild.appendChild(group);
scanCache[res.bssid].graph[i] = { group : group, line : line, text : text };
}
if (channel_width > 2) {
if (!("main" in scanCache[res.bssid].graph[i])) {
var main = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
main.setAttribute('style', 'fill:url(#GradientVerticalCenteredBlack)');
scanCache[res.bssid].graph[i].group.appendChild(main)
chan_analysis.graph.firstElementChild.lastElementChild.appendChild(main);
scanCache[res.bssid].graph[i]["main"] = main;
}
var main_offset = offset_tbl[res.channel],
points = [
(main_offset-(step*(2 )))+','+height,
(main_offset-(step*(2-1)))+','+height_diff,
(main_offset+(step*(2-1)))+','+height_diff,
(main_offset+(step*(2 )))+','+height
];
scanCache[res.bssid].graph[i].main.setAttribute('points', points);
}
var chan_offset = offset_tbl[channel],
points = [
(chan_offset-(step*(channel_width )))+','+height,
@ -72,41 +106,12 @@ return view.extend({
(chan_offset+(step*(channel_width )))+','+height
];
if (scanCache[res.bssid].graph[i] == null) {
var group = document.createElementNS('http://www.w3.org/2000/svg', 'g'),
line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline'),
text = null,
color = scanCache[res.bssid].color;
line.setAttribute('style', 'fill:'+color+'4f'+';stroke:'+color+';stroke-width:0.5');
group.appendChild(line)
if (label != null) {
text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('style', 'fill:'+color+';font-size:9pt; font-family:sans-serif; text-shadow:1px 1px 1px #000');
text.appendChild(document.createTextNode(label));
group.appendChild(text)
}
chan_analysis.graph.firstElementChild.appendChild(group);
scanCache[res.bssid].graph[i] = { group : group, line : line, text : text };
}
if (scanCache[res.bssid].graph[i].text != null) {
scanCache[res.bssid].graph[i].text.setAttribute('x', offset_tbl[res.channel]-step);
scanCache[res.bssid].graph[i].text.setAttribute('y', height_diff - 2);
}
scanCache[res.bssid].graph[i].text.setAttribute('x', offset_tbl[res.channel]-step);
scanCache[res.bssid].graph[i].text.setAttribute('y', height_diff - 2);
scanCache[res.bssid].graph[i].line.setAttribute('points', points);
scanCache[res.bssid].graph[i].group.style.zIndex = res.signal*-1;
scanCache[res.bssid].graph[i].group.style.opacity = res.stale ? '0.5' : null;
}
channels.forEach(function(channel) {
add_channel_to_graph(chan_analysis, res, scanCache, i, channel, channel_width, res.ssid || res.bssid);
})
if (channel_width > 2) {
add_channel_to_graph(chan_analysis, res, scanCache, i+1, res.channel, 2, null);
}
},
create_channel_graph: function(chan_analysis, freq_tbl, band) {