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

1万 · 2018-8-15 13:01

本文博客链接:http://blog.csdn.net/jdh99

环境：

主机: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);

1万 · 2018-8-17 09:38

很好感谢楼主分享正需要这个

1万 · 2018-8-17 10:06

heimaojingzhang 发表于 2018-8-17 09:38
很好感谢楼主分享正需要这个

客气了顺手而已