結(jié)構(gòu)化的平板電視OSD界面設(shè)計(jì)

日益華麗的平板電視OSD開發(fā)占據(jù)了固件工程師大量的時(shí)間，采用結(jié)構(gòu)化的OSD設(shè)計(jì)可以縮短開發(fā)時(shí)間，提高代碼質(zhì)量。本文在介紹OSD的實(shí)現(xiàn)方法、OSD類型、OSD的UI基本元素及定義基礎(chǔ)上，詳細(xì)分析了使用結(jié)構(gòu)化的OSD UI處理機(jī)制實(shí)現(xiàn)OSD開發(fā)的方法和思路。

隨著具有各種豐富功能的平板電視不斷上市，日益華麗的OSD界面設(shè)計(jì)占據(jù)了固件開發(fā)工程師大量的開發(fā)時(shí)間。不少的固件工程師不斷地重復(fù)著同樣的工作：為每一個(gè)機(jī)種編寫著同樣的OSD文字、圖形及人機(jī)交互的界面(UI)互動(dòng)代碼。在UI及OSD較復(fù)雜的系統(tǒng)里，該部分的代碼量高達(dá)30-60%，同時(shí)，調(diào)試不健壯的UI代碼也將占用大量的系統(tǒng)調(diào)試時(shí)間。

平板電視的UI主要具有建立在機(jī)器上的按鍵和紅外遙控器等輸入以及OSD、蜂鳴器等輸出，OSD的主要作用是提供一個(gè)直觀的圖形界面，幫助用戶完成各種對(duì)機(jī)器的控制和信息獲知等任務(wù)。圖1、2呈現(xiàn)了用戶可能經(jīng)?？吹降腛SD外觀。隨著系統(tǒng)處理能力的提高，現(xiàn)在的OSD甚至可以提供內(nèi)建游戲、記事本和萬年歷等各種附件功能。本文主要討論的是OSD固件的設(shè)計(jì)及與之相關(guān)的UI控制，并試圖提供一個(gè)關(guān)于平板電視中UI的定義和解決方案，縮短固件工程師在UI OSD界面構(gòu)造上的時(shí)間。本文中的概念及方案同樣適用于其它具有點(diǎn)陣顯示控制任務(wù)的場(chǎng)合。

OSD的主要實(shí)現(xiàn)方法和類型

目前有兩種主要的OSD實(shí)現(xiàn)方法：外部OSD發(fā)生器與視頻處理器間的疊加合成；視頻處理器內(nèi)部支持OSD，直接在視頻緩存內(nèi)部疊加OSD信息。

外部OSD發(fā)生器與視頻處理器間的疊加合成的實(shí)現(xiàn)原理是：由一個(gè)MCU內(nèi)建的字符發(fā)生器及顯示緩存，利用快速消隱(Fast-Blank)信號(hào)切換電視的畫面和OSD顯示內(nèi)容，使OSD的字符等內(nèi)容疊加在最終的顯示畫面上，在OSD和顯示畫面疊加處理過程中，通過調(diào)整兩者之間的比例可以實(shí)現(xiàn)OSD的半透明(Blending)效果。同時(shí)，對(duì)OSD信號(hào)中的紅綠藍(lán)信號(hào)進(jìn)行重新編碼，可以得到不同的OSD顏色效果。

另外一種實(shí)現(xiàn)方法是視頻處理器內(nèi)部支持OSD，直接在視頻緩存內(nèi)部疊加OSD信息。這一類視頻處理通常具有外部存儲(chǔ)器或內(nèi)部少量的行緩存，同時(shí)具有OSD發(fā)生器，OSD的合成和控制直接在視頻緩存內(nèi)完成，同樣具有上述的半透明和顏色控制功能。

OSD具有字符型(Font-Based)和位圖型(Bit-Map)兩種類型。

