查看: 7083  |  回复: 7
参赛作品《创建自己的开源xlGUI》
小梁电子
2
主题
118
回复
发表于2017-06-07 09:26:55 | 显示全部楼层
1# 电梯直达

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


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也可以成为经典!!!




立创小程
【官方工作人员】
7
主题
204
回复
发表于2017-08-26 12:44:47   |  显示全部楼层
8#
恭喜楼主获得了第二届立创商城电子制作节入围奖,虽然距离30强还有些小差距,30强&入围奖名单:http://club.szlcsc.com/article/details_8910_1.html
但到明年的第三届电子制作节,带上您更成熟的作品参赛时,也许就能一举夺冠了呢,现在,有众多优秀作品让你参考,投票:http://club.szlcsc.com/article/details_8913_1.html
不断前行

主题

回复
  • 温馨提示: 标题不合格、重复发帖、发布广告贴,将会被删除帖子或禁止发言。 详情请参考: 社区发帖规则
  • 您当前输入了 0 个文字。还可以输入 8000 个文字。 已添加复制上传图片功能,该功能目前仅支持chrome和火狐

禁言/删除

X
请选择禁言时长:
是否清除头像:
禁言/删除备注:
昵 称:
 
温馨提示:昵称只能设置一次,设置后无法修改。
只支持中文、英文和数字。

举报

X
请选择举报类型:
请输入详细内容:

顶部