基于WEB的远程控制

1、物理与电子工程学院设计实验报告PAGE PAGE 22 嵌入式系统设计设计性实验报告 题目 基于web的远程控制设计 系 别 年 级 专 业 班 级 学 号 学生姓名 指导教师 实验时间 目 录 TOC o 1-3 h z u HYPERLINK l _Toc343166563 前 言 PAGEREF _Toc343166563 h 2 HYPERLINK l _Toc343166564 引 言 PAGEREF _Toc343166564 h 2 HYPERLINK l _Toc343166565 课题要求 PAGEREF _Toc343166565 h 3 HYPERLINK l _Toc3

2、43166566 1、课题目的： PAGEREF _Toc343166566 h 3 HYPERLINK l _Toc343166567 2、运行环境： PAGEREF _Toc343166567 h 3 HYPERLINK l _Toc343166568 正 文 PAGEREF _Toc343166568 h 3 HYPERLINK l _Toc343166569 一、课题分析： PAGEREF _Toc343166569 h 3 HYPERLINK l _Toc343166570 二、实验原理： PAGEREF _Toc343166570 h 3 HYPERLINK l _Toc34316

3、6571 三、系统设计： PAGEREF _Toc343166571 h 3 HYPERLINK l _Toc343166572 1、配置BOA 服务器： PAGEREF _Toc343166572 h 4 HYPERLINK l _Toc343166573 2、CGI原理及程序设计与编写 PAGEREF _Toc343166573 h 5 HYPERLINK l _Toc343166603 3、网页文件index.html设计 PAGEREF _Toc343166603 h 6 HYPERLINK l _Toc343166604 4、LED灯的驱动 PAGEREF _Toc343166604

4、 h 6 HYPERLINK l _Toc343166605 四、实验现象 PAGEREF _Toc343166605 h 6 HYPERLINK l _Toc343166606 五、实验注意点及问题 PAGEREF _Toc343166606 h 6 HYPERLINK l _Toc343166607 1、实验注意点： PAGEREF _Toc343166607 h 6 HYPERLINK l _Toc343166608 2、问题： PAGEREF _Toc343166608 h 6 HYPERLINK l _Toc343166609 总结体会 PAGEREF _Toc343166609 h

5、 7 HYPERLINK l _Toc343166610 附件1：CGI程序 PAGEREF _Toc343166610 h 8 HYPERLINK l _Toc343166708 附件2：网页（html文件）程序 PAGEREF _Toc343166708 h 10 HYPERLINK l _Toc343166734 设计性实验报告成绩： 指导教师签名： PAGEREF _Toc343166734 h 11前 言随着计算机技术和网络通信技术的飞速发展，人们日常生活和工业生产等方面对基于以太网进行远程通信和控制的要求日益强烈。现代实验设备由于其高度的精密和复杂性以及大量的信息获取和处理要求,

6、基本上涵盖网络化生产与商业的技术问题, 使得它成为一个非常好的前期模型。基于Web的远程控制对远程终端要求低,再加上互联网技术的普及,基于Web的远程控制这种方式将会广泛应用到工业设备远程监控,自动化农业,网络化信息家电,智能楼宇,远程安防监控系统等。目前市场上虽已有成熟的Web服务器可供远程控制系统选择，但多是基于通用计算机或专用服务器，体积及成本不适合小型控制系统，尤其是在一些环境恶劣，不易值守或无法安装计算机控制系统的场所。如今嵌入式技术发展迅速，嵌入式处理器的性能不断提高，基于嵌入式的控制系统得到广泛应用。这个实验研究了基于Web 的远程控制实验系统的硬件和软件设计方法, 重点讨论了远

7、程数据通信实现等关键技术, 并用计算机网络对Led灯的控制。引 言近年来,随着互联网在全球的飞速发展,网络技术广泛应用于各种企业和工业系统,越来越多的信息化产品需要能够接入互联网通过Web页面进行远程访问和控制。这种程序结构也就是大家非常熟悉的B/S结构，即在 嵌入式设备上运行一个支持脚本或CGI功能的Web服务器，能够生成动态页面，在用户端只需要通过Web浏览器就可以对嵌入式设备进行管理和监控，非常方便实用。基于Web的远程控制设计，我们首先需要在嵌入式设备上成功移植支持脚本或CGI功能的Web服务器，然后才能进行应用程序的开发。嵌入式Web服务器移植，我们常用的是Boa服务器的移植。课题要