字符型OSD(圖1屬于字符型)：為了節(jié)約顯示緩存，早期及低成本的解決方案中使用字符型OSD發(fā)生器，其原理是將OSD中顯示內(nèi)容按照特定的格式(1218、1216等)進(jìn)行分割成塊，例如數(shù)字0-9、字母a-z、常用的亮度、對(duì)比度符號(hào)等，并把這些內(nèi)容固化在ROM或Flash中，在顯示緩存中僅存放對(duì)應(yīng)的索引號(hào)，這樣的“字典”結(jié)構(gòu)可以大幅度減少顯示緩存的需求。

同時(shí)，為了提供對(duì)每個(gè)字符的顏色等屬性的控制，通常還具有一個(gè)與顯示緩存一樣大小的屬性緩存，其屬性(前景顏色、背景顏色、閃爍等)對(duì)整個(gè)字符中的每個(gè)像素有效。為了彌補(bǔ)這種方式不能為每個(gè)像素指定顏色的缺點(diǎn)，OSD發(fā)生器的設(shè)計(jì)者提供了采用多個(gè)顯示緩存合并的方式呈現(xiàn)多色字符的方案。其原理是每個(gè)顯示緩存確定一種顏色方案，當(dāng)兩個(gè)甚至更多個(gè)顯示緩存合并以后就可以“拼湊”出超過兩種顏色的多色字符。

字符型OSD優(yōu)點(diǎn)是可以使用OSD內(nèi)部較少的顯示緩存，并且MCU只需要指定顯示內(nèi)容的索引即可顯示對(duì)應(yīng)OSD信息，可以在比較低速的MCU上實(shí)現(xiàn)。但正是由于上述的顯示信息和顏色編碼方式不夠直觀，會(huì)給字符型OSD的固件開發(fā)帶來一些麻煩。通常液晶顯示器、低成本的平板電視和CRT傳統(tǒng)電視上均使用這一類OSD，目前仍占據(jù)著市場(chǎng)主流地位。

相較字符型OSD，位圖OSD(圖2屬于位圖型)的處理原理較直觀和簡(jiǎn)單：通過對(duì)最終顯示內(nèi)容上特定區(qū)域的每個(gè)像素點(diǎn)進(jìn)行改變，直接將OSD信息疊加到最終的顯示畫面上，其按像素進(jìn)行控制的方式可以保證具有多色及足夠的表現(xiàn)能力。位圖OSD發(fā)生器通常內(nèi)建在視頻處理器內(nèi)部，并共享使用其主顯示緩存。也有獨(dú)立在視頻處理器之外的專業(yè)OSD位圖發(fā)生器，如美信的MAX4455，通常這一類芯片需要外部SDRAM作為顯示緩存。

位圖OSD的顯示效果理論上可以做到非常完美的程度，可以提供類似Windows中具有立體感的各種物件，如具有陰影的按鈕、顏色豐富的圖形和文字等，其缺點(diǎn)是必須具有足夠的OSD顯示緩存，以及按像素進(jìn)行處理而對(duì)MCU帶來的速度要求。通常在大尺寸的高端平板電視和專業(yè)顯示器上會(huì)使用這一類OSD。隨著技術(shù)的不斷發(fā)展和存儲(chǔ)器的成本的不斷下降，未來的OSD應(yīng)該都是位圖型的。

OSD的UI基本元素及定義

顯示OSD的目的是需要向用戶表達(dá)信息，那么哪些信息需要表達(dá)呢？通常包括提示、警告信息、控制參數(shù)的數(shù)值顯示等。盡管無論其顯示形狀是什么，其本質(zhì)都是一些字符或像素點(diǎn)的組合，但是對(duì)于這些信息的分類和屬性定義有助于固件開發(fā)人員的統(tǒng)一編碼和代碼處理。本文嘗試分類，分析這些元素并在下面給出統(tǒng)一的固件處理方法。

1. OSD基本概念

