汉枫LPB100 定制网页说明【官方文档】

小雨点 · 发表于 2016-10-25 14:12:59

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;

}

</script>

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

var wifi_mode = "AP";

function init()

{

document.form_wmode.wifi_mode.value=wifi_mode;

}

</script>

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

3. HTML文件编写

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

4. 用例

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

页面如下：

HTML源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

/*<%

CONFIG_VAR(wifi_mode, CFG_WMODE);

%>*/

function init()

{

document.form_wmode.wifi_mode.value=wifi_mode;

}

</script>

<style>

.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;

}

</style>

</head>

<div class="lab_4" style="margin-left:120px">模式选择：

<option value="APSTA">AP+STA模式</option>

</select>

</div>

</div>

</form>

</div>

</body>

</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

var wifi_mode = "AP";

function init()

{

document.form_wmode.wifi_mode.value=wifi_mode;

}

</script>

<style>

.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;

}

</style>

</head>

<div class="lab_4" style="margin-left:120px">模式选择：

<option value="APSTA">AP+STA模式</option>

</select>

</div>

</div>

</form>

</div>

</body>

</html>

更新时间：2014.10.31

[资料] 汉枫LPB100 定制网页说明【官方文档】