01大俠-ucgui人機界面實驗

1、人機界面實驗（基于 uC/GUI + uC/OS-II）圖 1 本實驗在 ANTEK 戰(zhàn)艦開發(fā)板上的移植大俠 _ 2013/1/18創(chuàng)建者：寫面本實驗的目的在于學(xué)習(xí)人機交互界面方面的知識，所以對于功能性問題并不深究，比如支持長文件名、FLAC 格式的音樂等，其中的一些功能只是簡單的實現(xiàn)，并沒有花大功夫去改善。本設(shè)計的是界面設(shè)計。本設(shè)計的不同之處在于模仿了 Metro UI 風(fēng)格的界面（所以這種界面并非作啊，是微軟）。眾所周知，Metro UI 的一大特點就是極為流暢，從表者面上來看，這是由于 Metro 風(fēng)格的界面大多以單塊（磁貼）組成，而并非Android 和 IOS 的那種以全彩具有透明效

2、果的圖標作為界面元素的。用過單片機驅(qū)動過彩屏的人都知道，顯示一張比填充一塊顏色要慢得多，這是由于彩色數(shù)據(jù)量大，必須保存在外部器里，不能通過計算直接繪制出來。相反，單色的界面元素可以通過計算直接繪制出來，無需外部器，所以速度會很快。當然這并不是解釋為什么 MetroUI 比 Android 速度快（實際的原因這可能只是極小的一方面），但是對于學(xué)習(xí)的單片機界面就很不同了，上述原因可以說就是為什么本設(shè)計的流暢度很高的原因。單塊組成的界面（甚至位圖也采用單色或者 2 位色的），這樣整個界面不依賴制（uC/GUI 的作者實現(xiàn)的），大大提高了速度！素材，界面完全通過計算繪圖 2 Windows Phone

3、 8 UI 和本設(shè)計的 UI有了流暢度自然就會有滑動操作，沒錯！本設(shè)計的另一特色就是實現(xiàn)了滑動觸摸操作，滑動的目的在于增加一個界面的元素容納量，這樣就可以設(shè)計出較為復(fù)雜的菜單了。本實驗建立在 uC/GUI 和 uC/OS-II 之上（當然如果你不懂uC/GUI 或者 uC/OS-II 也無關(guān)緊要，可以在此刻選擇學(xué)下）。選擇 OS 是出于功能方面的需求（也不能太簡單），還有就是順便學(xué)下 uC/OS。GUI 是本設(shè)計的重點，開源的 GUI 中筆者選擇了 uC/GUI，主要是它提供了類似 winXP 的界面風(fēng)格，窗體、按鈕等各種控件都類似 windows 下的界面概念。所以，界面上的實現(xiàn)用uC/GU

4、I 決定了它不能完全模仿出 Metro UI，所以只能說是面長的像 Metro 而已 。版的，只是主界圖形界面uC/GUI 可能很多人聽，但真正使用過的可能并不算多。在此只本設(shè)計的功能介紹以及移植到你的設(shè)備上的方法。若你對其實現(xiàn)或者uC/GUI 感，可以參考源碼。好了，閑話不多說，進入正題。1. 整體說明程序啟動后將首先檢測MCU自身的flash區(qū)域查看是否是首次啟動，若是首次啟動，將執(zhí)行觸摸屏校準任務(wù)，否則不執(zhí)行。屏幕校準參數(shù)存在flash最后2KB的區(qū)域中。音樂部分將從根目錄MUSIC文件夾中獲取列表，瀏覽部分將從根目錄PHOTOS文件夾獲取列表，但目前只支持bmp格式的16位圖片，分辨率

5、也只支持240*320以下。文本瀏覽將從根目錄TEXT文件夾下獲取文本列表。所以想體驗?zāi)硞€功能請將相應(yīng)的文件放入正確的文件夾下即可。上下滑動界面即可操作界面的滑動，整個界面的操作不需要按鍵。功能描述音樂：可以MP3格式的音樂，其他格式的可能不支持。比特率請自測，目前還沒有發(fā)現(xiàn)不能播的。音樂界面可以顯示頻譜、靜態(tài)圖、和歌詞，但是歌詞部分代碼沒有寫，目前尚不支持。模式為循環(huán)，不支持快進快退，支持上功能，另外可以在“器設(shè)置”菜單下調(diào)一曲，下一曲功能，列表選擇節(jié)音量。圖 3 音樂界面和器設(shè)置2.2設(shè)備起始設(shè)計希望可以支持打開多個設(shè)備，并且可以互傳文件，但是，目前只支持SD卡的文件瀏覽，其他的代碼沒有寫

