互聯網電視機頂盒屏幕編排系統的設計

導語：互聯網電視機頂盒屏幕編排系統的設計一文來源于網友上傳，不代表本站觀點，若需要原創文章可咨詢客服老師，歡迎參考。

摘要：近年來，互聯網電視得到了蓬勃發展。為了方便互聯網電視的運營以及提供豐富多樣的內容，需要對互聯網電視機頂盒屏幕進行編排。目前市面上并沒有成熟的互聯網電視機頂盒屏幕編排系統。本文介紹了一款基于web的互聯網電視機頂盒屏幕編排系統，對系統的架構設計及實現進行了詳細描述，最終高效地解決了互聯網電視機頂盒屏幕的編排問題。同時，本系統所使用的設計方法對其它類似的編排系統也具有參考意義。

關鍵詞：軟件工程；屏幕編排；互聯網電視；機頂盒

0引言

傳統電視在家庭中擁有核心地位，不僅僅是客廳中顯示和娛樂的中心，而且是家庭用戶使用時間最多的終端。隨著寬帶移動網絡不斷普及和智能機頂盒的快速發展，面向電視終端的互聯網電視（NTV，NetworkTelevision）業務取得了蓬勃發展，互聯網電視已經成為互聯網的新入口?；ヂ摼W電視是一種利用寬帶有線電視網，集互聯網、多媒體、通訊等多種技術于一體，向家庭互聯網電視用戶提供包括數字電視在內的多種交互式服務的嶄新技術。對于互聯網電視，用戶不僅僅是“看”，而且在“用”，通過安裝各種應用軟件，電視可以提供面向家庭日常生活的應用服務，包括信息服務、娛樂、購物、繳費、理財、安防等日常生活的方方面面。互聯網電視目前一般有兩種模式，一種是“智能機頂盒+電視機”，即智能機頂盒（STB，SetTopBox）和電視機是兩個獨立設備，機頂盒通過VGA或HDMI接口連接到電視機，電視機只作為顯示終端；另外一種是“互聯網電視一體機”，即電視機被集成了智能機頂盒，這兩種模式雖然形式上不同，但是本質上沒有區別[1]。互聯網電視機頂盒展現給用戶的屏幕多為卡片布局的圖形用戶界面（GUI，GraphicalUserInterface），卡片布局的內容可以是多種屏幕展現元素，包括視頻、游戲、應用等。定制互聯網電視機頂盒屏幕需要對屏幕布局、屏幕內容等進行編排。屏幕編排系統可以采用基于web或者基于桌面應用的形式[2-7]?？紤]到基于web形式的系統在跨平臺及可維護性等方面上的優勢，本文介紹的互聯網電視機頂盒屏幕編排系統采用了基于web的形式。

1屏幕編排系統的設計與實現

1.1系統架構

本文介紹的互聯網電視機頂盒屏幕編排系統包括數據庫模塊、數據解析模塊、數據對象模塊、視圖模塊及控制器模塊等5大模塊。數據解析模塊中包含校驗子模塊，視圖模塊中包含渲染子模塊及編排子模塊。數據對象模塊、視圖模塊和控制器模塊共同構成了MVC模式的三大組成部分。數據庫數據解析模塊數據對象模塊（Model）視圖模塊（View）控制器模塊（Controller）視圖選擇用戶請求方法調用事件校驗模塊渲染模塊編排模塊圖1互聯網電視機頂盒屏幕編排系統總體架構圖機頂盒屏幕由多種屏幕對象組合而成，包括主屏、Logo、快捷入口、分屏、屏幕元素、導航等。在web頁面中，這些屏幕對象可以抽象為JavaScript的對象，這些JavaScript對象的屬性及接口定義等結合在一起構成了數據對象模塊。數據對象模塊中存儲的JavaScript對象所代表的屏幕需要由視圖模塊在web頁面上渲染出來，同時還需要支持用戶對屏幕對象進行操作，包括修改屏幕對象的位置、修改屏幕布局等，這些工作分別由渲染模塊和編排模塊完成?？刂破髂K溝通了視圖模塊和數據對象模塊，將視圖模塊中的用戶操作傳遞到數據對象模塊，保證數據對象模塊中數據的狀態與視圖模塊中屏幕對象的展現效果保持同步。數據對象模塊中存儲的屏幕對象數據在web頁面斷開連接后將丟失，而數據庫模塊則負責對這些數據進行永久存儲。數據對象模塊中存儲的數據為JavaScript的對象，而數據庫中存儲的數據則是JSON格式的字符串等，在這兩種不同格式的數據進行相互轉換則由數據解析模塊完成。數據解析模塊在解析數據的過程中，需要保證所解析數據的完整性和正確性，這就是校驗模塊所要完成的工作?；ヂ摼W電視機頂盒屏幕編排系統的總體架構圖如圖1所示。

