Instructables
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.
1-40 of 98Next »
IvanD118 days ago

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

IvanD1 IvanD115 days 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.

zoomx IvanD114 days 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 zoomx13 days 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 IvanD114 days 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 IvanD115 days ago

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

Tested with Sware Iron and Firefox on Windows7

zoomx19 days 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.

zoomx19 days 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!29 days ago

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

image1.JPG

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.

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

srmalone5 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)  srmalone3 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...)

dinovasya1 month 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?

dinovasya2 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 ;-)

ShalvaN9 months 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??

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

Can somebody help me?
BuiT7 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

Hi

How to combine with the bluetooth code I wrote this code you developed?

Thanks to our contributors

//-------------------DO NOT EDIT AFTER THIS LINE------------------------//

String voice;

int

rel1 = 2,

rel2 = 3,

rel3 = 4,

rel4 = 5,

rel5 = 6,

rel6 = 7,

rel7 = 8,

rel8 = 9;

void alloff(){

digitalWrite(rel1, LOW);

digitalWrite(rel2, LOW);

digitalWrite(rel3, LOW);

digitalWrite(rel4, LOW);

digitalWrite(rel5, LOW);

digitalWrite(rel6, LOW);

digitalWrite(rel7, LOW);

digitalWrite(rel8, LOW);

}

void allon(){

digitalWrite(rel1, HIGH);

digitalWrite(rel2, HIGH);

digitalWrite(rel3, HIGH);

digitalWrite(rel4, HIGH);

digitalWrite(rel5, HIGH);

digitalWrite(rel6, HIGH);

digitalWrite(rel7, HIGH);

digitalWrite(rel8, HIGH);

}

void setup() {

Serial.begin(9600);

pinMode(rel1, OUTPUT);

pinMode(rel2, OUTPUT);

pinMode(rel3, OUTPUT);

pinMode(rel4, OUTPUT);

pinMode(rel5, OUTPUT);

pinMode(rel6, OUTPUT);

pinMode(rel7, OUTPUT);

pinMode(rel8, OUTPUT);

//----------------------Set Relays state the begin-------------------//

digitalWrite(rel1, HIGH);

digitalWrite(rel2, HIGH);

digitalWrite(rel3, HIGH);

digitalWrite(rel4, HIGH);

digitalWrite(rel5, HIGH);

digitalWrite(rel6, HIGH);

digitalWrite(rel7, HIGH);

digitalWrite(rel8, HIGH);

}

