CN103297854A - 一种web页面焦点控制方法 - Google Patents

Abstract

本发明提供一种web页面焦点控制方法，通过输入设备在显示界面中移动的坐标判断当前焦点所在的区域，根据各区域的信息对当前焦点进行显示。当焦点在相同区域中的元素之间切换的时候，采用同样大小的边框来回覆盖相应元素，并边框上产生一个行走的动画；焦点移动到不同的区域时，根据移动的坐标判断当前焦点所在的功能区域，根据该功能区域选择适应该区域的显示方式。通过以上技术方案能够实现所有页面的焦点风格统一，且使得对浏览器的依赖大大弱化，从用户体验角度来讲，带给用户这样一种独特的体；并且不再依赖浏览器对焦点控制方式的实现，从而全面掌握应用在用户端的展现。

Description

一种web页面焦点控制方法

本发明请求本申请人于2012年8月27日向中国国家知识产权局提交的申请号为CN201210303362.9，发明名称为“基于电视的web页面焦点控制方法”的中国发明专利申请的优先权，上述申请的全部内容以引用方式并入本文。

技术领域

本发明涉及到一种web页面焦点控制方法,

属于多媒体控制和显示，例如以智能电视为代表的技术领域。

背景技术

由于智能电视刚刚起步，在其中应用的浏览器五花八门，因此想在智能电视上发布web应用，面临着不同的浏览器标准，传统采用的页面技术往往难以逐个兼容，如果逐个做匹配，往往易限于无休止的技术黑洞，同时在页面展现的效果，也容易因此显得凌乱不堪。因此，采用一种风格一致、独立于浏览器的统一界面解决方案，对于在tv端web应用的推广，将会带来很大帮助。

在申请号为CN200810146345.2的中国专利申请中，提出了一种网络电视业务适配方法、服务器及系统，其能够根据机顶盒的能力信息选择匹配的显示模板,并利用显示模板适配机顶盒所请求的IPTV内容,从而使得业务系统对不同软硬件能力的机顶盒采用统一的方式提供服务。但是，该专利并不是将技术难点通过面向对象的方式来解决，其为面向过程的处理方式，开发周期比较长，维护成本高。

发明内容

本发明的目的是提供一种基于电视的web页面焦点控制方法，其可以使所有页面的焦点风格统一，且全js控制使得对浏览器的依赖大大弱化。

本发明的目的可通过如下技术方案来实现：

一种web页面焦点控制方法，包括以下步骤：步骤100：对显示界面进行分区；步骤200：通过输入设备在显示界面中移动的坐标判断当前焦点所在的区域，根据各区域的信息对当前焦点进行显示；步骤300：通过激活区域中焦点而触发事件。

2、优选地，所述步骤100中分区的方式：预先设定每一个区域的固定尺寸和位置，每一区域区域的位置相对于显示界面固定；或者相对于显示界面总体尺寸而言，每一区域具有固定比例的尺寸。所述步骤100中分区的方式：在生成或者显示所述显示界面时，预先获得要划分的区域的数量，在创建所述显示界面或者显示所述显示界面时，对所述显示界面进行区域划分。所述显示界面、所述区域是矩形、圆形、椭圆形中的一种或多种的组合。所述区域具有唯一的功能标记，所述区域中包括一个或多个显示元素。对各区域进行标识，标识方式为{(坐标1，坐标2，...坐标n)；功能标记}。

 进一步，在所述步骤200进一步包括：步骤210：对当前的焦点区域进行区别于非焦点区域的标识；步骤220：为步骤210中所述的焦点区域添加显示方式。步骤230：判断焦点是否在相同区域中的元素之间切换，当焦点在相同区域中的元素之间切换时，流程进入到步骤241；当焦点在不同区域中的元素之间切换，流程进入到步骤242。

在步骤241：当焦点在相同区域中的元素之间切换的时候，采用同样大小的边框来回覆盖相应元素，并边框上产生一个行走的动画；在步骤242：焦点移动到不同的区域时，根据移动的坐标判断当前焦点所在的功能区域，根据该功能区域选择适应该区域的显示方式。

 可选地，所述步骤230中判断焦点是否在相同区域中的元素之间切换的方式为：步骤231：焦点在区域中移动时，根据移动的方向和显示元素坐标判断是否是区域内移动，还是区域外移动；步骤232：计算当前元素的坐标是否为边缘坐标，判断焦点移动的方向是否为边缘坐标之外的坐标，根据移动方向判断是否移动至其他的区域中。

