luci-mod-status: channel_analysis: use svg grad

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>

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 8f01075d0b9255bc130600652763a217c39ec05c..aca186402e512d7905d8854e1bdf4f6fb990355c 100644 (file)
--- 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 @@
 
        <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>

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 f7e349409a7dba5a3b29d6bb4fc97a2037c79f89..54e9054aa8af584f2fcfc67b39ca3f0ffe59fb84 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,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) {