ESP handling big web pages and embedded images

OK, so if you have played with HTML on the ESP chip you will know of some annoying problems. Firstly the simple way of declaring web pages is as const strings which take up RAM (of which we have very little). Also the text has to be delimited and you have to put backslashes in etc etc to make it appear as a string, and finally it is tricky to get images of any size up on your page for the same reasons.

Some solutions:

static const char setup_html[] PROGMEM = R"HLL1(

	<link REL=STYLESHEET TYPE="text/css" HREF="shepherd.css">

.... Loads more html code in here



So this declares a raw string in C++. The delimiters for the string are the HLL1( (  – I have used my initials but you can use anything. This is matched by the same delimited at the bottom. i.e )HLL1.

Note that the link line contains quotation marks that do not require the backslash. I.e you can take a .html file, copy the text “as is” and paste it between the delimiters and not have to put any extra quotes in.

Also of interest here is the PROGMEM compiler pragma – this tells the compiler to allocate space for this variable in FLASH not RAM. So it won’t eat up any of your precious RAM.

Now the same techniques can be used for an image. Use your favourite binary to C array program (I used bin2header.exe on windows but there are loads of them out there). to create a C header file that has the bytes of your image in it. Save this header file in your Arduino sketch folder along with the main .ino. re-open the sketch if you have it open already so that it sees the new file. Mine is called background_jpg.h and looks like:


static const unsigned char background_jpg[] PROGMEM = {
0xff, 0xd8, 0xff, 0xe0, 0x00, 0x10, 0x4a, 0x46, 0x49, 0x46, 0x00, 0x01,
0x02, 0x01, 0x01, 0x2c, 0x01, 0x2c, 0x00, 0x00, 0xff, 0xe1, 0x07, 0xf1,
0x45, 0x78, 0x69, 0x66, 0x00, 0x00, 0x4d, 0x4d, 0x00, 0x2a, 0x00, 0x00,

... loads more bytes

0xea, 0xdc, 0x7f, 0x46, 0x87, 0xe1, 0x7f, 0xff, 0xd9


now in your .ino file include the header and serve up the picture with

#include "background_jpg.h"

... more stuff
void handle_background_pic() {
    server.send_P(200, "image/jpeg", (char *)background_jpg, 20457);

void setup() {

... more stuff

/* set up the dispatcher for endpoints */
server.on("/background.jpg", handle_background_pic);

.... more stuff

Note that the send_P is used here (tells it to use PROGMEM). Find the size from your standard file browser.

%d bloggers like this: