CC3200的Wi-Fi驱动实现了一个嵌入式 WEB服务器_RenRQ的博客-程序员秘密

一、目的

1）了解网页开发语言 HTML；

2）了解 HTTP协议；

3）了解嵌入式 WEB服务器基本架构；

4）通过网页上的图形模拟开关，实现对 CC3200开发板的 LED灯的控制。

二、准备

1.嵌入式 WEB服务器

嵌入式 WEB服务器原理同一般 WEB服务器架构相同。WEB服务器与访问端（客户机）的交互主要体现为网页数据从 WEB服务器传送到访问 PC机端、PC机提交数据给 WEB服务器处理。其中，浏览器除了从本地硬盘上打开网页文件外，还可以使用 HTTP网络协议从网络上的 WWW服务器（也叫 WEB服务器）上获取网页文件的内容。不同之处在于实现 WEB服务器的硬件没有通用服务器强大。因此，嵌入式 WEB服务器主要体现的是易实现和专用性。在嵌入式系统中实现一个 HTTP服务（一个 WEB服务器），可以让用户或应用通过浏览器连接到该嵌入式设备，用图形化的方式来向嵌入式系统传递数据，或者从嵌入式系统中获取数据。因此，嵌入式 WEB服务器常被用来配置嵌入式系统或从嵌入式系统中读取数据。

2.超文本标记语言HTML

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，

它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

3.HTTP超文本传输协议

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。HTTP是一个客户端和服务器端请求和应答的标准（TCP）。客户端是终端用户，服务器端是网站。通过使用Web浏览器、网络爬虫或者其它的工具，客户端发起一个到服务器上指定端口（默认端口为80）的HTTP请求。（我们称这个客户端）叫用户代理（user agent）。应答的服务器上存储着（一些）资源，比如HTML文件和图像。

三、器材

PC，CC3200及CCS软件

CCS8.0 链接密码：z0gk

CC3200SDK1.3.0 下载链接密码：v2du

unflash3.4 下载链接密码：233v

（附上uniflash4.3,注意此版本不支持CC3200 https://download.csdn.net/download/qq_16729179/10430692）

四、内容

结合CC3200的Wi-Fi驱动程序完整的TCP/IP协议栈、以及HTTP服务器，实现了一个嵌入式 WEB服务器。通过led_demo.html演示了如何从嵌入式目标板上获取信息，并显示在 Web页面上，也显示了如何将用户在 Web页面上输入的信息传递给目标板，并实现对目标板上LED的控制。

本示例中，没有使用文件系统，故使用了所谓的静态的文件系统，即把 Web网页储存在 Flash的代码段内。另外，HTTP是基于 TCP协议，在使用 HTTP协议时应该正确配置协议栈和分配资源。

五、代码

main.html

<head>
<title>CC3200web测试</title>
<link rel="stylesheet" type="text/css" href="simple_link.css" >
<script>
function myTrim(x) //needed for IE8 and earlier
{
 return x.replace(/^\s+|\s+$/gm,'');
}
function ShowBarInSafeMode()
{
        if (myTrim(document.getElementById("safe_status").innerHTML)=="Safe Mode")
        {
                document.getElementById("safe_bar").style.visibility="visible";
        }
        else
        {
                 document.getElementById("safe_bar").style.visibility="hidden";
        }

}

function RemoveAllProfiles()
{

        if (confirm("Warning!\nYou are about to remove all configured profiles...\nDo you wish to proceed?\n"))
        {
               var xmlhttp;
               
               if (window.XMLHttpRequest)
                 {// code for IE7+, Firefox, Chrome, Opera, Safari
                       xmlhttp=new XMLHttpRequest();
                 }
               else
                 {// code for IE6, IE5
                       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                 }
                 
               xmlhttp.onreadystatechange= function()
                 {
                       if (xmlhttp.readyState==4) 
                       {
                               if ((xmlhttp.status==200) || (xmlhttp.status==204) || (xmlhttp.status==302) || (xmlhttp.status==1223))
                               {
                                      location.reload(true);
                               }
                       }                
                 }
                 
               xmlhttp.open("POST","remove_all_profiles",true);
               xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
               xmlhttp.send("remove_profiles=remove"); //Name and value not important since NWP check only the action in this case
        }
}
</script>
</head>
<body>
<div id="safe_status" style="display: none" > 
</div>
<div id="safe_bar" style="visibility: hidden">
 <div class="safe_bar_style">
        <div class="safe-text"> Safe Mode </div> 
        <div> <button class="safe-button" type="button" onclick="RemoveAllProfiles()" >Reset All Profiles</button> </div>
