Passing a value from a slider to an analogWrite()? (HTML slider for Uno R4 Wifi)

I have a code that turns an LED on and off based on a GET reply from an IP:

#include "WiFiS3.h"

///////please enter your sensitive data in the Secret tab/arduino_secrets.h
char ssid[] = "smarthouse";  // your network SSID (name)
char pass[] = "";            // your network password (use for WPA, or use as key for WEP)
int keyIndex = 0;            // your network key index number (needed only for WEP)

int led = A0;
int buzz = 11;

int status = WL_IDLE_STATUS;
WiFiServer server(80);

void setup() {
  //Initialize serial and wait for port to open:
  Serial.begin(9600);
  while (!Serial) {
    ;  // wait for serial port to connect. Needed for native USB port only
  }
  Serial.println("Access Point Web Server");

  pinMode(led, OUTPUT);  // set the LED pin mode

  // check for the WiFi module:
  if (WiFi.status() == WL_NO_MODULE) {
    Serial.println("Communication with WiFi module failed!");
    // don't continue
    while (true)
      ;

    pinMode(11, OUTPUT);
  }

  String fv = WiFi.firmwareVersion();
  if (fv < WIFI_FIRMWARE_LATEST_VERSION) {
    Serial.println("Please upgrade the firmware");
  }

  // by default the local IP address will be 192.168.4.1
  // you can override it with the following:
  WiFi.config(IPAddress(111, 111, 1, 1));  //192.48.46.2 before

  // print the network name (SSID);
  Serial.print("Creating access point named: ");
  Serial.println(ssid);

  // Create open network. Change this line if you want to create an WEP network:
  status = WiFi.beginAP(ssid, pass);
  if (status != WL_AP_LISTENING) {
    Serial.println("Creating access point failed");
    // don't continue
    while (true)
      ;
  }

  // wait 10 seconds for connection:
  delay(10000);

  // start the web server on port 80
  server.begin();

  // you're connected now, so print out the status
  printWiFiStatus();
  tone(buzz, 800);
  delay(500);
  noTone(buzz);
}


