2020年10月14日 | 为OLED屏增加GUI支持5：图片控件

环境：

主机:WIN10

开发环境:MDK5.13

MCU:STM32F103

说明：

本文定义了图片控件。OLED屏是单色屏，所以本图片控件支持的是单色BMP图像。

将普通图像转换为单色图片可以用工具BmpCvt.exe。将转换后的BMP图像转换为hex文件,可以用Bin2C.exe。这两个工具都是emwin自带工具。

源代码：

转换后的hex文件再整理成如下的示例格式:

battery0.c

/**

* Copyright (c), 2015-2025

* @file battery0.c

* @brief 电池0格图标

* @author jdh

* @date 2015/11/9

* @verbatim 

* 说明:

* 1.图片格式为bmp

* 2.图片大小为17*13

* @endverbatim 

*/

/*********************************************************************

* 头文件

**********************************************************************/

#include "res.h"

/*********************************************************************

* 全局变量

**********************************************************************/

const unsigned char Res_Battery0_Bmp[114UL + 1] = {

  0x42, 0x4D, 0x72, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3E, 0x00, 0x00, 0x00, 0x28, 0x00, 0x00, 0x00, 0x11, 0x00, 0x00, 0x00, 0x0D, 0x00, 0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,

  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3F, 0xFF, 0x80, 0xFF, 0x20, 0x00, 0x80, 0x04, 0xE0, 0x00, 0x80, 0x00, 0xE0, 0x00,

  0x80, 0x00, 0xE0, 0x00, 0x80, 0x00, 0xE0, 0x00, 0x80, 0x00, 0xE0, 0x00, 0x80, 0x00, 0xE0, 0x00, 0x80, 0x00, 0x20, 0x00, 0x80, 0x00, 0x3F, 0xFF, 0x80, 0x04, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00

};

/*************************** End of file ****************************/

gui_widget_image.h

/**

* Copyright (c), 2015-2025

* @file gui_widget_image.h

* @brief 图片控件头文件

* @author jdh

* @date 2015/9/8

*/

#ifndef _GUI_WIDGET_IMAGE_H_

#define _GUI_WIDGET_IMAGE_H_

/*********************************************************************

* 头文件

**********************************************************************/

#include "gui_interface.h"

/*********************************************************************

* 数据结构

**********************************************************************/

/**

* @brief 图片控件数据结构

*/

typedef struct _Widget_Image

{

//x轴位置

uint16_t x;

//y轴位置

uint16_t y;

//水平尺寸

uint16_t xsize;

//垂直尺寸

uint16_t ysize;

//图片地址

const uint8_t *addr;

}*Widget_Image_Handle;

/*********************************************************************

* 函数

**********************************************************************/

/**

* @brief 创建控件text

* @param x:左上角x坐标

* @param y:左上角y坐标

* @param xsize:水平尺寸

* @param ysize:垂直尺寸

*/

Widget_Image_Handle gui_widget_image_create(uint16_t x,uint16_t y,uint16_t xsize,uint16_t ysize);

/**

* @brief 设置图片

* @param addr:图片地址

*/

void gui_widget_image_set_bmp(Widget_Image_Handle handle,const uint8_t *addr);

#endif

gui_widget_image.c

/**

* Copyright (c), 2015-2025

* @file gui_widget_image.c

* @brief 图片控件主文件

* @author jdh

* @date 2015/9/8

*/

/*********************************************************************

* 头文件

**********************************************************************/

#include "gui_widget_image.h"

#include "gui_2d_lib.h"

#include "stdlib.h"

#include "string.h"

/*********************************************************************

* 静态函数

**********************************************************************/

/**

* @brief 控件显示

* @param handle:控件句柄

*/

static void show(Widget_Image_Handle handle);

/*********************************************************************

* 函数

**********************************************************************/

/**

* @brief 创建控件text

* @param x:左上角x坐标

* @param y:左上角y坐标

* @param xsize:水平尺寸

* @param ysize:垂直尺寸

*/

Widget_Image_Handle gui_widget_image_create(uint16_t x,uint16_t y,uint16_t xsize,uint16_t ysize)

{

Widget_Image_Handle handle;

//控件初始化

handle = malloc(sizeof(*handle));

handle->x = x;

handle->y = y;

handle->xsize = xsize;

handle->ysize = ysize;

return handle;

}

/**

* @brief 设置图片

* @param addr:图片地址

*/

void gui_widget_image_set_bmp(Widget_Image_Handle handle,const uint8_t *addr)

{

handle->addr = addr;

//显示

show(handle);

}

/**

* @brief 控件显示

* @param handle:控件句柄

*/

static void show(Widget_Image_Handle handle)

{

//清除区域

gui_fill_rect(handle->x,handle->y,handle->x + handle->xsize,handle->y + handle->ysize,0);

//显示

gui_draw_bitmap(handle->x,handle->y,handle->addr);

}

测试代码:

//电池图标

static Widget_Image_Handle Widget_Image_Battery;

Widget_Image_Battery = gui_widget_image_create(106,0,17,13);

gui_widget_image_set_bmp(Widget_Image_Battery,Res_Battery0_Bmp);