South UK
Offline
Sr. Member
Karma: 1
Posts: 479
|
 |
« on: November 28, 2012, 02:27:08 pm » |
Hi all, I'm working with some code I found on the net, works nicely at the moment but the page is plain. I'm trying to add some styling, and I have been messing around trying to add it too the head, but it won't compile  this is the line causing me grief client.println({"<style type="text/css">body {font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d }"); This is the whole code //simple button GET server code to control servo and arduino pin 5 //for use with IDE 1.0 //open serial monitor to see what the arduino receives //use the \ slash to escape the " in the html //for use with W5100 based ethernet shields //Powering a servo from the arduino usually DOES NOT WORK. //note that the below bug fix may be required //http://www.instructables.com/id/Control-an-LED-over-the-internet-using-the-Arduino/step2/Connected/ // http://code.google.com/p/arduino/issues/detail?id=605 //http://www.instructables.com/id/Arduino-Control-via-a-Web-Service-with-Teleduino/?ALLSTEPS //http://www.christophercommunications.org/Web_page_based_control.html
int A = 1; int B = 2; int C = 3; int D = 4;
#include <SPI.h> #include <Ethernet.h> #include <Servo.h> Servo myservo; // create servo object to control a servo byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address byte ip[] = { 192, 168, 0, 177 }; // ip in lan byte gateway[] = { 192, 168, 0, 1 }; // internet access via router byte subnet[] = { 255, 255, 255, 0 }; //subnet mask EthernetServer server(80); //server port String readString; ////////////////////// void setup(){ pinMode(6, OUTPUT); //pin selected to control //start Ethernet Ethernet.begin(mac, ip, gateway, subnet); server.begin(); //the pin for the servo co //enable serial data print Serial.begin(9600); Serial.println("server LED test 1.0"); // so I can keep track of what is loaded } void loop(){ // Create a client connection EthernetClient client = server.available(); if (client) { while (client.connected()) { if (client.available()) { char c = client.read(); //read char by char HTTP request if (readString.length() < 100) { //store characters to string readString += c; //Serial.print(c); } //if HTTP request has ended if (c == '\n') { /////////////// Serial.println(readString); //print to serial monitor for debuging client.println("HTTP/1.1 200 OK"); //send new page client.println("Content-Type: text/html"); client.println(); client.println("<HTML>"); client.println("<HEAD>"); client.println("<meta name='apple-mobile-web-app-capable' content='yes' />"); client.println("<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />"); //client.println("<link rel='stylesheet' type='text/css' href='http://chriscosma.co.cc/a.css' />"); client.println("<TITLE>Home Automation</TITLE>"); client.println("</HEAD>"); client.println("<BODY>"); client.println("<H1>Home Automation</H1>"); client.println("<hr />"); client.println("<br />"); //Light A client.println("<a href=\"/?lightAon\"\">Turn On Light A</a>"); client.println("<a href=\"/?lightAoff\"\">Turn Off Light A</a><br />"); //Light B client.println("<a href=\"/?lightBon\"\">Turn On Light B</a>"); client.println("<a href=\"/?lightBoff\"\">Turn Off Light B</a><br />"); client.println("</BODY>"); client.println("</HTML>"); delay(1); //stopping client client.stop(); ///////////////////// control arduino Light A if(readString.indexOf("?lightAon") >0)//checks for on { digitalWrite(A, HIGH); Serial.println("Light A On"); client.println("<link rel='apple-touch-icon' href='http://shedbass.com/dtokez/buttons/on.png'/>"); } else{ if(readString.indexOf("?lightAoff") >0)//checks for off { digitalWrite(A, LOW); Serial.println("Light A Off"); client.println("<link rel='apple-touch-icon' href='http://shedbass.com/dtokez/buttons/off.png'/>"); } } ///////////////////// control arduino Light B if(readString.indexOf("?lightBon") >0)//checks for on { digitalWrite(B, HIGH); Serial.println("Light B On"); client.println("<link rel='apple-touch-icon' href='http://shedbass.com/dtokez/buttons/on.png'/>"); } else{ if(readString.indexOf("?lightBoff") >0)//checks for off { digitalWrite(B, LOW); Serial.println("Light B Off"); client.println("<link rel='apple-touch-icon' href='http://shedbass.com/dtokez/buttons/off.png'/>"); } } //clearing string for next read readString=""; } } } } }
|
|
|
|
« Last Edit: November 28, 2012, 09:15:27 pm by dtokez »
|
Logged
|
|
|
|
|
Seattle, WA USA
Offline
Brattain Member
Karma: 311
Posts: 35470
Seattle, WA USA
|
 |
