luci-mod-status: highlight primary 20 MHz channel

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 <frank.loeffler@uni-jena.de>

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 2ce22d5838d09151f3c8029100d869cb5a23cbe9..f7e349409a7dba5a3b29d6bb4fc97a2037c79f89 100644 (file)
--- 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) {