GUI图形系统设计试验任务书

-.z实验一平面二维GUI图形系统编程试验一、实验目的及要求了解GUI图形系统如何编程.熟悉GUI图形系统平面绘图得方法。了解嵌入式应用程序操作硬件显示设备的根本原理。从人机交互的角度认识显示界面设计的原则和方法。进一步熟悉C程序逻辑的编辑、编译、连接和运行的过程。二、实验学时8学时三、实验任务1、熟悉VC＋＋6。0集成环境，并学会GUI图形系统模拟器的使用方法。2、根据GUI的操作方法，最后完成一个时钟界面的编程。四、试验步骤1、GUI图形系统原理1.1文件夹构造在官方发布的UCGUI的源码包当中，附有很多的例如，源码与例如都打包成一个VC工程，在这个工程中我们可以编译和运行UCGUI的例如，进展UCGUI的图形编程，非常方便，这个工程构造下：Application-------UCGUI应用程序目录。Config-------------UCGUI配制文件目录。GUI----------------UCGUI源码文件。Simulation--------模拟器库文件、模拟器头文件目录，主要有GUISim.lib这个提供模拟器的库文件。System-------------应用程序的接口调用主文件，即调用用户的MainTask函数的main函数。在这个官方提供的包中，我们进展UCGUI的图形编程时，大多都是将要写的程序源文件放加到Application目录中，其中应用程序中必不可少要提供的一个函数是MainTask()，好奇的朋友会觉察，我们程序并没创立窗口，为什么一运行就有窗口界面并有一个LCD显示屏显示出自己的UCGUI程序的运行效果出来，其实这些我们看不到的代码都是写在GUISim.lib这个库文件当中的，为了了解模拟器具体做了些什么，我通过反编译，复原了官方模拟器的源码，下面详细介绍模拟器的构成[以下均为官方模拟器采用的方法]。1.2模拟器完成那些工作GUISim.lib主要完成以下几件事，具体的模块划分将在文中后面描述：创立模拟器主窗口，这个窗体包括一些模拟器控制菜单，如翻开LOG记录/翻开调色板显示窗体/新建LCD模拟器窗体，以及暂停/继续模拟器。创立一个LCD模拟显示窗口并初始化其显示所需的各种数据构造，LCD窗口的大小由UCGUI中LCDConf.h中配制时指定(LCD_*SIZE/LCD_YSIZE)，及其它的诸如每个象素占用多少位(LCD_BITSPERPI*EL)，首先分配一块足够大的显存(4M)并初始化这块数据为0，每个象素占用不大于8位时模拟显示屏幕需要用到8位图，还必须初始化要用到的调色板。提供操作LCD模拟显示屏幕的几个根本图形函数，UCGUI是一个设计层次非常清晰的图形系统，它将GUI的底层图形功能作为一层向上层提供最根本的图形功能，只有这一层才与具体的硬件相关，这一层包括根本的画点函数/矩形填充函数/调色板初始化函数/颜色索引与RGB的转换函数。提供上层的LOG记录接口的实现，主要完成UCGUI中调试信息的输出，是否输出调试信息可以由UCGUI中的一个开关设置。开启一个新的线程，在此线程中调用System\Main.c中的main()函数，此函数中再调用MainTask()函数，这个函数即为我们在模拟器中编程必须提供的一个函数，在单任务情形下UCGUI的程序均写在MainTask函数当中，供模拟器开启的线程调用。这里必须分清楚：主线程创立模拟器主窗口及LCD模拟窗口；UCGUI图形应用程序以新开的另外一个线程运行，这个线程完毕时则UCGUI图形应用程序完毕。从LCD模拟器窗口消息函数当中接收KEY消息及MOUSE消息，并通过UCGUI中的KEY及MOUSE接口传送到UCGUI内部以驱动UCGUI事件消息LOOP。1.3LCD模拟显示器的实现原理1.上文中已经提到了UCGUI是一个设计层次清楚的图形系统，具体的图形功能分为一层；再细化图形层，还可细分为两层：层一是最底层的直接实现根本的画点函数/矩形填充函数/调色板初始化函数/颜色索引与RGB的转换函数，这一层与直接的硬件及调色板相关，由模拟器中的LCDSIM.c文件实现；层二是位于上述层一之上，提供更多更强图形功能的函数，如位图[1位/2位/4位/8位/16位]显示函数/水平垂直画线函数/矩形填充函数/画点函数，这些功能在\LCDDriver\LCDWin.c中完成，这一层当中的画点函数均以宏的形式提供，具体实现由上述更低的上述层一即模拟器的图形驱动来实现。在WIN环境下，实现这个模拟器比拟简单，要做的就是将GUI的结果显示给用户看，即做出一个LCD模拟显示器，将GUI画图的结果呈现在上面，GUI画图的结果在显存中，所以也就是将显存中的GUI画图数据用位图显示出来，处理这个位图显示时，可以分两种情况：第一种情况是单个象素点占8位及8位以下的情况，此时显示位图需要用到调色板(所以初始化时必须初始化调色板)，每个象素点简化处理为占用一个字节(8位以下实际情况下并非如此，实际是几位就占几位)，值表示的是该象素点在调色板中的颜色索引，此时将显存中的数据以8位位图来显示处理；第二种情况是单个象素点占用8位以上的情况，这种情况下，每个象素点简化处理为占用4个字节(实际情况占几位就是几位)，其值表示的是实际的该点的RGB颜色值，此时将显存中的数据以32位位图来显示处理。2.在LCD窗口中，将GUI画图的结果以上述位图形式画到LCD窗体当中并隔一定时间刷新显示，虽然这样做不一定在速度上非常准确实时，但根本上可以满足要求了，只要我们设定一个重画定时器，定时检测在显示中数据是否发生变化，有变化则刷新一次LCD窗口中显示的内容，可以满足要求。3.在解决了模拟LCD显示的问题后，还有要弄清的问题是，要显示器的一屏象素的存放位置，也即画图时所读写象素的内存，其实只需开一块足够大的内存来存放一屏LCD的象素，读写象素均在此块内存中，我们可以称此块内存为显存。如LCD宽*Size，高YSize，显存起始地址为pFi*，单个象素点占用8位或8位以下(此时一个象素占1字节)，则象素点(*，y)的在显存中的地址即为*+y*YSize+pFi*；如果是单个象素点占8位以上(此时一个象素占四字节)，则为(*+y*YSize)*4+pFi*。显存中象素是按行存放的，如果为了查看器(ucguiview)可以同样显示出独立运的模拟器程序的GUI画图结果，则这个显存必须以内存映象文件的方式来实现多个进程之间内存共享支持。4.关于一个象素用多少位来表示的问题，其实这个问题与几位位图是一个意思：位图中，8位及8位以下的均会使用一个调色板，原因：用调色板[实际为一维组，表项个数由位图位数决定]可以以颜色索引来表示出一个象素点的RGB颜色，调色板中每一个表项存的是该表项索引对应的RGB颜色值，在位图存储时只须要将该位图对应的调色板数组存起来，则存单个象素点时仅须要存其对应索引而不需要存4个字节的RGB颜色值，这样节约空间。位图中的数据为调色板中颜色的索引值，没有调色板是无法解析显示此位图的，所以8位及位以下位图对应的BMP文件会多出一个调色板内容；8位以上的位图，其位图数据即为RGB值或索引值(16位时)，16位/24位/32位单象素分别占用2/3/4个字节，这里必须注意区别的是，我们这里所说的位图一个象素所占用情况分析，是指位图存储为文件时的占用情况，其中也并没有提到具体一个象素点中R/G/B分别占用多少位，特别对于16位的情况下，RGB占用情况一般分5/6/5或5/5/5，此时R/G/B中可以表示的最大值索引值为64，此时无法表示出0*0~0*ff之间255种颜色，所以16位位图中的象素点数据还是直接的颜色索引值，并非直接RGB颜色值，但此时并不须要用调色板来辅助转化此索引值为RGB颜色值，而是通过一个转换算法，不过这样会对速度产生影响，没有使用调色板快，不采用调色板是因为需要太多调色板表项。[注意：关于位图文件，这时就不多介绍了，介绍大家下载这篇文章看一下，"BMP档案构造及平滑缩放.doc"，也可以自己通过WIN下面自带的画板来分析不同位数的位图，总之只要记住一点，要处理显示一个位图文件，必须知道位图文件大小及单个象素占用位数(即位图位数)，然后显示时就是取得每个象素点的RGB值，这个RGB颜色值是根据调色板来取得或者由索引根据一定的转换算法取得或者象素点数据本身就表示RGB值]。5.LCD_BITSPERPI*EL是UCGUI中定义的一个象素用多少位来表示的宏定义，则可以表示的颜色总数为1L<<LCD_BITSPERPI*EL种，但是RGB分别占多少位，则其可表示的具体哪些颜色是不同的，模拟器中以LCD_FI*EDPALETTE表示R/G/B(正常情况下没有进展R/B交换时)分别所占位数，主要有444(12)、555(15)、565(16)等，一个象素是由RGB三值来描述，RGB三值*围都是0*00-0*f；所以除非每种颜色都用(r|g|b)8位表示，否则不可能把0*00-0*f的值均表示到；另外，对于每一种可显示的颜色模拟器中均以索引值来表示，最根本的画象素的LCDSIM_SetPi*elInde*(int*，inty，intInde*)中用的是索引值，这个索引值可以通过一种转换转为RGB值。6.颜色索引值到RGB值的转换，索引转换成RGB的根本原理，这里我们不讲含调色板的情况------首先，对于RGB三值，由Fi*edPalette指定其每个位所占的位数，如为444则各4位.Fi*edPalette中指定能表示的RGB的*围分别为(R，G，B)1111/1111/1111，即16(R)/16(G)/16(B).则当索引值Inde*为444时，则是RGB各值索引最大的时候，由此即可分析，R/G/B三值要表示的颜色*围是0*00-0*ff，为了让有限的0-16的索引来表示0*00-0*ff这些颜色值，则当然只能是跳隔着来表示，拿R来说，最好是取值为(17*0，17*1，17*2，17*3，...17*15=248)，如此的话，才能差不多在有限的16个索引值下将0*ff种颜色最大程度的涵盖到(比拟平均)，但实际你可以自己控制索引到RGB颜色值的转换算法，但一定要合理，尽可能涵盖全面。同理，对于Fi*edPalette为555时，则R取值最好为(8*0，8*1，8*2，8*3，...8*31=243)...同理，对于Fi*edPalette为565时，则B取值最好为(4*0，4*1，4*2，4*3，...4*63=252)知道这一点，则对于以下函数的理解就非常容易...7.在LCD_BITSPERPI*EL小于等于8时，颜色索引值则无须通过运算来转换，因为它所能表示的颜色数不多于256种，此时我们就会用一个调色板来表示这不多于256种的颜色，取用也非常方便，通过调色板数组就可以取得索引对应的RGB值。对Fi*edPalette为111时，调色板中只有八种颜色，不须要256个选项，8种为(0*000000[0]，0*0000ff[1]，0*00ff00[2]，0*00ffff[3]，0*ff0000[4]，0*ff00ff[5]，0*ffff00[6]，0*ffffff[7])，即调色板索引为(0-7)其余对于Fi*edPalette为111时并未用于；初始化调色板时，要先调用LCD_L0_Inde*2Color(i)将Inde*转为RGB表示的颜色，再与黑白成比例综合.这样了就可适应所有实际使用调色板为2项，4项，8项，16项，256项的所有用到调色板的情况。另外还要提到的是在8位以下的灰度问题，灰度时，R/G/G三值相等，所以最多可以有256级灰度，其中二级灰度/四级灰度/十六级等，都是间隔着取256级灰度中的颜色值，取的方法是平均涵盖。以上六点是LCD模拟显示器中用到的几点核心要点，要理解LCD模拟显示器，就必然先理解以上几点。1.4实现LCD功能的几个根本函数[1]、LCDSIM_SetPi*elInde*--------画点.[2]、LCDSIM_FillRect--------矩形填充.[3]、Convert_Inde*16IntoInde*32----转换象素位数大于8位时的颜色索引为RGB颜色值。[4]、LCDSIM_GetPi*elColor----取点RGB颜色值[5]、LCDSIM_Inde*2Color------根据索引转换成RGB值。[6]、LCDSIM_GetPi*elInde*----获取指定屏幕坐标点的颜色索引[7]、LCDSIM_SetLUTEntry------设置调色板信息。在上面介如了模拟器的根本原理，差不多将核心的东西都说出来了，这时简要的说明一下模拟器的几个构成模块。emWin.c----------创立UCGUISim模器主窗口及LCD显示窗口，处理KEY、MOUSE消息传送，开启、暂停UCGUI程序，输出LOG等。LCDSIM.c--------实现模拟LCD显示屏。Branding.c--------显示。GUI_*_SIM.c---实现UCGUI的临界代码锁及实际的LOG输出及延时功能。具体可以能见源码，这里就不就代码作详细讲解了。2、先练习GUI图形系统模拟器的使用方法用，VC＋＋6。0翻开模拟器工程文件，然后编译，把下面的程序编译完运行测试，看效果。voidMyTask(void){intt=0;inti,YPos;intLCD*Size=LCD_GET_*SIZE();intLCDYSize=LCD_GET_YSIZE();//constGUI_BITMAP*pBitmap;GUI_Init();do{GUI_SetBkColor(GUI_RED);GUI_Clear();GUI_Delay(1000);GUI_SetBkColor(GUI_BLUE);GUI_Clear();GUI_Delay(1000);GUI_SetColor(GUI_WHITE);for(i=0;i<50;i+=10){GUI_DrawHLine(i,0,100);GUI_DispStringAt("Line",0,i);GUI_DispDecMin(i);}GUI_Delay(1000);/*此局部程序可以屏蔽看效果GUI_SetColor(GUI_GREEN);GUI_SetBkColor(0*ffffff);for(i=50;i<210;i++){intlen=(i<130)?i-50:210-i;GUI_DrawHLine(i,20,len+20);}GUI_Delay(1000);GUI_Clear();*/}while(1);}然后改变程序里面的局部参数设置或者屏蔽一局部程序，再看效果。把模拟器的效果看出来。根据试验任务的要求，本次试验重点用到的函数是文本显示、2维GUI图