基于web的互联网电视机顶盒屏幕编排系统的设计与实现

卢义美++廖建新

摘要：近年来，互联网电视得到了蓬勃发展。为了方便互联网电视的运营以及提供丰富多样的内容，需要对互联网电视机顶盒屏幕进行编排。目前市面上并没有成熟的互联网电视机顶盒屏幕编排系统。本文介绍了一款基于web的互联网电视机顶盒屏幕编排系统，对系统的架构设计及实现进行了详细描述，最终高效地解决了互联网电视机顶盒屏幕的编排问题。同时，本系统所使用的设计方法对其它类似的编排系统也具有参考意义。

关键词：软件工程；屏幕编排；互联网电视；机顶盒

中图分类号：TP311.5

文献标识码：B

DOI： 10.3969/j.issn.1003-6970.2016.01.013

O 引言

传统电视在家庭中拥有核心地位，不仅仅是客厅中显示和娱乐的中心，而且是家庭用户使用时间最多的终端。随着宽带移动网络不断普及和智能机顶盒的快速发展，面向电视终端的互联网电视（NTV，Network Television）业务取得了蓬勃发展，互联网电视已经成为互联网的新入口。

互联网电视是一种利用宽带有线电视网，集互联网、多媒体、通讯等多种技术于一体，向家庭互联网电视用户提供包括数字电视在内的多种交互式服务的崭新技术。对于互联网电视，用户不仅仅是“看”，而且在“用”，通过安装各种应用软件，电视可以提供面向家庭日常生活的应用服务，包括信息服务、娱乐、购物、缴费、理财、安防等日常生活的方方面面。

互联网电视目前一般有两种模式，一种是“智能机顶盒+电视机”，即智能机顶盒（STB，Set Top Box）和电视机是两个独立设备，机顶盒通过VGA或HDMI接口连接到电视机，电视机只作为显示终端；另外一种是“互联网电视一体机”，即电视机被集成了智能机顶盒，这两种模式虽然形式上不同，但是本质上没有区别。

互联网电视机顶盒展现给用户的屏幕多为卡片布局的图形用户界面（GUI，Graphical User Interface），卡片布局的内容可以是多种屏幕展现元素，包括视频、游戏、应用等。定制互联网电视机顶盒屏幕需要对屏幕布局、屏幕内容等进行编排。屏幕编排系统可以采用基于web或者基于桌面应用的形式。考虑到基于web形式的系统在跨平台及可维护性等方面上的优势，本文介绍的互联网电视机顶盒屏幕编排系统采用了基于web的形式。

l 屏幕编排系统的设计与实现

1.1 系统架构

本文介绍的互联网电视机预盒屏幕编排系统包括数据库模块、数据解析模块、数据对象模块、视图模块及控制器模块等5大模块。数据解析模块中包含校验子模块，视图模块中包含渲染子模块及编排子模块。数据对象模块、视图模块和控制器模块共同构成了MVC模式的三大组成部分。

机顶盒屏幕由多种屏幕对象组合而成，包括主屏、Logo、快捷入口、分屏、屏幕元素、导航等。在web页面中，这些屏幕对象可以抽象为JavaScript的对象，这些JavaScript对象的属性及接口定义等结合在一起构成了数据对象模块。数据对象模块中存储的JavaScript对象所代表的屏幕需要由视图模块在web页面上渲染出来，同时还需要支持用户对屏幕对象进行操作，包括修改屏幕对象的位置、修改屏幕布局等，这些工作分别由渲染模块和编排模块完成。控制器模块沟通了视图模块和数据对象模块，将视图模块中的用户操作传递到数据对象模块，保证数据对象模块中数据的状态与视图模块中屏幕对象的展现效果保持同步。数据对象模块中存储的屏幕对象数据在web页面断开连接后将丢失，而数据库模块则负责对这些数据进行永久存储。数据对象模块中存储的数据为JavaScript的对象，而数据库中存储的数据则是JSON格式的字符串等，在这两种不同格式的数据进行相互转换则由数据解析模块完成。数据解析模块在解析数据的过程中，需要保证所解析数据的完整性和正确性，这就是校验模块所要完成的工作。互联网电视机顶盒屏幕编排系统的总体架构图如图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对象、快捷入口对象、多个分屏对象以及导航对象，而分屏对象又包含多个屏幕元素对象等。数据对象模块中定义了不同屏幕对象的内容和接口，负责构建屏幕对象存储当前屏幕数据，同时提供与其它模块的通信接口。通过数据对象模块提供的接口方法，控制器模块可以改变屏幕对象的状态，视图模块可以查询屏幕对象的状态，数据解析模块可以传入解析后的屏幕数据并构建屏幕对象。通过数据对象模块中定义的事件机制，当屏幕对象状态变化的时候，数据对象模块会通知视图模块调用渲染模块更新视图。

