devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

OpenWrt Web GUI WIFI 设置/显示配置的 简单分析_openwrt的ac管理功能

作者：小丑西瓜9 | 2024-03-22 20:44:07

赞

踩

openwrt的ac管理功能

WIFI 技术从WIFI5 发展的 WIFI 6， 高通的QSDK 从SPF1 已经release SPF11.1 版本。当客户设置用WEB 页面配置wifi 工作的模式的时候，会发发现模式一直设置的不正确。做为高通AE 工程师，我们通常会建议客户使用uci 进行wifi 配置。但是web 设置的问题一直没有修正。

 

刚好有点时间抽空了解openwrt /qsdk的web 设置框架，修正了了这个设置显示问题。

目录

       1.LUCI 概述

       2 WIFI 设置的相关model和view

       3  AC和AX配置模式支持

  3.1增加对AC和AX信道的支持：

  3.2 增加 hw模式的支持： 

   ​3.3 增加带宽模式的支持 

  3.4 增加band 模式配置的支持

4. 测试和功能验证：

1.LUCI 概述

目前OPENWRT的显示采用 luci 架构，Luci 框架内基于 lua + uci 库编写了 CBI 框架 – CBI 框架是 Luci 的子框架。

CBI 框架加载入 uci 配置文件相应的 lua 模块，对于 HTTP GET 能够以 CBI 框架的运行逻辑将 UCI 配置文件转化渲染成用于 Web 前端显示的 HTML 做 HTTP Response；同样对 HTTP POST 也以 CBI 框架运行的逻辑将 form 表单修改写入到 UCI 配置文件中（和生效）。

LuCI是OpenWrt上的Web管理界面，LuCI采用了MVC三层架构，使用Lua脚本开发，所以开发LuCI的配置界面不需要编辑任何的Html代码，除非想自己单独去创建网页(View层)，否则我们基本上只需要修改Model层就可以了。

lucidir:/usr/lib/lua/luci

LuCI安装可通过您的网络服务器通过/cgi-bin/luci访问

可以参考 github：ModulesHowTo · openwrt/luci Wiki · GitHub

或官方http://luci.subsignal.org/trac/wiki/Documentation/ModulesHowTo

2 WIFI 设置的相关model和view

WIFI 设置的相关逻辑 都是 wifi.lua 中实现的。

/usr/lib/lua/luci/model/cbi/admin_network/wifi.lua

/usr/lib/lua/luci/view/cbi/wireless_modefreq.htm  

在wifi.lua 里 可以通过调用luci.log  ，实现log的信息输出：

  1. local log = require "luci.log"
  2. log.print("hugo debug")

下面的两个函数 主要完成 get/set uci配置文件的内容

function ch.cfgvalue(self, section) 

function ch.write(self, section ,value)

    1. ch = s:taboption("general", Value, "_mode_freq", '<br />'..translate("Operating frequency"))
    2.         ch.hwmodes = iw_modes                                                                          
    3.         ch.freqlist = iw.freqlist                                                                             
    4.         ch.template = "cbi/wireless_modefreq"                                                                      
    5.                                                                                                       
    6.         function ch.cfgvalue(self, section)                                                                                                
    7.                                                                           log.print("cfgvalue")                                                          
    8.         log.print(section)                                                            
    9.         hw =m:get(section,"hwmode")                                                       
    10.         ch = m:get(section,"channel")                                                  
    11.         ht = m:get(section,"htmode")                                                     
    12.         log.print(hw)
    13.         log.print(ht)
    14.         log.print(ch)                                                                     
    15.  
    16.                                                                                                
    17.                 return {                                                                       
    18.                         m:get(section, "hwmode") or "",                                       
    19.                         m:get(section, "channel") or "auto",                                        
    20.                         m:get(section, "htmode") or ""                                              
    21.                 }                                                                              
    22.         end                                               
    23.  
    24. function ch.formvalue(self, section)                                                        
    25.                 log.print("ch.formvalue")                                                              
    26.                                                                                                               
    27.                 log.print("hw_modes:")                                                                             
    28.                 value1 = m:formvalue(self:cbid(section) .. ".channle")                                             
    29.                 log.print(value1)                                                                                  
    30.                 value2 = m:formvalue(self:cbid(section) .. ".htmode")                                              
    31.                 log.print(value2)                                                                         
    32.                                                     
    33.                                                                                                
    34.                 log.print_r(hw_modes,5)                                                       
    35.                                                                                         
    36.                 return {                                                                            
    37.                         (hw_modes.ad and "11ad") or (m:formvalue(self:cbid(section) .. ".band") or (hw_modes.g and "11g" or "11a")),
    38.                         m:formvalue(self:cbid(section) .. ".channel") or "auto",                                                    
    39.                         m:formvalue(self:cbid(section) .. ".htmode") or ""                                                          
    40.                 }                                                                                                                   
    41.         end                                                                                                                         
    42.                                                                                                                                     
    43.         function ch.write(self, section, value)                                                                                     
    44.                                                                                                                                     
    45.                 log.print("ch.write--->")                                                                                           
    46.                 log.print(value[1],value[2],value[3])                                               
    47.                                                                                                
    48.                 m:set(section, "hwmode", value[1])                                             
    49.                 m:set(section, "channel", value[2])                                              
    50.                 m:set(section, "htmode", value[3])                                             
    51.         end                                      


