CN101819594A

CN101819594A - 嵌入式浏览器中实现跑马灯效果的方法

Info

Publication number: CN101819594A
Application number: CN 201010153712
Authority: CN
Inventors: 邵巍
Original assignee: Sichuan Changhong Electric Co Ltd
Current assignee: Sichuan Changhong Electric Co Ltd
Priority date: 2010-04-23
Filing date: 2010-04-23
Publication date: 2010-09-01
Anticipated expiration: 2030-04-23
Also published as: CN101819594B

Abstract

本发明提供一种在嵌入式浏览器中，CPU占用资源小且能够承载多种滚动内容形式的跑马灯效果的实现方法。嵌入式浏览器中实现跑马灯效果的方法，采用由图形引擎通过窗口控件生成的子窗口作为marquee窗口，将待滚动的内容作为子窗口的内置页面，除能正常显示文字、图片等内容外，还可对HTML代码段进行CSS解析，从而实现对HTML代码段的显示。无需待滚动内容的长度多大，子窗口仅对其可视区域的内置页面部分(进入该子窗口的内置页面部分)进行解析、显示，避免出现因待滚动内容长度过大而造成占用CPU资源过大，程序响应缓慢的问题。

Description

嵌入式浏览器中实现跑马灯效果的方法

技术领域

本发明涉及内容显示领域。

背景技术

跑马灯效果，也称滚动字幕效果。实际上可滚动的内容除了字幕外，包括图片、表格等很多种。实现跑马灯效果有几种方法，而HTML(超文本标记语言)中的marquee(会移动的文字)标签，是其中最便捷的方式。目前，marquee标签被广泛应用于IPTV(网络电视)领域的EPG(电子节目指南)制作当中，是主流的制作技术之一。

该marquee标签包含众多属性，主要有：

滚动方向(direction)：包括向左/向右/向上/向下(left/right/up/down)；

滚动速度(scrollamount)：实际上是设定滚动字幕滚动一次的距离；

滚动方式(bihavior)：包括scroll/slide/alternate，scroll表示反复地由一端滚动至另一端；slide表示只滚动一次，由一端滚动至另一端；alternate表示在两端反复来回滚动；

循环(loop)：包括infinite/num。infinite＝-1，都表示无限次滚动；num等于几，就表示循环几次；

延时(scrolldelay)：设定两次滚动之间的延迟时间；

背景色(bgcolor)：设定滚动内容的背景颜色；

高度(height)：设定滚动内容的高度；

宽度(width)：设定滚动内容的宽度；

空白(hspace/vspace)：设定滚动内容左右边框和上下边框的宽度。

marquee标签嵌入在HTML语言中使用，用法如下：

<html>

<body>

欢迎大家来到四川

</marquee>

</body>

</html>

通过以上代码将会形成一个宽度为300，高度为100的矩形区域(marquee窗口)，“欢迎大家来到四川”几个字将会在这个marquee窗口从右至左的不断循环滚动。

在该marquee窗口中实现内容滚动现有两种方式，一种是将滚动内容的显示位置信息在固定的矩形区域中递增或递减来实现滚动效果，但此方法仅适用于单纯的文字，无法实现一段HTML代码段的滚动效果，因为HTML代码段不是直接可供显示的内容，需要先经过浏览器结合其上下文进行HTML/CSS等解析，才能形成滚动的显示内容；

另一种是将滚动内容的最终显示数据形成位图，动态更改位图的显示位置来形成滚动效果，此方法下，一旦滚动内容长度较长，则会造成CPU占用过大，程序响应速度缓慢的问题。

发明内容

本发明所要解决的技术问题是，提供一种在嵌入式浏览器中，CPU占用资源小且能够承载多种滚动内容形式的跑马灯效果的实现方法。

本发明为所要解决的技术问题所采用的技术方案是，嵌入式浏览器中实现跑马灯效果的方法，包括以下步骤：

a、在主页面中设置由图形引擎通过窗口控件生成的子窗口，子窗口的尺寸和marquee窗口的尺寸相同；

b、将待滚动内容作为子窗口的内置页面的一部分，该内置页面对应一个marquee标签，设置内置页面中该marquee标签的滚动方向、滚动形式、滚动速度；

c、沿滚动方向在待滚动内容的两端分别添加一个与子窗口高度相同、宽度相同的空白区域；所述空白区域由滚动目标端空白区域、滚动起始端空白区域组成；待滚动内容与滚动目标端空白区域、滚动起始端空白区域共同构成子窗口的内置页面；

d、将滚动起始端空白区域作为子窗口的起始显示部分；

e、设置定时器，定时向子窗口发送滚动消息，使得子窗口的内置页面的内容向设定的滚动方向滚动；

