WhyCan Forum

人过留名,雁过留声,感谢各位朋友不离不弃地支持。 QQ: 516333132 (挖坑网/填坑网) admin@whycan.cn

您尚未登录。

#1 2019-09-21 13:12:05

Jmhh247
会员
注册时间: 2018-12-21
累计积分: 142

[原创开源]emwin侧边导航框架支持按钮选中效果

关键字: emwin, 侧边导航


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


##### 本坛首发。(为晕哥的靠海别墅添砖加瓦出点力~~~)


接上篇《[原创开源]emwin导航界面支持Awesome图标字体》,本篇主要介绍了侧边栏导航的通用程序框架。(由于只是程序框架,所以并不涉及界面美化,我知道丑,所以先说出来~)


---
- 侧边导航

在横屏设备中,侧边导航有着大量的应用,下面的截图来自最近沉迷的手游《QQ飞车》。(飞车一局2分钟左右,比王者玩起来轻松太多了,当然我主要是为看它的GUI设计,信吧~)

FluxBB bbcode 测试


---
- APP截图

下面是部分APP截图


主页面按钮选中边线,可以任意设四边的其中一边(演示,通常主页面不需要)

FluxBB bbcode 测试



侧边栏导航选中效果

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];
} BTN_USER_SKIN;


2. 结构体定义

