[原创开源]emwin自定义控件1--卡片面板

Jmhh247

关键字： emwin, 自定义控件，卡片面板


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


本篇主要介绍了一种卡片式的自定义控件。(由于只是程序框架，所以并不涉及界面美化，我知道丑，所以先说出来~)


---
- 卡片面板

卡片面板是我自己起的名字，不知道此类控件是否有准确的叫法。

在横屏设备中，卡片面板有着大量的应用，通常用来展示同类信息。

下面的截图来自最近沉迷的手游《QQ飞车》。（飞车一局2分钟左右，比王者玩起来轻松太多了，当然我主要是为看它的GUI设计~）




---
- 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.     {ZL_BTN_CHKMODE_NO, GUI_DARKCYAN, GUI_DARKMAGENTA, &awefont24, "\uf226", "linux", 4, 1, ZL_BATINFO_MODE_DC, 12.0, 1800},
   
7.     {ZL_BTN_CHKMODE_NO, GUI_DARKCYAN, GUI_DARKMAGENTA, &awefont24, "\uf144", "audio", 5},
   
8. };

复制代码

3. 卡片面板实现代码

1. 
   
2. // 卡片面板控件 ok
   
3. int button_drawskin_batinfo(const WIDGET_ITEM_DRAW_INFO* pItem)
   
