CN117971196A - 一种epg页面可视化开发方法及装置 - Google Patents

Abstract

本发明涉及一种EPG页面可视化开发方法及装置，属于通信领域，该方法包括：在需要开发EPG页面的时候，首先将EPG页面背景图片上传到可视化编辑区域；之后，响应于对组件库中组件的布置操作，布局EPG页面；调整所述EPG页面中组件的位置、大小；EPG页面中组件布置完成之后，将EPG页面填充到EPG页面模板中生成最终的EPG页面，并将最终的EPG页面保存为EPG页面文件；最后，在需要展示EPG页面的情况下，获取并解析所述EPG页面文件，并将解析得到的信息填入EPG代码模板，生成EPG页面展示设备支持的EPG页面代码。本发明实现了EPG页面可视化开发和自动生成，实现了EPG页面可视化编辑开发，自动生成可供机顶盒解析展示的EPG页面，提高了EPG页面开发效率。

Description

一种EPG页面可视化开发方法及装置

技术领域

本发明属于通信领域，尤其涉及一种EPG页面可视化开发方法及装置。

背景技术

目前，EPG是智能电视平台面向用户展示智能电视服务内容的门户，是用户与智能电视平台进行交互的直接媒介。智能电视机顶盒通过内置的浏览器解析EPG页面，将页面内容展现在电视屏幕上。

传统的EPG页面模板开发流程基本为:程序开发人员基于EPG页面背景图，结合所需展示的各类EPG页面组件，使用智能电视平台支持的程序开发语言编写页面代码，实现各EPG页面组件在页面上的展示和调用智能电视平台的功能(如页面跳转、播放VOD等)。完成EPG页面代码的开发后发布到智能电视平台，机顶盒解析该页面并展示，为用户提供智能电视业务服务。

传统EPG页面开发方式需要专门技术人员使用程序开发语言编写，随着智能电视业务的持续发展及客户对个性化EPG页面的日益增多，通过代码编写EPG页面的工作日渐繁琐，工作量巨大，效率低下，日常运营人员难以完成EPG页面的开发工作。

发明内容

鉴于以上现有技术的不足，发明的目的在于提供一种EPG页面可视化开发方法及装置，提高了EPG页面的开发效率。该方法在，无需依赖开发人员通过程序开发语言编写页面，实现了EPG页面可视化编辑，自动生成可供机顶盒解析展示的EPG页面。

本发明的第一方面，提出了一种EPG页面可视化开发方法，包括：

S1，将EPG页面背景图片上传到可视化编辑区域；

S2，响应于对组件库中组件的布置操作，布局EPG页面；调整所述EPG页面中组件的位置、大小；

S3，EPG页面中组件布置完成之后，将EPG页面填充到EPG页面模板中生成最终的EPG页面，并将最终的EPG页面保存为EPG页面文件；

S4，在需要展示EPG页面的情况下，获取并解析所述EPG页面文件，并将解析得到的信息填入EPG代码模板，生成EPG页面展示设备支持的EPG页面代码。

进一步地，S3中在EPG页面中组件布置完成之后，还包括

将布置完成的EPG页面保存为EPG模板，并提交页面审核；

在审核通过之后，保存所述EPG模板；其中，所述EPG模板供用户调用和配置；多个EPG模板形成模板列表。

进一步地，上述EPG页面可视化开发方法还包括：

使用Activity组件配置针对EPG模板的多级审核，并配置下一级审核的审核成员；

在EPG模板审核不通过的情况下，将对应的EPG页面退回到EPG页面的布置环节。

进一步地，上述EPG页面可视化开发方法还包括：

将多个EPG模板按照层级关系，组合形成主题；

将形成的主体存入主题库，以供用户调用和配置主题，完成整套EPG页面的制作。

进一步地，述布置操作包括拖曳操作；

所述组件库为可扩展式组件库，包括以下组件中的至少一种：

布局组件、栏目组件、天气组件、时间组件、视频图文轮播组件、文本组件、栏目列表组件、内容框组件、推荐位组件、APK启动组件、公共内容入口组件、走马灯组件、滚动公告组件、翻页组件。

进一步地，上述EPG页面可视化开发方法还包括：

使用java、html、myslq实现每一个EPG页面、EPG模板、主题的创建人、更新人、审核人、下发人以及各个节点的流程名称、操作时间的查询。

