您尚未登录。

页次： 1

分享链接 / 只看楼主

楼主 #1 2019-09-23 13:06:44

Jmhh247
会员
注册时间： 2018-12-21
已发帖子： 262
积分： 262

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

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

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


##### 本坛首发。

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


---
- 卡片面板

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

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

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

FluxBB bbcode 测试

---
- APP截图

下面是部分APP截图


静态展示

FluxBB bbcode 测试


动态展示

FluxBB bbcode 测试



---
- 代码实现

##### 原理就是用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

离线

楼主 #2 2019-09-23 13:08:31

Jmhh247
会员
注册时间： 2018-12-21
已发帖子： 262
积分： 262

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

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

需要到前的帖子下载字体，并复制到本工程内。

离线

#3 2019-09-23 13:44:32

晕哥
管理员
注册时间： 2017-09-06
已发帖子： 9,342
积分： 9202

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

特别感谢楼主的无私分享！

我默默列一个往期回顾吧:

1. [原创开源]emwin导航界面支持Awesome图标字体
2. [原创开源]emwin侧边导航框架支持按钮选中效果
3. [原创开源]emwin自定义控件1-卡片面板
4. [原创开源]emwin自定义控件2--环形进度条





taobao： V3s/F1C100s/F1C200s/D1-H/D1s/T113-S3/XR32/XR829/A523/A133/H133/V831/V851s/V853

离线

#4 2019-09-25 08:47:56

我思故我在
会员
注册时间： 2019-09-03
已发帖子： 244
积分： 243.5

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

2019-09-25_084703.png

太棒了， 我坐等下一个啊

离线

#5 2019-11-07 02:31:20

dave
会员
注册时间： 2018-08-25
已发帖子： 35
积分： 5

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

楼主V5啊，下来试试

离线

楼主 #6 2019-11-08 15:53:45

Jmhh247
会员
注册时间： 2018-12-21
已发帖子： 262
积分： 262

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

道友，早点睡吧，身体是**的本钱~

dave 说：

楼主V5啊，下来试试

离线

#7 2019-11-11 15:45:40

szchen2006
会员
注册时间： 2019-10-09
已发帖子： 216
积分： 166.5

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

顶！

离线

#8 2019-12-04 09:08:45

呵哈呵哈
会员
注册时间： 2019-11-23
已发帖子： 22
积分： 22

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

求续集 ^_^

离线

#10 2020-09-02 11:29:37

szchen2006
会员
注册时间： 2019-10-09
已发帖子： 216
积分： 166.5

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

学习了，楼主给力！

离线

页次： 1

分享链接 / 只看楼主

页脚

工信部备案：粤ICP备20025096号 Powered by FluxBB

感谢为中文互联网持续输出优质内容的各位老铁们。 QQ: 516333132, 微信(wechat): whycan_cn (哇酷网/挖坑网/填坑网) service@whycan.cn