Pages: [1]   Go Down
Author Topic: Webserver: Use of variables to declare html attributes  (Read 835 times)
0 Members and 1 Guest are viewing this topic.
Offline Offline
Newbie
*
Karma: 0
Posts: 7
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Hi,

how can i use variables from my sketch to define HTML Attributes? I have a slider on my page, which should have the value of an int.
Also when i reload the website, i would like to have the slider in the position from the value of redVal.

How to use variables from my sketch in the HTML string? Is there a way? I only now about client.print, but i cant use this to set the attributes of an HTML object.


Code:
client << F("Red: <input type='range' name='red' id='r' min='0' max='255' value='0' step='1'></td></tr>");



Code:
   //--------------------------HTML------------------------
          client << F("HTTP/1.1 200 OK\n");
          client << F("Content-Type: text/html\n\n");
          client << F("");

          client << F("<html>");
          client << F("<head>");
          client << F("<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'/>");
          client << F("<meta name='apple-mobile-web-app-capable' content='yes' />");
          client << F("<title>LED Cube Controll</title>"); //</head>\n");
          client << F("</head>\n");

          client << F("<body margin=0 padding=0 style='font-family:Verdana; background-color:#ccc;'>\n");

          //---Tabellen-Header
          client << F("<table style='border-collapse:collapse;'>");
          client << F("<tr style='font-weight:bold; border-bottom:3px solid #000;'><td>Led Cube Color Mix</td><td colspan=2 align=center></td></tr>");


          client << F("<form action='color' method='get'>");
          client <<F("<tr>");
          client <<F("<td>");
          client << F("Red: <input type='range' name='red' id='r' min='0' max='255' value='0' step='1'></td></tr>");
          client <<F("<tr><td>");
          client << F("Green: <input type='range' name='green' min='0' id='g' max='255' value='0' step='1'></td></tr>");
          client <<F("<tr><td>");
          client << F("Blue: <input type='range' name='blue' id='b' min='0' max='255' value='0' step='1'></td></tr>");
          client <<F("<tr>");
          client <<F("<td>");
          client << F("<input type='submit' value='OK!'></td></tr>");
          client << F("</form>");



          //---System-Info
          client << F("<tr><td colspan=4><br><br><span style='font-size:8px;'>Freier RAM:&nbsp;");
          client.println(freeMemory());
          client << F("Byte</span></td></tr>");
          client << F("<tr><td colspan=4><span style='font-size:8px;'>Arduino Laufzeit:&nbsp;");
          client.println(millis()/1000/60);
          client << F("Minuten</span></td></tr>");

          client << F("</tr>");

          //---Tabellen-Footer
          client << F("<table>");

Sorry for the bad way to express my problem!




Logged

Seattle, WA USA
Online Online
Brattain Member
*****
Karma: 634
Posts: 50243
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
How to use variables from my sketch in the HTML string? Is there a way?
Yes:
Code:
client << F("Red: <input type='range' name='red' id='r' min='0' max='255' value='");
client << currRedVal;
client << F("' step='1'></td></tr>");

Assuming that currRedVal contains the current red value.
Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 7
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

I have tried this, but it is not working. Could you maybe be so kind and have a look to my attached sketch?
I assume that the Webserver did not interpret this command in a right way. I also tried to use: client.print (RedVal); without success.
In the console i can see that RedVal hold its value, until the next change of it.

Of course i know, that the Arduino has not the capabilitys to act as a full grown webserver.


Code:
#include <SPI.h>
#include <Ethernet.h> // Netzwerk-Bibliothek
#include <Flash.h> // Für Speichern der HTML-Daten im Flash statt RAM
#include <MemoryFree.h> // Freien RAM auslesen


byte mac[] = {
  0x54, 0x55, 0x58, 0x10, 0x00, 0x24 }; // entspricht einer MAC von 84.85.88.16.0.36
//byte ip[] = { 10, 101, 1, 13 }; // IP-Adresse
//byte gateway[] = { 10, 101, 1, 1 }; // Gateway
//byte subnet[] = { 255, 255, 255, 0 };

EthernetServer server(80);

String readString = String(100); // string for fetching data from address

//Define several int to parse strings
int r1 = 0;
int r2 = 0;
int g1 = 0;
int g2 = 0;
int b1 = 0;
int b2 = 0;

//Substrings for each color
String redString = String(3);
String greenString = String(3);
String blueString = String(3);


//OUTPUT-PINS
int Rled = 3;
int Gled = 5;
int Bled = 6;

//Values used to write PWM
int RedVal = 0;
int GreenVal = 0;
int BlueVal = 0;


EthernetClient client;