f、对进入子窗口的内置页面部分进行解析、显示。

采用由图形引擎通过窗口控件生成的子窗口作为marquee窗口，将待滚动的内容作为子窗口的内置页面，除能正常显示文字、图片等内容外，还可对HTML代码段进行CSS解析，从而实现对HTML代码段的显示。无需待滚动内容的长度多大，子窗口仅对其可视区域的内置页面部分(进入该子窗口的内置页面部分)进行解析、显示，避免出现因待滚动内容长度过大而造成占用CPU资源过大，程序响应缓慢的问题。

具体的，当滚动方向设为向左，则在待滚动内容的左右两端分别添加一个与子窗口高度相同、宽度相同的空白区域，待滚动内容的右端空白区域作为滚动目标端空白区域、待滚动内容的左端空白区域作为滚动起始端空白区域；

当滚动方向设为向右，则在待滚动内容的左右两端分别添加一个与子窗口高度相同、宽度相同的空白区域，待滚动内容的左端空白区域作为滚动目标端空白区域、待滚动内容的右端空白区域作为滚动起始端空白区域；

当滚动方向设为向上，则在待滚动内容的上下两端分别添加一个与子窗口高度相同、宽度相同的空白区域，待滚动内容的下端空白区域作为滚动目标端空白区域、待滚动内容的上端空白区域作为滚动起始端空白区域；

当滚动方向设为向下，则在待滚动内容的上下两端分别添加一个与子窗口高度相同、宽度相同的空白区域，待滚动内容的上端空白区域作为滚动目标端空白区域、待滚动内容的下端空白区域作为滚动起始端空白区域。

具体的，步骤b中对marquee标签的设置还包括：文本颜色、背景颜色、循环、延时、高度、宽度、空白。

进一步的，当显示2组以上的待滚动内容，每组待滚动内容对应创建一个子窗口，为每一个子窗口分配一个marquee标签。等待所有子窗口中需显示带滚动内容的都准备好了以后，统一刷新。

本发明的有益效果是，不受待滚动内容类别的限制，支持常见的内容滚动效果，不过多占用CPU资源，保证嵌入式浏览器的工作性能。

附图说明

图1为滚动方向为向左时，且置页面仅有1个marquee标签时，滚动开始时的初始状态示意图，图中粗线框表示为子窗口；

图2为滚动方向为向左时，且置页面仅有1个marquee标签时，滚动进行时的状态示意图，图中粗线框表示为子窗口；

图3为滚动方向为向左时，且置页面仅有1个marquee标签时，一次滚动完成时的状态示意图，图中粗线框表示为子窗口；

图4滚动方向为向上时，内置页面仅有1个marquee标签时的示意图。

具体实施方式

将marquee窗口作为主页面的子窗口参与排版，在图形引擎中建立窗口控件，将待动内容形成一个内置页面，呈现在该子窗口控件中，注册回调函数，并通过定时器，定时向marquee窗口发送滚动消息，实现自动滚屏。

生成内置页面的方式，使得滚动内容不受限制，可以是文字、表格、图片，也可以是任何一段代码所呈现出来的效果。

内容自动滚动的实现：

将待滚动内容形成一个内置页面呈现在marquee窗口中。记录marquee窗口建立时分配的句柄，设定定时器，定时向该窗口句柄发送滚动消息。

为应对同一页面内存在多个marquee的情况，marquee窗口的句柄保存在该窗口构件相对应的数据结构中。

子窗口的生成和管理：

据滚动方向不同，内置页面的生成也不同，主要表现在待滚动内容两端的空白区域上。以滚动方向为水平向左为例，则以marquee窗口的高度为高度，以marquee窗口的宽度为宽度，形成左右端两个空白区域，拼接在待滚动内容左右。子窗口滚动前呈现的初始状态，即为左端空白区域，如图1所示；当子窗口收到滚动消息，内置页面开始滚动时，待滚动内容从子窗口右侧进入，向左滚动，即形成预期的滚动效果，如图2所示；当滚动到末尾的时候，呈现给用户的依然是空白区域，具体是右端空白区域，如图3所示，此次滚动结束。如有循环，再将内置页面重新定位到最初的左端空白区域位置，重新开始一轮滚动，以实现循环滚动的效果。

当marquee标签的滚动方向为水平方向时，若滚动内容为文字，则要求该段文字在内置页面中排列为一行，而不受到页面宽度的限制。当滚动方向为竖直方向时，若滚动内容为文字，则要求该段文字在内置页面中排列为一列，而不受到页面长度的限制。如图4所示，当滚动方向为向上时，则以marquee窗口的高度为高度，以marquee窗口的宽度为宽度，形成上下端两个空白区域，拼接在待滚动内容左右。子窗口滚动前呈现的初始状态，即为上端空白区域，滚动实现类似水平向左的实现方式。

