Allowing User to Change Text Variables from SD Web Server

Projects General Guidance
1

I've been researching this for days, reading a lot of tutorials (like this series) and forum posts, but I just can't quite wrap my head around the best way to do this.

I have two Arduino Nano's that communicate over network: A button on one side, and an LCD screen on the other. I started with a prototype using the Ethernet Shield, and have since moved on to a standalone W5500 chip and a standalone MicroSD card adapter. On a hardware/firmware level, it works. I can get the button to activate a message on the LCD screen through the network.

The next piece of the puzzle is I would like to create a web server that functions as a UI for the user to change the message that gets displayed on the LCD screen. The problem I'm running into is that most tutorials/forum posts have been about how to DISPLAY a variable on the web page, or how to CONTROL the Arduino with a button on the web page. I want the user to have a page (similar to the UI of your home network router) where they could log in and have a text box that they could type in their message, press "save," and it would write that message to the LCD_Message variable to be displayed on the Arduino when the button is pressed.

The closest forums I've seen talking about this say to write that text as a String that gets deciphered, but I keep reading to avoid using String at all costs. Can anyone point me to a tutorial that would help with allowing a user to type text in a box on a web page served by the Arduino, which would then save that text to a variable to be used in the program?

Note: The reason for the SD card is I would like to make this UI look good, so I plan to create a more full web page with CSS. I had also considered saving the user's variable settings (as there will be more than one) in a CSV or XML file that gets stored on the card. Any help would be appreciated!

2

the examples you've seen probably send a GET request with some data encoded in the URL

if you build a web page presenting a textfield and a submit button, something like

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Arduino Web Server</title>
</head>
<body>
	<h1>Enter Text:</h1>
	<form action="/" method="get">
		<input type="text" name="text">
		<input type="submit" value="Submit">
	</form>
</body>
</html>

The GET request sent back to the server upon submitting the form would include the data entered in the text input field as a query parameter.

For example, if you entered "Hello" in the text field and submitted the form, the request sent back would look something like this:

Host: [Your Arduino's IP address]
User-Agent: [User agent string]
Accept: [MIME types]
Connection: keep-alive

GET /?text=Hello HTTP/1.1

you have some headers, an empty line — which is important — and then the GET request.

this is the line (GET /?text=Hello HTTP/1.1) of interest
it specifies the method (GET), the path (/?), and the query parameter (text=Hello).

so upon a connection from a client, most examples using the basic ethernet server ignore everything coming until they find the empty line and then capture the GET request in a String or c-string buffer

then it's just a matter of parsing it ➜ you make sure it's starting by GET /?text= (and the text you want to receive if whatever follows until the HTTP/1.1

that's what you want to store and process

1 Like
3

Thank you, Jackson. That's super helpful. Would this still work if a user changed multiple variables at once? For example, if their options on that UI page were:

  1. Device name (if they had multiple LCD's on the same network)
  2. LCD Message
  3. Static IP Address (I'd like the user to be able to assign a static IP if they didn't want to use DHCP)

Would there be a way for the code to decipher and process all three of those at once? I assume I can just give each text box an ID, but the parsing piece is what I struggle with. It's one of those things where I'm sure the info is out there, but I'm not sure what to search for. Parsing HTML get request and converting it to overwrite an existing variable?

4

if you have everything in a form, and all the fields are submitted with the submit button, then everything arrives in the GET request. Say you have 3 textfields x, y and z and you respectively typed 12, hello and 42 then you'll get GET /?x=12,y=hello,z=42 HTTP/1.1

so it's just a matter of "smarter" parsing

1 Like
5

imho this is just a question about how you design your page.
If you don't like a button, but a textbox, create a textbox instead of a button.

The basics are still the same: you have an input from the client and need to process it on the server.

It isn't a big issue to write an Ardino UNO webserver without Strings but with c-strings.
My version is here:

It also shows you how to parse several parameters either from GET or POST.

regarding

The overhead to get a SD card running on an UNO to host a CSS will eat up LOT of your memory. Just host the CSS in the Progmem of the Arduino and avoid to need the SD Card.

6

Thanks for this, noiasca. I'm going to dig into this code/tutorial tonight.

As for the SD card: that's good to know about the memory, but if I don't have an SD card to store variables in some form (i.e. a CSV or XML file), wouldn't the user's variable settings get reset every time they power cycle the device (similar to how your car stereo settings get reset when the battery dies)?

7

to persist data on the Arduino you could use its EEPROM.

8

do you really need a Nano with an ethernet connection?
Would WiFi be available?

There are more capables arduinos out there (like an ESP32) with way more capable libraries to serve and handle nice web pages.

9

There are variants of the ESP32 with Ethernet also.
If one has some experience with ESP32 and WiFi, the WT32-ETH01 is worth a try also:
https://werner.rothschopf.net/microcontroller/202401_esp32_wt32_eth01_en.htm

10

I'm opting for Ethernet for security + reliability. My hope is for this to be used in an environment where I've had wi-fi interference issues in the past.

11

OK understood

if you care about security, go HTTPS but with your Nano and W5500 it's not the best platform
You should consider a "better" (more ram, faster) Arduino
(some reading ESP32: ethernet w5500 with plain (HTTP) and SSL (HTTPS) – Renzo Mischianti)

12

I actually ordered a couple ESP8266 boards to tinker with, but upon reading how insecure IOT devices are, I get nervous about securing them on a WiFi front. I should clarify - I'm very new to Arduino (only been messing with things for 3 months or so), so maybe my fears are unfounded.

That said, I have hit my memory limits a couple times on the nano. While I'm sure I need to learn more about making code more efficient in terms of memory usage, I wouldn't mind having some more wiggle room. Would the concepts that we've been talking about in this forum carry over? Still writing variables to EEPROM and such?

I leaned toward the whole "creating a web server to host UI and storing it on an SD card" thing because I'm more comfortable in HTML/CSS, but I'd definitely still like to make it somewhat visually appealing (instead of just black text on a white page with some boxes). Also because I didn't realize EEPROM would hold user variables through power loss.

I've been reading the EEPROM documentation, but if anyone has a specific tutorial that's been helpful to them regarding that, please feel free to share.

13

if you get an ESP32 (better than the older ESP8266) you won't get EEPROM but you can use part of the flash memory of the board as a file system and there is a library also for saving preferences (here is a tutorial)

here is another tutorial on EEPROM

IoT and WiFi are not really the same thing. You can use your ESP32 within the privacy of your home WiFi network, behind your router... it does not have to be accessible over the internet

14

Thank you for both those tutorials! And I should clarify - my hope is to make some of these to be used in a more public setting like an event venue (not just in my home). That's why I want to make sure the device can't be interfered with via wifi. Is there a way to just disable the wifi of the ESP32 altogether? I couldn't find anything about that when I researched it a while back.

15

yes something like this in your setup()

  WiFi.disconnect(true); // or esp_wifi_disconnect() ;
  WiFi.mode(WIFI_OFF);
1 Like
16

Thank you so much! Ordering some ESP32 units and going to do some experimentation this week!

17

one is enough :slight_smile:

18

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