From a8674e605683bd31611113f9fbfbd6ec116e2234 Mon Sep 17 00:00:00 2001 From: Christian Marangi Date: Sun, 30 Jul 2023 23:03:20 +0200 Subject: [PATCH] luci-mod-status: improve channel graph for 5GHz radio Improve channel graph for 5GHz radio by using dotted lines to identify the intermediate channel, full line to identify the different channel band and bold line to identify the different section of the wifi channels. Signed-off-by: Christian Marangi (cherry picked from commit 69a8e4a98dd71ca7315684debc8e98eb273b03ef) --- .../resources/view/status/channel_analysis.js | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) 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 94b9eaa68d..d8a3393256 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 @@ -105,13 +105,13 @@ return view.extend({ step = (chan_graph.offsetWidth - 2) / columns, curr_offset = step; - function createGraphHLine(graph, pos) { + function createGraphHLine(graph, pos, width, dash) { var elem = document.createElementNS('http://www.w3.org/2000/svg', 'line'); elem.setAttribute('x1', pos); elem.setAttribute('y1', 0); elem.setAttribute('x2', pos); elem.setAttribute('y2', '100%'); - elem.setAttribute('style', 'stroke:black;stroke-width:0.1'); + elem.setAttribute('style', 'stroke:black;stroke-width:'+width+';stroke-dasharray:'+dash); graph.appendChild(elem); } @@ -126,19 +126,21 @@ return view.extend({ chan_analysis.col_width = step; - createGraphHLine(G,curr_offset); + createGraphHLine(G,curr_offset, 0.1, 1); for (var i=0; i< freq_tbl.length;i++) { var channel = freq_tbl[i] chan_analysis.offset_tbl[channel] = curr_offset+step; - createGraphHLine(G,curr_offset+step); - if (is5GHz) + if (is5GHz) { + createGraphHLine(G,curr_offset+step, 0.1, 3); if (channel < 100) createGraphText(G,curr_offset-(step/2), channel); else createGraphText(G,curr_offset-step, channel); - else + } else { + createGraphHLine(G,curr_offset+step, 0.1, 0); createGraphText(G,curr_offset+step, channel); + } curr_offset += step; if (is5GHz && freq_tbl[i+1]) { @@ -147,25 +149,28 @@ return view.extend({ if ((next_channel - channel) == 4) { for (var j=1; j < 4; j++) { chan_analysis.offset_tbl[channel+j] = curr_offset+step; - createGraphHLine(G,curr_offset+step); + if (j == 2) + createGraphHLine(G,curr_offset+step, 0.1, 0); + else + createGraphHLine(G,curr_offset+step, 0.1, 1); curr_offset += step; } } else { chan_analysis.offset_tbl[channel+1] = curr_offset+step; - createGraphHLine(G,curr_offset+step); + createGraphHLine(G,curr_offset+step, 0.1, 1); curr_offset += step; chan_analysis.offset_tbl[next_channel-2] = curr_offset+step; - createGraphHLine(G,curr_offset+step); + createGraphHLine(G,curr_offset+step, 0.5, 0); curr_offset += step; chan_analysis.offset_tbl[next_channel-1] = curr_offset+step; - createGraphHLine(G,curr_offset+step); + createGraphHLine(G,curr_offset+step, 0.1, 1); curr_offset += step; } } } - createGraphHLine(G,curr_offset+step); + createGraphHLine(G,curr_offset+step, 0.1, 1); chan_analysis.tab.addEventListener('cbi-tab-active', L.bind(function(ev) { this.active_tab = ev.detail.tab; -- 2.30.2