查看: 8292|回复: 2

[进阶] 教你如何完美使用Ethernet模块

本帖最后由何处不江南于 2013-11-21 13:50 编辑

今天在QQ空间找到了Arduino炫项目，是通过web来控制电器，地址为：http://user.qzone.qq.com/1485592 ... &pos=1366299761，分享给大家,以下是正文，颤抖吧：大致步骤：

访问服务器端WEB主页面》》》
主页面向Arduino发送POST请求数据》》》
Arduino接收并解码主页的请求，同时将变更的值进行合成出子页面，传给主页面的iframe》》》

主页面延时一定时间，等待Arduino反馈的页面并进行局部iframe刷新>OK！

恩，我自己看都觉得复杂，不过响应速度相当好！（平均20ms内）

老子好像变成程序员了 = =！

教你如何完美使用Ethernet模块图1

WEB端程序：

<!doctype html>
<html lang="en">
<head><meta charset="utf-8" />
<meta name="viewport" content="width=200px"/>
<title>Light-Microduino</title>
<link rel="stylesheet" href="jquery-ui.css" />
<style>


.STYLE4 {
    color:#CCCCCC;
    margin: 0 auto;
    bottom: 10%;
    left:42%;
}
.STYLE6 {
    font-size: medium;
    color: #CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
}
.STYLE8 {
    font-size: x-large;
    color: #CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
}
.STYLE9 {font-size: large}
.STYLE10 {font-size: small}
</style>
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script>

function show(){
        $("#s1").attr("src", "http://192.168.1.122");
        document.getElementById("#s1").contentDocument.location.reload(true); 
}

    $(document).ready(function (){

        $("#button10").click(function(){
        status1=10;
        $.post("http://192.168.1.122",{"lightstatus":status1});
        t = setTimeout("show()",60);
        });
        $("#button11").click(function(){
        status1=11;
        $.post("http://192.168.1.122",{"lightstatus":status1});
        t = setTimeout("show()",60);
        });

        $("#button20").click(function(){
        status2=20;
        $.post("http://192.168.1.122",{"lightstatus":status2});
        t = setTimeout("show()",60);
        });
        $("#button21").click(function(){
        status2=21;
        $.post("http://192.168.1.122",{"lightstatus":status2});
        t = setTimeout("show()",60);
        });
        
        $("#button30").click(function(){
        status3=30;
        $.post("http://192.168.1.122",{"lightstatus":status3});
        t = setTimeout("show()",60);
        });
        $("#button31").click(function(){
        status3=31;
        $.post("http://192.168.1.122",{"lightstatus":status3});
        t = setTimeout("show()",60);
        });
        
        $("#button40").click(function(){
        status4=40;
        $.post("http://192.168.1.122",{"lightstatus":status4});
        t = setTimeout("show()",60);
        });
        $("#button41").click(function(){
        status4=41;
        $.post("http://192.168.1.122",{"lightstatus":status4});
        t = setTimeout("show()",60);
        });
        
        clearTimeout(t);
        
        });

</script>

</head>

<div id="zoom">

<body style="background-color:black";>
<div style="width:540px; height:920px; top:44%; margin:0 auto; padding-left:1%; padding-right:1%; "  >

<div style="margin:0 auto; margin-left: 7px; margin-top:-46px;">
    <iframe id="s1" name="s1" src="http://192.168.1.122" frameborder="0" scrolling="no" height="115" width="520"></iframe>
</div>

<div style="font:bold 14px verdana; text-align:left; margin-top: -36px;">
<br/>
<br/>
<table width="510" height="182" border="0">
  <tr>
    <td><button type="button" id="button10" style="background:url('OFF.png');border-style:none;width:115px;height:44px;
background-repeat:no-repeat;"/>?</td>
    <td><button type="button" id="button20" style="background:url('OFF.png');border-style:none;width:115px;height:44px;
background-repeat:no-repeat;"/>?</td>
    <td><button type="button" id="button30" style="background:url('OFF.png');border-style:none;width:115px;height:44px;
background-repeat:no-repeat;"/>?</td>
    <td><button type="button" id="button40" style="background:url('OFF.png');border-style:none;width:115px;height:44px;
background-repeat:no-repeat;"/>?</td>
  </tr>
  <tr>
    <td><button type="button" id="button11" style="background:url('ON.png');border-style:none;width:115px;height:44px;
background-repeat:no-repeat;"/>?</td>
    <td><button type="button" id="button21" style="background:url('ON.png');border-style:none;width:115px;height:44px;
background-repeat:no-repeat;"/>?</td>
    <td><button type="button" id="button31" style="background:url('ON.png');border-style:none;width:115px;height:44px;