进一步地，上述EPG页面可视化开发方法在执行步骤S1之前，还包括：

使用HTML、CSS和JavaScript的前端开发技术，创建所述可视化编辑区域和组件布局的界面；

步骤S2中，利用所述组件布局的界面，布局EPG页面。

进一步地，所述将最终的EPG页面保存为EPG页面文件，包括：

将最终的EPG页面保存为HTML文件，得到所述EPG页面文件；

将所述EPG页面文件存储到数据库或服务器。

进一步地，所述获取并解析所述EPG页面文件，并将解析得到的信息填入EPG代码模板，包括：

获取并解析所述EPG页面文件，得到EPG页面相关信息；其中，所述EPG页面相关信息包括组件的位置、大小、类型；

将所述EPG页面相关信息填入EPG代码模板。

本发明的第二方面，提出了一种EPG页面可视化开发装置，包括：

在线编辑模块，用于将EPG页面背景图片上传到可视化编辑区域；响应于对组件库中组件的布置操作，布局EPG页面；调整所述EPG页面中组件的位置、大小；EPG页面中组件布置完成之后，将EPG页面填充到EPG页面模板中生成最终的EPG页面，并将最终的EPG页面保存为EPG页面文件；在需要展示EPG页面的情况下，获取并解析所述EPG页面文件，并将解析得到的信息填入EPG代码模板，生成EPG页面展示设备支持的EPG页面代码。

本发明有益效果如下：

本发明所述的方法和装置，在需要开发EPG页面的时候，首先将EPG页面背景图片上传到可视化编辑区域；之后，响应于对组件库中组件的布置操作，布局EPG页面；调整所述EPG页面中组件的位置、大小；EPG页面中组件布置完成之后，将EPG页面填充到EPG页面模板中生成最终的EPG页面，并将最终的EPG页面保存为EPG页面文件；最后，在需要展示EPG页面的情况下，获取并解析所述EPG页面文件，并将解析得到的信息填入EPG代码模板，生成EPG页面展示设备支持的EPG页面代码。本发明实现了EPG页面可视化开发和自动生成，实现了EPG页面可视化编辑开发，自动生成可供机顶盒解析展示的EPG页面，提高了EPG页面开发效率。另外，本发明中的组件库位可持续拓展的组件库，可根据业务需求随时往组件库添加需要的组件，并且组件库中的组件可重复使用，降低了EPG页面开发的工作量。再者，本发明中可快速调用的模板库中的EPG模板或主题库中的主体，EPG制作时可快速配置调用已经保存过的模版或主题，进一步提高了EPG页面的开发效率。

附图说明

附图仅用于示出具体实施例的目的，而并不认为是对本发明的限制，在整个附图中，相同的参考符号表示相同的部件。显而易见地，下面描述中的附图仅仅是本发明实施例中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。

图1为本发明实施例一种EPG页面可视化开发方法的流程图；

图2A为本发明实施例中上传EPG页面背景图片的示意图；

图2B为本发明实施例中布局组件的示意图；

图2C为本发明实施例中设置组件属性的示意图；

图2D-图2G为本发明实施例中设置组件的跳转逻辑的示意图；

图2H为本发明实施例中设置主题的示意图

图3为本发明实施例的EPG页面可视化开发方装置示意图。

具体实施方式

为了使本领域的人员更好地理解本发明实施例中的技术方案，下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。应该理解，这些描述只是示例性的，并非用于限定本发明的范围。基于本发明的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本发明公开的概念。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的方法和***的例子。

本发明提出了一种EPG页面可视化开发方法及装置，为解决了现有技术的EPG页面开发存在的工作量巨大，效率低下，日常运营人员难以完成EPG页面的开发工作的缺陷。

方法实施例

本发明提供的一种EPG页面可视化开发方法，将EPG页面代码开发转化为可视化操作，日常运营人员无需依赖开发人员，通过下述EPG可视化编辑的步骤，即可独立编辑、生成EPG页面。

具体地，该方法包括步骤S1至步骤S4。

步骤S1，将EPG页面背景图片上传到可视化编辑区域。

前端开发技术使用HTML、CSS和JavaScript等前端开发技术，创建一个可视化编辑区域和组件布局的界面。通过组件布局的界面实现组件的布置。

步骤S2，响应于对组件库中组件的布置操作，布局EPG页面；调整所述EPG页面中组件的位置、大小。