4. {
   
5.     BATINFO_USER_SKIN *pUsr;
   
6.     GUI_RECT rect;
   
7.     char acBuf[20];
   
8. 
   
9.     int xSize;
   
10.     int ySize;
    
11.     int strXsizeLen;
    
12.     int xPos;
    
13. 
    
14. 
    
15. 
    
16.         switch (pItem->Cmd)
    
17.         {
    
18.     case WIDGET_ITEM_DRAW_TEXT:
    
19. 
    
20.             BUTTON_GetText(pItem->hWin, acBuf, sizeof(acBuf));
    
21. 
    
22.             rect.x0 = pItem->x0;
    
23.             rect.x1 = pItem->x1;
    
24.             rect.y0 = pItem->y0;
    
25.             rect.y1 = pItem->y1;
    
26. 
    
27. 
    
28.             GUI_SetFont(BUTTON_GetFont(pItem->hWin));
    
29.             GUI_SetTextMode(GUI_TM_TRANS);
    
30.             GUI_SetColor(GUI_LIGHTGREEN);
    
31. 
    
32.             rect.y0 = rect.y1 / 12;
    
33. 
    
34. 
    
35.             BUTTON_GetUserData(pItem->hWin, &pUsr, sizeof(pUsr));
    
36. 
    
37. 
    
38.             GUI_DispStringAt("CH", 3, rect.y0);
    
39.             GUI_DispDecAt(pUsr->ch, 15 + 8, rect.y0, 2);
    
40. 
    
41. 
    
42.             if (pUsr->sw == 1) {
    
43. 
    
44.                 strXsizeLen = GUI_GetStringDistX("ON");
    
45. 
    
46.                 GUI_SetColor(GUI_WHITE);
    
47.                 GUI_AA_FillRoundedRect(63-2, rect.y0-2, 63+strXsizeLen+2, rect.y0+16, 2);
    
48.                 GUI_SetColor(GUI_RED);
    
49. 
    
50.                 GUI_DispStringAt("ON", 63, rect.y0);
    
51. 
    
52.                 //
    
53.                 GUI_SetColor(GUI_LIGHTGREEN);
    
54. 
    
55.                 if (pUsr->mode == ZL_BATINFO_MODE_CC) {
    
56.                     GUI_DispStringAt("CC", 58 + 40, rect.y0);
    
57.                 }
    
58.                 else if (pUsr->mode == ZL_BATINFO_MODE_CV) {
    
59.                     GUI_DispStringAt("CV", 58 + 40, rect.y0);
    
60.                 }
    
61.                 else if (pUsr->mode == ZL_BATINFO_MODE_DC) {
    
62.                     GUI_DispStringAt("DC", 58 + 40, rect.y0);
    
63.                 }
    
64.                 else if (pUsr->mode == ZL_BATINFO_MODE_ST) {
    
65.                     GUI_DispStringAt("ST", 58 + 40, rect.y0);
    
66.                 }
    
67. 
    
68. 
    
69.                 // vol
    
70.                 strXsizeLen = 0;
    
71. 
    
72.                 sprintf(acBuf, "%.3f", pUsr->batV);
    
73.                 GUI_SetFont(GUI_FONT_24B_ASCII);
    
74. 
    
75.                 strXsizeLen += GUI_GetStringDistX(acBuf);
    
76. 
    
77.                 GUI_SetFont(GUI_FONT_16B_ASCII);
    
78. 
    
79.                 strXsizeLen += GUI_GetStringDistX("V");
    
80. 
    
81.                 xPos = (WM_GetWindowSizeX(pItem->hWin) - strXsizeLen) / 2;
    
82. 
    
83.                 GUI_GotoXY(xPos, rect.y0 + 60);
    
84.                 GUI_SetFont(GUI_FONT_24B_ASCII);
    
85.                 GUI_DispString(acBuf);
    
86. 
    
87.                 GUI_GotoY(rect.y0 + 60 + (5));
    
88.                 GUI_SetFont(GUI_FONT_16B_ASCII);
    
89.                 GUI_DispString("V");
    
90. 
    
91. 
    
92. 
    
93.                 // i
    
94.                 strXsizeLen = 0;
    
95. 
    
96.                 sprintf(acBuf, "%d", pUsr->batI);
    
97.                 GUI_SetFont(GUI_FONT_24B_ASCII);
    
98. 
    
99.                 strXsizeLen += GUI_GetStringDistX(acBuf);
    
100. 
     
101.                 GUI_SetFont(GUI_FONT_16B_ASCII);
     
102. 
     
103.                 strXsizeLen += GUI_GetStringDistX("mA");
     
104. 
     
105.                 xPos = (WM_GetWindowSizeX(pItem->hWin) - strXsizeLen) / 2;
     
106. 
     
107.                 GUI_GotoXY(xPos, rect.y0 + 60 + 25);
     
108.                 GUI_SetFont(GUI_FONT_24B_ASCII);
     
109.                 GUI_DispString(acBuf);
     
110. 
     
111.                 GUI_GotoY(rect.y0 + 60 + + 25 + (5));
     
112.                 GUI_SetFont(GUI_FONT_16B_ASCII);
     
113.                 GUI_DispString("mA");
     
114. 
     
115. //                GUI_DispDecAt(pUsr->power, 8 + 50, rect.y0 + 60 + 50, 4);
     
116. //                GUI_DispString("mAh");
     
117. 
     
118.             }
     
119.             else {
     
120. 
     
121.                 strXsizeLen = GUI_GetStringDistX("OFF");
     
122. 
     
123.                 GUI_SetColor(GUI_WHITE);
     
124.                 GUI_AA_FillRoundedRect(63-2, rect.y0-2, 63+strXsizeLen+2, rect.y0+16, 2);
     
125.                 GUI_SetColor(GUI_RED);
     
126. 
     
127.                 GUI_DispStringAt("OFF", 63, rect.y0);
     
128.             }
     
129.         break;
     
130. 
     
131.         case WIDGET_ITEM_DRAW_BACKGROUND:
     
132. 
     
133.                     BUTTON_GetUserData(pItem->hWin, &pUsr, sizeof(pUsr));
     
134. 
     
135.                         if (BUTTON_IsPressed(pItem->hWin))
     
136.                         {
     
137. 
     
138.                 if (pUsr->sw == 1) {
     
139.                     GUI_SetColor(pUsr->colorPressed);
     
140.                 }
     
141.                 else {
     
142.                     GUI_SetColor(pUsr->colorPressed);
     
143.                 }
     
144. 
     
145.                         }
     
146.                         else
     
147.                         {
     
148.                 if (pUsr->sw == 1) {
     
149.                     GUI_SetColor(pUsr->colorUnPress);
     
150.                 }
     
151.                 else {
     
152.                     GUI_SetColor(pUsr->colorPressed);
     
153.                 }
     
154.                         }
     
155. 
     
156.                         GUI_AA_FillRoundedRect(pItem->x0, pItem->y0, pItem->x1, pItem->y1, 0);
     
157. 
     
158.             rect.x0 = pItem->x0;
     
159.             rect.x1 = pItem->x1;
     
160.             rect.y0 = pItem->y0;
     
161.             rect.y1 = pItem->y1;
     
162. 
     
163. 
     
164. 
     
165. 
     
166.             rect.y0 = rect.y1 / 5;
     
167. 
     
168. 
     
169.             GUI_SetColor(GUI_GRAY_E7);
     
170. 
     
171.             GUI_DrawHLine(rect.y0, rect.x0, rect.x1);
     
172. 
     
173. 
     
174.             GUI_SetPenSize(2);
     
175.             GUI_AA_DrawLine(pItem->x0 + 35, pItem->y0 + 1, pItem->x0 + 20 + 30, rect.y0 -1);
     
176. 
     
177. 
     
178.                         if (pUsr->Check == ZL_BTN_CHKMODE_UP){
     
179. 
     
180.                 GUI_SetPenSize(5);
     
181.                 GUI_SetColor(GUI_WHITE);
     
182.                 GUI_DrawLine(pItem->x0, pItem->y0, pItem->x1, pItem->y0);
     
183.                         }
     
184. 
     
185.                         if (pUsr->Check == ZL_BTN_CHKMODE_DOWN){
     
186. 
     
187.                 GUI_SetPenSize(5);
     
188.                 GUI_SetColor(GUI_WHITE);
     
189.                 GUI_DrawLine(pItem->x0, pItem->y1, pItem->x1, pItem->y1);
     
190.                         }
     
191. 
     
192.                         if (pUsr->Check == ZL_BTN_CHKMODE_LEFT){
     
193. 
     
194.                 GUI_SetPenSize(5);
     
195.                 GUI_SetColor(GUI_WHITE);
     
196.                 GUI_DrawLine(pItem->x0, pItem->y0, pItem->x0, pItem->y1);
     
197.                         }
     
198. 
     
199.                         if (pUsr->Check == ZL_BTN_CHKMODE_RIGHT){
     
200. 
     
201.                 GUI_SetPenSize(5);
     
202.                 GUI_SetColor(GUI_WHITE);
     
203.                 GUI_DrawLine(pItem->x1, pItem->y0, pItem->x1, pItem->y1);
     
204.                         }
     
205. 
     
206.         break;
     
207. 
     
208.         default:
     
209.                 {
     
210.                         return BUTTON_DrawSkinFlex(pItem);
     
211.                 }
     
212.         }
     
213.         return 0;
     
214. }
     

