[原创开源]emwin自定义控件1--卡片面板-擦鞋匠的回答

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

2019-12-10 18:17发布

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

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

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

---
- 卡片面板

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

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

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

batinfo-g.gif (182.73 KB, 下载次数: 0) 下载附件 2019-9-27 10:59 上传

---
- 代码实现

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

1. 结构体类型

typedef struct {
int Check;
GUI_COLOR colorPressed;
GUI_COLOR colorUnPress;
GUI_FONT *iconFont;
char iconName[6];
char btnText[10];
int ch;
int sw;
int mode;
float batV;
int batI;
float power;
} BATINFO_USER_SKIN;

复制代码

2. 结构体定义

static BATINFO_USER_SKIN BatInfoData[] = {
{ZL_BTN_CHKMODE_NO, GUI_DARKCYAN, GUI_DARKMAGENTA, &awefont24, "uf0f6", "stm8", 1, 1, ZL_BATINFO_MODE_CC, 12.305, 2000},
{ZL_BTN_CHKMODE_NO, GUI_DARKCYAN, GUI_DARKMAGENTA, &awefont24, "uf030", "stm32", 2, 1, ZL_BATINFO_MODE_ST, 10.8, 1500},
{ZL_BTN_CHKMODE_NO, GUI_DARKCYAN, GUI_DARKMAGENTA, &awefont24, "uf008", "mcu", 3, 0, ZL_BATINFO_MODE_CV},
{ZL_BTN_CHKMODE_NO, GUI_DARKCYAN, GUI_DARKMAGENTA, &awefont24, "uf226", "linux", 4, 1, ZL_BATINFO_MODE_DC, 12.0, 1800},
{ZL_BTN_CHKMODE_NO, GUI_DARKCYAN, GUI_DARKMAGENTA, &awefont24, "uf144", "audio", 5},
};

复制代码

3. 卡片面板实现代码

