【报名阶段需要填写的内容】

1. 参赛者姓名（必填项）：

月牙弯弯

2. 单位或学校名称（必填项）：

广西工学院

3. 当前职务或职称（必填项）：

工程师

4. 参赛作品的名字（必填项）：

创建自己的开源xlGUI

5. 简要陈述您的idea和作品（必填项）：

很多嵌入式工程师都选用ucGUI、enWin、miniGUI、OpenGUI作为产品开发的界面显示，但是大家可成是否想到自己去写一份属于自己的独特GUI代码？如果你也学过GDI，那么这些事情对你来说是驾轻就熟，如果没学过，那么就跟随我一起进入开发xlGUI的世界，与我分享创新的快乐。
作品采用stm32作为主MCU，驱动LCM12864进行显示。我们的任务是写自己的GUI，因此对其他外设资源要求不高。另能力仅属于中神级别，尚未炉炼至大神级别，因此我们先用单色LCM12864练手，此贴至此始终开源，供大家一起学习交流，把xlGUI丰富起来。

6. 拟用到的立创商城在售物料（必填项）：

1.STM32F030C8T6 商品编号：C23922
2.MC7805CD2TR4G 商品编号：C38743
3.ME1117A33B3G   商品编号：C94058
7. 拟用到的非立创商城物料或其它补充（必填项）：

1.lcm12864显示屏

2.12V电源

【作品正式发表（报名成功后进入设计阶段）需要填写的内容】

一、作品简介

例如，可以包括但不局限于以下内容：

1.作品的整机外观图片或焊接组装好的PCBA图片；

  

2.作品的研究背景、目的和功能、市场应用前景；

    ucGUI与emWin是众多嵌入式工程师编写显示界面的首选，但是随着版本的升级，这些GUI代码就显得臃肿，并且这些提供商都是国外公司，对于商用GUI提出了专利费的要求，这也是国内小型企业所不愿意接受的。基于此，我在研究了emWin与ucGUI代码后，结合自己多年C++代码编写功底，编写了简化版的GUI，该GUI试用于8位/16位/32位单片机，整体代码简单/易读，方便用户自行裁剪移植，并进行自定义控件/界面的美化编辑。现在参赛的版本仅仅编写了单色屏实例，尚未往彩色屏上拓展，但是用户熟悉源代码后，我相信改写驱动并移植扩展并不是难事，后期期待能够在大家的产品上使用，当然是免费的！！尽情改写代码畅快使用吧！

3.作品在创新性、趣味性、实用性甚至公益性方面，有哪些亮点可体现？

    作品全部使用C语言进行编写，通俗易懂，熟悉GDI界面编程的更加不会陌生。作品旨在提供小型GUI界面编程入门，并尽可能提供扩展接口，备注详细，方便各路嵌入式大神进行移植扩展维护，希望这版本GUI最终演化成能够替代ucGUI/emWin。

二、系统构架图

用流程图或思维导图等形式，描述您的作品的组成构架，即方案图。

1. 系统流程图：

 

讲解：

       1.xlGUI采用WM_Manage窗口管理器统一管理UI消息事件，用户交互消息（数据信息、按键事件等等）均通过WM_SendMessage发送至控件，由控件自行解析事件类型并响应消息；

       2.整个工程中GUI_GDI是公共绘图接口，其作用是方便控件或者用户对显示屏进行绘制显示；

       3.GUI_GDI统一调用GUI_Drive函数接口进行操作显存，本例程中，我们在GUI_GDI里面开辟了m_MemDev显示内存池，该内存池与显示屏显示像素一一对应，GUI_GDI所有函数默认直接操作显存池像素点。              显存刷新操作则统一由GUIDRV_DEVICE_API函数完成，用户不同类型的显示屏均可以通过编写GUI_Driver函数达到驱动显示目的。

2. 多层界面显示示意图

         

     讲解：

           多层界面显示比较简单，在显存池里面，我们先绘制蓝色界面，接着绘制浅蓝界面，最后绘制橘黄色界面，如此即可达到多层界面显示。xlGUI采用树形结构控件分布方式，所有控件都是从m_pDesktop界面派生，控件派生有同级派生与子控件派生。绘制时，由树形结构根节点开始调用WM_PAINT消息绘制，如此逐级绘制，最终达到多层界面显示效果。