void loop() {

while (Serial.available()){

delay(10);

char c = Serial.read();

if (c == '#') {break;}

voice += c;

}

if (voice.length() > 0) {

Serial.println(voice);

//-------------------DO NOT EDIT BEFORE THIS LINE------------------------//

//

//

//

//

//----------****************START USER DEFINED CODE**********************-------------//

//--------------------------Control all relays state----------------------------------//

//--Here is place where can edit words that must be told to change the state of all relays at the same time.Please edit words "*all on" and "*all off" with words that you prefer to control all outputs. ex. "*panic on" and "*panic off". Please keep structure of the algorithm, " and * are important, dont delete them when edit words.--//

if(voice == "*hepsini kapat") {allon();} //Turn Off All Relays outputs

if(voice == "*sini kapat") {allon();} //Turn Off All Relays outputs

if(voice == "*kapat") {allon();} //Turn Off All Relays outputs

else if(voice == "*hepsini aç"){alloff();} //Turn On All Relays outputs

else if(voice == "*sini aç"){alloff();} //Turn On All Relays outputs

else if(voice == "*aç"){alloff();} //Turn On All Relays outputs

//--------------------------Control seperate relay state------------------------------//

//--------------------------It can work in many languages-----------------------------//

//---------------------------Example Bulgarian and English---------------------------//

else if(voice == "*ışıkları aç") {digitalWrite(rel1, LOW);} //Turn On 1 Relay output

else if(voice == "*tv aç") {digitalWrite(rel2, LOW);} //Turn On 2 Relay output

else if(voice == "*tv yi aç") {digitalWrite(rel2, LOW);} //Turn On 2 Relay output

else if(voice == "*server aç") {digitalWrite(rel3, LOW);} //Turn On 3 Relay output

else if(voice == "*söz ver bağlan") {digitalWrite(rel3, LOW);} //Turn On 3 Relay output

else if(voice == "*sözver bağlan") {digitalWrite(rel3, LOW);} //Turn On 3 Relay output

else if(voice == "*söz ver aç") {digitalWrite(rel3, LOW);} //Turn On 3 Relay output

else if(voice == "*klima aç") {digitalWrite(rel4, LOW);} //Turn On 4 Relay output

else if(voice == "*klima yı aç") {digitalWrite(rel4, LOW);} //Turn On 4 Relay output

else if(voice == "*klimayı aç") {digitalWrite(rel4, LOW);} //Turn On 4 Relay output

else if(voice == "*alarm aç") {digitalWrite(rel5, LOW);} //Turn On 5 Relay output

else if(voice == "*kapıyı aç") {digitalWrite(rel6, LOW);} //Turn On 6 Relay output

else if(voice == "*kapı aç") {digitalWrite(rel6, LOW);} //Turn On 6 Relay output

else if(voice == "*garaj kapısını aç") {digitalWrite(rel7, LOW);} //Turn On 7 Relay output

else if(voice == "*garaj kapı aç") {digitalWrite(rel7, LOW);} //Turn On 7 Relay output

else if(voice == "*perde aç") {digitalWrite(rel8, LOW);} //Turn On 8 Relay output

else if(voice == "*perdeyi aç") {digitalWrite(rel8, LOW);} //Turn On 8 Relay output

else if(voice == "*ferdi aç") {digitalWrite(rel8, LOW);} //Turn On 8 Relay output

else if(voice == "*ferdiyi aç") {digitalWrite(rel8, LOW);} //Turn On 8 Relay output

//

else if(voice == "*ışıkları kapat") {digitalWrite(rel1, HIGH);} //Turn Off 1 Relay output

else if(voice == "*tv kapat") {digitalWrite(rel2, HIGH);} //Turn Off 2 Relay output

else if(voice == "*tv yi kapat") {digitalWrite(rel2, HIGH);} //Turn Off 2 Relay output

else if(voice == "*server kapat") {digitalWrite(rel3, HIGH);} //Turn Off 3 Relay output

else if(voice == "*söz ver kapat") {digitalWrite(rel3, HIGH);} //Turn Off 3 Relay output

else if(voice == "*klima kapat") {digitalWrite(rel4, HIGH);} //Turn Off 4 Relay output

else if(voice == "*klima kapa") {digitalWrite(rel4, HIGH);} //Turn Off 4 Relay output

else if(voice == "*klimayı kapat") {digitalWrite(rel4, HIGH);} //Turn Off 4 Relay output

else if(voice == "*klima yı kapat") {digitalWrite(rel4, HIGH);} //Turn Off 4 Relay output

else if(voice == "*klima yı kapa") {digitalWrite(rel4, HIGH);} //Turn Off 4 Relay output

else if(voice == "*alarm kapat") {digitalWrite(rel5, HIGH);} //Turn Off 5 Relay output

else if(voice == "*kapıyı kapat") {digitalWrite(rel6, HIGH);} //Turn Off 6 Relay output

else if(voice == "*kapı kapat") {digitalWrite(rel6, HIGH);} //Turn Off 6 Relay output

else if(voice == "*kapıyı kapat") {digitalWrite(rel6, HIGH);} //Turn Off 6 Relay output

else if(voice == "*garaj kapı kapat") {digitalWrite(rel7, HIGH);} //Turn Off 7 Relay output

else if(voice == "*garaj kapısını kapat") {digitalWrite(rel7, HIGH);} //Turn Off 7 Relay output

else if(voice == "*perde kapat") {digitalWrite(rel8, HIGH);} //Turn Off 8 Relay output

else if(voice == "*perdeyi kapat") {digitalWrite(rel8, HIGH);} //Turn Off 8 Relay output

else if(voice == "*ferdi kapat") {digitalWrite(rel8, HIGH);} //Turn Off 8 Relay output

else if(voice == "*ferdiyi kapat") {digitalWrite(rel8, HIGH);} //Turn Off 8 Relay output

//--------------*****************END USER DEFINED CODE*******************-------------//

//

//

//

//

//

//-------------------DO NOT EDIT AFTER THIS LINE------------------------//

voice="";}}

//-------------------DO NOT EDIT BEFORE THIS LINE-----------------------//

getiteasy BuiT3 months ago

I tried some weeks to let it run on the arduino WiFi Shield. but it dosn´t run well.

You have any idea?

Thanks

getiteasy3 months ago

I tried to adapt the code for the "WiFiShield". It compiles without error. But. The html page is called but not completely. I am determined approached the wrong thing. How would you rewrite the code for WiFi. I have the Arduino WiFiShield.

big thank you

la3bna8 months ago

This is a really good project, Im tring to get this working on an Nano and a WIZ550io module, I have updated libs. Examples work but not this. I have changed the MAC (the wiz550 has a mac sticker on it).

Changed araound with pins and removed some of them.