void setup(){

  Serial.begin(9600);

  if (Ethernet.begin(mac) == 0) {
    Serial.println("Failed to configure Ethernet using DHCP");
    // no point in carrying on, so do nothing forevermore:
    for(;;)
      ;
  }

  //Print IP to serial
  Serial.print("My IP address: ");
  for (byte thisByte = 0; thisByte < 4; thisByte++) {
    // print the value of each byte of the IP address:
    Serial.print(Ethernet.localIP()[thisByte], DEC);
    Serial.print(".");
  }
  Serial.println();

  // Ethernet.begin(mac);
  server.begin();


  //Set Outputs
  pinMode(Rled, OUTPUT);
  pinMode(Gled, OUTPUT);
  pinMode(Bled, OUTPUT);

  //Turn them off by default
  digitalWrite (Rled, LOW);
  digitalWrite (Gled, LOW);
  digitalWrite (Bled, LOW);

  //Init the strings
  readString="0";
  redString="0";
  greenString="0";
  blueString="0";
}

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 = readString + c;
        }

        Serial.print(c); //output chars to serial port

        if (c == '\n') { //if HTTP request has ended

          if(readString.indexOf("color") > -1) {  //check that valid color-information string was received

            //---------------------Colors R G B--------------------
            // indexOf locates a character or String within another String.
            r1 = readString.indexOf('=');  //find start of red color value (=)
            r2 = readString.indexOf('&');  // find end of red color value (&)
            redString = readString.substring(r1+1, r2);

            //GRÜN
            int g1 = readString.indexOf('=', r1 + 1 );    //Find second =
            int g2 = readString.indexOf('&', r2 + 1 );    //Find second &
            greenString = readString.substring(g1+1, g2);

            //blau
            int b1 = readString.indexOf('=', g1 + 1 );    //Find second =
            int b2 = readString.indexOf(' ', r1 + 1 );    //Find ende (blank/space)
            blueString = readString.substring(b1+1, b2);
          }


          //--------------------------HTML------------------------
          client << F("HTTP/1.1 200 OK\n");
          client << F("Content-Type: text/html\n\n");
          client << F("");

          client << F("<html>");
          client << F("<head>");
          client << F("<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'/>");
          client << F("<meta name='apple-mobile-web-app-capable' content='yes' />");
          client << F("<title>LED Cube Controll</title>"); //</head>\n");
          client << F("</head>\n");

          client << F("<body margin=0 padding=0 style='font-family:Verdana; background-color:#ccc;'>\n");

          //---Tabellen-Header
          client << F("<table style='border-collapse:collapse;'>");
          client << F("<tr style='font-weight:bold; border-bottom:3px solid #000;'><td>Led Cube Color Mix</td><td colspan=2 align=center></td></tr>");

          //HTML Table
          client << F("<form action='color' method='get'>");
          client <<F("<tr>");
          client <<F("<td>");
         
          //HTML5 Slider for RGB
          // client << F("Red: <input type='range' name='red' id='r' min='0' max='255' value='0' step='1'></td></tr>");
          // client <<F("<tr><td>");

          client << F("Red: <input type='range' name='red' id='r' min='0' max='255' value=");
          client << RedVal;
          client << F(" step='1'></td></tr>");
          client <<F("<tr><td>");
          client << F("Green: <input type='range' name='green' min='0' id='g' max='255' value='0' step='1'></td></tr>");
          client <<F("<tr><td>");
          client << F("Blue: <input type='range' name='blue' id='b' min='0' max='255' value='0' step='1'></td></tr>");
          client <<F("<tr>");
          client <<F("<td>");
          client << F("<input type='submit' value='OK!'></td></tr>");
          client << F("</form>");



          //---System-Info
          client << F("<tr><td colspan=4><br><br><span style='font-size:8px;'>Freier RAM:&nbsp;");
          client.println(freeMemory());
          client << F("Byte</span></td></tr>");
          client << F("<tr><td colspan=4><span style='font-size:8px;'>Arduino Laufzeit:&nbsp;");
          client.println(millis()/1000/60);
          client << F("Minuten</span></td></tr>");

          client << F("</tr>");

          //---Tabellen-Footer
          client << F("<table>");

          //---HTML Ende
          client << F("</body></html>");
         
          //---Convert Strings to INT-Values to write them on outputs
         
          //---RED
          char valueArray[redString.length() + 1];
          redString.toCharArray(valueArray, sizeof(valueArray));
          int RedVal = atoi(valueArray);
         
          //---GREEN
          char valueArray1[greenString.length() + 1];
          greenString.toCharArray(valueArray1, sizeof(valueArray1));
          int GreenVal = atoi(valueArray1);
         
          //---BLUE
          char valueArray2[blueString.length() + 1];
          blueString.toCharArray(valueArray2, sizeof(valueArray2));
          int BlueVal = atoi(valueArray2);

          // Print content of several things to serial for debug
          Serial.print("Rot:");
          Serial.println(redString);
          Serial.print("Gruen:");
          Serial.println(greenString);
          Serial.print("Blau:");
          Serial.println(blueString);

          Serial.print("valueArray:");
          Serial.println(valueArray);
          Serial.print("RedVal:");
          Serial.println(RedVal);
          Serial.print("valueArray1:");
          Serial.println(valueArray1);
          Serial.print("GreenVal:");
          Serial.println(GreenVal);
          Serial.print("valueArray2:");
          Serial.println(valueArray2);
          Serial.print("BlueVal:");
          Serial.println(BlueVal);

          //---Write Outputs
          analogWrite(Rled, RedVal);
          analogWrite(Gled, GreenVal);
          analogWrite(Bled, BlueVal);

          //clear some things
          readString="";
          // redString="";
          //greenString="";
          //blueString="";
          r1 = 0;
          r2 = 0;
          g1 = 0;
          g2 = 0;
          b1 = 0;
          b2 = 0;


          //stopping client
          client.stop();
        }
      }
    }
  }
}

Logged

Seattle, WA USA
Online Online
Brattain Member
*****
Karma: 634
Posts: 50243
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Code:
            int b2 = readString.indexOf(' ', r1 + 1 );    //Find ende (blank/space)
Should be b1, not r1, shouldn't it?

Code:
          client << F("Red: <input type='range' name='red' id='r' min='0' max='255' value=");
          client << RedVal;
          client << F(" step='1'></td></tr>");
The value value needs to be in single quotes. The single quote from the end of the first and the beginning of the third lines are missing.
Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 7
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Working fine now! Thank you very much!  smiley-grin
Logged

Pages: [1]   Go Up
Jump to: