前言

平时开发项目，常常需要自己进行界面设计，简单的项目可以自己使用简单的绘画功能即可，但继续复杂界面的设计时就需要使用到嵌入式GUI。而emWin就是一款主流的嵌入式GUI，接下来我们学习使用emWin开发项目。

概述

emWin的移植过程以及底层驱动的优化可以参考网上教程，我们直接学习使用emWin开发。本次先学习Window控件和FrameWin控件的使用。

首先，我们先了解一些基本概念：

什么是对话框？

答：简单来说，emWin的对话框是以Window和FrameWin为载体的一个交互窗口。我们通过在对话框上面添加各种控件实现人机交互的功能。

什么是输入焦点？

输入焦点其实就是当前用户使用的控件或窗口，可以接收输入设备的消息。开发中我们需要分清哪些控件具备输入焦点。

怎么创建对话框？

创建对话框其实就是创建Window控件或者FrameWin控件，推荐使用GUI_CreateDialogBox函数创建。因为虽然emWin官方文档也有其他的创建方式，但是从本人使用的经验来说，还是使用GUI_CreateDialogBox函数结合GUIBuilder工具创建比较好。

实验分析

（一）使用GUIBuilder设计布局

上图即为预设的基本效果图，保存可以得到输出的C文件，参考C文件即可创建简单的FrameWin（Window控件同理）。

(二)代码修改

首先，添加窗口资源代码。

WM_HWIN hWinFirst;//窗口句柄

//定义控件ID
#define ID_FRAMEWIN_First            (GUI_ID_USER + 0x0A)
#define ID_W1stBUTTON_0              (GUI_ID_USER + 0x00)
#define ID_W1stBUTTON_1              (GUI_ID_USER + 0x01)
#define ID_W1stBUTTON_2              (GUI_ID_USER + 0x02)

static const GUI_WIDGET_CREATE_INFO    _aDialogCreate_WFirst[] = {
    { FRAMEWIN_CreateIndirect, "Framewin", ID_FRAMEWIN_First, 0, 0, 800, 480, 0, 0x64, 0 },
    { BUTTON_CreateIndirect, "Button", ID_W1stBUTTON_0, 39, 365, 200, 50, 0, 0x0, 0 },
    { BUTTON_CreateIndirect, "Button", ID_W1stBUTTON_1, 299, 365, 200, 50, 0, 0x0, 0 },
    { BUTTON_CreateIndirect, "Button", ID_W1stBUTTON_2, 559, 365, 200, 50, 0, 0x0, 0 },
};

然后，编写窗口回调函数。

static void _cbWFirst(WM_MESSAGE * pMsg)
{
    WM_HWIN hItem;
    int Id;
    int NCode;
    
    switch(pMsg->MsgId)
    {
        case WM_INIT_DIALOG://窗口初始化时发送该消息给窗口管理器
            hItem = pMsg->hWin;
            FRAMEWIN_SetTitleVis(hItem, 0);//隐藏标题栏

            //初始化BUTTON
            hItem = WM_GetDialogItem(pMsg->hWin, ID_W1stBUTTON_0);//获取Button控件句柄
            BUTTON_SetFont(hItem, GUI_FONT_20B_ASCII);
            BUTTON_SetTextAlign(hItem, GUI_TA_HCENTER | GUI_TA_VCENTER);
            BUTTON_SetTextColor(hItem, BUTTON_CI_UNPRESSED, GUI_WHITE);
            BUTTON_SetTextColor(hItem, BUTTON_CI_PRESSED, GUI_YELLOW);
            BUTTON_SetText(hItem, "PatientList");
            //设置BUTTON皮肤，后续篇章讲解
            BUTTON_SetText(hItem, _DrawSkin_BUTTON);

            //其余两个Button控件同样初始化即可
        break;

        case WM_NOTIFY_PARENT:
            Id = WM_GetId(pMsg->hWinSrc);
            NCode = pMsg->Data.v;
            switch(Id)
            {
                case ID_W1stBUTTON_0:
                    switch(NCode)
                    {
                        case WM_NOTIFYCATION_RELEASD://释放按键时通知
                        //这里可以添加按键释放时触发的动作代码
                        break;
                    }
                break;
                //其余两个按键同样修改代码即可，不同的通知类型可以查看官方应用手册
            }
        break;

        case WM_PAINT:
            GUI_SetBkColor(GUI_BLACK);//设置背景颜色
            GUI_Clear();//清屏
            /* 自己绘制静态底图 */
            GUI_SetColor(GUI_DARKGRAY);
            GUI_SetPenSize(2);
            GUI_DrawLine(269, 340, 269, 480);
            GUI_DrawLine(269, 340, 799, 340);
        break;

        default:
            WM_DefaultProc(pMsg);
        break;
    }
}

最后，注册控件即可。

//在MainTask函数中注册
hWinFirst = GUI_CreateDialogBox(_aDialogCreate_WFirst, GUI_COUNTOF(_aDialogCreate_WFirst), _cbWFirst, WM_HBWIN, 0, 0);

总结

这就完成了最简单的窗口创建。

emWin学习（1）————窗口控件Window和框架窗口控件FrameWin

前言

概述

实验分析

（一）使用GUIBuilder设计布局

(二)代码修改

总结

猜你喜欢