HTML+CSS+JavaScript+CGI

ARM 68浏览


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">&nbsp;后台管理程序</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/htmlnn");
        printf("%u|%u|%u|%u", DI[0],DI[1],DI[2],DI[3]);
         return 0;

}