NormalWrite
Web

Improving web speed with Arduino

The Flash library by Mikal Hart is a wonderful piece of software for improving simple web server apps built on the Arduino: the main problem when designing such apps is that the limited number of RAM available forces the designer either to use an SD card to store the files that are part of the web site, and/or store some HTML fragments in the PROGMEM area, and copy them back to normal RAM to modify and include them in the server HTML packets. The Flash library greatly simplifies the second technique, as the following code fragment highlights:

{codecitation brush: cpp; ruler: true;}FLASH_STRING(WebPageHeader, “HTML source code”);
Client& client = web_server.get_client();
WebPageHeader.print(client);
{/codecitation}

The FLASH_STRING macro declares a string contained in PROGMEM, so that it does not decrease the available RAM. Streaming that string is as easy as calling the print method and passing the Client connection of the web server as the parameter. Using this technique, dynamic generation of web pages includes both static parts stored in PROGMEM as FLASH_STRINGs (for example, page headers and footers, top menus, etc.) and dynamic parts that are generated by code (for example, tables containing data values coming from attached devices).

The only downside of this technique is that it is slow! Every HTML page generates a lot of network traffic, and a look at how FLASH_STRINGs are printed shows why (the following is an excerpt from libraries\Flash\Flash.cpp):

{CODE brush: cpp; ruler: true;} void _FLASH_STRING::print(Print &stream) const
{
for (size_t i=0; ; ++i)
{
char c = (*this)[i];
if (!c) break;
stream.print(c); // print in char form
}{/CODE}

Each string contained in a FLASH_STRING object is written one character at a time to the network connection!

The result is a lot of HTML overhead, as we can see with WireShark:

NormalWrite

Given the overhead of all these transactions just to write a simple HTML page through a connection, a better solution is using a small amount of RAM to group characters and send larger packets of data, as the following print method does:

{CODE brush: cpp; ruler: true;}void _FLASH_STRING::print(Print &stream) const
{
#define CHAR_BUFFER_SIZE 16
char CharBuffer[CHAR_BUFFER_SIZE + 1];
char CharBufferIndex = 0;

for (size_t i = 0; ; ++i)
{
CharBuffer[CharBufferIndex] = (*this)[i];
if (!CharBuffer[CharBufferIndex])
break;
CharBufferIndex++;
if (CharBufferIndex == CHAR_BUFFER_SIZE)
{
CharBuffer[CharBufferIndex] = 0;  //< terminate char buffer
stream.print(CharBuffer);
CharBufferIndex = 0;
}
}
if (CharBufferIndex > 0)
{
CharBuffer[CharBufferIndex] = 0;
stream.print(CharBuffer);
}
}{/CODE}

This improved method groups chars from the FLASH_STRING into a CHAR_BUFFER_SIZE-long temporary buffer, and then properly terminates the buffer and sends it through the network connection. The difference in performance, even with a small buffer size, is clear, and a new run of WireShark shows that a lot less packets are needed to send the generated HTML page. Defining a proper value for CHAR_BUFFER_SIZE depends on the RAM requirements of the sketch, the default value of 16 looks like a minimum value that should be a good compromise between network speed and reduced RAM usage, but if the RAM is not so heavily used, larger buffer sizes such as 32 or 64 bytes bring even more improvement to the observed speed.

OptimizedWrite

Leave a Reply

Your email address will not be published. Required fields are marked *