8、求课题目的：在2440开发板上移植一个boa程序，使开发板可以作为一个WEB服务器使用。在PC计算机上使用浏览器测试嵌入式WEB服务器的功能。建立嵌入式系统的WEB服务功能（Boa服务器的建立参考实验“嵌入式WEB服务器实验”说明），利用WEB页远程控制嵌入式系统中的硬件状态，如控制Led等的点亮、熄灭等动作。运行环境： 硬件：up-Star 认证考试实践板、PC 机Pentium 500 以上, 硬盘10G 以上。软件：PC 机操作系统REDHAT LINUX 9.0MINICOMARM-LINUX 开发环境正 文课题分析：这个实验基于Web的远程控制系统是以嵌入式Web服务器为中心,通过I

9、nternet网远程访问嵌入式Web服务器,嵌入式Web服务器通过现场总线控制各个LED灯,以达到远程监控的目的,实现PC机的浏览器可通过Internet网访问嵌入式Web服务器。通过对嵌入式系统的结构形式主要有通用平台、系统架构、硬件架构、软件架构以及硬件、软件的设计方案介绍,系统的将现场数据采集设备、本地Web服务器和远端监控主机三部分构成的基于Web的远程控制系统做了较为全面的介绍和设计。实验原理： 基于web 的远程控制系统开发步骤如下：1、建立可用的软件开发环境；2、移植Boa 服务器；3、开发所需的驱动程序；4、编写html 页面；5、编写CGI 程序，实现远程控制；6、登陆服务器

10、，测试系统功能。系统设计：1、配置BOA 服务器：(1) 依照实验要求编译BOA 服务器，并生成可执行文件BOA，并且在开发板的/var的文件下建立实验所需的文件夹及文件。拷贝Boa源码目录下已有的一个示例boa.conf，并在其基础上进行修改:Port 80#Listen User rootGroup 0#ServerAdmin rootlocalhostErrorLog /var/web_boa/log/error_logAccessLog /var/web_boa/log/access_log#UseLocaltime#VerboseCGILogsServerName .here#Vir

11、tualHost DocumentRoot /var/web_boa/wwwUserDir public_htmlDirectoryIndex index.htmlDirectoryMaker /usr/lib/boa/boa_indexer# DirectoryCache /var/spool/boa/dircacheKeepAliveMax 1000KeepAliveTimeout 10MimeTypes /var/web_boa/mime.typesDefaultType text/plainCGIPath /bin:/usr/bin:/usr/local/binAlias /doc /

12、usr/docScriptAlias /cgi-bin/ /var/web_boa/www/cgi-bin/(2)利用挂载功能将BOA 执行文件复制到开发板/var的文件夹下；(3)利用挂载功能将boa.conf文件复制到开发板/var的文件夹下。在/var下建立web_boa目录等，根据boa.conf文件中的内容相应创建需要的目录。另外，在虚拟机的/etc目录下拷贝mime.types文件到开发板。将生成的执行文件boa、pass.cgi及index.html文件传到开发板指定目录（boa.conf文件中指定）。（4）运行boa文件 = 1 * GB3 * MERGEFORMAT up-t

13、ech: #cd /var = 2 * GB3 * MERGEFORMAT up-tech:/var#./boa = 3 * GB3 * MERGEFORMAT 打开浏览器输入开发板的IP地址运行程序2、CGI原理及程序设计与编写（1）CGI程序编写（详细程序见附件1）for ( i = 0; i (int)strlen(input); i+ ) if ( inputi = V ) j=inputi+1; if (j=1) ioctl(fd, 1, 0); ioctl(fd, 0, 1); ioctl(fd, 0, 2); if(j=2) ioctl(fd, 0, 0); ioctl(fd,

