[原创开源]emwin自定义控件2--环形进度条

Jmhh247

关键字： emwin, 自定义控件，环形进度条


这是一个用emwin写的主页面导航+侧边导航的通用程序框架，emwin仿真环境用的是codeblocks(16或17都可)。

本篇主要分享了一种环形进度条的自定义控件。(由于只是程序框架，所以并不涉及界面美化，我知道丑，所以先说出来~)


---
- 环形进度条

很常见的控件，就算现在没用，以后一定用的上！


---
- APP截图

下面是部分APP截图


静态展示





动态展示




---
- 核心代码

##### 原理就是用emwin系统的皮肤设置函数+按钮私有数据。这相当于一种自定义控件实现的简单方法，通过不同的函数+数据结构就能实现不同功能的控件。


!!!--------(延用了上个帖子的代码，整理的有点粗糙~)


1. 结构体类型

1. 
   
2. typedef struct {
   
3.     int Check;
   
4.     GUI_COLOR colorPressed;
   
5.     GUI_COLOR colorUnPress;
   
6.     GUI_FONT *iconFont;
   
7.     char iconName[6];
   
8.     char btnText[10];
   
9.     int ch;
   
10.     int sw;
    
11.     int mode;
    
12.     float batV;
    
13.     int batI;
    
14.     float power;
    
15. } BATINFO_USER_SKIN;
    

复制代码

2. 结构体定义

1. 
   
2. static BATINFO_USER_SKIN BatInfoData[] = {
   
3.     {ZL_BTN_CHKMODE_NO, GUI_DARKCYAN, GUI_DARKMAGENTA, &awefont24, "\uf0f6", "stm8", 1, 1, ZL_BATINFO_MODE_CC, 12.305, 2000},
   
4.     {ZL_BTN_CHKMODE_NO, GUI_DARKCYAN, GUI_DARKMAGENTA, &awefont24, "\uf030", "stm32", 2, 1, ZL_BATINFO_MODE_ST, 10.8, 1500},
   
5.     {ZL_BTN_CHKMODE_NO, GUI_DARKCYAN, GUI_DARKMAGENTA, &awefont24, "\uf008", "mcu", 3, 0, ZL_BATINFO_MODE_CV},
   
6. };
   
7. 
   
8. static BATINFO_USER_SKIN *pBtnUser[GUI_COUNTOF(BatInfoData)];
   

复制代码

3. 控件用户接口

(这里只完成了最有用的部分，有源码可以按需魔改。。。)


// !!!----以下接口必须在控件初始化私有数据后才能调用----

1. // 设置环形值 ok
   
2. int zl_roundlevel_set_value(WM_HWIN hItem, int value)
   
3. {
   
4.     BATINFO_USER_SKIN *pUsr;
   
5.     char strbuf[6];
   
6. 
   
7. 
   
8.     if (value > 100) {
   
9.         value = 100;
   
10.     }
    
11. 
    
12.     // 更新进度环
    
13.     BUTTON_GetUserData(hItem, &pUsr, sizeof(pUsr));
    
14.     pUsr->ch = value;
    
15. 
    
16. 
    
17.     // 更新数字值
    
18.     sprintf(strbuf, "%i %%", value);
    
19.     BUTTON_SetText(hItem, strbuf);
    
20. }
    
21. 
    
22. // 设置进度条颜色 ok
    
23. int zl_roundlevel_set_color(WM_HWIN hItem, GUI_COLOR color)
    
24. {
    
25.     BATINFO_USER_SKIN *pUsr;
    
26. 
    
27.     BUTTON_GetUserData(hItem, &pUsr, sizeof(pUsr));
    
28.     pUsr->colorPressed = color;
    
29. 
    
30.     WM_InvalidateWindow(hItem);
    
31. }
    
32. 
    
33. // 设置文字颜色 ok
    
34. int zl_roundlevel_set_valuecolor(WM_HWIN hItem, GUI_COLOR color)
    
35. {
    
36.     BUTTON_SetTextColor(hItem, BUTTON_CI_UNPRESSED, color);
    
37.     BUTTON_SetTextColor(hItem, BUTTON_CI_PRESSED, color);
    
38. }
    
39. 
    

复制代码

4. 环形进度条实现代码

1. 
   
2. // 环形进度条实现  ok
   
3. int button_drawskin_roundlevel(const WIDGET_ITEM_DRAW_INFO* pItem)
   
4. {
   
5.     BATINFO_USER_SKIN *pUsr;
   
6.     char acBuf[20];
   
7.     int xPos;
   
8.     int yPos;
   
9.     int r;
   
10. 
    
11. 
    
12. 
    
13.     switch (pItem->Cmd)
    
14.     {
    
15.     case WIDGET_ITEM_DRAW_BACKGROUND:
    
16. 
    
17.             BUTTON_GetUserData(pItem->hWin, &pUsr, sizeof(pUsr));
    
18. 
    
19.             if (BUTTON_IsPressed(pItem->hWin))
    
20.             {
    
21.                 GUI_SetColor(pUsr->colorUnPress);
    
22.             }
    
23.             else
    
24.             {
    
25.                 GUI_SetColor(pUsr->colorUnPress);
    
26.             }
    
27. 
    
28. 
    
29.             // 计算半径
    
30.             r = (pItem->x1 < pItem->y1) ? pItem->x1 : pItem->y1;
    
31. 
    
32.             if (r % 2) {
    
33.                 r -= 3;
    
34.             }
    
35.             else {
    
36.                 r -= 2;
    
37.             }
    
38. 
    
39.             xPos = pItem->x1 / 2;
    
40.             yPos = pItem->y1 / 2;
    
41. 
    
42.             // 外圆
    
43.             GUI_AA_FillCircle(xPos, yPos, r / 2);
    
44. 
    
45.             // 内圆
    
46.             GUI_SetColor(GUI_DARKCYAN);
    
47.             GUI_AA_FillCircle(xPos, yPos, r / 2 - (r / 6));
    
48. 
    
49.             // 进度环
    
50.             GUI_SetColor(pUsr->colorPressed);
    
51.             GUI_SetPenSize(r/6 - 1);
    
52.             GUI_AA_DrawArc(xPos, yPos, r / 2 - (r / 6 / 2) - 1, 0, 0, pUsr->ch * 3.6);
    
53. 
    
54.         break;
    
55. 
    
56.     default:
    
57.         {
    
58.             return BUTTON_DrawSkinFlex(pItem);
    
59.         }
    
60.     }
    
61.     return 0;
    
62. }
    

