当前位置:   article > 正文

ESP32 开发笔记(十一)使用 ESP32 做为 WebServer_filetoarray

filetoarray

使用 ESP32 做为 WebServer

在某些场景,我们可能需要在手机上或者其他移动终端访问 ESP32 的数据,这个时候我们需要在手机上展示 ESP32 设备的相关信息,这个时候可以用 APP 在手机上展示数据,或者在手机浏览器中打开存储在 ESP32 上的网页。或者其他的方式。

这篇文章我们将介绍第二种方式。在 ESP32 上存储网页文件,将 ESP32 做为一个简单的 WebServer。

工作流程:(第一种方式)

  1. 首先通过 gzip 将 HTML 文件压缩为 .gz 文件
  2. 使用 filetoarray 工具将 .gz 文件转为头文件
  3. 在 ESP32 程序中将头文件中的数组发送出去

工作流程:(第二种方式)

  1. 首先通过 gzip 将 HTML 文件压缩为 .gz 文件
  2. 使用 ESP32 构建系统中的嵌入二进制数据的方式,将其添加到 Flash 中的 .rodata 部分
  3. 在 ESP32 程序中将 Flash 中的数组发送出去

filetoarray 工具

使用这个工具将 .gz 文件转换为包含十六进制数组和其长度的头文件。

源码如下:

#include <stdio.h>
#include <stdarg.h>
#include <stdlib.h>
#include <string.h>

int main(int argc, char *argv[])
{
    FILE *fp;
    char *buffer;
    long flen;
    char *fname;
    char pname[1024];

    if ( argc == 2 ) {
        fname = argv[1];
        strcpy(pname, fname);
        char *dot = strchr(pname, '.');
        while (dot != NULL) {
            *dot = '_';
            dot = strchr(pname, '.');
        }
    } else {
        printf("Filename not supplied\n");
        return 1;
    }

    fp = fopen(fname, "rb");
    fseek(fp, 0, SEEK_END);
    flen = ftell(fp);
    rewind(fp);

    buffer = (char *)malloc((flen + 1) * sizeof(char));
    fread(buffer, flen, 1, fp);
    fclose(fp);

    printf("\n//File: %s, Size: %lu\n", fname, flen);
    printf("#define %s_len %lu\n", pname, flen);
    printf("const uint8_t %s[] PROGMEM = {\n", pname);
    long i;
    for (i = 0; i < flen; i++) {
        printf(" 0x%02X", (unsigned char)(buffer[i]));
        if (i < (flen - 1)) {
            printf(",");
        }
        if ((i % 16) == 15) {
            printf("\n");
        }
    }
    printf("\n};\n\n");
    free(buffer);
    return 0;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

HTML 文件到头文件

使用方式:

  1. 使用 gzip 将 HTML 文件转换为 .gz 文件
gzip index.html
  • 1
  1. 编译 filetoarray.c 源文件,生成可执行文件
gcc filetoarray.c -o filetoarray
  • 1
  1. 使用 filetoarray 将 .gz 文件转为头文件
./filetoarray index.html.gz > index.h
  • 1

HTML 文件到 Flash

使用方式:

  1. 使用 gzip 将 HTML 文件转换为 .gz 文件
gzip index.html
  • 1
  1. 在工程 main 目录下的 component.mk 中添加
COMPONENT_EMBED_FILES := www/index.html.gz
  • 1
  1. 在工程源码中这样使用
extern const unsigned char index_html_gz_start[] asm("_binary_index_html_gz_start");
extern const unsigned char index_html_gz_end[]   asm("_binary_index_html_gz_end");
size_t index_html_gz_len = index_html_gz_end - index_html_gz_start;

httpd_resp_set_type(req, "text/html");
httpd_resp_set_hdr(req, "Content-Encoding", "gzip");
httpd_resp_send(req, (const char *)index_html_gz_start, index_html_gz_len);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在 ESP32 中启动 HTTP Server

第一种方式:

#include "index.h"

static esp_err_t index_handler(httpd_req_t *req){
    httpd_resp_set_type(req, "text/html");
    httpd_resp_set_hdr(req, "Content-Encoding", "gzip");
    return httpd_resp_send(req, (const char *)index_html_gz, index_html_gz_len);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

第二种方式:

static esp_err_t index_handler(httpd_req_t *req){
    extern const unsigned char index_html_gz_start[] asm("_binary_index_html_gz_start");
	extern const unsigned char index_html_gz_end[]   asm("_binary_index_html_gz_end");
	size_t index_html_gz_len = index_html_gz_end - index_html_gz_start;


    httpd_resp_set_type(req, "text/html");
    httpd_resp_set_hdr(req, "Content-Encoding", "gzip");
    return httpd_resp_send(req, (const char *)index_html_gz_start, index_html_gz_len);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
#include "app_httpd.h"
#include "esp_http_server.h"

void app_httpd_main() {
	httpd_handle_t camera_httpd = NULL;
    httpd_config_t config = HTTPD_DEFAULT_CONFIG();

    httpd_uri_t index_uri = {
        .uri       = "/",
        .method    = HTTP_GET,
        .handler   = index_handler,
        .user_ctx  = NULL
    };

    ESP_LOGI(TAG, "Starting web server on port: '%d'", config.server_port);
    if (httpd_start(&camera_httpd, &config) == ESP_OK) {
        httpd_register_uri_handler(camera_httpd, &index_uri);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

Example

web server

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/471240
推荐阅读
相关标签
  

闽ICP备14008679号