CC3200的Wi-Fi驱动实现了一个嵌入式 WEB服务器

最新推荐文章于 2022-01-19 19:51:23 发布

RenRQ

最新推荐文章于 2022-01-19 19:51:23 发布

阅读量1.3k

点赞数

分类专栏： CC3200学习文章标签： CC3200 嵌入式web服务器点亮LED

本文链接：https://blog.youkuaiyun.com/qq_16729179/article/details/80410620

版权

CC3200学习专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何利用CC3200开发板和嵌入式WEB服务器实现LED灯的网页控制，包括硬件准备、HTML网页设计、HTTP协议交互等内容，并解决了版本不一致导致的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、目的

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.youkuaiyun.com/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>