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

歌之王子殿下 发布于 2016/03/14 18:08
阅读 238
收藏 0

本文转自迅为:http://www.topeetboard.com

 

 

   大家好,上一章我们讲了在iTOP-4412开发板上搭建web服务器,这一章我

们在前面一章的基础上讲解一下通过web网页实现控制LED

要实现控制led,我们需要CGI编程,CGICommon 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提交过来的数据,然后对获得的数

据解析,最后会调用ledioctl函数来点亮或关闭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命令修改下它

的权限,如下图所示:

 

 

现在控制ledweb程序就已经完成了,现在启动开发板,如下图所示:

 

 

通过上图我们可以看到iTOP-4412开发板已经起来了,然后打开PC的浏览器,

输入开发板的ip地址,如下图所示:

 

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

 

 

我们可以选中led1led2右边的复选框,如下图所示:

 

 

 

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

 

 

 

上图中的页面里面的信息就是我们的myled.cgi程序里面的printf打印出来的,

其中“receive data:led1=1&led2=2&submit=submit” ,就是客户端通过get方式传递给web服务器的数据,下面两行的12myled.cgi程序从“receive

data:led1=1&led2=2&submit=submit”里面解析出来的值。同时我们还可以在串口上看

iTOP-4412开发板led驱动打印出来的信息,如下图所示:

 

 

 

至此通过web页面控制led的实验已经完成了,大家可以参照这个例程来自己实

现一个控制蜂鸣器的web程序。

 

 

 

加载中
返回顶部
顶部