|Publication number||US7271815 B2|
|Application number||US 10/970,510|
|Publication date||Sep 18, 2007|
|Filing date||Oct 21, 2004|
|Priority date||Oct 21, 2004|
|Also published as||US20060098029|
|Publication number||10970510, 970510, US 7271815 B2, US 7271815B2, US-B2-7271815, US7271815 B2, US7271815B2|
|Inventors||Patrick J. Clas|
|Original Assignee||International Business Machines Corporation|
|Export Citation||BiBTeX, EndNote, RefMan|
|Patent Citations (15), Referenced by (4), Classifications (10), Legal Events (6)|
|External Links: USPTO, USPTO Assignment, Espacenet|
The invention relates generally to computer system user interfaces, and more particularly to a technique to make a portion of a displayed image blink.
Hyper Text Markup Language (“HTML”) web pages and other images are well known today for display on a computer screen. In some applications it is desirable to make a portion of a displayed image blink. For example, it may be beneficial to focus a user's attention on an icon which represents a problem component or an action item. In such a case, the icon can be made to blink to distinguish it from other static portions of the image and alert the user that action related to the icon is required. There are known techniques to make a portion of a displayed image blink.
In one known technique, an icon can be made to blink by using an animated GIF. In this process, a developer/person uses an existing “paint” program such as JASC Paint Shop Pro program to define two images. The “paint” program provides a library of shapes, symbols, backgrounds and other graphics to assist the user in “drawing” each state of the image. The user can select, move and modify these shapes, symbols and backgrounds as needed to form the images. The user can also use a cursor to draw freehand other shapes as needed to form the images. One image includes the actual icon surrounded by a background region. The background region can be a color or a pattern, such as solid white. The other image comprises just the same background color or pattern with no icon. The developer saves each resultant image file as a (static) GIF file.
Then, the developer invokes an animated GIF program, such as JASC Animation Shop program, to create an animated GIF file using the two (static) GIF files just created. To convert to the animated GIF file, the user identifies or inputs a list of image files to be included in the animation, as well as the length of time each one should be displayed and the order of display. The user also specifies whether the animation should repeat the display of each image in a loop or simply run once and stop. Based on the sequencing, display duration and specification whether the images should be repeated, the animation program translates these images into frames in the animation. Then, the animation program saves the resultant images as an animated GIF file.
Next, the developer defines an HTML file to define a web page. The HTML file includes the name of the animated GIF file. If there is more than one icon or other graphic in the HTML web page, then there will be separate animated or static GIF files for each of them, and the HTML will include the names of these other GIF files as well. If there is text in the web page, then the HTML will define the text directly and its location without reference to a file. When a web browser at a client computer requests the HTML file, a server sends the HTML file and associated GIF files to the Web browser. Modern Web browsers such as Microsoft Internet Explorer browser and Netscape browser have programming to interpret the foregoing HTML file which includes the text and references to the GIF files. Thus, the Web browser will fetch and display both the static and animated GIF images, and will display the different states of the animated GIF images as specified in the animated GIF file. The Web browser will also display the text as specified directly in the HTML file.
It was known to create a single image by defining multiple, superimposed virtual image layers. Each virtual image layer is defined by a separate static or animated GIF file. It was known to define some portions of the outer virtual layer(s) to be transparent to allow the image of the underlying virtual layer to show through. The existing Microsoft Internet Explorer and Netscape Web browsers have programming to interpret these virtual image layers.
U.S. Pat. No. 6,275,236 to Delahunty discloses a system and method for displaying tracked objects on a display. A blinking object may be drawn on top or underneath another object. When the blinking object is turned off (“hidden or “transparent”), areas and objects underneath the blinking object are made visible. When the blinking object is turned on (“visible”), any object underneath the blinking object will be obscured while objects above the blinking object obscure the blinking object. The current location and sequentially displayed previous locations are displayed by unmasking overlay data in the corresponding pixel values.
An object of the present invention is to provide an improved technique for making a portion of a displayed image blink.
The invention resides in a system, method and computer program for displaying an image with a blinking portion. A first virtual image layer is defined in a first file to comprise a first background region. A second virtual image layer is defined in a second file to comprise a background region in one state and a transparent region in another state. The second background region is different in appearance than the first background region. The second virtual image layer is logically located on top of the first virtual image layer. The file defines that the second virtual image layer repeatedly alternates between the one and other states. A third file defines a third virtual image layer to comprise a symbol surrounded by a transparent region. The third virtual image layer is logically located on top of the second virtual image layer. The second and third virtual image layers are approximately a same shape and size as each other, are approximately superimposed on each other, and are located over a portion or all of the first virtual image layer.
In accordance with features of the present invention, the first, second and third virtual image layers are all approximately a same shape and size as each other, and are approximately superimposed on each other. The definitions of the first, second and third virtual image layers are supplied to a Web browser that can render overall images that logically combine the first, second and third virtual image layers based on the definitions of the first, second and third virtual image layers. The Web browser is operated such that when the second virtual image layer is in the one state, the Web browser displays the second background region on a display screen surrounding the symbol, and when the second virtual image layer is in the other state, the Web browser displays the first background region on the display screen surrounding the symbol. Consequently, the region surrounding the symbol blinks between the one background region and the other background region.
The present invention will now be described in detail with reference to the figures, wherein like reference numbers indicate like elements.
These image layers 1, 2 and 3 are “virtual” because display screens 19 (of the developer and the user) only have one real layer of imaging. The web browsers 15 (of the developer and the user) logically combine the three virtual images to determine and display on screen 19 what will be apparent logically at the outer surface of virtual image layer 3. The developer defines and uses three virtual images instead of one consolidated image layer because it is easier to define the desired blinking image using the three virtual layers, as described below. In the illustrated example, these virtual image layers comprise part or the entirety of an HTML web page, although they could comprise part or the entirety of other documents or diagrams as well. The following describes the three virtual Image layers 1, 2 and 3 in more detail.
Virtual Image 3 layer comprises a symbol or icon 44 and a transparent background region 46, such as enclosed by the sides of a rectangular. The specific design of the symbol or icon 44 is not important to the present invention, and could be a simple action button or a shape of a component being represented. In this embodiment of the present invention, Image 3 layer is static; the symbol or icon 44 itself is constant and does not blink or vary, and the transparent background region 46 stays transparent and does not blink or vary. As described in more detail below, the virtual Image 2 layer and the virtual Image 1 layer alternately appear through the transparent background region 46 surrounding symbol or icon 44 to make the background region 46 appear to blink to the user.
The virtual Image 2 layer has two states. One state is a background color or pattern such as solid white, and the other state is a transparent state. The specific background color or pattern of the virtual Image 2 layer should be the same as the background color or pattern of the surrounding document or web page (visible to the end user) in order to create the desired effect. (The specific background color or pattern of the virtual Image 2 layer should contrast with the background color or pattern of the virtual Image 1 layer.) In the illustrated example, the surrounding background of the document or web page is solid white, so the Image 2 layer background or color should be solid white as well. In the illustrated embodiment, the perimeter of the transparent background region 46 of virtual Image 1 layer is the same as the perimeter of the virtual Image 2 layer.
After defining the two states of virtual Image 2 layer, the developer invokes the animation program 22 such as the JASC Animation Shop program, identifies the two GIF files for the virtual Image 2 layer as being two states of the same image layer, specifies the duration that each state should be displayed, and specifies whether the alternation between the two states should be continuous or should end after a certain number of alternations. In response, the animation program 22 converts the two virtual Image 2 static GIF files to one virtual Image 2 animated GIF. Then, the animation program saves the resultant images as an animated GIF file.
The virtual Image 1 layer comprises a background color or pattern which is different than that of the Image 2 background color or pattern state, and provides the contrasting color or pattern for the blinking. In the illustrated example, the background color or pattern of the Image 1 layer resembles a bricked wall, although this is just an example. In this embodiment of the present invention, virtual Image 1 layer is static; the background color or pattern of the virtual Image 1 layer does not blink or vary. In the illustrated embodiment, the perimeter of the transparent background region 46 of virtual Image 1 layer is the same as the perimeter of the virtual Image 2 layer and the same as the perimeter of the virtual Image 1 layer.
Next, the developer defines an HTML web page which references the three GIF files (called image1.gif, image2.gif and image3.gif) for the three respective virtual Image layers 1, 2 and 3. In the illustrated example, the HTML for the web page is as follows:
<html> <head> <title>Background Blinking Technique Demonstration</title> </head> <body bgcolor=“white”> <img src=“image1.gif” style=“position:absolute; left:0; top:0; z-index:1”> <img src=“image2.gif” style=“position:absolute; left:0; top:0; z-index:2”> <img src=“image3.gif” style=“position:absolute; left:0; top:0; z-index:3”> </body> </html>
Thus, the HTML identifies the GIF file for each virtual Image 1, 2 and 3 and its location. In the illustrated embodiment, all the locations specified in the HTML for the three virtual Image layers 1, 2 and 3 are coincident with each other, i.e. all three virtual images are superimposed on one another. In the illustrated embodiment, all of the virtual Images 1, 2 and 3 are the same size and shape as each other, although the virtual image layers 1, 2 and 3 could be of different sizes. For example, the virtual Image 3 layer could be the same size and shape as the virtual Image 2 layer (and superimposed on the virtual Image 2 layer), and the virtual Image 1 layer can be much larger than the virtual Image 1 layer and virtual Image 2 layer (where the virtual Image 3 layer and virtual Image 2 layer are located over a portion of the virtual Image 1 layer).
After the HTML for the web page is defined, the developer sends it to server 13 where it will be available to clients by supplying the respective URL or other identifier. In such a case, the server will furnish the HTML and associated GIF files to client computer 17 via the Internet 21 (or other network) upon request by the client computer 17. In response to the HTML for the web page, web browser 15 on client computer 21 processes the HTML. From the HTML, the web browser 15 determines that the three virtual images are “stacked” on top of each other because the x and y coordinates (left, top) are the same, for example, “zero” for all three images. The only difference in position is the z coordinate which determines the stacking order. The z coordinate corresponds to the order shown where the higher the z-Index, the closer the virtual image layer to the surface of the screen. In the above code, Image 3 layer is “above” Image 2 layer, and Image 2 layer is “above” Image 1 layer. When processing the HTML, web browser 15 fetches each of the referenced GIF files for virtual Images 1, 2 and 3. Each of the GIF files for virtual Images 1, 2 and 3 defines the graphical composition/appearance of the virtual Image layer as described above. The animated GIF file for virtual Image 2 layer defines two separate virtual images. The animated GIF file for virtual Image 2 layer also includes information indicating the duration that each of the image states should be displayed before alternating to the other image state. Typically, in a blinking mode, each state is displayed for equal durations, such as a duration between 0.2 and 0.5 seconds each, and the blinking is continuous (until the icon is selected). As explained above, virtual Image 2 layer blinks (or varies) between one background color or pattern such as solid white (as illustrated) and a transparent state. When the Image 2 layer exhibits its own background color or pattern state, its own background color or pattern obscures the background color or pattern of virtual Image 1 layer and shows through the transparent background region 46 surrounding the symbol or icon 44 in the Image 3 layer. Thus, the background color or pattern of the virtual Image 2 layer is visible on the display screen 19 in this one state of the virtual Image 2 layer. When Image 2 layer exhibits its transparent state, the background color or pattern of the Image 1 layer shows through the transparent Image 2 layer and the transparent background region 46 surrounding the symbol or icon 44. Thus, the background color or pattern of the virtual Image 1 layer is visible on the display screen in this other state of the virtual Image 2 layer. Thus, the alternation of states of the Image 2 layer causes the apparent blinking or variation of the background region 46 for the symbol or icon 44.
Based on the foregoing, a system, method and program have been disclosed for causing a region surrounding an icon or other symbol to blink. However, numerous modifications and substitutions can be made without deviating from the scope of the present invention. For example, the background color or pattern state of the virtual Image 2 layer can be different than the surrounding background of the web page or other document. As another example, the background region of the virtual Image 2 layer could be divided into two halves or four quadrants, each with two, independently controllable states—transparent or solid white (or other background color of the overall image). In such a case, each half or quadrant could be made to blink by specification that that half or quadrant should alternate between the background color state and the transparent state. If blinking is not desired for a half or quadrant, then the state of that half or quadrant is fixed at the solid white state. Blinking of each half or quadrant represents a different, respective condition. For example, blinking of one half could indicate that a processor is turned off whereas blinking of the other half could indicate that the processor has not been IML'd. Therefore, the present invention has been disclosed by way of illustration and not limitation, and reference should be made to the following claims to determine the scope of the present invention.
|Cited Patent||Filing date||Publication date||Applicant||Title|
|US4757309||Jun 24, 1985||Jul 12, 1988||International Business Machines Corporation||Graphics display terminal and method of storing alphanumeric data therein|
|US5646645||Jan 16, 1996||Jul 8, 1997||Nikon Corporation||Flashing LCD display system|
|US6275236||Jan 24, 1997||Aug 14, 2001||Compaq Computer Corporation||System and method for displaying tracked objects on a display device|
|US6295061 *||Nov 30, 1999||Sep 25, 2001||Dbm Korea||Computer system and method for dynamic information display|
|US6337699||Jun 27, 1996||Jan 8, 2002||Sun Microsystems, Inc.||Visualizing degrees of information object attributes|
|US6486880||Jul 2, 1996||Nov 26, 2002||Koninklijke Philips Electronics N.V.||Transmission of pixel data defining two motion phases of a graphic image|
|US6587118 *||Mar 24, 2000||Jul 1, 2003||Sony Corporation||Image displaying processing method, medium including an image displaying processing program stored thereon, and image displaying processing apparatus|
|US6661438||Jan 18, 2000||Dec 9, 2003||Seiko Epson Corporation||Display apparatus and portable information processing apparatus|
|US6904408 *||Oct 19, 2000||Jun 7, 2005||Mccarthy John||Bionet method, system and personalized web content manager responsive to browser viewers' psychological preferences, behavioral responses and physiological stress indicators|
|US6981227 *||Feb 4, 2002||Dec 27, 2005||Mircrosoft Corporation||Systems and methods for a dimmable user interface|
|US7106275 *||Dec 14, 2001||Sep 12, 2006||Apple Computer, Inc.||Rendering translucent layers in a display system|
|US7106343 *||Apr 7, 2004||Sep 12, 2006||Carter Hickman||Method and process for virtual paint application|
|JPH01248190A||Title not available|
|JPH02100098A||Title not available|
|JPH02189583A||Title not available|
|Citing Patent||Filing date||Publication date||Applicant||Title|
|US9201672||Dec 3, 2010||Dec 1, 2015||Revizer Technologies Ltd||Method and system for aggregation of search results|
|US20080059583 *||Sep 5, 2007||Mar 6, 2008||Rhub Communications, Inc.||Browser based web conferencing employing layering to display screen updates|
|US20100313252 *||Jun 8, 2009||Dec 9, 2010||Erie Trouw||System, method and apparatus for creating and using a virtual layer within a web browsing environment|
|WO2017100761A1 *||Dec 12, 2016||Jun 15, 2017||Appelago Inc.||Floating animated push interfaces for interactive dynamic push notifications and other content|
|U.S. Classification||345/629, 345/619, 345/592, 345/473|
|International Classification||G06T15/70, G09G5/00, G09G5/02, G06T13/00|
|Dec 23, 2004||AS||Assignment|
Owner name: INTERNATIONAL BUSINESS MACHINES CORPORATION, NEW Y
Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNOR:CLAS, PATRICK J.;REEL/FRAME:015491/0081
Effective date: 20041015
|Apr 25, 2011||REMI||Maintenance fee reminder mailed|
|Jun 15, 2011||FPAY||Fee payment|
Year of fee payment: 4
|Jun 15, 2011||SULP||Surcharge for late payment|
|Jul 12, 2011||AS||Assignment|
Owner name: GOOGLE INC., CALIFORNIA
Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNOR:INTERNATIONAL BUSINESS MACHINES CORPORATION;REEL/FRAME:026664/0866
Effective date: 20110503
|Mar 18, 2015||FPAY||Fee payment|
Year of fee payment: 8