Pages: 1 [2]   Go Down
Author Topic: Writing CSS style data to a page via ethernet shield  (Read 2368 times)
0 Members and 1 Guest are viewing this topic.
South UK
Offline Offline
God Member
*****
Karma: 5
Posts: 587
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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

Save yourself a lot or SRAM with little effort.


I see, so I can loose the F and the two brackets? What is the purpose of it?

Logged

South UK
Offline Offline
God Member
*****
Karma: 5
Posts: 587
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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.

Will do this straight away when I get home thanks
Logged

Seattle, WA USA
Offline Offline
Brattain Member
*****
Karma: 642
Posts: 50366
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
I see, so I can loose the F and the two brackets? What is the purpose of it?
Not loose them. Add them. The F() macros causes the literal string to remain in program memory, and enables access to the data from there, rather than allowing it to be copied to SRAM.
Logged

South UK
Offline Offline
God Member
*****
Karma: 5
Posts: 587
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
I see, so I can loose the F and the two brackets? What is the purpose of it?
Not loose them. Add them. The F() macros causes the literal string to remain in program memory, and enables access to the data from there, rather than allowing it to be copied to SRAM.

Thanks Paul, that's pretty good to know!

Here is what I have a page source
Code:
<HTML>
<HEAD>
<style> body { background-color:#303030; }</style>
<TITLE>Home Automation</TITLE>
</HEAD>
<BODY>
<br />
<img src='http://www.shedbass.com/dtokez/buttons/hover.png'>
<a href="/?lightAon""><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a><br />
</BODY>
</HTML>

Being generated by this
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//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(F("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 Offline
Brattain Member
*****
Karma: 642
Posts: 50366
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

What does your serial output look like?

Code like this:
Code:
           digitalWrite(LightA, HIGH);
            LightAState = HIGH;

            digitalWrite(LightA, LOW);
            LightAState = LOW;
Is way too easy to get out of sync. Sooner or later, you'll change one line but not the other.

Code like this:
Code:
           LightAState = HIGH;
            digitalWrite(LightA, LightAState);

            LightAState = LOW;
            digitalWrite(LightA, LightAState);
is impossible to get out of sync.

Food for thought.
Logged

UK
Offline Offline
Shannon Member
****
Karma: 223
Posts: 12630
-
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

This looks like the piece of code that writes out the bit of the page that specifies the image.
Code:

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

The second 'if' refers to LightBState rather than LightAState, which is probably wrong, but in any case if you want the image to reflect whether LightA is on or off, a simple if/else would seem a better way to do it:
Code:
          if(LightAState == HIGH)
          {
            client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a><br />");
          }
          else
          {
            client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a><br />");
          }
Logged

I only provide help via the forum - please do not contact me for private consultancy.

South UK
Offline Offline
God Member
*****
Karma: 5
Posts: 587
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

I have just opened the port up if you want to take a look, it will be powered up for the next hour or so, its strange that it takes a double click to change state and load the different button http://92.27.149.24

If I use text links for on/off instead of image, the state changes correctly on every click  smiley-eek

Serial output..
Code:
server LED test 1.0
GET /?lightAon HTTP/1.1

Light A On
GET /favicon.ico HTTP/1.1

GET /?lightAon HTTP/1.1

Light A On
GET /favicon.ico HTTP/1.1

GET /?lightAoff HTTP/1.1

Light A Off
GET /favicon.ico HTTP/1.1

GET /?lightAoff HTTP/1.1

Light A Off
GET /favicon.ico HTTP/1.1

GET /?lightAon HTTP/1.1

Light A On
GET /favicon.ico HTTP/1.1

GET /?lightAon HTTP/1.1

Light A On
GET /favicon.ico HTTP/1.1

Not sure why / where its trying to pull a favicon from?

PeterH, thanks for pointing out those errors / improvements, much appreciated!
Logged

UK
Offline Offline
Shannon Member
****
Karma: 223
Posts: 12630
-
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Not sure why / where its trying to pull a favicon from?

That will be your browser automatically trying to obtain a favicon (tab/window/shortcut icon) to represent your site. If you want to prevent that, you could turn it off in your browser - you may also be able to inhibit it by including a suitable <link rel="shortcut icon" element in your page, but that's not something I've played with.
Logged

I only provide help via the forum - please do not contact me for private consultancy.

South UK
Offline Offline
God Member
*****
Karma: 5
Posts: 587
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

but that favicon stuff is from the serial output?

i still cant work out this thing with having to double click the link  smiley-confuse

Logged

UK
Offline Offline
Shannon Member
****
Karma: 223
Posts: 12630
-
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

but that favicon stuff is from the serial output?

The browser is making an HTTP request to try to read the favicon for your site. Since you don't provide one presumably that request keeps failing, so presumably next time the browser downloads a page from your site it finds it still doesn't have the favicon so it tries to read it again. The message is coming from the serial output because your sketch is printing trace messages when it receives the HTTP request.

i still cant work out this thing with having to double click the link  smiley-confuse

Did you correct the sketch to put the correct image URL in the page in the LightAState == LOW case?
Logged

I only provide help via the forum - please do not contact me for private consultancy.

South UK
Offline Offline
God Member
*****
Karma: 5
Posts: 587
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Oh I see thanks Peter, I was wondering where that was coming from but now understand!

I'm pretty sure I corrected it and changed to using if, else instead of if, else if

Just tried something else to see if it was something to do with the link - added another button that simply shows up to identify the state, both buttons exhibit the same behavior

//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//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(F("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
          {
            client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a><br />");
          }
         
         
          if(LightAState == HIGH)
          {
            client.println("<img src='http://www.shedbass.com/dtokez/buttons/off2.png'>");
          }
         
          else
          {
            client.println("<img src='http://www.shedbass.com/dtokez/buttons/on2.png'>");
          }
         
         
         
         
         
         
         
         
         



          //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
          {
            LightAState = HIGH;
            digitalWrite(LightA, HIGH);
            Serial.println("Light A On");
          }
          else if(readString.indexOf("?lightAoff") >0)//checks for off
          {
            LightAState = LOW;
            digitalWrite(LightA, LOW);
            Serial.println("Light A Off");
          }


          ///////////////////// control Light B
          if(readString.indexOf("?lightBon") >0)//checks for on
          {
            LightBState = HIGH;
            digitalWrite(LightB, HIGH);
            Serial.println("Light B On");
          }
          else if(readString.indexOf("?lightBoff") >0)//checks for off
          {
            LightBState = LOW;
            digitalWrite(LightB, LOW);
            Serial.println("Light B Off");
          }


          //clearing string for next read
          readString="";

        }
      }
    }
  }
}