UI語言：指OSD內(nèi)容中的文字部分使用的語言類型。
UI模式：指OSD內(nèi)容適用的環(huán)境，例如不同的信號(hào)源(電視、DVD、PC)帶來的模式變化，其作用主要區(qū)分不同的環(huán)境下OSD的不同表現(xiàn)。
UI場(chǎng)景：特定語言模式下及較多信息頁面情況下，當(dāng)前OSD適用的特定頁面。
UI事件：用戶利用輸入設(shè)備向UI系統(tǒng)提供的操作命令。
UI動(dòng)作表：指在特定UI場(chǎng)景中，對(duì)于UI輸入的命令進(jìn)行對(duì)應(yīng)處理的索引表。
OSD畫布：指整個(gè)OSD呈現(xiàn)的區(qū)域，通常為一個(gè)矩形區(qū)域。
OSD位置：通常指在OSD畫布中，相較左上角原點(diǎn)的相對(duì)位置。
OSD物件：呈現(xiàn)在畫布上，表達(dá)特定信息，具有特定屬性的像素組合。

2. OSD包含的基本元素

OSD信息中主要包括以下一些基本元素(可能本文的提法未必準(zhǔn)確，希望讀者可以體會(huì)到其意思)：區(qū)域、標(biāo)簽、圖標(biāo)、文字、進(jìn)度條、動(dòng)畫、數(shù)字、可選圖標(biāo)、導(dǎo)航信息等。下面分別給出這些元素的定義、作用、屬性和響應(yīng)事件。

a. 區(qū)域
定義：在OSD畫布中，以特定的屬性(顏色、閃爍、大小等)標(biāo)示出的矩形或任意形狀的區(qū)域。
作用：對(duì)OSD內(nèi)容進(jìn)行分類或標(biāo)示，例如標(biāo)題區(qū)域，內(nèi)容區(qū)域等。
屬性：位置、顏色、閃爍特性等。
響應(yīng)事件：作為固定的信息內(nèi)容，通常對(duì)UI輸入的控制無響應(yīng)。

b. 標(biāo)簽(Label)
定義：固定不變的文字信息，可以是一行或多行。
作用：對(duì)OSD內(nèi)容進(jìn)行必要的文字說明。

屬性：位置、顏色、閃爍特性、語言類別、大小寫、對(duì)齊方式等。
響應(yīng)事件：作為固定的信息內(nèi)容，通常對(duì)UI輸入的控制無響應(yīng)。

c. 圖標(biāo)(Icon)
定義：以特定的字符或像素組合構(gòu)成形狀，以表達(dá)可識(shí)別的信息。
作用：對(duì)OSD內(nèi)容進(jìn)行形象的提示，如播放、禁止等特定符號(hào)。
屬性：位置、顏色、閃爍特性等。
響應(yīng)事件：作為固定的信息內(nèi)容，通常對(duì)UI輸入的控制無響應(yīng)。

d. 文字(Text)
定義：相較標(biāo)簽，其同樣為文字信息，但是可以隨用戶的操作而改變。
作用：以隨選擇而改變的文字內(nèi)容，提供關(guān)于用戶選擇的文字提示。
屬性：位置、顏色、語言類別、大小寫、對(duì)齊方式等。
響應(yīng)事件：用戶的選擇，通常為上一個(gè)或下一個(gè)選擇。

e. 進(jìn)度條(Bar)
定義：矩形條狀的物件，隨其數(shù)值的不同而改變相關(guān)特性，未來也許會(huì)有其它形狀的此類物件，如油量表狀等，但它們都具有同樣的屬性。
作用：以形象的圖形界面，給出關(guān)于某項(xiàng)數(shù)值的圖形說明。
屬性：位置、顏色、上下限、當(dāng)前值、類型、大小、是否顯示數(shù)值等。
響應(yīng)事件：數(shù)值的改變。

f. 動(dòng)畫(Movie)
定義：隨時(shí)間而改變的圖標(biāo)組合。
作用：以活動(dòng)的圖形使OSD界面更生動(dòng)，提高信息的表達(dá)效果。
屬性：位置、顏色、具有的圖標(biāo)數(shù)目、變化速度等。
響應(yīng)事件：作為固定的信息內(nèi)容，通常對(duì)UI輸入的控制無響應(yīng)。

