2020年10月14日 | 为OLED屏增加GUI支持6：进度条控件

环境：

主机:WIN10

开发环境:MDK5.13

MCU:STM32F103

源代码：

gui_widget_progbar.h

/**

* Copyright (c), 2015-2025

* @file gui_widget_progbar.h

* @brief 文本控件头文件

* @author jdh

* @date 2015/11/22

*/

#ifndef _GUI_WIDGET_PROGBAR_H_

#define _GUI_WIDGET_PROGBAR_H_

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

* 头文件

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

#include "gui_interface.h"

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

* 宏定义

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

/**

* @brief 文本长度.单位:字节

*/

#define LEN_WIDGET_TEXT 32

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

* 数据结构

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

/**

* @brief 进度条数据结构

*/

typedef struct _Widget_Progbar

{

//x轴位置

uint16_t x;

//y轴位置

uint16_t y;

//水平尺寸

uint16_t xsize;

//垂直尺寸

uint16_t ysize;

}*Widget_Progbar_Handle;

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

* 函数

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

/**

* @brief 创建控件

* @param x:左上角x坐标

* @param y:左上角y坐标

* @param xsize:水平尺寸

* @param ysize:垂直尺寸

* @retval 控件句柄

*/

Widget_Progbar_Handle gui_widget_progbar_create(uint16_t x,uint16_t y,uint16_t xsize,uint16_t ysize);

/**

* @brief 设置进度

* @param value:百分比,0-100

*/

void gui_widget_progbar_set_value(Widget_Progbar_Handle handle,uint8_t value);

#endif

gui_widget_progbar.c

/**

* Copyright (c), 2015-2025

* @file gui_widget_progbar.c

* @brief 进度条控件主文件

* @author jdh

* @date 2015/11/22

*/

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

* 头文件

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

#include "gui_widget_progbar.h"

#include "gui_2d_lib.h"

#include "stdlib.h"

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

* 静态变量

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

/**

* @brief 百分比

*/

static uint8_t Percent = 0;

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

* 静态函数

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

/**

* @brief 控件显示

* @param handle:控件句柄

*/

static void show(Widget_Progbar_Handle handle);

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

* 函数

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

/**

* @brief 创建控件

* @param x:左上角x坐标

* @param y:左上角y坐标

* @param xsize:水平尺寸

* @param ysize:垂直尺寸

* @retval 控件句柄

*/

Widget_Progbar_Handle gui_widget_progbar_create(uint16_t x,uint16_t y,uint16_t xsize,uint16_t ysize)

{

Widget_Progbar_Handle handle;

//控件初始化

handle = malloc(sizeof(*handle));

handle->x = x;

handle->y = y;

handle->xsize = xsize;

handle->ysize = ysize;

//显示

show(handle);

return handle;

}

/**

* @brief 设置进度

* @param value:百分比,0-100

*/

void gui_widget_progbar_set_value(Widget_Progbar_Handle handle,uint8_t value)

{

if (Percent == value)

{

return;

}

if (value < Percent)

{

//清除区域

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

//显示

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

}

//显示

gui_fill_rect(handle->x + handle->xsize * Percent / 100,handle->y,

  handle->x + handle->xsize * value / 100,handle->y + handle->ysize,1);

Percent = value;

}

/**

* @brief 控件显示

* @param handle:控件句柄

*/

static void show(Widget_Progbar_Handle handle)

{

//清除区域

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

//显示

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

Percent = 0;

}

测试代码：

//进度条

static Widget_Progbar_Handle Widget_Progbar;

Widget_Progbar = gui_widget_progbar_create(9,39,111,8);

gui_widget_progbar_set_value(Widget_Progbar,50);

效果图：