</div>
</div>
<div class="navbar">
               <ul class="navbar-menu">
                       <li><a href="main.html">首页</a></li>
                       <li><a href="status.html" target="config_frame">Status</a></li>
                       <li><a href="dev_config.html" target="config_frame">Device Config</a></li>
                       <li><a href="ip_config.html" target="config_frame">IP Config</a></li>
                       <li><a href="profiles_config.html" target="config_frame">Profiles</a></li>
                       <li><a href="tools.html" target="config_frame">Tools</a></li>
                       <li><a href="led_demo.html" target="config_frame">Demo</a></li>
               </ul>   
</div>
<div class ="iframe" >
               <iframe width="100%" height="1470"name="config_frame" src="status.html" frameborder="0">
                 <p>Your browser does not support iframes.</p>
               </iframe>
</div>
<script>
ShowBarInSafeMode();
</script>
</body>
</html>

led_demo.html

<!DOCTYPE html>

<!--[if lte IE 9 ]> <html class="ie"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

<head>
<style>

.lightSwitch {
    background: url("images/demo-lightswitch.jpg") no-repeat scroll 0 -72px rgba(0, 0, 0, 0);    
    height: 70px;
    width: 30px;    
}
.lightOn {
    margin-top: -10px; 
   }
.lightOff{
margin-top: 0px;
}
.lightOn, .lightOff{
    
    cursor:pointer;
    font-weight:bold;
}

</style>
<link rel="stylesheet" type="text/css" href="simple_link.css">
<script type="text/javascript">
var HTTPrequest = new XMLHttpRequest();
function UpdateStatus()
{
    var status = "__SL_G_ULD";
	if(status.indexOf("LED1_ON") > -1)
		document.getElementById("LEDno1").checked = true;
	else
		document.getElementById("LEDno1").checked = false;
	if(status.indexOf("LED2_ON") > -1)
		document.getElementById("LEDno2").checked = true;
	else
		document.getElementById("LEDno2").checked = false;
}
function ToggleLED(whichOne)
{
var LEDnum = "1";
var params = "__SL_P_ULD=LED"+LEDnum;
	if (whichOne == "on") 
		params = params+"_ON";
	else
		params = params+"_OFF";
	HTTPrequest.open("POST","No_content", true);
	HTTPrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	HTTPrequest.setRequestHeader("Content-length", params.length);
	HTTPrequest.setRequestHeader("Connection", "close");
	HTTPrequest.onreadystatechange = function()
	{
		if (HTTPrequest.readyState==4 && HTTPrequest.status==200)
		{
		}
	}
	HTTPrequest.send(params);

}

function toggleSwitch (whichOne) {
	
	var toggle = "lightSwitch";
	var lightImage = "light";
	if (whichOne == "on") {
		document.getElementById(toggle).style.backgroundPosition = '0 0';		

	} else {
		document.getElementById(toggle).style.backgroundPosition = '0 -72px';
			}
ToggleLED(whichOne);


}
</script>

</head>

<body class="in-frame" onload="UpdateStatus()">

<table border="0"  width="100%" cellpadding="3" cellspacing="0">

<tr>  
<td class="page-title" colspan=2 >
	LED Demo</td>
</tr>


<tr>
<td align=center class = "in-a-box" colspan=2> <br>
<div class="lightOn" onclick="toggleSwitch('on');">点亮
</div>
 <div class="lightSwitch" id="lightSwitch" >
</div>
<div class="lightOff" onclick="toggleSwitch('off');">熄灭
</div>

</td>
</tr>

<tr>
  <td class="in-a-box" colspan=2 align=center> 点击按钮控制红色LED灯</td>
</tr>
<tr>
  <td class="in-a-box" colspan=2 align=center> 实验中的问题：板子烧写的html程序和ccs中httpserver所用程序不配套</td>
</tr>
<tr>
  <td class="in-a-box" colspan=2 align=center> 解决方法：ccs中httpserver程序是SDK1.10的旧版程序</td>
</tr>
<tr>
  <td class="in-a-box" colspan=2 align=center> 那么板子也用uniflash烧写SDK1.10中httpserver的html文件就可以了</td>
</tr>
<tr>
  <td class="in-a-box" colspan=2 align=center> PS：跳出这个坑花了不少时间。。。</td>
</tr>
 <tr >
  <td class = "border-l-top" colspan=2 >
  </td>
</tr>
</table>

</body>
</html>

六、步骤与结果

1.编译程序并下载到实验板

2.全速运行程序代码

2.电脑连入AP，打开网址：mysimplelink.net/main.html,并进入leddemo控制LED

七、小结

1.版本不一致的问题：由于CC3200 SDK1.1.0中的旧版程序和板子烧写的html程序不配套，led_demo不能控制板子上的led灯。

解决方法：ccs中httpserver程序是SDK1.10的旧版程序，那么板子也用uniflash烧写SDK1.10中httpserver的html文件就可以了，烧写html文件到cc3200见下文。

2.SSID改名：修改commnd.h并不能更改AP的SSID，猜测是因为实验中板子初始化时没有调用common.h这个文件，但可以通过web页面修改，如下

