Go Down

Topic: Webserver: Use of variables to declare html attributes (Read 949 times) previous topic - next topic

dbfox

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: [Select]
client << F("Red: <input type='range' name='red' id='r' min='0' max='255' value='0' step='1'></td></tr>");



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





PaulS

Quote
How to use variables from my sketch in the HTML string? Is there a way?

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

dbfox

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: [Select]
#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();
        }
      }
    }
  }
}


PaulS

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

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


Go Up