Home automation with Arduino Uno and Ethernet Shield

Hi All Expert,

I had built a DIY home automation. Currently I am using Zigbee to command the ON/OFF of lightings by my self-made remote control which had a zigbee inside also. Using Serial.println("R1L1"); i am able to toggle the room 1 light 1 lights to turn ON/OFF. This was preprogrammed into my wireless remote controller when certain button is pressed. When the lighting controller received this R1L1 string, it will just toggle the SSR to switch my lighting.

Currently I will like to upgrade my system to be wireless. I had another Uno with ethernet shield connected to my wireless router, I would like to have buttons to appear on the web browser so that click on the button will toggle my SSR also if the device is in the same WiFi network.

I also had a lightings that can be dim and had buttons to dim it and a slider to set the dim value. Once any of the Light DIM button is pressed, the slider value together with the number will be send Serial.println('R1L130"); will dim my light to 30% based on my coding in the dimmer board.

I had refer to this website http://tutorial.cytron.com.my/2011/07/27/an-arduino-room-monitoring-web-server/ but still not quite understand how to write the HTML for slider and how can pushbutton return a value.

I would like to know can Uno be stack with Ethernet shield and yet able to send serial string through Tx pin 1?

Can the web browser attached be implemented?

How should I control and read the return value and in turn transmit through my Zigbee? Any kind soul can give me a head start? Thanks a lot. Have a nice day

Can the web browser attached be implemented?

That is a web page as displayed in a browser, not a web browser.

A good resource for designing web pages is http://www.w3schools.com/html/default.asp (though they seem to be having some issues at the moment).

Sliders are not a supported HTML construct.

Hi, I had written the HTML code but dont know how to integrate into my Arduino code. Instead of slider, I had used combo box to do the selection

<!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>Untitled Document</title>
</head>

<body>

<h1>Home Automation System</h1>



Select Room
<select id="roomnum">
  <option value="R1">Room 1</option>
  <option value="R2">Room 2</option>
  <option value="R3">Room 3</option>
  <option value="R4">Room 4</option>
  <option value="R5">Room 5</option>
</select>








 <form  method="get" name="light1"> Light 1  <button name="L1" value="L1" type="submit">Toggle</button>
<button name="D1" value="D1" type="submit">Dim</button>
</form>



<form  method="get" name="light2"> Light 2    <button name="L2" value="L2" type="submit">Toggle</button>
<button name="D2" value="D2" type="submit">Dim</button>
</form>



  <form  method="get" name="light3"> Light 3  <button name="L3" value="L3" type="submit">Toggle</button>
<button name="D3" value="D3" type="submit">Dim</button>
</form>



 <form  method="get" name="light4"> Light 4   <button name="L4" value="L4" type="submit">Toggle</button>
<button name="D4" value="D4" type="submit">Dim</button>
</form>



 <form  method="get" name="light5"> Light 5   <button name="L5" value="L5" type="submit">Toggle</button>
<button name="D5" value="D5" type="submit">Dim</button>
</form>




Select Brightness
<select id="brightness">
  <option value="10">10%</option>
  <option value="20">20%</option>
  <option value="30">30%</option>
  <option value="40">40%</option>
  <option value="50">50%</option>
  <option value="60">60%</option>
  <option value="70">70%</option>
  <option value="80">80%</option>
  <option value="90">90%</option>
  <option value="100">100%</option>
</select>


</body>
</html>

When L1 is returned, I had to check roomnum so that I can send Serial-println(“R1L1”); when Room 1 is selected
When D1 is returned, I will check the roomnum and also the brightness so that I can send Serial.println(“R1L130”); when Room 1 and 30% is selected

Can anyone pls advise how to write into Arduino code. Thanks a lot for your help

Can anyone pls advise how to write into Arduino code.

Have you bothered looking at the Arduino-as server example?

Hi Pual,

Yes. I do read through the example. But there is not much document on how the client.println("..."); things work. I also not sure how to handle the reply once a button is pressed. How can I check the form for

L1 submitted
Check roomnum
if roomnum == R1 send R1L1 to serial
else if roomnum ..
else ignore

D1 submitted
check roomum
check brightness (example 30% is selected)
if roomnum == R1 send R1L130 to serial
else if roomnum ..
else ignore

I am sorry as I am really weak in programming therefore can only write in layman term. I may be able to write codes for the client but can advise how to handle the reply? Thanks a lot

Some simple web page control code.

//zoomkat 4-1-12
//simple button GET for servo and pin 5
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use the \ slash to escape the " in the html, or use ' instead of " 
//address will look like http://192.168.1.102:84 when submited
//for use with W5100 based ethernet shields

#include <SPI.h>
#include <Ethernet.h>

#include <Servo.h> 
Servo myservo;  // create servo object to control a servo 

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // ip in lan
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port

String readString; 

//////////////////////

void setup(){

  pinMode(5, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();

  myservo.write(90); //set initial servo position if desired
  myservo.attach(7);  //the pin for the servo control
  //enable serial data print 
  Serial.begin(9600); 
  Serial.println("server servo/pin 5 test 1.0"); // so I can keep track of what is loaded
}

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string 
          readString += c; 
          //Serial.print(c);
        } 

        //if HTTP request has ended
        if (c == '\n') {

          ///////////////
          Serial.println(readString); //print to serial monitor for debuging 

          client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: text/html");
          client.println();

          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<TITLE>Arduino GET test page</TITLE>");
          client.println("</HEAD>");
          client.println("<BODY>");

          client.println("<H1>Zoomkat's simple Arduino button</H1>");
          
          client.println("<a href=\"/?on\">ON</a>"); 
          client.println("<a href=\"/?off\">OFF</a>"); 

          client.println("</BODY>");
          client.println("</HTML>");
 
          delay(1);
          //stopping client
          client.stop();

          ///////////////////// control arduino pin
          if(readString.indexOf("on") >0)//checks for on
          {
            myservo.write(40);
            digitalWrite(5, HIGH);    // set pin 5 high
            Serial.println("Led On");
          }
          if(readString.indexOf("off") >0)//checks for off
          {
            myservo.write(140);
            digitalWrite(5, LOW);    // set pin 5 low
            Serial.println("Led Off");
          }
          //clearing string for next read
          readString="";

        }
      }
    }
  }
}