3.实验中摸索了一下如何使用uniflash烧写html文件到cc3200的flash中，记录如下：

2.1．小坑预警！注意支持cc3200的uniflash版本号

2.2安装CCS uniflashV3.4.1后打开软件，新建文件

2.3选择CC3200

2.3在用户文件下添加文件，填写Name、url

2.4用户文件都导入完成后，设置端口号、占用空间大小，然后烧写程序到flash中

（小坑预警：1.端口不要被占用 2.SPO2口不要忘了用跳线帽或者杜邦线连接）

过程截图如下：

本文链接：https://blog.csdn.net/qq_16729179/article/details/80410620

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Docker-compose 到 Kubernetes 的迁移工具！_流風餘韻的博客-程序员秘密

在 skippbox，我们开发了 Kompose 这一工具，他能够自动把 Docker Compose 应用转换为 Kubernetes 描述文件。利用一个简单的 kompose up 命令，就可以在 Kubernetes 集群上启动 Compose 应用。我们非常乐于将其捐献给 Kubernetes Incubator。下面介绍一下这一工具的开发动机和用法。

[机器学习] Boosting算法3 --- XGBoost_xgboost每增加一棵树,目标函数会下降吗_WayneZ~的博客-程序员秘密

[机器学习] Boosting算法1 --- AdaBoost[机器学习] Boosting算法2 --- GBDT[机器学习] Boosting算法3 --- XGBoost目录一 XGBoost是什么二基础知识GBDT三 XGBoost目标函数四 XGBoost算法说明1. boosting tree模型2. 树的集成3. 学习第t棵树4....

JavaScript概念之screen/client/offset/scroll/inner/avail的width/left ..._weixin_33819479的博客-程序员秘密

原文地址：http://caibaojian.com/js-name.htmlJS中获取各种宽度和距离，常常让我们混淆，各种浏览器的不兼容让我们很头疼，现在就在说说js中有哪些宽度和距离。1、名词解释screen：屏幕。这一类取到的是关于屏幕的宽度和距离，与浏览器无关，应该是获取window对象的属性。client：使用区、客户区。指的是客户区，当然是指浏览器区域。offset：偏移。指的是目...

Servlet基础教程之如何上传文件逐步演示_java知多少的博客-程序员秘密

目录步骤1:先运行，看到效果，再学习步骤2:模仿和排错步骤3:首先准备上传页面 upload.html步骤4:接着准备 UploadPhotoServlet步骤5:配置web.xml步骤6:复制jar包步骤7:在项目中导入jar包步骤8:上传测试步骤9:如何处理其他非File字段步骤1:先运行，看到效果，再学习老规矩，先下载下载区(点击进入)的可运行项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达...

保护隐私？找回已记住的秘密？你的余额宝、淘宝还安全吗？_weixin_33721344的博客-程序员秘密

今天在整理tfs工作区的时候发现了一个感觉很危险的事情，纠结之下还是写出来，虽然这会让有些坏脑筋的人有机可乘，但我相信广大程序猿还是很好的程序猿哈哈，不开玩笑了，事情是这样的… 补充 2014-5-8 经过大家反馈现补充重现的几个要求 1.操作系统需是 Windows 8及以上或者 Windows Server 2012 R2（2012应该也可以） 2.需要使用IE浏览器记住的密码由博友“...

关于CSV文件数据集的处理_西瓜西瓜我是大宝�的博客-程序员秘密

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

随便推点

influxDB与cAdvisor与Grafana_influxdb和grafana的关系_改变世界的猿的博客-程序员秘密

什么是influxDBinfluxDB是一个分布式时间序列数据库。cAdvisor仅仅显示实时信息，但是不存储监视数据。因此，我们需要提供时序数据库用于存储cAdvisor组件所提供的监控信息，以便显示除实时信息之外的时序数据。安装influxDB下载镜像docker pull tutum/influxdb2.创建容器docker run -di \ -p 8083:80...

k8s部署redis-cluster+predixy集群_Lucas 5的博客-程序员秘密

k8s部署redis-cluster+predixy集群

面对初学者的CAN总线入门教程（三）_CAN通信中帧、优先级、位填充、错误、位时序以及同步的介绍_can硬件同步_吮指原味张的博客-程序员秘密

目录1. 数据链路层中的帧1.1 数据帧1.1.1 帧起始（标准、扩展格式相同）1.1.2 仲裁段1.1.3 控制段1.1.4 数据段（标准、扩展格式相同）1.1.5 CRC 段（标准/扩展格式相同）1.1.6 ACK 段（标准/扩展格式相同）1.1.7 帧结束（标准/扩展格式相同）1.2 遥控帧1.3 错误帧1.4 过载帧1.5 帧间隔2. 优先级的确定3. 位填充4. 错误4.1 错误的种类4.2 错误帧的输出5. 位时序6. 同步6.1 取得同步的方法6.2 硬件同步6.3 再同步6.4 调整同步的规