网络：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自动化的时候,由于我们的网站 ...
随机推荐
- linux 内核经典面试题
http://blog.chinaunix.net/uid-25909619-id-3376158.html
- HTML5 选择前置摄像头，选择后置摄像头
最近发现我写的都是乱七八糟的,觉得应该给大家带点福利,于是写了这篇 背景:最近想做个web应用,需要用到摄像头,但是发现默认一直是前置摄像头,拍照很麻烦,于是找了很多文章,居然没有人提到,只好FQ去找 ...
- mysql DBA 指南
Mysql目录 数据库介绍.常见分类 Mysql入门 Mysql安装配置 Mysql多实例安装配置 Mysql常用基本命令 Mysql权限体系 Mysql数据库备份和恢复 Mysql日志 Mysql逻 ...
- jacob操作 office 内部对应代码
Excel操作 转换 xlAddIn 18 Microsoft Office Excel 加载项 xlAddIn8 ...
- 禁用chrome默认打印框直接打印
在做web打印的时候 重要弹出一个对话框选择打印机等等, 比较影响操作, 经过一番谷歌终于找到了解决方案 在桌面的chrome 图标 右键 打开属性对话框 在目标 添加 --kiosk-printi ...
- vue+node+mongoDB 火车票H5（四）---完成静态页面
各项配置都好了,就可以开始写静态页面了,先别急着写,看一下页面又哪些公用的部分可以提取出来的,统一放到components组件文件夹中 header头部文件夹放一些头部常用组件,如首页的banner切 ...
- ORACLE_SID的查找
SID是System IDentifier的缩写,而ORACLE_SID就是Oracle System Identifier的缩写,在Oracle系统中,ORACLE_SID以环境变量的形式出现,在特 ...
- python基础之类的编码风格
自定义工作流程: 一开始应让代码结构尽可能简单.先尽可能在一个文件中完成所有的工作,确定一切都能正确运行后,再将类移动独立的模块中.如果你喜欢模块和文件的交互方式,可在项目开始时就尝试将类存储到模块中 ...
- django之多表查询-2
2018-11-14 一 \\ 基于双下划线的跨表查询: 套路一样,用__跨表 -一对多 -多对多 from app.models import * 查询出版社为北京出版社出版的所有图书的名字,价格 ...
- phalcon—— PHP基础知识(一)
一.变量和常量 1.1.变量名(标示符) 1)变量:$开头标志 2)变量名:能够由字母.数字,_ 3者组成,不能用数字开头 3)标识符是区分大写和小写的.但函数名不区分大写和小写. 4)变量名称能够与 ...