0

I'm working on an embedded ESP32 design using one of the web server examples included in the esp-idf examples. I'm able to get the device into soft AP mode and display a simple web page. Now that I have that working, I'm trying to build a page with a graphic.

I'm using the Linux hex tool "xxd -i " to convert the HTML file into a hex dump array for the C include file. It works fine if the document is just HTML, but I'm stuck on trying to do this with an image.

I went as far as using xxd on both the HTML file and the image file and using "netconn_write" to write out both files. I also tried combining them into a single hex dump file. At this point I'm not sure how to proceed, any help is greatly appreciated.

dda
  • 6,030
  • 2
  • 25
  • 34
user7009351
  • 55
  • 2
  • 5

2 Answers2

2

You can use this utility to embed any number of binary files in your executable. Don't forget to set a correct mime type. Also, if the file is big, you have to rate limit the sending, which might become a non-trivial task.

Therefore I suggest to use a filesystem and an embedded web server to do the job. Take a look at https://github.com/cesanta/mongoose-os/tree/master/fw/examples/mjs_hello (disclaimer: I am one of the developers). It'll take you few minutes to get a firmware with working HTTP server, ready for you prototypes.

dda
  • 6,030
  • 2
  • 25
  • 34
valenok
  • 827
  • 7
  • 9
1

You can use de directive EMBED_FILES directly in CMakeLists.txt. For example, to add the file favicon.jpg image, in my CMakeLists.txt, in the same directory of main.c:

idf_component_register(SRCS "main.c"
  INCLUDE_DIRS "."
  EMBED_FILES "favicon.jpg")

And somewhere in the main.c:

/* The favicon */
static esp_err_t favicon_handler(httpd_req_t *req)
{
    extern const char favicon_start[] asm("_binary_favicon_jpg_start");
    extern const char favicon_end[] asm("_binary_favicon_jpg_end");
    size_t favicon_len = favicon_end - favicon_start;

    httpd_resp_set_type(req, "image/jpeg");
    httpd_resp_send(req, favicon_start, favicon_len);

    return ESP_OK;
}

static const httpd_uri_t favicon_uri = {
                                         .uri       = "/favicon.ico",
                                         .method    = HTTP_GET,
                                         .handler   = favicon_handler,
                                         .user_ctx  = NULL
};

You can add as many files you need in this way, text, html, json, etc... (respecting device memory, of course).

jordeam
  • 21
  • 5