3. 消息传递说明

    消息传递统一由 void WM_SendMessage(HWND hwnd ,UINT Msg, WPARAM wParam, LPARAM lParam)函数实现，默认hwnd为NULL时，则将消息发送给TopForm界面，否则查询控件是否有自定义消息处理函数，如有，则发送给UserWindowProc，否则发送给系统默认消息处理函数defWindowProc。

4. 图元的绘制接口及驱动

    xlGUI尚未成熟，现在我们撰写的图元接口函数主要有以下几类：

       

      如果有需要，大家可以进行扩展。

5. CWnd控件基类及接口

    xlGUI所有控件均基于CWnd_t类编写，CWnd_t类主要有以下几个标识;

     

    CWnd_t控件采用动态内存方式，结合链表进行树形链接，链接示意图如下：

    

   讲解：

          1.hwnd为控件窗体标识，parent为父级控件标识，hwnd控件的链接指针有pNext同级指针与pChild指针，这两者均可以自由链接扩展。

          2.rect窗体位置大小参数用于paint时裁剪显示绘制。

          3.defWindowProc函数是所有CWnd控件必须实现的接口。

         4.pClass为控件自定义接口指针，pData为控件自定义数据指针，例如WM_ListBox控件，其pClass接口为;

         

         pData数据为：

         

     我们现在扩展的CWnd接口函数主要有以下几个：

 

  通过CWnd接口函数统一分配内存，这么做的目的是为了更好地兼容OS，同时也易于管理代码。

 

三、硬件部分的描述

1.附上原理图&PCB实物图的图片或者源文件（官方建议大家尽量用源文件上传），如果是图片，请确保图片是清晰可辨的；

 

原理图文件下载：Sheet2.rar 

PCB文件下载：PCB1.rar 

2.用文字把该作品的实现原理、系统的工作过程大致讲解一下。

  硬件部分原理图比较简单，为了让大家能够容易轻松入门，我们采用STM32单片机直接驱动LCM12864液晶显示屏作为例程，实际项目是采用STM32F030C8T6单片机，它与原理图所绘制单片机引脚相兼容。整个作品如下：

  

硬件系统工作过程就不需要讲明了，大家都懂的，就这么简单！！

四、材料清单（BOM列表)

列出您这个作品所用到的主要器件（关键器件即可），比如单片机&ARM芯片、专用集成芯片(ASIC)、传感器、功能模块等。

如果所列出的芯片是来自我们立创商城上的，最好能写出该器件的商品编号或附上对应购买链接。

1.单片机型号 ：STM32F030C8T6      商品编号：C23922
2.5V稳压芯片 ：MC7805CD2TR4G 商品编号：C38743
3.3.3V稳压芯片：ME1117A33B3G   商品编号：C94058

4.lcm12864显示屏

5.USB接口

五、软件部分的描述（选填）

如果您的作品涉及到软件，请列出作品对应的软件工作流程图，及关键部分的例程、源码（如果您想开源的话请上传全部源码）。

所有控件均需要继承并编写消息入口函数：static int WindowProc(HWND hwnd ,UINT Msg, WPARAM wParam, LPARAM lParam)，并根据自定义消息进行相应函数编写。

1. 常用控件的编写实例

a).编写Form控件：

 

b)编写Button控件：

c)编写ListBox控件：

都自己看源代码吧，xlGUI就是这么简单，就是有效果：开源xlGUI.rar 

2. Font字体编写实例

  GUI调用Font字体，是通过以下结构体实现；