本发明中的基于电视的web页面焦点控制方法，在问题处理上引入组的概念，将同一类别，同一目的的内容纳入同一分组，组内成员有独立的关系，组合组有独立的关系，这种设计的优点就是大大的减少了开发中的逻辑判断。本发明中的基于电视的web页面焦点控制方法，页面行走风格独特，从用户体验角度来讲，带给用户这样一种独特的体验：行走的方框在电视的大屏之上灵动多变但又风格统一，可以带领用户随心所欲的聚焦到感兴趣的内容，并且全由js脚本控制，不再依赖浏览器对焦点控制方式的实现，从而全面掌握应用在用户端的展现。本发明中的基于电视的web页面焦点控制方法解决了IPTV机顶盒web项目应用中，浏览器适配、遥控操作和焦点处理等解决方案不统一的问题，从而降低应用开发，维护的难度。其可以根据不同浏览器的兼容性，提供不同的显示效果；根据不同型号的机顶盒遥控器，提供统一的按键响应；根据指定的业务需要，智能选择/切换显示效果。

附图说明

图1是本发明的基于电视的web页面焦点控制方法一优选实施例的流程图；

图2是应用本发明的基于电视的web页面焦点控制方法的一优选实施例的浏览器页面的示意图；

图3是本发明中判断当前焦点所在的区域。

具体实施方式

下面结合附图和具体实施例对本发明的技术方案进行详细描述。

参见附图1，在附图1中描述了本发明优选的第一实施方式，在该实施方式中提供了一种基于电视的web页面焦点控制方法。该方法包括以下步骤：

步骤100：对显示界面进行分区。非限制性地，所述显示界面可以是能够呈现在电视、电脑、手机等终端设备上的页面、窗口等。所述分区的方式优选为固定分区，即预先设定每一个区域的固定尺寸和位置，例如预先将显示界面划分为4个功能区域，每一功能区域的位置相对于显示界面固定。所述每一个区域的固定尺寸可以是固定的像素区域，也可以是相对于显示界面总体尺寸而言，具有固定比例的尺寸，例如一个固定区域A的尺寸相对于显示界面的尺寸的比例为1：10，当显示界面的尺寸为1024*768时，该显示区域的尺寸为102*77，而当显示界面的尺寸为1600*1400时，该显示区域的尺寸为160*140，这样可以保证在各种不同分辨率下每一固定区域能够以一种友好的形式呈现。在另一种可选的实施方式中，所述分区为动态分区，即根据实际需要动态地将显示界面划分为多个区域，在这种实施方式中，在生成或者显示所述显示界面时，预先获得要划分的区域的数量，在创建所述显示界面或者显示所述显示界面时，对所述显示界面进行区域划分。

本领域的技术人员应当理解，所述显示界面可以是矩形、圆形、椭圆形或者其他形状。所述区域也可以是矩形、圆形、椭圆形或者其他形状。

更进一步，所述各区域对应不同的功能分配。附图2展示了本发明在一个实际应用中的实施例，如附图2所示，该显示界面为铺满显示设备的全屏幕的一个显示窗口，该显示窗口可以是一个播放器、浏览器以及其他应用程序窗口。该显示界面被划分为四个功能区域，即“返回”按钮区域、播放方式选择区域、集数选择区域、以及下部的分页区域。

进一步，所述区域具有唯一的功能标记，所述区域中包括一个或多个显示元素。示意性地，在附图2中播放方式选择区域，其进一步包含标清播放、高清播放、720p播放、1080p播放等显示元素；而在集数选择区域中则进一步包含用于选择某一连载的节目内容的一集或多集的显示元素。非限制性地，所述显示元素可以是按钮、文本框、图片、图标、动画等控件。

步骤200：通过输入设备在显示界面中移动的坐标判断当前焦点所在的区域，根据各区域的信息对当前焦点进行显示。本领域技术人员应当理解，所述输入设备可以是鼠标、键盘、遥控器、多屏互动中的一个或多个触控屏幕等；所述焦点为当前光标被激活的位置，焦点所落的控件可被操作；例如一个按钮获得焦点，则可以通过鼠标左键、键盘上的回车等方式激活并触发相应事件。非限制性地，各区域都使用坐标进行范围的设定，例如，显示界面左下角为坐标原点，各区域的位置和尺寸都相对于所述坐标原点固定，并且具有彼此不同的坐标区域。