使用JavaScript库(如jQuery UI或React DnD等)实现拖放功能，用户通过鼠标拖动组件来布局EPG页面。

另外，可以使用JavaScript编写代码，监听拖动或输入事件，根据用户操作改变组件的位置和大小。

步骤S1和步骤S2，上传EPG背景图片到可视化编辑区域，可通过鼠标拖动组件布局EPG页面，可通过鼠标拖动或者输入值改变组件的位置和大小。

步骤S3，EPG页面中组件布置完成之后，将EPG页面填充到EPG页面模板中生成最终的EPG页面，并将最终的EPG页面保存为EPG页面文件。

后端开发技术，在服务器端使用后端开发技术Java、Node.js编写代码，接收前端发送的组件布局数据。模板引擎使用服务器端的模板引擎，将接收到的组件布局数据填充到EPG页面模板中生成最终的EPG页面。服务器端将生成的EPG页面保存为HTML文件，即上述EPG页面文件，存储到数据库或服务器。

步骤S4，在需要展示EPG页面的情况下，获取并解析所述EPG页面文件，并将解析得到的信息填入EPG代码模板，生成EPG页面展示设备支持的EPG页面代码。

在电脑或电视上展示EPG页面时，使用相应的前端技术HTML、CSS、JavaScript加载EPG页面。具体地，前端技术通过解析需要展示的EPG页面文件获取相关信息，组件位置和大小等。之后前端使用解析到的EPG页面信息，将其填充到EPG代码模板中，生成完整的EPG页面展示所需的页面代码。

上述实施例首先上传EPG背景图片到可视化编辑区域，可通过鼠标拖动组件布局EPG页面，可通过鼠标拖动或者输入值改变组件的位置和大小，待所有EPG组件编辑完成后，将编辑完成的EPG页面保存为EPG页面文件。需要在电脑或者电视上展示该EPG页面时，自动解析获取EPG页面相关信息，填入EPG代码模板，生产可供电脑或电视展示的EPG页面。将传统的EPG页面代码开发工作转换为平台上的可视化操作，所有EPG页面代码自动生成，提高了EPG页面开发效率和质量。

上述组件库为可扩展式组件库，提供包括布局组件、栏目组件、天气组件、时间组件、视频图文轮播组件、文本组件、栏目列表组件、内容框组件、推荐位组件、APK启动组件、公共内容入口组件、走马灯组件、滚动公告组件、翻页组件，EPG页面使用HTML、JS、CSS、VUE技术实现，支持动态图文视频内容列表展示，可在后台发布指定的图文视频内容到对应的栏目页面，支持实时调用接口显示信息。

在一些实施例中，S3中在EPG页面中组件布置完成之后，EPG页面可视化开发方法还可以包括如下步骤：

将布置完成的EPG页面保存为EPG模板，并提交页面审核；在审核通过之后，保存所述EPG模板；其中，所述EPG模板供用户调用和配置；多个EPG模板形成模板列表。

此步骤可以由模板管理模块完成，具体地模板管理模块将编辑好的EPG页面可保存为模版，EPG制作时通过点击模板列表，在模板列表中选择需要使用的模板，可快速配置调用已经保存过的模版。

在一些实施例中，EPG页面可视化开发方法还可以包括如下步骤：

将多个EPG模板按照层级关系，组合形成主题；将形成的主体存入主题库，以供用户调用和配置主题，完成整套EPG页面的制作。

此步骤可以由主题管理模块完成，具体地主题管理模块可以将多个EPG模板按照层级关系组合成一个主题存入主题库，可供快速调用配置主题，完成整套EPG制作。

在一些实施例中，EPG页面可视化开发方法还可以包括如下步骤：

使用Activity组件配置针对EPG模板的多级审核，并配置下一级审核的审核成员；在EPG模板审核不通过的情况下，将对应的EPG页面退回到EPG页面的布置环节。

此步骤可以由在线编辑审核模块完成，具体地，线编辑审核模块使用Activity组件二次开发实现可配置多级审核，并可派给下一环节指定人员，审核不通过必须填写意见，审核不通过的EPG页面回到拟稿人环节，状态为拟稿状态，即EPG页面编辑状态。

在一些实施例中，EPG页面可视化开发方法还可以包括如下步骤：

使用java、html、myslq实现每一个EPG页面、EPG模板、主题的创建人、更新人、审核人、下发人以及各个节点的流程名称、操作时间的查询。

