Trying something "fancy" with webpage button LED control, timing from FORM

Hello,

By “fancy” I mean, using a single field FORM to input a duration that an LED would remain ON. Enter a time in the FORM, hit the “Enter” button and then the LED would be switched on for that time, and then off.

The time would ideally be in seconds, though I am aware timing is set in milliseconds, so I was thinking I could do a simple arithmetic with the info prior to execution, but first is to get my parsing correct so it will work in millis…

The range I have set would be 1 second to 10minutes, though currently would be 1ms to 600ms.

Below is the snippet of code to produce the form,

client.println("<form action=\"/\">");
client.println("<p>");
client.print  ("Enter LED Time On: <input type=\"number\" name=\"t\" min=\"1\" max=\"600\" value=\"");
client.print  (LED_S); //enter the time
client.print  ("\" length> <em>(1-600)</em>
");
client.println("</p>");
client.println("<p><input type=\"submit\" value=\"Enter\"></p>");
client.println("</form>");


This is where I am getting a bit lost. Okay, A LOT lost. As I understand, the parsing is done as below, looking for the ‘t’ so that it can fetch the time, and use it as the delay.

start = HTTP_req.indexOf("?t=");

But, I know I am missing things, such as just how I am to find the value I set for t, and have that actually set the time the LED is HIGH… I have tried to work this over from a PWM LED sketch, and a servo control sketch. This is where I am need of direction, I think…

Then this code to take the time ‘t’ to switch the LED HIGH for duration ‘t’ as a delay, then LOW.
I am not 100% if this the correct way to use ‘t’, or not.

if (LED_S == t) {
digitalWrite(LED, HIGH);
delay(t);
digitalWrite(LED, LOW);
}

How do you tie the elements together? On the PWM control of an LED, you could enter a value of 0-255 and the the led would be correspondingly bright. In this, as I said, I am trying to figure out out to control the time that it would remain on. Thank you folks.

As I understand, the parsing is done as below, looking for the 't' so that it can fetch the time, and use it as the delay.

That happens AFTER you have collected the data in some object AND had the opportunity to print what you collected. We need to see ALL of your code AND the stuff you printed.

Then this code to take the time 't'

We have no idea what you did with the value in start, or how that activity resulted in a value in t.

How do you tie the elements together?

Twine. There is so much we don't know about the code you didn't post that no usable answers are possible.

PaulS:
That happens AFTER you have collected the data in some object AND had the opportunity to print what you collected. We need to see ALL of your code AND the stuff you printed.
We have no idea what you did with the value in start, or how that activity resulted in a value in t.
Twine. There is so much we don’t know about the code you didn’t post that no usable answers are possible.

Perfect solution! And thank you for some lightheartedness, I needed that this morning :slight_smile:

But, there is also so much I do not about the code, that I thought perhaps someone here with much greater than knowledge than I would be able to help out. While I do appreciate a good roast,… I admit to not knowing how to tie these various parts of this sort of code together, or how to make them complete. I was just pulling what I thought were the relevant parts from a sketch.

Paul- Do I need to add a serial.print of the data AFTER I collect it, so that I can later use it?

The code I found that I am working from is here-

// Arduino Ethernet Light PWM
//

#define OUTA  5
#define OUTB  6

#include <SPI.h>
#include <Ethernet.h>

// MAC address from Ethernet shield sticker under board
byte mac[] = {0xB7, 0x17, 0x07, 0xFF, 0xCB, 0x43}; // random MAC address
IPAddress ip(192,168,1,188);  // my IP

EthernetServer server(80);  // create a server at port 80

String HTTP_req;          // stores the HTTP request
byte LED_Val = 128;   // state of LED, off by default

void setup()
{
    Serial.begin(115200);       // for diagnostics
    Serial.println("Waiting for ETH to stabilise");
    delay(5000);
    Serial.println("Setting up");
    Ethernet.begin(mac, ip, ns, gw, sn);  // initialize Ethernet device
    Serial.print("MY IP: ");
    Serial.println(Ethernet.localIP());
    server.begin();           // start to listen for clients
    pinMode(OUTA, OUTPUT);       // LED on pin 5
    pinMode(OUTB, OUTPUT);       // LED on pin 6
}

void loop()
{
    EthernetClient client = server.available();  // try to get client

    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                char c = client.read(); // read 1 byte (character) from client
                HTTP_req += c;  // save the HTTP request 1 char at a time
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    client.println();

                    // send web page
                    client.println("<html>");
                    client.println("<head>");


                    // process
                    ProcessValue();

                    client.println("<title>LED Lights</title>");
                    client.println("</head>");
                    client.println("<body>");
                    client.println("<h1>PWM LED</h1>
");
                    client.println("<form action=\"/\">");
                    client.println("<p>");
                    client.print  ("  Enter Brightness: <input type=\"number\" name=\"v\" min=\"0\" max=\"255\" value=\"");
                    client.print  (LED_Val); //insert current value
                    client.print  ("\" length> <em>(0-255)</em>
");
                    client.println("</p>");
                    client.println("<p><input type=\"submit\" value=\"Update\"></p>");
                    client.println("</form>");
                    client.println("</body>");
                    client.println("</html>");
                    Serial.print(HTTP_req);
                    HTTP_req = "";    // finished with request, empty string
                    break;
                }
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
        client.stop(); // close the connection
        Serial.println("Disconnected...");
    } // end if (client)
}

// switch LED and send back HTML for LED checkbox
void ProcessValue()
{
    int start = -1;
    int stops = -1;
    char a = 0;
    String numasstr;
    int n;

    start = HTTP_req.indexOf("?v=");
       
    if (start != -1) {
      n = start + 3; // (9 because "?v=")
      while (a != ' ') {
        a = HTTP_req.charAt(n);
        numasstr += a;
        n++;
      }

      LED_Val = numasstr.toInt();

      Serial.print  ("***** New Value: '");
      Serial.print  (LED_Val);
      Serial.println("'");
      
      if (LED_Val == 0) {
        digitalWrite(OUTA, LOW);
        digitalWrite(OUTB, LOW);
      } else { 
        if (LED_Val == 255) {
          digitalWrite(OUTA, HIGH);
          digitalWrite(OUTB, HIGH);
        } else {
          analogWrite(OUTA, LED_Val);
          analogWrite(OUTB, LED_Val);
        }
      }
      
      Serial.println("Updated.");       
    }
}

So, I have tried to use the correct elements, and to change them to my purpose. But, I am having some difficulty in recognizing how the (0-255) entered is passed along to control the LED.

I see the numasstr function, and the bit of ocde below is where I can’t seem to figure out what to alter so that it would work for my range, or how the code understands what I want to be passed.

{
    int start = -1;
    int stops = -1;
    char a = 0;
    String numasstr;
    int n;

    start = HTTP_req.indexOf("?v=");
       
    if (start != -1) {
      n = start + 3; // (9 because "?v=")
      while (a != ' ') {
        a = HTTP_req.charAt(n);
        numasstr += a;
        n++;
      }

      LED_Val = numasstr.toInt();

      Serial.print  ("***** New Value: '");
      Serial.print  (LED_Val);
      Serial.println("'");
      
      if (LED_Val == 0) {
        digitalWrite(OUTA, LOW);
        digitalWrite(OUTB, LOW);
      } else { 
        if (LED_Val == 255) {
          digitalWrite(OUTA, HIGH);
          digitalWrite(OUTB, HIGH);
        } else {
          analogWrite(OUTA, LED_Val);
          analogWrite(OUTB, LED_Val);
        }
      }
      
      Serial.println("Updated.");       
    }
}

For example, I can’t decipher this. I am sure I’ll want to slap myself for it’s simplicity as usual, but what is " n = start + 3; // (9 because “?v=”) ", how does that help find v?
In my example, I changed v to t, and changed the values from 0-255 to 1-600.

if (start != -1) {
      n = start + 3; // (9 because "?v=")
      while (a != ' ') {
        a = HTTP_req.charAt(n);
        numasstr += a;
        n++;
      }

Just trying to learn, and I think with the right tips, nudges and proper jokes I will get there. Thanks!

Paul- Do I need to add a serial.print of the data AFTER I collect it, so that I can later use it?

You don't NEED to print it, but I can't imagine how you can parse data when you don't know what the data looks like.

I see the numasstr function, and the bit of ocde below is where I can't seem to figure out what to alter so that it would work for my range, or how the code understands what I want to be passed.

numasstr is not a function. It is a String object. What it put in the String object is all the characters after the "v= string, up to the first space.

So, if the GET request looks like "GET /?v=123 456", then numasstr will contain "123".

Of course, that is nonsense, since the GET request will never contain a space. So, I can't imagine what the author was thinking when writing that code.

how does that help find v?

It doesn't. The LETTER v is part of the ?v= string. The indexOf function returns the location of the ? that is followed by v=. Adding 3 moves to the first character after the =, where the DATA that is associated with the name v is location.

Post ALL of your code, and any serial output.