对各区域进行标识，优选地，标识方式为{(坐标1，坐标2，...坐标n)；功能标记}。示意性地，以矩形区域为例进行说明，矩形区域对角的两个顶点标识可以标识出该矩形的位置和尺寸。例如，图2中所示的集数选择区域的左下角坐标为(4,2)，右上角坐标为(14，5)，则可定位出该区域在显示屏幕中的位置和大小，如此，可将该矩形区域标记为{（4,2；14,5），episode}，其中，（4,2；14,5）为该区域的左下角坐标和右上角坐标，episode为该区域的功能编号。

步骤300：通过激活区域中焦点而触发事件。所述触发方式可以是按下输入设备上具有不同识别符号的按钮，包括但不限于：通过鼠标的左键、或者右键、或者中键、或者自定义键，或键盘上的某一个按键，或电视机顶盒遥控器上的诸如“返回”或者“回退”功能按钮。例如，当焦点转移到“返回”按钮区域时，通过鼠标点击动作或遥控器按键动作来触发页面的响应，使得页面从当前页面跳转到上一个页面。或者，当焦点移动到播放方式选择区域某一集数的位置时，通过遥控器上的确认按钮，触发页面响应，调用视频源进行视频的播放。

在本发明的第二实施方式中，对上述第一实施方式进行了优化，体现在以下方面。

参见附图3，在所述步骤200中进一步包括：

步骤210：对当前的焦点区域进行区别于非焦点区域的标识。例如对当前的焦点区域进行放大、改变颜色、改变字体等。最为优选地，采用一个特定选区漂浮框表示焦点的当前的焦点选择。例如对附图2的焦点区域使用漂浮框作为特定选区，非限制性地，可以采用级联样式表（Cascading Style Sheet，CSS）画出漂浮框，CSS采用级联样式表的形式，单独定义漂浮框的样式，例如：颜色、圆角形式、发光显示等。上述颜色、圆角形式、发光显示等样式可以根据个人不同的喜好进行设置。

步骤220：为步骤210中所述的焦点区域添加显示方式。优选地，可以通过JS模块来实现不同的显示效果的叠加。每一个显示效果都对应于一个处理JS模块，本发明的重点不在于各JS处理模块的具体实现，而在于将焦点所触发的后事件与多个不同的独立的遥控悬浮选框效果处理模块的绑定，这样可用于设置焦点的显示方式与不同浏览器之间的配置问题。例如，将不同独立的js模块与显示元素进行事件绑定。

示意性地，第一处理模块用于处理web应用与机顶盒的相关配置开关的问题；而第二处理模块用于处理web应用按键处理问题；第三处理模块用于处理web应用浏览器适配问题；第四处理模块用于处理web应用遥控悬浮框效果；第五处理模块用于处理web应用数据分页问题。

另一个示意性的实施例中，采用一个漂浮框（例如css画出来的蓝色边框）表示焦点的当前选择，css独立定义，可以根据实际效果进行不同的设置；第二处理模块对当焦点在相同区域中的元素之间切换的时候进行处理，例如采用同样大小的边框，来回覆盖相应元素，并边框上产生一个行走的动画，并且由该处理模块控制或设置动画的快慢时间。第三处理模块在当焦点在不同区域的元素之间切换的时候，边框行走的动画过程中，会渐进变化大小，以适应不同区域元素的大小。因此在此基础上，上述第二实施方式进一步包括：

步骤230：判断焦点是否在相同区域中的元素之间切换，当焦点在相同区域中的元素之间切换时，流程进入到步骤241。当焦点在不同区域中的元素之间切换，流程进入到步骤242。

在步骤241：当焦点在相同区域中的元素之间切换的时候，采用同样大小的边框来回覆盖相应元素，并边框上产生一个行走的动画。优选地，由该处理模块控制或设置动画的快慢时间。例如：当焦点从播放方式选择区域跳转到集数选择区域时，动画的播放是协同实现的。

在步骤242：焦点移动到不同的区域时，根据移动的坐标判断当前焦点所在的功能区域，根据该功能区域选择适应该区域的显示方式。以漂浮框为例，当焦点移动后的坐标（5,4）通过坐标值的判断位于集数选择区域中时，根据当前功能区域的属性episode，将漂浮框大小以及显示方式变换为与该区域的按钮一致的显示方式。

