前言
学习了一个新知识，当然要记录一下啦。这两天学习了boa服务器、cgic标准库和html标签语言，又双叕解锁一个嵌入式的新玩法。cgic库是沟通C语言和html网页编程语言的一座桥梁，通过在linux设备上运行boa服务器程序，分别在boa文件夹的cgi-bin、www文件夹中添加.cgi和.html文件则可实现C语言和html语言的交互。cgic也可以看成一个接口。
演示视频：
从web网页上点亮linux开发板LED灯
注：在做下面的事情之前前确保你的linux已经移植好了boa、cgic和html；
开发板的linux根文件系统必须挂载在Ubuntu下；
关于boa、cgic和html服务器的移植在【实战】物联网安防监控项目【3】———CGI的移植及与html的通信
实现过程
下载armledtest.zip（已免费开源在我的资源中） ，解压后复制到Ubuntu任意目录，
其中的x86ledtest.zip可用于Ubuntu下测试网页发送数据模拟控制Ubuntu的LED灯。
1、打开Makefile
并把：
KERNELDIR :=/home/fengjunhui/kernel/linux-3.14
修改成你的linux内核的目录
NFS_BOA_WWWDIR=~/source/rootfs/boa/www/
修改成你的开发板挂载在Ubuntu上根文件系统上的/boa/www/内
NFS_BOA_CGIDIR=~/source/rootfs/boa/cgi-bin/
修改成你的开发板挂载在Ubuntu上根文件系统上的/boa/cgi-bin/内或者你可以自己编写一个简单一点的Makefile
可参考：
2、编译
make我把生成以下文件放在了子目录demo中
make install
读Makefile中的语句可得知Makefile帮我们做了两件事
①把meiyanfang.mp、 所有的.jpg文件、led.html被复制到了开发板挂载在Ubuntu上根文件系统的/boa/www/内
②把cgi_led.cgi复制到了开发板挂载在Ubuntu上根文件系统的/boa/cig-bin/内
3、sudo cp demo.ko /你的开发板的根文件系统的绝对路径
4、启动开发板
5、插入内核模块
insmod dem.ko6、启动boa程序
./boa如果启动失败可能是因为是x86架构的，去Ubuntu下面用file命令进行查看，如果是，请移步我上一篇文章中，可找到解决方法。
加 & 的意思是在后台运行
7.打开网页，输入网址192.168.0.220/login.html
192.168.0.220根据你的开发板IP号修改
账号密码在cgic205/login.c中可以看到并且修改
记得把这里修改成你开发板的ip地址，不然就跳转不到你的下一个页面
选择第一个终端 My room
点击硬件控制
进入web点亮led灯
这个就根据你的开发板上的LED灯来控制了
网页源码
登录界面：login.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>智能管理系统 - 登陆</title>
<style type="text/css">
<!--
body,td,th {
font-family: "宋体";
font-size: 14px;
color: #fff;
line-height: 20px;
font-weight: bold;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #73A3D3;
background-attachment: fixed;
background-repeat: repeat-x;
}
input {
height: 20px;
width: 120px;
background-color: #FFFFFF;
color: #333333;
border: 1px solid #5B7290;
}
a:link {
text-decoration: underline;
color: #003366;
}
a:visited {
text-decoration: underline;
color: #003366;
}
a:hover{
color:#003366;
text-decoration:none;
}
.txt {
font-size: 12px;
font-weight: normal;
color: #003366;
}
-->
</style>
</head>
<body>
<table width="1003" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="1003" height="216" background="images/login/login_05.jpg"></td>
</tr>
<tr>
<td height="215" background="images/login/login_04.jpg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="43%"></td>
<td width="57%"><table width="300" border="0" cellspacing="10" cellpadding="0">
<tbody><tr>
<td> 请输入您的用户名及密码</td>
</tr>
<tr>
<td><form name="form1" method="post" action="cgi-bin/login.cgi">
<table width="100%" border="0" cellspacing="9" cellpadding="0">
<tbody><tr>
<td width="92">用户帐号：</td>
<td width="130"><label>
<input name="username" type="text" id="username" value="imysy_22"></label></td>
</tr>
<tr>
<td>登录密码：</td>
<td><label>
<input name="password" type="password" id="password" value="123"></label></td>
</tr>
<tr><td height="25"></td>
<td><input type="image" name="submit" style="width:97px;height:25px;" src="images/login/go.gif"></td>
</tr>
</tbody></table>
</form></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td height="211" align="center" background="images/login/login_03.jpg" class="txt">
开发人：imysy_22 技术支持QQ: 371285540<br>
xxx提供技术支持<a href="https://blog.csdn.net/imysy_22_" target="_blank"><b>imysy_22的博客</b></a></td>
</tr>
</tbody></table>
</body></html>主页界面：index.html
<html>
<body background="./images/background4.jpg">
<table width="454" height="540" border="0" align="center" background="">
<tr>
<h1 align="center"> Welcome to the intelligent security monitoring system!</h3> <br/>
<div align="center">
<img src="./1.jpeg">
<tr>
<td height="59"></td>
</tr>
<tr>
<td height="70"><h1 align="center"><a href="home1.html"><font face="华文隶书" color="red" size="+3">My room</font></a></h1></td>
</tr>
<tr>
<td height="60"><h1 align="center"><a href="home2.html"><font face="华文隶书" color="red" size="+3">school basketball court</font></a></h1></td>
</tr>
<tr>
<td headers=""><h5 align="left"> With the rapid development of modern power electronics technology and microelectronics technology, and the continuous improvement of automation and intelligence, the home security technology is constantly developing. The traditional home security system has become increasingly unable to meet the needs of modern people. Consumers hope that they can "see" the situation on the spot in real time, and can remotely control some automation equipment on the spot to deal with emergencies. The scheme of this project mainly uses internet, GPRS, 3G, WIFI and other technologies to realize remote monitoring and communication. This system not only has the basic embedded features such as easy maintenance, scalability and security, but also fully integrates embedded and communication technologies. This makes the system's functional expansibility very good, and the scheme has a certain leading edge, and it can be applied to many other occasions with a little customization. It should be helpful for us to master the traditional embedded LINUX technology and the relatively new 3G technology and to find jobs after graduation.
</tr>
</table>
</tr>
<tr>
<h2 align="center"> click the scene you want to enter</h3> <br/>
</tr>
<tr>
<h3 align="center"> Designed by imysy_22</h3> <br/>
</tr>
<tr>
<td height="61">
</td>
<tr>
<td>
</tr>
<a href="/cgi-bin/test.cgi">poke me to cgi page</a>
</body>
</html>
硬件配置界面:a9_zigbee1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>硬件控制 Control</title>
<style type="text/css">
.main {
float: none;
height: 424px;
width: 424px;
background-image: url();
background-repeat: no-repeat;
}
.strip {
height: 28px;
width: 200px;
margin-top: 55px;
margin-bottom: 30px;
margin-left: 100px;
}
.strip1 {
height: 28px;
width: auto;
float: inherit;
}
.strip2 {
height: 30px;
width: 275px;
margin-top: 30px;
margin-bottom: 30px;
margin-left: 100px;
}
.strip3 {
height: 60px;
width: 250px;
margin-top: 30px;
margin-bottom: 30px;
margin-left: 100px;
}
.clear {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
.demo {
position: relative;
left: 360px;
top: 10px;
}
</style>
</head>
<body background="./images/background4.jpg">
<table width="600" border="2" height="317" align="center" background="./images/fs4412.jpg">
<tr>
<td> </td>
</tr>
</table>
<table width="600" height="50" border="2" align="center">
<tr>
<td width="294">
<div align="center">硬件控制</div>
</td>
<td width="296">
<div align="center">
<a href="home1.html">回主页</a>
</div>
</td>
</tr>
</table>
<table width="400" height="270" align="center" border="3" bordercolor="red">
<td height="60">
<div align="center">
<form id="form1" name="form1" method="post" action="cgi-bin/a9_led.cgi">
<div class="strip1">
<a href="led.html">wed点亮led</a>
</div>
</form>
</div>
</td>
</tr>
<tr>
<td height="60">
<div align="center">
<form id="form4" name="form4" method="post" action="cgi-bin/a9_beep.cgi"> <input type="hidden" name="store" id="hiddenField" value="1" />
<label>Beep:
<input type="radio" name="beep" value="1" id="beep_0" />
开</label>
<label>
<input type="radio" name="beep" value="0" id="beep_1" />
关</label>
<input type="submit" name="button4" id="button4" value="提交" />
</form>
</div>
</td>
</tr>
<tr>
<td height="60">
<div align="center">
<form id="form3" name="form3" method="post" action="cgi-bin/a9_seg.cgi">
<div class="strip1"> <input type="hidden" name="store" id="hiddenField" value="1" />
<label>Seg:
<input type="radio" name="seg" value="1" id="seg_0" />
on</label>
<label>
<input type="radio" name="seg" value="0" id="seg_1" />
off</label>
<input type="text" name="segvalue" id="textfield" size="2" />
<input type="submit" name="button3" id="button3" value="提交" />
</div>
</form>
</div>
</td>
</tr>
<tr>
<td height="60">
<div align="center">
<form id="form2" name="form2" method="post" action="cgi-bin/zigbee_fan.cgi">
<div class="strip1"> <input type="hidden" name="store" id="hiddenField" value="1" /> Fan:
<label>
<input type="radio" name="fan" value="0" id="fan_0" />
off</label>
<label>
<input type="radio" name="fan" value="1" id="fan_1" />
1</label>
<label>
<input type="radio" name="fan" value="2" id="fan_2" />
2</label>
<label>
<input type="radio" name="fan" value="3" id="fan_3" />
3</label>
<input type="submit" name="button2" id="button2" value="确定" />
</div>
</form>
</div>
</td>
</tr>
</table>
<tr>
<td>
<form>
<div class="demo" align="left">我国安防行业在经过了近30年的发展后，已经形成了长三角、珠三角、环渤海三大产业聚集区，<br/>
并且诞生了以海康威视、大华股份、宇视科技为首的第一阵营，前三强市场份额加起来占比达到50%以上，<br/>
产业集成度较高。每个月光是从杭州生产出来的安防摄像机都高达百万台，市场竞争激烈。
<br/>
<br/>
</form>
</div>
</td>
</tr>
</body>
</html>led点灯界面：led.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web控制A9开发板led</title>
</head>
<body background="./473252.jpg">
<br />
<embed src="./meiyanfang.mp3" autostart="true" loop="true" hidden="true">
<h1 align="center">基于Cortex-A9的web控制LED灯</h1>
<!--新建一个表单，动作链接到开发板的/cgi-bin/cgi_led.cgi，采用的方法为GET-->
<form action="/cgi-bin/cgi_led.cgi" method="get">
<p align="center">Web端的led的控制测试</p>
<p align="center">请输入需要控制的led <input type="text" name="led_control"/></p>
<p align="center">请输入控制led的动作 <input type="text" name="led_state"/></p>
<p align="center"><input type="submit" value="sure"/>
<input type="reset" value="back"/>
</p>
</form>
</body>
</html>