Systems and methods for rich presentation overlays

Systems and methods are disclosed for rendering a presentation document on a plurality of client computing devices by a server. A method includes creating a base layer for a page in the presentation document, wherein the base layer comprises a plurality of placeholder elements wherein each placeholder element has an absolute position and size. The method further includes creating an interactive layer for the page in the presentation document, wherein the interactive layer comprises a plurality of interactive element overlays representing a plurality of interactive elements and each interactive element overlay has an absolute position and size that corresponds to the absolute position and size of a placeholder element in the base layer. The method further includes sending the base layer and interactive layer of the page to each client computing device for rendering, wherein each interactive element overlay is rendered on top of its corresponding placeholder element.

FIELD OF THE DISCLOSURE

The present disclosure relates generally to rendering presentations on a computing device and in particular to rendering interactive elements in collaborative document processing systems.

BACKGROUND OF THE INVENTION

Electronic presentation documents have grown in complexity over the years. In addition to having text and images, users can now add rich media content and other interactive content such as Internet hyperlinks, audio, and video. Presentation software applications have advanced to allow the addition of a variety of content on presentation documents. However, the presentation software application must be installed on each computing device in order for a user to view or edit the presentation on that device.

Recently, online document processing applications have been developed which make it possible for people to create word processing, spreadsheets and presentation documents without having specific document processing software specially installed on their computing device. These online applications provide access to the document processing features through an Internet browser. The actual documents are stored on the application server, but may be downloaded locally to a client computing device. Because the documents are stored centrally and are accessed via an Internet browser, it is possible for multiple people to view, edit, and share the document regardless of the hardware and software capabilities of the computing device they are using.

Online document processing applications are usually compatible with a variety of Internet browsers available in the consumer market. However, each browser is programmed differently which can result in differences in appearance of the same content in different browsers. Furthermore, some browsers may not be able to support more advanced presentation features such as video. For example, more modern browsers use scalable vector graphics (SVG) to implement basic presentation features such as text, images, and animations. Modern browsers usually also have the capability of embedding HTML features into SVG. Older browsers may render presentation features differently, for example through the use of portable network graphics (PNG). Neither SVG nor PNG are capable of embedding videos into the presentation.

SUMMARY OF THE INVENTION

Given the wide variance in Internet browsers, it is preferable to develop systems and methods to edit and view interactive elements in online presentation documents that are browser-independent. Systems and methods are disclosed herein for rendering a presentation document on a client computing device by a server. In one aspect, a computerized method includes creating a base layer for a page in the presentation document, wherein the base layer includes a plurality of placeholder elements and wherein each placeholder element has an absolute position and size. The method further includes creating an interactive layer for the page, wherein the interactive layer includes a plurality of interactive element overlays representing a plurality of interactive elements, and wherein each interactive element overlay has an absolute position and size that corresponds to the absolute position and size of a placeholder element in the base layer. The method further includes sending the base layer and interactive layer to the client computing device for rendering, wherein each interactive element overlay is rendered on top of its corresponding placeholder element.

In another aspect, a computerized method for displaying a presentation document on a plurality of client computing devices is disclosed. The method includes creating a base layer for a page in the presentation document, wherein the base layer includes a plurality of placeholder elements and wherein each placeholder element has an absolute position and size. The method further includes creating an interactive layer for the page in the presentation document, wherein the interactive layer includes a plurality of interactive element overlays representing a plurality of interactive elements, and wherein each interactive element overlay has an absolute position and size that corresponds to the absolute position and size of a placeholder element in the base layer. The method further includes sending the base layer and interactive layer of the page in the presentation document to each client computing device for rendering, wherein each interactive element overlay is rendered on top of its corresponding placeholder element.

In another aspect, a system for displaying a presentation document on a plurality of client computing devices is disclosed. The system includes a server configured to create a base layer for each page in the presentation document, wherein each base layer includes a plurality of placeholder elements and wherein each placeholder element has an absolute position and size. The server is further configured to create an interactive layer for each page in the presentation document, wherein the interactive layer includes a plurality of interactive element overlays representing a plurality of interactive elements, and wherein each interactive element overlay has an absolute position and size that corresponds to the absolute position and size of a placeholder element in the base layer. The server is further configured to send the base layer and interactive layer of each page of the presentation document to each client computing device for rendering, wherein each interactive element overlay is rendered on top of its corresponding placeholder element.

In another aspect, a computerized method of editing a presentation document on a client computing device where the presentation document is stored on a server is disclosed. The method includes defining a plurality of interactive element overlays to be placed on the page, wherein the plurality of interactive element overlays represents a plurality of interactive elements, and placing a plurality of placeholder elements corresponding to the plurality of interactive element overlays on the page.