更进一步，所述步骤230中判断焦点是否在相同区域中的元素之间切换的方式优选为：

步骤231：焦点在区域中移动时，根据移动的方向和显示元素坐标判断是否是区域内移动，还是区域外移动。例如，根据区域中元素的分布获取元素的坐标，计算每个区域中元素的个数，获得元素的排列方式。例如：集数区域中，根据元素的坐标，可知在该区域中分布有2行10列的元素，焦点在区域中移动时，根据移动的方向和元素坐标判断是否是区域内移动，还是区域外移动。

步骤232：计算当前元素的坐标是否为边缘坐标，判断焦点移动的方向是否为边缘坐标之外的坐标，根据移动方向判断是否移动至其他的区域中。所述边缘坐标为位于显示元素边缘上的坐标。例如：当前焦点位于集数1的位置，为该区域左侧边缘坐标，若根据移动方向，移动后的X坐标小于集数1的坐标，则进入左侧返回区域。移动至相应的元素后，CSS先获取该元素的尺寸，根据该元素的尺寸将漂浮框的大小设置为与该元素一致的大小，进行显示。

通过以上技术方案，能够实现所有页面的焦点风格统一，且使得对浏览器的依赖大大弱化，从用户体验角度来讲，带给用户这样一种独特的体；并且不再依赖浏览器对焦点控制方式的实现，从而全面掌握应用在用户端的展现。

本发明所述并不限于具体实施方式所述的实施例，只要是本领域技术人员根据本发明方案得出其他的实施方式，同样属于本发明的技术创新及保护的范围。

Claims (9)

1.一种web页面焦点控制方法，包括以下步骤：

步骤100：对显示界面进行分区；

步骤200：通过输入设备在显示界面中移动的坐标判断当前焦点所在的区域，根据各区域的信息对当前焦点进行显示；

步骤300：通过激活区域中焦点而触发事件。

2.如权利要求1所述的web页面焦点控制方法，其特征在于：所述步骤100中分区的方式：预先设定每一个区域的固定尺寸和位置，每一区域的位置相对于显示界面固定；或者相对于显示界面总体尺寸而言，每一区域具有固定比例的尺寸。

3.如权利要求1所述的web页面焦点控制方法，其特征在于：所述步骤100中分区的方式：在生成或者显示所述显示界面时，预先获得要划分的区域的数量，在创建所述显示界面或者显示所述显示界面时，对所述显示界面进行区域划分。

4.如权利要求1所述的web页面焦点控制方法，其特征在于：所述显示界面、所述区域是矩形、圆形、椭圆形中的一种或多种的组合。

5.如权利要求1所述的web页面焦点控制方法，其特征在于：所述区域具有唯一的功能标记，所述区域中包括一个或多个显示元素。

6.如权利要求5所述的web页面焦点控制方法，其特征在于：对各区域进行标识，标识方式为{(坐标1，坐标2，...坐标n)；功能标记}。

7.如权利要求1所述的web页面焦点控制方法，其特征在于，在所述步骤200进一步包括：

步骤210：对当前的焦点区域进行区别于非焦点区域的标识；

步骤220：为步骤210中所述的焦点区域添加显示方式。

8.如权利要求7所述的web页面焦点控制方法，其特征在于，在所述步骤还包括：

步骤230：判断焦点是否在相同区域中的元素之间切换，当焦点在相同区域中的元素之间切换时，流程进入到步骤241；当焦点在不同区域中的元素之间切换，流程进入到步骤242；

在步骤241：当焦点在相同区域中的元素之间切换的时候，采用同样大小的边框来回覆盖相应元素，并边框上产生一个行走的动画；

在步骤242：焦点移动到不同的区域时，根据移动的坐标判断当前焦点所在的功能区域，根据该功能区域选择适应该区域的显示方式。

9.如权利要求8所述的web页面焦点控制方法，其特征在于，所述步骤230中判断焦点是否在相同区域中的元素之间切换的方式为：

步骤231：焦点在区域中移动时，根据移动的方向和显示元素坐标判断是否是区域内移动，还是区域外移动；

步骤232：计算当前元素的坐标是否为边缘坐标，判断焦点移动的方向是否为边缘坐标之外的坐标，根据移动方向判断是否移动至其他的区域中。

Images