1.1.1數據庫

在實際系統的運營中，屏幕編排系統編排屏幕的過程不是一蹴而就的，可能會經歷多次編排。同時，實際系統還應該支持對屏幕進行管理及復用屏幕數據。這就需要有一個與屏幕編排系統相對應的屏幕編排后臺管理系統，用于對屏幕進行管理及存儲屏幕數據。由于本文僅討論屏幕編排系統，故此將屏幕編排后臺管理系統與數據庫抽象為了數據庫。

1.1.2數據解析模塊

數據解析模塊用于對接數據庫及數據對象模塊。在本系統的設計中，數據庫中存儲的數據為代表屏幕信息的JSON格式數據，而數據對象模塊中存儲的則是JavaScript對象數據。屏幕編排完成后，需要經過數據解析模塊將數據對象模塊中的JavaScript對象數據解析為JSON格式數據，然后存入數據庫。而在多次編排屏幕的場景下，數據庫中存儲的JSON格式數據經過數據解析模塊，構造數據對象模塊中的JavaScript對象，然后數據對象模塊通知視圖模塊渲染屏幕。

1.1.3校驗模塊

校驗模塊是數據解析模塊的子模塊。為了保證數據解析模塊的正常工作，需要確保數據庫及數據對象模塊中數據的正確性和完整性，這就是校驗模塊需要完成的工作。在由數據庫中存儲的JSON格式數據構建數據對象模塊中JavaScript對象數據的過程中，校驗模塊對數據庫中存儲的JSON格式數據進行校驗。在由數據對象模塊中的JavaScript對象數據解析為適合數據庫存儲的JSON格式數據的過程中，校驗模塊對數據對象模塊中的JavaScript對象數據進行校驗。校驗分為合法性校驗和完整性校驗這兩種校驗形式，合法性校驗對應于數據的正確性，完整性校驗對應于數據的完整性。合法性校驗必須全部校驗通過才能繼續進行數據解析。完整性校驗不通過則會產生警告，告警用戶當前屏幕數據是不完整的，需要繼續編排完成，但不影響數據解析。合法性校驗優先于完整性校驗，合法性校驗不通過則無需對數據進行完整性校驗，而會中斷數據解析過程。

1.1.4數據對象模塊

機頂盒屏幕可以抽象為多種屏幕對象的組合，包括主屏、Logo、快捷入口、分屏、屏幕元素、導航等多種屏幕對象。屏幕對象之間存在著包含關系，如主屏對象包含Logo對象、快捷入口對象、多個分屏對象以及導航對象，而分屏對象又包含多個屏幕元素對象等。數據對象模塊中定義了不同屏幕對象的內容和接口，負責構建屏幕對象存儲當前屏幕數據，同時提55《軟件》雜志歡迎推薦投稿：cosoft@163.com供與其它模塊的通信接口。通過數據對象模塊提供的接口方法，控制器模塊可以改變屏幕對象的狀態，視圖模塊可以查詢屏幕對象的狀態，數據解析模塊可以傳入解析后的屏幕數據并構建屏幕對象。通過數據對象模塊中定義的事件機制，當屏幕對象狀態變化的時候，數據對象模塊會通知視圖模塊調用渲染模塊更新視圖。

1.1.5視圖模塊