g. 數(shù)字
定義：隨有關(guān)參數(shù)或用戶選擇改變而改變的數(shù)字組合，可以為十進(jìn)制或其它進(jìn)制，亦可以是百分比或其它數(shù)值形式。
作用：直觀地給出關(guān)于某項(xiàng)參數(shù)的數(shù)值量化指示，通常與進(jìn)度條聯(lián)合使用，以達(dá)到直觀與形象的雙重效果。
屬性：位置、顏色、上下限、當(dāng)前值、進(jìn)制選擇等。
響應(yīng)事件：對(duì)應(yīng)參數(shù)的數(shù)值的改變。

h. 可選圖標(biāo)(Option)
定義：隨有關(guān)參數(shù)或用戶選擇改變而改變的圖標(biāo)組合。
作用：用戶選擇的圖形化表達(dá)，例如選擇、未選擇、開啟、關(guān)閉等信息的圖形化表達(dá)。
屬性：位置、顏色、閃爍、選擇數(shù)目等。
響應(yīng)事件：對(duì)應(yīng)參數(shù)的選擇改變。

i. 導(dǎo)航信息
定義：呈現(xiàn)在OSD畫布上，對(duì)當(dāng)前UI場(chǎng)景中的用戶操作進(jìn)行提示的信息。
作用：指引用戶操作相關(guān)按鍵，進(jìn)行OSD內(nèi)容操作。通常具有可用按鍵的指示以及必要的文字說明，通常作為OSD提示信息的完善和人機(jī)界面友好化的措施。
屬性：位置、顏色、閃爍等。
響應(yīng)事件：UI場(chǎng)景、按鍵的改變。

需要說明的是，上述的物件并不能涵蓋現(xiàn)在和將來所有的OSD中可能出現(xiàn)的內(nèi)容，但卻是OSD的基本的和主要的內(nèi)容，通過對(duì)它們進(jìn)行分類和進(jìn)行統(tǒng)一的處理，可以幫我們完成通常意義上的OSD的80-90%的工作。

使用基于對(duì)象的方法處理OSD UI

傳統(tǒng)的處理手法是將特定場(chǎng)景下的OSD物件逐一用代碼“畫”出來，在遇到特定的UI事件時(shí)，再利用一堆if else判斷出特定場(chǎng)景和操作對(duì)象，并做相應(yīng)的OSD處理。在OSD較簡(jiǎn)單的情況下，其不失為一個(gè)可行的方法。但在遇到OSD場(chǎng)景和模式較多的情況下，這個(gè)if else的結(jié)構(gòu)會(huì)變得很大，而且更為重要的是極易出錯(cuò)以及維護(hù)成本提高。

隨著OSD越來越復(fù)雜以及代碼工作量的不斷提高，人們意識(shí)到我們需要花費(fèi)太多時(shí)間在這些“表面文章”上，而真正重要的應(yīng)用層和設(shè)備驅(qū)動(dòng)層的開發(fā)時(shí)間會(huì)受到影響，進(jìn)而影響新產(chǎn)品的開發(fā)進(jìn)度。固件工程師也不愿不斷重復(fù)編寫同樣代碼來滿足不斷改變客戶的特定OSD需要。

筆者早期也曾遭遇同樣的困擾，面對(duì)部門里工程師毫無效率地做著同樣的事情，感覺到開發(fā)一個(gè)統(tǒng)一的OSD UI平臺(tái)的重要性?，F(xiàn)在對(duì)于上述OSD UI進(jìn)行的分析，可以讓我們開發(fā)出獨(dú)立于特定數(shù)字視頻處理器平臺(tái)和OSD發(fā)生機(jī)制的硬件環(huán)境的獨(dú)立統(tǒng)一開發(fā)工具。

事實(shí)上，平板顯示芯片方案的重要提供者如Genesis、Pixelworks等為了加速其產(chǎn)品的開發(fā)和應(yīng)用速度，已經(jīng)提供了具有這樣功能的基于Windows的固件開發(fā)工具。本文試圖探討這一類工具的運(yùn)作原理，或許讀者基于本文可以開發(fā)出自己所需要的工具，當(dāng)然其應(yīng)用具有更廣泛的代表性。