/*字体
*typedef struct
*{
*unsigned short Code; //机内码
*unsigned char *pData;  //点阵数据
*}Font_Info;
/*字库
*typedef struct
*{
*unsigned int Height;    
*unsigned int AsciiWidth;      //ASCII字体尺寸大小
*unsigned int NormalWidth; //普通字体尺寸大小
*unsigned char AsciiBytesPerLine;      //ASCII字体每行占用字节数
*unsigned char NormalBytesPerLine;  //普通字体每行占用字节数
*unsigned short Len;       //字库集合长度
*Font_Info *pCollection;   //字库集合
*}Font;
我们也已经用VS2008编写了一个生成软件，源代码也送于大家了，见源码的document文件夹。

3. 编写自己的界面

   代码：

/*初始化桌面*/
    WM_InitDesktop(WindowProc);
    
    Pen pen = {1};
    static int x0 = 20 ,y0 = 20 ,x1 ,y1 ,r = 15 ,t1 = 0,t2 = 100 ,nIndex = 0 ,bdelect = 0;
    static char data[] = "我们是abc";
    static int nIndex1 ,nIndex2 ,nIndex3;
    static Rectangle rect = {30 ,10,107 ,63};
    static char dataAray[3][10] = {
        {"我们"} ,
        {"abc"} ,
        {"bc"}
    };
    
    dataAray[0][1]='a';
    
    
    pFrameHwnd = WM_Form.Create(rect ,"abc" ,WM_FORM_BORDER_THIN ,NULL);
    
    /*ListBox*/
    const static char stringArray[5][10] = {
        "选项1" ,
        "选项2" ,
        "选项3" ,
        "选项4" ,
        "选项5"
    };
    Rectangle rectDropDown = {1 ,10 ,40 ,35};
    hwnd[0] = WM_ListBox.Create(rectDropDown ,stringArray[0] ,5 ,10 ,NULL);
    /*添加ListBox*/
    Point location = {2 ,2};
    WM_Form.AddControl(pFrameHwnd ,hwnd[0] ,location);
    
    /*创建Edit*/
    rect.x = 20;rect.y = 20;rect.width = 40;rect.height = 18;
    hwnd[1] = WM_Edit.Create(rect ,20 ,NULL);
    WM_Edit.SetText(hwnd[1] ,data);
    location.x = 50;location.y = 25;
    WM_Form.AddControl(pFrameHwnd ,hwnd[1] ,location);


    /*创建第二个Form*/
    rect.x = 40;rect.y = 20;rect.width = 80;rect.height = 40;
    pFrameHwnd1 = WM_Form.Create(rect ,"abc1" ,WM_FORM_BORDER_THIN ,NULL);
    /*创建DropDown*/
    rect.x = 0;rect.y = 0;rect.width = 50;rect.height = 16;
    hwnd[2] = WM_DropDown.Create(rect ,stringArray[0] ,3 ,10 ,NULL);
    location.x = 20;location.y = 1;
    WM_Form.AddControl(pFrameHwnd1 ,hwnd[2] ,location);

while(1)
    {
        WM_Process();
        /*按键扫描*/
        Keyboard_Scan(); 
}

显示效果：

 

备注：定义的Form可以上下显示位置切换，自定义大小，移动，全部功能与WINDOWS的SDI跟进。

六、作品演示

请上传您的作品的功能演示到腾讯视频，并编辑到本楼（或附上视频链接）。按要求上传视频可获得5分，具体详见活动规则。

原创干货！！演示视频：https://v.qq.com/x/page/o0541lff81f.html

七、总结

例如您在完成该作品过程中的一些体会、碰到的技术问题或调试经验、作品的未来规划，及对我们主办方的建议和意见等。

      作为一名嵌入式工程师，学习并使用GUI是非常必要的事情，GUI可以使得产品界面与众不同，并且使得客户体验人机操作更加灵活丰富多彩。从ucGUI入门，接着移步emGUI，后续执着于原创GUI，希望这份作品可以引起大家关注，收纳、引用。编写代码过程中遇到了一些不足问题，比如尚未编写GUI独立内存栈，尚未实例化彩色显示，尚未完善其他控件(滑动条、TAB控件、桌面图标等)，等等，这些剩余工作希望大家能够继续开发下去，使得xlGUI更加丰富，同时也鼓励大家把修改后的xlGUI分享出来，供大家一起学习，共进！

     原创作品，敢于开源，敢于接受测试考验，只有经过剔除各种BUG后，xlGUI也可以成为经典！！！

学习了，很不错的一个设计