This will switch 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.

Arduino Code:
  1. //ARDUINO 1.0+ ONLY
  2. //Modified By Debashish Mohapatra
  3. //Original Author: Claudio Vella - Malta
  4. //Initial code from: http://bildr.org/2011/06/arduino-ethernet-pin-control/
  5.  
  6. #include "Ethernet.h"
  7. #include "SPI.h"
  8. #include "EEPROM.h"
  9.  
  10. ////////////////////////////////////////////////////////////////////////
  11. //CONFIGURATION
  12. ////////////////////////////////////////////////////////////////////////
  13.  
  14. //IP manual settings
  15. byte ip[] = {
  16. 192, 168, 1, 177 }; //Manual setup only
  17. byte gateway[] = {
  18. 192, 168, 1, 254 }; //Manual setup only
  19. byte subnet[] = {
  20. 255, 255, 255, 0 }; //Manual setup only
  21.  
  22. // if need to change the MAC address (Very Rare)
  23. byte mac[] = {
  24. 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
  25.  
  26. //Ethernet Port
  27. EthernetServer server = EthernetServer(80); //default html port 80
  28.  
  29. //The number of outputs going to be switched.
  30. int outputQuantity = 10; //should not exceed 10
  31.  
  32. //Invert the output of the leds
  33. boolean outputInverted = false; //true or false
  34. // This is done in case the relay board triggers the relay on negative, rather then on positive supply
  35.  
  36. //Html page refresh
  37. int refreshPage = 15; //default is 10sec.
  38. //Beware that if you make it refresh too fast, the page could become inacessable.
  39.  
  40. //Display or hide the "Switch on all Pins" buttons at the bottom of page
  41. int switchOnAllPinsButton = false; //true or false
  42.  
  43. //Button Array
  44. //Just for a note, varables start from 0 to 9, as 0 is counted as well, thus 10 outputs.
  45.  
  46. // Select the pinout address
  47. int outputAddress[10] = { 13,5,6,7,8,9,14,15,16,17}; //Allocate 10 spaces and name the output pin address.
  48. //PS pin addresses 10, 11, 12 and 13 on the Duemilanove are used for the ethernet shield, therefore cannot be used.
  49. //PS pin addresses 10, 50, 51 and 52 and 53 on the Mega are used for the ethernet shield, therefore cannot be used.
  50. //PS pin addresses 4, are used for the SD card, therefore cannot be used.
  51. //PS. pin address 2 is used for interrupt-driven notification, therefore could not be used.
  52.  
  53. // Write the text description of the output channel
  54. String buttonText[10] = {
  55. "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"};
  56.  
  57. // Set the output to retain the last status after power recycle.
  58. int retainOutputStatus[10] = {1,0,0,0,1,1,1,1,1,1};//1-retain the last status. 0-will be off after power cut.
  59.  
  60. ////////////////////////////////////////////////////////////////////////
  61.  
  62. ////////////////////////////////////////////////////////////////////////
  63. //VARIABLES DECLARATION
  64. ////////////////////////////////////////////////////////////////////////
  65. int outp = 0;
  66. boolean printLastCommandOnce = false;
  67. boolean printButtonMenuOnce = false;
  68. boolean initialPrint = true;
  69. String allOn = "";
  70. String allOff = "";
  71. boolean reading = false;
  72. boolean outputStatus[10]; //Create a boolean array for the maximum ammount.
  73. String rev = "V4.06";
  74. unsigned long timeConnectedAt;
  75. boolean writeToEeprom = false;
  76. //EthernetClient client;
  77.  
  78. /////////////////////////////////////////////////
  79.  
  80. // Temperature Related Reading
  81. const int tempInPin = A1;
  82. int tempInValue = 0; //temperature read
  83. int tempScaleOutValue = 0; //temperature formatted
  84. int tempOutValue = 0; //temperature formatted
  85. float tempOutDeg = 0.0;
  86.  
  87. ////////////////////////////////////////////////////////////////////////
  88. //RUN ONCE
  89. ////////////////////////////////////////////////////////////////////////
  90. //Beginning of Program
  91. void setup(){
  92. Serial.begin(9600);
  93.  
  94. initEepromValues();
  95. readEepromValues();
  96.  
  97. //Set pins as Outputs
  98. boolean currentState = false;
  99. for (int var = 0; var < outputQuantity; var++){
  100.  
  101. pinMode(outputAddress[var], OUTPUT);
  102.  
  103. //Switch all outputs to either on or off on Startup
  104. if(outputInverted == true) {
  105. //digitalWrite(outputAddress[var], HIGH);
  106. if(outputStatus[var] == 0){currentState = true;}else{currentState = false;} //check outputStatus if off, switch output accordingly
  107. digitalWrite(outputAddress[var], currentState);
  108.  
  109. }
  110. else{
  111.  
  112. //digitalWrite(outputAddress[var], LOW);
  113. if(outputStatus[var] == 0){currentState = false;}else{currentState = true;}//check outputStatus if off, switch output accordingly
  114. digitalWrite(outputAddress[var], currentState);
  115. }
  116.  
  117. }
  118.  
  119. //Setting up the IP address. Comment out the one you dont need.
  120. //Ethernet.begin(mac); //for DHCP address. (Address will be printed to serial.)
  121. Ethernet.begin(mac, ip, gateway, subnet); //for manual setup. (Address is the one configured above.)
  122.  
  123.  
  124. server.begin();
  125. Serial.print("Server started at ");
  126. Serial.println(Ethernet.localIP());
  127. }
  128.  
  129.  
  130. ////////////////////////////////////////////////////////////////////////
  131. //LOOP
  132. ////////////////////////////////////////////////////////////////////////
  133. //Run once
  134. void loop(){
  135.  
  136.  
  137. //Read Temperature Sensor
  138. tempInValue = analogRead(tempInPin);
  139.  
  140. // Connecting a 10K3 Thermistor to the Arduino Input
  141. // +5V �—————————[10Kohms]—————————[Thermistor]——� 0V
  142. // To Arduino IP �———————————|
  143. tempScaleOutValue = map(tempInValue, 0, 1023, 1023, 0); //Arduino value and NTC of the 10K3 Thermistor
  144. tempOutValue = map(tempScaleOutValue, 130, 870, -170, 730); //range of Arduino Value compared with Temperature
  145. tempOutValue = tempOutValue -45; //Adjustments
  146. tempOutDeg = tempOutValue / 10.0;
  147.  
  148.  
  149.  
  150. // listen for incoming clients, and process requests.
  151. checkForClient();
  152. }
  153.  
  154. ////////////////////////////////////////////////////////////////////////
  155. //checkForClient Function
  156. ////////////////////////////////////////////////////////////////////////
  157. //
  158. void checkForClient(){
  159.  
  160. EthernetClient client = server.available();
  161.  
  162. if (client) {
  163.  
  164. // an http request ends with a blank line
  165. boolean currentLineIsBlank = true;
  166. boolean sentHeader = false;
  167.  
  168. while (client.connected()) {
  169. if (client.available()) {
  170.  
  171. //if header was not set send it
  172.  
  173. //read user input
  174. char c = client.read();
  175.  
  176. if(c == '*'){
  177.  
  178. printHtmlHeader(client); //call for html header and css
  179. printLoginTitle(client);
  180. printHtmlFooter(client);
  181. //sentHeader = true;
  182. break;
  183. }
  184.  
  185. if(!sentHeader){
  186.  
  187. printHtmlHeader(client); //call for html header and css
  188. printHtmlButtonTitle(client); //print the button title
  189.  
  190. //This is for the arduino to construct the page on the fly.
  191. sentHeader = true;
  192. }
  193.  
  194. //read user input
  195. // char c = client.read();
  196.  
  197. //if there was reading but is blank there was no reading
  198. if(reading && c == ' '){
  199. reading = false;
  200. }
  201.  
  202. //if there is a ? there was user input
  203. if(c == '?') {
  204. reading = true; //found the ?, begin reading the info
  205. }
  206.  
  207. // if there was user input switch the relevant output
  208. if(reading){
  209.  
  210. //if user input is H set output to 1
  211. if(c == 'H') {
  212. outp = 1;
  213. }
  214.  
  215. //if user input is L set output to 0
  216. if(c == 'L') {
  217. outp = 0;
  218. }
  219.  
  220. Serial.print(c); //print the value of c to serial communication
  221. //Serial.print(outp);
  222. //Serial.print('\n');
  223.  
  224. switch (c) {
  225.  
  226. case '0':
  227. //add code here to trigger on 0
  228. triggerPin(outputAddress[0], client, outp);
  229. break;
  230. case '1':
  231. //add code here to trigger on 1
  232. triggerPin(outputAddress[1], client, outp);
  233. break;
  234. case '2':
  235. //add code here to trigger on 2
  236. triggerPin(outputAddress[2], client, outp);
  237. break;
  238. case '3':
  239. //add code here to trigger on 3
  240. triggerPin(outputAddress[3], client, outp);
  241. break;
  242. case '4':
  243. //add code here to trigger on 4
  244. triggerPin(outputAddress[4], client, outp);
  245. break;
  246. case '5':
  247. //add code here to trigger on 5
  248. triggerPin(outputAddress[5], client, outp);
  249. //printHtml(client);
  250. break;
  251. case '6':
  252. //add code here to trigger on 6
  253. triggerPin(outputAddress[6], client, outp);
  254. break;
  255. case '7':
  256. //add code here to trigger on 7
  257. triggerPin(outputAddress[7], client, outp);
  258. break;
  259. case '8':
  260. //add code here to trigger on 8
  261. triggerPin(outputAddress[8], client, outp);
  262. break;
  263. case '9':
  264. //add code here to trigger on 9
  265. triggerPin(outputAddress[9], client, outp);
  266. break;
  267. } //end of switch case
  268.  
  269. }//end of switch switch the relevant output
  270.  
  271. //if user input was blank
  272. if (c == '\n' && currentLineIsBlank){
  273. printLastCommandOnce = true;
  274. printButtonMenuOnce = true;
  275. triggerPin(777, client, outp); //Call to read input and print menu. 777 is used not to update any outputs
  276. break;
  277. }
  278. }
  279. }
  280.  
  281. printHtmlFooter(client); //Prints the html footer
  282.  
  283. }
  284. else
  285. { //if there is no client
  286.  
  287. //And time of last page was served is more then a minute.
  288. if (millis() > (timeConnectedAt + 60000)){
  289.  
  290. if (writeToEeprom == true){
  291. writeEepromValues(); //write to EEprom the current output statuses
  292. Serial.println("No Clients for more then a minute - Writing statuses to Eeprom.");
  293. writeToEeprom = false;
  294. }
  295. }
  296. }
  297. }
  298.  
  299.  
  300. ////////////////////////////////////////////////////////////////////////
  301. //triggerPin Function
  302. ////////////////////////////////////////////////////////////////////////
  303. //
  304. void triggerPin(int pin, EthernetClient client, int outp){
  305. //Switching on or off outputs, reads the outputs and prints the buttons
  306.  
  307. //Setting Outputs
  308. if (pin != 777){
  309.  
  310. if(outp == 1) {
  311. if (outputInverted ==false){
  312. digitalWrite(pin, HIGH);
  313. }
  314. else{
  315. digitalWrite(pin, LOW);
  316. }
  317. }
  318. if(outp == 0){
  319. if (outputInverted ==false){
  320. digitalWrite(pin, LOW);
  321. }
  322. else{
  323. digitalWrite(pin, HIGH);
  324. }
  325. }
  326.  
  327. }
  328. //Refresh the reading of outputs
  329. readOutputStatuses();
  330.  
  331.  
  332. //Prints the buttons
  333. if (printButtonMenuOnce == true){
  334. printHtmlButtons(client);
  335. printButtonMenuOnce = false;
  336. }
  337. }
  338.  
  339. ////////////////////////////////////////////////////////////////////////
  340. //printHtmlButtons Function
  341. ////////////////////////////////////////////////////////////////////////
  342. //print the html buttons to switch on/off channels
  343. void printHtmlButtons(EthernetClient client){
  344.  
  345. //Start to create the html table
  346. client.println("");
  347. //client.println("<p>");
  348. client.println("<FORM>");
  349. client.println("<table border=\"0\" align=\"center\">");
  350.  
  351.  
  352. //Printing the Temperature
  353. client.print("<tr>\n");
  354.  
  355. client.print("<td><h4>");
  356. client.print("Temperature");
  357. client.print("</h4></td>\n");
  358. client.print("<td></td>");
  359. client.print("<td>");
  360. client.print("<h3>");
  361. client.print(tempOutDeg);
  362. // client.print(tempOutValue);
  363. client.print(" &deg;C</h3></td>\n");
  364.  
  365. client.print("<td></td>");
  366. client.print("</tr>");
  367.  
  368.  
  369. //Start printing button by button
  370. for (int var = 0; var < outputQuantity; var++) {
  371.  
  372. //set command for all on/off
  373. allOn += "H";
  374. allOn += outputAddress[var];
  375. allOff += "L";
  376. allOff += outputAddress[var];
  377.  
  378. //Print begining of row
  379. client.print("<tr>\n");
  380.  
  381. //Prints the button Text
  382. client.print("<td><h4>");
  383. client.print(buttonText[var]);
  384. client.print("</h4></td>\n");
  385.  
  386. //Prints the ON Buttons
  387. client.print("<td>");
  388. //client.print(buttonText[var]);
  389. client.print("<INPUT TYPE=\"button\" VALUE=\"ON ");
  390. //client.print(buttonText[var]);
  391. client.print("\" onClick=\"parent.location='/?H");
  392. client.print(var);
  393. client.print("'\"></td>\n");
  394.  
  395. //Prints the OFF Buttons
  396. client.print(" <td><INPUT TYPE=\"button\" VALUE=\"OFF");
  397. //client.print(var);
  398. client.print("\" onClick=\"parent.location='/?L");
  399. client.print(var);
  400. client.print("'\"></td>\n");
  401.  
  402.  
  403. //Print first part of the Circles or the LEDs
  404.  
  405. //Invert the LED display if output is inverted.
  406.  
  407. if (outputStatus[var] == true ){ //If Output is ON
  408. if (outputInverted == false){ //and if output is not inverted
  409. client.print(" <td><div class='green-circle'><div class='glare'></div></div></td>\n"); //Print html for ON LED
  410. }
  411. else{ //else output is inverted then
  412. client.print(" <td><div class='black-circle'><div class='glare'></div></div></td>\n"); //Print html for OFF LED
  413. }
  414. }
  415. else //If Output is Off
  416. {
  417. if (outputInverted == false){ //and if output is not inverted
  418. client.print(" <td><div class='black-circle'><div class='glare'></div></div></td>\n"); //Print html for OFF LED
  419. }
  420. else{ //else output is inverted then
  421. client.print(" <td><div class='green-circle'><div class='glare'></div></div></td>\n"); //Print html for ON LED
  422. }
  423. }
  424.  
  425. //Print end of row
  426. client.print("</tr>\n");
  427. }
  428.  
  429. //Display or hide the Print all on Pins Button
  430. if (switchOnAllPinsButton == true ){
  431.  
  432. //Prints the ON All Pins Button
  433. client.print("<tr>\n<td><INPUT TYPE=\"button\" VALUE=\"Switch ON All Pins");
  434. client.print("\" onClick=\"parent.location='/?");
  435. client.print(allOn);
  436. client.print("'\"></td>\n");
  437.  
  438. //Prints the OFF All Pins Button
  439. client.print("<td><INPUT TYPE=\"button\" VALUE=\"Switch OFF All Pins");
  440. client.print("\" onClick=\"parent.location='/?");
  441. client.print(allOff);
  442. client.print("'\"></td>\n<td></td>\n<td></td>\n</tr>\n");
  443. }
  444.  
  445. //Closing the table and form
  446. client.println("</table>");
  447. client.println("</FORM>");
  448. //client.println("</p>");
  449. }
  450.  
  451. ////////////////////////////////////////////////////////////////////////
  452. //readOutputStatuses Function
  453. ////////////////////////////////////////////////////////////////////////
  454. //Reading the Output Statuses
  455. void readOutputStatuses(){
  456. for (int var = 0; var < outputQuantity; var++) {
  457. outputStatus[var] = digitalRead(outputAddress[var]);
  458. //Serial.print(outputStatus[var]);
  459. }
  460. }
  461.  
  462. ////////////////////////////////////////////////////////////////////////
  463. //readEepromValues Function
  464. ////////////////////////////////////////////////////////////////////////
  465. //Read EEprom values and save to outputStatus
  466. void readEepromValues(){
  467. for (int adr = 0; adr < outputQuantity; adr++) {
  468. outputStatus[adr] = EEPROM.read(adr);
  469. }
  470. }
  471.  
  472. ////////////////////////////////////////////////////////////////////////
  473. //writeEepromValues Function
  474. ////////////////////////////////////////////////////////////////////////
  475. //Write EEprom values
  476. void writeEepromValues(){
  477. for (int adr = 0; adr < outputQuantity; adr++) {
  478. EEPROM.write(adr, outputStatus[adr]);
  479. }
  480. }
  481.  
  482. ////////////////////////////////////////////////////////////////////////
  483. //initEepromValues Function
  484. ////////////////////////////////////////////////////////////////////////
  485. //Initialiaze EEprom values
  486. //if eeprom values are not the correct format ie not euqual to 0 or 1 (thus greater then 1) initialize by putting 0
  487. void initEepromValues(){
  488. for (int adr = 0; adr < outputQuantity; adr++){
  489. if (EEPROM.read(adr) > 1){
  490. EEPROM.write(adr, 0);
  491. }
  492. }
  493. }
  494.  
  495. ////////////////////////////////////////////////////////////////////////
  496. //htmlHeader Function
  497. ////////////////////////////////////////////////////////////////////////
  498. //Prints html header
  499. void printHtmlHeader(EthernetClient client){
  500. Serial.print("Serving html Headers at ms -");
  501. timeConnectedAt = millis(); //Record the time when last page was served.
  502. Serial.print(timeConnectedAt); // Print time for debbugging purposes
  503. writeToEeprom = true; // page loaded so set to action the write to eeprom
  504.  
  505. // send a standard http response header
  506. client.println("HTTP/1.1 200 OK");
  507. client.println("Content-Type: text/html");
  508. client.println("Connnection: close");
  509. client.println();
  510. client.println("<!DOCTYPE HTML>");
  511. client.println("<head>");
  512.  
  513. // add page title
  514. client.println("<title>Ethernet Based Appliance Control</title>");
  515. client.println("<meta name=\"description\" content=\"Ethernet Based Appliance Control\"/>");
  516.  
  517. // add a meta refresh tag, so the browser pulls again every x seconds:
  518. client.print("<meta http-equiv=\"refresh\" content=\"");
  519. client.print(refreshPage);
  520. client.println("; url=/\">");
  521.  
  522. // add other browser configuration
  523. client.println("<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">");
  524. client.println("<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"default\">");
  525. client.println("<meta name=\"viewport\" content=\"width=device-width, user-scalable=no\">");
  526.  
  527. //inserting the styles data, usually found in CSS files.
  528. client.println("<style type=\"text/css\">");
  529. client.println("");
  530.  
  531. //This will set how the page will look graphically
  532. client.println("html { height:100%; }");
  533.  
  534. client.println(" body {");
  535. client.println(" height: 100%;");
  536. client.println(" margin: 0;");
  537. client.println(" font-family: helvetica, sans-serif;");
  538. client.println(" -webkit-text-size-adjust: none;");
  539. client.println(" }");
  540. client.println("");
  541. client.println("body {");
  542. client.println(" -webkit-background-size: 100% 21px;");
  543. client.println(" background-color: #c5ccd3;");
  544. client.println(" background-image:");
  545. client.println(" -webkit-gradient(linear, left top, right top,");
  546. client.println(" color-stop(.75, transparent),");
  547. client.println(" color-stop(.75, rgba(255,255,255,.1)) );");
  548. client.println(" -webkit-background-size: 7px;");
  549. client.println(" }");
  550. client.println("");
  551. client.println(".view {");
  552. client.println(" min-height: 100%;");
  553. client.println(" overflow: auto;");
  554. client.println(" }");
  555. client.println("");
  556. client.println(".header-wrapper {");
  557. client.println(" height: 44px;");
  558. client.println(" font-weight: bold;");
  559. client.println(" text-shadow: rgba(0,0,0,0.7) 0 -1px 0;");
  560. client.println(" border-top: solid 1px rgba(255,255,255,0.6);");
  561. client.println(" border-bottom: solid 1px rgba(0,0,0,0.6);");
  562. client.println(" color: #fff;");
  563. client.println(" background-color: #8195af;");
  564. client.println(" background-image:");
  565. client.println(" -webkit-gradient(linear, left top, left bottom,");
  566. client.println(" from(rgba(255,255,255,.4)),");
  567. client.println(" to(rgba(255,255,255,.05)) ),");
  568. client.println(" -webkit-gradient(linear, left top, left bottom,");
  569. client.println(" from(transparent),");
  570. client.println(" to(rgba(0,0,64,.1)) );");
  571. client.println(" background-repeat: no-repeat;");
  572. client.println(" background-position: top left, bottom left;");
  573. client.println(" -webkit-background-size: 100% 21px, 100% 22px;");
  574. client.println(" -webkit-box-sizing: border-box;");
  575. client.println(" }");
  576. client.println("");
  577. client.println(".header-wrapper h1 {");
  578. client.println(" text-align: center;");
  579. client.println(" font-size: 20px;");
  580. client.println(" line-height: 44px;");
  581. client.println(" margin: 0;");
  582. client.println(" }");
  583. client.println("");
  584. client.println(".group-wrapper {");
  585. client.println(" margin: 9px;");
  586. client.println(" }");
  587. client.println("");
  588. client.println(".group-wrapper h2 {");
  589. client.println(" color: #4c566c;");
  590. client.println(" font-size: 17px;");
  591. client.println(" line-height: 0.8;");
  592. client.println(" font-weight: bold;");
  593. client.println(" text-shadow: #fff 0 1px 0;");
  594. client.println(" margin: 20px 10px 12px;");
  595. client.println(" }");
  596. client.println("");
  597. client.println(".group-wrapper h3 {");
  598. client.println(" color: #4c566c;");
  599. client.println(" font-size: 12px;");
  600. client.println(" line-height: 1;");
  601. client.println(" font-weight: bold;");
  602. client.println(" text-shadow: #fff 0 1px 0;");
  603. client.println(" margin: 20px 10px 12px;");
  604. client.println(" }");
  605. client.println("");
  606. client.println(".group-wrapper h4 {"); //Text for description
  607. client.println(" color: #212121;");
  608. client.println(" font-size: 14px;");
  609. client.println(" line-height: 1;");
  610. client.println(" font-weight: bold;");
  611. client.println(" text-shadow: #aaa 1px 1px 3px;");
  612. client.println(" margin: 5px 5px 5px;");
  613. client.println(" }");
  614. client.println("");
  615. client.println(".group-wrapper table {");
  616. client.println(" background-color: #fff;");
  617. client.println(" -webkit-border-radius: 10px;");
  618.  
  619. client.println(" -moz-border-radius: 10px;");
  620. client.println(" -khtml-border-radius: 10px;");
  621. client.println(" border-radius: 10px;");
  622.  
  623.  
  624. client.println(" font-size: 17px;");
  625. client.println(" line-height: 20px;");
  626. client.println(" margin: 9px 0 20px;");
  627. client.println(" border: solid 1px #a9abae;");
  628. client.println(" padding: 11px 3px 12px 3px;");
  629. client.println(" margin-left:auto;");
  630. client.println(" margin-right:auto;");
  631.  
  632. client.println(" -moz-transform :scale(1);"); //Code for Mozilla Firefox
  633. client.println(" -moz-transform-origin: 0 0;");
  634.  
  635.  
  636.  
  637. client.println(" }");
  638. client.println("");
  639.  
  640.  
  641. //how the green (ON) LED will look
  642. client.println(".green-circle {");
  643. client.println(" display: block;");
  644. client.println(" height: 23px;");
  645. client.println(" width: 23px;");
  646. client.println(" background-color: #0f0;");
  647. //client.println(" background-color: rgba(60, 132, 198, 0.8);");
  648. client.println(" -moz-border-radius: 11px;");
  649. client.println(" -webkit-border-radius: 11px;");
  650. client.println(" -khtml-border-radius: 11px;");
  651. client.println(" border-radius: 11px;");
  652. client.println(" margin-left: 1px;");
  653.  
  654. client.println(" background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(46, 184, 0, 0.8)), to(rgba(148, 255, 112, .9)));@");
  655. client.println(" border: 2px solid #ccc;");
  656. client.println(" -webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px;");
  657. client.println(" -moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */");
  658. client.println(" box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */");
  659.  
  660. client.println(" }");
  661. client.println("");
  662.  
  663. //how the black (off)LED will look
  664. client.println(".black-circle {");
  665. client.println(" display: block;");
  666. client.println(" height: 23px;");
  667. client.println(" width: 23px;");
  668. client.println(" background-color: #040;");
  669. client.println(" -moz-border-radius: 11px;");
  670. client.println(" -webkit-border-radius: 11px;");
  671. client.println(" -khtml-border-radius: 11px;");
  672. client.println(" border-radius: 11px;");
  673. client.println(" margin-left: 1px;");
  674. client.println(" -webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px;");
  675. client.println(" -moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */");
  676. client.println(" box-shadow: rgba(11, 140, 27, 0.5) 0px 10px 16px; /* FF 3.5+ */");
  677. client.println(" }");
  678. client.println("");
  679.  
  680. //this will add the glare to both of the LEDs
  681. client.println(" .glare {");
  682. client.println(" position: relative;");
  683. client.println(" top: 1;");
  684. client.println(" left: 5px;");
  685. client.println(" -webkit-border-radius: 10px;");
  686. client.println(" -moz-border-radius: 10px;");
  687. client.println(" -khtml-border-radius: 10px;");
  688. client.println(" border-radius: 10px;");
  689. client.println(" height: 1px;");
  690. client.println(" width: 13px;");
  691. client.println(" padding: 5px 0;");
  692. client.println(" background-color: rgba(200, 200, 200, 0.25);");
  693. client.println(" background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));");
  694. client.println(" }");
  695. client.println("");
  696.  
  697.  
  698. //and finally this is the end of the style data and header
  699. client.println("</style>");
  700. client.println("</head>");
  701.  
  702. //now printing the page itself
  703. client.println("<body>");
  704. client.println("<div class=\"view\">");
  705. client.println(" <div class=\"header-wrapper\">");
  706. client.println(" <h1>Ethernet Based Appliance Control</h1>");
  707. client.println(" </div>");
  708.  
  709. //////
  710.  
  711. } //end of htmlHeader
  712.  
  713. ////////////////////////////////////////////////////////////////////////
  714. //htmlFooter Function
  715. ////////////////////////////////////////////////////////////////////////
  716. //Prints html footer
  717. void printHtmlFooter(EthernetClient client){
  718. //Set Variables Before Exiting
  719. printLastCommandOnce = false;
  720. printButtonMenuOnce = false;
  721. allOn = "";
  722. allOff = "";
  723.  
  724. //printing last part of the html
  725. client.println("\n<h3 align=\"center\">&copy; Author - Debashish Mohapatra <br> Lecturer, Dept of AE&IE, PIET ");
  726. client.println(rev);
  727. client.println("</h3></div>\n</div>\n</body>\n</html>");
  728.  
  729. delay(1); // give the web browser time to receive the data
  730.  
  731. client.stop(); // close the connection:
  732.  
  733. Serial.println(" - Done, Closing Connection.");
  734.  
  735. delay (2); //delay so that it will give time for client buffer to clear and does not repeat multiple pages.
  736.  
  737. } //end of htmlFooter
  738.  
  739. ////////////////////////////////////////////////////////////////////////
  740. //printHtmlButtonTitle Function
  741. ////////////////////////////////////////////////////////////////////////
  742. //Prints html button title
  743. void printHtmlButtonTitle(EthernetClient client){
  744. client.println("<div class=\"group-wrapper\">");
  745. client.println(" <h2 align=\"center\" >Switch the required output.</h2>");
  746. client.println();
  747. }
  748.  
  749. ////////////////////////////////////////////////////////////////////////
  750. //printLoginTitle Function
  751. ////////////////////////////////////////////////////////////////////////
  752. //Prints html button title
  753. void printLoginTitle(EthernetClient client){
  754. // client.println("<div class=\"group-wrapper\">");
  755. client.println(" <h2>Please enter the user data to login.</h2>");
  756. client.println();
  757. }