ESP32-HTML-08

一、html显示图片

1.工程包含Html需要显示的图片

2、CMakeLists.txt包含图片资源

举例：

idf_component_register(SRCS main.c
                       EMBED_FILES root.html  favicon.ico)

3.html中图片的标签

<img src="motus.ico">

4.后台代码的添加

static esp_err_t motus_get_handler(httpd_req_t *req)
{
    extern const unsigned char favicon_ico_start[] asm("_binary_motus_ico_start");
    extern const unsigned char favicon_ico_end[]   asm("_binary_motus_ico_end");
    const size_t favicon_ico_size = (favicon_ico_end - favicon_ico_start);
    httpd_resp_set_type(req, "image/x-icon");
    httpd_resp_send(req, (const char *)favicon_ico_start, favicon_ico_size);
    return ESP_OK;
}


static const httpd_uri_t html_motus_ico = {
    .uri       = "/motus.ico",
    .method    = HTTP_GET,
    .handler   = motus_get_handler,
    .user_ctx  = NULL
};


httpd_register_uri_handler(server, &html_motus_ico);

二、html添加样式文件

1.工程包含Html需要的样式文件

2、CMakeLists.txt包含样式资源

idf_component_register(SRCS main.c
                       EMBED_FILES root.html style.css favicon.ico motus.ico)

3.html中样式的链接

<link rel="stylesheet" type="text/css" href="style.css">

4.后台代码的添加

static esp_err_t css_get_handler(httpd_req_t *req)
{
    extern const unsigned char css_start[] asm("_binary_style_css_start");
    extern const unsigned char css_end[]   asm("_binary_style_css_end");
    const size_t css_size = (css_end - css_start);
    httpd_resp_set_type(req, "text/css");
    httpd_resp_send(req, (const char *)css_start, css_size);
    return ESP_OK;
}


static const httpd_uri_t html_css = {
    .uri       = "/style.css",
    .method    = HTTP_GET,
    .handler   = css_get_handler,
    .user_ctx  = NULL
};

httpd_register_uri_handler(server, &html_css);

三、html添加js文件

1.工程包含Html需要的js文件

2、CMakeLists.txt包含样式资源

idf_component_register(SRCS main.c
                       EMBED_FILES root.html style.css script.js favicon.ico motus.ico)

3.html中js的链接

<script src="script.js"></script>

4.后台代码的添加

static esp_err_t js_get_handler(httpd_req_t *req)
{
    extern const unsigned char js_start[] asm("_binary_script_js_start");
    extern const unsigned char js_end[]   asm("_binary_script_js_end");
    const size_t js_size = (js_end - js_start);
    httpd_resp_set_type(req, "text/js");
    httpd_resp_send(req, (const char *)js_start, js_size);
    return ESP_OK;
}

//得到用户名和密码
static const httpd_uri_t html_js = {
    .uri       = "/script.js",
    .method    = HTTP_GET,
    .handler   = js_get_handler,
    .user_ctx  = NULL
};

httpd_register_uri_handler(server, &html_js);