复制代码

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


---
最后是工程源码：      

(因为附件大小限制，本帖工程内不带字体文件，需要去第一个帖子里下载，点我的头像主题进去~)

honami520

做的不错，支持开源。

mPiDDR

界面有点素，适合单色屏。

Excellence

谢谢分享

重庆酱油仔

这个时候，没得美女背景图，怎么可以，快点找美工大神给你搞几个。

wangchin1988

看起来不错，做UI是最难的活

擦鞋匠

。。。嗯，你以为我在玩游戏吗？
。。。嗯，难道不是吗？？？
。。。我在寻找UI素材灵感。

momo_li

卖家秀与买家秀

hygbeyond

不错的示例，支持一下

Jmhh247

重庆酱油仔 发表于 2019-9-27 14:42
这个时候，没得美女背景图，怎么可以，快点找美工大神给你搞几个。

然而，我就是美工本人。。。

重庆酱油仔

Jmhh247 发表于 2019-9-27 15:39
然而，我就是美工本人。。。

那该给你差评了，不说搞点泳装美女背景嘛，也得搞点自然风光啥。纯色板。。。

Jmhh247

重庆酱油仔 发表于 2019-9-28 08:25
那该给你差评了，不说搞点泳装美女背景嘛，也得搞点自然风光啥。纯色板。。。 ...

好嘞，好嘞，竟无言以对。。。

Years丶

这按钮是贴图吗？