筆者在最近的液晶電視開發(fā)案例中使用了這樣一個(gè)結(jié)構(gòu)：

typedef struct
{
byte mode；//UI場(chǎng)景適用的模式
byte lan; // UI語言
byte scene; // UI場(chǎng)景
byte last; // UI上個(gè)場(chǎng)景
byte next; // UI下個(gè)場(chǎng)景
byte sel; //UI 當(dāng)前場(chǎng)景對(duì)物件的選擇
byte sel_total; //UI當(dāng)前場(chǎng)景中選擇項(xiàng)的總數(shù)
byte *info; // UI的物件指針
byte pos_v; // 物件垂直方向位置
byte pos_h; // 物件水平方向的位置
byte col_f; // 物件的前景顏色
byte col_b; // 物件的背景顏色
byte att; // 物件的其它顯示屬性
ACT_Struct (*act)[]; // 該物件的響應(yīng)動(dòng)作表指針
byte *note; // 導(dǎo)航說明信息
}UI_Struct;

這樣的結(jié)構(gòu)是為了描述一個(gè)OSD物件的基本屬性及規(guī)定其對(duì)于動(dòng)作的相應(yīng)表現(xiàn)。利用這樣的結(jié)構(gòu)將場(chǎng)景中的每個(gè)物件描述清楚，則一個(gè)特定UI場(chǎng)景的OSD內(nèi)容就可以被確定，而同時(shí)被確定的還有其上一個(gè)場(chǎng)景、下一個(gè)場(chǎng)景及動(dòng)作響應(yīng)特性等所有UI特性。這樣的信息構(gòu)成一個(gè)數(shù)組，由一個(gè)統(tǒng)一的“解釋平臺(tái)”對(duì)其進(jìn)行翻譯和描述，從而將整個(gè)UI構(gòu)造完成。

這有點(diǎn)類似解釋語言，而我們所需要做的就是編寫這些“腳本”，對(duì)物件進(jìn)行OSD“繪制”的工作由“解釋”平臺(tái)去調(diào)用外部的OSD發(fā)生器的驅(qū)動(dòng)代碼來完成。當(dāng)需要改變OSD發(fā)生器或基于不同平面顯示控制器平臺(tái)時(shí)，只需要更新少量OSD部分驅(qū)動(dòng)代碼，從而實(shí)現(xiàn)UI系統(tǒng)“平臺(tái)無關(guān)化”。

我們需要構(gòu)造相關(guān)物件的數(shù)據(jù)結(jié)構(gòu)，以便“解釋”平臺(tái)識(shí)別物件類型并進(jìn)行正確的繪制。例如下面的結(jié)構(gòu)完成了一個(gè)語言選項(xiàng)(文字物件)的描述：

void UI_ChangeLan()
{
UI_Lan=VAL_Lan;
ReDraw();
}
code byte *STR_LAN_CHN[]=
{
“中文”,
“英文”,
“法文”,
“西班牙文”,
};
code word TXT_LAN_CHN[]=
{
//文字物件的標(biāo)志 對(duì)應(yīng)的文字資源 對(duì)應(yīng)的變量 具有的可選項(xiàng)目總數(shù) 當(dāng)該物件被改變時(shí)的執(zhí)行動(dòng)作
RES_TXT,STR_LAN_CHN,VAL_LAN,sizeof(STR_LAN_CHN)/sizeof(byte *),UI_ChangeLan
};

