U.S. patent application number 13/110464 was filed with the patent office on 2012-10-04 for interactive menu elements in a virtual three-dimensional space.
This patent application is currently assigned to Apple Inc.. Invention is credited to Dean Jackson, Barry Munsterteiger, Antoine Quint.
Application Number | 20120254791 13/110464 |
Document ID | / |
Family ID | 46929009 |
Filed Date | 2012-10-04 |
United States Patent
Application |
20120254791 |
Kind Code |
A1 |
Jackson; Dean ; et
al. |
October 4, 2012 |
INTERACTIVE MENU ELEMENTS IN A VIRTUAL THREE-DIMENSIONAL SPACE
Abstract
The present technology includes a digital content authoring tool
for authoring digital content without the need to understand or
access computer code. The present technology further includes
creating digital content that is compatible with a diverse
population of end user devices without the need for separate
versions of the completed content. Instead, the digital authoring
tool can manage versions of assets, which individually, can be
compatible with different device criteria. Additionally, the
present technology contemplates methods of delivering packages of
the digital content that are configured to be compatible with the
hardware configuration of each requesting device, despite the
diverse capabilities of end user devices. Accordingly, the
technology described herein provides a simple method for creating
and delivering digital content that is configured for presentation
on a user's specific device.
Inventors: |
Jackson; Dean; (Canberra,
AU) ; Quint; Antoine; (Paris, FR) ;
Munsterteiger; Barry; (Belmont, CA) |
Assignee: |
Apple Inc.
Cupertino
CA
|
Family ID: |
46929009 |
Appl. No.: |
13/110464 |
Filed: |
May 18, 2011 |
Related U.S. Patent Documents
|
|
|
|
|
|
Application
Number |
Filing Date |
Patent Number |
|
|
61470181 |
Mar 31, 2011 |
|
|
|
Current U.S.
Class: |
715/781 |
Current CPC
Class: |
G06F 3/04815 20130101;
G06F 3/0482 20130101; G06F 3/0485 20130101 |
Class at
Publication: |
715/781 |
International
Class: |
G06F 3/048 20060101
G06F003/048 |
Claims
1. A computer-implemented method comprising: creating a virtual 3-D
environment; positioning a viewport into the 3-D environment at a
coordinate in the center of the virtual 3-D environment and
oriented to face a starting position; and locating menu items in
the virtual 3-D environment at points other than the center wherein
the menu items are located around the viewport.
2. The computer-implemented method of claim 1, further comprising:
displaying a portion of the virtual 3-D environment as a graphical
user interface menu.
3. The computer implemented method of claim 2, wherein the
displayed portion of the graphical user interface is viewed through
the viewport oriented to face the starting position, and the
starting position is a first menu item.
4. The computer-implemented method of claim 2, further comprising:
responsive to a user input, animating a change in orientation of
the viewport, thereby bringing additional menu items into the
viewport.
5. The computer-implemented method of claim 4, wherein the position
of the viewport in the virtual 3-D environment gives the impression
the user is in the virtual 3-D environment facing the direction the
viewport is facing.
6. The computer-implemented method of claim 4, wherein the animated
change animates a rotation upon a horizontal plane.
7. The computer-implemented method of claim 4, wherein the animated
change animates a progression upon a z-axis, whereby the impression
of advancing forward in the virtual 3-D environment is
simulated.
8. The computer-implemented method of claim 7, wherein the animated
change further animates passing through a first menu item's view
through the viewport to reveal a subsequent menu item into
view.
9. A non-transitory computer-readable storage medium storing
instructions which, when executed by a computing device, cause the
computing device to display an interactive menu, the instructions
comprising: creating a virtual 3-D environment; positioning a
viewport into the 3-D environment at a coordinate in the center of
the virtual 3-D environment and oriented to face a starting
position; and locating menu items in the virtual 3-D environment at
points other than the center wherein the menu items are located
around the viewport.
10. The non-transitory computer-readable storage medium of claim 9,
the instructions further comprising: displaying a portion of the
virtual 3-D environment as a graphical user interface menu.
11. The non-transitory computer-readable storage medium of claim
10, wherein the displayed portion of the graphical user interface
is viewed through the viewport oriented to face the starting
position, and the starting position is a first menu item.
12. The non-transitory computer-readable storage medium of claim
10, further comprising: responsive to a user input, animating a
change in orientation of the viewport, thereby bringing additional
menu items into the viewport.
13. The non-transitory computer-readable storage medium of claim
12, wherein the position of the viewport in the virtual 3-D
environment gives the impression the user is in the virtual 3-D
environment facing the direction the viewport is facing.
14. The non-transitory computer-readable storage medium of claim
12, wherein the animated change animates a rotation upon a
horizontal plane.
15. The non-transitory computer-readable storage medium of claim
12, wherein the animated change animates a progression upon a
z-axis, whereby the impression of advancing forward in the virtual
3-D environment is simulated.
16. The non-transitory computer-readable storage medium of claim
15, wherein the animated change further animates passing through a
first menu item's view through the viewport to reveal a subsequent
menu item into view.
17. An apparatus comprising: a graphical user interface; a
processor in communication with the graphical user interface and
configured to generate and send commands to the graphical user
interface for displaying a virtual 3-D environment, wherein the
displayed virtual 3-D environment comprises a viewport and menu
items, wherein the viewport is positioned at a coordinate in the
center of the virtual 3-D environment and oriented to face a
starting position, and wherein the menu items in the virtual 3-D
environment are located at points other than the center, whereby
the menu items are located around the viewport.
18. The apparatus of claim 17, wherein the processor is configured
to command the graphical user interface to display a first menu
item, as viewed through the viewport.
19. The apparatus of claim 17, wherein the processor is configured
to command the graphical user interface to give a user the
impression of being in the virtual 3-D environment facing the
direction the viewport is facing.
20. The apparatus of claim 17, wherein the processor is configured
to command the graphical user interface to display an animated
change in orientation of the viewport in response to a user input
to the graphical user interface, whereby additional menu items are
displayed by the graphical user interface.
21. The apparatus of claim 20 wherein the animated change indicates
radial movement of the orientation of the viewport along the
horizontal plane.
22. The apparatus of claim 20, wherein the animated change animates
a progression upon an axis parallel to the direction faced by the
viewport, whereby the impression of advancing forward in the
virtual 3-D environment is simulated.
23. The apparatus of claim 20, wherein the animated change further
animates passing through a first menu item's view through the
viewport to reveal a subsequent menu item into view.
Description
CROSS REFERENCE TO RELATED APPLICATIONS
[0001] This application claims priority to U.S. provisional patent
application No. 61/470,181, filed on Mar. 31, 2011, entitled
INTERACTIVE MENU ELEMENTS IN A VIRTUAL THREE-DIMENSIONAL SPACE,
which is incorporated by reference herein in its entirety for all
purposes.
CROSS-REFERENCE TO COMPUTER PROGRAM LISTING APPENDIX
[0002] Three computer program listing appendices are submitted
herewith in ASCII format and have the following file attributes:
(1) the file named Appendix1.txt was created on May 12, 2011 and
has a size of 12,015 bytes; (2) the file named Appendix2.txt was
created on May 12, 2011 and has a size of 34,825 bytes; and (3) the
file named Appendix3.txt was created on May 12, 2011 and has a size
of 13,910 bytes. All three of which are incorporated herein by
reference. The programs contained in these appendices are written
in Java and are compatible with any computer or mobile device which
is capable of running Microsoft Internet Explorer version 8.0 or
later, Mozilla Firefox version 3.0 or later, or Apple Safari
version 4 or later.
COPYRIGHT NOTICE
[0003] A portion of the disclosure of this patent document contains
material which is subject to copyright protection. The copyright
owner has no objection to the facsimile reproduction by anyone of
the patent document or the patent disclosure, as it appears in the
patent and trademark office patent files or records, but otherwise
reserves all copyright rights whatsoever.
BACKGROUND
[0004] 1. Technical Field
[0005] The present disclosure relates to an electronic menus and
more specifically to three-dimensional-interactive-electronic
menus.
[0006] 2. Introduction
[0007] In many instances, computer-programming languages are a
hindrance to electronic content creation and, ultimately, delivery
to content consumers. Often content creators and designers simply
lack the skill and the knowledge to publish their mental creations
to share with the world. To begin to bridge this gap, content
creators can use some electronic-content-development tools which
allow content creators to interact with a graphical user interface
to design the content while an electronic-content-development tool
puts the computer-programming code in place to represent the
electronic content on a user's computer.
[0008] One type of such tool is a web page development tool, which
allows a user to create webpages with basic features by designing
the webpage graphically within the electronic-content-development
tool. However, in most instances, such tools can only assist users
with basic features. Users wanting customized elements must still
have knowledge of one or more computer-programming languages. For
example, while some web-content development tools can assist with
the creation of basic hyper-text markup language (html) content,
these tools have even more limited capabilities to edit cascading
style sheet (css) elements. Often variables within the css code
must be adjusted directly in the code. Such adjustments require
knowledge of computer-programming languages, which again, many
content creators lack.
[0009] Accordingly, the existing solutions are not adequate to
eliminate barriers between content creators and the presentation of
high quality electronic content on a variety of platforms.
SUMMARY
[0010] Additional features and advantages of the disclosure will be
set forth in the description which follows, and in part, will be
obvious from the description, or can be learned by practice of the
herein disclosed principles. The features and advantages of the
disclosure can be realized and obtained by means of the instruments
and combinations particularly pointed out in the appended claims.
These and other features of the disclosure will become more fully
apparent from the following description and appended claims, or can
be learned by the practice of the principles set forth herein.
[0011] The present technology provides a digital content authoring
tool for amateur and professional content developers alike, without
the need to understand or access any computer code, though that
option is available to users skilled in the programming arts. In
addition to the ability to create high quality digital content, the
authoring tool is further equipped with the ability to manage
digital assets and configure them for distribution and viewing on a
variety of electronic devices--many of which have diverse hardware
capabilities. Accordingly, the presently described technology
eliminates many barriers to creating and publishing deliverable
electronic content.
[0012] The authoring tool receives a collection of assets and other
files collectively making up deliverable electronic content. In
some instances, the authoring tool provides one or more templates,
such as the pre-defined objects referenced above, as starting
points for the creation of electronic content. A content creator
can modify the templates according to his or her vision. In some
embodiments, the authoring tool is configured to receive digital
assets by importing those assets into the authoring tools asset
library. The assets can be imported through a menu interface or
through drag and drop functionality.
[0013] One template offered by the current invention may
incorporate complex JavaScript to create a virtual
three-dimensional (3-D) environment displaying a first
person-perspective menu. A user interacting with this menu can view
the menu from a "first-person" or "cockpit" point of view. Menu
items are placed around the user and may be scrolled through by,
for example, changing the perspective of the user in the 3-D
environment. A viewport located in the 3-D environment is
configured to encompass a viewing range which is used to simulate
the user's view. When a menu item is in the direct view of the
viewport, it may become "highlighted" and selected by a user. To
scroll through menu items, the orientation of the viewport may be
changed by a user input to bring other menu items within the
viewable range of the viewport. As the orientation of the viewport
is changed, a corresponding animation simulates the user's
perspective of the 3-D environment changing. As menu items come in
and out of the view of the viewport, they are animated as coming in
and out of the user's view. This change in perspective can also be
reinforced by the use of additional animations such as a change in
scenery and a virtual user's head moving in conjunction with the
user's input. The inspector or widget can be used to configure this
menu as described above.
BRIEF DESCRIPTION OF THE DRAWINGS
[0014] In order to describe the manner in which the above-recited
and other advantages and features of the disclosure can be
obtained, a more particular description of the principles briefly
described above will be rendered by reference to specific
embodiments thereof which are illustrated in the appended drawings.
Understanding that these drawings depict only exemplary embodiments
of the disclosure, and are not therefore to be considered to be
limiting of its scope, the principles herein are described and
explained with additional specificity and detail through the use of
the accompanying drawings in which:
[0015] FIG. 1 illustrates an exemplary graphical-application-flow
template screen within a graphical user interface of the authoring
tool;
[0016] FIG. 2A illustrates the exemplary graphical-application-flow
template screen as an initial content creation screen;
[0017] FIG. 2B illustrates the result of the action illustrated in
FIG. 2A;
[0018] FIG. 3 illustrates an exemplary action adding additional
pages to the template;
[0019] FIG. 4A illustrates exemplary modifications made to the
content of a single page;
[0020] FIG. 4B illustrates an updated Pre-roll page based on the
action illustrated in FIG. 4A;
[0021] FIG. 5A illustrates an exemplary action inserting multiple
images into a page;
[0022] FIG. 5B illustrates the page from FIG. 5A updated with one
of the images inserted;
[0023] FIG. 5C illustrates the page from FIG. 5A updated with one
of the images inserted;
[0024] FIG. 6 illustrates an updated graphical-application-flow
template screen view;
[0025] FIG. 7A illustrates exemplary adjustments to CSS elements
using a widget/inspector;
[0026] FIG. 7B illustrates the result of the action illustrated in
FIG. 7A;
[0027] FIG. 8 illustrates an exemplary CSS inspector;
[0028] FIG. 9A illustrates an exemplary menu of JavaScript
elements;
[0029] FIG. 9B illustrates an exemplary menu of JavaScript
elements;
[0030] FIG. 10A illustrates an exemplary JavaScript elements menu
having buttons for editing selected code;
[0031] FIG. 10B illustrates editing a JavaScript element;
[0032] FIG. 10C illustrates adding a new JavaScript element;
[0033] FIG. 11 illustrates a completed application in the graphical
site map view;
[0034] FIG. 12 illustrates an exemplary asset validation
process;
[0035] FIG. 13 illustrates an exemplary method of packing the
application for upload to a content delivery server;
[0036] FIG. 14 illustrates an example system embodiment;
[0037] FIG. 15A illustrates an exemplary perspective wall
JavaScript element;
[0038] FIG. 15B illustrates an exemplary selection action;
[0039] FIG. 16 illustrates an exemplary pinwheel menu JavaScript
element;
[0040] FIG. 17A illustrates an exemplary bare N.times.M gallery
JavaScript element;
[0041] FIG. 17B displays an exemplary 3.times.3 gallery JavaScript
element;
[0042] FIG. 17C illustrates an exemplary transition effect;
[0043] FIG. 17D illustrates an exemplary transition effect;
[0044] FIG. 17E illustrates an exemplary completed transition
effect;
[0045] FIG. 17F illustrates an exemplary interface for adjusting
JavaScript variables;
[0046] FIG. 17G illustrates an exemplary gallery having various
variables adjusted with an inspector;
[0047] FIG. 18A illustrates an exemplary 3-Dimensional,
first-person-perspective menu JavaScript element;
[0048] FIG. 18B illustrates an exemplary transition effect;
[0049] FIG. 18C illustrates an exemplary completed transition
effect;
[0050] FIG. 18D illustrates an exemplary representation;
[0051] FIG. 19A illustrates an exemplary 3-Dimensional, linear
tunneling menu JavaScript element;
[0052] FIG. 19B illustrates an exemplary transition effect;
[0053] FIG. 19C illustrates an exemplary completed transition
effect;
[0054] FIG. 19D illustrates an exemplary representation;
[0055] FIG. 20A illustrates an exemplary 3-Dimensional, revolving
door menu JavaScript element;
[0056] FIG. 20B illustrates an exemplary transition effect;
[0057] FIG. 20C illustrates an exemplary completed transition
effect;
[0058] FIG. 20D illustrates an exemplary transition effect;
[0059] FIG. 20E illustrates an exemplary completed transition
effect;
[0060] FIG. 21A illustrates an exemplary 3-Dimensional, prism menu
JavaScript element;
[0061] FIG. 21B illustrates an exemplary transition effect;
[0062] FIG. 21C illustrates an exemplary completed transition
effect;
[0063] FIG. 21D illustrates an exemplary selection of a
menu-item;
[0064] FIG. 21E illustrates an exemplary selection of a
menu-item;
[0065] FIG. 22 illustrates an exemplary sliding strip menu
JavaScript element; and
[0066] FIG. 23 illustrates an exemplary method of building a menu
JavaScript element.
DETAILED DESCRIPTION
[0067] Various embodiments of the disclosure are discussed in
detail below. While specific implementations are discussed, it
should be understood that this is done for illustration purposes
only. A person skilled in the relevant art will recognize that
other components and configurations may be used without parting
from the spirit and scope of the disclosure.
[0068] The present disclosure addresses the need in the art to
eliminate or reduce barriers between content creators and
presenting their content to content-consumers.
[0069] In some embodiments, the present technology relates to a
computer-implemented application for aiding in the creation of
electronic content. In one aspect the present technology aids a
content developer in creating a multimedia application or web-based
application, though it is not limited to such uses.
[0070] FIG. 1 illustrates a graphical-application-flow template
screen within a graphical user interface of the authoring tool.
This screen illustrates a general layout of a typical application
and is the starting point of the authoring tool. The typical
application can progress in layers moving from left to right.
[0071] For example, banner 102 is often the first part of the
application presented to content consumer. In some embodiments, the
banner can be an image, video, or text that is presented to a
content consumer, sometimes within other content. In such
instances, the banner is similar to a banner advertisements
commonly encountered on the Internet. In some embodiments, the
banner is more akin to an icon on a desktop.
[0072] In either analogous situation (a banner advertisement or an
icon) a content consumer can interact with the banner 102, often in
the form of a click or selection action, which progresses the
content into its next screen, the pre-roll 104. The pre-roll screen
can be as simple as an icon indicating that the full content is
loading, or more involved, such as a progress base, title page, or
a movie.
[0073] After the pre-roll screen has completed, the user is
presented with the menu-page 106. The menu page is analogous to
home page on an Internet website, or a title menu commonly
encountered in a movie on a digital video disk (DVD). The menu-page
106, links to all or most other subsequent pages of the
application. As an example, menu-page 106 links to subsequent
pages, Page-1 108, Page-2 110, and Page-3 112, which each contain
their own content.
[0074] While the template illustrated in FIG. 1 is one example of a
potential application template, other templates may be available.
In some embodiments the templates can be modifiable. For example,
one or more additional screens can be added, deleted, repeated, or
otherwise modified as seen fit by the content-creator. However, in
some embodiments the template is not modifiable by the user. In
some embodiments portions of the template are modifiable while
others are not. For example, the banner and menu pages can be
required, and/or the flow of certain pages
(banner->preroll->menu) is fixed.
[0075] A content-creator can add assets to the pages to easily fill
out their application. An asset can be any file containing digital
content. The content-creator can import the content-creator's
assets into the authoring tool by dragging a collection of assets
or a directory containing assets into an assets menu (illustrated
in subsequent figures), or can import the assets using menu
options, or by any other known mechanism.
[0076] In some instances, one or more assets can be interrelated.
In some embodiments, the content creation application can also
detect those relationships that can be useful later. For example,
if a movie is imported at the same time as its poster frame, the
authoring tool can associate the poster frame with the movie. The
simplest example of how this can be executed is anytime a movie
file is imported with a single image, the authoring tool can assume
the that the image is the movie poster frame and create that
association in the meta data of those respective files.
[0077] The poster frame can be an image in JPEG format with
dimensions that match those of the video player that will be used
to play the movie. It is also desirable to name the image file
according to a pre-defined naming convention so that the authoring
tool can identify and associate the poster with the appropriate
video. This is especially useful when more than one other asset is
imported along with the poster frame.
[0078] In some instances, when a specific asset is imported, the
authoring tool can recognize that another related asset is needed
and automatically create the asset. Using a movie file as an
example, if the movie file is imported without a poster frame, the
authoring tool can search the movie file for its poster frame and
extract the image. If the authoring tool cannot find the poster
frame within the video file, it can automatically use the first
frame, or first non-blank frame, as the poster frame. In another
example, the authoring tool can require multiple different encoding
ratios or bitstreams for a movie depending on the device that the
content is intended to be viewed on and its current connection
speed. In such instances, the authoring tool can compress the movie
file according to the specifications needed for that particular
device, anticipated network bandwidth, or several devices and
network combinations. Analogous examples can also be made with
music bitrates, or aspect ratios and bits-per-pixel (BPP) for
images.
[0079] As will be addressed in the following figures, assets can be
added to the page templates by dragging the asset from an asset
menu and dropped onto the page templates, by using an insert asset
menu option, or by any other known mechanism for inserting an
object. In some embodiments, different pages, or certain locations
on a page, can only accept certain types of assets. While in some
embodiments, different pages or locations on a page can accept any
type of asset, and these pages will configure themselves to be
compatible with an inserted asset.
[0080] As addressed above, in addition to being a
graphical-application-flow template screen, the screen illustrated
in FIG. 1 is also able to receive content. FIG. 2A illustrates the
graphical-application-flow template screen as an initial content
creation screen. In FIG. 2A, the content-creator has selected an
asset, a clouds.jpg image 202 and drags the image onto the menu
page as indicated by 202'. FIG. 2B illustrates the result of the
action illustrated in FIG. 2A, wherein the clouds.jpg image has
been applied to the entire template. Each page in the
graphical-application-flow template now has the clouds.jpg image as
a background image.
[0081] When a modification is made to one screen in this a
graphical-application-flow template screen view, showing each of
the screens within the application, the same modification is made
to each of the other screens, as appropriate. As in the example
illustrated in FIG. 2A and FIG. 2B, since the background of the
Menu-page was modified, the background of all of the screens within
the application was also modified. Other modifications in one
screen that can be translated to the other screens include, but are
not limited to, adjustments to fonts and colors, or relationships
between Page-1 and the menu item for Page-1. However, not all
modifications made in this view make sense to translate to the
other screens. A modification to the Pre-roll might not make sense
to add to the other pages. For example, adding a video to the
pre-roll screen is one such modification that would not be applied
to the other screens.
[0082] FIG. 3 illustrates that additional pages can be added to the
template. When a new page is added, such as Page-4 212, the
Menu-page updates to include the page in the menu as illustrated by
menu item 210. Additionally, any template-wide characteristic, such
as the cloud background, is automatically applied to the new page.
Other changes can also be propagated automatically, as is discussed
throughout. For example, when a page is renamed the corresponding
menu element can also be retitled.
[0083] FIG. 4A illustrates modifications made to the content of a
single page. 334 illustrates that commonly applied elements can be
modified or removed on the individual pages of the application.
Specifically 334 illustrates that the cloud background that was
automatically applied to the pre-roll page in the
graphical-application-flow template screen, can be removed from
this page, individually, in this screen specific view.
[0084] Also illustrated in FIG. 4A is an "Assets" menu 320. This
menu graphically lists each of the assets that are available for
inclusion into the program. These assets include text, videos, web
content, images, etc. that the user has created and made available
to the authoring tool.
[0085] Also illustrated is a Validation tool 326 to validate
selected assets. In the illustration, X_O_video.mov 322 is selected
and the validation tool can illustrate the particular
characteristics of the file and whether those characteristics are
compatible with one or more device types for which the content is
intended to be displayed. Validation will be discussed in more
detail below.
[0086] FIG. 4A also illustrates that asset 322 is being dragged on
dropped 324 on the Pre-roll screen, thus inserting the asset onto
the Pre-roll page.
[0087] FIG. 4B illustrates the updated Pre-roll page. The cloud
background has been deleted and the X_O_video.mov has been inserted
on the Pre-roll pages and its poster image (asset 326) is displayed
334.
[0088] FIG. 5A illustrates inserting multiple images into a page.
Specifically Page-1 is shown having an object container, or
placeholder 350. A user has selected two images 352, image 1 and
image 2 and has dragged and dropped the images 352' into
placeholder 350.
[0089] FIG. 5B illustrates the updated page having both images of
the images inserted, but only displaying the first image.
Specifically, container 530 is shown with image 354 displayed
within it. Additionally, the validation tool 358 is shown
validating that the image 354 is available in the required
resolutions (high and low). When image 1 was imported, the user
imported two images--the high-resolution image and the
low-resolution image. However, for simplicity of use, the authoring
tool recognizes that the images are two different versions of the
same asset and displays a common asset in the asset library. This
allows the user to manipulate a single object (e.g., dragging to
the canvas) to make the assignment and the authoring tool works
behind the scenes to grab the appropriate version based on the
current display mode. In some embodiments, the assets conform to a
naming convention to allow the authoring tool to associated two
different versions of the assets. For example, a user can create
image.sub.--1@2x.jpg and image.sub.--1.jpg files. When imported, we
associate these two as the 2x and 1x versions, respectively, for an
asset named image.sub.--1.jpg. In the user interface the authoring
tool would only display one entry, but flags it to indicate it is a
multi-resolution asset, for example: image.sub.--1.jpg [1x] [2x].
The availability of both required assets is indicated in the real
time validation tool 358.
[0090] FIG. 5C illustrates the updated page having both of the
images inserted, but only displaying the second image.
Specifically, container 350 is illustrated with image 356 displayed
within it. In this instance, the content creator has chosen to
navigate to the second image within the design application. It can
be especially useful to show the exact assets and user interface
that the end user device will see at run time so that the content
designer can adjust the content as needed without having to switch
from a design application to a test application. Additionally,
validation tool 358 indicates that image 2 356 is only available in
low resolution and that a high resolution image is still needed. As
can be inferred from the discussion above, Image.sub.--2 was
imported without a corresponding high-resolution version. The
real-time validation tool 358 can inform the content developer that
the high-resolution asset is needed.
[0091] While in some embodiments it is possible for the authoring
program to make missing assets from available counterparts, it is
not desirable to create a higher resolution image from a lower
resolution image. However, the authoring tool may be able to create
a lower resolution from a properly sized higher resolution image.
In either case, the application will indicate which assets were
provided by the user and which were automatically generated, so
that the user can review these proposed auto-generated assets and
decide if he/she wants to use them or provide his/her own.
[0092] FIG. 6 illustrates an updated graphical-application-flow
template screen view. The pre-roll screen 402 is illustrated with
the update made to that page in FIG. 4A. Notably, the background
has been deleted and a movie has been inserted. The movies poster
frame is illustrated. Additionally, Page-1 404 is illustrated with
one of the images inserted into that page in FIG. 5A. The menu page
has also updated to match the changes made to Page-1. Link 406 now
contains an icon made from a blend of the images inserted in
Page-1. The link image could have been an asset that was associated
with the figures, an asset that was separately inserted, or, in
some embodiments, it can be automatically generated.
[0093] As addressed above, simply helping content developers get
their content into an application is just one step in the process.
An authoring tool needs to also allow content creators to adjust
their creations and the functionality of the application within the
user interface of the authoring tool.
[0094] This principle of the present technology can be understood
by exploring a web-based application or a collection of
web-browser-compatible content resembling the application.
Web-browser-compatible content often has several different
components of code. For example, Hyper-text-markup language code
(HTML) can define the basic format and content, JavaScript can
define the movement of objects defined by the HMTL code, and
cascade style sheet (CSS) elements can adjust the format or style
of the formatting elements defined in the HTML code. (It is
understood that other code types and objects are also
web-browser-compatible content. The present technology should not
be considered limited to the code languages described herein.)
[0095] In such an application using HTML code, JavaScript and CSS,
it is not sufficient to merely allow a content creator to enter
content in HTML. The content creator needs to be able to make
refined adjustments to make high quality content. As illustrated in
FIG. 7A and FIG. 7B such adjustments can be made using a widget to
adjust CSS elements. A CSS widget or inspector 410 is displayed for
adjusting a line weight by a slider 412 user interface element or
by entering a value in a text box 414. In the illustrated example,
the content creator is adjusting the line weight used to display
the box 416. FIG. 7B illustrates that the line weight has been
adjusted by moving the slider to a 2pt line weight. The slider and
text box have adjusted corresponding to this change.
[0096] FIG. 8 illustrates another CSS inspector. Specifically, a
shadow inspector 420 can be manipulated to adjust the direction,
weight, offset and other attributes of a shadow, such as shadow
422.
[0097] FIG. 9A and FIG. 9B illustrates a menu of JavaScript
elements. Again, it is desirable to allow content-creators to
introduce and adjust their content as much as possible within the
user interface. As such, the present technology makes use of a
JavaScript library of JavaScript elements such as those presented
in the JavaScript menu 450. The JavaScript library can include
primitive elements such as buttons, sliders, and switches that are
used standalone; and more complex "composite" elements such as
carousels, scroll views, and lists that have multiple "cells" that
may contain primitives and other composite elements. It should be
appreciated the other common JavaScript elements not shown here can
also be included in the JavaScript library.
[0098] As illustrated, a user has selected the Carousel element 452
and dragged and dropped the Carousel element 452' onto the menu
page. Such action transforms the listing of links on the menu page
into a rotatable 3-D Carousel as illustrated in FIG. 9B.
[0099] In some embodiments, widgets or inspectors can also be
provided for adjusting known variables within the JavaScript code.
For example, in the case of the rotatable 3-D Carousel, the shape
of the menu items, the speed and direction of rotation, spacing,
number of objects in the menu can be adjusted using an
inspector.
[0100] While many adjustments can be made in the form of
user-interface elements to allow users with little or no experience
working with code to create high quality content, the present
technology also facilitates and allows an advanced user to add new
elements or customize new elements. FIG. 10A, FIG. 10B, and FIG.
10C illustrate that JavaScript elements can be edited at the code
level or created. FIG. 10A shows a JavaScript elements menu having
buttons for editing selected code 472 or for creating a custom
JavaScript element. FIG. 10B illustrates editing the Carousel
JavaScript element 480.
[0101] FIG. 10C illustrates adding a new JavaScript element 482.
When a new JavaScript element is introduced, the user can also
define which elements of the JavaScript element should be
interactive or modifiable using an inspector. The user can create a
definitions or properties file to accompany the new JavaScript
element that defines variable elements within the JavaScript code
and a range of available parameters. The properties file can also
define which inspector elements need to be provided, e.g., a
slider, pull down menu, buttons, etc.
[0102] When a content-creator modifies a JavaScript element or adds
a new JavaScript element that element can be saved for later use in
other projects. Accordingly, a content-creator can make highly
customized content and reuse design elements in later projects as
they see fit.
[0103] In such instances, wherein a content developer adjusts or
creates his/her own code, the present technology can also include a
debugger application to ensure that the code is operational.
[0104] FIG. 11 illustrates a completed application in the graphical
site map view. The banner image 502 is illustrated having the
clouds background and the Tic-Tac-Toe title of the application. If
a user clicks on or interacts with the banner the application will
launch and proceed to the Pre-roll page 504. The Pre-roll page 504
is illustrated without the clouds background and containing the
Tic-Tac-Toe movie. Presently, the poster frame image is displayed,
though, if a user interacts with the image, or a determined period
of time has lapsed (such as the time to load or buffer the movie)
the movie will begin to play. After the completion of the movie,
the application progresses to the Menu-page 506. The Menu-page 506
includes the rotatable 3-D Carousel having links to the images
Page-1 508, a Webpage, Page-2 510, and a Purchase Interface, Page-3
512. Clicking on any menu link will take the user to the respective
page to view the associated content. Scrolling the rotatable 3-D
Carousel will rotate the carousel to the next menu item.
[0105] Having a complete application is only one step in
successfully publishing electronic content and presenting it to
users. As addressed above, today's devices come in many different
sizes and have different display and processing capabilities.
Accordingly, content often needs to be configured or optimized for
different devices. Such a step requires knowledge of the
capabilities of each device. Additionally, different users connect
to the Internet in various ways and sometimes multiple ways, even
in the same usage session. Accordingly, getting content to users
requires taking into account the variance in the different network
technologies too.
[0106] Even if a content developer did understand the varying
capabilities of the different device and network connections and
further knew the different specifications required to optimize
content for delivery and presentation on a content consumer's
device, creating optimized packages of each application would be a
time consuming process.
[0107] Accordingly, the present technology can automatically
perform this function. Before creating a content package optimized
for a particular device, the assets within the application must
have their compatibility with a device's specifications and common
network types validated. The content distribution server might also
impose certain requirements, and these too can be considered in the
validation process.
[0108] While some validation can be conducted during the creation
of the application (the validation widget in FIGS. 4 and 5 can
alert the user that assets having different characteristics are
needed) a validation process can also be included to ensure the
application is ready to be packaged for distribution.
[0109] FIG. 12 illustrates an exemplary asset validation process.
The authoring tool can be endowed with knowledge of all known
devices, groups of devices, connection types, and content
distribution servers for which the content might be distributed.
Alternatively, the user can input the device characteristics. The
authoring tool may also learn of additional device configurations
through communication with a server. Regardless of how learned, the
authoring tool can determine device characteristics for all known
devices and potential connection types 602. In some embodiments the
user might select a subset of the known devices and connection
types if the content is not intended for distribution outside of
those devices.
[0110] Based on the determined characteristics of the known devices
and connection types, each asset within the content is validated
604 for meeting the relevant characteristics. For example, images
might need to be validated for appropriate bpp, and aspect ratio,
while videos might require need to be validated for frame rates,
size, aspect ratios, compression, encoding type, etc. The
validation can occur as follows: A first asset is collected from
the finished application 606 and the validation module determines
the type of file 608 (image, banner, text, video, etc.).
[0111] Based on the asset characteristics the validation module can
determine firstly if the asset is appropriate for its use in the
application. As addressed above, certain assets are not universally
appropriate for all screens in the application. If an incorrectly
configured asset was inserted in a container such is determined at
610. An incorrectly configured asset can be one that is not in the
appropriate aspect ratio for the frame or one that is not available
in the multiple configurations for which the object is expected to
be required when viewed by users on their devices. For example, an
asset in the banner page might be required to be provided in a
landscape and a portrait configuration.
[0112] If the validation routine determines that the asset is
configured for its container the validation algorithm next
determines 612 if the asset is compatible with the characteristics
of each device on which it might be displayed. For example, the
routine determines if the asset is available in all aspect ratios
and pixel densities and file sizes that might be required to serve
and display the content on the devices.
[0113] If the validation routine determines the asset is compatible
with each device, the asset validation is complete 614 and the
routine determines if there are additional assets requiring
validation 616. If not the validation routine is complete and it
terminates 618.
[0114] If, however, there are additional files to validate, the
routine begins anew collecting the next asset 606.
[0115] Returning to 610 wherein the asset is analyzed for
configuration with its container and 612 wherein the asset is
analyzed for configuration with device characteristics, if either
analysis determines that the asset is not properly configured for
the container or device characteristics, respectively, the routine
proceeds to determine if the asset can be modified automatically at
620. Assets can be modified automatically where it might require
resizing, encoding, or generation of a lower quality asset. If the
asset can be modified to be compatible then the routine proceeds to
622 and the asset is appropriately configured. In some embodiments
the user is given the option of whether the routine should perform
the modification. If the asset is not determined to be modifiable
at 620, the routine outputs a validation error and requests user
involvement to fix the problem 624.
[0116] Once all assets have been verified the application must be
packaged for upload and use by a content delivery server. FIG. 13
illustrates an exemplary method of packing the application for
upload to the content delivery server. At 640 the routine gathers
all assets associated with the application. At 642 the routine
determines device configurations and collects the assets that are
compatible with one of the device configurations 644 and generates
a manifest of collected files 646. The manifest is a descriptive
file identifying each of the assets and their relationship to the
main application file. Finally, a content package is output
including all assets and the manifest configured for the specified
device configuration 648.
[0117] The routine illustrated in FIG. 13 can be repeated for each
device configuration desired. Alternative, the manifest file can
designate different assets for different device configurations.
Regardless of the method of creating the package for upload to the
server, the output should be according to the server's
requirements. If the server is configured to accept one application
configured for each device than the method of FIG. 13 is followed.
If the server is configured to accept a manifest describing all
assets and the appropriate situation for employing the assets then
such a package can be created.
[0118] Before the package can be uploaded to a content delivery
server, the application must first be tested. This step can be
especially important for professional content creators. Since
content creation is their livelihood they need to view each screen
of the application as it will be displayed on the individual
devices. The importance of this step is even more important when
some assets have been modified by the authoring tool and therefore
may not have been viewed by the content creator.
[0119] The application can be tested in each format (device
configuration) for which it is expected to run. Only after the
application has been tested for a given device configuration should
it be approved to be uploaded to the server for distribution to
content consumers.
[0120] In some embodiments, the above-described technology is an
HTML5 authoring tool which is useful for, among other things,
creating mobile advertisements. It embodies a number of key
processes for authoring, testing and publishing advertisements to
the mobile advertisement network. However, many of the activities
described herein are applicable to HTML5 authoring in general.
[0121] In one aspect, the present technology is used for authoring
of interactive HTML5 content for the web, for advertising, for
inclusion in non-web content delivery applications such as, a book
reader, a magazine, an interactive menu system for accessing video
content whether viewed on a traditional computer, mobile devices,
tablets, set-top boxes, or other devices.
[0122] The first step in creating an advertisement is defining the
structure and flow of an ad. This can be defined manually, by
adding and ordering pages using a graphical site map, or
automatically, by selecting a pre-built project template. The
project template defines the initial structure of the ad, for
example: a banner page, leading to a splash page that cycles while
content is loaded, leading to a "pre-roll" video page that plays an
introductory video, leading to a menu page with navigation options
to one or more content pages displaying company, product, or other
information the advertiser wishes to provide. Project templates may
define a rigid set of possible pages that cannot be edited, or may
define a starting set of pages that the user can modify by adding,
removing, reordering, or restructuring the flow of pages, or may be
based on various factors including lines of business (automotive,
publishing, music, film, consumer electronics, fashion/apparel,
etc).
[0123] The next step is defining the types of pages to be included
in the project. The project templates may define the types of pages
to be used or they can define the category of each page and allow
the user to select from a range of page templates in that category.
For example the project template can define that one of the pages
is intended to be a "menu." The user can select from a range of
possible menu "page templates" to apply.
[0124] Once a page template has been applied (either as determined
by the project template or manually selected by the user),
page-specific attributes can be edited, for example: the background
color of the page, the size of the page, the orientation of the
page, other page template specific properties, number of elements
in a gallery, the default location for a map, and so on.
[0125] The next step in the process is adding content to the pages
in the project. The page templates contain placeholder elements for
content to be provided by the advertiser, for example, an image
placeholder to be filled in with a company logo or product image.
Placeholder elements may have pre-determined styles applied to
them, for example, a button with a preset color, border, opacity,
etc. In such a case, the user need only provide text for the title
of the button. In some aspects, the styles may be rigid and
non-modifiable by the user, while in other aspects, the styles may
be set initially but editable by the user by editing individual
parameters, e.g., background color, border color, etc. In some
embodiments, the styles are edited visually using an inspector
rather than by specifying the CSS attribute and value, thus
eliminating the need for in-depth knowledge of CSS properties. The
styles can also be edited by applying a style preset representing a
number of style elements and their associated value, e.g., "red
flame" style with red gradient background, bright orange border,
and yellow glow shadow.
[0126] In some instances, placeholder elements can be "pre-rigged"
with animations that persist after an element has been customized
by the user. For example, an image element set to fade in when it
is first displayed. Some elements can represent multiple content
items in a list, grid, or other "gallery" or "container" style
display, such as e.g., a "carousel" of videos, a sliding gallery of
images, a scrolling view of a very large image or set of images,
etc. Some elements can represent multiple "cells" in a list, grid,
or other "gallery" or "container" style display, with multiple
content elements within each "cell", e.g., a "carousel" containing
a video, title, and short description, a sliding gallery of movie
character images with audio buttons that plays a voice clip from
the character, etc.
[0127] Content can be added to a project in a variety of ways. For
example, text content can be modified by typing new values into the
item, or by typing into a text field in its inspector. Content can
be can be dragged and dropped onto a placeholder, even a
placeholder containing other content.
[0128] The application also supports the creation of content for
devices with different hardware characteristics such as display
size, resolution and/or device orientation. Page templates and page
elements can automatically select the appropriate content for the
target environment (device hardware). For example, page templates
are provided for specific device resolutions, page templates are
provided for specific device orientations (e.g. portrait and
landscape), and page templates can handle changes in a device
orientation and reconfigure their elements as changes occur. Page
templates may be limited to a single display resolution, relying on
hardware scaling of the video output by the device or they can
handle changes in display resolution and reconfigure their elements
as change occur. For example, the templates can animate elements to
new sizes/positions as resolution changes, scale bitmap objects to
fit the new resolution, substitute bitmap assets with new assets
appropriate for the new resolution.
[0129] An advertisement can contain multiple "renditions" of
content to be automatically selected by at runtime for optimal
display, e.g., normal and hi-res versions of bit-map images for
display at different scales/display resolutions, multiple bit rate
video streams to be selected based on network, device, or other
criteria for optimal user experience.
[0130] Multiple renditions may be provided to the advertisement
manually by the user, or they may be provide automatically by the
application by downsampling a "hi-resolution" version to lower
resolution versions as needed or by downsampling an
ultra-resolution "reference" version to a "hi-resolution" version
and all subsequent lower resolution versions as needed. In the case
of automatic downsampling, this can be done based on the original
asset dimensions assuming it will be displayed at its natural size,
e.g., a 100.times.100 pixel image can be down sampled to a
50.times.50 image if the hi-resolution and lo-resolution
requirements differ by 50% in each dimension.
[0131] In addition to dimension-based "renditions", bandwidth-based
"renditions" may also be created, and other advanced optimization
techniques can be applied, to ensure optimal download speed over
varying network types (EDGE, 3G, WiFi).
[0132] To ensure compatibility with the advertisement server,
networks and known devices, image assets are analyzed to ensure
they meet size requirements such as a maximum total size, and
maximum image resolution based on bits-per-pixel (BPP), e.g., EDGE
network: <0.75 BPP, 3G network: <1.0 BPP, and WiFi: <2.0
BPP.
[0133] Video assets are analyzed to ensure they meet size
requirements such as a maximum total size and maximum data rate,
e.g., EDGE: 80 kbps, 3G: 300 kbps, and Wi-Fi: 1000 kbps.
[0134] System-generated and user-provided text assets are
processed. For example, JavaScript is concatenated and minified,
CSS is concatenated and minified, HTML, JavaScript and CSS is
compressed, etc.
[0135] Advanced techniques are applied to image assets: multiple
images are combined into a single "sprite" image to speed up
downloading (one HTTP request versus multiple); HTML, CSS and
JavaScript re edited to refer to the new sprite; individual images
are inlined as base 64 data into HTML files to minimize HTTP
requests; and a web archive is created as a single initial download
(tar/zip) with essential advertisement elements.
[0136] The system includes the ability for users to add custom
JavaScript code in a variety of ways. Write handlers that implement
responses to events generated by the system. Such events can
include: 1) a button was pressed; 2) the user touched the screen;
3) a new page was navigated to; and 4) the advertisement
application was paused, or resumed. Custom JavaScript code can also
be used for implementing custom on-screen controls (buttons,
sliders, etc.); implementing custom on-screen display elements
(views, graphs, charts); implementing custom logic (calculators,
games, etc.); and integrating with WebServices functionality, etc.
Any custom elements can also be saved for reuse in other
projects.
[0137] During development of the HTML 5 application, content and
functionality can be verified in an interactive environment by
on-screen preview within the authoring environment and by toggling
the editing "canvas" from authoring mode to interactive mode
causing the on-screen elements to become "live" and respond to user
input. The project can also be exported to disk such that it can be
opened and viewed by the appropriate client application on the
users local machine such as a web browser, other desktop reader
application, mobile web browser, or other mobile reader
application. Additionally, the project can be exported to a shared
network location so it can be opened and viewed by the appropriate
client application on a remote, network connected machine.
Exporting to a shared network location also allows the project to
be opened and viewed by the appropriate client application running
in a local simulated environment. Another mechanism of exporting is
to publish the content from within the authoring tool that allows
access to the content via an appropriate client application running
on a mobile device. In some embodiments, live changes can be made
in the authoring environment and are published to the viewing
application.
[0138] As addressed above, testing and previewing the authored
application can be an extremely important step, especially for
those that are using the authoring tool professionally. Accordingly
the authoring tools testing simulations include the ability to test
in many different network states as well so as to simulate the real
world operation of the application. In some embodiments, the
authoring tool can simulate a fast connection becoming slow so that
the content creator can view how the advertisement might look if
server decided to send a lower resolution asset based on its real
time analysis of network condition.
[0139] As shown in FIG. 14, an exemplary system 700 for
implementation of the present technology includes a general-purpose
computing device 700, including a processing unit (CPU or
processor) 720 and a system bus 710 that couples various system
components including the system memory 730 such as read only memory
(ROM) 740 and random access memory (RAM) 750 to the processor 720.
The system 700 can include a cache 722 of high speed memory
connected directly with, in close proximity to, or integrated as
part of the processor 720. The system 700 copies data from the
memory 730 and/or the storage device 760 to the cache 722 for quick
access by the processor 720. In this way, the cache 722 provides a
performance boost that avoids processor 720 delays while waiting
for data. These and other modules can be configured to control the
processor 720 to perform various actions. Other system memory 730
may be available for use as well. The memory 730 can include
multiple different types of memory with different performance
characteristics. It can be appreciated that the disclosure may
operate on a computing device 700 with more than one processor 720
or on a group or cluster of computing devices networked together to
provide greater processing capability. The processor 720 can
include any general purpose processor and a hardware module or
software module, such as module 1 762, module 2 764, and module 3
766 stored in storage device 760, configured to control the
processor 720 as well as a special-purpose processor where software
instructions are incorporated into the actual processor design. The
processor 720 may essentially be a completely self-contained
computing system, containing multiple cores or processors, a bus,
memory controller, cache, etc. A multi-core processor may be
symmetric or asymmetric.
[0140] The system bus 710 may be any of several types of bus
structures including a memory bus or memory controller, a
peripheral bus, and a local bus using any of a variety of bus
architectures. A basic input/output (BIOS) stored in ROM 740 or the
like, may provide the basic routine that helps to transfer
information between elements within the computing device 700, such
as during start-up. The computing device 700 further includes
storage devices 760 such as a hard disk drive, a magnetic disk
drive, an optical disk drive, tape drive or the like. The storage
device 760 can include software modules 762, 764, 766 for
controlling the processor 720. Other hardware or software modules
are contemplated. The storage device 760 is connected to the system
bus 710 by a drive interface. The drives and the associated
computer readable storage media provide nonvolatile storage of
computer readable instructions, data structures, program modules
and other data for the computing device 700. In one aspect, a
hardware module that performs a particular function includes the
software component stored in a non-transitory computer-readable
medium in connection with the necessary hardware components, such
as the processor 720, bus 710, display 770, and so forth, to carry
out the function. The basic components are known to those of skill
in the art and appropriate variations are contemplated depending on
the type of device, such as whether the device 700 is a small,
handheld computing device, a desktop computer, or a computer
server.
[0141] Although the exemplary embodiment described herein employs
the hard disk 760, it should be appreciated by those skilled in the
art that other types of computer readable media which can store
data that are accessible by a computer, such as magnetic cassettes,
flash memory cards, digital versatile disks, cartridges, random
access memories (RAMs) 750, read only memory (ROM) 740, a cable or
wireless signal containing a bit stream and the like, may also be
used in the exemplary operating environment. Non-transitory
computer-readable storage media expressly exclude media such as
energy, carrier signals, electromagnetic waves, and signals per
se.
[0142] To enable user interaction with the computing device 700, an
input device 790 represents any number of input mechanisms, such as
a microphone for speech, a touch-sensitive screen for gesture or
graphical input, keyboard, mouse, motion input, speech and so
forth. An output device 770 can also be one or more of a number of
output mechanisms known to those of skill in the art. In some
instances, multimodal systems enable a user to provide multiple
types of input to communicate with the computing device 700. The
communications interface 780 generally governs and manages the user
input and system output. There is no restriction on operating on
any particular hardware arrangement and therefore the basic
features here may easily be substituted for improved hardware or
firmware arrangements as they are developed.
[0143] For clarity of explanation, the illustrative system
embodiment is presented as including individual functional blocks
including functional blocks labeled as a "processor" or processor
720. The functions these blocks represent may be provided through
the use of either shared or dedicated hardware, including, but not
limited to, hardware capable of executing software and hardware,
such as a processor 720, that is purpose-built to operate as an
equivalent to software executing on a general purpose processor.
For example the functions of one or more processors presented in
FIG. 14 may be provided by a single shared processor or multiple
processors. (Use of the term "processor" should not be construed to
refer exclusively to hardware capable of executing software.)
Illustrative embodiments may include microprocessor and/or digital
signal processor (DSP) hardware, read-only memory (ROM) 740 for
storing software performing the operations discussed below, and
random access memory (RAM) 750 for storing results. Very large
scale integration (VLSI) hardware embodiments, as well as custom
VLSI circuitry in combination with a general purpose DSP circuit,
may also be provided.
[0144] The logical operations of the various embodiments are
implemented as: (1) a sequence of computer implemented steps,
operations, or procedures running on a programmable circuit within
a general use computer, (2) a sequence of computer implemented
steps, operations, or procedures running on a specific-use
programmable circuit; and/or (3) interconnected machine modules or
program engines within the programmable circuits. The system 700
shown in FIG. 14 can practice all or part of the recited methods,
can be a part of the recited systems, and/or can operate according
to instructions in the recited non-transitory computer-readable
storage media. Such logical operations can be implemented as
modules configured to control the processor 720 to perform
particular functions according to the programming of the module.
For example, FIG. 14 illustrates three modules Mod1 762, Mod2 764
and Mod3 766 which are modules controlling the processor 720 to
perform particular steps or a series of steps. These modules may be
stored on the storage device 760 and loaded into RAM 750 or memory
730 at runtime or may be stored as would be known in the art in
other computer-readable memory locations.
[0145] As mentioned above, a JavaScript library can include complex
"composite" elements. FIG. 15A illustrates a perspective wall
JavaScript element. The perspective wall JavaScript element is a
virtual wall with one or more rows 806 of files or items 808, where
the wall is set at an angle from a user such that the row or rows
806 stretch into the distance. The items 808 can be pictures,
logos, text, etc. Above the wall, there can be pictures or logos
802 and text 804 for informational, descriptive, branding, etc.
purposes. Below the wall, there can be intriguing visual effects,
such as virtual mirror reflections 810 of the row or rows 806, or
descriptive text 812 on wall "floor" (i.e. the plane perpendicular
to the wall but intersecting with the bottom of the wall). A user
can use a swiping gesture to "scroll" (i.e. move the row or rows
806) and navigate along the wall to different files or items 802.
Furthermore, the row or rows 806 can optionally wrap around to form
a virtual infinite loop of items 808 (i.e. by connecting the first
item to the last item) for the user to scroll through.
[0146] FIG. 15B illustrates how a user can tap or select an item
808 to cause it to "pop out" or "fly out" and enlarge 814 to show
more details 816 about it the perspective wall. Additional pictures
(i.e. album cover art) 818, data (i.e. song titles), or links (i.e.
to an online digital content store such as ITUNES) 820 can be
provided to give information to the user or to enable the user to
directly purchase the file or item 808 without having to go to an
online store to search for it. At any time, the user may close the
content (and return to the state before the content) by selecting
the close button 822.
[0147] FIG. 16 illustrates a pinwheel menu JavaScript element. The
pinwheel menu JavaScript element is a virtual wheel functioning as
a circular menu allowing a user to select from a multitude of items
or files 902. The user can use his/her thumb or finger to rotate
the pinwheel until the item he/she wishes to select is at the
"selected" position. The "selected" position can be defined by an
arrow 904 and can be any position in the pinwheel. In this example,
the "selected" position is the top position. Thus when an item is
in the top position 906, the item becomes "selected." When a
particular item is selected 906, it becomes larger in size than the
rest of the unselected items. As such, when items are rotated
around the wheel, they grow in size as they pass through the
"selected" (i.e. top) position and shrink after coming out of the
"selected" position.
[0148] The pinwheel can also be spun, so that a random item is
chosen. This allows for an interactive and engaging way for the
user to choose a random item. There can also be a detail portion
908 on the screen that displays more information about the selected
item. Tapping the selected item again 906 or pressing a button on
the screen 910 can bring the user to a new page with even more
detailed information. Additionally, a special button 912 can be
provided for the user to find nearby locations where the item is
offered. The pinwheel menu and content can be closed by the user at
any time by pressing the close button 914.
[0149] FIG. 17A illustrates a bare N.times.M gallery JavaScript
element with 3.times.3 sections (i.e. N=M=3), but not yet
supplemented with content. N and M are positive integers greater
than 0. FIG. 17B displays an example 3.times.3 gallery JavaScript
element containing content. The 3.times.3 gallery is a collection
of nine (i.e. 3.times.3) items 1002 (which can be depicted by
images), each of which can be selected by a user. Initially the
collection displays a smaller and/or sectional image for each of
the nine items. When the user selects or taps on a particular item
1004, all of the images begin to rotate on vertical axes. During
the rotation, it is revealed that each image is actually on the
front of a 3-Dimensional rectangular box and the side of each box
has a part of a larger full image of the selected item 1004. Each
side of the box is of the same size and orientation as compared to
each other and as compared to the fronts of the boxes.
Alternatively, each image is on the front of a card, which when
flipped presents a portion of a composite image formed by the rest
of the cards. FIG. 17C illustrates this 3.times.3 gallery example
rotating midway after the user has selected an item 1004. When the
rotation is complete, nine parts of a larger full image of the
selected item 1004 can be seen by the user. There are still gaps
between each of the nine parts; these gaps are not necessary but
they allow the user to better see the visual effects of the
3-Dimensional rotation. The nine parts (with gaps in between) of
the large full image of the selected item 1004 are shown in FIG.
17D. The nine parts can merge to form a complete large image of the
selected item 1004 as illustrated in FIG. 17E. There can be another
button or link to offer the user additional information. Also, the
user can choose to go back (i.e. by tapping on the large full
image, by tapping somewhere not on the image, by tapping on a
"return" button) and the blocks will separate and rotate back to
the initial appearance displaying all of the images, as shown in
FIG. 17B. Again, the user may close the content at any time by
selecting the close button 1006.
[0150] In some embodiments, widgets or inspectors can also be
provided for adjusting known variables within the JavaScript code.
For example, in the case of the N.times.M gallery, an inspector
(FIG. 17F) can adjust the N and M parameters (rows 1008 and columns
1010 of the gallery), the effective boundaries (i.e. by adjusting
the left 1012 and top 1014 positions) where the content will
appear, the width 1016 and height 1018 of the content, and many
other details. FIG. 17G shows an exemplary gallery having various
variables adjusted with an inspector.
[0151] For the perspective wall example, the adjustments an
inspector can make include (but is not limited to) altering the
shape and size of the files or items, the speed of scrolling, the
angle of the wall, spacing between the files or items, the number
of files or items visible at once to the user, the degree of
transparency of the virtual minor reflection, whether there is
information on the wall "floor," whether the row or rows wrap
around, and how text appears.
[0152] In the example of the pinwheel menu, an inspector can adjust
the number of items, the speed of scrolling, the size and shape of
the items, and other details.
[0153] FIGS. 18A-18D illustrate an example virtual 3-Dimensional
environment, first-person-perspective menu JavaScript element. A
user interacting with this menu 1100 can view the menu items from a
"first-person" or "cockpit" point of view. This can be accomplished
through use of a viewport positioned in the virtual 3-D
environment. As shown in these figures, the viewport may be
initially positioned at a coordinate in the center of the virtual
3-D environment and oriented to face a starting position. The
viewport may also be positioned at other locations in the 3-D
environment, such as off to the side or in a corner. The direction
the viewport is facing may be represented as a single ray
originating from the viewport in a set direction. The range of view
seen by a user through the viewport may be an angle of varying size
originating from the viewport. For example, the range of view may
be configured to be 90 degrees so that the user may view the menu
items from a first person point of view and may see 45 degrees to
each side of the direction the viewport is facing to encompass a
total 90 degree view of the virtual 3-D environment.
[0154] The menu items available for selection are preferably
located in front of and around the viewport and can be located at
the user's various viewpoints or perspectives. A menu item may be
viewable if it is within a predefined range within the viewport.
For example, the viewport may be configured to have a range of view
of 90 degrees spanning 45 degrees to either side of the ray
representing the direction the viewport is facing, as described
above, and any menu item falling within this range of view may be
viewable by the user. The menu item that is located directly in the
direction the viewport is facing may be come "highlighted." When a
menu item becomes "highlighted" it may be selected by the user. All
of the available menu items may be located "around" the viewport.
For example, in the virtual 3-D environment, the menu items may be
located on along a virtual continuous enclosed (i.e., circular,
polygonal, etc.) path, in a horizontal plane relative to the
viewport, the viewport being positioned at approximately the center
of the enclosed circular path (i.e., center of circle or polygon),
as shown in FIG. 18D. There can be a compass-like indicator along
the border showing a user which way he/she is currently facing
through the viewport. On the screen, the indicator can be in the
form of a bar showing the user which rotational degree he/she is
currently at and which way he/she can rotate. For example,
referring back to FIG. 18A, an indicator can be a horizontal bar
1102. The center 1104 of the horizontal bar indicator can show
which direction the user is currently viewing, that direction being
represented by a rotational degree (i.e., "0") 1106.
[0155] A user can change the orientation of the viewport to change
the user's perspective of the virtual 3-D environment. The user can
accomplish this through any known input means such as, but not
limited to, moving a mouse, clicking/selecting a directional arrow,
gesturing on a touch screen, inputting on a keyboard, or inputting
a voice command through a microphone. The change in the orientation
of the viewport may be animated such that the user can view the
change and additional menu items can be brought into view as they
come within the view of the viewport in the virtual 3-D
environment. In addition to other menu items coming into view,
other animations may be used to animate the change in orientation
of the viewport within the virtual 3-D environment. For example,
the position of the viewport may be represented by an image of a
person meant to represent the user, and animated to move as the
configuration of the viewport is changed. Additionally, the
animation may include a change in the foreground and background
scenery to further animate the effect of change in orientation of
the view of the viewport in the 3-D environment.
[0156] For example, if the user wishes to scroll through different
menu items, the user may change the configuration of the viewport
to the left by pressing a left button on a keyboard. As the
viewport's configuration in the 3-D environment is being adjusted
to the left, the animation of the user can be changed to represent
this by simulating the user's head and/or body turning in the
opposite direction (i.e., scrolling left simulates turning the
user's head and/or body right). Additionally, animated mountains or
trees in the background may shift to the right to simulate the user
changing his or her view to the left.
[0157] This way a user may be able to move through all of the menu
items available for selection. As the user scrolls or turns, the
rotational degrees in the horizontal bar indicator 1102 can shift
as well. As menu items come within the predefined view of the
viewport, they can be displayed on the screen. Conversely, as menu
items move away from the predefined view, they are not
displayed.
[0158] For example, if the user scrolls left, it can animate
his/her head and/or body turning right 90 degrees, still looking
straightforward (at his/her "3 O'Clock" position). In effect, a
menu item 1108 which comes within the view of the viewport will
rotate left or counterclockwise along the virtual continuous (i.e.,
circular, polygonal, etc.) path and go off the screen, while the
next menu item (1110 in FIG. 18B) will rotate left or
counterclockwise along the virtual path onto the screen.
[0159] The animation may also be used to represent a menu item
becoming "highlighted," as described above. For example, when a
menu item is highlighted, the animated representation of the
highlighted menu item may light up or appear brighter while the
non-highlighted items are darker. Another example is that a
highlighted menu item may appear to increase in size as compared to
the non-highlighted items. A further example is that a highlighted
menu item may also appear to have a certain "highlighted" border
around it. Yet another example is a highlighted menu item may also
appear to be in focus while the other non-highlighted items are
blurred. One other example is a highlighted menu item may appear to
directly face the viewport while the other items appear to be at an
angle. Any of these examples may be employed individually or in
combination with each other.
[0160] Further, additional information may be displayed when a menu
item becomes highlighted. For example, certain meta data associated
with the menu item may be displayed.
[0161] FIG. 18B shows the menu in the midst of the user's scrolling
left, representing his/her head and/or body turning right. As the
user scrolls left (as he/she turns right), he/she can see the next
menu item (i.e., in effect, the next menu item being rotated
counterclockwise onto the screen). FIG. 18B shows the next menu
item as it is being rotated onto the screen 1110 as well as the
shifting of the degrees 1112 in the horizontal bar indicator. The
user can scroll left until this next menu is in its "highlighted"
position. FIG. 18C shows this next menu item in its "highlighted"
position 1114 as well as the rotational degree 1116 of the user's
viewpoint, which is where this item is located. The user can either
select this item, or scroll left or right to another item.
[0162] In addition, there can be other viewpoints or perspectives
for items to be located at, such as along a vertical axis 1118.
There can be items located at particular viewpoints determined by
particular degrees on both horizontal and vertical bars.
[0163] Again, in some embodiments, widgets or inspectors can also
be provided for adjusting known variables within the JavaScript
code. For example, in this case, an inspector can adjust the number
of menu items, the speed of turning/shifting, the various angles
and degrees relating to the user's point of view, whether or not
there are other axes for menu items (i.e., vertical axis), whether
or not there are any indicators (and their locations), and many
other details.
[0164] FIG. 19A shows an example linear, 3-Dimensional, tunneling
JavaScript element. A user interacting with this menu element 1200
can move through menu items by moving "forward" or "backward," not
on a horizontal or vertical axis ("x axis" and "y axis"), but on a
third linear axis ("z axis") formed approximately by the user's
point of view receding to a one-point perspective at the center of
the screen, as shown in FIG. 19D.
[0165] Referring back to FIG. 19A, the currently "highlighted"
(i.e., to be selected) menu item can be shown to the user in a
default position 1202. He/she can select this item if he/she so
chooses. Additional details 1204 can also be displayed on the
screen for the user to view. Moreover, there can be another
indicator 1206 to display information about the currently
"highlighted" menu item in relation to the other menu items
available for selection. This indicator can show the position 1208
of the currently "highlighted" item relative to the other
items.
[0166] If the user does not want to select this item, he/she can
scroll up on the screen (or select a button 1210, i.e., "next") to
move "forward" on the "z axis" to reach the next item, or he/she
can scroll down on the screen (or select another button 1212, i.e.,
"previous") to move "backward" to reach the previous item. As the
user moves "forward" (on the z axis), the menu item moves out 1214
of the currently "highlighted" position. The user begins to pass
through the no longer currently "highlighted" menu item 1214 (in
effect, the formerly "highlighted" menu item begins to enlarge and
fade 1214 until it is no longer visible on the screen) as shown in
FIG. 19B; it enlarges because from the concept of vantage points,
bigger equates to closer and smaller equates to further. Also, as
the user moves "forward," the next menu item begins to appear 1216
on the screen.
[0167] Each menu item is a 3-D object too. The depth menu is laid
out along the Z-axis, through the user's head and away to the
(fake) horizon. Some menu items must be hidden when they are
off-screen, to avoid the user feeling like things are flying
through their head. This happens a bit in the depth menu, as the
user navigates through the menu items, they pass from in front to
behind (where they are then hidden completely.
[0168] A further feature of the depth menu to make it appear more
realistic is provide though a simulated depth of field. The
elements that are farther away in the Z direction are blurred, to
prevent everything from appearing in focus and making the illusion
of depth not realistic. As the menu items come in the plane of the
screen (right in front of the user) the blur is animated away and
the item is brought into focus.
[0169] FIG. 19C shows this next menu item in the currently
"highlighted" position 1218. Again, additional information 1220
about this item can be displayed on the screen. The indicator 1222
displaying information about this item in relation to the other
items can also be updated. The user can select this item.
Otherwise, he/she can move "forward" (i.e., scroll up, select
"next," etc.) or move "backward" (i.e., scroll down, select
"previous," etc.) on the z axis to reach the next item or previous
item, respectively.
[0170] As described above, in some embodiments, widgets or
inspectors can be used to adjust certain variables within the
JavaScript code. For example, in this case, a widget or an
inspector can be used to adjust the number of menu items, the speed
of moving (i.e., moving along the z axis), whether or not there are
any indicators (and their locations), whether or not there is other
information to be displayed (and their locations), and many other
details. Thus, without having extensive knowledge about computer
programming languages (i.e., JavaScript), one can still easily
adjust and customize such an element.
[0171] FIG. 20A illustrates an example 3-Dimensional, "revolving
door" menu JavaScript element. It is denoted as a "revolving door"
menu because the menu resembles a revolving door. This particular
example menu has three doors (also known as "wings" or "leaves").
The menu can be initiated or activated automatically or by the
user. If initiation/activation is to be triggered by the user, then
there can be a selectable element (i.e., the menu's initial
position 1302) for the user to initiate/activate the menu. Once
activated or initiated, the top of this example three-wing or
three-leaf "revolving door" menu emerges from its initial position
1302 in the same plane as the screen. FIG. 20B shows the example
three-wing or three-leaf "revolving door" menu beginning to emerge
1304 from its initial position. The top of the menu is actually
rotating upward (and "into" the screen) 1306 along a virtual
horizontal axis 1308. FIG. 20C shows the menu after it has emerged
and rotated into its default position 1310. The sides of the two
doors facing the user can together form a menu item 1312, which is
in the currently "highlighted" (i.e., to be selected) position.
There can be an area 1314 for displaying additional information
about the menu item.
[0172] The user can either select the currently "highlighted" menu
item, or she/he can move onto the next or previous item by making
the "revolving door" revolve or spin (i.e., via scrolling). FIG.
20D illustrates the menu in the middle of revolving with respect to
a virtual vertical axis 1316. Moreover, each of the areas (1318 and
1320) displaying additional information also revolves with its
respective menu item. FIG. 20E shows the menu having revolved to
the next menu item 1322 (making it in the currently "highlighted"
position 1324). Its additional information 1326 has also revolved
with it. The user can select the item 1322 or continue moving onto
other menu items.
[0173] When the user no longer wants or needs to select items,
he/she can deactivate the menu or the menu can automatically
deactivate. During deactivation, the menu can rotate in the
direction opposite to that during initiation/activation (1306 in
FIG. 20B). In other words, the menu can rotate downward (and "into"
the screen) along the virtual horizontal axis (1308 in FIG. 20B).
Deactivation can be completed when the menu has rotated into its
initial position (1302 in FIG. 20A).
[0174] Additionally, consistent with the principles herein
disclosed, a widget or inspector can customize and adjust known
variables within the JavaScript code. For example, in the case of
this menu element, a widget or inspect can alter the number of menu
items (i.e., the number of wings/leaves), the revolution/spin speed
of the revolving door, the angles and/or degrees of the position of
the revolving door, and other details.
[0175] FIG. 21A illustrates an example 3-Dimensional, prism menu
JavaScript element. In this particular non-limiting example
embodiment, only elongated triangular prisms are used, but other
prisms can be used as well. In this example, each triangular prism
can represent a menu item. FIG. 21A illustrates five menu items
(1402 through 1410), each being represented by a prism. When an
item is not in the currently "highlighted" (i.e., to be selected)
position, it can be represented by one face of its prism (denote it
as the non-"highlighted" face). When an item is currently
"highlighted," it can be represented by another different prism
face (denote it as the "highlighted" face). FIG. 21A shows "Menu
Item 3" 1406 being currently "highlighted" and showing its
"highlighted" prism face 1412. The "highlighted" prism face 1406 of
"Menu Item 3" shows more detailed information 1414 about the menu
item 1406. As a user moves away (i.e., scrolls up or down) from the
currently "highlighted" "Menu Item 3" 1406, the prism of "Menu Item
3" 1406 will "roll" along a virtual horizontal axis to show its
non-"highlighted" face. Its non-"highlighted" prism face can
contain just the basic information about the item.
[0176] FIG. 21B illustrates a user moving away (i.e., scrolling
down) from "Menu Item 3." As he/she scrolls down away from "Menu
Item 3," the prism for "Menu Item 3" will "roll" 1416 (i.e., rotate
downward and into the screen), along a virtual horizontal axis
1418, away from its "highlighted" face 1420 to show its
non-"highlighted" face 1422, which contains just the basic
information about "Menu Item 3." Simultaneously, the prism for
"Menu Item 4" also begins to "roll" 1424 (i.e., upward and into the
screen), along a horizontal axis 1426, from its non-"highlighted"
face 1428 to its "highlighted" face 1430. Similarly, the
"highlighted" face of "Menu Item 4" can display more detailed
information about "Menu Item 4" while its non-"highlighted" face
can display just the basic information. (Note: The description of
the direction and manner of "rolling" herein is by non-limiting
example only. One of ordinary skill in the art would know that
"rolling" can occur in other ways consistent with the present
disclosure. Also Note: As the user scrolls down, other menu items,
such as "Menu Item 6," can become visible on the screen, while
previous ones, such as "Menu Item 1," begin to go off screen.)
[0177] FIG. 21C shows "Menu Item 4" in its currently "highlighted"
position after "rolling." The user can select this item or continue
scrolling up or down. If the user selects this item, his/her
selection can lead to a sub-menu 1432, as shown in FIG. 21D. FIG.
21D illustrates the sub-menu 1432 resulting from selecting a menu
item. The user can scroll through the sub-items (i.e., scroll up or
down in the area where the sub-items are positioned) in the current
category ("Category 1") of the sub-menu 1432 and select a sub-item
to initiate it, or he/she can choose a different category (i.e., by
scroll left or right at the category area, or by selecting another
category) and do the same. Additionally, the user can even scroll
through (i.e., scroll up or down in the area where the menu items
are positioned) the menu items and select another menu item, which
can result in that menu item's own sub-menu and sub-items. FIG. 21E
shows the user having scrolled to "Menu Item 5," resulting in the
sub-menu 1434 of "Menu Item 5." The user can select a sub-item of
his/her choice by scrolling through the sub-items and/or
categories. The user can also scroll through the menu items here,
or he/she can return to the previous 3-Dimensional, triangular
prism menu (i.e., by scrolling right to view the off screen area to
the left), and/or he/she can come back to the sub-menu again (i.e.,
by scrolling left to view the off screen area to the right).
[0178] Furthermore, adjusting or customizing this example element
can be achieved by using a widget or an inspector. A widget or an
inspector can change certain variables within the JavaScript code,
thereby allowing those with little or no knowledge of computer code
to nonetheless perform customizations and adjustments. The widget
or inspector can adjust the number of menu items, the number of
sub-menus, the number of sub-menu items, the number of categories,
the speed of scrolling, the speed of "rolling," the direction of
"rolling," and many other details.
[0179] FIG. 22 illustrates an example sliding strip menu JavaScript
element. A user can scroll through menu items by freely sliding the
menu, which can be in the form of a horizontal strip 1436 across
the screen. The menu can be slid or shifted to any position of the
user's choice without the background having to change. Sliding the
menu can be accomplished by scrolling the menu strip with a
pointing device (i.e., computer mouse) or by swiping a finger, on
the menu strip, horizontally across the screen (i.e., touchscreen).
The user can select any menu item that is visible on the screen to
him/her.
[0180] In this example, a widget or inspect can adjust the number
of menu items, the location of the sliding strip, the orientation
of the sliding strip (i.e., horizontal, vertical, diagonal), and
other details.
[0181] While many adjustments can be made to the form or function
of user-interface elements to allow users with little or no
experience working with code to create high quality content, the
present technology also facilitates and allows an advanced user to
add new elements or customize new elements.
[0182] FIG. 23 shows a flowchart illustrating an exemplary method
for building a system with elements consistent with the present
principles herein disclosed. This particular exemplary method can
relate to a virtual 3-Dimensional system such as those illustrated
in FIG. 18 and FIG. 19. The method generates 1502 a finite state
machine, giving all state variables their initial or default
values. The method also generates 1504 static "postcards" and
relates appropriate state variables with them. "Postcards" can be
representations of states in the environment/interface that a user
interacts with. Additionally, the method can generate 1506 dynamic
"postcards" depending on the current state of the system. As such,
a "postcard" (i.e., a static postcard) can represent a menu item in
the "highlighted" position, or it (i.e., a dynamic postcard) can
represent a user's moving between menu items, depending on the
current state.
[0183] The method also creates 1508 groups (i.e., menus, sub-menus,
menu-item groups, sub-menu item groups, etic.) and their components
(i.e., menu-items, sub-menu items), and positions the groups and
their components relative within the groups, depending on the
current state of the system. Based on the current state, the method
can compute 1510 the positions of the groups and group components.
In this particular non-limiting example, the method can compute the
positions of the menu and menu-items within the virtual
3-Dimensional space, based on the current state variables.
[0184] An interactive and/or animated user interface and/or
environment can be generated 1512 based on the "postcards," the
computed positions of the groups and group components, and/or
current state variables. In this particular example, the generated
user interface/environment can be a virtual 3-Dimensional space.
The method can receive 1514 input (i.e., receive user input via the
user interface) and update 1516 state variables and the user
interface/environment accordingly.
[0185] The method also allows for a widget or inspector to alter
the creation of the finite state machine (i.e., change the state
variables) and/or adjust the various parameters of the system
(i.e., states, state variables). As such, adjusting or customizing
the system can be performed without necessarily having extensive
knowledge of computer code.
[0186] Embodiments within the scope of the present disclosure may
also include tangible and/or non-transitory computer-readable
storage media for carrying or having computer-executable
instructions or data structures stored thereon. Such non-transitory
computer-readable storage media can be any available media that can
be accessed by a general purpose or special purpose computer,
including the functional design of any special purpose processor as
discussed above. By way of example, and not limitation, such
non-transitory computer-readable media can include RAM, ROM,
EEPROM, CD-ROM or other optical disk storage, magnetic disk storage
or other magnetic storage devices, or any other medium which can be
used to carry or store desired program code means in the form of
computer-executable instructions, data structures, or processor
chip design. When information is transferred or provided over a
network or another communications connection (either hardwired,
wireless, or combination thereof) to a computer, the computer
properly views the connection as a computer-readable medium. Thus,
any such connection is properly termed a computer-readable medium.
Combinations of the above should also be included within the scope
of the computer-readable media.
[0187] Computer-executable instructions include, for example,
instructions and data which cause a general purpose computer,
special purpose computer, or special purpose processing device to
perform a certain function or group of functions.
Computer-executable instructions also include program modules that
are executed by computers in stand-alone or network environments.
Generally, program modules include routines, programs, components,
data structures, objects, and the functions inherent in the design
of special-purpose processors, etc. that perform particular tasks
or implement particular abstract data types. Computer-executable
instructions, associated data structures, and program modules
represent examples of the program code means for executing steps of
the methods disclosed herein. The particular sequence of such
executable instructions or associated data structures represents
examples of corresponding acts for implementing the functions
described in such steps.
[0188] Those of skill in the art will appreciate that other
embodiments of the disclosure may be practiced in network computing
environments with many types of computer system configurations,
including personal computers, hand-held devices, multi-processor
systems, microprocessor-based or programmable consumer electronics,
network PCs, minicomputers, mainframe computers, and the like.
Embodiments may also be practiced in distributed computing
environments where tasks are performed by local and remote
processing devices that are linked (either by hardwired links,
wireless links, or by a combination thereof) through a
communications network. In a distributed computing environment,
program modules may be located in both local and remote memory
storage devices.
[0189] The various embodiments described above are provided by way
of illustration only and should not be construed to limit the scope
of the disclosure. Those skilled in the art will readily recognize
various modifications and changes that may be made to the
principles described herein without following the example
embodiments and applications illustrated and described herein, and
without departing from the spirit and scope of the disclosure.
* * * * *