Send array/data from webpage to Arduino webserver

I have a 48x32 LED dot matrix that I want to create a web interface for. I have the basic web interface written (attached), but now I need a good way to send the data to the Arduino. On the web page, the status of the LEDs are stored in an 2-dimensional array. Ideally, I’d like to be able to just send the array as-is, but I’m not sure how to go about it. But if not, I thought about sending a binary value for each row (48 bits long).

In the webpage, I have a SendData() function that creates a 48-bit number based on the row data, except JavaScript only allows 31-bits or it returns a -1. I’ve made an alternate version that creates a string, which works fine, but now I’m sending 48-bytes per row, so not sure if that will cause any speed issues having the Arduino read that much more data.

For interfacing between the webpage and arduino, I’ve been following the Arduino Ethernet Shield Web Server Tutorial. In it, he is sending data back in the request.open() GET request by adding unique strings to the URL then parsing the request on the Arduino. The strings he uses are short, only a few bytes long, and only a few of them. My application would have 32 much longer strings, so I’m not sure if that will be an issue. Plus it would require a very large buffer on the Arduino to hold the entire request. And space on my sketch is getting tight since it’s also controlling the LED matrix.

When replying, assume that I know little to nothing about JavaScript. Most of what I wrote was learned as I went and a lot of trial and error. So be easy on me when reviewing my HTML/JavaScript :slight_smile:

tdlr; Looking to find the best (or any) way to send 32 48-bit values from a webpage to the Arduino.

index.txt (6.39 KB)

have the basic web interface written (attached), but now I need a good way to send the data to the Arduino.

If the Arduino is serving up that page, and the page contained a form, clicking a button would make a GET request. I have no idea what sendData() is doing. The Arduino could be the recipient of the GET request, and deal with the request.

If the Arduino is not the server, whatever client that code is sent to will not be able to communicate with the Arduino.

PaulS: If the Arduino is serving up that page, and the page contained a form, clicking a button would make a GET request.

For starters, assume I know nothing about web page development :)

The Arduino is serving up the page.

I looked up forms on w3schools, and I'm assuming when you say "clicking a button would make a GET request", you're implying use of the form's method attribute, specifically method="GET", and adding a submit input type to the form.

However, further down the page it has a section "When to Use GET?", with a light bulb tip "GET is best suited for short amounts of data. Size limitation are set in your browser." The pixels[][] array I need to send has a total of 1,536 elements, so is quite large, and I'm guessing this would not be the idea way to send the data. Though I honestly don't know what is considered "short amounts of data."

But assuming a GET request would work, it looks like a submit button only sends data contained in the form, though it's not really clear about that. How would I go about pulling the data from the array into the GET request?

PaulS: I have no idea what sendData() is doing. The Arduino could be the recipient of the GET request, and deal with the request.

Well, it's not doing much at the moment. It's just an initial attempt to pack the data in the pixels[][] array in a smaller/better format to send. So far I have not made any attempt to actually send the data, since that's where I'm hung up.

I've tried two different methods for packing the data. The first method was creating a decimal number from the binary values in each row of the array. For example, if a row's binary value is b1001110 would send the number 78. However, a row contains 48 bits and it looks like JavaScript variables can only hold numbers up to 31 bits. Anything over 31 would return a value of -1. The second method creates a string ILO a number. So instead of sending 78, it would send the binary values as the string "1001110". The first method seems ideal since it would be the smallest size. The second would work, but since there's ~1500 elements, it would be sending about 1.5k, so I'm concerned not only with the time it would take to send, the also the GET request buffer size on the Arduino.

For starters, assume I know nothing about web page development

Then, this project is not for you (yet).

I looked up forms on w3schools, and I'm assuming when you say "clicking a button would make a GET request", you're implying use of the form's method attribute, specifically method="GET", and adding a submit input type to the form.

Yes.

However, further down the page it has a section "When to Use GET?", with a light bulb tip "GET is best suited for short amounts of data. Size limitation are set in your browser." The pixels[][] array I need to send has a total of 1,536 elements, so is quite large, and I'm guessing this would not be the idea way to send the data. Though I honestly don't know what is considered "short amounts of data."

That is far too much data to be trying to send back and forth between server and client and between client and server.

You probably need to figure out a different approach.

Why would you need to be able to send new data to the Arduino from anywhere in the world?

For starters, assume I know nothing about web page development

That seems to be your show stopper. Have you successfully implemented a less complex page such as a 2x2 LED type page of what you want to do?

you need to use http post to pass the data.
A really good way to post the data is in json format. I use it extensively in my webserver project.
You can write a very compact code to decode json messages on the fly so you only require a very small memory footprint.

you can find loads of info doing a web search.

PaulS: Then, this project is not for you (yet).

Okay, so I know a little, but it's very basic HTML stuff. I started the Javascripting class on Khan Academy, which taught me how to make the interactive LED grid on the page. And I've picked up bits going through the arduino webserver tutorial. But I've never had any formal training, so essentially an ameature.

PaulS: Why would you need to be able to send new data to the Arduino from anywhere in the world?

Primarily so that I can change what's on the display without having to connect a computer and reprogram it. I figured a web interface would be the easiest way to go about it. However, my wife is a few months pregnant, and thought it would be fun to also make it a kind of picture-message board that friends can submit messages, designs and animations and have them display in real-time for her.

zoomkat: That seems to be your show stopper. Have you successfully implemented a less complex page such as a 2x2 LED type page of what you want to do?

Not specifically, but I successfully completed all the steps in the webserver tutorial I linked to. By the end, you're sending several pieces of data via XML from server to client, but also the client is sending the server information too. If I remember, the client sends the server the status of 4 switches, which would be equivalent to a 2x2 grid. But because of the large data amount I need to send, the method they used is not appropriate (or even possible?).

doughboy: you need to use http post to pass the data. A really good way to post the data is in json format. I use it extensively in my webserver project. You can write a very compact code to decode json messages on the fly so you only require a very small memory footprint.

you can find loads of info doing a web search.

Thanks! Never used json before. In fact, I'm only vaguely aware I've even heard of it before :) But you think it will be appropriate to use in this application? Is it possible to send an array this way, or would I have to, for example, send each row individually?

you will need to use javascript on the html page to make the http post. and formatting the data in json is a built in javascript operation. I have passed multidimension array this way. search http post json array.