From 66a00ed8e4afd050f96b7f5187b2e119bad41e67 Mon Sep 17 00:00:00 2001 From: Frank Löffler Date: Mon, 27 Nov 2023 08:19:55 +0100 Subject: luci-mod-status: highlight primary 20 MHz channel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit As of now, channel analysis highlights the complete frequency spectrum of a base station (all channels used by the station, which might be more or fewer depending on channel bonding). This means in particular, that in the plot, a station at one main channel might look identical to another station at a different channel, because both might use the same bonded channel spectrum. One such example is two 80 MHz stations on channels 100 and 108 respectively: both will be plotted from channel 100 up to 115, as both will use those those 80 MHz. This is not incorrect, but it makes it more difficult to see which station is really where, as they might as well switch back to 20 or 40 MHz at times, or for different clients, and where they are then is currently not visible in the plot. This patch adds another trapez to the plot at the main 20 MHz channel of a station, with width 20 MHz, in case the station uses a wider general width. This is visible, because those polygons are partially transparent. It also moves the x-position of the label to the main channel of the station (which now is marked: this would have looked odd before). This does not highlight the primary 40 MHz channel for 80 MHz channels and wider. It should be possible be compute this from the knowledge in luci of the primary 20 MHz channel, the center channel and the bandwidth, assuming ac logic, but I decided against adding it, to keep the plot less cluttered. Signed-off-by: Frank Löffler --- .../resources/view/status/channel_analysis.js | 32 +++++++++++++++------- 1 file changed, 22 insertions(+), 10 deletions(-) (limited to 'modules') diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/channel_analysis.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/channel_analysis.js index 2ce22d5838..f7e349409a 100644 --- a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/channel_analysis.js +++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/channel_analysis.js @@ -63,38 +63,50 @@ return view.extend({ if (scanCache[res.bssid].graph == null) scanCache[res.bssid].graph = []; - channels.forEach(function(channel) { + function add_channel_to_graph(chan_analysis, res, scanCache, i, channel, channel_width, label) { var chan_offset = offset_tbl[channel], points = [ - (chan_offset-(step*channel_width))+','+height, + (chan_offset-(step*(channel_width )))+','+height, (chan_offset-(step*(channel_width-1)))+','+height_diff, (chan_offset+(step*(channel_width-1)))+','+height_diff, - (chan_offset+(step*(channel_width)))+','+height + (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 = document.createElementNS('http://www.w3.org/2000/svg', 'text'), + text = null, 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) + + 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 }; } - scanCache[res.bssid].graph[i].text.setAttribute('x', chan_offset-step); - scanCache[res.bssid].graph[i].text.setAttribute('y', height_diff - 2); + 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].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) { -- cgit From 008c1cf356e93711983fcb0afa37485deac47fe5 Mon Sep 17 00:00:00 2001 From: Frank Löffler Date: Sun, 10 Dec 2023 22:54:02 +0100 Subject: luci-mod-status: channel_analysis: use svg grad MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../luci-static/resources/svg/channel_analysis.svg | 17 ++++++ .../resources/view/status/channel_analysis.js | 61 ++++++++++++---------- 2 files changed, 50 insertions(+), 28 deletions(-) (limited to 'modules') diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/svg/channel_analysis.svg b/modules/luci-mod-status/htdocs/luci-static/resources/svg/channel_analysis.svg index 8f01075d0b..aca186402e 100644 --- a/modules/luci-mod-status/htdocs/luci-static/resources/svg/channel_analysis.svg +++ b/modules/luci-mod-status/htdocs/luci-static/resources/svg/channel_analysis.svg @@ -16,4 +16,21 @@ -90 dbm + + + + + + + + diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/channel_analysis.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/channel_analysis.js index f7e349409a..54e9054aa8 100644 --- a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/channel_analysis.js +++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/channel_analysis.js @@ -63,50 +63,55 @@ 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) { - var chan_offset = offset_tbl[channel], - points = [ - (chan_offset-(step*(channel_width )))+','+height, - (chan_offset-(step*(channel_width-1)))+','+height_diff, - (chan_offset+(step*(channel_width-1)))+','+height_diff, - (chan_offset+(step*(channel_width )))+','+height - ]; - + 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 = null, + 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'); - group.appendChild(line) + 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)); - 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) - } + group.appendChild(line) + 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); + 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, + (chan_offset-(step*(channel_width-1)))+','+height_diff, + (chan_offset+(step*(channel_width-1)))+','+height_diff, + (chan_offset+(step*(channel_width )))+','+height + ]; + + 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) { -- cgit