void loop() {

  // compare the previous status to the current status
  if (status != WiFi.status()) {
    // it has changed update the variable
    status = WiFi.status();

    if (status == WL_AP_CONNECTED) {
      // a device has connected to the AP
      Serial.println("A device has connected to the AP");
    } else {
      // a device has disconnected from the AP, and we are back in listening mode
      Serial.println("A device has disconnected from the AP");
    }
  }

  WiFiClient client = server.available();  // listen for incoming clients

  if (client) {                    // if you get a client,
    Serial.println("new client");  // print a message out the serial port
    String currentLine = "";       // make a String to hold incoming data from the client
    while (client.connected()) {   // loop while the client's connected
      delayMicroseconds(10);       // This is required for the Arduino Nano RP2040 Connect - otherwise it will loop so fast that SPI will never be served.
      if (client.available()) {    // if there's bytes to read from the client,
        char c = client.read();    // read a byte, then
        Serial.write(c);           // print it out to the serial monitor
        if (c == '\n') {           // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            // the content of the HTTP response follows the header:
            // main style
            client.print("<style> * {font-family:\"Courier New\", monospace; margin: auto; text-align: center; padding: 15px; box-sizing: border-box;} body {background-color: #69F7BE;} p {border: 2px solid black; border-radius: 10px; font-size:20px; padding: 10px; width: 180px; height: 50px;}</style>");
            // slider style
            /*
            client.print("<style>.slidecontainer { width: 100%; } .slider::-moz-range-thumb { width: 25px; height: 25px; background: #04AA6D; cursor: pointer;}</style>");
            client.print("<style>.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 25px;  background: #d3d3d3;  outline: none;  opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; }  .slider:hover { opacity: 1;  } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px;  background: #04AA6D;  cursor: pointer;}</style>");
            */

            // actual functions
            client.print("<p><a href=\"/H\">Lights ON</a><br /></p>");
            client.print("<pd style=\"height: 10px;\"> </pd>");
            client.print("<p><a href=\"/L\">Lights OFF</a><br></p>");
            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;
          } else {  // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        // Check to see if the client request was "GET /H" or "GET /L":
        if (currentLine.endsWith("GET /H")) {
          digitalWrite(led, HIGH);  // GET /H turns the LED on

          noTone(buzz);
          tone(buzz, 100);
          delay(100);
          noTone(buzz);
          tone(buzz, 700);
          delay(100);
          noTone(buzz);
        }
        if (currentLine.endsWith("GET /L")) {
          digitalWrite(led, LOW);  // GET /L turns the LED off

          noTone(buzz);
          tone(buzz, 700);
          delay(100);
          noTone(buzz);
          tone(buzz, 1100);
          delay(100);
          noTone(buzz);
        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("client disconnected");
  }
}

void printWiFiStatus() {
  // print the SSID of the network you're attached to:
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());

  // print your WiFi shield's IP address:
  IPAddress ip = WiFi.localIP();
  Serial.print("IP Address: ");
  Serial.println(ip);

  // print where to go in a browser:
  Serial.print("To see this page in action, open a browser to http://");
  Serial.println(ip);
}

how can I add a slider that passes a variable to the code so that I can analogWrite() the led with the value?

Well, you need to:

  1. Design your URL space to pass the value. Maybe: "/?sliderval=nnn"
  2. Write your web page to generate that URL in your page
  3. detect a GET request that looks like "GET /?sliderval=123" maybe using indexOf() - Arduino Reference like currentLine.lastIndexOf("sliderval=")
  4. process the line and do the output with something like this snippet:
  const String param = "sliderval=";
  ...
  int start = currentLine.lastIndexOf(param);
  if (start >= 0) {
    Serial.println(currentLine.substring(start));
    int val = constrain(currentLine.substring(start + param.length()).toInt(), 0, 255);
    analogWrite(5, val);
    Serial.println(val);
  }

And how exactly can i do the first 3 steps?

1 is easy. I did a sample. Something like http://111.111.1.1/?sliderval=123 might work if you have 3&4 done.

2 is web design and whatever it takes to make a slider into a URL that updates an anchor to be clicked. I don't know what you use. Perhaps the commented out javascript stuff?

3 I think I already did it in 4. If your #1 code works (I don't have your hardware or WiFiS3.h library), I think this completely untested and unguaranteed code would answer GET queries as in (1) and embedded statically in the default page delivered here:

#include "WiFiS3.h"

///////please enter your sensitive data in the Secret tab/arduino_secrets.h
char ssid[] = "smarthouse";  // your network SSID (name)
char pass[] = "";            // your network password (use for WPA, or use as key for WEP)
int keyIndex = 0;            // your network key index number (needed only for WEP)

int led = A0;
int buzz = 11;

int status = WL_IDLE_STATUS;
WiFiServer server(80);

const String param = "sliderval=";

void setup() {
  //Initialize serial and wait for port to open:
  Serial.begin(9600);
  while (!Serial) {
    ;  // wait for serial port to connect. Needed for native USB port only
  }
  Serial.println("Access Point Web Server");

  pinMode(led, OUTPUT);  // set the LED pin mode

  // check for the WiFi module:
  if (WiFi.status() == WL_NO_MODULE) {
    Serial.println("Communication with WiFi module failed!");
    // don't continue
    while (true)
      ;

    pinMode(11, OUTPUT);
  }

  String fv = WiFi.firmwareVersion();
  if (fv < WIFI_FIRMWARE_LATEST_VERSION) {
    Serial.println("Please upgrade the firmware");
  }

  // by default the local IP address will be 192.168.4.1
  // you can override it with the following:
  WiFi.config(IPAddress(111, 111, 1, 1));  //192.48.46.2 before

  // print the network name (SSID);
  Serial.print("Creating access point named: ");
  Serial.println(ssid);

  // Create open network. Change this line if you want to create an WEP network:
  status = WiFi.beginAP(ssid, pass);
  if (status != WL_AP_LISTENING) {
    Serial.println("Creating access point failed");
    // don't continue
    while (true)
      ;
  }

  // wait 10 seconds for connection:
  delay(10000);

  // start the web server on port 80
  server.begin();

  // you're connected now, so print out the status
  printWiFiStatus();
  tone(buzz, 800);
  delay(500);
  noTone(buzz);
}


void loop() {

  // compare the previous status to the current status
  if (status != WiFi.status()) {
    // it has changed update the variable
    status = WiFi.status();

    if (status == WL_AP_CONNECTED) {
      // a device has connected to the AP
      Serial.println("A device has connected to the AP");
    } else {
      // a device has disconnected from the AP, and we are back in listening mode
      Serial.println("A device has disconnected from the AP");
    }
  }

  WiFiClient client = server.available();  // listen for incoming clients

  if (client) {                    // if you get a client,
    Serial.println("new client");  // print a message out the serial port
    String currentLine = "";       // make a String to hold incoming data from the client
    while (client.connected()) {   // loop while the client's connected
      delayMicroseconds(10);       // This is required for the Arduino Nano RP2040 Connect - otherwise it will loop so fast that SPI will never be served.
      if (client.available()) {    // if there's bytes to read from the client,
        char c = client.read();    // read a byte, then
        Serial.write(c);           // print it out to the serial monitor
        if (c == '\n') {           // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            // the content of the HTTP response follows the header:
            // main style
            client.print("<style> * {font-family:\"Courier New\", monospace; margin: auto; text-align: center; padding: 15px; box-sizing: border-box;} body {background-color: #69F7BE;} p {border: 2px solid black; border-radius: 10px; font-size:20px; padding: 10px; width: 180px; height: 50px;}</style>");
            // slider style
            /*
              client.print("<style>.slidecontainer { width: 100%; } .slider::-moz-range-thumb { width: 25px; height: 25px; background: #04AA6D; cursor: pointer;}</style>");
              client.print("<style>.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 25px;  background: #d3d3d3;  outline: none;  opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; }  .slider:hover { opacity: 1;  } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px;  background: #04AA6D;  cursor: pointer;}</style>");
            */

            // actual functions
            client.print("<p><a href=\"/H\">Lights ON</a><br /></p>");
            client.print("<pd style=\"height: 10px;\"> </pd>");
            client.print("<p><a href=\"/L\">Lights OFF</a><br></p>");
            client.print("<p><a id="sliderval" href=\"/?sliderval=123\">Lights 123</a><br></p>");
            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;
          } else {  // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        // Check to see if the client request was "GET /H" or "GET /L":
        if (currentLine.endsWith("GET /H")) {
          digitalWrite(led, HIGH);  // GET /H turns the LED on

          noTone(buzz);
          tone(buzz, 100);
          delay(100);
          noTone(buzz);
          tone(buzz, 700);
          delay(100);
          noTone(buzz);
        }
        if (currentLine.endsWith("GET /L")) {
          digitalWrite(led, LOW);  // GET /L turns the LED off

          noTone(buzz);
          tone(buzz, 700);
          delay(100);
          noTone(buzz);
          tone(buzz, 1100);
          delay(100);
          noTone(buzz);
        }
        int start = currentLine.lastIndexOf(param);
        if (start >= 0) {
          Serial.println(currentLine.substring(start));
          int val = constrain(currentLine.substring(start + param.length()).toInt(), 0, 255);
          analogWrite(5, val);
          Serial.println(val);
        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("client disconnected");
  }
}

void printWiFiStatus() {
  // print the SSID of the network you're attached to:
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());

  // print your WiFi shield's IP address:
  IPAddress ip = WiFi.localIP();
  Serial.print("IP Address: ");
  Serial.println(ip);

  // print where to go in a browser:
  Serial.print("To see this page in action, open a browser to http://");
  Serial.println(ip);
}
1 Like

Which microcontroller are you using?

Uno R4 Wifi.

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.