From 008c1cf356e93711983fcb0afa37485deac47fe5 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Frank=20L=C3=B6ffler?= Date: Sun, 10 Dec 2023 22:54:02 +0100 Subject: [PATCH] luci-mod-status: channel_analysis: use svg grad MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 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 --- .../resources/svg/channel_analysis.svg | 17 ++++++ .../resources/view/status/channel_analysis.js | 61 ++++++++++--------- 2 files changed, 50 insertions(+), 28 deletions(-) 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) { -- 2.30.2