// 卡片面板控件 ok
int button_drawskin_batinfo(const WIDGET_ITEM_DRAW_INFO* pItem)
{
BATINFO_USER_SKIN *pUsr;
GUI_RECT rect;
char acBuf[20];
int xSize;
int ySize;
int strXsizeLen;
int xPos;
switch (pItem->Cmd)
{
case WIDGET_ITEM_DRAW_TEXT:
BUTTON_GetText(pItem->hWin, acBuf, sizeof(acBuf));
rect.x0 = pItem->x0;
rect.x1 = pItem->x1;
rect.y0 = pItem->y0;
rect.y1 = pItem->y1;
GUI_SetFont(BUTTON_GetFont(pItem->hWin));
GUI_SetTextMode(GUI_TM_TRANS);
GUI_SetColor(GUI_LIGHTGREEN);
rect.y0 = rect.y1 / 12;
BUTTON_GetUserData(pItem->hWin, &pUsr, sizeof(pUsr));
GUI_DispStringAt("CH", 3, rect.y0);
GUI_DispDecAt(pUsr->ch, 15 + 8, rect.y0, 2);
if (pUsr->sw == 1) {
strXsizeLen = GUI_GetStringDistX("ON");
GUI_SetColor(GUI_WHITE);
GUI_AA_FillRoundedRect(63-2, rect.y0-2, 63+strXsizeLen+2, rect.y0+16, 2);
GUI_SetColor(GUI_RED);
GUI_DispStringAt("ON", 63, rect.y0);
//
GUI_SetColor(GUI_LIGHTGREEN);
if (pUsr->mode == ZL_BATINFO_MODE_CC) {
GUI_DispStringAt("CC", 58 + 40, rect.y0);
}
else if (pUsr->mode == ZL_BATINFO_MODE_CV) {
GUI_DispStringAt("CV", 58 + 40, rect.y0);
}
else if (pUsr->mode == ZL_BATINFO_MODE_DC) {
GUI_DispStringAt("DC", 58 + 40, rect.y0);
}
else if (pUsr->mode == ZL_BATINFO_MODE_ST) {
GUI_DispStringAt("ST", 58 + 40, rect.y0);
}
// vol
strXsizeLen = 0;
sprintf(acBuf, "%.3f", pUsr->batV);
GUI_SetFont(GUI_FONT_24B_ASCII);
strXsizeLen += GUI_GetStringDistX(acBuf);
GUI_SetFont(GUI_FONT_16B_ASCII);
strXsizeLen += GUI_GetStringDistX("V");
xPos = (WM_GetWindowSizeX(pItem->hWin) - strXsizeLen) / 2;
GUI_GotoXY(xPos, rect.y0 + 60);
GUI_SetFont(GUI_FONT_24B_ASCII);
GUI_DispString(acBuf);
GUI_GotoY(rect.y0 + 60 + (5));
GUI_SetFont(GUI_FONT_16B_ASCII);
GUI_DispString("V");
// i
strXsizeLen = 0;
sprintf(acBuf, "%d", pUsr->batI);
GUI_SetFont(GUI_FONT_24B_ASCII);
strXsizeLen += GUI_GetStringDistX(acBuf);
GUI_SetFont(GUI_FONT_16B_ASCII);
strXsizeLen += GUI_GetStringDistX("mA");
xPos = (WM_GetWindowSizeX(pItem->hWin) - strXsizeLen) / 2;
GUI_GotoXY(xPos, rect.y0 + 60 + 25);
GUI_SetFont(GUI_FONT_24B_ASCII);
GUI_DispString(acBuf);
GUI_GotoY(rect.y0 + 60 + + 25 + (5));
GUI_SetFont(GUI_FONT_16B_ASCII);
GUI_DispString("mA");
// GUI_DispDecAt(pUsr->power, 8 + 50, rect.y0 + 60 + 50, 4);
// GUI_DispString("mAh");
}
else {
strXsizeLen = GUI_GetStringDistX("OFF");
GUI_SetColor(GUI_WHITE);
GUI_AA_FillRoundedRect(63-2, rect.y0-2, 63+strXsizeLen+2, rect.y0+16, 2);
GUI_SetColor(GUI_RED);
GUI_DispStringAt("OFF", 63, rect.y0);
}
break;
case WIDGET_ITEM_DRAW_BACKGROUND:
BUTTON_GetUserData(pItem->hWin, &pUsr, sizeof(pUsr));
if (BUTTON_IsPressed(pItem->hWin))
{
if (pUsr->sw == 1) {
GUI_SetColor(pUsr->colorPressed);
}
else {
GUI_SetColor(pUsr->colorPressed);
}
}
else
{
if (pUsr->sw == 1) {
GUI_SetColor(pUsr->colorUnPress);
}
else {
GUI_SetColor(pUsr->colorPressed);
}
}
GUI_AA_FillRoundedRect(pItem->x0, pItem->y0, pItem->x1, pItem->y1, 0);
rect.x0 = pItem->x0;
rect.x1 = pItem->x1;
rect.y0 = pItem->y0;
rect.y1 = pItem->y1;
rect.y0 = rect.y1 / 5;
GUI_SetColor(GUI_GRAY_E7);
GUI_DrawHLine(rect.y0, rect.x0, rect.x1);
GUI_SetPenSize(2);
GUI_AA_DrawLine(pItem->x0 + 35, pItem->y0 + 1, pItem->x0 + 20 + 30, rect.y0 -1);
if (pUsr->Check == ZL_BTN_CHKMODE_UP){
GUI_SetPenSize(5);
GUI_SetColor(GUI_WHITE);
GUI_DrawLine(pItem->x0, pItem->y0, pItem->x1, pItem->y0);
}
if (pUsr->Check == ZL_BTN_CHKMODE_DOWN){
GUI_SetPenSize(5);
GUI_SetColor(GUI_WHITE);
GUI_DrawLine(pItem->x0, pItem->y1, pItem->x1, pItem->y1);
}
if (pUsr->Check == ZL_BTN_CHKMODE_LEFT){
GUI_SetPenSize(5);
GUI_SetColor(GUI_WHITE);
GUI_DrawLine(pItem->x0, pItem->y0, pItem->x0, pItem->y1);
}
if (pUsr->Check == ZL_BTN_CHKMODE_RIGHT){
GUI_SetPenSize(5);
GUI_SetColor(GUI_WHITE);
GUI_DrawLine(pItem->x1, pItem->y0, pItem->x1, pItem->y1);
}
break;
default:
{
return BUTTON_DrawSkinFlex(pItem);
}
}
return 0;
}

复制代码

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

---
最后是工程源码：

emwin-uidemo7-cbprj.zip (6.27 MB, 下载次数: 20) 2019-9-27 11:01 上传点击文件名下载附件

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

友情提示: 此问题已得到解决，问题已经关闭,关闭后问题禁止继续编辑，回答。

11条回答

擦鞋匠

2019-12-11 09:21

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

查看其它11个回答

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

一周热门更多>

相关问题

相关文章

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

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

一周热门 更多>

相关问题

相关文章

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

一周热门更多>