复制代码

控制篇幅，只列出部分代码。


---
最后是工程源码：      emwin-uidemo8-cbprj.zip (6.27 MB, 下载次数: 531)

2019-9-27 20:19 上传

点击文件名下载附件

编辑原因：修改排版。

Jmhh247

为了节约服务器空间和上传时间，本帖工程内不带字体文件。

需要到前的帖子 [STemWin] [原创开源]emWin导航界面支持Awesome图标字体 下载，复制到本帖工程内。

eric2013

非常感谢楼主分享。

chenlijian80

感谢楼主无私奉献，让吾等受益匪浅、、

Jmhh247

chenlijian80 发表于 2019-9-28 10:06
感谢楼主无私奉献，让吾等受益匪浅、、

一起学习！

Jmhh247

测试一下：环形进度条动画延迟效果


（只是测试，比较简陋，暂时不整理工程出来~）


- 动画延迟

动画延迟效果，就是有一个收敛的过程，不是一步到位的。

比如抽奖的表盘，不是转一下就停，而是有一个延迟过程才停下来。


!!!----("动画延迟"这个叫法可能不专业~)

---
- 动态展示

只有第1个环形进度条带延迟效果，仔细看可以看到，其它进度条都是直接停下来，而第1个进度条经过一段延迟才停下来。

(gif有撕裂感，是gif工具的问题，实际很流畅)




---
- 核心代码

##### 原理是：不直接更新设置值，而是通过一个定时器间接更新设置值，从而实现动画延迟。

1. 
   
2. #define ID_TIMER_TIME       1
   
3. 
   
4. static void _cb_round(WM_MESSAGE * pMsg)
   
5. {
   
6.     static     WM_HTIMER hTimerTime;
   
7.     WM_HWIN hWin;
   
8. 
   
9.     int Id;
   
10.     BATINFO_USER_SKIN *pUsr;
    
11. 
    
12.     static int value = 0;
    
13. 
    
14.     hWin = pMsg->hWin;
    
15.     BUTTON_GetUserData(hWin, &pUsr, sizeof(pUsr));
    
16. 
    
17.     switch (pMsg->MsgId)
    
18.     {
    
19.     case WM_TIMER:
    
20.         Id = WM_GetTimerId(pMsg->Data.v);
    
21. 
    
22. 
    
23.         if (pUsr->ch < pUsr->sw) {
    
24.             pUsr->ch++;
    
25. 
    
26.         }
    
27.         else if (pUsr->ch > pUsr->sw) {
    
28.             pUsr->ch--;
    
29.         }
    
30. 
    
31.         zl_roundlevel_set_value(hWin, pUsr->ch);
    
32. 
    
33.         WM_RestartTimer(pMsg->Data.v, 30);
    
34.         break;
    
35. 
    
36.     default:
    
37.         BUTTON_Callback(pMsg);
    
38.     }
    
39. }
    

复制代码

caicaptain2

Jmhh247 发表于 2019-9-28 15:23
测试一下：环形进度条动画延迟效果

什么平台mcu测试这个比较流畅？配置的emwin ram到多少了？

Jmhh247

caicaptain2 发表于 2019-9-29 07:57
什么平台mcu测试这个比较流畅？配置的emwin ram到多少了？

帖子里是在电脑上测试的。

还没在MCU上实测，F429来跑问题不大

l10618

最近BOSS想要做个圆形的进度条，来学习一下怎样实现

xk2yx

谢谢，，学习了。。

cplmaomao

还是挺牛逼的~

crazymcu

mark一下，感谢楼主分享

zhao_sj

我搞到F429上面显示了  很顺畅

ewrest

很好的思路

ssis909

这个用画圆弧加定时器控件重绘就可以实现,要是可以做成环形滑动按钮就好了

xk2yx

不错。。。。。

a3607

非常感谢楼主分享。

wen

很好的贴子，学习了，但是又一点不理解：环形进度条为啥跟button 关联上了？

[C] 纯文本查看 复制代码

int zl_roundlevel_set_value(WM_HWIN hItem, int value)
{
    BATINFO_USER_SKIN *pUsr;
    char strbuf[6];


    if (value > 100) {
        value = 100;
    }

    // 更新进度环
    BUTTON_GetUserData(hItem, &pUsr, sizeof(pUsr));
    pUsr->ch = value;


    // 更新数字值
    sprintf(strbuf, "%i %%", value);
    BUTTON_SetText(hItem, strbuf);
}