此步骤可以由在线编辑操作流程查询模块完成，在线编辑操作流程查询模块使用java、html、myslq实现每一个页面、模板、主题的创建人、更新人、审核人、下发人以及各个节点的流程名称、操作时间的查询。

在一些实施例中，还可以实现利用草稿箱存储EPG页面，具体可以利用草稿箱模块来实现，草稿箱模块设置独立草稿箱，草稿箱可保存多条编辑过程中的EPG页面；EPG页面审核失败可自动将失败内容保存至草稿箱。

在一些实施例中，还可以进行流量监控，具体可以利用数据探针模块来实现。数据探针模块***数据探针到需要监控的EPG页面，方便后续做流量监控。

上述实施例可实现智能电视平台EPG模板可视化编辑、制作、管理、审核一站式解决方案，实现了EPG页面可视化编辑开发，自动生成可供机顶盒解析展示的EPG页面，提高了EPG页面开发效率。可持续拓展的组件库，EPG组件可根据业务需求随时添加，可重复使用，降低EPG页面开发工作量。可快速调用的模板库或主题库，EPG制作时可快速配置调用已经保存过的模版或主题。

上述组件库，用现代化的前端框架或库Vue.js的拖放功能的库vue-draggable框架，提供了组件化开发和构建用户界面的能力，提供一下至少一种组件：布局组件、栏目组件、天气组件、时间组件、视频图文轮播组件、文本组件、栏目列表组件、内容框组件、推荐位组件、APK启动组件、公共内容入口组件、走马灯组件、滚动公告组件、翻页组件。EPG页面支持动态图文视频内容列表展示，可在后台发布指定的图文视频内容到对应的栏目页面，支持实时调用接口显示信息。

下面通过一个具体的实施例对上述EPG页面可视化开发方法进行说明。

步骤一、如图2A所示，上传EPG页面背景图片到可视化编辑区域。

步骤二、通过可拖拽式的组件库在EPG进行组件布局。组件图片、视频内容的填充来源为平台媒资注入的内容，如图2B所示。组件支持标题、文字样式、组件属性、链接、光标、权限设置等相关设置，如图2C所示。

步骤三、设置组件的跳转逻辑，具有跳转逻辑的组件主要包括：矩形、图文列表、图片列表。如图2D-图2G所示，单击组件右上角编辑按钮进入组件属性选择，找到“链接”选择需要的链接类型，常用的链接类型有栏目、内容、应用、全屏视频、直播频道、影片等。选择对应的跳转栏目、内容栏目(对应图文列表组件)或选择所需的应用、链接等。

步骤四、利用模板管理模块将编辑好的EPG页面可保存为EPG模版。EPG制作时可快速配置调用已经保存过的模版，支持模板编辑、详情查看、模板删除，未上线模板可点击提交审核进行进入审核阶段，已上线模板可点击下线进行模板下线。

如图2H所示，利用主题管理模块将多个模板按照层级关系，组合成一个主题存入主题库。主题库中的主题可供快速调用配置主题，完成整套EPG制作。主题管理模块支持根据主题名称、类型、状态查询模板，点击新增可调出主题新增模板页面，可编辑模板名称、选择模板类型。支持修改缩略图，进入可选择相应图片并保存。

第五步、完成EPG模板搭建后，点击保存即可，保存后的模板进行提交审核，待审核通过后即完成上线。

装置实施例

本发明的另一个具体实施例，公开了一种EPG页面可视化开发装置，如图3所示，包括在线编辑模块310，用于将EPG页面背景图片上传到可视化编辑区域；响应于对组件库中组件的布置操作，布局EPG页面；调整所述EPG页面中组件的位置、大小；EPG页面中组件布置完成之后，将EPG页面填充到EPG页面模板中生成最终的EPG页面，并将最终的EPG页面保存为EPG页面文件；在需要展示EPG页面的情况下，获取并解析所述EPG页面文件，并将解析得到的信息填入EPG代码模板，生成EPG页面展示设备支持的EPG页面代码。

另外，EPG页面可视化开发装置还包括：可拖拽式的组件库320、模板管理模块330、主题管理模块340、草稿箱模块350、数据探针模块360、在线编辑审核模块370、在线编辑操作流程查询模块380，上述实施例中的模块实现的功能与方法实施例中的相同，因此相同内容不再赘述。