DETAILED DESCRIPTION

To provide an overall understanding of the invention, certain illustrative embodiments will now be described, including systems and methods for displaying a document on a plurality of client computing devices by a server. However, it will be understood by one of ordinary skill in the art that the systems and methods described herein may be adapted and modified as is appropriate for the application being addressed and that the systems and methods described herein may be employed in other suitable applications, and that such other additions and modifications will not depart from the scope thereof.

FIG. 1depicts a client-server system for viewing presentation documents. Client-server system100includes a server101and multiple client computing devices103through109. These client computing devices may include desktop computers like devices103and105, laptop computers like device107, and handheld electronic devices like device109. Computing devices that can be used in client-server system100are not limited to the devices depicted inFIG. 1and can encompass a wide variety of devices. Each computing device can communicate with server101. The devices can communicate with the server through a local area network (LAN), wide area network (WAN), an Internet connection, or any other form of electronic communication. Each computing device in system100has an Internet browser installed on it. Internet browsers allow computing devices to view web pages on the Internet. Examples of Internet browsers are Google Chrome, Microsoft Internet Explorer and Mozilla Firefox, but the types of Internet browsers contemplated are not limited to the ones listed. Server101can store documents that can be accessed by any computing device in system100. Such documents may include presentations. One or more users can access the server101through the computing devices to view and edit documents or share documents with other users. Server101controls the rendering of presentation documents on the computing devices to ensure uniform appearance and functionality regardless of the specific hardware or software capabilities of the computing devices. Although illustrated as a single device inFIG. 1, server101may be implemented as, for example, a single computing device or as multiple distributed computing devices.

The server in client-server system100will now be discussed in greater detail.FIG. 2depicts a server200which includes a processor201, input and output devices203, a communications interface205, read-only memory (ROM)207, random access memory (RAM)209, database211, and bus213. The bus213enables every component in server200to electronically communicate with each other. Input/output devices203may include a keyboard, mouse, display screen, touchpad, speakers, or any other compatible input or output device. Communications interface205may be a network connection, Internet connection, or any other type of electronic communication component. In one embodiment, the communications interface205can communicate with multiple client computing devices, such as desktop computers, laptops, and handheld devices. Database211can store electronic documents that can be accessed by clients through communications interface205.

Processor201may be configured to perform tasks such as sending electronic documents stored in database211to multiple client computing devices using communications interface205, receiving edits to electronic documents stored in database211from client computing devices, and generating presentation rendering information to be displayed on client computing devices. Processor201may be configured to ensure that presentation documents stored in database211and distributed to different computing devices will all be enabled to view interactive elements within the presentation document.

Processors suitable for the execution of a computer program include, by way of example, both general and special purpose microprocessors, and any one or more processors of any kind of digital computer. Generally, a processor will receive instructions and data from RAM or ROM or both. The essential elements of a computer are a processor for performing instructions and one or more memory devices for storing instructions and data. Computer-readable media suitable for storing computer program instructions and data, such as database211, include all forms of non-volatile memory, media and memory devices, including by way of example semiconductor memory devices, e.g., EPROM, EEPROM, and flash memory devices; magnetic disks, e.g., internal hard disks or removable disks; magneto-optical disks; and CD-ROM and DVD-ROM disks. The processor and the memory can be supplemented by, or incorporated in, special purpose logic circuitry.

Methods of editing and rendering presentation documents on an online document processing application will now be discussed. A presentation document usually has a number of pages, each page holding a variety of content. This content could be static, as in text, images and background, but may also be interactive. Interactive elements in a presentation may include but are not limited to audio, video, data displays, interactive charts, applets, games, editable forms and hyperlinks. In some embodiments, an interactive element may be any content that an user can view, listen, or dynamically interact with through a mouse click, keyboard input, cursor scroll, or any other input.

When rendering an online presentation document stored on an Internet browser, problems may occur displaying the interactive elements because of differences in how different browsers operate. For example, a browser may not be able to render an interactive element properly and thus it will not be displayed properly to a viewer of the presentation. This may be solved by separating each page in the presentation document into two layers at the time of rendering, the base layer and the interactive layer. The server uses placeholder elements to represent interactive elements on the base layer and uses interactive element overlays to represent interactive elements on the interactive layer. When rendered in such a fashion, the interactive elements should appear properly regardless of the browser used by the viewer of the presentation.

In order to render a presentation document in two layers, placeholder elements are generated during the editing process. When editing a presentation document, the static elements can be placed directly on the page. The interactive elements of the page can be represented by placeholder elements.FIG. 3Adepicts an example of a presentation page300A with static elements301and placeholder element303A. The number of static and placeholder elements and their placement can vary and are not limited to what is illustrated inFIG. 3A.

