loading
Picture of Ethernet Switching - with Arduino
Aim:

Switch relays from the ethernet or the internet, using your mobile, tablet or computer with a nice graphical user interface.

Update V4.06
Please read the below steps to Step 2 if you are viewing this article for the first time.
Please go to step 3 for the latest revision which is V4.06
A user modified version with logon option is placed in step 5 for easy download.

Material:

    * Arduino MEGA 2560
    * Arduino Ethernet Shield
    * Relay board
    * RJ45 cable


Tools:

    * Arduino Software version 1.0.1 (downloadable from Arduino Website )
    * A / B USB cable


Infrastructure:

    * Internet access with fixed IP for Arduino
    * Access to your router to share the port for internet access
    * Testing devices - your pc, mobile etc


Disclaimer:

    * This project was tested with iPhone 3GS, iPad 2 and MacBook Pro running Safari and PC running Safari, Firefox, Opera and IE.
    * This project was created on October 2012 with the mentioned material.
    * Binary sketch size: 22,322 bytes (of a 258,048 byte maximum).
    * This sketch does not offer any sort of authentification, therefore if required to be used from outside the network or from the internet, I suggest to configure your network to connect trough VPN. Nowadays many routers and smartphones support VPN.



 
Remove these adsRemove these ads by Signing Up

Step 1: Ethernet Switching - with Arduino - Description

Picture of Ethernet Switching - with Arduino - Description
iPadScreenshot.png
relay board.JPG
iPhone3GSPortrait.png
Description:

    * With this project, I had not included any images, or links to images from the internet. It only make use of CSS3 and HTML5.
    * The simulated LEDs are created from CSS3 code.
    * Some browsers does not make full use of CSS3 and HTML5. Thus I suggest using Safari.

Step 2: Ethernet Switching - with Arduino - Program

Picture of Ethernet Switching - with Arduino - Program
//Ethernet Switch
//
//Intro:
//This will swich on and off outputs trough your mobile device.
//No images or links to images. CSS3 and HTML5 use.
//Though it work with other web browser, we suggest Safari for best experiance.
//
//Version: Web Server Ethernet Switching Version 3.05
//Author:  Claudio Vella - Malta
//Initial code from: http://bildr.org/2011/06/arduino-ethernet-pin-control/
//Made lot of comments for beginners.

//ARDUINO 1.0+ ONLY


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


////////////////////////////////////////////////////////////////////////
//CONFIGURE
////////////////////////////////////////////////////////////////////////
 
  //IP manual settings
  byte ip[] = { 192, 168, 1, 177 };   //Manual setup only
  byte gateway[] = { 192, 168, 1, 254 }; //Manual setup only
  byte subnet[] = { 255, 255, 255, 0 }; //Manual setup only

  // if need to change the MAC address (Very Rare)
  byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };

  //Ethernet Port
  EthernetServer server = EthernetServer(80); //default html port 80
 
  //The number of outputs going to be switched.
  int outputQuantity = 8;  //when added to outputLowest result should not exceed 10
 
  //The lowest output pin we are starting from
  int outputLowest = 2;    //Should be between 2 to 9
////////////////////////////////////////////////////////////////////////

  // Variable declaration
  int outp = 0;
  boolean printLastCommandOnce = false;
  boolean printButtonMenuOnce = false;
  boolean initialPrint = true;
  String allOn = "";
  String allOff = "";
  boolean reading = false;
  boolean readInput[10]; //Create a boolean array for the maximum ammount.

//Beginning of the program
void setup(){
  Serial.begin(9600);

  //Pins 10,11,12 & 13 are used by the ethernet shield
  //Set pins as Outputs
  for (int var = outputLowest; var < outputLowest + outputQuantity; var++)  {
            pinMode(var, OUTPUT);
        }

  //Setting up the IP address. Comment out the one you dont need.
  //Ethernet.begin(mac); //for DHCP address. (Address will be printed to serial.)
  Ethernet.begin(mac, ip, gateway, subnet); //for manual setup. (Address is the one configured above.)


  server.begin();
  Serial.println(Ethernet.localIP());
}


void loop(){

  // listen for incoming clients, and process requests.
  checkForClient();
}