对于多个marquee标签的情况，每一个内置页面文件的命名采用随机生成的方式。各marquee窗口之间互不干扰，各自拥有各自的属性。

marquee标签中img(图形)标签的实现：

如在marquee标签中定义了<img>则涉及到图片src的处理。若图片的src采用相对路径表示，浏览器就需要在形成内置页面之前就此路径转换为固定路径以保证图片能够正确获得。

在Html_tag_close_marquee中添加了相应的处理代码。如果图片路径不是以”http”开头则表示其为相对路径。如果是以”/”开头，则表示此路径是基于EPG服务器的根路径定义的；否则表示此路径是基于当前页面所在的服务器路径定义的。

内置页面的管理：

主页面中可能会同时存在多个marquee标签。每个marquee标签对应一个内置页面。调用ch_marquee_rand_name函数生成随机名称的内置页面，并和各个marquee标签形成一一对应关系。这些内置页面都会生成在固定路径(比如/tmp)。在主页面退出的时候，需要清理本页面内所有marquee标签相关的资源，也包括相应的内置页面。

多个marquee同时显示的优化：

多个marquee窗口同时显示，其滚动的时间点不统一，则浏览器刷新的时间点也不同。当两个marquee窗口刷新的时间差很小时，会形成闪烁。此时，使用如下方法进行处理：等待页面中所有的marquee标签都准备好后才开始绘图显示。应该等待多个marquee窗口的显示数据都准备好了以后，统一刷新一次。在一个页面退出的时候，构件会逐个消除释放，当前页面相关的marquee窗口的内置页面文件，也将会被释放，以达到对内置页面的有效管理。

marquee宽度/高度的计算算法：

marquee标签在使用时，可以明确定义其宽度和高度，也可不做定义。在不做定义的情况下，需要浏览器来计算其宽度和高度。在浏览器解析模块中，marquee窗口建立之初，若网页代码中没有定义其宽度、高度，可建立一个宽度和高度都为1的窗口。在程序运行至排版模块时，计算并继承其父元素(此处的父元素，指页面代码中，marquee标签外层的HTML标签元素)的宽度和高度，根据最新的数据调整其窗口大小。在最终确定了marquee窗口大小之后，即可创建其对应的内置页面，并设定定时器，注册其回调函数。而更改marquee构件的窗口大小，则是GUI程序负责的事情，有专门的函数可以完成此功能。

对marquee标签中各属性的支持：

滚动速度：有两种方法可以实现速度属性：1)可通过调整定时器的间隔时间来调整速度。间隔时间越小，滚动速度越快。2)可通过调整滚动的步长参数来调整。

滚动方式：页面滚动至两侧终点的时刻都可根据计算判断。若滚动方式为scroll，当页面尾端滚动至一侧终点，即将窗口可视区域初始化至开始位置，之后继续向该窗口发送同一方向的滚动消息；若滚动方式为alternate，当页面前端滚动至一侧终点，就向该窗口发送相反方向的滚动消息。

循环：统计页面滚动至两侧终点的次数，即可限制marquee的滚动次数，次数达到要求后可注销回调函数，消除定时器。

延时：在回调函数中，添加sleep函数。

背景色：当定义了背景色时，可将内置页面的body的背景色定义为相同颜色；当没定义背景色时，创建窗口的时候，创建一个透明窗口。

空白：对内置页面元素添加padding(元素内边距)属性。在排版模块中，padding属性添加在元素宽度中得以实现。

Claims

1.嵌入式浏览器中实现跑马灯效果的方法，其特征在于，包括以下步骤：

d、将滚动起始端空白区域作为子窗口的起始显示部分；

f、对进入子窗口的内置页面部分进行解析、显示。

2.如权利要求1所述嵌入式浏览器中实现跑马灯效果的方法，其特征在于，当滚动方向设为向左，则在待滚动内容的左右两端分别添加一个与子窗口高度相同、宽度相同的空白区域，待滚动内容的右端空白区域作为滚动目标端空白区域、待滚动内容的左端空白区域作为滚动起始端空白区域；

3.如权利要求1或2所述嵌入式浏览器中实现跑马灯效果的方法，其特征在于，步骤b中对marquee标签的设置还包括：文本颜色、背景颜色、循环、延时、高度、宽度、空白。

4.如权利要求3所述嵌入式浏览器中实现跑马灯效果的方法，其特征在于，当主页面退出的时候，清理当前主页面内所有marquee标签及其对应的内置页面。