tcvella (author)  la3bna8 months ago

Hi la3bna,

As per my instructions, I had tested this with the Arduino MEGA. If you read older posts you will find out that users had issues with the A. UNO probably due to low RAM size. So I am guessing you are encountering a similar issue with the Nano.

In other words to use the NANO you should compromise and leave some code out.

la3bna tcvella8 months ago

Ok I have trimmed it down some. I will try to leave out part of the HTML code and see if I get it running. The main reason I was looking at this is becase of the way it looks. If I dont get it working I will have to buy a MEGA ;).

Thanks replaying so fast

Hi you have any good news?
I have the uno model, and have the same problem, you have any success with nano? I'm trying trimming the code, but with no success.

la3bna la3bna8 months ago

I saw that the issue would be resolved by commenting the CCS stuff. I am going to test that and maybe hav a ccs file on a network computer and poinit the html style ref to it. hoping that will work.

la3bna la3bna8 months ago

The browser only tried to download from the server address. Nothing is displayed

sky2orion3 months ago

Hello !
First I want to thanks the author and all contributors for this nice project. I have reproduce it, and it works fine for me since several months, but I would like to dispose a password protection to access the web interface. I read a lot about this subject, but I'm not a programmer or web developer and I had no success to integrate that feature. Thank you for your help.
Claude (France)

CarlKrieger3 months ago

Hi All !

Nice project indeed!

Very usefull comments so adaptation to your own needs is a breeze, thanks for that !

However I have a request for adding the possibility of a local control: The mega still has plenty inputs that can be of great use for controlling the outputs by a single pushbutton (push on, push off style) This would enable to use the circuit in a situation where besides the ethernet control also the regular pushbuttons are used; My intended use is to control everything at my company from a distance as many times people leave lights and appliances on at night, risking fire and also using electricity unnecesarily, while at the location you still have the normal pushbuttons.

Further adaptations that may be useful are as follows:

- adding a real time clock so switching can be done according certain moments (an internet time server might do as well)

- adding a daylight sensor to switch on/off lights according to darkness outside

- adding timerfunctions, to switch certain outputs for a certain duration.

thanks for sharing this project !

ewgor3 months ago

Hello All,

I read all the comments above and i understood that this sketch it's not working on Arduino UNO. This is OK but what about the HTML part of the code? i copied only this part into notepad and save it as .html (i deleted of course all the Arduino parts) and is not showing any buttons or leds, only the part in the div class.

Could anyone who knows HTML & CSS help me understand where i'm doing wrong? should i make to files, one as a index.html with only the html part and another one with the css part as a style.css? as far as i could see in the sketch some parts of a normal HTML file are missing like </body>, <html></html>, there's no need to use them?

I'm trying to do this because i really like your project and honestly i'm as so smart to do it my self as most of the people on this topic.

@tcvella Have you think to change the two buttons (on/off) and the (green/black) led with only one flip switch which can indicate the state of the element by changing its color? i thing this will simplify the interface but i don't know what's gonna happen in the css file and i'm speaking about the Arduino memory!

As a conclusion, from my point of view, your project is very nice but since i could't tested on my Arduino i cannot feel the real enjoy.

I would kindly ask anyone who can answer my question to share with us an idea about what's happening in the html part of the program.

Thanks for your understanding.

tcvella (author)  ewgor3 months ago

Hi ewgor,

Some html is generated on the fly, that means by the arduino code, so it is not straight forward to copy and paste the html code you found on the program. Further CSS can be embedded in the html, thus on loading of the page you get the html code as well the css inside.

ewgor tcvella3 months ago
Hi again,
Thanks for the answer. What do you mean with the HTML generated by the Arduino code? Is there any Arduino code generator?
However, i ask about the HTML and CSS files because i want to understand the meaning of the code and so to be able to make it smoller (to delete some of the buttons) and so to try it on my Arduino UNO board but since i cannot se on the web the interface you created i cannot play with it. Any suggestion?
Thank again.
tcvella (author)  ewgor3 months ago

The html is generated by the print command.(See below). Then the 'for' loop, will print each button.

//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");

There are arduino mega clones for only $10 on the internet if you want to fit this code.

svetnik14 months ago

Some think like this:

client.print("<INPUT TYPE=\"button\" VALUE=\"plus");
client.print("\" onClick=\"parent.location='/?");
client.print(TempSetpoint ++);

client.print("<INPUT TYPE=\"button\" VALUE=\"minus");
client.print("\" onClick=\"parent.location='/?");
client.print(TempSetpoint --);

client.print("SETTEMP:");
client.print(TempSetpoint);

1-40 of 98Next »