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

最新推荐文章于 2022-08-16 11:00:57 发布

RenRQ

最新推荐文章于 2022-08-16 11:00:57 发布

阅读量1.2k

点赞数

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

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

版权

CC3200学习专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、目的

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口不要忘了用跳线帽或者杜邦线连接）

过程截图如下：

RenRQ

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CC3200的Wi-Fi驱动实现了一个嵌入式 WEB服务器

一、目的1）了解网页开发语言 HTML；2）了解 HTTP协议；3）了解嵌入式 WEB服务器基本架构；4）通过网页上的图形模拟开关，实现对 CC3200开发板的 LED灯的控制。二、准备 1.嵌入式 WEB服务器嵌入式 WEB服务器原理同一般 WEB服务器架构相同。WEB服务器与访问端（客户机）的交互主要体现为网页数据从 WEB服务器传送到访问 PC机端、PC机提交数据给 W...
复制链接

扫一扫