6、。2.3 文本文本功能可以做一款漂亮的閱讀器。單本設(shè)計只是簡單的實現(xiàn)，僅可以簡單地打開文本文檔，只能看到前1KB的內(nèi)容，其他的功能沒有加入。圖 4設(shè)備和文本瀏覽2.4 設(shè)置支持時間的設(shè)置，界面配色設(shè)置，在此項設(shè)置中，你可以靈活配置整個系統(tǒng)按鈕顏色和背景色。還可以執(zhí)行觸摸屏校準和查看系統(tǒng)信息。圖 5 時間設(shè)置和系統(tǒng)配色設(shè)置圖 6系統(tǒng)信息查看和觸摸屏校準功能2.5簡單的查看位圖圖像圖 7查看FFT暫不支持，設(shè)計時希望能夠?qū)D采樣波形進行FFT變換，顯示出結(jié)果波形。串口應(yīng)用支持USART1波特率設(shè)置，接收功能尚未添加，支持發(fā)送SD卡中的文件，但只支持根目錄下的文件發(fā)送，不支持目錄下的文件發(fā)送。2.

7、8示波器提供了一個demo程序演示。設(shè)計時希望提供簡單的示波器功能。圖 8 串口應(yīng)用和示波器如何將此程序移植到你的設(shè)備上首先，此程序的硬件要求：MCU：RAM64KB，ROM 512KB;LCD：240X320分辨率，提供觸摸屏接口。移植：3.2在此假設(shè)程序能夠在你的設(shè)備上運行，只需要修改底層接口。若是不同廠家(不是意法公司的)的MCU，移植時可能會復(fù)雜點。3.2.1修改LCD驅(qū)動程序中LCD_Driver.C文件就是LCD的的驅(qū)動程序。根據(jù)你的LCD引腳連接方式配置相應(yīng)的驅(qū)動。如果你的LCD是正點原子的，那么恭喜你，目前移植到戰(zhàn)艦開發(fā)板上的程序可以兼容大部分的LCD。你可能只需根據(jù)連接的引腳

8、修改FSMC部分的代碼即可。LCD驅(qū)動需要能夠提供LCD初始化函數(shù)，繪制點函數(shù)，點函數(shù)以及繪制橫豎線函數(shù)即可。然后，不要改動工程中的函數(shù)名，將你的功能相同的函數(shù)代碼替換掉原始代碼即可。程序運行時GUI會自動調(diào)用這些函數(shù)。事實上你需要替換的可能只有一個函數(shù)：void LCD_SetCursor(u16 X, u16 Y)這個函數(shù)的功能是設(shè)置LCD顯示的坐標。其實，若你對uC/GUI移植熟悉的話，上述工作將會變得簡單。3.2.2修改觸摸屏驅(qū)動LCD 移植完成之后，就能夠顯示主界面了，但是不支持觸摸，你需要修改你的觸摸屏驅(qū)動程序。修改的內(nèi)容主要在 GUI_X 下的 GUI_X_Touch.c 文件中

9、的兩個函數(shù)：GUI_TOUCH_X_MeasureX(void)和GUI_TOUCH_X_MeasureY(void) 這兩個函數(shù)的功能分別是獲取觸摸點的坐標，你只需將相應(yīng)的函數(shù)或代碼替換掉原始代碼即可。X，Y圖 9 觸控移植修改內(nèi)容示意最后程序還提供了觸摸屏校準功能，屏幕校準部分的程序修改了uC/GUI的源碼，此項功能并非 uC/GUI 本身所具備！移植時請注意保證工程的完整性！程序默認使用校準功能，但你可以選擇是否需要校準功能。如果你不需要校準（校準的結(jié)果可能相對不太準確，這取決于你的觸筆精確與否），那么你需要手動設(shè)置你的觸摸屏參數(shù)：在 uC/GUI_Config 目錄下的 GUITouc

10、hConf.h 文件中填上你的觸摸屏在四個屏幕邊緣輸出的數(shù)值即可。這需要你自己測得。圖 10 觸屏參數(shù)設(shè)置（代替校準）設(shè)置完參數(shù)之后，需要在 APP.C 文件中取消觸摸屏校準任務(wù)的創(chuàng)建。圖 11 需要注釋掉的內(nèi)容完成上面的操作，你將不使用觸摸屏校準功能，即使你在設(shè)置選項中使用了觸摸屏校準功能，也只是當前有效，重啟后校準操作將無效。另外，需明的是，如果在觸屏校準時，你的輸入是不合法的（觸摸位置和光標相差甚遠），那么保存的屏幕參數(shù)就是錯誤的，可能導(dǎo)致所有觸摸操作變得不可用了，這時，只有全片擦除重新設(shè)置了。所以，不要亂校準屏幕。以上兩點移植完成，你的設(shè)備應(yīng)該能夠體驗到本設(shè)計界面的操作感受。然后根據(jù)你的需要，修改SD卡等外設(shè)即可加入相應(yīng)的功能。本實驗的源碼已經(jīng)在開源發(fā)布，可以到開源，程序已經(jīng)移植到正點原子的 ANTEK 戰(zhàn)艦開發(fā)板，有戰(zhàn)艦板子的可以體驗一下。另外，鑒于正點原子的戰(zhàn)艦開發(fā)板設(shè)備眾多，你可