网络音响设备HTTP服务器,HTML的IP输入文本框
简介
最近根据做了一个网络音箱,根据经理要求要在音箱中做个可配置设备参数的网站服务器。于是国庆期间别人到处浪,老夫只能在家干。经过这几天的学习,什么JavaScript,css,HTML5都做了稍微的了解,虽然后原来也做个这样的服务器,但是难看到要死。了解前端的三个技术的基本技术和用法后自己写了一个配置面,比较简单,但还是有一些用法挺有意思,因此记录一下。如果有需要的看官可以在文章末尾链接下载
硬件平台
正点原子:STM32F407探索者开发板
使用硬件描述:STM32F407ZGT6,LAN8720,SPIFLASH(W25Q128)
使用到的组件:LWIP,Fatfs,
说明:W25Q128+Fatfs用于保存设备信息(项目要求有很多信息要保存,本文demo只是用来保存设备参数信息)
网页页面展示
以上为最终的结果。
网页的编写
先用notepad工具编写好网页,然后再将页面内容复制到代码中,对于一些特定符号需要用’'符号标识。具体入结果入下图。
一些比较有意思的用法
由于服务器功能比较简单,因此在STM32程序中自己编写了一个页面申请规则,然后将页面的以及http请求名称进行注册既可。
代码入下:
/*
* 页面注册结构体,用于服务器功能所以页面使用
*/
typedef struct Webpage_Reg{
const char *Name; // 浏览器申请页面的名称
const char *page; // 页面的html数据
uint8_t type; // 页面类型
}Webpage_Reg;
static const struct Webpage_Reg Wevpage[] ={ // 向http服务器功能注册页面
{"/index.html",index,PTYPE_HTML}, // 页面,实际页面html数据,页面类型
{"/style.css",style,PTYPE_CSS},
{"/parameter.html",parameter,PTYPE_HTML},
{"/loginset.html",loginset,PTYPE_HTML},
{"/setStyle.css",setStyle,PTYPE_CSS},
{"/useFunJs.js",useFunJs,PTYPE_HTML},
{NULL,NULL,0}
};
在HTML中利用正则表达式然后text只能输入IP地址格式的文本。同时在提交时IP地址类型的文本框有格式不对时会在文本末尾提示错误。如图:
以上功能的一些关键代码
JavaScript代码
function ipKeyPress(obj){ // 设置IP地址框只允许输入IP地址类型的HTML
var old = obj.value;
obj.value=obj.value.replace(/[^\d|.]/g,'');
var re1=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
var re2=/^(\d+)\.(\d+)\.(\d+)\.$/;
var re3=/^(\d+)\.(\d+)\.(\d+)$/;
var re4=/^(\d+)\.(\d+)\.$/;
var re5=/^(\d+)\.(\d+)$/;
var re6=/^(\d+)\.$/;
var re7=/^(\d+)$/;
var old = obj.getAttribute("defdat");
if(re1.test(obj.value)){if(RegExp.$1>255||RegExp.$2>255||RegExp.$3>255||RegExp.$4>255)obj.value = old;
}else if(re2.test(obj.value)||re3.test(obj.value)){if(RegExp.$1>255||RegExp.$2>255||RegExp.$3>255)obj.value = old;
}else if(re4.test(obj.value)||re5.test(obj.value)){if(RegExp.$1>255||RegExp.$2>255)obj.value = old;
}else if(re6.test(obj.value)||re7.test(obj.value)){if(RegExp.$1>255)obj.value = old;
}else if(obj.value!=""){obj.value = old;}
if(re1.test($('txtIp').value)){$('IpError').innerText = '';}
if(re1.test($('txtSub').value)){$('subError').innerText = '';}
if(re1.test($('txtGw').value)){$('gwError').innerText = '';}
};
function check_parameter(){ // 提交表单时检测输入IP地址框是否正确
var flag = true;
var re1=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
if(re1.test($('txtIp').value)==false){$('IpError').innerText = '错误!';flag=false;}
if(re1.test($('txtSub').value)==false){$('subError').innerText = '错误!';flag=false;}
if(re1.test($('txtGw').value)==false){$('gwError').innerText = '错误!';flag=false;}
return flag;
}
HTML代码
<form id='from1' method='POST' action='DevConfig.cgi' enctype='multipart/form-data' onsubmit="return check_parameter()">
<p style="text-indent:140px;">
<label for='txtName'> 设备名称:</label>
<input type='text' id='txtName' name='Name' size='32'/>
</p>
<p style="margin:5px 300px;"><label><input type="checkbox" id="CheckboxDHCP" onclick="CheckboxChange()"/>DHCP功能 </label></p>
<p style="text-indent:140px;">
<label for='txtMac' style="height:18px;">MAC地址:</label>
<input type='text' id='txtMac' name='mac' size='16' disabled='disabled'/>
</p>
<p style="text-indent:169px; aline-top:5px;">
<label for='txtIp'>IP地址:</label>
<input type='text' id='txtIp' name='ip' size='16' data="" onkeyup="ipKeyPress(this)" onkeypress="TextKeyPress(this)"/>
<label class="Elable" id = "IpError"></label>
</p>
<p style="text-indent:147px;">
<label for='txtSub'>子网掩码:</label>
<input type='text' id='txtSub' name='sub' size='16' data="" onkeyup="ipKeyPress(this)" onkeypress="TextKeyPress(this)"/>
<label class="Elable" id = "subError"></label>
</p>
<p style="text-indent:147px;">
<label for='txtGw'>默认网关:</label>
<input type='text' id='txtGw' name='gw' size='16' data="" onkeyup="ipKeyPress(this)" onkeypress="TextKeyPress(this)"/>
<label class="Elable" id = "gwError"></label>
</p>
<p>  </p>
<p>
<label>通讯模式选择:</label>
<label><input name="cast" id="UnicastRadio" type="radio" size='16'/>单播模式</label>
<label>  </label>
<label><input name="cast" id="MulticastRadio" type="radio" size='16'/>组播模式</label>
</p>
<p style="margin:10px 350px;"><input class = "button" type='submit' value='保存' /></p>
</form>
此文到此结束,由于涉及的技术不高但是却比较广。因此没办法写太多,对于做前端设计者而言,太过简单,而对于纯单片机设计者而言,可以让前端设计完后再进行页面移植。谁让我这么啥都一个人干呢。
对于有需要的朋友可以在下面的连接下载整个demo代码。
https://download.csdn.net/download/weixin_41558887/11862747