Logged

South UK
Offline Offline
God Member
*****
Karma: 5
Posts: 587
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

curious, just tried another approach, in which I have both the on and off button displaying under the original button that is meant to dynamically change - and both of the new buttons work with one click ie. on button click once = light on, off button click once light off, and the old button changes state on each click?!

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//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(F("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
          {
            client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a><br />");
          }


          client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a>");
          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
          {
            LightAState = HIGH;
            digitalWrite(LightA, HIGH);
            Serial.println("Light A On");
          }
          else if(readString.indexOf("?lightAoff") >0)//checks for off
          {
            LightAState = LOW;
            digitalWrite(LightA, LOW);
            Serial.println("Light A Off");
          }


          ///////////////////// control Light B
          if(readString.indexOf("?lightBon") >0)//checks for on
          {
            LightBState = HIGH;
            digitalWrite(LightB, HIGH);
            Serial.println("Light B On");
          }
          else if(readString.indexOf("?lightBoff") >0)//checks for off
          {
            LightBState = LOW;
            digitalWrite(LightB, LOW);
            Serial.println("Light B Off");
          }


          //clearing string for next read
          readString="";

        }
      }
    }
  }
}


Logged

UK
Offline Offline
Shannon Member
****
Karma: 223
Posts: 12630
-
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

I'm pretty sure I corrected it and changed to using if, else instead of if, else if

If it still isn't doing what you expect then reproduce the error and then look at the page source to see whether it is displaying the HTML you intend. If the HTML is what you intended but does not produce the right display, then you need to correct the HTML. If the HTML is not what you intended then you need to figure out why the previous action (button click etc) did not result in the correct page being loaded. Perhaps it did not actually submit the URL you intended and load the page, or perhaps the Arduino interpreted the URL request incorrectly and returned the wrong page content. Time to play detective.
Logged

I only provide help via the forum - please do not contact me for private consultancy.

Pages: 1 [2]   Go Up
Jump to: