update docs

Author: brianignacio5

docs_espressif/en/debugproject.rst

@@ -346,43 +346,90 @@ You can start a monitor session to capture fatal error events with **ESP-IDF: La
 ESP-IDF: Image Viewer
 ---------------------
 
-The ESP-IDF extension provides an **ESP-IDF: Image Viewer** feature that allows you to visualize binary image data from debug variables during a debugging session. This is particularly useful for applications that work with camera sensors, display buffers, or any raw image data.
+The ESP-IDF extension provides an **ESP-IDF: Image Viewer** feature that allows you to visualize binary image data from debug variables during a debugging session. This is particularly useful for applications that work with camera sensors, display buffers, LVGL graphics, OpenCV computer vision, or any raw image data.
 
-To use the Image Viewer:
+**Quick Access Methods:**
 
-1. Start a debug session and pause at a breakpoint where your image data variable is in scope
-2. Go to ``View`` > ``Command Palette`` and enter ``ESP-IDF: Open Image Viewer``
-3. In the Image Viewer panel, enter the name of your image data variable and its size
-4. Select the appropriate image format and dimensions
-5. Click ``Load Image`` to visualize the data
+1. **Right-click on variables in the debug session:**
+   - Right-click on any ``lv_image_dsc_t`` variable and select ``View as LVGL Image``
+   - Right-click on any ``cv::Mat`` variable and select ``View as OpenCV Image``
+
+2. **Manual Image Viewer:**
+   - Go to ``View`` > ``Command Palette`` and enter ``ESP-IDF: Open Image Viewer``
+   - Enter the name of your image data variable and its size
+   - Select the appropriate image format and dimensions
+   - Click ``Load Image`` to visualize the data
 
 **Supported Image Formats:**
+
+**LVGL Color Formats (lv_color_format_t):**
+- RGB565, RGB888, RGBA8888, ARGB8888, XRGB8888
+- BGR888, BGRA8888, ABGR8888, XBGR8888
+- RGB332, RGB444, RGB555, RGB666, RGB777
+- Grayscale, YUV420, YUV422, YUV444
+- And many more LVGL-specific formats
+
+**OpenCV Mat Formats:**
+- BGR888 (3 channels)
+- BGRA8888 (4 channels)
+- Grayscale (1 channel)
+
+**Raw Pixel Formats:**
 - RGB565 (16-bit per pixel)
 - RGB888 (24-bit per pixel)
 - Grayscale (8-bit per pixel)
 - YUV420, YUV422, YUV444 (various YUV formats)
 
 **Example Usage:**
 
-Consider a camera application with the following variable:
+**LVGL Image Example:**
+
+.. code-block:: C
+
+    // LVGL image descriptor
+    lv_image_dsc_t my_image = {
+        .header = {
+            .cf = LV_COLOR_FORMAT_RGB888,  // Color format
+            .w = 320,                      // Width
+            .h = 240                       // Height
+        },
+        .data_size = 320 * 240 * 3,        // Data size in bytes
+        .data = image_data                 // Pointer to image data
+    };
+
+During debugging, right-click on ``my_image`` and select ``View as LVGL Image``. The Image Viewer will automatically extract the format, dimensions, and data from the LVGL structure.
+
+**OpenCV Mat Example:**
+
+.. code-block:: C
+
+    cv::Mat image(240, 320, CV_8UC3);  // 320x240 BGR888 image
+    // ... populate image data ...
+
+During debugging, right-click on ``image`` and select ``View as OpenCV Image``. The Image Viewer will automatically extract the dimensions, format, and data from the OpenCV Mat structure.
+
+**Manual Raw Data Example:**
 
 .. code-block:: C
 
     uint8_t image_buffer[320 * 240 * 3];  // RGB888 format, 320x240 pixels
     size_t image_size = sizeof(image_buffer);
 
-During debugging, you can:
+For manual usage:
 - Enter ``image_buffer`` as the variable name
 - Enter ``image_size`` or ``230400`` (320 * 240 * 3) as the size
 - Select ``RGB888`` format
 - Set width to ``320`` and height to ``240``
 
 **Important Notes:**
-- The Image Viewer only supports raw pixel formats. Compressed formats (JPEG, PNG, etc.) are not supported
-- You must specify the correct size of the image data array
-- The size can be provided as a number (bytes) or as the name of another variable containing the size
-- For pointer variables, make sure to provide the actual data size, not the pointer size
-- The Image Viewer automatically estimates dimensions based on the data size and selected format, but you can manually adjust them for better results
+- **LVGL Support**: Automatically extracts image properties from ``lv_image_dsc_t`` structures
+- **OpenCV Support**: Automatically extracts image properties from ``cv::Mat`` objects
+- **Format Detection**: The Image Viewer automatically detects and maps LVGL and OpenCV formats to the appropriate display format
+- **Raw Data**: The Image Viewer supports raw pixel formats. Compressed formats (JPEG, PNG, etc.) are not supported
+- **Size Specification**: For manual usage, you must specify the correct size of the image data array
+- **Variable Size**: The size can be provided as a number (bytes) or as the name of another variable containing the size
+- **Pointer Variables**: For pointer variables, make sure to provide the actual data size, not the pointer size
+- **Auto-Dimensioning**: The Image Viewer automatically estimates dimensions based on the data size and selected format, but you can manually adjust them for better results
 
 
 Other extensions debug configuration

docs_espressif/zh_CN/debugproject.rst

@@ -218,40 +218,87 @@ ESP-IDF 扩展在 ``运行和调试`` 视图中提供了 ``ESP-IDF：外设视
 ESP-IDF：图像查看器
 --------------------
 
-ESP-IDF 扩展提供了 **ESP-IDF：图像查看器** 功能，允许你在调试会话期间可视化来自调试变量的二进制图像数据。这对于处理摄像头传感器、显示缓冲区或任何原始图像数据的应用程序特别有用。
+ESP-IDF 扩展提供了 **ESP-IDF：图像查看器** 功能，允许你在调试会话期间可视化来自调试变量的二进制图像数据。这对于处理摄像头传感器、显示缓冲区、LVGL 图形、OpenCV 计算机视觉或任何原始图像数据的应用程序特别有用。
 
-使用方法：
+**快速访问方法：**
 
-1. 启动调试会话并在图像数据变量作用域内的断点处暂停
-2. 点击 ``查看`` > ``命令面板``，输入 ``ESP-IDF：打开图像查看器``
-3. 在图像查看器面板中，输入图像数据变量的名称和大小
-4. 选择适当的图像格式和尺寸
-5. 点击 ``加载图像`` 来可视化数据
+1. **在调试会话中右键点击变量：**
+   - 右键点击任何 ``lv_image_dsc_t`` 变量并选择 ``以 LVGL 图像查看``
+   - 右键点击任何 ``cv::Mat`` 变量并选择 ``以 OpenCV 图像查看``
+
+2. **手动图像查看器：**
+   - 点击 ``查看`` > ``命令面板``，输入 ``ESP-IDF：打开图像查看器``
+   - 输入图像数据变量的名称和大小
+   - 选择适当的图像格式和尺寸
+   - 点击 ``加载图像`` 来可视化数据
 
 **支持的图像格式：**
+
+**LVGL 颜色格式 (lv_color_format_t)：**
+- RGB565、RGB888、RGBA8888、ARGB8888、XRGB8888
+- BGR888、BGRA8888、ABGR8888、XBGR8888
+- RGB332、RGB444、RGB555、RGB666、RGB777
+- 灰度图、YUV420、YUV422、YUV444
+- 以及更多 LVGL 特定格式
+
+**OpenCV Mat 格式：**
+- BGR888（3 通道）
+- BGRA8888（4 通道）
+- 灰度图（1 通道）
+
+**原始像素格式：**
 - RGB565（每像素 16 位）
 - RGB888（每像素 24 位）
 - 灰度图（每像素 8 位）
 - YUV420、YUV422、YUV444（各种 YUV 格式）
 
 **使用示例：**
 
-考虑一个具有以下变量的摄像头应用程序：
+**LVGL 图像示例：**
+
+.. code-block:: C
+
+    // LVGL 图像描述符
+    lv_image_dsc_t my_image = {
+        .header = {
+            .cf = LV_COLOR_FORMAT_RGB888,  // 颜色格式
+            .w = 320,                      // 宽度
+            .h = 240                       // 高度
+        },
+        .data_size = 320 * 240 * 3,        // 数据大小（字节）
+        .data = image_data                 // 指向图像数据的指针
+    };
+
+在调试过程中，右键点击 ``my_image`` 并选择 ``以 LVGL 图像查看``。图像查看器将自动从 LVGL 结构中提取格式、尺寸和数据。
+
+**OpenCV Mat 示例：**
+
+.. code-block:: C
+
+    cv::Mat image(240, 320, CV_8UC3);  // 320x240 BGR888 图像
+    // ... 填充图像数据 ...
+
+在调试过程中，右键点击 ``image`` 并选择 ``以 OpenCV 图像查看``。图像查看器将自动从 OpenCV Mat 结构中提取尺寸、格式和数据。
+
+**手动原始数据示例：**
 
 .. code-block:: C
 
     uint8_t image_buffer[320 * 240 * 3];  // RGB888 格式，320x240 像素
     size_t image_size = sizeof(image_buffer);
 
-在调试过程中，你可以：
+手动使用时：
 - 输入 ``image_buffer`` 作为变量名
 - 输入 ``image_size`` 或 ``230400``（320 * 240 * 3）作为大小
 - 选择 ``RGB888`` 格式
 - 将宽度设置为 ``320``，高度设置为 ``240``
 
 **重要说明：**
-- 图像查看器仅支持原始像素格式。不支持压缩格式（JPEG、PNG 等）
-- 必须指定图像数据数组的正确大小
-- 大小可以作为数字（字节）提供，或作为包含大小的另一个变量的名称
-- 对于指针变量，请确保提供实际数据大小，而不是指针大小
-- 图像查看器会根据数据大小和所选格式自动估算尺寸，但你可以手动调整以获得更好的结果
+- **LVGL 支持**：自动从 ``lv_image_dsc_t`` 结构中提取图像属性
+- **OpenCV 支持**：自动从 ``cv::Mat`` 对象中提取图像属性
+- **格式检测**：图像查看器自动检测并将 LVGL 和 OpenCV 格式映射到适当的显示格式
+- **原始数据**：图像查看器支持原始像素格式。不支持压缩格式（JPEG、PNG 等）
+- **大小指定**：手动使用时，必须指定图像数据数组的正确大小
+- **变量大小**：大小可以作为数字（字节）提供，或作为包含大小的另一个变量的名称
+- **指针变量**：对于指针变量，请确保提供实际数据大小，而不是指针大小
+- **自动尺寸估算**：图像查看器会根据数据大小和所选格式自动估算尺寸，但你可以手动调整以获得更好的结果