GUI圖形系統(tǒng)設(shè)計試驗(yàn)任務(wù)書

-.z實(shí)驗(yàn)一平面二維GUI圖形系統(tǒng)編程試驗(yàn)一、實(shí)驗(yàn)?zāi)康募耙罅私釭UI圖形系統(tǒng)如何編程.熟悉GUI圖形系統(tǒng)平面繪圖得方法。了解嵌入式應(yīng)用程序操作硬件顯示設(shè)備的根本原理。從人機(jī)交互的角度認(rèn)識顯示界面設(shè)計的原則和方法。進(jìn)一步熟悉C程序邏輯的編輯、編譯、連接和運(yùn)行的過程。二、實(shí)驗(yàn)學(xué)時8學(xué)時三、實(shí)驗(yàn)任務(wù)1、熟悉VC＋＋6。0集成環(huán)境，并學(xué)會GUI圖形系統(tǒng)模擬器的使用方法。2、根據(jù)GUI的操作方法，最后完成一個時鐘界面的編程。四、試驗(yàn)步驟1、GUI圖形系統(tǒng)原理1.1文件夾構(gòu)造在官方發(fā)布的UCGUI的源碼包當(dāng)中，附有很多的例如，源碼與例如都打包成一個VC工程，在這個工程中我們可以編譯和運(yùn)行UCGUI的例如，進(jìn)展UCGUI的圖形編程，非常方便，這個工程構(gòu)造下：Application-------UCGUI應(yīng)用程序目錄。Config-------------UCGUI配制文件目錄。GUI----------------UCGUI源碼文件。Simulation--------模擬器庫文件、模擬器頭文件目錄，主要有GUISim.lib這個提供模擬器的庫文件。System-------------應(yīng)用程序的接口調(diào)用主文件，即調(diào)用用戶的MainTask函數(shù)的main函數(shù)。在這個官方提供的包中，我們進(jìn)展UCGUI的圖形編程時，大多都是將要寫的程序源文件放加到Application目錄中，其中應(yīng)用程序中必不可少要提供的一個函數(shù)是MainTask()，好奇的朋友會覺察，我們程序并沒創(chuàng)立窗口，為什么一運(yùn)行就有窗口界面并有一個LCD顯示屏顯示出自己的UCGUI程序的運(yùn)行效果出來，其實(shí)這些我們看不到的代碼都是寫在GUISim.lib這個庫文件當(dāng)中的，為了了解模擬器具體做了些什么，我通過反編譯，復(fù)原了官方模擬器的源碼，下面詳細(xì)介紹模擬器的構(gòu)成[以下均為官方模擬器采用的方法]。1.2模擬器完成那些工作GUISim.lib主要完成以下幾件事，具體的模塊劃分將在文中后面描述：創(chuàng)立模擬器主窗口，這個窗體包括一些模擬器控制菜單，如翻開LOG記錄/翻開調(diào)色板顯示窗體/新建LCD模擬器窗體，以及暫停/繼續(xù)模擬器。創(chuàng)立一個LCD模擬顯示窗口并初始化其顯示所需的各種數(shù)據(jù)構(gòu)造，LCD窗口的大小由UCGUI中LCDConf.h中配制時指定(LCD_*SIZE/LCD_YSIZE)，及其它的諸如每個象素占用多少位(LCD_BITSPERPI*EL)，首先分配一塊足夠大的顯存(4M)并初始化這塊數(shù)據(jù)為0，每個象素占用不大于8位時模擬顯示屏幕需要用到8位圖，還必須初始化要用到的調(diào)色板。提供操作LCD模擬顯示屏幕的幾個根本圖形函數(shù)，UCGUI是一個設(shè)計層次非常清晰的圖形系統(tǒng)，它將GUI的底層圖形功能作為一層向上層提供最根本的圖形功能，只有這一層才與具體的硬件相關(guān)，這一層包括根本的畫點(diǎn)函數(shù)/矩形填充函數(shù)/調(diào)色板初始化函數(shù)/顏色索引與RGB的轉(zhuǎn)換函數(shù)。提供上層的LOG記錄接口的實(shí)現(xiàn)，主要完成UCGUI中調(diào)試信息的輸出，是否輸出調(diào)試信息可以由UCGUI中的一個開關(guān)設(shè)置。開啟一個新的線程，在此線程中調(diào)用System\Main.c中的main()函數(shù)，此函數(shù)中再調(diào)用MainTask()函數(shù)，這個函數(shù)即為我們在模擬器中編程必須提供的一個函數(shù)，在單任務(wù)情形下UCGUI的程序均寫在MainTask函數(shù)當(dāng)中，供模擬器開啟的線程調(diào)用。這里必須分清楚：主線程創(chuàng)立模擬器主窗口及LCD模擬窗口；UCGUI圖形應(yīng)用程序以新開的另外一個線程運(yùn)行，這個線程完畢時則UCGUI圖形應(yīng)用程序完畢。從LCD模擬器窗口消息函數(shù)當(dāng)中接收KEY消息及MOUSE消息，并通過UCGUI中的KEY及MOUSE接口傳送到UCGUI內(nèi)部以驅(qū)動UCGUI事件消息LOOP。1.3LCD模擬顯示器的實(shí)現(xiàn)原理1.上文中已經(jīng)提到了UCGUI是一個設(shè)計層次清楚的圖形系統(tǒng)，具體的圖形功能分為一層；再細(xì)化圖形層，還可細(xì)分為兩層：層一是最底層的直接實(shí)現(xiàn)根本的畫點(diǎn)函數(shù)/矩形填充函數(shù)/調(diào)色板初始化函數(shù)/顏色索引與RGB的轉(zhuǎn)換函數(shù)，這一層與直接的硬件及調(diào)色板相關(guān)，由模擬器中的LCDSIM.c文件實(shí)現(xiàn)；層二是位于上述層一之上，提供更多更強(qiáng)圖形功能的函數(shù)，如位圖[1位/2位/4位/8位/16位]顯示函數(shù)/水平垂直畫線函數(shù)/矩形填充函數(shù)/畫點(diǎn)函數(shù)，這些功能在\LCDDriver\LCDWin.c中完成，這一層當(dāng)中的畫點(diǎn)函數(shù)均以宏的形式提供，具體實(shí)現(xiàn)由上述更低的上述層一即模擬器的圖形驅(qū)動來實(shí)現(xiàn)。在WIN環(huán)境下，實(shí)現(xiàn)這個模擬器比擬簡單，要做的就是將GUI的結(jié)果顯示給用戶看，即做出一個LCD模擬顯示器，將GUI畫圖的結(jié)果呈現(xiàn)在上面，GUI畫圖的結(jié)果在顯存中，所以也就是將顯存中的GUI畫圖數(shù)據(jù)用位圖顯示出來，處理這個位圖顯示時，可以分兩種情況：第一種情況是單個象素點(diǎn)占8位及8位以下的情況，此時顯示位圖需要用到調(diào)色板(所以初始化時必須初始化調(diào)色板)，每個象素點(diǎn)簡化處理為占用一個字節(jié)(8位以下實(shí)際情況下并非如此，實(shí)際是幾位就占幾位)，值表示的是該象素點(diǎn)在調(diào)色板中的顏色索引，此時將顯存中的數(shù)據(jù)以8位位圖來顯示處理；第二種情況是單個象素點(diǎn)占用8位以上的情況，這種情況下，每個象素點(diǎn)簡化處理為占用4個字節(jié)(實(shí)際情況占幾位就是幾位)，其值表示的是實(shí)際的該點(diǎn)的RGB顏色值，此時將顯存中的數(shù)據(jù)以32位位圖來顯示處理。2.在LCD窗口中，將GUI畫圖的結(jié)果以上述位圖形式畫到LCD窗體當(dāng)中并隔一定時間刷新顯示，雖然這樣做不一定在速度上非常準(zhǔn)確實(shí)時，但根本上可以滿足要求了，只要我們設(shè)定一個重畫定時器，定時檢測在顯示中數(shù)據(jù)是否發(fā)生變化，有變化則刷新一次LCD窗口中顯示的內(nèi)容，可以滿足要求。3.在解決了模擬LCD顯示的問題后，還有要弄清的問題是，要顯示器的一屏象素的存放位置，也即畫圖時所讀寫象素的內(nèi)存，其實(shí)只需開一塊足夠大的內(nèi)存來存放一屏LCD的象素，讀寫象素均在此塊內(nèi)存中，我們可以稱此塊內(nèi)存為顯存。如LCD寬*Size，高YSize，顯存起始地址為pFi*，單個象素點(diǎn)占用8位或8位以下(此時一個象素占1字節(jié))，則象素點(diǎn)(*，y)的在顯存中的地址即為*+y*YSize+pFi*；如果是單個象素點(diǎn)占8位以上(此時一個象素占四字節(jié))，則為(*+y*YSize)*4+pFi*。顯存中象素是按行存放的，如果為了查看器(ucguiview)可以同樣顯示出獨(dú)立運(yùn)的模擬器程序的GUI畫圖結(jié)果，則這個顯存必須以內(nèi)存映象文件的方式來實(shí)現(xiàn)多個進(jìn)程之間內(nèi)存共享支持。4.關(guān)于一個象素用多少位來表示的問題，其實(shí)這個問題與幾位位圖是一個意思：位圖中，8位及8位以下的均會使用一個調(diào)色板，原因：用調(diào)色板[實(shí)際為一維組，表項(xiàng)個數(shù)由位圖位數(shù)決定]可以以顏色索引來表示出一個象素點(diǎn)的RGB顏色，調(diào)色板中每一個表項(xiàng)存的是該表項(xiàng)索引對應(yīng)的RGB顏色值，在位圖存儲時只須要將該位圖對應(yīng)的調(diào)色板數(shù)組存起來，則存單個象素點(diǎn)時僅須要存其對應(yīng)索引而不需要存4個字節(jié)的RGB顏色值，這樣節(jié)約空間。位圖中的數(shù)據(jù)為調(diào)色板中顏色的索引值，沒有調(diào)色板是無法解析顯示此位圖的，所以8位及位以下位圖對應(yīng)的BMP文件會多出一個調(diào)色板內(nèi)容；8位以上的位圖，其位圖數(shù)據(jù)即為RGB值或索引值(16位時)，16位/24位/32位單象素分別占用2/3/4個字節(jié)，這里必須注意區(qū)別的是，我們這里所說的位圖一個象素所占用情況分析，是指位圖存儲為文件時的占用情況，其中也并沒有提到具體一個象素點(diǎn)中R/G/B分別占用多少位，特別對于16位的情況下，RGB占用情況一般分5/6/5或5/5/5，此時R/G/B中可以表示的最大值索引值為64，此時無法表示出0*0~0*ff之間255種顏色，所以16位位圖中的象素點(diǎn)數(shù)據(jù)還是直接的顏色索引值，并非直接RGB顏色值，但此時并不須要用調(diào)色板來輔助轉(zhuǎn)化此索引值為RGB顏色值，而是通過一個轉(zhuǎn)換算法，不過這樣會對速度產(chǎn)生影響，沒有使用調(diào)色板快，不采用調(diào)色板是因?yàn)樾枰嗾{(diào)色板表項(xiàng)。[注意：關(guān)于位圖文件，這時就不多介紹了，介紹大家下載這篇文章看一下，"BMP檔案構(gòu)造及平滑縮放.doc"，也可以自己通過WIN下面自帶的畫板來分析不同位數(shù)的位圖，總之只要記住一點(diǎn)，要處理顯示一個位圖文件，必須知道位圖文件大小及單個象素占用位數(shù)(即位圖位數(shù))，然后顯示時就是取得每個象素點(diǎn)的RGB值，這個RGB顏色值是根據(jù)調(diào)色板來取得或者由索引根據(jù)一定的轉(zhuǎn)換算法取得或者象素點(diǎn)數(shù)據(jù)本身就表示RGB值]。5.LCD_BITSPERPI*EL是UCGUI中定義的一個象素用多少位來表示的宏定義，則可以表示的顏色總數(shù)為1L<<LCD_BITSPERPI*EL種，但是RGB分別占多少位，則其可表示的具體哪些顏色是不同的，模擬器中以LCD_FI*EDPALETTE表示R/G/B(正常情況下沒有進(jìn)展R/B交換時)分別所占位數(shù)，主要有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*)中用的是索引值，這個索引值可以通過一種轉(zhuǎn)換轉(zhuǎn)為RGB值。6.顏色索引值到RGB值的轉(zhuǎn)換，索引轉(zhuǎn)換成RGB的根本原理，這里我們不講含調(diào)色板的情況------首先，對于RGB三值，由Fi*edPalette指定其每個位所占的位數(shù)，如為444則各4位.Fi*edPalette中指定能表示的RGB的*圍分別為(R，G，B)1111/1111/1111，即16(R)/16(G)/16(B).則當(dāng)索引值Inde*為444時，則是RGB各值索引最大的時候，由此即可分析，R/G/B三值要表示的顏色*圍是0*00-0*ff，為了讓有限的0-16的索引來表示0*00-0*ff這些顏色值，則當(dāng)然只能是跳隔著來表示，拿R來說，最好是取值為(17*0，17*1，17*2，17*3，...17*15=248)，如此的話，才能差不多在有限的16個索引值下將0*ff種顏色最大程度的涵蓋到(比擬平均)，但實(shí)際你可以自己控制索引到RGB顏色值的轉(zhuǎn)換算法，但一定要合理，盡可能涵蓋全面。同理，對于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)知道這一點(diǎn)，則對于以下函數(shù)的理解就非常容易...7.在LCD_BITSPERPI*EL小于等于8時，顏色索引值則無須通過運(yùn)算來轉(zhuǎn)換，因?yàn)樗鼙硎镜念伾珨?shù)不多于256種，此時我們就會用一個調(diào)色板來表示這不多于256種的顏色，取用也非常方便，通過調(diào)色板數(shù)組就可以取得索引對應(yīng)的RGB值。對Fi*edPalette為111時，調(diào)色板中只有八種顏色，不須要256個選項(xiàng)，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])，即調(diào)色板索引為(0-7)其余對于Fi*edPalette為111時并未用于；初始化調(diào)色板時，要先調(diào)用LCD_L0_Inde*2Color(i)將Inde*轉(zhuǎn)為RGB表示的顏色，再與黑白成比例綜合.這樣了就可適應(yīng)所有實(shí)際使用調(diào)色板為2項(xiàng)，4項(xiàng)，8項(xiàng)，16項(xiàng)，256項(xiàng)的所有用到調(diào)色板的情況。另外還要提到的是在8位以下的灰度問題，灰度時，R/G/G三值相等，所以最多可以有256級灰度，其中二級灰度/四級灰度/十六級等，都是間隔著取256級灰度中的顏色值，取的方法是平均涵蓋。以上六點(diǎn)是LCD模擬顯示器中用到的幾點(diǎn)核心要點(diǎn)，要理解LCD模擬顯示器，就必然先理解以上幾點(diǎn)。1.4實(shí)現(xiàn)LCD功能的幾個根本函數(shù)[1]、LCDSIM_SetPi*elInde*--------畫點(diǎn).[2]、LCDSIM_FillRect--------矩形填充.[3]、Convert_Inde*16IntoInde*32----轉(zhuǎn)換象素位數(shù)大于8位時的顏色索引為RGB顏色值。[4]、LCDSIM_GetPi*elColor----取點(diǎn)RGB顏色值[5]、LCDSIM_Inde*2Color------根據(jù)索引轉(zhuǎn)換成RGB值。[6]、LCDSIM_GetPi*elInde*----獲取指定屏幕坐標(biāo)點(diǎn)的顏色索引[7]、LCDSIM_SetLUTEntry------設(shè)置調(diào)色板信息。在上面介如了模擬器的根本原理，差不多將核心的東西都說出來了，這時簡要的說明一下模擬器的幾個構(gòu)成模塊。emWin.c----------創(chuàng)立UCGUISim模器主窗口及LCD顯示窗口，處理KEY、MOUSE消息傳送，開啟、暫停UCGUI程序，輸出LOG等。LCDSIM.c--------實(shí)現(xiàn)模擬LCD顯示屏。Branding.c--------顯示。GUI_*_SIM.c---實(shí)現(xiàn)UCGUI的臨界代碼鎖及實(shí)際的LOG輸出及延時功能。具體可以能見源碼，這里就不就代碼作詳細(xì)講解了。2、先練習(xí)GUI圖形系統(tǒng)模擬器的使用方法用，VC＋＋6。0翻開模擬器工程文件，然后編譯，把下面的程序編譯完運(yùn)行測試，看效果。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);}然后改變程序里面的局部參數(shù)設(shè)置或者屏蔽一局部程序，再看效果。把模擬器的效果看出來。根據(jù)試驗(yàn)任務(wù)的要求，本次試驗(yàn)重點(diǎn)用到的函數(shù)是文本顯示、2維GUI圖