14、1, 1); ioctl(fd, 0, 2); if(j=3) ioctl(fd, 0, 0); ioctl(fd, 0, 1); ioctl(fd, 1, 2); close(fd); printf(Your POST Message is %s n, input); return 0;（2）CGI文件的生成 = 1 * GB3 * MERGEFORMAT 在虚拟机的终端环境中打开文件所在的文件夹 = 2 * GB3 * MERGEFORMAT 输入arm-linux-gcc -o pass.cgi pass.c3、网页文件index.html设计（1）网页（html文件）设计（见附件2）（

15、2）利用挂载功能将文件复制到开发板的/var/web_boa/www的文件夹下（3）运行结果4、LED灯的驱动驱动的编译：make modules；将驱动程序下载到开发板上;加载驱动程序命令： insmod 驱动名；手动创建设备节点：mknod /dev/led c 231 0。实验现象 连好实验设备后，执行boa，在远程联网计算机上通过浏览器输入开发板IP，就可以远程控制实验板上led灯的亮灭。按0即第一个灯亮，按1即第二个灯亮，按2即第三个灯亮。实验注意点及问题1、实验注意点：（1）容量较大的文件上传到开发板要用ftp。如果需要用挂载则要将nolock改为nolock rsize=1024

16、,wsize=1024这样才能顺利的上传。（2）生成文件夹mkdir *，生成文件touch *。（3）文件的移动：mv 文件的复制：cp（4） CGI文件的生成：arm-linux-gcc -o pazss.cgi pass.c2、问题：（1）挂载挂不上：可能是没连接开发板，也可能是本地网络连接禁用错误的原因。（2）压缩包的解压缩：解压缩时我们不能像平常一样直接右击解压缩到当前文件，而是应该将压缩包拷到自己文件下，用rootlocalhost webserver#tar zxvf boa-0.94.13.tar.gz 。（3）Boa执行后打不开网页或者打开网页错误：可能是网页出现了错误，也许

17、是cgi自身出了问题，或是配置文件的路径发生了错误，这些问题可以通过检查路径和文件解决。（4）无法控制Led灯：最可能的原因是未添加Led灯的驱动，异是Led灯的驱动程序出现错误。（5）开发板ping出错：1.自动桥接 2.换个IP地址再激活。（6）源文件的拷贝：实验过程中，一些源文件在虚拟机上修改以后，应该重新将其加载到开发板上，并将原来的文件覆盖掉。总结体会此次实验课题是基于web的远程控制设计。通过本次实验，我熟悉了基于Web下远程控制Led的方法，对CGI原理有了进一步了解，掌握了BOA的移植方法。这次实验是嵌入式实验的最后一个综合性设计实验，前前后后经历了两周时间。第一周我只是大概了

18、解了一下整个过程，完成了网页的设计，和boa的移植。因为课前预习了实验讲义，所以过程还是顺利的。第二周根据我们课前编好的CGI代码，进行实验的整体操作。在这个过程中问题还是蛮多的。然而我通过询问老师还有同学以及自己的查资料，更多地了解嵌入式的一些基本术语还有这些术语的作用，以及在什么时候使用它改如何使用它。还有就是当我遇到问题或麻烦的时候我该怎样去解决问题，我该怎么运用我所学的知识走出这个谜团，以及以最好的方式解决当前的问题。通过这次实验我总结了要如何学习嵌入式。首先要保持良好的心态，不能急于求成，要一步一个脚印的坚持；然后要有清晰的学习规划，明确学习步骤，明确先学什么，再学什么，比如C语言是

19、学习嵌入式的基础，所以在学习时必须要踏踏实实，把地基给打好；最后要有良好的学习氛围。嵌入式学习的难度和高度决定了嵌入式的学习要有个良好的学习讨论氛围，不能一味自己闷头学，要多去讨论和探讨或是想老师寻求答案但自己一定要明白其中的道理，汲取大家的智慧才能更好的提高。在整个学期中，虽然嵌入式很难学习，很难掌握，但我还是挺喜欢嵌入式的，因为它可以带给我许多接触不到的事物，也渐渐习惯了看满屏代码的感觉。希望如果有机会还能对嵌入式有所学习。附件1：CGI程序 #include #include #include char* getcgidata(FILE* fp, char* requestmethod)