taboption() 指定了该 Option 类在指定的 section->tab 下，并返回 option 实例。
option:write 方法重写定义了该方法的内容。write 方法在 post form 时被调用 。
m.uci:set, m.uci:delete 这些即使用 lua 的 uci 模块操作 。
 

在 wireless_modefreq.htm ，主要是通过 html 和 javascript 语言实现的。

 调试方式 可以使用 firefox 浏览器 进入debug 模式（F12），可以进行常规的代码调试。

 在代码添加 console.log 可以输出log

  1. 		console.log( "cbi init wifi ")
  2. 		console.log(id)
  3. 		console.log( mode)
  4. 		console.log(band)
  5. 		console.log(chan)
  6. 		console.log(bwdt)

简单的分析：

从wifi.lua 那里获得wifi band 的支持的 hwmode和 信道list。

  1. <script type="text/javascript">//<![CDATA[
  2.     var freqlist = <%= luci.http.write_json(self.freqlist) %>;
  3.     var hwmodes  = <%= luci.http.write_json(self.hwmodes) %>; 

 页面加载后会执行 cbi_init_wifi（id）

<script type="text/javascript">cbi_init_wifi('<%= cbid %>');</script>

点击mode 按钮,会执行 cbi_toggle_wifi_mode（），更新模式 的设置值

  1. <%:Mode%><br />
  2.     <select style="width:auto" id="<%= cbid %>.mode" name="<%= cbid %>.mode" onchange="cbi_toggle_wifi_mode('<%= cbid %>')"></select>

点击 band list,会执行 cbi_toggle_wifi_band（）更新band 的设置值

  1.     <%:Band%><br />
  2.     <select style="width:auto" id="<%= cbid %>.band" name="<%= cbid %>.band" onchange="cbi_toggle_wifi_band('<%= cbid %>')"></select>


点击 band list,会执行 cbi_toggle_wifi_band（）更新band 的设置值
 

  1.    <%:Channel%><br />
  2.     <select style="width:auto" id="<%= cbid %>.channel" name="<%= cbid %>.channel"></select>
  3. </label>

点击 htmode list,会执行 cbi_toggle_wifi_band（）更新band 的设置值
 

  1.  <%:Width%><br />
  2.     <select style="width:auto" id="<%= cbid %>.htmode" name="<%= cbid %>.htmode"></select>
  3. </label>

