本发明涉及交互式网络电视技术领域，尤其涉及一种epg可视化页面的生成方法。
背景技术：
iptv即交互式网络电视，是一种利用宽带网，集互联网、多媒体、通讯等技术于一体，向家庭用户提供包括数字电视在内的多种交互式服务的崭新技术。它能够很好地适应当今网络飞速发展的趋势，充分有效地利用网络资源。随着网络技术的发展和应用，成百上千兆的网络带宽已随处可见，用户通过电视机顶盒来观看网络电视已成为现实。
iptvepg实际上就是iptv的一个门户系统。epg系统的界面与web页面类似，在epg界面上提供各类菜单、按钮、链接等可供用户选择节目时直接点击的组件。
现有的epg界面生成的方式一般是通过人工编写代码，部署到后台服务器，在智能电视iptv机顶盒上审核epg页面，并同时进行epg适配测试。
这种方式具有以下弊端：网页的代码编辑、后台服务器的部署、epg机顶盒的适配测试、epg页面更新维护和对多种机顶盒的页面适配等多个步骤都需要专业的技术人员参与，不仅对技术人员的专业技术要求高，且需要占用大量的人力资源；且专业技术人员对epg机顶盒逐个适配测试即更新维护、以及对机顶盒进行页面适配，效率低且成本高。
技术实现要素：
本发明所要解决的技术问题是提供一种epg可视化页面的生成方法，页面编辑简单便捷，便于非专业技术人员操作。
为解决上述技术问题，本发明的技术方案是：一种epg可视化页面的生成方法，包括一个绘图界面，所述绘图界面内设有绘图区域，所述绘图区域一侧设有若干个按钮，所述按钮分别对应一个预设的控件，所述方法包括以下步骤：
步骤1：选择控件，绘制页面内容，生成页面描述文件ui.json；
步骤2：设置控件数据或用自定义表达式引用“数据源控件”中的远程数据，生成数据描述文件data.json；
步骤3：发布页面描述文件和数据描述文件至服务器；
步骤4：服务器通过解析引擎将所述页面描述文件和数据描述文件解析成网页展示至机顶盒。
作为优选的技术方案，所述页面描述文件格式是：{页面属性名称:页面属性内容，...,控件:[{控件属性名称:控件属性内容},...]}。
作为优选的技术方案，步骤1中绘制页面内容的方法具体包括以下步骤：
步骤1-1：点击控件按钮，选择控件；
步骤1-2：在绘图区域按下鼠标，记录起始坐标；
步骤1-3：在绘图区域松开鼠标，记录结束坐标；
步骤1-4：判断起始坐标是否等于结束坐标，若等于，执行步骤1-5；若不等于执行步骤1-6；
步骤1-5：以起始位置坐标为控件左上角原点，生成宽度和高度默认的矩形控件；
步骤1-6：以起始坐标为起点，以结束坐标为终点，使用实线生成矩形控件。
作为优选的技术方案，步骤1中还包括以下步骤：在鼠标移动时，以鼠标的当前坐标为结束坐标，用虚线生成一个矩形，所述矩形的宽度和高度显示将要生成的控件宽度和高度。
作为优选的技术方案，所述数据描述文件的格式是：{控件编号:{控件数据名称:控件数据内容},...}。
作为优选的技术方案，所述自定义表达式的格式是:${ds[‘dsid’].data.name}，其中，‘${’为表达式开始，‘}’为表达式结束，ds为数据源集合，[‘dsid’]表示通过数据源id‘dsid’获取指定数据源，data为数据源动态数据，name为动态数据中的key值。
作为优选的技术方案，在步骤3中，所述页面描述文件和数据描述文件的发布地址是：解析引擎跟目录/项目编码/页面编码/ui.json,data.json。
作为优选的技术方案，步骤4具体包括以下步骤：
步骤4-1：访问解析引擎入口地址，传入epg参数，所述epg参数包括项目代码和页面代码；
步骤4-2：根据项目代码和页面代码，定位所述页面描述文件和数据描述文件的位置；
步骤4-3：加载页面描述文件，根据页面描述文件中数据源控件的定义，通过ajax或jsonp方式获取远程数据，存入浏览器内存中；
步骤4-4：根据页面描述文件中的控件定义，动态创建html元素，并自动适配机顶盒；
步骤4-5：加载数据描述文件，解析自定义表达式，获取步骤4-3存入到浏览器内存中的数据，并设置到步骤4-4对应的html元素中；
步骤4-6：将页面展示到机顶盒。
由于采用了上述技术方案，本发明的有益效果是：本发明绘设置了绘制界面，将控件通过鼠标的点击和拖曳绘制到绘图区域，生成页面描述文件和数据描述文件，服务器通过解析引擎自动解析成epg页面展示到机顶盒上，编辑和操作方法简单易行，便于非专用技术人员掌握，降低了生成epg页面的技术难度和对技术人员的专业技术要求，便于epg页面的编辑、适配、测试和更新，提高了epg页面生成的效率，降低了开发和维护的成本。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例的流程图；
图2是本发明实施例步骤1中绘制页面内容的方法的流程图；
图3是本发明实施例步骤4的流程图。
具体实施方式
如图1所示，一种epg可视化页面的生成方法，包括一个绘图界面，绘图界面内设有绘图区域，绘图区域一侧设有若干个按钮，按钮分别对应一个预设的控件，本方法包括以下步骤：
步骤1：选择控件，绘制页面内容，生成页面描述文件ui.json，页面描述文件格式是：{页面属性名称:页面属性内容，...,控件:[{控件属性名称:控件属性内容},...]}。
步骤2：设置控件数据或用自定义表达式引用“数据源控件”中的远程数据，生成数据描述文件data.json，数据描述文件的格式是：{控件编号:{控件数据名称:控件数据内容},...}；自定义表达式的格式是:${ds[‘dsid’].data.name}，其中，‘${’为表达式开始，‘}’为表达式结束，ds为数据源集合，[‘dsid’]表示通过数据源id‘dsid’获取指定数据源，data为数据源动态数据，name为动态数据中的key值。
步骤3：发布页面描述文件和数据描述文件至服务器，页面描述文件和数据描述文件的发布地址是：解析引擎跟目录/项目编码/页面编码/ui.json,data.json，
步骤4：服务器通过解析引擎将页面描述文件和数据描述文件解析成网页展示至机顶盒。
优选的，步骤1中绘制页面内容的方法具体包括以下步骤：
步骤1-1：点击控件按钮，选择控件；
步骤1-2：在绘图区域按下鼠标，记录起始坐标；
步骤1-3：在绘图区域松开鼠标，记录结束坐标；
步骤1-4：判断起始坐标是否等于结束坐标，若等于，执行步骤1-5；若不等于执行步骤1-6；
步骤1-5：以起始位置坐标为控件左上角原点，生成宽度和高度默认的矩形控件；
步骤1-6：以起始坐标为起点，以结束坐标为终点，使用实线生成矩形控件。
优选的，步骤1中还包括以下步骤：在鼠标移动时，以鼠标的当前坐标为结束坐标，用虚线生成一个矩形，矩形的宽度和高度显示将要生成的控件宽度和高度。
步骤1中包含了两种绘制方式，一种是在绘图区域内绘制任意大小的控件，另一种是在绘制区域内点击绘制默认大小的控件。
在绘图区域内绘制任意大小的控件：用户使用鼠标在绘图区按下时，记录起始位置坐标(x1,y1)，用户使用鼠标移动时以记录的起始坐标（x1,y1）到用户当前鼠标坐标(x2,y2)使用虚线生成一个矩形，该矩形显示出将要生成控件的宽度和高度，用户鼠标松开后记录结束坐标(x3,y3),以起始坐标(x1,y1)为起点，以结束坐标(x3,y3)为终点，使用实线生成矩形，此矩形为生成的控件。
在绘制区域内点击绘制默认大小的控件：用户鼠标在绘图区按下时，记录起始位置坐标(x1,y1)，用户鼠标松开后记录结束坐标(x3,y3)，当起始位置坐标(x1,y1)等于结束坐标(x3,y3)判断用户为点击操作，以起始位置坐标(x1,y1)为控件左上角原点，生成默认宽度100，高度100（单位像素）的矩形控件。
步骤4具体包括以下步骤：
步骤4-1：访问解析引擎入口地址，传入epg参数，epg参数包括项目代码和页面代码，解析引擎入口地址：http://xxx.xxx.xxx.xxx/epg/1.x.x/ui/index.html；
epg参数：epg_params=[project=项目代码,action=page://页面代码]；
步骤4-2：根据项目代码和页面代码，定位页面描述文件和数据描述文件的位置；
步骤4-3：加载页面描述文件，根据页面描述文件中数据源控件的定义，通过ajax或jsonp方式获取远程数据，存入浏览器内存中；
步骤4-4：根据页面描述文件中的控件定义，动态创建html元素，并自动适配机顶盒；
步骤4-5：加载数据描述文件，解析自定义表达式，获取步骤4-3存入到浏览器内存中的数据，并设置到步骤4-4对应的html元素中；
步骤4-6：将页面展示到机顶盒。
本发明具有以下优势：
1.非技术人员经过简单的培训后，即可编辑epg页面。
2.非技术人员可以自主的将编辑的epg页面发布到服务器。
3.epg页面可自动适配当前市场上常见iptv机顶盒，无需人工花费大量时间逐个适配测试。
4.无需专业技术人员配合，运营人员即可进行epg页面的更新维护。
5.epg页面发布之前，自动进行机顶盒页面适配，不需要技术人员参与。
以上显示和描述了本发明的基本原理、主要特征及本发明的优点。本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的权利要求书及其等效物界定。