lpb.wifi index.php,汉枫LPB100 定制网页说明【官方文档】

HF-LPB100 定制网页说明

HF-LPB100模块支持自由修改定制网页，网页定制规则具体如下：

1. HTML文件命名规则

中文网页以 “_cn” 结尾，英文网页以 “_en” 结尾，如：index_cn.html、index_en.html。编写好的html文件通过使用LPB_WEB_Tools.exe工具生成有效bin文件烧写进HF-LPB模块即可。

2.        参数获取规则

网页文件中通过动态区传参来获取和设置HF-LPB模块中的参数，请在每个页面的< script>标签中加入如下代码：

/*

CONFIG_VAR(wifi_mode, CFG_WMODE);

%>*/

function init()

{

document.form_wmode.wifi_mode.value=wifi_mode;

}

当打开页面时，返回页面内容为：

var wifi_mode = "AP";

function init()

{

document.form_wmode.wifi_mode.value=wifi_mode;

}

wifi_mode为页面中的一个变量，可以自由定义，CFG_WMODE是汉枫定义的动态变量名，表示工作模式包括AP、STA、APSTA，可以根据“定制网页CONFIG列表.xls”文件获取所有参数对应的动态变量名及其值的含义。

3.        HTML文件编写

HTML文件编写规则与普通的HTML完全相同，但是需要把JS放在同一页面的< script >标签中，CSS放在< style >标签中。

4.        用例

下面以“模式设置页面”为例：

页面如下：

定制网页.png (51.77 KB, 下载次数: 7)

2016-10-25 14:11 上传

HTML源码：

*******此处写需要获取的变量值，以动态区获取：********

/*

CONFIG_VAR(wifi_mode, CFG_WMODE);

%>*/

function init()

{

document.form_wmode.wifi_mode.value=wifi_mode;

}

.div_c

{

margin-left:50px;

margin-right:50px;

margin-top:50px;

margin-bottom:50px;

}

.w_s15_b

{

color:White;

font-size:15px;

font-weight:bold;

}

.sp_120

{

width:10px;

height:120px;

}

.lab_4

{

margin-left:70px;

margin-right:50px;

color:white;

font-size:13px;

}

.sp_20

{

height:20px;

width:500px;

}

.tr

{

text-align:center;

}

.in_body

{

margin-top:0px;

margin-left:0px;

margin-right:0px;

margin-bottom:0px;

background-color:transparent;

}

.btn

{

width:66px;

height:27px;

border-style:none;

border-radius:3px 3px 3px 3px;

font-size:14px;

color:#0163AC;

cursor:pointer;

}

模式选择

模式选择：

AP+STA模式

AP 模式

STA 模式

通过模块内嵌的WEB服务器解析后的页面代码如下：

*******根据动态区获取相应的变量值********

var wifi_mode = "AP";

function init()

{

document.form_wmode.wifi_mode.value=wifi_mode;

}

.div_c

{

margin-left:50px;

margin-right:50px;

margin-top:50px;

margin-bottom:50px;

}

.w_s15_b

{

color:White;

font-size:15px;

font-weight:bold;

}

.sp_120

{

width:10px;

height:120px;

}

.lab_4

{

margin-left:70px;

margin-right:50px;

color:white;

font-size:13px;

}

.sp_20

{

height:20px;

width:500px;

}

.tr

{

text-align:center;

}

.in_body

{

margin-top:0px;

margin-left:0px;

margin-right:0px;

margin-bottom:0px;

background-color:transparent;

}

.btn

{

width:66px;

height:27px;

border-style:none;

border-radius:3px 3px 3px 3px;

font-size:14px;

color:#0163AC;

cursor:pointer;

}

模式选择

模式选择：

AP+STA模式

AP 模式

STA 模式

更新时间：2014.10.31