网络：W5500用浏览器配置设备
1.背景
嵌入式端使用网络通信后，可以在PC端进行设备配置。方法有二：1）上位机配置；2）浏览器配置。
上位机配置可以把设置和测量作为一体，功能可以很强大，体验较好。
浏览器配置就是在电路板上搭载一个嵌入式的web服务器，所以功能一般的很有限。
特定情况下，搭载一个浏览器设置接口，可以大大方便设备的使用，毕竟是个电脑就肯定有浏览器的。
2.W5500浏览器配置例程分析
1）界面如下
2）参数显示
上面显示了HTTP访问期间的三次握手和四次挥手。
刷新一次网页，为什么会出现2次HTTP get请求呢？
从第二次请求内容可以看出，请求一个w5500.js.
查看服务器端源码，可以看出:
如果请求是 http://192.168.1.90/ , 则回复INDEX_HTML，这是一个宏定义，是html格式的字符串。
如果请求是 http://192.168.1.90/w5500.js , 则回复json_callback，这个callback以字符串格式发送到客户端。
case METHOD_GET:
name = http_request->URI;
if(strcmp(name,"/index.htm")== || strcmp(name,"/")== || (strcmp(name,"/index.html")==))
{
file_len = strlen(INDEX_HTML);
make_http_response_head((uint8*)http_response, PTYPE_HTML,file_len);
send(s,http_response,strlen((char const*)http_response));
send_len=;
while(file_len)
{
if(file_len>)
{
if(getSn_SR(s)!=SOCK_ESTABLISHED)
{
return;
}
send(s, (uint8 *)INDEX_HTML+send_len, );
send_len+=;
file_len-=;
}
else
{
send(s, (uint8 *)INDEX_HTML+send_len, file_len);
send_len+=file_len;
file_len-=file_len;
}
}
}
else if(strcmp(name,"/w5500.js")==)
{
memset(tx_buf,,MAX_URI_SIZE);
make_basic_config_setting_json_callback(tx_buf,ConfigMsg);
sprintf((char *)http_response,"HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nContent-Length:%d\r\n\r\n%s",strlen(tx_buf),tx_buf);
send(s, (u_char *)http_response, strlen((char const*)http_response));
}
break;
HTML源码的c定义格式为：
#define INDEX_HTML "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\'>"\
"<html>"\
"<head>"\
"<title>W5500EVB - HTTP SERVER</title>"\
"<style type='text/css'>"\
"body {text-align:left; background-color:/*#ffc1e0*/#c0deed;font-family:Verdana;}"\
"#main {margin-right:auto;margin-left:auto;margin-top:30px;}"\
"label{display:inline-block;width:150px;}"\
"#main h3{color:#66b3ff; text-decoration:underline;}"\
"</style>"\
"<script>"\
"function $(id) { return document.getElementById(id); };"\
"function settingsCallback(o) {"\
"if ($('txtVer')) $('txtVer').value = o.ver;"\
"if ($('txtMac')) $('txtMac').value = o.mac;"\
"if ($('txtIp')) $('txtIp').value = o.ip;"\
"if ($('txtSub')) $('txtSub').value = o.sub;"\
"if ($('txtGw')) $('txtGw').value = o.gw;"\
"};"\
"</script>"\
"</head>"\
"<body>"\
"<div id='main'>"\
"<div style='background:snow; display:block;padding:10px 20px;'>"\
"<h3>Device Settings</h3>"\
"<form id='frmSetting' method='POST' action='config.cgi'>"\
"<p><label for='txtIp'>Firmware version:</label><input type='text' id='txtVer' name='ver' size='16' disabled='disabled' /></p>"\
"<p><label for='txtIp'>MAC address:</label><input type='text' id='txtMac' name='mac' size='16' disabled='disabled' /></p>"\
"<p><label for='txtIp'>IP address:</label><input type='text' id='txtIp' name='ip' size='16' /></p>"\
"<p><label for='txtSub'>Subnet mask:</label><input type='text' id='txtSub' name='sub' size='16' /></p>"\
"<p><label for='txtGw'>Default gateway:</label><input type='text' id='txtGw' name='gw' size='16' /></p>"\
"<p><input type='submit' value='Save Settings and Reboot' /></p>"\
"</form>"\
"</div>"\
"</div>"\
"<div style='margin:5px 5px;'>"\
"©Copyright 1998-2013 by WIZnet Team"\
"</div>"\
"<script type='text/javascript' src='w5500.js'></script>"\
"</body>"\
"</html>"
这看起来有点费力，从网页端查看格式为如下。
可以看到，这个页面里面内嵌了js脚本。所以在加载完这段html之后，浏览器会解析脚本发送第二次请求：<script src="w5500.js" type="text/javascript"></script>
这个请求被W5500服务器端接收到后，指向上面的else if(strcmp(name,"/w5500.js")==0)语句，然后执行make_basic_config_setting_json_callback(tx_buf,ConfigMsg);
此时，就通过CGI接口，向客户端推送数据。所以浏览器上第一次刷新出来的显示框就会出现数值。这就是用网页显示系统配置参数的过程。
3）参数设置
从html页面可以看到，按钮会触发config.cgi请求。把设置的参数POST给服务器。
服务器端接收到后，进行解析，其实就是字符串分析，提取出ip,mac,gw等字符串，然后获得配置的参数。
case METHOD_POST:
mid(http_request->URI, "/", " ", req_name);
if(strcmp(req_name,"config.cgi")==)
{
cgi_ipconfig(http_request);
make_cgi_response(,(int8*)ConfigMsg.lip,tx_buf); /*Éú³ÉÏìÓ¦µÄÎı¾²¿·Ö*/
sprintf((char *)http_response,"HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nContent-Length:%d\r\n\r\n%s",strlen(tx_buf),tx_buf);
send(s, (u_char *)http_response, strlen((char *)http_response));
disconnect(s);
reboot_flag=;
return;
}
break;
服务器获取到参数后，写入到EEPROM完成参数配置。
网络：W5500用浏览器配置设备的更多相关文章
- 网络时钟服务器,NTP授时设备,北斗网络校时服务器,GPS时间同步器
网络时钟服务器,NTP授时设备,北斗网络校时服务器,GPS时间同步器 网络时钟服务器,NTP授时设备,北斗网络校时服务器,GPS时间同步器 论述当下网络时间同步的重要性 北京华人开创科技发展有限公 ...
- NFS网络文件系统服务（配置实战）
NFS网络文件系统服务(实战) NFS(Network File System)即网络文件系统,它允许网络中的计算机之间通过TCP/IP网络共享资源.让不同的主机系统(NFS的客户端)可以透明地读写位 ...
- [Linux网络、命名空间、veth设备对、docker的host模式、container模式、none模式、brideg模式、网桥的增删查，容器与网桥的连接断开]
[Linux网络.命名空间.veth设备对.docker的host模式.container模式.none模式.brideg模式.网桥的增删查,容器与网桥的连接断开] 网络名称空间 为了支持网络协议栈的 ...
- Keepalived LVS-DR单网络双活双主配置模式
Keepalived LVS-DR单网络双活双主配置模式 Linux就该这么学 今天 LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.LV ...
- 伪基站，卒于5G——本质上是基于网络和UE辅助的伪基站检测，就是将相邻基站的CI、信号强度等信息通过测量报告上报给网络，网络结合网络拓扑、配置信息等相关数据，对所有数据进行综合分析，确认在某个区域中是否存在伪基站
伪基站,卒于5G from:https://www.huxiu.com/article/251252.html?h_s=h8 2018-07-05 21:58收藏27评论6社交通讯 本文来自微 ...
- Red Hat 6.5 网络yum源的配置
第一次接触Linux系统,用虚拟机安装了一个rad hat6.5版本64位的,傻瓜式安装.安装好之后简单的写了一个C代码,进行gcc编译的时候,提示没有该命令,上网查找了一下说没有安装gcc编译器,用 ...
- 浏览器配置工具.bat
在Web安装的ActiveX控件,默认安装在C:\WINDOWS\Downloaded Program Files目录下,但是有时候由于Internet Explorer的安全设置,会阻止Active ...
- chrome浏览器 配置开机启动全屏(看板app模式设置)
chrome浏览器 配置开机启动全屏(看板app模式设置) 1.下载安装chrome浏览器. 2.建立一个chrome浏览器的快键方式,右键打开属性,如下图: 3.将目标选项卡的值修改为:&q ...
- selenium--加载浏览器配置
前戏 在我们之前写的自动化脚本中,不知道大家有没有发现,每次打开的都是一个新的浏览器(相当于新安装的).但是有时候,我们想打开的是我们配置好的浏览器.我在之前的公司做web自动化的时候,由于我们的网站 ...
随机推荐
- PHP第三方登录
参考视屏:http://www.imooc.com/learn/596 php第三方登录-QQ登录OAuth协议基本原理QQ登录前置条件以及开放平台账号申请1,一个QQ号2,一个公网通过域名可访问的w ...
- Sublime Text 格式化代码快捷键
首选项->按键绑定-用户 加入代码: {"keys": ["ctrl+alt+j"], "command": "reinde ...
- [读书笔记]java核心技术
ps:有时间好好整理下格式.从别的编辑器拷贝过来啥都没了. ~~~~~~~~~~~~~~· 2.java程序设计环境 JDK 开发java使用的软件: JRE 运行java使用的软件: SE 用于桌面 ...
- Python_selenium之窗口切换
Python_selenium之窗口切换 1. 运用switch_to.window()方法来进行窗口切换 2. 思路拆分: 浏览器获取百度贴吧网址 点击定位到一个元素,获取当前的句柄 获得所有的句柄 ...
- hdu4456 Crowd(二维树状数组)
题意:给出一个n*n的矩阵,然后m个operation,1表示坐标(x,y)的值加z,2表示与坐标(x,y)的曼哈顿距离不超过z的点的权值和. 解题思路:将矩阵側过来45度.发现询问的时候,有效的点构 ...
- 关于在ubuntu平台下使用apt-get命令下载速度太慢的问题解决
1. 进入设置,从哪进都一样找到就行. 2.选择软件与更新(Software and updates,英语估计是这个把) 点击下载自:这个下拉框,选中其它站点,选择镜像 选择阿里的或者搜狐的镜像,然后 ...
- IOS-添加分段控件SegmentControl
本文转载至 http://www.cnblogs.com/tx8899/archive/2012/06/05/2537020.html 添加分段控件 控件是一种小型的.自包含的UI组件,可以用在各种U ...
- 七牛wordpress
当你看到柯南君的时候说明:我的七牛云图加速已经生效了. 准备工作: ①申请一个七牛账号并新增空间 ②到wordpress后台搜索qiniu并安装插件 在七牛后台找到AK和SK,配置wp后台七牛镜像存储 ...
- Kubernetes资源创建yml语法
前言 在是用kubernetes中,我们对资源的创建大部分都是通过 1 kubelet create -f RESOURCE.yaml 刚开看的时候不免有一些迷茫,看不懂语法,不知道怎么写:今天本文就 ...
- jquery slibings选取同级其他元素
jquery选取同级其他元素可以使用slibings方法,end方法可以清除之前的链式操作,相当于重新开始. <script type="text/javascript"&g ...