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,7 +63,41 @@ 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) { + 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 = 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'); + 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) + + chan_analysis.graph.firstElementChild.appendChild(group); + scanCache[res.bssid].graph[i] = { group : group, line : line, text : text }; + } + 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, @@ -72,41 +106,12 @@ return view.extend({ (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 = null, - color = scanCache[res.bssid].color; - - line.setAttribute('style', 'fill:'+color+'4f'+';stroke:'+color+';stroke-width:0.5'); - group.appendChild(line) - - 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 }; - } - - 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].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) {