1.1.5 视图模块

视图模块是本系统的表示部分，用于展现数据对象模块中屏幕对象数据的内容。视图模块提供预览模式和编排模式两种不同的模式。预览模式下，视图模块提供屏幕效果的预览。编排模式下，视图模块向用户提供一个友好的编排界面，用户可以通过所见即所得（WYSIWYG，what you see is what you get）的方式方便地编排机顶盒屏幕。视图模块的编排界面包括工具区和编辑区，工具区中包含了多种屏幕对象图标和辅助按钮，编辑区中实时地展示了当前所编排屏幕的效果。用户可以通过拖拽的方式操作屏幕对象图标，将不同的屏幕对象添加到编辑区中。不同的辅助按钮提供了不同的功能，用户可以通过点击按钮来设置不同的屏幕属性。视图模块接收用户的编排操作和属性设置操作，对这些操作进行数据验证，发送操作请求到控制器模块。视图模块可以向数据对象模块查询屏幕对象状态，获取屏幕对象状态信息。通过视图模块提供的方法，控制器模块可以选择不同的视图。视图模块监听数据对象模块的屏幕对象数据改变事件，调用渲染模块更新视图。

1.1.6 渲染模块

渲染模块是视图模块的子模块。数据库以及数据对象模块中存储的屏幕对象信息都是一些冰冷的数据，这些数据对于用户来说是不直观的。渲染模块根据屏幕对象信息渲染视图，让用户能直观地了解数据所代表的意义。根据不同的适用场景，渲染模块可以渲染整个视图或者部分视图。渲染模块有三个适用场景。系统初次加载时，此时还不存在视图，渲染模块根据数据对象模块传递过来的屏幕对象信息渲染生成整个视图。当屏幕对象状态变化时，数据对象模块通知视图模块屏幕对象状态变化信息，渲染模根据这些信息更新相应部分视图，保持视图和屏幕对象状态的同步。在编排屏幕的过程中，编排操作首先影响的是视图，渲染模块根据编排操作更新相应部分视图，然后发送操作请求到控制器模块，控制器模块通知数据对象模块屏幕对象状态变化信息，数据对象模块存储屏幕对象状态变化，保持视图和屏幕对象状态的同步。

1.1.7 编排模块

编排模块是视图模块的子模块。编排模块提供了鼠标拖拽的操作形式，用户仅仅使用鼠标就能完成全部编排操作。通过编排模块，用户可以完成添加屏幕对象、删除屏幕对象、修改屏幕对象大小、修改屏幕对象位置等操作。编排模块的实现符合所见即所得的原则，用户在进行编排操作的时候，可以即时地看到当前编排的效果，保证最终编排所得效果与所需效果一致。

1.1.8 控制器模块

控制器模块负责处理用户与web之间的交互。控制器模块接收从视图模块传递过来的用户操作，将操作转发给数据对象模块，从而完成修改数据对象状态等操作。用户通过编排模块编排屏幕，视图模块完成屏幕渲染并将编排操作传递给控制器模块，控制器模块通知数据对象模块存储相应的数据对象状态变化。用户通过属性设置操作设置屏幕属性，视图模块将属性设置操作传递给控制器模块，控制器模块通知数据对象模块存储相应的数据对象状态变化，然后数据对象模块通知视图模块根据数据对象状态变化渲染屏幕。用户通过视图模块可以选择当前视图模式为编排模式或者预览模式，视图模块将模式选择操作传递给控制器模块，控制器模块调用视图模块提供的接口方法完成相应视图的渲染。控制器模块还支持心跳机制，控制器模块定期向服务器发送心跳请求，保证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的互联网电视机预盒屏幕编排系统解决了互联网电视机顶盒屏幕的编排问题，具有很强的应用场景，也很好地适应了时代潮流。