【ESP32CAM识别图形左边界】（二）网页添加补光灯按钮_esp32-cam 怎么配置增加按键之类

系列文章目录

ESP32CAM识别图形左边界(一)：初步使用ESP32CAM

ESP32CAM识别图形左边界(二)：网页添加补光灯按钮

ESP32CAM识别图形左边界(三)：识别图像左边界

---

目录

前言

一、导入项目

二、查看补光灯引脚

1.CameraWebServer.ino

2.app_httpd.cpp

3.camera_index.h

---

前言

  上一篇文章主要讲解了如何使用ESP32CAM相机，并通过网页页面使用相机，这一篇文章讲解如何修改网页，增加补光灯控制按钮。

---

一、导入项目

        跟上一篇文章一样操作，先打开Arduino IDE，再打开CameraWebServer示例项目，需要另存，这个示例项目代码是只读的，不可修改。

二、增加补光灯按钮

    (1) 查找补光灯引脚 

        去上一篇文章中的安信可官网，查看相机的引脚图，对也的是PIN4，虽然不太清楚ESP32在Arduino中的引脚定义是否相同，直接尝试在CameraWebServer.ino文件的初始化过程中添加打开补光灯的代码，开机直接打开补光灯了，说明跟Arduino中的引脚定义是相同的。

​

(2) 修改项目文件

1.CameraWebServer.ino

         第一步，对相机补光灯初始化，找到文件中的setup函数，添加下面的代码。

  //相机闪光灯
  pinMode(4, OUTPUT);
  digitalWrite(4, 0);

2.app_httpd.cpp

        这个文件主要是分为以下几大块。

• startCameraServer函数，是这个文件的程序入口函数。
• index_handler函数，主要是加载网页的相关配置。
• status_handler函数，获取网页相关变量的值，在http://IP地址/status的网页界面打印。
• cmd_handler函数，这个是实际执行网页相关按钮命令的函数。
• capture_handler函数，则是捕捉一张图片。开启相关功能后，抓取的这张图片也会包含功能。
• stream_handler函数，网页取流的处理函数。

文件最上方需要增加一个静态变量。

static bool light_flag = 0;

找到cmd_handler函数下面这个if判断，增加下面的代码。

    else if(!strcmp(variable, "lightbtn")) {
        light_flag = val;
        digitalWrite(4, light_flag);
        Serial.printf("lightbtn:%d", light_flag);
    }

这部分的代码会在串口里面打印light_flag这个值，但如果还希望在status网页里面输出light_flag的变量值，只需要添加下面的代码就行。

p+=sprintf(p, "\"lightbtn\":%u", light_flag);

3.camera_index.h

        这个是对应的网页模板，需要增加补光灯按钮的xml格式标签。首先需要找到对应的网页模板文index_ov2640.html，增加下面的代码。

                        <div class="input-group" id="light-group">
                            <label for="lightbtn">Light Button</label>
                            <div class="switch">
                                <input id="lightbtn" type="checkbox" class="default-action">
                                <label class="slider" for="lightbtn"></label>
                            </div>
                        </div>

增加完毕后保存，再压缩成index_ov2640.html.gz文件，.gz格式在Linux系统下比较常见，我是直接在Linux系统下压缩后拷贝出来的，然后再使用十六进制打开这个文件，我用的是Beyond compare这款软件。

然后回到camera_index.h文件，找到下面这2行代码，注释掉或者删除都行。

第一行是文件的大小，直接电脑-右键属性-文件的大小（字节单位的大小）

第二行就是我们查看的index_ov2640.html.gz文件十六进制的数据。

Beyond compare拷贝出来的十六进制数据缺少0x前缀，我用的是文本编辑器，查找空格，再替换成,0x字符（不要忘记第一个需要自己手动补充0x前缀）。

替换完的数据直接复制粘贴到下面的花括号中间（不要忘记修改第一行的大小）。

#define index_ov2640_html_gz_len 4327
const uint8_t index_ov2640_html_gz[] = {
  
};

---

 总结

        在ESP32CAM相机的网页界面添加一个开关按钮控制相机的补光灯的修改到此就结束了，下一篇继续讲解如何将相机的网页界面添加识别图像左边界的功能。