本发明申请人结合说明书附图对本发明的实施示例做了详细的说明与描述，但是本领域技术人员应该理解，以上实施示例仅为本发明的优选实施方案，详尽的说明只是为了帮助读者更好地理解本发明精神，而并非对本发明保护范围的限制，相反，任何基于本发明的发明精神所作的任何改进或修饰都应当落在本发明的保护范围之内。

最后应说明的是，以上实施例仅用以说明本发明实施例的技术方案，而非对其限制。尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，任何熟悉本技术领域的技术人员在本发明公开的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。

Claims (10)

1.一种EPG页面可视化开发方法，其特征在于，包括：

S1，将EPG页面背景图片上传到可视化编辑区域；

S2，响应于对组件库中组件的布置操作，布局EPG页面；调整所述EPG页面中组件的位置、大小；

S3，EPG页面中组件布置完成之后，将EPG页面填充到EPG页面模板中生成最终的EPG页面，并将最终的EPG页面保存为EPG页面文件；

S4，在需要展示EPG页面的情况下，获取并解析所述EPG页面文件，并将解析得到的信息填入EPG代码模板，生成EPG页面展示设备支持的EPG页面代码。

2.根据权利要求1所述的一种EPG页面可视化开发方法，其特征在于，S3中在EPG页面中组件布置完成之后，还包括

将布置完成的EPG页面保存为EPG模板，并提交页面审核；

在审核通过之后，保存所述EPG模板；其中，所述EPG模板供用户调用和配置；多个EPG模板形成模板列表。

3.根据权利要求2所述的一种EPG页面可视化开发方法，其特征在于，还包括：

使用Activity组件配置针对EPG模板的多级审核，并配置下一级审核的审核成员；

在EPG模板审核不通过的情况下，将对应的EPG页面退回到EPG页面的布置环节。

4.根据权利要求2所述的一种EPG页面可视化开发方法，其特征在于，还包括：

将多个EPG模板按照层级关系，组合形成主题；

将形成的主体存入主题库，以供用户调用和配置主题，完成整套EPG页面的制作。

5.根据权利要求1所述的一种EPG页面可视化开发方法，其特征在于，所述布置操作包括拖曳操作；

所述组件库为可扩展式组件库，包括以下组件中的至少一种：

布局组件、栏目组件、天气组件、时间组件、视频图文轮播组件、文本组件、栏目列表组件、内容框组件、推荐位组件、APK启动组件、公共内容入口组件、走马灯组件、滚动公告组件、翻页组件。

6.根据权利要求1所述的一种EPG页面可视化开发方法，其特征在于，还包括：

使用java、html、myslq实现每一个EPG页面、EPG模板、主题的创建人、更新人、审核人、下发人以及各个节点的流程名称、操作时间的查询。

7.根据权利要求1所述的一种EPG页面可视化开发方法，其特征在于，在执行步骤S1之前，还包括：

使用HTML、CSS和JavaScript的前端开发技术，创建所述可视化编辑区域和组件布局的界面；

步骤S2中，利用所述组件布局的界面，布局EPG页面。

8.根据权利要求1所述的一种EPG页面可视化开发方法，其特征在于，所述将最终的EPG页面保存为EPG页面文件，包括：

将最终的EPG页面保存为HTML文件，得到所述EPG页面文件；

将所述EPG页面文件存储到数据库或服务器。

9.根据权利要求1所述的一种EPG页面可视化开发方法，其特征在于，所述获取并解析所述EPG页面文件，并将解析得到的信息填入EPG代码模板，包括：

获取并解析所述EPG页面文件，得到EPG页面相关信息；其中，所述EPG页面相关信息包括组件的位置、大小、类型；

将所述EPG页面相关信息填入EPG代码模板。

10.一种EPG页面可视化开发装置，其特征在于，包括：

在线编辑模块，用于将EPG页面背景图片上传到可视化编辑区域；响应于对组件库中组件的布置操作，布局EPG页面；调整所述EPG页面中组件的位置、大小；EPG页面中组件布置完成之后，将EPG页面填充到EPG页面模板中生成最终的EPG页面，并将最终的EPG页面保存为EPG页面文件；在需要展示EPG页面的情况下，获取并解析所述EPG页面文件，并将解析得到的信息填入EPG代码模板，生成EPG页面展示设备支持的EPG页面代码。