[嵌入式开发板] iTOP-4412实现web控制led

最新推荐文章于 2024-01-13 14:02:38 发布

迅为电子

最新推荐文章于 2024-01-13 14:02:38 发布

阅读量2.3k

点赞数 1

分类专栏： 4412开发板文章标签： 4412 嵌入式开发板

本文链接：https://blog.csdn.net/Chihiro_S/article/details/50886871

版权

4412开发板专栏收录该内容

98 篇文章 22 订阅

订阅专栏

平台：iTOP-4412开发板

大家好，上一章我们讲了在iTOP-4412开发板上搭建web服务器，这一章我
们在前面一章的基础上讲解一下通过web网页实现控制LED。
要实现控制led，我们需要CGI编程，CGI（Common Gateway Interface）是外
部应用扩展，应用程序与www服务器交互的一个标准接口。按照CGI标准编写的
外部扩展应用程序可以处理客户端浏览器输入的数据，从而完成客户端与服务器的
交互操作。而CGI规范就定义了web服务器如何向扩展应用程序发送消息，在收
到扩展应用程序的信息后又如何进行处理等内容。通过CGI可以提供许多静态的
HTML网页无法实现的功能。比如搜索引擎、基于web的数据库访问等等。
首先进入到我们的NFS文件系统所在的目录，如下图：

在前面的搭建web服务器章节，我们在修改boa.conf配置文件的时候指定了web
网页的存放目录“DocumentRoot /www” ，现在我们打开之前我们在www目录创建的index.html，如下图所示：

打开index.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>led远程控制</title>
<style type="text/css">
body {
background-color: #999900;

text-align: center;
}
.ziti {
font-size: 24px;
}
.juzhong {
text-align: center;
}
.hsz {
text-align: center;
}
.hsz td {
color: #00F;
font-size: 18px;
}
.hsz {
background-color: #FCC;
}
.juzhong table {
text-align: center;
}

.juzhong table tr {
}
#h1 {
background-color: #0FC;
}
#h2 {
background-color: #FF9;
}
.h3 {
background-color: #0CF;
}
.ys1 {
font-size: 24px;
}
.STYLE1 {font-size: 36px}
</style>
</head>
<body class="juzhong">
<table width="900" border="0" align="center" cellpadding="0"
cellspacing="0">

<tr>
<td><p class="STYLE1"> </p>
<p class="STYLE1">iTOP-4412 WEB SERVER </p></td>
</tr>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td><form action="/cgi-bin/myled.cgi" method="get"
enctype="application/x-www-form-urlencoded" name="form1"
target="_blank" id="form1">
<table width="300" border="1" align="center" cellpadding="1"
cellspacing="1">
<tr>
<td>Led1</td>
<td><input name="led1" type="checkbox" id="led1" value="1"
/>
<label for="led1"></label></td>
</tr>
<tr>
<td>Led2</td>
<td><input name="led2" type="checkbox" id="led2" value="2"
/>
<label for="led2"></label></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit"
id="submit" value="submit" /></td>
</tr>
</table>
</form></td>
</tr>
<tr>
<td ><p> </p> </td>
</tr>
</table>
<p> </p>
</body>
</html>
如下图所示：

然后保存并退出。上面输入的是HTML格式的代码，主要是用到了通过表单向服
务器提交信息，在表单里面指定了服务器端处理接收到信息的CGI程序是myled，
这是在form表单的属性里设置的，代码是“form action="/cgi-bin/myled.cgi"
method="get” ，使用的传递数据的方式是get方法，如下图所示：

修改完了index.html，我们需要些CGI程序。在boa的配置文件boa.conf里面
我们指定了CGI程序的存储目录是“ScriptAlias /cgi-bin/ /www/cgi-bin/” ，如
下图所示：

现在我们进入到NFS文件系统的www/cgi-bin目录，如下图所示：

然后再cgi-bin目录我们创建myled.c，如下图所示：

然后在myled.c里输入下面的代码：
#include <stdio.h>
#include <stdlib.h>
int main()
{
char *data;
int leds[2] = {0, 0};
long m, n;
int exit=0,i,fd;
printf("Content-Type:text/html;charset=gb2312\n\n");
printf("<html>\n");
printf("<body>\n");
printf("<title>iTOP-4412</title> ");
printf("<h3>iTOP-4412</h3> ");
data = getenv("QUERY_STRING");
printf("<p>receive data:%s</p>",data);
while(*data != '\0')
{
if(*data=='=')
switch(*(data+1))
{
case '1':leds[0]=1;break;
case '2':leds[1]=1;break;
default:exit=1;break;
}
if(exit == 1)
break;
data++;
}
fd=open("/dev/leds",0);
for(i=0;i<2;i++)
{
if(leds[i]==1)
printf("<p>%d\t</p>",i+1);
ioctl(fd,leds[i],i);
}
printf("</body>\n");
printf("</html>\n");
return 0;
}
如下图所示：

最后保存并退出。
上面的代码是C语言，主要是完成了获取web提交过来的数据，然后对获得的数
据解析，最后会调用led的ioctl函数来点亮或关闭led。里面的printf打印语句，
最终会生成一个web页面。接下来编译myled.c生成myled.cgi（在index.html
的表单里面设置了处理文请求的cgi程序是myled.cgi），使用命令
“arm-none-linux-gnueabi-gcc -o myled.cgimyled.c -static”编译myled.c，
如下图所示：

编译完成后，我们可以看到在www/cgi-bin目录下生成了myled.cgi，如下图所
示：

注意：生成的myled.cgi需要有可执行权限，所以我们使用chmod命令修改下它
的权限，如下图所示：

现在控制led的web程序就已经完成了，现在启动开发板，如下图所示：

通过上图我们可以看到iTOP-4412开发板已经起来了，然后打开PC的浏览器，
输入开发板的ip地址，如下图所示：

输入完成后，按回车，即可打开开发板的index.html页面，如下图所示：

我们可以选中led1和led2右边的复选框，如下图所示：

然后点击页面上的“submit”按钮，会打开一个新的web页面，如下图：

上图中的页面里面的信息就是我们的myled.cgi程序里面的printf打印出来的，
其中“receive data:led1=1&led2=2&submit=submit” ，就是客户端通过get方式传递给web服务器的数据，下面两行的1和2是myled.cgi程序从“receive
data:led1=1&led2=2&submit=submit”里面解析出来的值。同时我们还可以在串口上看
到iTOP-4412开发板led驱动打印出来的信息，如下图所示：