你知道嵌入式屏幕色彩開發(fā)技術(shù)？

? ? ? 還記得此前的“藍(lán)黑白金裙”之爭(zhēng)嗎？這個(gè)分歧源于我們的眼中用來分辨顏色的錐狀細(xì)胞的差異，而人機(jī)界面中“藍(lán)黑白金裙”之爭(zhēng)同樣存在，這是什么原因？本文為你揭秘，并從色彩角度為大家介紹人機(jī)交互界面的設(shè)計(jì)。

我們這樣看著世界

人們都知道，把大象放進(jìn)冰箱需要三步，而人眼把世界放進(jìn)大腦也可簡(jiǎn)單分為三步：

1．眼球感應(yīng)到像（傳感器采集并轉(zhuǎn)換成數(shù)字信號(hào)）

2．轉(zhuǎn)成神經(jīng)信號(hào)傳到大腦（通過通訊系統(tǒng)將信號(hào)傳到處理器）

3．大腦處理并存放（處理器轉(zhuǎn)化成屏幕可顯示與存儲(chǔ)的格式）

圖1 人類視覺系統(tǒng)

所以，人眼開始看到的圖像格式由光信號(hào)轉(zhuǎn)化成了神經(jīng)中的電信號(hào)與化學(xué)信號(hào)，傳播格式已經(jīng)不同了，同樣，機(jī)器也是要轉(zhuǎn)換的。

一、大腦里的格式——RGB圖像格式

首先，屏幕是由一個(gè)個(gè)像素點(diǎn)組成的，里面絢麗的色彩也就只是出自像素點(diǎn)上紅（Red）、綠（Green）、藍(lán)（Blue）三原色而已，這種色彩的表示方法稱為RGB色彩空間表示（它也是多媒體計(jì)算機(jī)技術(shù)中用得最多的一種色彩空間表示方法），如下圖所示：

圖2 三基色圖

根據(jù)三基色原理，任意一種色光F都可以用不同分量的R、G、B三色相加混合而成。如公式1．1所示。

公式 1．1 三基色原理

白光是多種光的混合，所以當(dāng)三基色系數(shù)最大時(shí)為白色，零時(shí)為黑色，而介于兩者間的就是世間百色了。

每個(gè)像素點(diǎn)就像一個(gè)顏料盒，盒子越大，裝的色彩種類越多，則這個(gè)像素點(diǎn)能表達(dá)的色彩越豐富，而這個(gè)盒子的大小在電腦里叫做存儲(chǔ)空間，調(diào)色的方式則是改變?nèi)?，下面的表越往下，所需要的存?chǔ)空間越大，但每個(gè)像素點(diǎn)能描述的顏色越準(zhǔn)確，屏幕的畫面也就越逼真。

RGB常見的格式如表1所示，不用詳細(xì)看，留著以后查就好。

表1 RGB常見格式

二、眼球上的格式——YUV圖像格式

我們存儲(chǔ)的時(shí)候?yàn)榱斯?jié)約空間、方便打包就用了亮度信號(hào)Y和兩個(gè)色差信號(hào)R－Y（紅色－亮度，即U）、B－Y（藍(lán)色－亮度，即V）分別進(jìn)行編碼，然后發(fā)出去，到了顯示終端再轉(zhuǎn)換回RGB格式，這種色彩的表示方法就是所謂的YUV色彩空間表示。

這時(shí)候也許你會(huì)問“咦，G（綠色）哪去了”，其實(shí)兩種顏色加亮度也能通過算法大致表達(dá)出原本的顏色，所以就算是融合進(jìn)R和B里了。

與RGB視頻信號(hào)傳輸相比，YUV最大的優(yōu)點(diǎn)在于只需占用極少的帶寬（RGB要求三個(gè)獨(dú)立的視頻信號(hào)同時(shí)傳輸），兩種格式對(duì)帶寬的占用量噸位差異如下圖一般，RGB占用的帶寬要大得多。

圖3 RGB格式帶寬比YUV高

難道只為了省點(diǎn)帶寬所以我們就義無反顧選擇了YUV格式嗎？當(dāng)然不是！雖然低帶寬很關(guān)鍵，但是色彩也至關(guān)重要。