void checkForClient(){

  EthernetClient client = server.available();

  if (client) {

    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    boolean sentHeader = false;

    while (client.connected()) {
      if (client.available()) {

        if(!sentHeader){
         // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connnection: close");
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<head>");
         
          // add page title
          client.println("<title>Ethernet Switching</title>");
          client.println("<meta name=\"description\" content=\"Ethernet Switching\"/>");

          // add a meta refresh tag, so the browser pulls again every 5 seconds:
          client.println("<meta http-equiv=\"refresh\" content=\"10; url=/\">");
         
          // add other browser configuration
          client.println("<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">");
          client.println("<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"default\">");
          client.println("<meta name=\"viewport\" content=\"width=device-width, user-scalable=no\"/>");         
         
          //inserting the styles data, usually found in CSS files.
          client.println("<style type=\"text/css\">");
          client.println("");
         
          //This will set how the page will look graphically
          client.println("html { height:100%; }"); 
 
          client.println("  body {");
          client.println("    height: 100%;");
          client.println("    margin: 0;");
          client.println("    font-family: helvetica, sans-serif;");
          client.println("    -webkit-text-size-adjust: none;");
          client.println("   }");
          client.println("");
          client.println("body {");
          client.println("    -webkit-background-size: 100% 21px;");
          client.println("    background-color: #c5ccd3;");
          client.println("    background-image:");
          client.println("    -webkit-gradient(linear, left top, right top,");
          client.println("    color-stop(.75, transparent),");
          client.println("    color-stop(.75, rgba(255,255,255,.1)) );");
          client.println("    -webkit-background-size: 7px;");
          client.println("   }");
          client.println("");
          client.println(".view {");
          client.println("    min-height: 100%;");
          client.println("    overflow: auto;");
          client.println("   }");
          client.println("");
          client.println(".header-wrapper {");
          client.println("    height: 44px;");
          client.println("    font-weight: bold;");
          client.println("    text-shadow: rgba(0,0,0,0.7) 0 -1px 0;");
          client.println("    border-top: solid 1px rgba(255,255,255,0.6);");
          client.println("    border-bottom: solid 1px rgba(0,0,0,0.6);");
          client.println("    color: #fff;");
          client.println("    background-color: #8195af;");
          client.println("    background-image:");
          client.println("    -webkit-gradient(linear, left top, left bottom,");
          client.println("    from(rgba(255,255,255,.4)),");
          client.println("    to(rgba(255,255,255,.05)) ),");
          client.println("    -webkit-gradient(linear, left top, left bottom,");
          client.println("    from(transparent),");
          client.println("    to(rgba(0,0,64,.1)) );");
          client.println("    background-repeat: no-repeat;");
          client.println("    background-position: top left, bottom left;");
          client.println("    -webkit-background-size: 100% 21px, 100% 22px;");
          client.println("    -webkit-box-sizing: border-box;");
          client.println("   }");
          client.println("");
          client.println(".header-wrapper h1 {");
          client.println("    text-align: center;");
          client.println("    font-size: 20px;");
          client.println("    line-height: 44px;");
          client.println("    margin: 0;");
          client.println("   }");
          client.println("");
          client.println(".group-wrapper {");
          client.println("    margin: 9px;");
          client.println("    }");
          client.println("");
          client.println(".group-wrapper h2 {");
          client.println("    color: #4c566c;");
          client.println("    font-size: 17px;");
          client.println("    line-height: 0.8;");
          client.println("    font-weight: bold;");
          client.println("    text-shadow: #fff 0 1px 0;");
          client.println("    margin: 20px 10px 12px;");
          client.println("   }");
          client.println("");
          client.println(".group-wrapper h3 {");
          client.println("    color: #4c566c;");
          client.println("    font-size: 12px;");
          client.println("    line-height: 1;");
          client.println("    font-weight: bold;");
          client.println("    text-shadow: #fff 0 1px 0;");
          client.println("    margin: 20px 10px 12px;");
          client.println("   }");
          client.println("");
          client.println(".group-wrapper table {");
          client.println("    background-color: #fff;");
          client.println("    -webkit-border-radius: 10px;");
         
          client.println("    -moz-border-radius: 10px;");
          client.println("    -khtml-border-radius: 10px;");
          client.println("    border-radius: 10px;");
         
          client.println("    font-size: 17px;");
          client.println("    line-height: 20px;");
          client.println("    margin: 9px 0 20px;");
          client.println("    border: solid 1px #a9abae;");
          client.println("    padding: 11px 3px 12px 3px;");
          client.println("    margin-left:auto;");
          client.println("    margin-right:auto;");
         
          client.println("    -moz-transform :scale(1);"); //Code for Mozilla Firefox
          client.println("    -moz-transform-origin: 0 0;");


         
          client.println("   }");
          client.println("");


          //how the green (ON) LED will look
          client.println(".green-circle {");
          client.println("    display: block;");
          client.println("    height: 23px;");
          client.println("    width: 23px;");
          client.println("    background-color: #0f0;");
        //client.println("    background-color: rgba(60, 132, 198, 0.8);");
          client.println("    -moz-border-radius: 11px;");
          client.println("    -webkit-border-radius: 11px;");
          client.println("    -khtml-border-radius: 11px;");
          client.println("    border-radius: 11px;");
          client.println("    margin-left: 1px;");

          client.println("    background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(46, 184, 0, 0.8)), to(rgba(148, 255, 112, .9)));@");
          client.println("    border: 2px solid #ccc;");
          client.println("    -webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px;");
          client.println("    -moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */");
          client.println("    box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */");
         
          client.println("    }");
          client.println("");
         
          //how the black (off)LED will look
          client.println(".black-circle {");
          client.println("    display: block;");
          client.println("    height: 23px;");
          client.println("    width: 23px;");
          client.println("    background-color: #040;");
          client.println("    -moz-border-radius: 11px;");
          client.println("    -webkit-border-radius: 11px;");
          client.println("    -khtml-border-radius: 11px;");
          client.println("    border-radius: 11px;");
          client.println("    margin-left: 1px;");
          client.println("    -webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px;");
          client.println("    -moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */");
          client.println("    box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */");
          client.println("    }");
          client.println("");
         
          //this will add the glare to both of the LEDs
          client.println("   .glare {");
          client.println("      position: relative;");
          client.println("      top: 1;");
          client.println("      left: 5px;");
          client.println("      -webkit-border-radius: 10px;");
          client.println("      -moz-border-radius: 10px;");
          client.println("      -khtml-border-radius: 10px;");
          client.println("      border-radius: 10px;");
          client.println("      height: 1px;");
          client.println("      width: 13px;");
          client.println("      padding: 5px 0;");
          client.println("      background-color: rgba(200, 200, 200, 0.25);");
          client.println("      background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));");
          client.println("    }");
          client.println("");
         
         
          //and finally this is the end of the style data and header
          client.println("</style>");
          client.println("</head>");
         
          //now printing the page itself
          client.println("<body>");
          client.println("<div class=\"view\">");
          client.println("    <div class=\"header-wrapper\">");
          client.println("      <h1>Ethernet Switching</h1>");
          client.println("    </div>");
          client.println("<div  class=\"group-wrapper\">");
          client.println("    <h2>Switch the required output.</h2>");
          client.println();
         
          //This is for the arduino to construct the page on the fly.
          sentHeader = true;
        }
       
        char c = client.read();

        if(reading && c == ' '){
          reading = false;
          }
      
//       Serial.print(c);
       
       
        if(c == '?') {
          reading = true; //found the ?, begin reading the info
        }
    

        if(reading){
            if(c == 'H') {outp = 1;}
            if(c == 'L') {outp = 0;}
          Serial.print(c);   //print the value of c to serial communication
          //Serial.print(outp);
          //Serial.print('\n');
        
           switch (c) {
            case '2':
              //add code here to trigger on 2
              triggerPin(2, client, outp);
              break;
            case '3':
            //add code here to trigger on 3
              triggerPin(3, client, outp);
              break;
            case '4':
            //add code here to trigger on 4
              triggerPin(4, client, outp);
              break;
            case '5':
            //add code here to trigger on 5
              triggerPin(5, client, outp);
              //printHtml(client);
              break;
            case '6':
            //add code here to trigger on 6
              triggerPin(6, client, outp);
              break;
            case '7':
            //add code here to trigger on 7
              triggerPin(7, client, outp);
              break;
            case '8':
            //add code here to trigger on 8
              triggerPin(8, client, outp);
              break;
            case '9':
            //add code here to trigger on 9
              triggerPin(9, client, outp);
              break;
          }

        }

        if (c == '\n' && currentLineIsBlank){
          printLastCommandOnce = true;
          printButtonMenuOnce = true;
          triggerPin(777, client, outp); //Call to read input and print menu. 777 is used not to update any outputs
          break;
        }
      }
    }
   
    //Set Variables Before Exiting
    printLastCommandOnce = false;
    printButtonMenuOnce = false;
   
    allOn = "";
    allOff = "";
    client.println("\n<h3 align=\"center\">&copy; Author - Claudio Vella <br> Malta - October - 2012</h3>");
    client.println("</div>\n</div>\n</body>\n</html>");
   
    delay(1); // give the web browser time to receive the data
    client.stop(); // close the connection:

  }

}



void triggerPin(int pin, EthernetClient client, int outp){
//Switching on or off outputs, reads the outputs and prints the buttons  

  //Setting Outputs
    if (pin != 777){
        if(outp == 1) {
          digitalWrite(pin, HIGH);
         }
        if(outp == 0){
          digitalWrite(pin, LOW);
         }
    }
  //Refresh the reading of outputs
  readOutputStatuses();
 
 
  //Prints the buttons
          if (printButtonMenuOnce == true){
              printHtmlButtons(client);
               printButtonMenuOnce = false;
          }
        
}


//print the html buttons to switch on/off channels
void printHtmlButtons(EthernetClient client){
    
     //Start to create the html table
     client.println("");
     //client.println("<p>");
     client.println("<FORM>");
     client.println("<table border=\"0\" align=\"center\">");
    
     //Start printing button by button
     for (int var = outputLowest; var < outputLowest + outputQuantity; var++)  {     
             
              //set command for all on/off
              allOn += "H";
              allOn += var;
              allOff += "L";
              allOff += var;
             
             
              //Print begining of row
              client.print("<tr>\n");       
             
              //Prints the ON Buttons
              client.print(" <td><INPUT TYPE=\"button\" VALUE=\"Switch ON - Pin  ");
              client.print(var);
              client.print("\" onClick=\"parent.location='/?H");
              client.print(var);
              client.print("'\"></td>\n");
             
              //Prints the OFF Buttons
              client.print(" <td><INPUT TYPE=\"button\" VALUE=\"Switch OFF - Pin  ");
              client.print(var);
              client.print("\" onClick=\"parent.location='/?L");
              client.print(var);
              client.print("'\"></td>\n");
             
             
              //Print first part of the Circles or the LEDs
              if (readInput[var] == true){
                client.print(" <td><div class='green-circle'><div class='glare'></div></div></td>\n");
              }else
              {
                client.print(" <td><div class='black-circle'><div class='glare'></div></div></td>\n");
              } 
             
             
              //Print end of row
              client.print("</tr>\n"); 
         }
        

              //Prints the ON All Pins Button
              client.print("<tr>\n<td><INPUT TYPE=\"button\" VALUE=\"Switch ON All Pins");
              client.print("\" onClick=\"parent.location='/?");
              client.print(allOn);
              client.print("'\"></td>\n");
            
              //Prints the OFF All Pins Button           
              client.print("<td><INPUT TYPE=\"button\" VALUE=\"Switch OFF All Pins");
              client.print("\" onClick=\"parent.location='/?");
              client.print(allOff);
              client.print("'\"></td>\n<td></td>\n</tr>\n");
             
              //Closing the table and form
              client.println("</table>");
              client.println("</FORM>");
              //client.println("</p>");
   
    }

//Reading the Output Statuses
void readOutputStatuses(){
  for (int var = outputLowest; var < outputLowest + outputQuantity; var++)  {
            readInput[var] = digitalRead(var);
            //Serial.print(readInput[var]);
       }
 
}

Step 3: Ethernet Switching Version 4.06

Picture of Ethernet Switching Version 4.06

Update V4.06

The Ethernet Switching has been revised and updated to include some more features.
This release is Version 4.06
There has been interest from all over the world (Brazil, Croatia, US, UK), some contacting me on these pages and some privately. Many had suggestions, on how can I improve and add some more features, in which, some of them I did.
I would like to thank everyone for the comments and the reviews this article got.
I welcome anyone for comments and suggestions for future features and options.
Below are the features I had added.

Features

    1. To invert the outputs. - Done on V3.06
    2. A possibility to rename the buttons - Done on V4.06
    3. To be password protected. - Not yet done
    4. Refresh page settable. - Done on V3.06
    5  Switch On or Off the outputs on startup - Done on V3.06
    6. Enable/Disable the All on/off buttons - Done on V4.01
    7. Read Temperature - Done on V4.03
    8. Save/Load statuses from eeprom to keep latest status after powercut - Done on V4.06
    9. Option to choose which output to retain the value after power cut. - Done on V4.06


Download link

https://www.dropbox.com/s/19rrxua51v9hhrz/WebServerSwitchingV04_06.ino

Step 4: Images of the hardware from others

Picture of Images of the hardware from others
IMG_1624.JPG
IMG_1626.JPG
Here are some images of the arduino hardware from instructable user sokre666 from Croatia.
Many thanks to this user for the images and the suggestions he had made.

Step 5: Other Versions by users

User drewpalmer04 has updated the latest Ethernet Switching program and added some temperature
sensors as well the user logon option.
To compile you need to download some libraries. 

Below is a link for an easy download of the ino file.

https://www.dropbox.com/s/sbu3s2qh6274ieq/RELAYCONTROLWITHAUTH.ino
1-40 of 109Next »
WalterP22 months ago

Ciao,
mi potreste aiutare ad inserire un sensore dht11 per leggere la temperatura?
Grazie
Walter

tcvella (author)  WalterP22 days ago
Ciao Walter, dipende dal tipo del sensore. Io suggererei di cercare la datasheet sub web, e poi se il sensore varia la resistenza allora, predi un po di giacco vicino al sensore e prede anche u termometro vicino all giaccio, e misura la resistenza. Fa la stessa cosa con aqua calda. Questa tipo di scala e applicabile se il sensore e lineare. Se e logaritmico, allora e piu difficile.
Olá, gostaria de saber qual é o endereço que coloco no navegador para ter acesso a página. HTML que está dentro do arduino?
Yes, you give the ip address on the arduino. Then from a browser on your mobile you type the ip address you inserted in the arduino.

Hello,

First of all, sorry for my poor English!

I'm a beginner with Arduino, but this awesome Project is my favorite.

The gound version worked for me very well (thank you Tcvella), but now i have a "problem" with the last (Drewpalmer's version) upgrade.....

I was looking for the libraries to the translation, but I did not find all of them.

Can somebody help me with a link, to download the missing Libraries, or share with me a *.zip file, what implies the libraries..

Regard's from Hungary,

Tamás

tcvella (author)  tamas213.horvath1252 days ago
Which libraries do you have missing?
Can somebody help me?
GustavoP22 months ago

Hello , how can I adapt this code for android ?

tcvella (author)  GustavoP22 days ago
It is html, thus should be fine. Graphics might vary a bit from browser to browser however.

Hello, mr. Vella.
I loved this work and how available you are helping everyone out around here.
What is making me curious is how did you manage to transfer all the program to your arduino, once it's said that the ammount of variables is equivalent to 246% of my Mega capacity... Did you implemented a SD card or something?

tcvella (author)  José VitorA2 days ago
No it is saving on the arduino mega only. Eeprom is used to save the latest statuses in case of power failure, so that outputs remain to the last known status.
robywj2 months ago
Ciao, ho tre sensori di temperatura mcp9700a, vorrei utilizzarli per indicare temp piano 1, temp piano 2 e temp ext, come posso adattare al tuo fantastico sketch, nel senso sia nella parte int che in quella della formula per fare leggere temperatura al termistore.
Ho scritto uno sketch dove posso regolare la temperatura e far accendere le elettrovalvole della caldaia per ogni singolo piano , e' possibile farlo sul tuo sketch? Mi aiuteresti ?
Grazie !!!!
Resto in attesa di una tua risposta.
robywj robywj2 months ago
Ok...ci sono riuscito !!!
Mi manca solo la regolazione della temperatura e l'accensione delle elettrovalvole per piano...e poi una user e password per accedere! !!
Se puoi aiutarmi te ne sarei grato.
Intanto posto lo sketch, potrebbe essere utile !!!

Grazie e scusate se non scrivo in inglese !!!?
IvanD15 months ago

How to turn on or off light without tablet or smartphone ????????

IvanD1 IvanD15 months ago

zoomx - Thank you, I know about it. But how to control without a browser? Need to add inputs for buttons. must be in control of the browser and the buttons.

I have messed around with this and adapted it to my needs I added code for buttons here is an example of what I did. It might give you an idea of how to get started

// Controling relays with pusch buttons

// Relays

int Hall = 22;

int LivingRoom = 23;

int Balcony = 24;

int Kitchen = 25;

// Button Pins

int button1 = 38; // Hall light button

int button2 = 39; // Living Room light button

int button3 = 40; // Balcony light button

int button4 = 41; // Kitchen light button

// This remembers the buttons last state

boolean lastButton = LOW;

boolean currentButton = LOW;

boolean ledOn = false;

boolean lastButton2 = LOW;

boolean currentButton2 = LOW;

boolean ledOn2 = false;

boolean lastButton3 = LOW;

boolean currentButton3 = LOW;

boolean ledOn3 = false;

boolean lastButton4 = LOW;

boolean currentButton4 = LOW;

boolean ledOn4 = false;

void setup() {

// These are the relays conected to the lights

pinMode(Hall, OUTPUT); //pin selected to control

pinMode(LivingRoom, OUTPUT); //pin selected to control

pinMode(Balcony, OUTPUT); //pin selected to control

pinMode(Kitchen, OUTPUT); //pin selected to control

// These are the puch buttons the switch the lights on or off

pinMode(button1, INPUT);

pinMode(button2, INPUT);

pinMode(button3, INPUT);

pinMode(button4, INPUT);

}

// This part Debounces the buttons

// Button1 debounce

boolean debounce(boolean last)

{

boolean current = digitalRead(button1);

if (last != current)

{

delay(5);

current = digitalRead(button1);

}

return current;

}

// Button2 debounce

boolean debounce2(boolean last2)

{

boolean current2 = digitalRead(button2);

if (last2 != current2)

{

delay(5);

current2 = digitalRead(button2);

}

return current2;

}

// Button3 debounce

boolean debounce3(boolean last3)

{

boolean current3 = digitalRead(button3);

if (last3 != current3)

{

delay(5);

current3 = digitalRead(button3);

}

return current3;

}

// Button4 debounce

boolean debounce4(boolean last4)

{

boolean current4 = digitalRead(button4);

if (last4 != current4)

{

delay(5);

current4 = digitalRead(button4);

}

return current4;

}

void loop() {

// And here is where the magic is done

// Start buttons

//button1 --------------------------------------------------------

currentButton = debounce(lastButton);

if (lastButton == LOW && currentButton == HIGH)

{

ledOn = !ledOn;

}

lastButton = currentButton;

digitalWrite(Hall, ledOn);

//button2 --------------------------------------------------------

currentButton2 = debounce2(lastButton2);

if (lastButton2 == LOW && currentButton2 == HIGH)

{

ledOn2 = !ledOn2;

}

lastButton2 = currentButton2;

digitalWrite(LivingRoom, ledOn2);

//button3 --------------------------------------------------------

currentButton3 = debounce3(lastButton3);

if (lastButton3 == LOW && currentButton3 == HIGH)

{

ledOn3 = !ledOn3;

}

lastButton3 = currentButton3;

digitalWrite(Balcony, ledOn3);

//button4 --------------------------------------------------------

currentButton4 = debounce4(lastButton4);

if (lastButton4 == LOW && currentButton4 == HIGH)

{

ledOn4 = !ledOn4;

}

lastButton4 = currentButton4;

digitalWrite(Kitchen, ledOn4);

}

zoomx IvanD15 months ago

Instead of using a webserver you can use a socket, it is like control over serial port. But you have to write you program that run on a PC or on a smartphone or another Arduino.

There are other examples of this including reading button state or analog values.

This is an example of one of them but this uses a browser.

http://startingelectronics.com/tutorials/arduino/ethernet-shield-web-server-tutorial/SD-card-IO/

IvanD1 zoomx5 months ago

You not understand me. I know what kind of device. But into it need to add control of the buttons. Just imagine house in which there are no switches. Are you go to the toilet or bathroom with the tablet ???? Always walk around the room with a tablet?

zoomx IvanD15 months ago

If you mean to control Arduino without Ethernet, yes you must add buttons and maybe an LCD with a menu. But this one is not the example you need, it speak about to control relais (or others) over Ethernet.

zoomx IvanD15 months ago

It works with (quite) any browser. You only need a browser yhat has HTML5 support.

Tested with Sware Iron and Firefox on Windows7

yosyk073 months ago

I will made it!

_zYx4 months ago

Will this work on Leonardo please?

I just tried it, but no luck :(

danny.kimbler6 months ago

I was successfully able to convert this to work with an Arduino Micro, with a mini WizNet5100 Ethernet Module. I moved the enitre Web Interface to an Raspberry Pi, and just let the Arduino run commands.

+1

I'm struggling with limitations of Arduino Nano (even thought of OpenWRT on TP-Link portable router but that is way out of my league). So for the moment I came with an idea of using 2 Nanos - one for webserver, other for actually doing all the work. Your instructable (or at least sketches) would be a great help!

Cool, how about an instuctable on how to do it?

zoomx5 months ago

I noticed that PIN 10 and 11 (TEST09 and TEST10 in the web interface) cannot be switched, I believe because are used by the Ethernet card for SPI communications.

So the code must be improved.

zoomx5 months ago

The original code run out of memory on Arduino UNO. Leaving all string in flash using F() function I successfully run Chinh Truc code on Arduino UNO.

Here it is.

//EthernetSwitching02

//http://www.instructables.com/id/Ethernet-Switching-with-Arduino/?ALLSTEPS

//Al strings are in FLASH so it fit also Arduino UNO RAM

#include <Ethernet.h>

#include <SPI.h>

#include <EEPROM.h>

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

//CONFIGURATION

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

//IP manual settings

byte ip[] = {

192, 168, 137, 100 }; //Manual setup only

byte gateway[] = {

192, 168, 1, 1 }; //Manual setup only

byte subnet[] = {

255, 255, 255, 0 }; //Manual setup only

byte mac[] = {

0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };

//Ethernet Port

EthernetServer server = EthernetServer(80); //default html port 80

//The number of outputs going to be switched.

int outputQuantity = 12; //should not exceed 10

//Invert the output of the leds

boolean outputInverted = false; //true or false

// This is done in case the relay board triggers the relay on negative, rather then on positive supply

//Html page refresh

int refreshPage = 15; //default is 10sec.

//Beware that if you make it refresh too fast, the page could become inacessable.

//Display or hide the "Switch on all Pins" buttons at the bottom of page

int switchOnAllPinsButton = false; //true or false

int outputAddress[16] = {

2,3,4,5,6,7,8,9,10,11,12,13,13,13,13,13}; //Allocate 10 spaces and name the output pin address.

String buttonText[16] = {

"01. TEST01","02. TEST02","03. TEST03","04. TEST04","05. TEST05","06. TEST06","07. TEST07","08. TEST08","09. TEST09","10. TEST10","11. TEST11","12. TEST12","13. TEST13","14. TEST14","15. TEST15","16. TEST16"};

// Set the output to retain the last status after power recycle.

int retainOutputStatus[16] = { 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0};//1-retain the last status. 0-will be off after power cut.

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

//VARIABLES DECLARATION

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

int outp = 0;

boolean printLastCommandOnce = false;

boolean printButtonMenuOnce = false;

boolean initialPrint = true;

String allOn = "";

String allOff = "";

boolean reading = false;

boolean outputStatus[16]; //Create a boolean array for the maximum ammount.

String rev = "V4.06b";

unsigned long timeConnectedAt;

boolean writeToEeprom = false;

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

// Temperature Related Reading

const int tempInPin = A1;

int tempInValue = 0; //temperature read

int tempScaleOutValue = 0; //temperature formatted

int tempOutValue = 0; //temperature formatted

float tempOutDeg = 0.0;

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

//RUN ONCE

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

//Beginning of Program

void setup(){

Serial.begin(9600);

delay(1000);

Serial.println(F("EthernetSwitching01"));

delay(1000);

Serial.println(F("initEepromValues"));

initEepromValues();

delay(1000);

Serial.println(F("readEepromValues"));

readEepromValues();

delay(1000);

//Set pins as Outputs

boolean currentState = false;

int var;

for (int i = 0; i < outputQuantity; i++){

pinMode(outputAddress[i], OUTPUT);

var = outputAddress[i];

//Switch all outputs to either on or off on Startup

if(outputInverted == true) {

//digitalWrite(outputAddress[var], HIGH);

if(outputStatus[i] == 0){

currentState = true;

}

else{

currentState = false;

} //check outputStatus if off, switch output accordingly

digitalWrite(var, currentState);

}

else{

//digitalWrite(outputAddress[var], LOW);

if(outputStatus[i] == 0){

currentState = false;

}

else{

currentState = true;

}//check outputStatus if off, switch output accordingly

digitalWrite(var, currentState);

}

}

//Setting up the IP address. Comment out the one you dont need.

//Ethernet.begin(mac); //for DHCP address. (Address will be printed to serial.)

//Ethernet.begin(mac, ip, gateway, subnet); //for manual setup. (Address is the one configured above.)

Serial.println(F("Trying to get an IP address using DHCP"));

if (Ethernet.begin(mac) == 0) {

Serial.println(F("Failed to configure Ethernet using DHCP"));

// initialize the ethernet device not using DHCP:

Ethernet.begin(mac, ip, gateway, subnet);

}

server.begin();

Serial.print(F("Server started at "));

Serial.println(Ethernet.localIP());

}

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

//LOOP

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

void loop(){

//Read Temperature Sensor

tempInValue = analogRead(tempInPin);

// Connecting a 10K3 Thermistor to the Arduino Input

// +5V �—————————[10Kohms]—————————[Thermistor]——� 0V

// To Arduino IP �———————————|

tempScaleOutValue = map(tempInValue, 0, 1023, 1023, 0); //Arduino value and NTC of the 10K3 Thermistor

tempOutValue = map(tempScaleOutValue, 130, 870, -170, 730); //range of Arduino Value compared with Temperature

tempOutValue = tempOutValue -45; //Adjustments

tempOutDeg = tempOutValue / 10.0;

checkForClient();

}

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

//checkForClient Function

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

//

void checkForClient(){

EthernetClient client = server.available();

if (client) {

boolean currentLineIsBlank = true;

boolean sentHeader = false;

int temp,temp1;

while (client.connected()) {

if (client.available()) {

char c = client.read();

if(c == '*'){

printHtmlHeader(client); //call for html header and css

printLoginTitle(client);

printHtmlFooter(client);

break;

}

if(!sentHeader){

printHtmlHeader(client); //call for html header and css

printHtmlButtonTitle(client); //print the button title

sentHeader = true;

}

if(reading && c == ' '){

reading = false;

}

if(c == '?') {

reading = true; //found the ?, begin reading the info

}

if(reading){

//if user input is H set output to 1

if(c == 'H') {

outp = 1;

}

if(c == 'L') {

outp = 0;

}

// Serial.println(c); //print the value of c to serial communication

//---------------------------------------------------------------------------------------------

// ? H 1 0

// ^ ^ ^ ^

// | | | |____________read 4 ( 10,11,12,13....)

// | | |______________read 3 ( 1....9)

// | |________________read 2 if user input is H set output to L

// |__________________read 1

//---------------------------------------------------------------------------------------------

if( c == '1'){

char c = client.read();

switch (c) {

case '0':

triggerPin(outputAddress[10], client, outp);

break;

case '1':

triggerPin(outputAddress[11], client, outp);

break;

case '2':

triggerPin(outputAddress[12], client, outp);

break;

case '3':

triggerPin(outputAddress[13], client, outp);

break;

case '4':

triggerPin(outputAddress[14], client, outp);

break;

case '5':

triggerPin(outputAddress[15], client, outp);

break;

default:

char c = client.read();

triggerPin(outputAddress[1], client, outp);

}

}

else {

switch (c) {

case '0':

triggerPin(outputAddress[0], client, outp);

break;

// case '1':

// triggerPin(outputAddress[1], client, outp);

// break;

case '2':

triggerPin(outputAddress[2], client, outp);

break;

case '3':

//add code here to trigger on 3

triggerPin(outputAddress[3], client, outp);

break;

case '4':

//add code here to trigger on 4

triggerPin(outputAddress[4], client, outp);

break;

case '5':

//add code here to trigger on 5

triggerPin(outputAddress[5], client, outp);

//printHtml(client);

break;

case '6':

//add code here to trigger on 6

triggerPin(outputAddress[6], client, outp);

break;

case '7':

//add code here to trigger on 7

triggerPin(outputAddress[7], client, outp);

break;

case '8':

//add code here to trigger on 8

triggerPin(outputAddress[8], client, outp);

break;

case '9':

//add code here to trigger on 9

triggerPin(outputAddress[9], client, outp);

break;

} //end of switch case

}

}//end of switch switch the relevant output

//if user input was blank

if (c == '\n' && currentLineIsBlank){

printLastCommandOnce = true;

printButtonMenuOnce = true;

triggerPin(777, client, outp); //Call to read input and print menu. 777 is used not to update any outputs

break;

}

}

}

printHtmlFooter(client); //Prints the html footer

}

else{

if (millis() > (timeConnectedAt + 60000)){

if (writeToEeprom == true){

writeEepromValues(); //write to EEprom the current output statuses

Serial.println(F("No Clients for more then a minute - Writing statuses to Eeprom."));

writeToEeprom = false;

}

}

}

}// END

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

//triggerPin Function

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

//

void triggerPin(int pin, EthernetClient client, int outp){

if (pin != 777){

// Serial.println(pin);

if(outp == 1) {

if (outputInverted ==false){

digitalWrite(pin, HIGH);

}

else{

digitalWrite(pin, LOW);

}

}

if(outp == 0){

if (outputInverted ==false){

digitalWrite(pin, LOW);

}

else{

digitalWrite(pin, HIGH);

}

}

}

//Refresh the reading of outputs

readOutputStatuses();

//Prints the buttons

if (printButtonMenuOnce == true){

printHtmlButtons(client);

printButtonMenuOnce = false;

}

}

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

//printHtmlButtons Function

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

//print the html buttons to switch on/off channels

void printHtmlButtons(EthernetClient client){

//Start to create the html table

client.println(F(""));

//client.println(F("<p>"));

client.println(F("<FORM>"));

client.println(F("<table border=\"0\" align=\"center\">"));

//Printing the Temperature

client.print(F("<tr>\n"));

client.print(F("<td><h4>"));

client.print(F("Temperature"));

client.print(F("</h4></td>\n"));

client.print(F("<td></td>"));

client.print(F("<td>"));

client.print(F("<h3>"));

client.print(tempOutDeg);

client.print(F(" °C</h3></td>\n"));

client.print(F("<td></td>"));

client.print(F("</tr>"));

//Start printing button by button

for (int var = 0; var < outputQuantity; var++) {

//set command for all on/off

allOn += "H";

allOn += outputAddress[var];

allOff += "L";

allOff += outputAddress[var];

//Print begining of row

client.print(F("<tr>\n"));

//Prints the button Text

client.print(F("<td><h4>"));

client.print(buttonText[var]);

client.print(F("</h4></td>\n"));

//Prints the ON Buttons+++++++++++++++++++++++++++++++++++++++++++++++

client.print(F("<td>"));

client.print(F("<INPUT TYPE=\"button\" VALUE=\"ON "));

client.print(F("\" onClick=\"parent.location='/?H"));

client.print(var);

client.print(F("'\"></td>\n"));

//Prints the OFF Buttons ---------------------------------------------

client.print(F(" <td><INPUT TYPE=\"button\" VALUE=\"OFF"));

client.print(F("\" onClick=\"parent.location='/?L"));

client.print(var);

client.print(F("'\"></td>\n"));

//Invert the LED display if output is inverted.

if (outputStatus[var] == true ){ //If Output is ON

if (outputInverted == false){ //and if output is not inverted

client.print(F(" <td><div class='green-circle'><div class='glare'></div></div></td>\n")); //Print html for ON LED

}

else{ //else output is inverted then

client.print(F(" <td><div class='black-circle'><div class='glare'></div></div></td>\n")); //Print html for OFF LED

}

}

else //If Output is Off

{

if (outputInverted == false){ //and if output is not inverted

client.print(F(" <td><div class='black-circle'><div class='glare'></div></div></td>\n")); //Print html for OFF LED

}

else{ //else output is inverted then

client.print(F(" <td><div class='green-circle'><div class='glare'></div></div></td>\n")); //Print html for ON LED

}

}

//Print end of row

client.print(F("</tr>\n"));

}

//Display or hide the Print all on Pins Button

if (switchOnAllPinsButton == true ){

//Prints the ON All Pins Button

client.print(F("<tr>\n<td><INPUT TYPE=\"button\" VALUE=\"Switch ON All Pins"));

client.print(F("\" onClick=\"parent.location='/?"));

client.print(allOn);

client.print(F("'\"></td>\n"));

//Prints the OFF All Pins Button

client.print(F("<td><INPUT TYPE=\"button\" VALUE=\"Switch OFF All Pins"));

client.print(F("\" onClick=\"parent.location='/?"));

client.print(allOff);

client.print(F("'\"></td>\n<td></td>\n<td></td>\n</tr>\n"));

}

//Closing the table and form

client.println(F("</table>"));

client.println(F("</FORM>"));

//client.println(F("</p>"));

}

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

//readOutputStatuses Function

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

//Reading the Output Statuses

void readOutputStatuses(){

for (int var = 0; var < outputQuantity; var++) {

outputStatus[var] = digitalRead(outputAddress[var]);

//Serial.print(outputStatus[var]);

}

}

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

//readEepromValues Function

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

//Read EEprom values and save to outputStatus

void readEepromValues(){

for (int adr = 0; adr < outputQuantity; adr++) {

outputStatus[adr] = EEPROM.read(adr);

}

}

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

//writeEepromValues Function

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

//Write EEprom values

void writeEepromValues(){

for (int adr = 0; adr < outputQuantity; adr++) {

EEPROM.write(adr, outputStatus[adr]);

}

}

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

//initEepromValues Function

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

//Initialiaze EEprom values

//if eeprom values are not the correct format ie not euqual to 0 or 1 (thus greater then 1) initialize by putting 0

void initEepromValues(){

for (int adr = 0; adr < outputQuantity; adr++){

if (EEPROM.read(adr) > 1){

EEPROM.write(adr, 0);

}

}

}

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

//htmlHeader Function

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

//Prints html header

void printHtmlHeader(EthernetClient client){

// Serial.print(F("Serving html Headers at ms -"));

timeConnectedAt = millis(); //Record the time when last page was served.

// Serial.print(timeConnectedAt); // Print time for debbugging purposes

writeToEeprom = true; // page loaded so set to action the write to eeprom

// send a standard http response header

client.println(F("HTTP/1.1 200 OK"));

client.println(F("Content-Type: text/html"));

client.println(F("Connnection: close"));

client.println();

client.println(F("<!DOCTYPE HTML>"));

client.println(F("<head>"));

// add page title

client.println(F("<title>Ethernet Switching</title>"));

client.println(F("<meta name=\"description\" content=\"Ethernet Switching\"/>"));

// add a meta refresh tag, so the browser pulls again every x seconds:

client.print(F("<meta http-equiv=\"refresh\" content=\""));

client.print(refreshPage);

client.println(F("; url=/\">"));

// add other browser configuration

client.println(F("<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">"));

client.println(F("<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"default\">"));

client.println(F("<meta name=\"viewport\" content=\"width=device-width, user-scalable=no\">"));

//inserting the styles data, usually found in CSS files.

client.println(F("<style type=\"text/css\">"));

client.println(F(""));

//This will set how the page will look graphically

client.println(F("html { height:100%; }"));

client.println(F(" body {"));

client.println(F(" height: 100%;"));

client.println(F(" margin: 0;"));

client.println(F(" font-family: helvetica, sans-serif;"));

client.println(F(" -webkit-text-size-adjust: none;"));

client.println(F(" }"));

client.println(F(""));

client.println(F("body {"));

client.println(F(" -webkit-background-size: 100% 21px;"));

client.println(F(" background-color: #c5ccd3;"));

client.println(F(" background-image:"));

client.println(F(" -webkit-gradient(linear, left top, right top,"));

client.println(F(" color-stop(.75, transparent),"));

client.println(F(" color-stop(.75, rgba(255,255,255,.1)) );"));

client.println(F(" -webkit-background-size: 7px;"));

client.println(F(" }"));

client.println(F(""));

client.println(F(".view {"));

client.println(F(" min-height: 100%;"));

client.println(F(" overflow: auto;"));

client.println(F(" }"));

client.println(F(""));

client.println(F(".header-wrapper {"));

client.println(F(" height: 44px;"));

client.println(F(" font-weight: bold;"));

client.println(F(" text-shadow: rgba(0,0,0,0.7) 0 -1px 0;"));

client.println(F(" border-top: solid 1px rgba(255,255,255,0.6);"));

client.println(F(" border-bottom: solid 1px rgba(0,0,0,0.6);"));

client.println(F(" color: #fff;"));

client.println(F(" background-color: #8195af;"));

client.println(F(" background-image:"));

client.println(F(" -webkit-gradient(linear, left top, left bottom,"));

client.println(F(" from(rgba(255,255,255,.4)),"));

client.println(F(" to(rgba(255,255,255,.05)) ),"));

client.println(F(" -webkit-gradient(linear, left top, left bottom,"));

client.println(F(" from(transparent),"));

client.println(F(" to(rgba(0,0,64,.1)) );"));

client.println(F(" background-repeat: no-repeat;"));

client.println(F(" background-position: top left, bottom left;"));

client.println(F(" -webkit-background-size: 100% 21px, 100% 22px;"));

client.println(F(" -webkit-box-sizing: border-box;"));

client.println(F(" }"));

client.println(F(""));

client.println(F(".header-wrapper h1 {"));

client.println(F(" text-align: center;"));

client.println(F(" font-size: 20px;"));

client.println(F(" line-height: 44px;"));

client.println(F(" margin: 0;"));

client.println(F(" }"));

client.println(F(""));

client.println(F(".group-wrapper {"));

client.println(F(" margin: 9px;"));

client.println(F(" }"));

client.println(F(""));

client.println(F(".group-wrapper h2 {"));

client.println(F(" color: #4c566c;"));

client.println(F(" font-size: 17px;"));

client.println(F(" line-height: 0.8;"));

client.println(F(" font-weight: bold;"));

client.println(F(" text-shadow: #fff 0 1px 0;"));

client.println(F(" margin: 20px 10px 12px;"));

client.println(F(" }"));

client.println(F(""));

client.println(F(".group-wrapper h3 {"));

client.println(F(" color: #4c566c;"));

client.println(F(" font-size: 12px;"));

client.println(F(" line-height: 1;"));

client.println(F(" font-weight: bold;"));

client.println(F(" text-shadow: #fff 0 1px 0;"));

client.println(F(" margin: 20px 10px 12px;"));

client.println(F(" }"));

client.println(F(""));

client.println(F(".group-wrapper h4 {")); //Text for description

client.println(F(" color: #212121;"));

client.println(F(" font-size: 14px;"));

client.println(F(" line-height: 1;"));

client.println(F(" font-weight: bold;"));

client.println(F(" text-shadow: #aaa 1px 1px 3px;"));

client.println(F(" margin: 5px 5px 5px;"));

client.println(F(" }"));

client.println(F(""));

client.println(F(".group-wrapper table {"));

client.println(F(" background-color: #fff;"));

client.println(F(" -webkit-border-radius: 10px;"));

client.println(F(" -moz-border-radius: 10px;"));

client.println(F(" -khtml-border-radius: 10px;"));

client.println(F(" border-radius: 10px;"));

client.println(F(" font-size: 17px;"));

client.println(F(" line-height: 20px;"));

client.println(F(" margin: 9px 0 20px;"));

client.println(F(" border: solid 1px #a9abae;"));

client.println(F(" padding: 11px 3px 12px 3px;"));

client.println(F(" margin-left:auto;"));

client.println(F(" margin-right:auto;"));

client.println(F(" -moz-transform :scale(1);")); //Code for Mozilla Firefox

client.println(F(" -moz-transform-origin: 0 0;"));

client.println(F(" }"));

client.println(F(""));

//how the green (ON) LED will look

client.println(F(".green-circle {"));

client.println(F(" display: block;"));

client.println(F(" height: 23px;"));

client.println(F(" width: 23px;"));

client.println(F(" background-color: #0f0;"));

//client.println(F(" background-color: rgba(60, 132, 198, 0.8);"));

client.println(F(" -moz-border-radius: 11px;"));

client.println(F(" -webkit-border-radius: 11px;"));

client.println(F(" -khtml-border-radius: 11px;"));

client.println(F(" border-radius: 11px;"));

client.println(F(" margin-left: 1px;"));

client.println(F(" background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(46, 184, 0, 0.8)), to(rgba(148, 255, 112, .9)));@"));

client.println(F(" border: 2px solid #ccc;"));

client.println(F(" -webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px;"));

client.println(F(" -moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */"));

client.println(F(" box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */"));

client.println(F(" }"));

client.println(F(""));

//how the black (off)LED will look

client.println(F(".black-circle {"));

client.println(F(" display: block;"));

client.println(F(" height: 23px;"));

client.println(F(" width: 23px;"));

client.println(F(" background-color: #040;"));

client.println(F(" -moz-border-radius: 11px;"));

client.println(F(" -webkit-border-radius: 11px;"));

client.println(F(" -khtml-border-radius: 11px;"));

client.println(F(" border-radius: 11px;"));

client.println(F(" margin-left: 1px;"));

client.println(F(" -webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px;"));

client.println(F(" -moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */"));

client.println(F(" box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */"));

client.println(F(" }"));

client.println(F(""));

//this will add the glare to both of the LEDs

client.println(F(" .glare {"));

client.println(F(" position: relative;"));

client.println(F(" top: 1;"));

client.println(F(" left: 5px;"));

client.println(F(" -webkit-border-radius: 10px;"));

client.println(F(" -moz-border-radius: 10px;"));

client.println(F(" -khtml-border-radius: 10px;"));

client.println(F(" border-radius: 10px;"));

client.println(F(" height: 1px;"));

client.println(F(" width: 13px;"));

client.println(F(" padding: 5px 0;"));

client.println(F(" background-color: rgba(200, 200, 200, 0.25);"));

client.println(F(" background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));"));

client.println(F(" }"));

client.println(F(""));

//and finally this is the end of the style data and header

client.println(F("</style>"));

client.println(F("</head>"));

//now printing the page itself

client.println(F("<body>"));

client.println(F("<div class=\"view\">"));

client.println(F(" <div class=\"header-wrapper\">"));

client.println(F(" <h1>Ethernet Switching</h1>"));

client.println(F(" </div>"));

//////

} //end of htmlHeader

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

//htmlFooter Function

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

//Prints html footer

void printHtmlFooter(EthernetClient client){

//Set Variables Before Exiting

printLastCommandOnce = false;

printButtonMenuOnce = false;

allOn = "";

allOff = "";

//printing last part of the html

client.println(F("\n<h3 align=\"center\">Arduino porting - Zoomx <br> 12 - February - 2015 - V5.0"));

client.println(F("\n<h3 align=\"center\">Development - Chinh Truc <br> 01 - August - 2014 - V5.0"));

client.println(F("\n<h3 align=\"center\">© Author - Claudio Vella <br> Malta - October - 2012 - "));

client.println(rev);

client.println(F("</h3></div>\n</div>\n</body>\n</html>"));

delay(1); // give the web browser time to receive the data

client.stop(); // close the connection:

Serial.println(F(" - Done, Closing Connection."));

delay (2); //delay so that it will give time for client buffer to clear and does not repeat multiple pages.

} //end of htmlFooter

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

//printHtmlButtonTitle Function

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

//Prints html button title

void printHtmlButtonTitle(EthernetClient client){

client.println(F("<div class=\"group-wrapper\">"));

client.println(F(" <h2>Switch Device output.</h2>"));

client.println();

}

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

//printLoginTitle Function

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

//Prints html button title

void printLoginTitle(EthernetClient client){

// client.println(F("<div class=\"group-wrapper\">"));

client.println(F(" <h2>Please enter the user data to login.</h2>"));

client.println();

}

IvanD1 made it!5 months ago

How to drive a relay without a smartphone? How to connect the switch room light? Add the ability to connect switches.

image1.JPG
srmalone10 months ago

Thanks for some great cose - it really looks professional. I am using MEGA and all works fine except I cannot get the board to remeber the sate of the relays on a powercycle. They are either all on or all off depending on settings.

Any ideas why?

tcvella (author)  srmalone8 months ago

Have you loaded my latest version. As not all the versions include that. This feature was added lately.

May I suggest one tiny improvement that will instantly get this code running on an Uno or any other non-Mega. The println (or print) command is very inefficient because it stores all strings in the RAM memory. Use println(F("string")); instead, and the strings will be stored in the Flash memory. This will make the code a whole lot smaller.

Using this, I immediately got the code to run on an Uno.

Hi,

I want to control 16 relay board, how can i change the code? I mean original code(without temp, humi...)

dinovasya6 months ago

About version 4.6

//PS pin addresses 10, 50, 51 and 52 and 53 on the Mega are used for the ethernet shield, therefore cannot be used.

//PS pin addresses 4, are used for the SD card, therefore cannot be used.

Arduino mega doesn't use pin 10, I think.

4,5,6,7 pins are used by relay shield, so how to change the code?

dinovasya6 months ago

tryied to use this scetch with 4module relay shield.

Didnt work for me/

Arduino mega? but ENC28J60 using 50,51,52,53 inputs on arduino mega.

Where to change this numbers?

Hi group

Where do I find the Ethernet Switching app? It doesn't seems to be available on Apples appstore...

Got it - it is not an app, just a fine html site ;-)

ShalvaN1 year ago

Hi there,

Great project i already set it up, but i have few questions:

1) is there a possibility to change NTC to DS18B20 (lets say 2 of them)?

2) can we add DHT22 to check also humidity?

the web page could look like this

temp in (dht22 - nr1)

humidity in (dht22 - nr1)

temp out (dht22-nr2)

humidity out (dht22-nr2)

temp something 1 (DS18B20)

temp something 2 (DS18B20)

and at last all of them could be programable ( so i can tourn them visible or invisible, change the names)

How to rework code to work with DHT11??

BuiT12 months ago

#include <Ethernet.h>

#include <SPI.h>

#include <EEPROM.h>

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

//CONFIGURATION

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

//IP manual settings

byte ip[] = {192, 168, 137, 100 }; //Manual setup only

byte gateway[] = {192, 168, 1, 1 }; //Manual setup only

byte subnet[] = {255, 255, 255, 0 }; //Manual setup only

byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };

//Ethernet Port

EthernetServer server = EthernetServer(80); //default html port 80

//The number of outputs going to be switched.

int outputQuantity = 16; //should not exceed 10

//Invert the output of the leds

boolean outputInverted = false; //true or false

// This is done in case the relay board triggers the relay on negative, rather then on positive supply

//Html page refresh

int refreshPage = 15; //default is 10sec.

//Beware that if you make it refresh too fast, the page could become inacessable.

//Display or hide the "Switch on all Pins" buttons at the bottom of page

int switchOnAllPinsButton = false; //true or false

int outputAddress[] = { 22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37}; //Allocate 10 spaces and name the output pin address.

String buttonText[16] = {

"01. Right Lamp","02. Left Lamp","03. Bedroom","04. Kitchen","05. Water Heater","06. Gate","07. Toilet","08. Main Heater","09. Roof Light","10. Basement","11. Test","12. TEST2","13. TEST3","14. TEST4","15. TEST5","16. TEST6"};

// Set the output to retain the last status after power recycle.

int retainOutputStatus[16] = {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0};//1-retain the last status. 0-will be off after power cut.

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

//VARIABLES DECLARATION

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

int outp = 0;

boolean printLastCommandOnce = false;

boolean printButtonMenuOnce = false;

boolean initialPrint = true;

String allOn = "";

String allOff = "";

boolean reading = false;

boolean outputStatus[16]; //Create a boolean array for the maximum ammount.

String rev = "V4.06";

unsigned long timeConnectedAt;

boolean writeToEeprom = false;

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

// Temperature Related Reading

const int tempInPin = A1;

int tempInValue = 0; //temperature read

int tempScaleOutValue = 0; //temperature formatted

int tempOutValue = 0; //temperature formatted

float tempOutDeg = 0.0;

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

//RUN ONCE

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

//Beginning of Program

void setup(){

Serial.begin(9600);

initEepromValues();

readEepromValues();

//Set pins as Outputs

boolean currentState = false;

int var;

for (int i = 0; i < outputQuantity; i++){

pinMode(outputAddress[i], OUTPUT);

var = outputAddress[i];

//Switch all outputs to either on or off on Startup

if(outputInverted == true) {

//digitalWrite(outputAddress[var], HIGH);

if(outputStatus[i] == 0){currentState = true;}else{currentState = false;} //check outputStatus if off, switch output accordingly

digitalWrite(var, currentState);

}

else{

//digitalWrite(outputAddress[var], LOW);

if(outputStatus[i] == 0){currentState = false;}else{currentState = true;}//check outputStatus if off, switch output accordingly

digitalWrite(var, currentState);

}

}

//Setting up the IP address. Comment out the one you dont need.

//Ethernet.begin(mac); //for DHCP address. (Address will be printed to serial.)

Ethernet.begin(mac, ip, gateway, subnet); //for manual setup. (Address is the one configured above.)

server.begin();

Serial.print("Server started at ");

Serial.println(Ethernet.localIP());

}

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

//LOOP

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

//Run once

void loop(){

//Read Temperature Sensor

tempInValue = analogRead(tempInPin);

// Connecting a 10K3 Thermistor to the Arduino Input

// +5V �—————————[10Kohms]—————————[Thermistor]——� 0V

// To Arduino IP �———————————|

tempScaleOutValue = map(tempInValue, 0, 1023, 1023, 0); //Arduino value and NTC of the 10K3 Thermistor

tempOutValue = map(tempScaleOutValue, 130, 870, -170, 730); //range of Arduino Value compared with Temperature

tempOutValue = tempOutValue -45; //Adjustments

tempOutDeg = tempOutValue / 10.0;

checkForClient();

}

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

//checkForClient Function

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

//

void checkForClient(){

EthernetClient client = server.available();

if (client) {

boolean currentLineIsBlank = true;

boolean sentHeader = false;

int temp,temp1;

while (client.connected()) {

if (client.available()) {

char c = client.read();

if(c == '*'){

printHtmlHeader(client); //call for html header and css

printLoginTitle(client);

printHtmlFooter(client);

break;

}

if(!sentHeader){

printHtmlHeader(client); //call for html header and css

printHtmlButtonTitle(client); //print the button title

sentHeader = true;

}

if(reading && c == ' '){

reading = false;

}

if(c == '?') {

reading = true; //found the ?, begin reading the info

}

if(reading){

//if user input is H set output to 1

if(c == 'H') {

outp = 1;

}

if(c == 'L') {

outp = 0;

}

// Serial.println(c); //print the value of c to serial communication

//---------------------------------------------------------------------------------------------

// ? H 1 0

// ^ ^ ^ ^

// | | | |____________read 4 ( 10,11,12,13....)

// | | |______________read 3 ( 1....9)

// | |________________read 2 if user input is H set output to L

// |__________________read 1

//---------------------------------------------------------------------------------------------

if( c == '1'){

char c = client.read();

switch (c) {

case '0':

triggerPin(outputAddress[10], client, outp);

break;

case '1':

triggerPin(outputAddress[11], client, outp);

break;

case '2':

triggerPin(outputAddress[12], client, outp);

break;

case '3':

triggerPin(outputAddress[13], client, outp);

break;

case '4':

triggerPin(outputAddress[14], client, outp);

break;

case '5':

triggerPin(outputAddress[15], client, outp);

break;

default:

char c = client.read();

triggerPin(outputAddress[1], client, outp);

}

}

else {

switch (c) {

case '0':

triggerPin(outputAddress[0], client, outp);

break;

// case '1':

// triggerPin(outputAddress[1], client, outp);

// break;

case '2':

triggerPin(outputAddress[2], client, outp);

break;

case '3':

//add code here to trigger on 3

triggerPin(outputAddress[3], client, outp);

break;

case '4':

//add code here to trigger on 4

triggerPin(outputAddress[4], client, outp);

break;

case '5':

//add code here to trigger on 5

triggerPin(outputAddress[5], client, outp);

//printHtml(client);

break;

case '6':

//add code here to trigger on 6

triggerPin(outputAddress[6], client, outp);

break;

case '7':

//add code here to trigger on 7

triggerPin(outputAddress[7], client, outp);

break;

case '8':

//add code here to trigger on 8

triggerPin(outputAddress[8], client, outp);

break;

case '9':

//add code here to trigger on 9

triggerPin(outputAddress[9], client, outp);

break;

} //end of switch case

}

}//end of switch switch the relevant output

//if user input was blank

if (c == '\n' && currentLineIsBlank){

printLastCommandOnce = true;

printButtonMenuOnce = true;

triggerPin(777, client, outp); //Call to read input and print menu. 777 is used not to update any outputs

break;

}

}

}

printHtmlFooter(client); //Prints the html footer

}

else{

if (millis() > (timeConnectedAt + 60000)){

if (writeToEeprom == true){

writeEepromValues(); //write to EEprom the current output statuses

Serial.println("No Clients for more then a minute - Writing statuses to Eeprom.");

writeToEeprom = false;

}

}

}

}// END

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

//triggerPin Function

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

//

void triggerPin(int pin, EthernetClient client, int outp){

if (pin != 777){

// Serial.println(pin);

if(outp == 1) {

if (outputInverted ==false){

digitalWrite(pin, HIGH);

}

else{

digitalWrite(pin, LOW);

}

}

if(outp == 0){

if (outputInverted ==false){

digitalWrite(pin, LOW);

}

else{

digitalWrite(pin, HIGH);

}

}

}

//Refresh the reading of outputs

readOutputStatuses();

//Prints the buttons

if (printButtonMenuOnce == true){

printHtmlButtons(client);

printButtonMenuOnce = false;

}

}

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

//printHtmlButtons Function

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

//print the html buttons to switch on/off channels

void printHtmlButtons(EthernetClient client){

//Start to create the html table

client.println("");

//client.println("<p>");

client.println("<FORM>");

client.println("<table border=\"0\" align=\"center\">");

//Printing the Temperature

client.print("<tr>\n");

client.print("<td><h4>");

client.print("Temperature");

client.print("</h4></td>\n");

client.print("<td></td>");

client.print("<td>");

client.print("<h3>");

client.print(tempOutDeg);

client.print(" °C</h3></td>\n");

client.print("<td></td>");

client.print("</tr>");

//Start printing button by button

for (int var = 0; var < outputQuantity; var++) {

//set command for all on/off

allOn += "H";

allOn += outputAddress[var];

allOff += "L";

allOff += outputAddress[var];

//Print begining of row

client.print("<tr>\n");

//Prints the button Text

client.print("<td><h4>");

client.print(buttonText[var]);

client.print("</h4></td>\n");

//Prints the ON Buttons+++++++++++++++++++++++++++++++++++++++++++++++

client.print("<td>");

client.print("<INPUT TYPE=\"button\" VALUE=\"ON ");

client.print("\" onClick=\"parent.location='/?H");

client.print(var);

client.print("'\"></td>\n");

//Prints the OFF Buttons ---------------------------------------------

client.print(" <td><INPUT TYPE=\"button\" VALUE=\"OFF");

client.print("\" onClick=\"parent.location='/?L");

client.print(var);

client.print("'\"></td>\n");

//Invert the LED display if output is inverted.

if (outputStatus[var] == true ){ //If Output is ON

if (outputInverted == false){ //and if output is not inverted

client.print(" <td><div class='green-circle'><div class='glare'></div></div></td>\n"); //Print html for ON LED

}

else{ //else output is inverted then

client.print(" <td><div class='black-circle'><div class='glare'></div></div></td>\n"); //Print html for OFF LED

}

}

else //If Output is Off

{

if (outputInverted == false){ //and if output is not inverted

client.print(" <td><div class='black-circle'><div class='glare'></div></div></td>\n"); //Print html for OFF LED

}

else{ //else output is inverted then

client.print(" <td><div class='green-circle'><div class='glare'></div></div></td>\n"); //Print html for ON LED

}

}

//Print end of row

client.print("</tr>\n");

}

//Display or hide the Print all on Pins Button

if (switchOnAllPinsButton == true ){

//Prints the ON All Pins Button

client.print("<tr>\n<td><INPUT TYPE=\"button\" VALUE=\"Switch ON All Pins");

client.print("\" onClick=\"parent.location='/?");

client.print(allOn);

client.print("'\"></td>\n");

//Prints the OFF All Pins Button

client.print("<td><INPUT TYPE=\"button\" VALUE=\"Switch OFF All Pins");

client.print("\" onClick=\"parent.location='/?");

client.print(allOff);

client.print("'\"></td>\n<td></td>\n<td></td>\n</tr>\n");

}

//Closing the table and form

client.println("</table>");

client.println("</FORM>");

//client.println("</p>");

}

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

//readOutputStatuses Function

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

//Reading the Output Statuses

void readOutputStatuses(){

for (int var = 0; var < outputQuantity; var++) {

outputStatus[var] = digitalRead(outputAddress[var]);

//Serial.print(outputStatus[var]);

}

}

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

//readEepromValues Function

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

//Read EEprom values and save to outputStatus

void readEepromValues(){

for (int adr = 0; adr < outputQuantity; adr++) {

outputStatus[adr] = EEPROM.read(adr);

}

}

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

//writeEepromValues Function

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

//Write EEprom values

void writeEepromValues(){

for (int adr = 0; adr < outputQuantity; adr++) {

EEPROM.write(adr, outputStatus[adr]);

}

}

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

//initEepromValues Function

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

//Initialiaze EEprom values

//if eeprom values are not the correct format ie not euqual to 0 or 1 (thus greater then 1) initialize by putting 0

void initEepromValues(){

for (int adr = 0; adr < outputQuantity; adr++){

if (EEPROM.read(adr) > 1){

EEPROM.write(adr, 0);

}

}

}

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

//htmlHeader Function

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

//Prints html header

void printHtmlHeader(EthernetClient client){

// Serial.print("Serving html Headers at ms -");

timeConnectedAt = millis(); //Record the time when last page was served.

// Serial.print(timeConnectedAt); // Print time for debbugging purposes

writeToEeprom = true; // page loaded so set to action the write to eeprom

// send a standard http response header

client.println("HTTP/1.1 200 OK");

client.println("Content-Type: text/html");

client.println("Connnection: close");

client.println();

client.println("<!DOCTYPE HTML>");

client.println("<head>");

// add page title

client.println("<title>Ethernet Switching</title>");

client.println("<meta name=\"description\" content=\"Ethernet Switching\"/>");

// add a meta refresh tag, so the browser pulls again every x seconds:

client.print("<meta http-equiv=\"refresh\" content=\"");

client.print(refreshPage);

client.println("; url=/\">");

// add other browser configuration

client.println("<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">");

client.println("<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"default\">");

client.println("<meta name=\"viewport\" content=\"width=device-width, user-scalable=no\">");

//inserting the styles data, usually found in CSS files.

client.println("<style type=\"text/css\">");

client.println("");

//This will set how the page will look graphically

client.println("html { height:100%; }");

client.println(" body {");

client.println(" height: 100%;");

client.println(" margin: 0;");

client.println(" font-family: helvetica, sans-serif;");

client.println(" -webkit-text-size-adjust: none;");

client.println(" }");

client.println("");

client.println("body {");

client.println(" -webkit-background-size: 100% 21px;");

client.println(" background-color: #c5ccd3;");

client.println(" background-image:");

client.println(" -webkit-gradient(linear, left top, right top,");

client.println(" color-stop(.75, transparent),");

client.println(" color-stop(.75, rgba(255,255,255,.1)) );");

client.println(" -webkit-background-size: 7px;");

client.println(" }");

client.println("");

client.println(".view {");

client.println(" min-height: 100%;");

client.println(" overflow: auto;");

client.println(" }");

client.println("");

client.println(".header-wrapper {");

client.println(" height: 44px;");

client.println(" font-weight: bold;");

client.println(" text-shadow: rgba(0,0,0,0.7) 0 -1px 0;");

client.println(" border-top: solid 1px rgba(255,255,255,0.6);");

client.println(" border-bottom: solid 1px rgba(0,0,0,0.6);");

client.println(" color: #fff;");

client.println(" background-color: #8195af;");

client.println(" background-image:");

client.println(" -webkit-gradient(linear, left top, left bottom,");

client.println(" from(rgba(255,255,255,.4)),");

client.println(" to(rgba(255,255,255,.05)) ),");

client.println(" -webkit-gradient(linear, left top, left bottom,");

client.println(" from(transparent),");

client.println(" to(rgba(0,0,64,.1)) );");

client.println(" background-repeat: no-repeat;");

client.println(" background-position: top left, bottom left;");

client.println(" -webkit-background-size: 100% 21px, 100% 22px;");

client.println(" -webkit-box-sizing: border-box;");

client.println(" }");

client.println("");

client.println(".header-wrapper h1 {");

client.println(" text-align: center;");

client.println(" font-size: 20px;");

client.println(" line-height: 44px;");

client.println(" margin: 0;");

client.println(" }");

client.println("");

client.println(".group-wrapper {");

client.println(" margin: 9px;");

client.println(" }");

client.println("");

client.println(".group-wrapper h2 {");

client.println(" color: #4c566c;");

client.println(" font-size: 17px;");

client.println(" line-height: 0.8;");

client.println(" font-weight: bold;");

client.println(" text-shadow: #fff 0 1px 0;");

client.println(" margin: 20px 10px 12px;");

client.println(" }");

client.println("");

client.println(".group-wrapper h3 {");

client.println(" color: #4c566c;");

client.println(" font-size: 12px;");

client.println(" line-height: 1;");

client.println(" font-weight: bold;");

client.println(" text-shadow: #fff 0 1px 0;");

client.println(" margin: 20px 10px 12px;");

client.println(" }");

client.println("");

client.println(".group-wrapper h4 {"); //Text for description

client.println(" color: #212121;");

client.println(" font-size: 14px;");

client.println(" line-height: 1;");

client.println(" font-weight: bold;");

client.println(" text-shadow: #aaa 1px 1px 3px;");

client.println(" margin: 5px 5px 5px;");

client.println(" }");

client.println("");

client.println(".group-wrapper table {");

client.println(" background-color: #fff;");

client.println(" -webkit-border-radius: 10px;");

client.println(" -moz-border-radius: 10px;");

client.println(" -khtml-border-radius: 10px;");

client.println(" border-radius: 10px;");

client.println(" font-size: 17px;");

client.println(" line-height: 20px;");

client.println(" margin: 9px 0 20px;");

client.println(" border: solid 1px #a9abae;");

client.println(" padding: 11px 3px 12px 3px;");

client.println(" margin-left:auto;");

client.println(" margin-right:auto;");

client.println(" -moz-transform :scale(1);"); //Code for Mozilla Firefox

client.println(" -moz-transform-origin: 0 0;");

client.println(" }");

client.println("");

//how the green (ON) LED will look

client.println(".green-circle {");

client.println(" display: block;");

client.println(" height: 23px;");

client.println(" width: 23px;");

client.println(" background-color: #0f0;");

//client.println(" background-color: rgba(60, 132, 198, 0.8);");

client.println(" -moz-border-radius: 11px;");

client.println(" -webkit-border-radius: 11px;");

client.println(" -khtml-border-radius: 11px;");

client.println(" border-radius: 11px;");

client.println(" margin-left: 1px;");

client.println(" background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(46, 184, 0, 0.8)), to(rgba(148, 255, 112, .9)));@");

client.println(" border: 2px solid #ccc;");

client.println(" -webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px;");

client.println(" -moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */");

client.println(" box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */");

client.println(" }");

client.println("");

//how the black (off)LED will look

client.println(".black-circle {");

client.println(" display: block;");

client.println(" height: 23px;");

client.println(" width: 23px;");

client.println(" background-color: #040;");

client.println(" -moz-border-radius: 11px;");

client.println(" -webkit-border-radius: 11px;");

client.println(" -khtml-border-radius: 11px;");

client.println(" border-radius: 11px;");

client.println(" margin-left: 1px;");

client.println(" -webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px;");

client.println(" -moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */");

client.println(" box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */");

client.println(" }");

client.println("");

//this will add the glare to both of the LEDs

client.println(" .glare {");

client.println(" position: relative;");

client.println(" top: 1;");

client.println(" left: 5px;");

client.println(" -webkit-border-radius: 10px;");

client.println(" -moz-border-radius: 10px;");

client.println(" -khtml-border-radius: 10px;");

client.println(" border-radius: 10px;");

client.println(" height: 1px;");

client.println(" width: 13px;");

client.println(" padding: 5px 0;");

client.println(" background-color: rgba(200, 200, 200, 0.25);");

client.println(" background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));");

client.println(" }");

client.println("");

//and finally this is the end of the style data and header

client.println("</style>");

client.println("</head>");

//now printing the page itself

client.println("<body>");

client.println("<div class=\"view\">");

client.println(" <div class=\"header-wrapper\">");

client.println(" <h1>Ethernet Switching</h1>");

client.println(" </div>");

//////

} //end of htmlHeader

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

//htmlFooter Function

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

//Prints html footer

void printHtmlFooter(EthernetClient client){

//Set Variables Before Exiting

printLastCommandOnce = false;

printButtonMenuOnce = false;

allOn = "";

allOff = "";

//printing last part of the html

client.println("\n<h3 align=\"center\">Development - Chinh Truc <br> 01 - August - 2014 - V5.0");

client.println("\n<h3 align=\"center\">© Author - Claudio Vella <br> Malta - October - 2012 - ");

client.println(rev);

client.println("</h3></div>\n</div>\n</body>\n</html>");

delay(1); // give the web browser time to receive the data

client.stop(); // close the connection:

Serial.println(" - Done, Closing Connection.");

delay (2); //delay so that it will give time for client buffer to clear and does not repeat multiple pages.

} //end of htmlFooter

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

//printHtmlButtonTitle Function

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

//Prints html button title

void printHtmlButtonTitle(EthernetClient client){

client.println("<div class=\"group-wrapper\">");

client.println(" <h2>Switch Device output.</h2>");

client.println();

}

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

//printLoginTitle Function

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

//Prints html button title

void printLoginTitle(EthernetClient client){

// client.println("<div class=\"group-wrapper\">");

client.println(" <h2>Please enter the user data to login.</h2>");

client.println();

}

Untitled.png
1-40 of 109Next »