Placeholder element303A has a specific placement on the page, as illustrated by the (x, y) coordinates of the top left corner of the placeholder element inFIG. 3A. Placeholder element303A also has a specific width and height. The size and position of placeholder element303A correspond exactly to the size and position of the interactive element that will be on the presentation page. A user can change the size and position of the placeholder element while editing the presentation page. Placeholder element303A contains information regarding the interactive element it represents. For example, if the interactive element is a video, the placeholder element may contain information about the content source of the video and an ID referring to a specific piece of content. If the interactive element is a hyperlink, the placeholder element may be a piece of text or an image that represents the hyperlink, as well as the hyperlink address. Placeholder elements can be stacked or overlapped in a specific order on the presentation page. Also, placeholder elements can be placed on the workspace outside the bounds of the presentation page—these would not be visible in the actual presentation.

When rendering a presentation page for display within an Internet browser on a computing device, the server creates two layers for each page in the presentation. The first layer is the base layer, which contains the static elements and placeholder elements representing any interactive elements on the page. The second layer is the interactive layer, which represents the interactive elements.FIGS. 3A and 3Bdepict a base layer300A and an interactive layer300B for a single page in a presentation document. Base layer300A may have the same appearance as the presentation page during editing of the page, i.e. it contains the static and placeholder elements. In some embodiments, the base layer is represented as one or more SVG or PNG image files. In some embodiments, the base layer may be represented by a number of image formats, including JPEG, GIF and TIFF. For interactive layer300B, the server finds all the placeholder elements in the page that have interactive content. For each of these placeholder elements, a JavaScript Object Notation (JSON) object is created for each interactive element, as illustrated as interactive element overlay303B inFIG. 3B. The interactive element overlay has size and position properties that precisely match the interactive element and its corresponding placeholder element303A inFIG. 3A. If there are multiple overlapping interactive elements on a presentation page, the interactive element overlays created by the server will list the overlays in the order in which they are stacked. Interactive layer300B is a collection of these interactive element overlays.

Once the server has created both the base layer and the interactive layer, the server sends both layers to the computing device for rendering. First, the computing device renders the base layer, which may be a PNG, JPEG, GIF, TIFF or SVG image. The base layer contains the static and placeholder elements, as illustrated inFIG. 3A. The computing device then renders the interactive layer, illustrated inFIG. 3B, on top of the base layer so that any interactive element overlays303B are directly on top of its corresponding placeholder elements303A. All interactive elements are rendered in such a manner that the viewer perceives the placeholder element, interactive element overlay, and interactive element as a single object. For example, if the interactive element is a video, the interactive element overlay would completely hide the placeholder element so that it cannot be seen during the presentation. A user can interact with the video as normal, for example using the mouse or keyboard controls to play the video. If the interactive element is a hyperlink, the interactive element overlay would be a transparent and/or invisible DIV element over the placeholder element. A DIV element is a HTML tag that denotes non-standard presentation or behavior within a HTML document. The user sees the placeholder element, which may be text or an image that represents the hyperlink, but when the user tries to click on the placeholder element the DIV element intercepts the click and directs the user's Internet browser to load the hyperlink.

If a presentation page has overlapping stacked interactive elements, then the placeholder elements in the base layer and their corresponding interactive element overlays in the interactive layer are stacked in the same position and order. This is illustrated inFIG. 4. Placeholder elements401A through404A are stacked in a particular order and position in the base layer, with placeholder element401A at the bottom of the stack and placeholder element404A at the top of the stack. In the interactive layer, the interactive element overlays401A through404A are kept in exactly the same position and order as their corresponding placeholder elements. This ensures that the presentation page is rendered exactly as the user specifies.

While viewing a presentation document on an Internet browser, a user can resize the browser window. If this occurs, the presentation page that is being viewed must also be resized to fit the new size of the browser. This involves resizing both the base layer and the interactive layer of the presentation page. Resizing the base layer is fairly simple. For example, if the base layer is a SVG or PNG image, then the image can simply be scaled proportionately to the resized browser window. Resizing the interactive layer is slightly more complicated because the interactive element overlays are positioned according to absolute coordinates to match with corresponding placeholder elements. In some embodiments, the server waits for a browser resizing event. When the server detects a resize event, it calculates the new overall size of the presentation page. By comparing the new size to the original size of the page, the server can calculate a new position and size for each interactive element overlay. Once that is completed, the resized base and interactive layers can be rendered on the computing device.