Hi, how to query the client to check on the combo box selection of roomnum and brightness? Where should I include the client? Is it just before I stop the client in the void loop? What is the syntax? Thanks alot

Hi, how to query the client to check on the combo box selection of roomnum and brightness?

Generally a client queries a server.

Hi Sorry, confused when the term. How to query the server and get the combo box info? Thanks a lot

Hi,

How to represent

Dear All,

I had tried to write the HTML into arduino UNO but I still dont know how to get the value of both the combo box so that I can do a if else if or case structure. Anyone can help? Attached is the code. Thanks a lot

#include <SPI.h>
#include <Ethernet.h>

// ethernet configuration
//MAC addr of Ethernet Shield
byte mac[] = { 0x90, 0xA2, 0xDa, 0x0D, 0xB0, 0xB2 };
//Linksys Router default IP address is 192.168.1.1
byte ip[] = { 192, 168, 1, 177 }; // P1 --> { 10, 1, 1, 5 };
// port 80 is default for HTTP. Can use 8080 or 8081 also
EthernetServer server(80);              

// initial
char c = 0;           // received data
char command[3] = "\0";  // command


void setup()
{
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.begin(9600);
}


void loop()
{
  //Check whether Server return any information
  EthernetClient client = server.available();
  // detect if current is the first line
  boolean current_line_is_first = true;

  if (client) {
    // an http request ends with a blank line
    boolean current_line_is_blank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // if we've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so we can send a reply
        if (c == '\n' && current_line_is_blank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

          // auto reload webpage every 5 second
          client.println("<META HTTP-EQUIV=REFRESH CONTENT=5 URL=>");
          
          // webpage title
          client.println("<center><p><h1>Home Automation System</h1></p><center><hr>
");
          
          //Combo Box for Room selection
          client.println("Select Room");
          client.println("<select id=roomnum>");
          client.println("<option value=R1>Room 1</option>");
          client.println("<option value=R2>Room 2</option>");
          client.println("<option value=R3>Room 3</option>");
          client.println("<option value=R4>Room 4</option>");
          client.println("<option value=R5>Room 5</option>");
          client.println("</select>

");
                  
          // Room Button functions
          client.println("<form  method=get name=light1> Light 1 <button name=L1 value=L1 type=submit>Toggle</button>");
          client.println("<button name=D1 value=D1 type=submit>Dim</button>");
          client.println("</form>
");
          
          client.println("<form  method=get name=light2> Light 2 <button name=L2 value=L2 type=submit>Toggle</button>");
          client.println("<button name=D2 value=D2 type=submit>Dim</button>");
          client.println("</form>
");
          
          client.println("<form  method=get name=light3> Light 3 <button name=L3 value=L3 type=submit>Toggle</button>");
          client.println("<button name=D3 value=D3 type=submit>Dim</button>");
          client.println("</form>
");
          
          client.println("<form  method=get name=light4> Light 4 <button name=L4 value=L4 type=submit>Toggle</button>");
          client.println("<button name=D4 value=D4 type=submit>Dim</button>");
          client.println("</form>
");
          
          client.println("<form  method=get name=light5> Light 5 <button name=L5 value=L5 type=submit>Toggle</button>");
          client.println("<button name=D5 value=D5 type=submit>Dim</button>");
          client.println("</form>

");
          
          //Combo Box for brightness selection
          client.println("Select Brightness");
          client.println("<select id=brightness>");
          client.println("<option value=10>10%</option>");
          client.println("<option value=20>20%</option>");
          client.println("<option value=30>30%</option>");
          client.println("<option value=40>40%</option>");
          client.println("<option value=50>50%</option>");
          client.println("<option value=60>60%</option>");
          client.println("<option value=70>70%</option>");
          client.println("<option value=80>80%</option>");
          client.println("<option value=90>90%</option>");
          client.println("<option value=100>100%</option>");
          client.println("</select>
");
          
          break;
        }
        if (c == '\n') {
          // we're starting a new line
          current_line_is_first = false;
          current_line_is_blank = true;
        } 
        else if (c != '\r') {
          // we've gotten a character on the current line
          current_line_is_blank = false;
        }
        // get the first http request
        if (current_line_is_first && c == '=') {
          for (int i = 0; i < 2; i++) {
            c = client.read();
            command[i] = c;
          }
          // LED control
          if (!strcmp(command, "L1")) {
            Serial.println("R1L1");
          }
          else if (!strcmp(command, "L2")) {
            Serial.println("R1L2");
          }
          else if (!strcmp(command, "L3")) {
            Serial.println("R1L3");
          }
          else if (!strcmp(command, "L4")) {
            Serial.println("R1L4");
          }
          else if (!strcmp(command, "L5")) {
            Serial.println("R1L5");
          }
          else if (!strcmp(command, "D1")) {
            Serial.println("R1L130");
          }
          else if (!strcmp(command, "D2")) {
            Serial.println("R1L230");
          }
          else if (!strcmp(command, "D3")) {
            Serial.println("R1L330");
          }
          else if (!strcmp(command, "D4")) {
            Serial.println("R1L430");
          }
          else if (!strcmp(command, "D5")) {
            Serial.println("R1L530");
          }
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    client.stop();
  }
  //Serial Port query here
}

Hi,

The final web page should be like this

When you serve up a page containing a form, and the form has named objects with values, and a submit button, the action identified is performed when the submit button is pressed.

The action results in a GET request with all the name and value data FROM THE FORM as part of the request.

The first problem with your form is that the Select Room combo box is NOT a form item, so that data will never be accessible to the server.

The second problem is that you don't have one form. You have five forms.

You need to do some research on form design (I posted a link to a decent site to experiment on) and design ONE form with the two combo boxes and the 10 buttons on it.

hi All,

I ran a webserver code from the internet but when I load it into my Uno and link up with my Ethernet Shield, I use my computer internet explorer and my iphone to call 192.168.1.177. Both give me different reply. Therefore only iphone send the correct symbol. Why is it so?

Internet Explorer

iPhone

Explorer return: http://192.168.1.177/?b=LED+On
but iphone return: http://192.168.1.177/?b=1

Pls help. Thanks a lot

I ran a webserver code from the internet

You aren't going to share that code? But, you want help. Can't you see that that is going to be a problem?

Hi Paul,

Sorry. Here is the code

#include <SPI.h>
#include <Ethernet.h>

// ethernet configuration
byte mac[] = { 0xAA, 0xBB, 0xCC, 0xDD, 0xEE, 0xFF };
byte ip[] = { 192, 168, 1, 177 }; // P1 --> { 10, 1, 1, 5 };
Server server(80);              // port 80 is default for HTTP

// initial
int LED = 3;          // led is connected to digital pin 3
int PIR = 2;          // PIR sensor is connected to digital pin 2
int LDR = 5;          // LDR sensor is connected to analog in 5
int PIRstate = 0;     // variable for PIR sensor status
float photocell = 0;  // variable for photocell (LDR) analog value
char c = 0;           // received data
char command[2] = "\0";  // command


void setup()
{
  Ethernet.begin(mac, ip);
  server.begin();
  pinMode(LED, OUTPUT);
  pinMode(PIR, INPUT);
}


void loop()
{
  Client client = server.available();
  // detect if current is the first line
  boolean current_line_is_first = true;

  if (client) {
    // an http request ends with a blank line
    boolean current_line_is_blank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // if we've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so we can send a reply
        if (c == '\n' && current_line_is_blank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

          // auto reload webpage every 5 second
          client.println("<META HTTP-EQUIV=REFRESH CONTENT=5 URL=>");
          
          // webpage title
          client.println("<center><p><h1>Arduino + Ethernet Shield Application v1.0</h1></p><center><hr>
");

          // read analog pin 1 for the value of photocell
          photocell = analogRead(LDR);
          client.print("<p><h2>Light reading = <font color=indigo>");
          client.println(photocell, 2);
          client.println("</font></h2></p>");
          
          // read digital pin 13 for the state of PIR sensor
          PIRstate = digitalRead(2);
          if (PIRstate == HIGH) { // PIR sensor detected movement
            client.println("<p><h2><font color=red>Motion Detected!</font></h2></p>");
          }
          else { // No movement is detected
            client.println("<p><h2><font color=green>No Movement</font></h2></p>"); 
          }  
          
          // button functions
          client.println("<form  method=get name=form>");
          client.println("<button name=b value=1 type=submit style=height:80px;width:150px>LED On</button>");
          client.println("<button name=b value=2 type=submit style=height:80px;width:150px>LED Off</button>");
          client.println("</form>
");
          
          // webpage footer
          client.println("<hr><center><a href=http://www.robothead2toe.com.my>Robot.Head to Toe</a>
");
          client.println("<p>P.S.: This page will automatically refresh every 5 seconds.</p></center>");
          
          break;
        }
        if (c == '\n') {
          // we're starting a new line
          current_line_is_first = false;
          current_line_is_blank = true;
        } 
        else if (c != '\r') {
          // we've gotten a character on the current line
          current_line_is_blank = false;
        }
        // get the first http request
        if (current_line_is_first && c == '=') {
          for (int i = 0; i < 1; i++) {
            c = client.read();
            command[i] = c;
          }
          // LED control
          if (!strcmp(command, "1")) {
            digitalWrite(LED, HIGH);
          }
          else if (!strcmp(command, "2")) {
            digitalWrite(LED, LOW);
          }
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    client.stop();
  }
}

Hi Paul,

Can I have a lot of submit buttons in one form? How can I attached the combo box value into the submit button? Quite confused. Thanks a lot

          client.println("<button name=b value=1 type=submit style=height:80px;width:150px>LED On</button>");

What is this? The things that can go on a form do not include “button”. They do include “input” with type = “button” or type = “submit”.

How can I attached the combo box value into the submit button?

The GET request generated when the submit button (if one is properly defined) is pressed will include the combo box name and value, it the combo box is part of the same form that the submit button is.

Hi Paul,

I am really confused :-)

As I had been referring to the code from the website as attached above. It seems that I cannot match it with your explaination. Do you have a example webServer code? I read the HTML W3 website and the form shows only very basic one. Cannot find the get function. Pls help. Thanks a lot

Pls help.

You need to step back and start simple. Create a form with a text field and a submit button.

Print the data received from the client when it first connects. You should see the GET command that the browser generated (something like "GET / HTTP 1.0"). Enter something in the text field, and press the submit button. You should see the GET command that the browser generates. Supposed your text field is named "Sam" and contains "Judy". The GET command would look something like "GET /?Sam=Judy HTTP 1.0".

Show the code you come up with, and the serial output. Then, we can move on to more advanced form items. But, get the most basic stuff working and understood (crawl ->walk -> run -> compete in marathons).