Go Down

Topic: Writing CSS style data to a page via ethernet shield (Read 2762 times) previous topic - next topic

dtokez

Nov 28, 2012, 08:27 pm Last Edit: Nov 29, 2012, 03:15 am by dtokez Reason: 1
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
Code: [Select]
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
Code: [Select]
//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="";

       }
     }
   }
 }
}

PaulS

Code: [Select]
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.

dtokez

#2
Nov 29, 2012, 02:07 am Last Edit: Nov 29, 2012, 02:10 am by dtokez Reason: 1
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
Code: [Select]
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
Code: [Select]
client.println("<style type=\"text/css\">body {font-family: Georgia; color: purple; background-color: #d8da3d}");

billroy

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

dtokez

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:
Code: [Select]
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 />");
          }


Code: [Select]
//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="";

        }
      }
    }
  }
}

billroy

A is 6.  Your if condition needs to be based on digitalRead(A), not A.  Something more like:

Code: [Select]

if (digitalRead(A)) {

}
else {

}


-br

dtokez

Thanks Billroy! Another school boy error on my part  :smiley-red:

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

zoomkat

Quote
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.
Google forum search: Use Google Advanced Search and use Http://forum.arduino.cc/index in the "site or domain:" box.

dtokez

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?

PaulS

Quote
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?

dtokez

Hi Paul, I probably have, sorry for not posting!

This is what I'm currently working with, and exhibiting the behaviour I explained above

Code: [Select]
//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="";

        }
      }
    }
  }
}

PaulS

Code: [Select]
int A = 6;
int B = 2;
int C = 3;
int D = 4;

Nice names for some pins.

Code: [Select]
  pinMode(6, OUTPUT); //pin selected to control
Names? We don't need no steenking names!

(Yes, we do!)

Code: [Select]
        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?

Code: [Select]
          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).

Code: [Select]
          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?

dtokez

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!

Code: [Select]
//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="";

        }
      }
    }
  }
}


PaulS

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

Save yourself a lot or SRAM with little effort.

PeterH


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.
I only provide help via the forum - please do not contact me for private consultancy.

Go Up