为OLED屏增加GUI支持5：图片控件

为OLED屏增加GUI支持5：图片控件

本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明.
环境：主机:WIN10开发环境:MDK5.13MCU: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);