本文介绍了一个使用HTML、CSS、JavaScript和CGI实现的简单应用案例，该应用能够从ARM寄存器中读取数据并在网页上显示，同时允许用户通过网页控制ARM寄存器的状态。
HTML+CSS+JavaScript+CGI
读数据过程：.cgi程序通过在boa服务器下运行，从arm的寄存器获取数据，再传送给JavaScript，.js程序再传送.HTML文件。
写数据：.html传递形参给.js，.js传送给.cgi,.cgi通过报文写arm的寄存器。
HTML程序
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>开入开出</title>
<link rel="stylesheet" type="text/css" href="layout.css">
<script type="text/javascript" src="DIO.js"></script>
<style type="text/css">
</style>
</head>
<body onload="DIO_load()">
<img src="logo.gif" alt="" style="position:absolute;margin-top:0px;margin-left:0px;">
<div id="main">
<div id="title">
<font id="title_text"> 后台管理程序</font>
</div>
<div id="head">
<span class="goto">
<a href="rtd.html">实时数据</a>
</span>
<span class="goto">
<a href="elec_real.html">电能监测</a>
</span>
<span class="goto" >
<a href="Har_data.html">谐波清单</a>
</span>
<span class="goto">
<a href="flicker.html">波动与闪变</a>
</span>
<span class="goto">
<a href="unbalance.html">三相不平衡</a>
</span>
<span class="goto"style="background-color:#33cc33;" >
<a href="DIO.html">开入开出</a>
</span>
<span class="goto" >
<a href="set.html">系统设置</a>
</span>
<span class="goto" >
<a href="analyse.html">分析数据</a>
</span>
</div>
<div style="position:relative;width:930px; height:420px; background-color:#33cc33; left:0px;top:100px; border:5px #33cc33; ">
</div>
<div id="body" style="background-color:white;">
<table style="text-align:center; border:2px solid #ccffcc; border-radius:10px; margin-left:60px; margin-top:50px;" id="DI_table">
<tr>
<td style="color:green;font-weight:bold;">通道</td>
<td style="color:green;font-weight:bold;">状态</td>
</tr>
<tr>
<td style="color:red;font-weight:bold;">DI_1</td>
<td><input type="text"class="text_border"style="color:red"id="DI0">
</tr>
<tr>
<td style="color:red;font-weight:bold;">DI_2</td>
<td><input type="text"class="text_border"style="color:red"id="DI1">
</tr>
<tr>
<td style="color:red;font-weight:bold;">DI_3</td>
<td><input type="text"class="text_border"style="color:red"id="DI2">
</tr>
<tr>
<td style="color:red;font-weight:bold;">DI_4</td>
<td><input type="text"class="text_border"style="color:red"id="DI3">
</tr>
</table>
</div>
<div style="position:absolute;width:400;height:300px;left:450px;top:150px;background-color:white;border-radius:10px;">
<table style="text-align:center; border:2px solid #ccffcc; border-radius:10px; margin-left:10px;margin-right:10px; margin-top:50px;" id="do">
<tr style="color:green; font-weight:bold;">
<td>通道</td><td>自定义</td><td>状态</td><td>控制</td><td>控制</td>
</tr>
<tr>
<td style="color:red;font-weight:bold;">DO_1</td>
<td><input type="text"id="define1"style="width:80px;text-align:center;color:red;"></input></td>
<td><input type="text"id="state1"style="width:60px;text-align:center;color:red;"></input></td>
<td><input type="button" name="btn_do1_open" value="开启" onclick="javascript:DO_set('1','1')"/></td>
<td><input type="button" name="btn_do1_close" value="关闭" onclick="javascript:DO_set('1','0')"/></td>
</tr>
<tr>
<td style="color:red;font-weight:bold;">DO_2</td>
<td><input type="text"style="width:80px;text-align:center;color:red;"></input></td>
<td><input type="text"id="state2"style="width:60px;text-align:center;color:red;"></input></td>
<td><input type="button" name="btn_do2_open" value="开启" onclick="javascript:DO_set('2','1')"/></td>
<td><input type="button" name="btn_do2_close" value="关闭" onclick="javascript:DO_set('2','0')"/></td>
</tr>
<tr>
<td style="color:red;font-weight:bold;">DO_3</td>
<td><input type="text"style="width:80px;text-align:center;color:red;"></input></td>
<td><input type="text"id="state3"style="width:60px;text-align:center;color:red;"></input></td>
<td><input type="button" name="btn_do3_open" value="开启" onclick="javascript:DO_set('3','1')"/></td>
<td><input type="button" name="btn_do3_close" value="关闭" onclick="javascript:DO_set('3','0')"/></td>
</tr>
<tr>
<td style="color:red;font-weight:bold;">DO_4</td>
<td><input type="text"style="width:80px;text-align:center;color:red;"></input></td>
<td><input type="text"id="state4"style="width:60px;text-align:center;color:red;"></input></td>
<td><input type="button" name="btn_do4_open" value="开启" onclick="javascript:DO_set('4','1')"/></td>
<td><input type="button" name="btn_do4_close" value="关闭" onclick="javascript:DO_set('4','0')"/></td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS程序
#main
{
width:1000px;
height:550px;
position:absolute;
left:200px;
top:10px;
border-radius:10px;
background-color:#33cc33;
}
#title
{
width:1000px;
height:60px;
position:absolute;
left:0px;
top:0px;
border-radius:10px;
line-height:60px;
color:red;
background-color:#ccffcc;
font-size:25px;
font-weight:25px;
}
#head
{
width:1000px;
height:40px;
position:absolute;
left:0px;
top:50px;
background-color:#009900;
border-radius:10px;
overflow:hidden;
}
#head2
{
width:1000px;
height:30px;
position:absolute;
left:0px;
top:0px;
background-color:#009900;
border-radius:10px;
overflow:hidden;
}
#body
{
width:400px;
height:300px;
position:absolute;
left:10px;
top:150px;
border-radius:10px;
background-color:white;
}
#do tr
{
height:30px;
line-height:30px;
color:blue;
}
#do td
{
height:30px;
width:100px;
line-height:30px;
}
#DI_flag
{
width:400px;
height:300px;
position:absolute;
left:450px;
top:150px;
border-radius:10px;
background-color:white;
}
#DI_table tr
{
height:30px;
line-height:30px;
color:blue;
}
#DI_table td
{
height:30px;
width:100px;
line-height:30px;
}
.goto
{
width:100px;
height:40px;
float:left;
text-align:center;
line-height:40px;
background-color:#009900;
border-radius:10px;
border:3px solid #009900;
}
.goto a:link {color:yellow; text-decoration: none;}
.goto a:hover {background-color:#33cc33;border-radius:10px;border:7px solid #33cc33;text-decoration: none;}
.goto a:active {color:#33cc33; text-decoration: none;}
.goto a:visited {color:#ffff00 ; text-decoration: none;}
.goto2
{
width:100px;
height:30px;
float:left;
text-align:center;
line-height:30px;
background-color:#009900;
border-radius:10px;
border:3px solid #009900;
}
.goto2 a:link {color:yellow; text-decoration: none;}
.goto2 a:hover {background-color:#33cc33;border-radius:10px;border:7px solid #33cc33;text-decoration: none;}
.goto2 a:active {color:#33cc33; text-decoration: none;}
.goto2 a:visited {color:#ffff00 ; text-decoration: none;}
.text_border
{
border:1px solid green;
}
JavaScript程序
/*
*创建异步访问对象
*/
function createXHR()
{
var xhr;
try
{
xhr = new ActiveXObject("Msxm12.XMLHTTP");
}
catch (e)
{
try
{/*code for IE5、IE6*/
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xhr = false;
}
}
if(!xhr && typeof XMLHttpRequest != 'undefined')
{
xhr = new XMLHttpRequest();
}
return xhr;
}
/*
*异步访问提交处理,4路DO
*/
function DIO_load()
{
DI_load();
DO_load();
}
function DI_load()
{
xhr_DI = createXHR();
if(xhr_DI)
{
var get_str_DI="cur_time=";
get_str_DI = get_str_DI + new Date().getTime();
xhr_DI.open("GET", "/test/cgi-bin/DI.cgi?" + get_str_DI);
xhr_DI.send(null);
xhr_DI.onreadystatechange = callbackFunction_DI;
}
else
{
alert("浏览器不支持，请更换浏览器！");
}
}
/*
异步回调函数处理！
*/
function callbackFunction_DI()
{
if(xhr_DI.readyState == 4)
{
if(xhr_DI.status==200)
{
var returnValue = xhr_DI.responseText;
if(returnValue !=null && returnValue.length > 0)
{
var response = xhr_DI.responseText.split("|");
document.getElementById("DI0").value = response[0];
document.getElementById("DI1").value = response[1];
document.getElementById("DI2").value = response[2];
document.getElementById("DI3").value = response[3];
}
else
{
alert("结果为空！");
}
}
else{
alert("界面出现异常！")
}
}
}
function DO_load()
{
xhr_read = createXHR();
if(xhr_read)
{
var check_str1;
check_str1 = check_str1 +"&cur_time";
check_str1 = check_str1 + new Date().getTime();
xhr_read.open("GET", "/test/cgi-bin/DO_read.cgi?" + check_str1);
xhr_read.send(null);
xhr_read.onreadystatechange = callbackFunction_read;
}
else
{
alert("浏览器不支持，请更换浏览器！");
}
}
/*
*异步回调函数处理
*/
function callbackFunction_read()
{
if (xhr_read.readyState == 4)
{
if (xhr_read.status == 200)
{
var returnValue = xhr_read.responseText;
if(returnValue != null && returnValue.length > 0)
{
var response = xhr_read.responseText.split("|");
document.getElementById("state1").value = response[0];
document.getElementById("state2").value = response[1];
document.getElementById("state3").value = response[2];
document.getElementById("state4").value = response[3];
setTimeout("DIO_load()",2000);
}
else
{
alert("访问数据为空！");
}
}
else
{
alert("页面数据交互异常！");
}
}
}
/*
*异步访问提交处理,4路DO
*/
function DO_set(flag1,flag2)
{
xhr_1 = createXHR();
if(xhr_1)
{
var check_str=flag1;
check_str=check_str+"&"+flag2;
check_str = check_str +"&cur_time";
check_str = check_str + new Date().getTime();
xhr_1.open("GET", "/test/cgi-bin/DO.cgi?" + check_str);
xhr_1.send(null);
xhr_1.onreadystatechange = callbackFunction_1;
}
else
{
alert("浏览器不支持，请更换浏览器！");
}
}
/*
*异步回调函数处理
*/
function callbackFunction_1()
{
if (xhr_1.readyState == 4)
{
if (xhr_1.status == 200)
{
var returnValue = xhr_1.responseText;
if(returnValue != null && returnValue.length > 0)
{
var response = xhr_1.responseText.split("|");
// alert("111");
if(response[0]=='1')
document.getElementById("state1").value = response[1];
else if(response[0]=='2')
document.getElementById("state2").value = response[1];
else if (response[0]=='3')
document.getElementById("state3").value = response[1];
else if(response[0]=='4')
document.getElementById("state4").value = response[1];
//alert("111");
//setTimeout("DI_load()",1000);
setTimeout("callbackFunction_1()",2000);
//document.getElementById("flag1").value = returnValue;
}
else
{
alert("访问数据为空！");
}
}
else
{
alert("页面数据交互异常！");
}
}
}
.c程序
#include <sys/types.h>
#include <sys/socket.h>
#include <linux/in.h>
#include <linux/un.h>
#include <string.h>
#include <signal.h>
#include <stdio.h>
#include <stdlib.h>
#include <errno.h>
#include <unistd.h>
#include <sys/ioctl.h>
#include <sys/select.h>
#include <sys/time.h>
//#include "addr.h"
#define DIbase 0x7000
#define db_max 1000
#define port 1000
int socket_fd;
char modbus_buf[256];
float host_to_client(short in,short gene)
{
float out;
float muti;
muti=32768/gene;
out=in/muti;
return out;
}
short client_to_host(float in,short gene)
{short out;
float muti;
muti=32768/gene;
out=in*muti;
return out;
}
int modbus_tcp_transfer(char *buf)
{int nwrite, nreads, ret;
char sendbuf[12];
struct sockaddr_in server_addr;
fd_set readfd;
struct timeval timeout;
sendbuf[0]=0;
sendbuf[1]=0;
sendbuf[2]=0;
sendbuf[3]=0;
sendbuf[4]=0;
sendbuf[5]=6;
sendbuf[6]=buf[0];
sendbuf[7]=buf[1];
sendbuf[8]=buf[2];
sendbuf[9]=buf[3];
sendbuf[10]=buf[4];
sendbuf[11]=buf[5];
if((socket_fd=socket(AF_INET,SOCK_STREAM,0))==-1){
close(socket_fd);
return -1;}
bzero(&server_addr, sizeof(server_addr));
server_addr.sin_family=AF_INET;
server_addr.sin_port=htons(port);
server_addr.sin_addr.s_addr=inet_addr("127.0.0.1");
if(connect(socket_fd,(struct sockaddr *)(&server_addr),sizeof(struct sockaddr))==-1)
{close(socket_fd);
return -1;}
timeout.tv_sec=1;
timeout.tv_usec=0;
FD_ZERO(&readfd);
FD_SET(socket_fd,&readfd);
if((nwrite=write(socket_fd,sendbuf,12))==-1){
close(socket_fd);
return -1;}
ret=select(socket_fd+1,&readfd,NULL,NULL,&timeout);
switch(ret){
case -1:
close(socket_fd);
return -1;
break;
case 0:
close(socket_fd);
return -1;
break;
default:
if(FD_ISSET(socket_fd,&readfd)){
if((nreads=read(socket_fd,buf,256))==-1){
close(socket_fd);
return -1;}
close(socket_fd);
return 0;}
break;
}
}
void create_modbus(char a1,char a2,char a3,char a4,char a5,char a6)
{modbus_buf[0]=a1;
modbus_buf[1]=a2;
modbus_buf[2]=a3;
modbus_buf[3]=a4;
modbus_buf[4]=a5;
modbus_buf[5]=a6;}
int main(int argc,char *argv[])
{
int ret=0;
unsigned char signed2char[2];
int i,k;
unsigned short DI[4];
char str1[5];
create_modbus(1,4,DIbase>>8,DIbase&0xff,0,4);
if((ret=modbus_tcp_transfer(modbus_buf))==-1)
exit(EXIT_FAILURE);
k=0;
for(i=0;i<4;i++)
{
signed2char[1]=modbus_buf[k+9]; //9
signed2char[0]=modbus_buf[k+10]; //10
DI[i]=*((short *)signed2char); //save
k=k+2;
}
printf("Content-Type:text/html\n\n");
printf("%u|%u|%u|%u", DI[0],DI[1],DI[2],DI[3]);
return 0;
}
扫一扫
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