static BTN_USER_SKIN BtnSkinData[] = {
    {ZL_BTN_CHKMODE_RIGHT, GUI_ORANGE, GUI_ORANGE, &awefont24, "\uf0f6", "stm8"},
    {ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf030", "stm32"},
    {ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf008", "mcu"},
    {ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf226", "linux"},
    {ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf144", "audio"},
    {ZL_BTN_CHKMODE_NO, GUI_ORANGE, GUI_DARKGRAY, &awefont24, "\uf2b5", NULL},
};


3. 选中效果代码

// ok
static button_set_check(WM_MESSAGE *pMsg)
{
    WM_HWIN hItem;
    BTN_USER_SKIN * pBtnData;

    // uncheck all
    for (int i = 0; i < GUI_COUNTOF(BtnSkinData); i++) {

        hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_1 + i);

        BUTTON_GetUserData(hItem, &pBtnData, sizeof(pBtnData));


        pBtnData->Check = 0;

        pBtnData->colorUnPress = GUI_DARKGRAY;
    }


    // check self
    BUTTON_GetUserData(pMsg->hWinSrc, &pBtnData, sizeof(pBtnData));

    // 增加选中线
    pBtnData->Check = ZL_BTN_CHKMODE_RIGHT;

    // 修改选中后颜色
    pBtnData->colorUnPress = GUI_ORANGE;


    // 无效化,触发重绘
    WM_InvalidateWindow(pMsg->hWin);
}


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

---

最后是工程源码:   emwin-uidemo6-cbprj.zip

离线

#2 2019-09-21 13:14:02

Jmhh247
会员
注册时间: 2018-12-21
累计积分: 142

Re: [原创开源]emwin侧边导航框架支持按钮选中效果

表面上为了节约服务器空间,实际上是为了节约上传时间,本帖子工程里面是不带字体文件的。

需要去上个帖子里面下载字体文件,并复制到工程目录内。

离线

#3 2019-09-21 13:43:19

晕哥
Administrator
注册时间: 2017-09-06
累计积分: 7,862

Re: [原创开源]emwin侧边导航框架支持按钮选中效果

感谢楼主分享! 跟帖学习中。


[原创开源]emwin导航界面支持Awesome图标字体: https://whycan.cn/t_2917.html

离线

#4 2019-09-21 14:15:05

我思故我在
会员
注册时间: 2019-09-03
累计积分: 90

Re: [原创开源]emwin侧边导航框架支持按钮选中效果

2019-09-21_141217.png

2019-09-21_141354.png

6666666  继续紧跟楼主步伐,

一开始发现 C:\Windows\Fonts\msyh.ttf 会引起错误, 然后挂了。

后来网上下载了一个 msyh.ttf 可以了。


但是楼主的第三个图片, 左侧导航那个界面怎么点进去呢?

离线

#5 2019-09-21 14:19:09

我思故我在
会员
注册时间: 2019-09-03
累计积分: 90

Re: [原创开源]emwin侧边导航框架支持按钮选中效果

原来上一个包里面已经有了 msyh.ttf, 直接拷过来就可以用了: emwin-uidemo5-cbprj.zip

离线

#6 2019-09-21 14:19:21

Jmhh247
会员
注册时间: 2018-12-21
累计积分: 142

Re: [原创开源]emwin侧边导航框架支持按钮选中效果

点击“我的照片”就进去了。(偷懒没说明,想着就六个图标,都点一遍就知道了。。。)

我思故我在 说:

https://whycan.cn/files/members/1947/2019-09-21_141217.png

https://whycan.cn/files/members/1947/2019-09-21_141354.png

6666666  继续紧跟楼主步伐,

一开始发现 C:\Windows\Fonts\msyh.ttf 会引起错误, 然后挂了。

后来网上下载了一个 msyh.ttf 可以了。


但是楼主的第三个图片, 左侧导航那个界面怎么点进去呢?

离线

#7 2019-09-21 14:21:30

我思故我在
会员
注册时间: 2019-09-03
累计积分: 90

Re: [原创开源]emwin侧边导航框架支持按钮选中效果

眼拙眼拙, 可以了, 谢谢楼主大神, 楼主辛苦了!

离线

#8 2019-09-21 14:27:12

Jmhh247
会员
注册时间: 2018-12-21
累计积分: 142

Re: [原创开源]emwin侧边导航框架支持按钮选中效果

多向晕哥学习!


晕哥 说:

感谢楼主分享! 跟帖学习中。


[原创开源]emwin导航界面支持Awesome图标字体: https://whycan.cn/t_2917.html

离线

#9 2019-09-26 16:09:35

Jmhh247
会员
注册时间: 2018-12-21
累计积分: 142

Re: [原创开源]emwin侧边导航框架支持按钮选中效果

测试一下: 使用emWin原生MULTIPAGE控件的侧边导航


(只是测试,比较简陋~)


---

- 动态展示

FluxBB bbcode 测试

---

- 核心代码

    // 0--你懂的
    hItem = WM_GetDialogItem(pMsg->hWin, ID_MULTIPAGE_0);


    // 1--设置标题栏在底部
    MULTIPAGE_SetAlign(hItem, MULTIPAGE_ALIGN_LEFT | MULTIPAGE_ALIGN_BOTTOM);


    // 2--旋转标题栏到左侧
    MULTIPAGE_SetRotation(hItem, MULTIPAGE_CF_ROTATE_CW);

    // 3--设置皮肤,目的实现标题栏文字水平
    MULTIPAGE_SetSkin(hItem, multipage_drawskin);
    // 4--皮肤实现函数,左侧边导航实现ok
    int multipage_drawskin(const WIDGET_ITEM_DRAW_INFO* pItem)
    {
        GUI_RECT rect;
        char acBuf[20];


        switch (pItem->Cmd)
        {
        case WIDGET_ITEM_DRAW_TEXT:

                MULTIPAGE_GetPageText(pItem->hWin, pItem->ItemIndex, acBuf, sizeof(acBuf));

                rect.x0 = pItem->x0;
                rect.x1 = pItem->x1;
                rect.y0 = pItem->y0;
                rect.y1 = pItem->y1;


                GUI_SetFont(MULTIPAGE_GetFont(pItem->hWin));
                GUI_SetTextMode(GUI_TM_TRANS);
                GUI_SetColor(MULTIPAGE_GetTextColor(pItem->hWin, pItem->ItemIndex));


                GUI_DispStringInRect(acBuf, &rect, GUI_TA_HCENTER | GUI_TA_VCENTER);


            break;

        default:
            {
                return MULTIPAGE_DrawSkinFlex(pItem);
            }
        }
        return 0;
    }

离线

#10 2019-09-26 16:18:52

晕哥
Administrator
注册时间: 2017-09-06
累计积分: 7,862

Re: [原创开源]emwin侧边导航框架支持按钮选中效果

请问TAB页选中是 键盘, 还是鼠标完成的?

离线

#11 2019-09-26 16:20:49

Jmhh247
会员
注册时间: 2018-12-21
累计积分: 142

Re: [原创开源]emwin侧边导航框架支持按钮选中效果

是鼠标,在电脑上操作的,codeblocks仿真

晕哥 说:

请问TAB页选中是 键盘, 还是鼠标完成的?

离线

#12 2019-09-26 16:24:17

晕哥
Administrator
注册时间: 2017-09-06
累计积分: 7,862

Re: [原创开源]emwin侧边导航框架支持按钮选中效果

优秀, 又可以借鉴了.

离线

#13 2019-09-26 16:25:46

Jmhh247
会员
注册时间: 2018-12-21
累计积分: 142

Re: [原创开源]emwin侧边导航框架支持按钮选中效果

别啊,晕哥

多提意见,我学习

晕哥 说:

优秀, 又可以借鉴了.

离线

页脚