Methods of operation of the server in the client-server system are now discussed.FIG. 5is a flow chart depicting a method500for rendering a presentation document on a client computing device by a server. Method500includes the server first creating a base layer for a page in the presentation document, the base layer having a plurality of static elements and placeholder elements. Next, the server creates an interactive layer for the page, where the interactive layer includes a plurality of interactive element overlays representing a plurality of interactive elements. The base layer and interactive layer are sent from the server to the client device for rendering, where each interactive element overlay is rendered on top of its corresponding placeholder element. Static elements may include, for example, text and images and interactive elements may include, for example, video, audio, interactive charts, applets, data displays, games, editable forms and hyperlinks.

The first step in rendering a presentation page is for the server to create a base layer for a page in the presentation document, shown as step501inFIG. 5. The base layer may have a number of static elements and a number of placeholder elements for the interactive elements on the page. An example of a base layer is shown inFIG. 3A. Each placeholder element has a defined absolute position and size. The absolute position can be described using an (x, y) coordinate notation and the size can be described using width and height measurements. In some embodiments, the base layer is represented as one or more SVG, JPEG, GIF, TIFF or PNG images. In some embodiments, the placeholder elements are stacked in a particular order, corresponding to a stacking of the interactive elements in the presentation page.

After the base layer is created, the server creates an interactive layer for the presentation page, shown as step503inFIG. 5. The interactive layer contains a plurality of interactive element overlays. Each interactive element overlay represents an interactive element on the presentation page. Each interactive element overlay also corresponds to a placeholder element on the base layer and has an absolute size and position that is equal to the absolute size and position of its corresponding placeholder element. In some embodiments, the interactive element overlays are created using JSON. In some embodiments, the interactive element overlays are stacked in a particular order, corresponding to a stacking of the interactive elements in the presentation page.

After both the base layer and interactive layer have been created, the server sends the base layer and interactive layer to the client computing device, shown as step505inFIG. 5. At the client computing device, both layers are rendered. The base layer is rendered first and the interactive layer is rendered on top of the base layer. The interactive layer is rendered such that each interactive element overlay is rendered directly on top of its corresponding placeholder element in the base layer. When rendered in such a manner, a viewer of the presentation page would perceive the interactive element, interactive element overlay, and placeholder element as one object. Thus each page in the presentation document can be rendered on a client computing device using method500.

Next, methods of rendering presentation documents on multiple computing devices using a server are discussed.FIG. 6is a flow chart depicting a method600of displaying a presentation document on a plurality of client computing devices by a server. Method600includes the server creating a base layer for a page in the presentation document. The base layer includes static elements and placeholder elements representing interactive elements. The server then creates an interactive layer for the same page in the presentation document. The interactive layer includes interactive element overlays that represent interactive elements. The server sends the base layer and the interactive layer of the page of the presentation document to each client computing device for rendering. Static elements may include, for example, text and images and interactive elements may include, for example, video, audio, interactive charts, applets, data displays, games, editable forms and hyperlinks.

The first step in rendering the presentation document is for the server to create a base layer for a page in the presentation document, shown as step601inFIG. 6. The base layer may have a number of static elements and a number of placeholder elements for the interactive elements on the page. An example of a base layer is shown inFIG. 3A. Each placeholder element has a defined absolute position and size. The absolute position can be described using an (x, y) coordinate notation and the size can be described using width and height measurements. In some embodiments, the base layer is represented as one or more SVG, JPEG, GIF, TIFF or PNG images. In some embodiments, the placeholder elements are stacked in a particular order, corresponding to a stacking of the interactive elements in the presentation page.

After the base layer is created, the server creates an interactive layer for the page in the presentation document, shown as step603inFIG. 6. The interactive layer contains a plurality of interactive element overlays. Each interactive element overlay represents an interactive element on the presentation page. Each interactive element overlay also corresponds to a placeholder element on the base layer and has an absolute size and position that is equal to the absolute size and position of its corresponding placeholder element. In some embodiments, the interactive element overlays are created using JSON. In some embodiments, the interactive element overlays are stacked in a particular order, corresponding to a stacking of the interactive elements in the presentation page.

After both the base layer and interactive layer have been created for the presentation page, the server sends the base layer and interactive layer to a plurality of client computing devices, shown as step605inFIG. 6. At each of the client computing devices, both layers are rendered. The base layer is rendered first and the interactive layer is rendered on top of the base layer. The interactive layer is rendered such that each interactive element overlay is rendered directly on top of its corresponding placeholder element in the base layer. When rendered in such a manner, a viewer of the presentation page would perceive the interactive element, interactive element overlay, and placeholder element as one object. Thus each page in the presentation document can be rendered on multiple client computing devices using method600.

Further, certain portions of the invention may be implemented as “logic” or a “component” that performs one or more functions. This logic may include hardware, such as an application specific integrated circuit or a field programmable gate array, software, or a combination of hardware and software.