Introduction: 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.
Step 1: Ethernet Switching - With Arduino - Description
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
//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\">© 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
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
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
162 Comments
Question 2 years ago
Hello, How would I go about adding a button as the input rather then using your phone? Still needs to be ethernet connected. I have 2x arduino ready.
5 years ago
1.A question.
What happens if I want to control my PC?
I need you to press, the relay activates for two seconds and then goes off. The same when I want to turn off the PC ... to enable the relay two seconds off.
Can you think of something?
Reply 4 years ago
mira este enlace, ay te dice como hacer lo que quieres
https://www.progettiarduino.com/arduino-ethernet-shield-domotica-controllo-pin.html
4 years ago
Aquí el enlace donde dejo una breve reseña del proyecto: http://jefferelectric.simplesite.com/
4 years ago
Hello
I'm a beginner in arduino.......I was able to install the code for arduino uno.....
My question: How should the line / lines be written...to control (reset) a router for 10-20 seconds ...
Thank you very much for your help
5 years ago
Do any one know why we are limit at 10 outputs ?
how do I add more output ? can not add "case 10" to the code ???
Please help
Reply 5 years ago
it is hardware limited, the Ethernet shield is using 4 pins. You could add a multiplexing chip into the mix and get upto 64 outputs.
5 years ago
Has anyone adapted this code for ESP8266?
6 years ago
No aparece los enlaces para decargar las librerias q se uso
7 years ago
I have à question About controling the relay 's also with à push button. I have read the part thats Bin post About the push buttons but i can not make it work. I want to use it on à dashboard so i can control the relay by web but when i'm in i can use the push buttons.
Ps: i want to tank al the people who work on the project !!
Reply 6 years ago
I also try your code but not working.Have you some newiest.
Reply 7 years ago
here 's my code:
/////////////////////////////////////////////////////////////////////////////////////////////////////////
#include <String.h> // used for login
#include <Ethernet.h>
#include <SPI.h>
#include <EEPROM.h>
////////////////////////////////////////////////////////////////////////
//CONFIGURATION
////////////////////////////////////////////////////////////////////////
//IP manual settings
byte ip[] = {10, 134, 36, 6 }; //Manual setup only
byte gateway[] = {10, 134, 36, 1 }; //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 = 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
// Select the pinout address
int outputAddress[] = {22, //Allocate 10 spaces and name the output pin address.
23,
24,
25,
26,
27,
28,
29,
30,
31,
32,
33,
34,
35,
36,
37};
//PS pin addresses 10, 11, 12 and 13 on the Duemilanove are used for the ethernet shield, therefore cannot be used.
//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.
//PS pin address 2 is used for interrupt-driven notification, therefore could not be used.
// Write the text description of the output channel
String buttonText[16] = {"01. Top licht",
"02. Board verlichting",
"03. Anker licht",
"04. Motor afzuiging",
"05. Binnen verlichting",
"06. Water pomp",
"07. Omvormer",
"08. Dieseltank meter",
"09. Dashboard verlichting",
"10. USB Lader Binnen",
"11. USB Lader buiten",
"12. Kajuit verlichting",
"13. Waterlank meter",
"14. Toeter",
"15. Auto radio",
"16. 27MC Bakkie"};
// 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.
////////////////////////////////////////////////////////////////////
// Controling relays with pusch buttons
////////////////////////////////////////////////////////////////////
// Relays
int Top_licht = 22;
int Board_verlichting = 23;
int Anker_licht = 24;
int Motor_afzuiging = 25;
int Binnen_verlichting = 26;
int Water_pomp = 27;
int Omvormer = 28;
int Dieseltank_meter = 29;
int Dashboard_verlichting = 30;
int USB_Lader_Binnen = 31;
int USB_Lader_buiten = 32;
int Kajuit_verlichting = 33;
int Waterlank_meter = 34;
int Toeter = 35;
int Auto_radio = 36;
int Bakkie = 37;
// Button Pins
int button1 = 38; // Top_licht
int button2 = 39; // Board_verlichting
int button3 = 40; // Anker_licht
int button4 = 41; // Motor_afzuiging
int button5 = 42; // Binnen_verlichting
int button6 = 43; // Water_pomp
int button7 = 44; // Omvormer
int button8 = 45; // Dieseltank_meter
int button9 = 46; // Dashboard_verlichting
int button10 = 47; // USB_Lader_Binnen
int button11 = 48; // USB_Lader_buiten
int button12 = 49; // Kajuit_verlichting
int button13 = 50; // Waterlank_meter
int button14 = 51; // Toeter
int button15 = 52; // Auto_radio
int button16 = 53; // Bakkie
// 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;
boolean lastButton5 = LOW;
boolean currentButton5 = LOW;
boolean ledOn5 = false;
boolean lastButton6 = LOW;
boolean currentButton6 = LOW;
boolean ledOn6 = false;
boolean lastButton7 = LOW;
boolean currentButton7 = LOW;
boolean ledOn7 = false;
boolean lastButton8 = LOW;
boolean currentButton8 = LOW;
boolean ledOn8 = false;
boolean lastButton9 = LOW;
boolean currentButton9 = LOW;
boolean ledOn9 = false;
boolean lastButton10 = LOW;
boolean currentButton10 = LOW;
boolean ledOn10 = false;
boolean lastButton11 = LOW;
boolean currentButton11 = LOW;
boolean ledOn11 = false;
boolean lastButton12 = LOW;
boolean currentButton12 = LOW;
boolean ledOn12 = false;
boolean lastButton13 = LOW;
boolean currentButton13 = LOW;
boolean ledOn13 = false;
boolean lastButton14 = LOW;
boolean currentButton14 = LOW;
boolean ledOn14 = false;
boolean lastButton15 = LOW;
boolean currentButton15 = LOW;
boolean ledOn15 = false;
boolean lastButton16 = LOW;
boolean currentButton16 = LOW;
boolean ledOn16 = false;
////////////////////////////////////////////////////////////////////////
//pusch buttons end
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
//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 = "V6.01";
unsigned long timeConnectedAt;
boolean writeToEeprom = false;
String readString; //login
boolean login=false; //login
/////////////////////////////////////////////////
// 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());
////////////////////////////////////////////////////////////////////
// Controling relays with pusch buttons
////////////////////////////////////////////////////////////////////
// These are the relays conected to the lights
{
pinMode(Top_licht, OUTPUT); //pin selected to control22;
pinMode(Board_verlichting, OUTPUT); //pin selected to control23;
pinMode(Anker_licht, OUTPUT); //pin selected to control24;
pinMode(Motor_afzuiging, OUTPUT); //pin selected to control25;
pinMode(Binnen_verlichting, OUTPUT); //pin selected to control26;
pinMode(Water_pomp, OUTPUT); //pin selected to control27;
pinMode(Omvormer, OUTPUT); //pin selected to control28;
pinMode(Dieseltank_meter, OUTPUT); //pin selected to control29;
pinMode(Dashboard_verlichting, OUTPUT); //pin selected to control30;
pinMode(USB_Lader_Binnen, OUTPUT); //pin selected to control31;
pinMode(USB_Lader_buiten, OUTPUT); //pin selected to control32;
pinMode(Kajuit_verlichting, OUTPUT); //pin selected to control33;
pinMode(Waterlank_meter, OUTPUT); //pin selected to control34;
pinMode(Toeter, OUTPUT); //pin selected to control35;
pinMode(Auto_radio, OUTPUT); //pin selected to control36;
pinMode(Bakkie, OUTPUT); //pin selected to control37;
// These are the puch buttons the switch the lights on or off
pinMode(button1, INPUT);
pinMode(button2, INPUT);
pinMode(button3, INPUT);
pinMode(button4, INPUT);
pinMode(button5, INPUT);
pinMode(button6, INPUT);
pinMode(button7, INPUT);
pinMode(button8, INPUT);
pinMode(button9, INPUT);
pinMode(button10, INPUT);
pinMode(button11, INPUT);
pinMode(button12, INPUT);
pinMode(button13, INPUT);
pinMode(button14, INPUT);
pinMode(button15, INPUT);
pinMode(button16, 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;
}
// Button5 debounce
boolean debounce5(boolean last5)
{
boolean current5 = digitalRead(button5);
if (last5 != current5)
{
delay(5);
current5 = digitalRead(button5);
}
return current5;
}
// Button6 debounce
boolean debounce6(boolean last6)
{
boolean current6 = digitalRead(button6);
if (last6 != current6)
{
delay(5);
current6 = digitalRead(button6);
}
return current6;
}
// Button7 debounce
boolean debounce7(boolean last7)
{
boolean current7 = digitalRead(button7);
if (last7 != current7)
{
delay(5);
current7 = digitalRead(button7);
}
return current7;
}
// Button8 debounce
boolean debounce8(boolean last8)
{
boolean current8 = digitalRead(button8);
if (last8 != current8)
{
delay(5);
current8 = digitalRead(button8);
}
return current8;
}
// Button9 debounce
boolean debounce9(boolean last9)
{
boolean current9 = digitalRead(button9);
if (last9 != current9)
{
delay(5);
current9 = digitalRead(button9);
}
return current9;
}
// Button10 debounce
boolean debounce10(boolean last10)
{
boolean current10 = digitalRead(button10);
if (last10 != current10)
{
delay(5);
current10 = digitalRead(button10);
}
return current10;
}
// Button11 debounce
boolean debounce11(boolean last11)
{
boolean current11 = digitalRead(button11);
if (last11 != current11)
{
delay(5);
current11 = digitalRead(button11);
}
return current11;
}
// Button12 debounce
boolean debounce12(boolean last12)
{
boolean current12 = digitalRead(button12);
if (last12 != current12)
{
delay(5);
current12 = digitalRead(button12);
}
return current12;
}
// Button13 debounce
boolean debounce13(boolean last13)
{
boolean current13 = digitalRead(button13);
if (last13 != current13)
{
delay(5);
current13 = digitalRead(button13);
}
return current13;
}
// Button14 debounce
boolean debounce14(boolean last14)
{
boolean current14 = digitalRead(button14);
if (last14 != current14)
{
delay(5);
current14 = digitalRead(button14);
}
return current14;
}
// Button15 debounce
boolean debounce15(boolean last15)
{
boolean current15 = digitalRead(button15);
if (last15 != current15)
{
delay(5);
current15 = digitalRead(button15);
}
return current15;
}
// Button16 debounce
boolean debounce16(boolean last16)
{
boolean current16 = digitalRead(button16);
if (last16 != current16)
{
delay(5);
current16 = digitalRead(button16);
}
return current16;
}
////////////////////////////////////////////////////////////////////////
//pusch buttons end
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
//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;
////////////////////////////////////////////////////////////////////
// Controling relays with pusch buttons
////////////////////////////////////////////////////////////////////
// And here is where the magic is done
// Start buttons
//button1 --------------------------------------------------------
currentButton = debounce(lastButton);
if (lastButton == LOW && currentButton == HIGH)
{
ledOn = !ledOn;
}
lastButton = currentButton;
digitalWrite(Top_licht, ledOn);
currentButton = debounce(lastButton);
if (lastButton == LOW && currentButton == HIGH)
{
ledOn = !ledOn;
}
lastButton = currentButton;
digitalWrite(Top_licht, ledOn);
//button2 --------------------------------------------------------
currentButton2 = debounce2(lastButton2);
if (lastButton2 == LOW && currentButton2 == HIGH)
{
ledOn2 = !ledOn2;
}
lastButton2 = currentButton2;
digitalWrite(Board_verlichting, ledOn2);
//button3 --------------------------------------------------------
currentButton3 = debounce3(lastButton3);
if (lastButton3 == LOW && currentButton3 == HIGH)
{
ledOn3 = !ledOn3;
}
lastButton3 = currentButton3;
digitalWrite(Anker_licht, ledOn3);
//button4 --------------------------------------------------------
currentButton4 = debounce4(lastButton4);
if (lastButton4 == LOW && currentButton4 == HIGH)
{
ledOn4 = !ledOn4;
}
lastButton4 = currentButton4;
digitalWrite(Motor_afzuiging, ledOn4);
//button5 --------------------------------------------------------
currentButton5 = debounce5(lastButton5);
if (lastButton5 == LOW && currentButton5 == HIGH)
{
ledOn5 = !ledOn5;
}
lastButton5 = currentButton5;
digitalWrite(Top_licht, ledOn5);
//button6 --------------------------------------------------------
currentButton6 = debounce6(lastButton6);
if (lastButton6 == LOW && currentButton6 == HIGH)
{
ledOn6 = !ledOn6;
}
lastButton6 = currentButton6;
digitalWrite(Board_verlichting, ledOn6);
//button7 --------------------------------------------------------
currentButton7 = debounce7(lastButton7);
if (lastButton7 == LOW && currentButton7 == HIGH)
{
ledOn7 = !ledOn7;
}
lastButton7 = currentButton7;
digitalWrite(Anker_licht, ledOn7);
//button8 --------------------------------------------------------
currentButton8 = debounce8(lastButton8);
if (lastButton8 == LOW && currentButton8 == HIGH)
{
ledOn8 = !ledOn8;
}
lastButton8 = currentButton8;
digitalWrite(Motor_afzuiging, ledOn8);
//button9 --------------------------------------------------------
currentButton9 = debounce9(lastButton9);
if (lastButton9 == LOW && currentButton9 == HIGH)
{
ledOn9 = !ledOn9;
}
lastButton9 = currentButton9;
digitalWrite(Top_licht, ledOn9);
//button10 --------------------------------------------------------
currentButton10 = debounce10(lastButton10);
if (lastButton10 == LOW && currentButton10 == HIGH)
{
ledOn10 = !ledOn10;
}
lastButton10 = currentButton10;
digitalWrite(Board_verlichting, ledOn10);
//button11 --------------------------------------------------------
currentButton11 = debounce11(lastButton11);
if (lastButton11 == LOW && currentButton11 == HIGH)
{
ledOn11 = !ledOn11;
}
lastButton11 = currentButton11;
digitalWrite(Anker_licht, ledOn11);
//button12 --------------------------------------------------------
currentButton12 = debounce12(lastButton12);
if (lastButton12 == LOW && currentButton12 == HIGH)
{
ledOn12 = !ledOn12;
}
lastButton12 = currentButton12;
digitalWrite(Motor_afzuiging, ledOn12);
//button13 --------------------------------------------------------
currentButton13 = debounce13(lastButton13);
if (lastButton13 == LOW && currentButton13 == HIGH)
{
ledOn13 = !ledOn13;
}
lastButton13 = currentButton13;
digitalWrite(Top_licht, ledOn13);
//button14 --------------------------------------------------------
currentButton14 = debounce10(lastButton14);
if (lastButton14 == LOW && currentButton14 == HIGH)
{
ledOn14 = !ledOn14;
}
lastButton14 = currentButton14;
digitalWrite(Board_verlichting, ledOn14);
//button15 --------------------------------------------------------
currentButton15 = debounce15(lastButton15);
if (lastButton15 == LOW && currentButton15 == HIGH)
{
ledOn15 = !ledOn15;
}
lastButton15 = currentButton15;
digitalWrite(Anker_licht, ledOn15);
//button16 --------------------------------------------------------
currentButton16 = debounce16(lastButton16);
if (lastButton16 == LOW && currentButton16 == HIGH)
{
ledOn16 = !ledOn16;
}
lastButton16 = currentButton16;
digitalWrite(Motor_afzuiging, ledOn16);
////////////////////////////////////////////////////////////////////////
//pusch buttons end
////////////////////////////////////////////////////////////////////////
// listen for incoming clients, and process requests.
checkForClient();
}
////////////////////////////////////////////////////////////////////////
//checkForClient Function
////////////////////////////////////////////////////////////////////////
void checkForClient(){
EthernetClient client = server.available();
if (client) {
// an http request ends with a blank line
boolean currentLineIsBlank = true;
boolean sentHeader = false;
int temp,temp1;
while (client.connected()) {
if (client.available()) {
//if header was not set send it
//read user input
char c = client.read();
Serial.println(c); //login
readString.concat(c); //login
if(c == '*'){
printHtmlHeader(client); //call for html header and css
printLoginTitle(client);
printHtmlFooter(client);
//sentHeader = true;
login=false; //login
break;
}
if(!sentHeader){
printHtmlHeader(client); //call for html header and css
printHtmlButtonTitle(client); //print the button title
//This is for the arduino to construct the page on the fly.
sentHeader = true;
}
//if there was reading but is blank there was no reading
if(reading && c == ' '){
reading = false;
login=false;
}
//if there is a ? there was user input
if(c == '?') {
reading = true; //found the ?, begin reading the info
}
//login if added
if (login==false) {
if(readString.indexOf("User=1&Pass=1") > 0) { //repalce yourusername and yourpassword with your values
login=true;
}
}
// if there was user input switch the relevant output
//login && added
if(login && reading){
//if user input is H set output to 1
if(c == 'H') {
outp = 1;
}
//if user input is L set output to 0
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':
//add code here to trigger on 0
triggerPin(outputAddress[10], client, outp);
break;
case '1':
//add code here to trigger on 1
triggerPin(outputAddress[11], client, outp);
break;
case '2':
//add code here to trigger on 2
triggerPin(outputAddress[12], client, outp);
break;
case '3':
//add code here to trigger on 3
triggerPin(outputAddress[13], client, outp);
break;
case '4':
//add code here to trigger on 4
triggerPin(outputAddress[14], client, outp);
break;
case '5':
//add code here to trigger on 5
triggerPin(outputAddress[15], client, outp);
//printHtml(client);
break;
default:
char c = client.read();
triggerPin(outputAddress[1], client, outp);
}
}
else {
switch (c) {
case '0':
//add code here to trigger on 0
triggerPin(outputAddress[0], client, outp);
break;
//case '1':
//add code here to trigger on 1
//triggerPin(outputAddress[1], client, outp);
//break;
case '2':
//add code here to trigger on 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;
case 'Logout':
login=false;
readString="";
} //end of switch case
}
}//end of switch switch the relevant output
//if user input was blank
if (c == '\n' && currentLineIsBlank){
//login if added
if(login == false)
{
printLoginTitle(client);
printHtmlFooter(client);
readString="";
}
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 there is no client
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){
//Switching on or off outputs, reads the outputs and prints the buttons
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");
}
//LOGOUT
//Closing the table and form
client.println("</table>");
client.print("<h3 align=\"center\"><input type=button onClick=\"location.href='/?Logout'\" value='Logout'></h3>");
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>MS * Controlle Pannel</title>");
client.println("<meta name=\"description\" content=\"MS * Controlle Pannel\"/>");
// 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>MS * Controlle Pannel</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 - R. van Kouwen <br> 21 - January - 2016 - ");
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 align=\"center\">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 align=\"center\">Welcome...</h2>");
//client.println("<h2 align=\"center\">Enter Username and Password.</h2>");
client.println(" </div>");
client.print("<form action='/'>"); //change to your IP
client.print("");
client.println(" <div class=\"group-wrapper\">");
client.print("<h2 align=\"center\">Username:</h2>");
client.print("<h2 align=\"center\"><input name='User' value=''></h2>");
client.print("<h2 align=\"center\">Password:</h2>");
client.print("<h2 align=\"center\"><input type='Password' name='Pass' value=''></h2>");
client.print("</div>");
client.print("<h2 align=\"center\"><input type='submit' value=' Login '></h2>");
//client.print("<input type='submit' value=' Login '>");
client.print("<hr /></form><hr />");
client.println("</head></center>");
}
I
6 years ago
pueden compartir las librerias porfavor no logro compliar el proyecto
7 years ago
How connect thermistor??
// Connecting a 10K3 Thermistor to the Arduino Input
// +5V �—————————[10Kohms]—————————[Thermistor]——� 0V
// To Arduino IP �———————————|
I do not understand this scheme :(
Reply 6 years ago
Hope that in the meantime you had found how to connect. . The lines above got a bit messed up with the text wrapping and formatting. Here is a link of what I meant.
http://playground.arduino.cc/uploads/ComponentLib/...
Reply 6 years ago
I used without thermistor. Today I will try.
Reply 6 years ago
And if you want it scaled better here is the link.
http://playground.arduino.cc/ComponentLib/Thermist...
6 years ago
Hi , when i "true" the all on / all off the 1,2 relay dont on and the others yes ...
what can i do ?
6 years ago
Hi all of you, can i use this code with Mega 328P?
9 years ago on Introduction
#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();
}