第一個(gè)數(shù)據(jù)RES_TXT向“解釋”平臺(tái)表明這個(gè)物件是文字，具有文字的數(shù)據(jù)結(jié)構(gòu)。“解釋”平臺(tái)依據(jù)這一點(diǎn)，按照事先約定的結(jié)構(gòu)讀取后繼數(shù)據(jù)，第二個(gè)數(shù)據(jù)表明其文字內(nèi)容的來源是STR_LAN_CHN，第三個(gè)數(shù)據(jù)表明需要根據(jù)哪個(gè)變量來決定獲取文字資源中第幾個(gè)數(shù)據(jù)，而第四個(gè)數(shù)據(jù)表明，該物件具有多少個(gè)可供選擇的文字內(nèi)容，最后一個(gè)數(shù)據(jù)規(guī)定了當(dāng)該物件發(fā)生改變時(shí)需要做什么。這樣，“解釋”平臺(tái)獲得了足夠的信息去“繪制”這樣一個(gè)語言選項(xiàng)，并可以在發(fā)生改變時(shí)去自動(dòng)執(zhí)行UI_ChangeLan()這個(gè)函數(shù)，幫助程序員去完成語言改變所需要進(jìn)行的操作。

事實(shí)上，所有這些結(jié)構(gòu)完全可以進(jìn)行定制，只要與“解釋”平臺(tái)保持一致就可以了。

利用這樣一個(gè)OSD驅(qū)動(dòng)結(jié)構(gòu)，一旦“解釋”平臺(tái)構(gòu)建完成，OSD開發(fā)人員需要做的就變成利用平臺(tái)支持的各種物件積木，進(jìn)行擺放、堆積來構(gòu)造OSD圖形表現(xiàn)，而不必要重復(fù)編寫實(shí)現(xiàn)代碼和關(guān)心與特定硬件平臺(tái)相關(guān)的驅(qū)動(dòng)代碼細(xì)節(jié)。

更進(jìn)一步，甚至連這些積木的擺放和設(shè)計(jì)，我們可以設(shè)計(jì)一個(gè)直觀的Windows應(yīng)用程序來完成諸如圖形-->字符元件生成器、OSD圖形界面設(shè)計(jì)，以及最終的資源文件和UI資料數(shù)組的生成，并與底層的“解釋”平臺(tái)進(jìn)行聯(lián)接編譯，得到最后的MCU代碼。

這樣的OSD界面開發(fā)環(huán)境會(huì)擺脫抽象、枯燥和低效率，變得直觀、有趣，甚至可以由客戶自己設(shè)計(jì)相關(guān)的OSD的界面，而完全不需要編程經(jīng)驗(yàn)和對(duì)OSD底層驅(qū)動(dòng)的了解。

需要指出的是，相較傳統(tǒng)的if else，結(jié)構(gòu)化的OSD UI處理機(jī)制會(huì)帶來最終程序體積的增加和運(yùn)行速度的變慢，但是這些缺點(diǎn)在MCU內(nèi)部程序空間不斷增加和支持的時(shí)鐘頻率不斷提高的情況下是微不足道的。所以，如果讀者面對(duì)的案例是對(duì)MCU處理速度和程序存儲(chǔ)器受限的情況下，可能并不適用這樣的方案。以筆者開發(fā)的液晶電視項(xiàng)目為例，在支持所有電視功能、圖文、麗音及游戲、日歷等附加功能的情況下，基于MCS51的多任務(wù)系統(tǒng)的總程序小于32KB，而基于Myson MTV230的OSD+MCU處理器的運(yùn)行速度非?？?，并不會(huì)感到任何延遲。而通常支持位圖OSD的開發(fā)環(huán)境使用的是X86或更快速的ARM等處理器，并具有大于2MB的程序存儲(chǔ)空間。

本文小結(jié)

當(dāng)固件開發(fā)工程師面對(duì)越來越復(fù)雜的應(yīng)用時(shí)，面向?qū)ο?、結(jié)構(gòu)化的編程方式會(huì)變得越來越重要，其直接的好處是編程效率的提高和維護(hù)成本的下降，同時(shí)對(duì)于程序的健壯性也有幫助。本文提供的方法的優(yōu)越性已經(jīng)在實(shí)際的開發(fā)案例中得到檢驗(yàn)，這樣完成同樣的OSD界面，筆者可以縮短到原來的1/4的時(shí)間，并提高了代碼的質(zhì)量。