視圖模塊是本系統的表示部分，用于展現數據對象模塊中屏幕對象數據的內容。視圖模塊提供預覽模式和編排模式兩種不同的模式。預覽模式下，視圖模塊提供屏幕效果的預覽。編排模式下，視圖模塊向用戶提供一個友好的編排界面，用戶可以通過所見即所得（WYSIWYG，whatyouseeiswhatyouget）的方式方便地編排機頂盒屏幕。視圖模塊的編排界面包括工具區和編輯區，工具區中包含了多種屏幕對象圖標和輔助按鈕，編輯區中實時地展示了當前所編排屏幕的效果。用戶可以通過拖拽的方式操作屏幕對象圖標，將不同的屏幕對象添加到編輯區中。不同的輔助按鈕提供了不同的功能，用戶可以通過點擊按鈕來設置不同的屏幕屬性。視圖模塊接收用戶的編排操作和屬性設置操作，對這些操作進行數據驗證，發送操作請求到控制器模塊。視圖模塊可以向數據對象模塊查詢屏幕對象狀態，獲取屏幕對象狀態信息。通過視圖模塊提供的方法，控制器模塊可以選擇不同的視圖。視圖模塊監聽數據對象模塊的屏幕對象數據改變事件，調用渲染模塊更新視圖。

1.1.6渲染模塊

渲染模塊是視圖模塊的子模塊。數據庫以及數據對象模塊中存儲的屏幕對象信息都是一些冰冷的數據，這些數據對于用戶來說是不直觀的。渲染模塊根據屏幕對象信息渲染視圖，讓用戶能直觀地了解數據所代表的意義。根據不同的適用場景，渲染模塊可以渲染整個視圖或者部分視圖。渲染模塊有三個適用場景。系統初次加載時，此時還不存在視圖，渲染模塊根據數據對象模塊傳遞過來的屏幕對象信息渲染生成整個視圖。當屏幕對象狀態變化時，數據對象模塊通知視圖模塊屏幕對象狀態變化信息，渲染模根據這些信息更新相應部分視圖，保持視圖和屏幕對象狀態的同步。在編排屏幕的過程中，編排操作首先影響的是視圖，渲染模塊根據編排操作更新相應部分視圖，然后發送操作請求到控制器模塊，控制器模塊通知數據對象模塊屏幕對象狀態變化信息，數據對象模塊存儲屏幕對象狀態變化，保持視圖和屏幕對象狀態的同步。

1.1.7編排模塊

編排模塊是視圖模塊的子模塊。編排模塊提供了鼠標拖拽的操作形式，用戶僅僅使用鼠標就能完成全部編排操作。通過編排模塊，用戶可以完成添加屏幕對象、刪除屏幕對象、修改屏幕對象大小、修改屏幕對象位置等操作。編排模塊的實現符合所見即所得的原則，用戶在進行編排操作的時候，可以即時地看到當前編排的效果，保證最終編排所得效果與所需效果一致。

1.1.8控制器模塊

控制器模塊負責處理用戶與web之間的交互?？刂破髂K接收從視圖模塊傳遞過來的用戶操作，將操作轉發給數據對象模塊，從而完成修改數據對象狀態等操作。用戶通過編排模塊編排屏幕，視圖模塊完成屏幕渲染并將編排操作傳遞給控制器模塊，控制器模塊通知數據對象模塊存儲相應的數據對象狀態變化。用戶通過屬性設置操作設置屏幕屬性，視圖模塊將屬性設置操作傳遞給控制器模塊，控制器模塊通知數據對象模塊存儲相應的數據對象狀態變化，然后數據對象模塊通知視圖模塊根據數據對象狀態變化渲染屏幕。用戶通過視圖模塊可以選擇當前視圖模式為編排模式或者預覽模式，視圖模塊將模式選擇操作傳遞給控制器模塊，控制器模塊調用視圖模塊提供的接口方法完成相應視圖的渲染。控制器模塊還支持心跳機制，控制器模塊定期向服務器發送心跳請求，保證web與服務器之間的連接不會因為超時而斷開。

1.2系統實現

由于本系統比較復雜，所以本文只對開發語言的選擇、屏幕編排布局的計算、拖拽編排的原理以及校驗模塊的實現等進行介紹，其余部分則不贅余。