« Reply #1 on: November 28, 2012, 02:55:12 pm » |
client.println({"<style type=\"text/css\">body {font-family: Georgia, \"Times New Roman\", Times, serif; color: purple; background-color: #d8da3d }"); You need to escape the internal double quotes, as shown here.
|
|
|
|
|
Logged
|
|
|
|
|
South UK
Offline
Sr. Member
Karma: 1
Posts: 479
|
 |
« Reply #2 on: November 28, 2012, 08:07:03 pm » |
Hi Paul. Thanks for that! It's going to be odd getting used to using html within the Arduino environment lol I have cleaned out the code slightly, and managed to use image links as buttons. Strangely though, with the following line in the head client.println("<style type=\"text/css\">body {font-family: Georgia; color: purple; background-color: #d8da3d}"); I just get a blank coloured screen, it seems to block the rest of the page after it? Here is the main code client.println("<style type=\"text/css\">body {font-family: Georgia; color: purple; background-color: #d8da3d}");
|
|
|
|
« Last Edit: November 28, 2012, 08:10:22 pm by dtokez »
|
Logged
|
|
|
|
|
0
Offline
God Member
Karma: 37
Posts: 974
Get Bitlash: http://bitlash.net
|
 |
« Reply #3 on: November 28, 2012, 08:18:30 pm » |
Do you close the style tag with </style>? Can't see from here. But missing a closing tag is the sort of thing that will cause the rest of the page to get lost.
-br
|
|
|
|
|
Logged
|
|
|
|
|
South UK
Offline
Sr. Member
Karma: 1
Posts: 479
|
 |
« Reply #4 on: November 28, 2012, 08:29:08 pm » |
Ah! What a silly mistake, I forgot to close the tag as you say  many thanks! I'm now attempting to show a different button by reading the state of a pin, but.... its not working lol Just added this in, but neither image is showing up. When starting up the pin will be low, so I thought that the else if statement would run, which should display the on button, then once on the if loop would run, showing the off button? maybe I have made another silly error, can't work out This is the addition: if(A == HIGH) { client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a>"); }
else if(A == LOW) { client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a><br />"); } //simple button GET server code to control servo and arduino pin 5 //for use with IDE 1.0 //open serial monitor to see what the arduino receives //use the \ slash to escape the " in the html //for use with W5100 based ethernet shields //Powering a servo from the arduino usually DOES NOT WORK. //note that the below bug fix may be required //http://www.instructables.com/id/Control-an-LED-over-the-internet-using-the-Arduino/step2/Connected/ // http://code.google.com/p/arduino/issues/detail?id=605 //http://www.instructables.com/id/Arduino-Control-via-a-Web-Service-with-Teleduino/?ALLSTEPS //http://www.christophercommunications.org/Web_page_based_control.html
int A = 6; int B = 2; int C = 3; int D = 4;
#include <SPI.h> #include <Ethernet.h>
#include <Servo.h> Servo myservo; // create servo object to control a servo
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address byte ip[] = { 192, 168, 0, 177 }; // ip in lan byte gateway[] = { 192, 168, 0, 1 }; // internet access via router byte subnet[] = { 255, 255, 255, 0 }; //subnet mask EthernetServer server(80); //server port
String readString;
//////////////////////
void setup(){
pinMode(6, OUTPUT); //pin selected to control //start Ethernet Ethernet.begin(mac, ip, gateway, subnet); server.begin(); //the pin for the servo co //enable serial data print Serial.begin(9600); Serial.println("server LED test 1.0"); // so I can keep track of what is loaded }
void loop(){ // Create a client connection EthernetClient client = server.available(); if (client) { while (client.connected()) { if (client.available()) { char c = client.read();
//read char by char HTTP request if (readString.length() < 100) {
//store characters to string readString += c; //Serial.print(c); }
//if HTTP request has ended if (c == '\n') {
/////////////// Serial.println(readString); //print to serial monitor for debuging
client.println("HTTP/1.1 200 OK"); //send new page client.println("Content-Type: text/html"); client.println(); client.println("<HTML>"); client.println("<HEAD>"); client.println("<style> body { background-color:#d0e4fe; }</style>");
client.println("<TITLE>Home Automation</TITLE>");
client.println("</HEAD>"); client.println("<BODY>");
//client.println("<H1>Home Automation</H1>"); //client.println("<hr />"); client.println("<br />");
//Light A //client.println("Light A: "); //client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>"); //client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a><br />");
if(A == HIGH) { client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a>"); }
else if(A == LOW) { client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a><br />"); }
//Light B client.println("<a href=\"/?lightBon\"\">Turn On Light B</a>"); client.println("<a href=\"/?lightBoff\"\">Turn Off Light B</a><br />");
client.println("</BODY>"); client.println("</HTML>");
delay(1); //stopping client client.stop();
///////////////////// control arduino Light A if(readString.indexOf("?lightAon") >0)//checks for on { digitalWrite(A, HIGH); Serial.println("Light A On"); } else{ if(readString.indexOf("?lightAoff") >0)//checks for off { digitalWrite(A, LOW); Serial.println("Light A Off"); } }
///////////////////// control arduino Light B if(readString.indexOf("?lightBon") >0)//checks for on { digitalWrite(B, HIGH); Serial.println("Light B On"); } else{ if(readString.indexOf("?lightBoff") >0)//checks for off { digitalWrite(B, LOW); Serial.println("Light B Off"); } }
//clearing string for next read readString="";
} } } } }
|
|
|
|
|
Logged
|
|
|
|
|
0
Offline
God Member
Karma: 37
Posts: 974
Get Bitlash: http://bitlash.net
|
 |
« Reply #5 on: November 28, 2012, 08:37:29 pm » |
A is 6. Your if condition needs to be based on digitalRead(A), not A. Something more like: if (digitalRead(A)) { … } else { … }
-br
|
|
|
|
|
Logged
|
|
|
|
|
South UK
Offline
Sr. Member
Karma: 1
Posts: 479
|
 |
« Reply #6 on: November 28, 2012, 09:05:03 pm » |
Thanks Billroy! Another school boy error on my part  Is it possible to add a command to force the browser to reload the page after i click a link? I know I could use a meta refresh in the header but seems pointless the page reloading constantly? Please forgive me, its been over 10 years since I learnt Html, before the days of php and java lol
|
|
|
|
|
Logged
|
|
|
|
|
0
Offline
Tesla Member
Karma: 50
Posts: 6538
Arduino rocks
|
 |
« Reply #7 on: November 28, 2012, 09:37:21 pm » |
Is it possible to add a command to force the browser to reload the page after i click a link? The page should be reloading each time you click the light button.
|
|
|
|
|
Logged
|
|
|
|
|
South UK
Offline
Sr. Member
Karma: 1
Posts: 479
|
 |
« Reply #8 on: November 28, 2012, 09:58:03 pm » |
It kind of looks like the browser is refreshing, but the button does not change, the current behavior is as follows:
First load of page= LED OFF, ON BUTTON DISPLAYED - correct First click of button = LED ON, ON BUTTON DISPLAYED - incorrect Second click of button = LED ON, OFF BUTTON DISPLAYED - incorrect Third click of button = LED OFF, OFF BUTTON DISPLAYED - incorrect Forth click of button = LED OFF, ON BUTTON DISPLAYED - correct . . .
I cant fathom it?
|
|
|
|
|
Logged
|
|
|
|
|
Seattle, WA USA
Offline
Brattain Member
Karma: 311
Posts: 35470
Seattle, WA USA
|
 |
« Reply #9 on: November 29, 2012, 06:04:01 am » |
It kind of looks like the browser is refreshing, but the button does not change, the current behavior is as follows: You've made some code changes since you last posted, haven't you?
|
|
|
|
|
Logged
|
|
|
|
|
South UK
Offline
Sr. Member
Karma: 1
Posts: 479
|
 |
« Reply #10 on: November 29, 2012, 07:04:44 am » |
Hi Paul, I probably have, sorry for not posting! This is what I'm currently working with, and exhibiting the behaviour I explained above //simple button GET server code to control servo and arduino pin 5 //for use with IDE 1.0 //open serial monitor to see what the arduino receives //use the \ slash to escape the " in the html //for use with W5100 based ethernet shields //Powering a servo from the arduino usually DOES NOT WORK. //note that the below bug fix may be required //http://www.instructables.com/id/Control-an-LED-over-the-internet-using-the-Arduino/step2/Connected/ // http://code.google.com/p/arduino/issues/detail?id=605 //http://www.instructables.com/id/Arduino-Control-via-a-Web-Service-with-Teleduino/?ALLSTEPS //http://www.christophercommunications.org/Web_page_based_control.html
int A = 6; int B = 2; int C = 3; int D = 4;
#include <SPI.h> #include <Ethernet.h>
//#include <Servo.h> //Servo myservo; // create servo object to control a servo
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address byte ip[] = { 192, 168, 0, 177 }; // ip in lan byte gateway[] = { 192, 168, 0, 1 }; // internet access via router byte subnet[] = { 255, 255, 255, 0 }; //subnet mask EthernetServer server(80); //server port
String readString;
//////////////////////
void setup(){
pinMode(6, OUTPUT); //pin selected to control //start Ethernet Ethernet.begin(mac, ip, gateway, subnet); server.begin(); //the pin for the servo co //enable serial data print Serial.begin(9600); Serial.println("server LED test 1.0"); // so I can keep track of what is loaded }
void loop(){ // Create a client connection EthernetClient client = server.available(); if (client) { while (client.connected()) { if (client.available()) { char c = client.read();
//read char by char HTTP request if (readString.length() < 100) {
//store characters to string readString += c; //Serial.print(c); }
//if HTTP request has ended if (c == '\n') {
/////////////// Serial.println(readString); //print to serial monitor for debuging
client.println("HTTP/1.1 200 OK"); //send new page client.println("Content-Type: text/html"); client.println(); client.println("<HTML>"); client.println("<HEAD>"); client.println("<style> body { background-color:#303030; }</style>");
client.println("<TITLE>Home Automation</TITLE>");
client.println("</HEAD>"); client.println("<BODY>");
//client.println("<H1>Home Automation</H1>"); //client.println("<hr />"); client.println("<br />");
//Light A //client.println("Light A: "); //client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>"); //client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a><br />");
client.println("<img src='http://www.shedbass.com/dtokez/buttons/hover.png'>"); if((digitalRead(A)) == HIGH) { client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a><br />"); }
else if((digitalRead(A)) == LOW) { client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a><br />"); }
//Light B client.println("<a href=\"/?lightBon\"\">Turn On Light B</a>"); client.println("<a href=\"/?lightBoff\"\">Turn Off Light B</a><br />");
client.println("</BODY>"); client.println("</HTML>");
delay(1); //stopping client client.stop();
///////////////////// control arduino Light A if(readString.indexOf("?lightAon") >0)//checks for on { digitalWrite(A, HIGH); Serial.println("Light A On"); } else{ if(readString.indexOf("?lightAoff") >0)//checks for off { digitalWrite(A, LOW); Serial.println("Light A Off"); } }
///////////////////// control arduino Light B if(readString.indexOf("?lightBon") >0)//checks for on { digitalWrite(B, HIGH); Serial.println("Light B On"); } else{ if(readString.indexOf("?lightBoff") >0)//checks for off { digitalWrite(B, LOW); Serial.println("Light B Off"); } }
//clearing string for next read readString="";
} } } } }
|
|
|
|
|
Logged
|
|
|
|
|
Seattle, WA USA
Offline
Brattain Member
Karma: 311
Posts: 35470
Seattle, WA USA
|
 |
« Reply #11 on: November 29, 2012, 07:16:02 am » |
int A = 6; int B = 2; int C = 3; int D = 4; Nice names for some pins. pinMode(6, OUTPUT); //pin selected to control Names? We don't need no steenking names! (Yes, we do!) if (readString.length() < 100) {
//store characters to string readString += c; //Serial.print(c); }
Why limit the damage to 100 times? You've already shot your foot off using the String class. What's one more bullet going to do? if((digitalRead(A)) == HIGH) { client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a><br />"); }
else if((digitalRead(A)) == LOW) { client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a><br />"); } If reading an OUTPUT pin doesn't result in HIGH, is there any possibility that the function will return something other than LOW? Why are you reading from an OUTPUT pin? Surely you can (have the Arduino) remember what it set the pin to. I'd suspect that you are running out of memory. Unpredictable things can happen when you are out of memory. The F() macro will cause all those massive literal strings from occupying both program memory (where they are OK) and SRAM (where they are not). else{ if(readString.indexOf("?lightAoff") >0)//checks for off
Whyisn'tthisasimpleelseif? (A subtle hint to use the space bar!) What does your serial output show?
|
|
|
|
|
Logged
|
|
|
|
|
South UK
Offline
Sr. Member
Karma: 1
Posts: 479
|
 |
« Reply #12 on: November 29, 2012, 08:46:41 am » |
Hi thanks for the help! I have actioned some of your suggestions: I'm not sure of the issues associated with using the string class? I have added a variable for pin state now - so hopefully it will store and read the state from there on the next loop? I can't test at the moment as I'm at work, but it compiles so will flash the code tonight! Thanks again! //simple button GET server code to control servo and arduino pin 5 //for use with IDE 1.0 //open serial monitor to see what the arduino receives //use the \ slash to escape the " in the html //for use with W5100 based ethernet shields //Powering a servo from the arduino usually DOES NOT WORK. //note that the below bug fix may be required //http://www.instructables.com/id/Control-an-LED-over-the-internet-using-the-Arduino/step2/Connected/ // http://code.google.com/p/arduino/issues/detail?id=605 //http://www.instructables.com/id/Arduino-Control-via-a-Web-Service-with-Teleduino/?ALLSTEPS //http://www.christophercommunications.org/Web_page_based_control.html
//Define light output pins int LightA = 6; int LightB = 2; int LightC = 3; int LightD = 4;
//For holding pin state data int LightAState = 0; int LightBState = 0;
#include <SPI.h> #include <Ethernet.h>
//#include <Servo.h> //Servo myservo; // create servo object to control a servo
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address byte ip[] = { 192, 168, 0, 177 }; // ip in lan byte gateway[] = { 192, 168, 0, 1 }; // internet access via router byte subnet[] = { 255, 255, 255, 0 }; //subnet mask EthernetServer server(80); //server port
String readString;
//////////////////////
void setup(){
//Set up outputs pinMode(LightA, OUTPUT); pinMode(LightB, OUTPUT); pinMode(LightC, OUTPUT); pinMode(LightD, OUTPUT);
//Start Ethernet Ethernet.begin(mac, ip, gateway, subnet); server.begin(); Serial.begin(9600); Serial.println("server LED test 1.0"); // so I can keep track of what is loaded }
void loop(){ // Create a client connection EthernetClient client = server.available(); if (client) { while (client.connected()) { if (client.available()) { char c = client.read();
//read char by char HTTP request if (readString.length() < 100) {
//store characters to string readString += c; //Serial.print(c); }
//if HTTP request has ended if (c == '\n') {
/////////////// Serial.println(readString); //print to serial monitor for debuging
client.println("HTTP/1.1 200 OK"); //send new page client.println("Content-Type: text/html"); client.println(); client.println("<HTML>");
//Write head data client.println("<HEAD>"); client.println("<style> body { background-color:#303030; }</style>"); //CSS style data client.println("<TITLE>Home Automation</TITLE>"); //Page title client.println("</HEAD>");
//Write body data client.println("<BODY>");
//client.println("<H1>Home Automation</H1>"); //client.println("<hr />"); client.println("<br />");
//Light A //client.println("Light A: "); //client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>"); //client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a><br />");
client.println("<img src='http://www.shedbass.com/dtokez/buttons/hover.png'>"); if(LightAState == HIGH) { client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a><br />"); }
else if(LightBState == LOW) { client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a><br />"); }
//Light B client.println("<a href=\"/?lightBon\"\">Turn On Light B</a>"); client.println("<a href=\"/?lightBoff\"\">Turn Off Light B</a><br />");
client.println("</BODY>"); client.println("</HTML>");
delay(1); //stopping client client.stop();
///////////////////// control Light A if(readString.indexOf("?lightAon") >0)//checks for on { digitalWrite(LightA, HIGH); LightAState = HIGH; Serial.println("Light A On"); } else if(readString.indexOf("?lightAoff") >0)//checks for off { digitalWrite(LightA, LOW); LightAState = LOW; Serial.println("Light A Off"); }
///////////////////// control Light B if(readString.indexOf("?lightBon") >0)//checks for on { digitalWrite(LightB, HIGH); LightBState = HIGH; Serial.println("Light B On"); } else if(readString.indexOf("?lightBoff") >0)//checks for off { digitalWrite(LightB, LOW); LightBState = LOW; Serial.println("Light B Off"); }
//clearing string for next read readString="";
} } } } }
|
|
|
|
|
Logged
|
|
|
|
|
Seattle, WA USA
Offline
Brattain Member
Karma: 311
Posts: 35470
Seattle, WA USA
|
 |
« Reply #13 on: November 29, 2012, 08:51:24 am » |
client.println(F("HTTP/1.1 200 OK")); //send new page
Save yourself a lot or SRAM with little effort.
|
|
|
|
|
Logged
|
|
|
|
|
UK
Offline
Tesla Member
Karma: 89
Posts: 6335
-
|
 |
« Reply #14 on: November 29, 2012, 09:24:45 am » |
It kind of looks like the browser is refreshing, but the button does not change, the current behavior is as follows:
Since the problem appears to be in the behaviour of the browser when displaying your page, I suggest you post the HTML source of the page as received by the browser.
|
|
|
|
|
Logged
|
|
|
|
|
|