采用YUV色彩空間更重要在于它的亮度信號(hào)Y和色度信號(hào)U、V是分離的，這樣分開的好處就是不但可以避免相互干擾，還可以降低色度的采樣率而不會(huì)對(duì)圖像質(zhì)量影響太大。如果U、V為零，就沒有顏色，變成黑白電視了。當(dāng)然，Y也是一個(gè)重要參數(shù)，其實(shí)平時(shí)我們看一個(gè)顏色深淺是很不一樣的，而深淺取決于亮度Y，Y的影響如下圖示。

圖4 明度變化圖

下面先介紹一種YUV格式，大家觸類旁通。

YUV 4：2：2：

“4”代表存放流碼中有4個(gè)Y；

“2”表示存放流碼中有2個(gè)U色差值；

第二個(gè)“2”表示存放流碼中有2個(gè)V色差值。

下面的四個(gè)像素為：［Y0 U0 V0］ ［Y1 U1 V1］ ［Y2 U2 V2］ ［Y3 U3 V3］

存放的碼流為：Y0 U0 Y1 V1 Y2 U2 Y3 V3

映射出像素點(diǎn)為：［Y0 U0 V1］ ［Y1 U0 V1］ ［Y2 U2 V3］ ［Y3 U2 V3］

圖5 YUV采樣網(wǎng)絡(luò)

上圖是YUV4：2：2的采樣網(wǎng)絡(luò)，燈光樣例（Y）用叉表示，色度樣例（U、V）則用圈表示。每個(gè)點(diǎn)都有叉，而圈只有一半，所以這就是為什么上面的存放流碼四個(gè)Y齊全，而U、V只有一半。

三、交互界面的開發(fā)

圖像的開發(fā)主要是為了人機(jī)交互界面的美觀度，目前人機(jī)交互界面的設(shè)計(jì)emWin與QT。使用QT／E往往需要在微控制器上運(yùn)行嵌入式操作系統(tǒng)，因此對(duì)于MCU的性能有一定的要求。除此之外，若之前未接觸過QT／E，運(yùn)用起來將花費(fèi)一定的時(shí)間成本。相比之下，emWin更適合于快速、精簡(jiǎn)UI的開發(fā)，但界面交互效果與美觀度較低。

圖6 emWin＿Demo

ZLG致遠(yuǎn)電子歷時(shí)12年開發(fā)的下一代嵌入式開發(fā)平臺(tái)AWorks平臺(tái)，內(nèi)部集成GUI編程框架——AWUI，AWUI目前支持Qt和emWin，用Designer編輯界面，用C＋＋開發(fā)ViewModel／Model，讓開發(fā)者無需學(xué)習(xí)Qt和emWin的API最終的應(yīng)用程序可以在Qt和emWin（要確保emWin上支持該控件）上運(yùn)行。

基于AWUI，ZLG計(jì)劃年內(nèi)推出適用范圍更廣、更好用的AWTK。AWTK內(nèi)部包含豐富的GUI組件，突破性的開創(chuàng)“拖拽式”GUI編程模式，大幅提升GUI編程的高效性。搭配良好的設(shè)計(jì)架構(gòu)，兼具emWin低內(nèi)存流暢運(yùn)行與Qt高質(zhì)量界面效果等特點(diǎn)，保證交互界面的流暢性與運(yùn)行穩(wěn)定性，使嵌入式UI開發(fā)將會(huì)以組件的方式集成于AWorks平臺(tái)中，可在該平臺(tái)下快速實(shí)現(xiàn)交互界面開發(fā)。

圖7 AWUI發(fā)展計(jì)劃

圖8 AWorks中的UI框架

ZLG致遠(yuǎn)電子M1052跨界核心板支持AWorks嵌入式開發(fā)平臺(tái)，既具備MPU的強(qiáng)勁處理性能，又兼顧MCU微控制器的簡(jiǎn)單易用與實(shí)時(shí)性優(yōu)勢(shì)！預(yù)裝AWorks 實(shí)時(shí)操作系統(tǒng)，面向智能硬件與工業(yè)物聯(lián)網(wǎng)方向應(yīng)用設(shè)計(jì)。

M335x－T工業(yè)核心板