1.2.1開發語言的選擇

在本系統的開發語言選擇上，考慮到JavaScript對面向對象特征的支持并不夠友好，經過對比Script#以及Typescript這兩種JavaScript的超集語言，最終本系統選擇了Typescript作為開發語言。Typescript是為大型應用開發而設計的語言，它是JavaScript的一個超集，Typescript向JavaScript添加了可選的靜態類型和基于類的面向對象編程特征，Typescript最終會編譯成為JavaScript。Script#同樣是JavaScript的一個超集，它使用C#的語法來開發JavaScript，Script#最終也會編譯成為JavaScript。相比Script#，Typescript有更完善的文檔等優勢。除了Typescript語言外，本系統還使用了HTML及CSS語言。

1.2.2屏幕編排布局的計算

屏幕編排布局的計算是渲染模塊中一個非常重要的功能。屏幕編排布局計算的準確與否直接影響了渲染模塊的正常工作與否。在web頁面中，假設屏幕的寬為W，高為H，屏幕由M行N列格子組成，格子之間的橫向間隔為Wi，格子的縱向間隔為Hi。則從第m行第n列格子開始，橫向跨越w個格子，縱向跨越h個格子的屏幕對象的位置屬性計算如下：

1.2.3拖拽編排的原理

瀏覽器JavaScript引擎的事件機制為實現鼠標拖拽編排的操作方式提供了可能。鼠標按下的時候會觸發瀏覽器mousedown事件，鼠標移動的時候會觸發瀏覽器mousemove事件，鼠標松開的時候會觸發瀏覽器mouseup事件。通過給瀏覽器的mousedown、mousemove和mouseup事件分別綁定事件處理函數，在這些事件觸發的時候，執行事件處理函數，根據事件攜帶的鼠標位置參數相應地改變被拖拽屏幕對象的位置，從而達到拖拽編排的視覺效果。拖拽編排的流程圖如圖2所示。

1.2.4校驗模塊的實現

校驗模塊是數據解析模塊的一個子模塊。校驗模塊同時適用于數據對象模塊端到數據庫端數據解析和數據庫端到數據對象模塊端數據解析。本課題提出了兩種校驗類型，第一種是合法性校驗，這類校驗判斷的是會引起程序錯誤的內容，對于這類校驗，必須全部通過才能進行數據解析。第二種是完整性校驗，這類校驗判斷的是會導致屏幕信息不完整的內容，考慮到存在多次編排的場景，這類校驗不管有沒有通過都可以繼續進行數據解析，但是在完整性校驗沒有通過的情況下會警告用戶。合法性校驗優先于完整性校驗，合法性校驗不通過則無需對數據進行完整性校驗，而會中斷數據解析過程。校驗模塊的流程圖如圖3所示。

2結束語

近年來，智能家居等概念火熱興起，作為互聯網和傳統電視的結合產物，互聯網電視正逐漸地進入千家萬戶。本文介紹的基于web的互聯網電視機頂盒屏幕編排系統解決了互聯網電視機頂盒屏幕的編排問題，具有很強的應用場景，也很好地適應了時代潮流。

作者:盧義美 廖建新 單位:北京郵電大學

參考文獻

[1]陳杲，王建秀，韓蘇川，等.互聯網電視應用生態系統探討[J].電視技術，2014，38（4）：60-62.

[2]宋善德，熊展志.基于SVG的矢量圖形編輯器的設計與實現[J].計算機工程與科學，2003，25（2）：91-94.

[3]余奕霖.數字化協作創作平臺上的工作流流程編輯工具的設計與實現[D].成都：電子科技大學，2009.

[4]周亮.IPTV中EPG的可視化編輯器關鍵技術研究[D].武漢：華中科技大學，2011.

[5]敬國東.基于在線編輯技術的網絡教案管理系統的設計與實現[J].軟件，2013，34（6）：23-24.

[6]姜福成.基于網頁平臺的移動文本編輯器的設計[J].軟件，2013，34（5）：12-15.

[7]李紅飛，姜海森.基于XML技術的結構化文檔編輯器研究[J].軟件，2014，35（5）：114-118.