20、;int main() char *input; char *req_method; / char led1064; char led264; char a; int i = 0; int j = 0; int fd; printf(Content-type: text/plain; charset=iso-8859-1nn); printf(Content-type: text/htmlnn); printf(The following is query reuslt:); fd = open(/dev/led, 0); if (fd 0) perror(open device /dev/l

21、ed); exit(1); ioctl(fd, 1, 0); req_method = getenv(REQUEST_METHOD); input = getcgidata(stdin, req_method); /根据input中的字符串信息确定led灯的点亮关闭 /以下补充完善代码 for ( i = 0; i (int)strlen(input); i+ ) if ( inputi = V ) j=inputi+1; if (j=1) ioctl(fd, 1, 0); ioctl(fd, 0, 1); ioctl(fd, 0, 2); if(j=2) ioctl(fd, 0, 0); i

22、octl(fd, 1, 1); ioctl(fd, 0, 2); if(j=3) ioctl(fd, 0, 0); ioctl(fd, 0, 1); ioctl(fd, 1, 2); close(fd); printf(Your POST Message is %s n, input); return 0;char* getcgidata(FILE* fp, char* requestmethod) char* input; int len; int size = 1024; int i = 0; if (!strcmp(requestmethod, GET) input = getenv(Q

23、UERY_STRING); return input; else if (!strcmp(requestmethod, POST) len = atoi(getenv(CONTENT_LENGTH); input = (char*)malloc(sizeof(char)*(size + 1); if (len = 0) input0 = 0; return input; while(1) inputi = (char)fgetc(fp); if (i = size) inputi+1 = 0; return input; -len; if (feof(fp) | (!(len) i+; inp

24、uti = 0; return input; i+; return NULL;附件2：网页（html文件）程序Led远程控制 嵌入式LED远程控制系统亮灯位置012 设计性实验报告成绩： 指导教师签名： 附录资料：从 XML 生成可与 Ajax 共同使用的 JSON时下，非常流行使用 JavaScript 代码为数据驱动的 Web 应用程序添加互动性。若能将数据编码成 JavaScript Object Notation（JSON）的格式，您就可以更轻松地通过 JavaScript 语言使用它。通过本文，发掘使用 XSLT V2 从 XML 数据生成 JSON 的几种不同方法。几年前，许多开发

25、人员很看好 XML、XSLT、Extensible HTML （XHTML）和其他一些基于标记的语言。现在，Asynchronous JavaScript and XML（AJAX）成了新的热点，人们又将目光转向了使用 JavaScript 代码的数据驱动的富 Internet 应用程序。但是开发人员是否已经消除了 XML 和这一新技术之间的鸿沟呢？当然，您可以在 Web 客户机中使用 XML 解析器来读取数据，但这种做法会带来两个问题。第一，出于安全方面的原因，XML 数据只能从与此页面相同的那个域中读取。这虽然不是什么大的限制因素，但它的确会引起部署方面的问题，还会阻碍 DHTML 小部件

26、的创建。第二，读取和解析 XML 会非常慢。另一种做法是让服务器执行 XML 的解析工作，方法是设置服务器，使之向浏览器发送以 JavaScript 代码或时下流行的 JavaScript Object Notation（JSON）编码的数据。本文将展示如下三种使用 XSLT V2 语言和 Saxon XSLT V2 处理器从 XML 数据生成 JSON 的技巧： 简单编码 通过函数调用加载数据 编码对象 JSON 简介要学习如何将数据编码成 JSON（它只是 JavaScript 的一个子集），最好的方法是从数据开始。清单 1 显示了书籍列表的一个示例 XML 数据集。清单 1. 基本的图形

27、化图书馆 Code Generation in Action JackHerrington Manning PHP Hacks JackHerrington OReilly Podcasting Hacks JackHerrington OReilly 这个数据集很简单，只包含三本书，每本书都具有惟一的 ID、书名、作者姓名及出版商的名字。（没错，我只选择了我自己的书作为数据集，但能怨我吗？这些书实在是不可多得的节日和生日礼物。）清单 2 显示了这些数据在 JSON 中的效果。清单 2. JSON 中的示例数据集 id: 1, title: Code Generation in Action,

28、 first: Jack, last: Herrington, publisher: Manning , . 方括号 () 表明这是一个数组。大括号 () 则表明这是一个散列表，该散列表由一组名称和值对组成。在本例中，我创建了一个散列表的数组 用来存储这类结构式数据的一种常见方法。另外一点值得注意的是字符串是通过单引号或双引号被编码的。所以，如果我想用单引号编码 OReilly，我就必须使用反斜杠对它进行转义：OReilly。 这让我编写的这个 XSLT 样式表更为有趣了一些。我并未在本例中放上任何日期，但您也可以通过如下两种方法来编码日期。第一种方法是将日期作为字符串，该字符串必须在后面被解

29、析。第二种方法是将日期作为一个对象，比如：publishdate: new Date( 2006, 6, 16, 17, 45, 0 )这段代码将 publishdate 的值设置为6/16/2006 5:45:00 p.m.。简单编码接下来我将陆续介绍 JSON 编码的几种技巧。第一种也是其中最简单的一种，此样式表如 清单 3 所示。清单 3. simple.xsl 样式表 var g_books = 1, id: ,name: ,first: ,last: ,publisher: ;要理解此样式表，不妨先来看一下 清单 4 所示的输出。清单 4. simple.xsl 的输出var g_b

30、ooks = id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning, id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly, id: 3,name: Podcasting Hacks,first: Jack,last: Herrington,publisher: OReilly;这里，我将名为 g_books 的变量设置为一个包含三个散列表的数组，每个散列表包含关于该书的信息。再回过头来看看

31、清单 3，您会发现第一个模板匹配 / 路径，它也是首先应用到输入数据集的模板，该模板使用 for-each 循环来遍历每本书。之后，它使用 标记来将文本从该数据输出到 JavaScript 输出代码。对于字符串，我使用名为 js:escape() 的定制函数，它在模板之前定义。该函数使用一个正则表达式将一个单引号标记更改为带有反斜杠的单引号标记。最后一个重要的元素是 标记，它告知处理器要输出的是文本而不是 XML。要检验此过程是否可以正常工作，我加入了一个 simple .html 文件，该文件引用我在 simple.js 保存的 XSL 样式表的输出。这个 HTML 文件如 清单 5 所示。

32、清单 5. simple.html 文件Simple JS loaderdocument.write( Found +g_books.length+ books );.html 文件使用 标记简单地加载已编码了的 JavaScript 代码。之后，第二个 标记将数组的长度写出到浏览器页面，如 图 1 所示。图 1. simple.html 的输出好了！数据文件包含三本书，相应的 JavaScript 文件也包含三本书。它真的可以工作！通过函数加载上述第一个示例很简单，而且在大多数情况下可以发挥其作用，但它存在一些问题。第一个问题是对于数据何时被加载没有任何提示。如果数据是像页面那样被静态加载的

33、，这不成问题。但是如果页面动态创建了一个 标记来按需加载数据，那么就很有必要知道 标记是何时完成的。实现此功能的最好的方法是让编码了的数据调用一个 JavaScript 函数，而不是只设置数据。这个概念很重要，所以我将花一些时间来介绍一下为什么您必须要通过动态生成的 标记来加载数据。页面加载后，从服务器获得数据是 Web 2.0 的核心功能。一种方法是使用 AJAX 机制通过到服务器的调用来加载 XML。然而，出于安全性的原因，AJAX 机制只限于从单一域获取数据。这在大多数情况下都没有问题，但有时，您可能需要 JavaScript 代码运行在他人的页面上（例如，Google Maps）。在这

34、种情况下从服务器获得数据的惟一方法是通过动态加载 标记。获悉 标记何时加载的最好的方法是让 标记返回的脚本调用函数而不是简单地加载数据。清单 6 显示了在函数调用中编码的数据。清单 6. Function1.jsAddBooks( id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning, id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly, id: 3,name: Podcasting Hac

35、ks,first: Jack,last: Herrington,publisher: OReilly );清单 7 给出了相应的 .html 文件。清单 7. Function1.htmlFunction 1 JS loadervar g_books = ;function AddBooks( books ) g_books = books; drawbooks( g_books );稍后将详细介绍 drawbooks 函数。这里重要的是了解一下页面如何定义 AddBooks 函数，该函数随后会由 function1.js 文件中的脚本调用。该 AddBooks 函数负责处理数据。而且被调用的

36、 AddBooks 函数会向页面指示 标记被正确加载，并已加载完成。要创建 function1.js 文件，我只对样式表稍微做了一点修改，如 清单 8 所示。清单 8. function1.xsl 样式表AddBooks( 1, id: ,name: ,first: ,last: ,publisher: );这里，我调用了一个函数，而不是简单地设置一个变量。这就是我所做的惟一更改。回到页面，我使用了 drawbooks 函数来构建书的表格，这样我就能够确认数据被正确编码和正确显示。此函数是在 drawbooks.js 内定义的，如 清单 9 所示。清单 9. Drawbooks.jsfunct

37、ion drawbooks( books ) var elTable = document.createElement( table ); for( var b in books ) var elTR = elTable.insertRow( -1 ); var elTD1 = elTR.insertCell( -1 ); elTD1.appendChild( document.createTextNode( booksb.id ) ); var elTD2 = elTR.insertCell( -1 ); elTD2.appendChild( document.createTextNode(

38、 ) ); var elTD3 = elTR.insertCell( -1 ); elTD3.appendChild( document.createTextNode( booksb.first ) ); var elTD4 = elTR.insertCell( -1 ); elTD4.appendChild( document.createTextNode( booksb.last ) ); var elTD5 = elTR.insertCell( -1 ); elTD5.appendChild( document.createTextNode( booksb.pub

39、lisher ) ); document.body.appendChild( elTable );这个简单函数创建了一个表格节点，然后循环访问书的列表并为每本书创建一行，为每个数据元素分配一个单元格。此页面上的代码的结果如 图 2 所示。图 2. function1.html 的结果现在我就可以查看一下此页面的输出并确认来自原始 .xml 文件的一切均已被正确转换成 JavaScript 代码，且数据被发送到 AddData 函数并被正确添加到页面。细化函数调用技术我很喜欢函数调用这一技术，但我并不赞同将所有图书数据都放入一个块中。另一种方式是为每条记录采用一个调用，如 清单 10 所示。清单

40、 10. Function2.jsAddBook( id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning );AddBook( id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly );.对 .html 页面只需做少许修改，如 清单 11 所示。清单 11. Function2.html.var g_books = ;function AddBook( book ) g_books.push(

41、 book ); .这里更改了 XSLT，以使函数调用驻留在 for-each 循环体内。清单 12 显示了更新后的样式表。清单 12. function2.xsl.AddBook( id: ,name: ,first: ,last: ,publisher: );.对这个给定示例来说，这种更改看起来有些随意。但如果原始的 XML 数据集有多种数据类型，要为每种类型分配一个单独的函数调用会使 XSL 和页面上的 JavaScript 代码更为简单、更易于维护。编码对象对小的页面来讲，使用 JavaScript 函数没有问题。但对于大型项目，就需要使用 JavaScript 语言的一些面向对象特性

42、。是的，JavaScript 语言可以处理对象而且可以处理得很好。清单 13 显示了如何创建带有数据的对象。清单 13. Object1.jsg_books.push( new Book( id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning ) );g_books.push( new Book( id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly ) );在本例中，我只简单地向名为 g_books 的数组添加了 Book 对象。JavaScript 的对象创建与 Java、C# 或 C+ 编程语言的对象创建十分相似。都是一个 new 操作符后跟一个类名。参数放到随后的括号内。在本例中，我传入了一个带值的单一散列表，并将其分割成单独的一些参数。创建此对象的代码如 清单 14 所示。清单 14. Object1.xslg_books.push( new Book( id: ,name: ,first: ,last: ,publisher: ) );此页面内最值得注意的是定义 Book 类的