background-repeat:no-repeat;"/>?</td>
    <td><button type="button" id="button41" style="background:url('ON.png');border-style:none;width:115px;height:44px;
background-repeat:no-repeat;"/>?</td>
  </tr>
  <tr>
    <td  >    <div align="center"><span class="STYLE6">NO.1</span> <span class="STYLE8">通风</span></div></td>
    <td>    <div align="center"><span class="STYLE6">NO.2</span> <span class="STYLE8">加热</span></div></td>
    <td>    <div align="center"><span class="STYLE6">NO.3</span> <span class="STYLE8">加湿</span></div></td>
    <td>    <div align="center"><span class="STYLE6">NO.4</span> <span class="STYLE8">采光</span></div></td>
  </tr>
</table>
</div>

    <div class="STYLE4">
    <div align="center" style="margin:0 auto; width: 100%;">
    <span class="STYLE9">智能农业系统 </span><span class="STYLE10">Via_JJU</span>    </div>
</div>
</div>

</body>
</div>
</html>
复制代码

Arduino端程序：

#include <EtherCard.h>

#define NUM    4

#define PIN1    A0
#define PIN2    A1
#define PIN3    A2
#define PIN4    A3

int RELAY_PIN[NUM];
uint8_t lightStatus[NUM];

int light;

static byte mymac[] = { 
  0x74,0x69,0x69,0x2D,0x30,0x31 };
static byte myip[] = { 
  192,168,1,122 };
static byte gwip[] = { 
  192,168,1,1};

byte Ethernet::buffer[900];


void setup () {

  Serial.begin(9600);
  Serial.println("Light Microduino");

  if(!ether.begin(sizeof Ethernet::buffer, mymac,10))
    Serial.println( "Failed to access Ethernet controller");
  else
    Serial.println("Ethernet controller initialized");

  if(ether.staticSetup(myip, gwip)){
    Serial.println("Set static IP ok!");
  }
  else{
    Serial.println("Set static IP Failed!");  
  }

  RELAY_PIN[0]=PIN1;
  RELAY_PIN[1]=PIN2;
  RELAY_PIN[2]=PIN3;
  RELAY_PIN[3]=PIN4;

  for(int a=0;a<NUM;a++)
  {
    pinMode(RELAY_PIN[a], OUTPUT);
    digitalWrite(RELAY_PIN[NUM], LOW);  
    lightStatus[a]=0;
  }
}

void loop() {

  word len = ether.packetReceive();
  word pos = ether.packetLoop(len);

  if(pos) {
    if(strstr((char *)Ethernet::buffer + pos, "POST") !=0) {
      sscanf((char *)strstr((char *)Ethernet::buffer + pos, "lightstatus"),"lightstatus=%d",&light);
    }

    switch(light)
    {
    case 10:lightStatus[0]=0;break;
    case 11:lightStatus[0]=1;break;
    case 20:lightStatus[1]=0;break;
    case 21:lightStatus[1]=1;break;
    case 30:lightStatus[2]=0;break;
    case 31:lightStatus[2]=1;break;
    case 40:lightStatus[3]=0;break;
    case 41:lightStatus[3]=1;break;
    }
    for(int a=0;a<NUM;a++)
    {
      if (lightStatus[a]){
        digitalWrite(RELAY_PIN[a], HIGH);
      }
      else{
        digitalWrite(RELAY_PIN[a], LOW);
      }    

        Serial.print(lightStatus[a]);  
        Serial.print(",");  
    }

      Serial.println(" ");  

    BufferFiller bfill = ether.tcpOffset();
    bfill.emit_p(PSTR("HTTP/1.1 200 OK\r\n"
      "Content-Type: text/html\r\n"
      "Pragma: no-cache\r\n\r\n"
      "<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/>"
      "<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">"
      "<meta name="viewport" content="width=device-width,initial-scale=1.0">" 
      "<title>Button</title><style type="text/css"> body {background-color: #000000;} </style></head>"
      "<body><table width="500" border="0"><tr>"
      "<td><img src="http://www.mudi-china.com/pkj/arduino/GREEN/$D.jpg"></td><td><img src="http://www.mudi-china.com/pkj/arduino/GREEN/$D.jpg"></td>"
      "<td><img src="http://www.mudi-china.com/pkj/arduino/GREEN/$D.jpg"></td><td><img src="http://www.mudi-china.com/pkj/arduino/GREEN/$D.jpg"></td>"
    "</tr></table></body></html>"),lightStatus[0],lightStatus[1],lightStatus[2],lightStatus[3]);
    ether.httpServerReply(bfill.position());
  }
}
复制代码