Strings

Programming languages like C++, Java and Processing - Arduino have strict variable type declarations. A variable is one of int, String, float and boolean. Mixing data types in one mathematical expression results in errors. Javascript, on the other hand, is less strict. Variables are declared using the var command

var a = 25;
var b = 25.84;
var c = "Hello";
var d =-5.6 ;

var a = 25;

var b = 25.84;

var c = "Hello";

var d = -5.6;

document.getElementById("demo").innerHTML = a + b + c + d;

The example on the left will yield the following output.

50.84Hello-5.6

The web browser added the first 2 variables together, tagged on the word and the final number.

var counter = 0;

var a = 25;

var b = 25.84;

var c = "Hello";

var d = -5.6;

document.getElementById("demo").innerHTML = a + b + d + c;

The example on the left is exactly the same except the c and d are transposed in the formula. This time the output is

45.24Hello

The web browser added the 3 numbers and then tagged on the word.

When you create a web page interface to control your ESP32 robot you will need to get data from your web page back to the web server, the ESP32 in this case, and from there to the i/o circuits that control the servos. The easiest way to send numeric data from a web page is in one String with special characters separating the numbers in the String. So, if say I want to send 45 and 125, two numbers. I will do this by creating a String: "45*125". The "special character" is the star *. If a = 45 and b = 125;
var sendString = a + "*" + b; will result in a String with a star separating the 2 numbers.

Now at the receiving end I need to figure out how to parse out the 2 numbers from the String. This turns out to be fairly straight forward because Arduino, C++ and most Computer Programming languages have commands that can manipulate Strings. In order to parse the numbers out of the String we need to know
a. the length of the String.
b. the position of the special character. Remember Strings, like most things in programming, start counting at zero.
c. how to use the substring command.

Strings are objects so the commands use the dot notation to invoke String methods.

a. The length of a String is found using .length(). The length of a String called inputMessage is found using inputMessage.length().

int messageLength = inputMessage.length();

b. The position of a character in a String is found using .indexOf(). The position of the star in inputMessage is found using inputMessage.indexOf("*");

int starPosition = inputMessage.indexOf("*");

If the star is the fifth character in the String then starPosition = 4 because the indexing starts at zero.

c. The substring command returns a part of a String. It needs to know the start and endpoints.

String c = inputMessage.substring(0,5) will return the first 5 characters in the String, from 0 to 4.

String firstNumber = inputMessage.substring(0,starPosition);
This method will return the first number in our String as a String. We'll need to use .toInt() to "cast" the String back into an integer.
int myFirstNumber = firstNumber.toInt();

String secondNumber = inputMessage.substring(starPosition+1,messageLength);
This method will return the second number in our String as a String. Again we will use .toInt() to cast it back into an integer.

int mySecondNumber = secondNumber.toInt();

/*********

M Druiven

substring example shows how 2 numbers from a web page can

be sent as a single string and then parsed back into

integers by the ESP32

May 26, 2021

https://sites.google.com/view/sparboticsesp32

*********/

// Import required libraries

#include <WiFi.h>

#include <AsyncTCP.h>

#include <ESPAsyncWebServer.h>

const char* ssid = "*****************"; // Put your home SSID here.

const char* password = "****************"; // Put your home WiFi password here.

const char* PARAM_INPUT = "value";

String buttonValue = "0";

String lPos, rPos; // The 2 numbers in String form

int lPosInt, rPosInt; // The 2 numbers in integer form

AsyncWebServer server(80); // Create AsyncWebServer object on port 80

const char index_html[] PROGMEM = R"rawliteral(

<!DOCTYPE HTML><html>

<head>

<title>ESP Web Server</title>

</head>

<body>

<h1>My Great Esp32 Web Server</h1>

<p><a href="http://4992.ca">Sparbotics</a></p>

<p> <a href="https://sites.google.com/view/sparboticsesp32">Sparbotics ESP32</a></p>

<hr>

function send(){

var myString = document.form1.text1.value+"*"+document.form1.text2.value;

document.form1.text3.value = myString;

var xhr = new XMLHttpRequest();

xhr.open("GET", "/button?value=" + myString, true);

xhr.send();

}

</script>

</form>

</body>

</html>

)rawliteral";

String processor(const String& var){

if (var == "buttonVALUE"){

return buttonValue;

}

return String();

}

void setup(){

Serial.begin(115200); // Serial port for debugging purposes

// Connect to Wi-Fi

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.println("Connecting to WiFi..");

}

// Print ESP Local IP Address

Serial.println(WiFi.localIP());

// Route for root / web page

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/html", index_html, processor);

});

// Send a GET request to <ESP_IP>/slider?value=<inputMessage>

server.on("/button", HTTP_GET, [] (AsyncWebServerRequest *request) {

String inputMessage;

if (request->hasParam(PARAM_INPUT)) {

inputMessage = request->getParam(PARAM_INPUT)->value();

int messageLength = inputMessage.length();

int ppos = inputMessage.indexOf("*");

lPos = inputMessage.substring(0,ppos);

rPos = inputMessage.substring(ppos+1,messageLength);

lPosInt = lPos.toInt();

rPosInt = rPos.toInt();

Serial.println("Left = " + lPos + ", Right = " + rPos);

}

else {

inputMessage = "No message sent";

}

request->send(200, "text/plain", "OK");

});

// Start server

server.begin();

}

void loop() {

}

INSTRUCTIONS

Here is a complete sketch to illustrate the use of a single string to send 2 numbers.

Once the sketch is loaded reset the ESP32 and open the serial monitor at 115200 baud. Make note of the ESP32 ip address.

Type the ESP32 ip address into the web browser address bar.

When the page loads type any two numbers into the first 2 text boxes. Press the Send button.

The third text box shows the String that is sent to the ESP32.

The serial monitor should show your 2 numbers received at the ESP32. See the screen shot below.

This screen shot shows the web page in the background and the serial monitor in the foreground.

Page updated

Google Sites

Report abuse