3  AC和AX配置模式支持

  

  3.1增加对AC和AX信道的支持：

  1. var channels = {
  2. 		'11g': [
  3. 			'auto', 'auto', true
  4. 		],
  5. 		'11a': [
  6. 			'auto', 'auto', true
  7. 		],
  8. 		'11ac': [
  9. 			'auto', 'auto', true
  10. 		],
  11. 		
  12. 		'11axa':[
  13. 			 'auto','auto',true
  14. 		],
  15. 		'11axg':[
  16. 			  'auto','auto',true
  17. 		]
  18. 	
  19. 	}

  3.2 增加 hw模式的支持： 

  1. 	var modes = [
  2. 		'', 'Legacy', true,
  3. 		'n', 'N', hwmodes.n,
  4. 		'ac', 'AC', hwmodes.ac,
  5. 		'ax', 'AX', true
  6. 	];

  

 3.3 增加带宽模式的支持 

  1. var htmodes = {
  2. 		'':   [
  3. 			'', '-', true
  4. 		],
  5. 		
  6. 		'n':  [
  7. 			'HT20', '20 MHz', true,
  8. 			'HT40', '40 MHz', true
  9. 		],
  10. 		'ac': [
  11. 			'HT20', '20 MHz', true,
  12. 			'HT40', '40 MHz', true,
  13. 			'HT80', '80 MHz', true,
  14. 			'HT160', '160 MHz', true
  15. 		]
  16. 		,
  17. 		'ax': [
  18. 	        	'HT80', '80 MHz', true,
  19. 			'HT160', '160 MHz', true
  20. 		]
  21. 	};

  3.4 增加band 模式配置的支持

  1. var bands = {
  2. 		'':   [
  3. 			'11g', '2.4 GHz', (channels['11g'].length > 3),
  4. 			'11a', '5 GHz', (channels['11a'].length > 3)
  5. 		],
  6. 		'n':  [
  7. 			'11g', '2.4 GHz', (channels['11g'].length > 3),
  8. 			'11a', '5 GHz', (channels['11a'].length > 3)
  9. 		],
  10. 		'ac': [
  11. 			'11a', '5 Ghz ', (channels['11a'].length > 3),
  12. 			'11ac','5 AC  ', (channels['11ac'].length >3)
  13. 		]
  14. 		 ,
  15. 		
  16. 		'ax': [
  17. 			'11axg', '2.4 Ghz' , (channels['11axg'].length > 3),
  18. 			'11axa', '5 Ghz' , (channels['11axa'].length > 3)   
  19. 		]
  20. 	};

3.5 hw mode 的判断和初始化

  1. var config_mode =  <%= luci.http.write_json(self.map:get(section, "hwmode")) %>
  2. 		
  3. 		if( /11axa|11axg/.test(config_mode))
  4. 			mode.value = 'ax';
  5. 		else if(/11ac/.test(config_mode))
  6. 			mode.value = 'ac';
  7. 		else if(/11a/.test(config_mode))
  8. 			mode.value = 'a';
  9. 		else if (/HT20|HT40|HT80|HT160/.test(<%= luci.http.write_json(self.map:get(section, "htmode")) %>))
  10. 			mode.value = 'ac';
  11. 		else if (/HT20|HT40/.test(<%= luci.http.write_json(self.map:get(section, "htmode")) %>))
  12. 			mode.value = 'n';
  13. 		else
  14. 			mode.value = '';

测试和功能验证：

修改后，要删除 平台上的  rm -fr /tmp/luci-*   生成的index文件。

浏览器的进行刷新就可以了 修改后的效果。

uci的配置如下：

  1. uci show wireless
  2. wireless.wifi0=wifi-device
  3. wireless.wifi0.type='qcawificfg80211'
  4. wireless.wifi0.macaddr='00:03:7f:12:1b:07'
  5. wireless.wifi0.channel='auto'
  6. wireless.wifi0.hwmode='11axa'
  7. wireless.wifi0.htmode='HT80'
  8. wireless.@wifi-iface[0]=wifi-iface
  9. wireless.@wifi-iface[0].device='wifi0'
  10. wireless.@wifi-iface[0].network='lan'
  11. wireless.@wifi-iface[0].mode='ap'
  12. wireless.@wifi-iface[0].ssid='OpenWrt'
  13. wireless.@wifi-iface[0].encryption='none'
  14. wireless.wifi1=wifi-device
  15. wireless.wifi1.type='qcawificfg80211'
  16. wireless.wifi1.channel='auto'
  17. wireless.wifi1.macaddr='00:03:7f:12:23:8f'
  18. wireless.wifi1.hwmode='11axg'
  19. wireless.wifi1.htmode='HT160'
  20. wireless.@wifi-iface[1]=wifi-iface
  21. wireless.@wifi-iface[1].device='wifi1'
  22. wireless.@wifi-iface[1].network='lan'
  23. wireless.@wifi-iface[1].mode='ap'
  24. wireless.@wifi-iface[1].ssid='OpenWrt'
  25. wireless.@wifi-iface[1].encryption='none'

 欢迎下载配套代码。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/290770
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号