Patent Application
20130097519
The present disclosure relates to electronic devices including, but not limited to, portable electronic devices.
Electronic devices, including portable electronic devices, have gained widespread use and may provide a variety of functions including, for example, telephonic, electronic messaging and other personal information manager (PIM) application functions. Portable electronic devices comprise several types of devices including mobile stations such as simple cellular telephones, smart telephones, Personal Digital Assistants (PDAs), tablet computers, and laptop computers, that may have wireless network communications or near-field communications connectivity such as Bluetooth® capabilities. In addition, electronic devices are also widely used in personal entertainment and infotainment systems, for example, portable media players and automobile infotainment systems.
The popularity of electronic devices is driven by user experiences and the interaction between people and the devices via user interfaces. User Interfaces (UIs) that are user friendly and intuitive, functional and stylish, vivid and life-like drive the attractiveness of the device to a consumer.
Improvements in the method of generating and presenting user interfaces are desirable.
In some UI systems, several applications, each requiring display of their respective UI elements, will communicate with one rendering engine responsible for determining the layout of elements. Determining the correct layout often requires negotiation between the rendering engine and the applications, that is the rendering engine queries the applications for more information. If the rendering engine has to wait for the negotiation to complete before rendering the UI then the rendering engine may stall.
Embodiments of the present disclosure will now be described, by way of example only, with reference to the attached Figures, wherein:
According to one aspect of the present disclosure, there is provided a method of determining a layout of a user interface (UI) that composites elements from a plurality of applications, each of the plurality of applications having a respective UI client engine, the method comprising: receiving, from one of a plurality of UI client engines, a request to change layout parameters; negotiating, between the plurality of UI client engines, changes to the layout parameters to determine negotiated layout parameters; and transmitting the negotiated layout parameters to a UI rendering engine, as a component tree structure, for rendering to a display. In this way, once the layout has been negotiated, it is sent for rendering. The rendering is disconnected from the layout in the client/server model and several applications can affect the layout without stalling the renderer. The renderer is able to continue to render, for example continuing with animations and effects, while the layout negotiation takes place.
According to another aspect of the present disclosure, there is provided an electronic device, the device comprising: one or more processors; and, memory comprising instructions which, when executed by one or more of the processors, cause the one or more processors to be configured to determine a layout of a user interface (UI) that composites elements from a plurality of applications, each of the plurality of applications having a respective UI client engine, by: receiving, from one of a plurality of UI client engines, a request to change layout parameters; negotiating, between the plurality of UI client engines, changes to the layout parameters to determine negotiated layout parameters; and transmitting the negotiated layout parameters to a UI rendering engine, as a component tree structure, for rendering to a display.
According to another aspect of the present disclosure, there is provided a computer program product comprising memory comprising instructions which, when executed by one or more processors of an electronic device, cause the one or more processors to be configured to determine a layout of a user interface (UI) that composites elements from a plurality of applications, each of the plurality of applications having a respective UI client engine, by: receiving, from one of a plurality of UI client engines, a request to change layout parameters; negotiating, between the plurality of UI client engines, changes to the layout parameters to determine negotiated layout parameters; and transmitting the negotiated layout parameters to a UI rendering engine, as a component tree structure, for rendering to a display.
In certain embodiments, the negotiating the changes to the layout parameters may comprise negotiating changes to layout parameters of a plurality of elements of the UI. The negotiating the changes to the layout parameters may comprise performing multiple negotiation rounds. The changes to the layout parameters may include changes to size of an element of the UI. The changes to the layout parameters may include changes to position of an element of the UI. The changes to the layout parameters may include inserting an element in the UI. The component tree structure may be a scene graph.
According to another aspect of the present disclosure, there is provided a user interface (UI) system determining a layout of a UI that composites elements from a plurality of applications, the system comprising: at least one processor configured to provide: a plurality of UI client engines each associated with a respective application having an element of the UI to be rendered; a master UI client engine in communication with the plurality of UI client engines, the master UI client engine configured for receiving requests to change layout parameters from the plurality of UI client engines and negotiating, amongst the plurality of UI client engines, changes to the layout parameters; and a UI rendering engine in communication with the master UI client engine, the UI rendering engine configured for receiving the negotiated layout parameters, as a component tree structure, for rendering to a display.
In certain embodiments, the master UI client engine may have an associated application having an element of the UI to be rendered. The negotiated changes to the layout parameters may include negotiated changes to layout parameters of a plurality of elements of the UI. The negotiated changes to the layout parameters may include negotiated changes to size of an element of the UI. The negotiated changes to the layout parameters may include negotiated changes to position of an element of the UI. The negotiated changes to the layout parameters may include inserting an element in the UI. The component tree structure may be a scene graph.
For simplicity and clarity of illustration, reference numerals may be repeated among the figures to indicate corresponding or analogous elements. Numerous details are set forth to provide an understanding of the embodiments described herein. The embodiments may be practiced without these details. In other instances, well-known methods, procedures, and components have not been described in detail to avoid obscuring the embodiments described. The description is not to be considered as limited to the scope of the embodiments described herein.
The disclosure generally relates to an electronic device, such as a portable electronic device. Examples of portable electronic devices include wireless communication devices such as pagers, mobile or cellular phones, smartphones, wireless organizers, PDAs, notebook computers, netbook computers, tablet computers, and so forth. The portable electronic device may also be a portable electronic device without wireless communication capabilities. Examples include handheld electronic game device, digital photograph album, digital camera, notebook computers, netbook computers, tablet computers, or other device. The electronic devices may also be a device used in personal entertainment and infotainment systems, for example, portable media players and automobile infotainment systems.
A block diagram of an example of a portable electronic device 100 is shown in
The processor 102 interacts with other components, such as Random Access Memory (RAM) 108, memory 110, a display 112 with a touch-sensitive overlay 114 operably connected to an electronic controller 116 that together comprise a touch-sensitive display 118, one or more actuators 120, one or more force sensors 122, an auxiliary input/output (I/O) subsystem 124, a data port 126, a speaker 128, a microphone 130, short-range communications 132, and other device subsystems 134. User-interaction with a graphical user interface is performed through the touch-sensitive overlay 114. The processor 102 interacts with the touch-sensitive overlay 114 via the electronic controller 116. Information, such as text, characters, symbols, images, icons, and other items that may be displayed or rendered on a portable electronic device, is displayed on the touch-sensitive display 118 via the processor 102. The processor 102 may interact with an orientation sensor such as an accelerometer 136 to detect direction of gravitational forces or gravity-induced reaction forces so as to determine, for example, the orientation or movement of the portable electronic device 100.
To identify a subscriber for network access, the portable electronic device 100 uses a Subscriber Identity Module or a Removable User Identity Module (SIM/RUIM) card 138 for communication with a network, such as the wireless network 150. Alternatively, user identification information may be programmed into memory 110.
The portable electronic device 100 includes an operating system 146 and software programs or components 148 that are executed by the processor 102 and are typically stored in a persistent, updatable store such as the memory 110. Additional applications or programs may be loaded onto the portable electronic device 100 through the wireless network 150, the auxiliary I/O subsystem 124, the data port 126, the short-range communications subsystem 132, or any other suitable subsystem 134.
A received signal, such as a text message, an e-mail message, or web page download, is processed by the communication subsystem 104 and input to the processor 102. The processor 102 processes the received signal for output to the display 112 and/or to the auxiliary I/O subsystem 124. A subscriber may generate data items, for example e-mail messages, which may be transmitted over the wireless network 150 through the communication subsystem 104, for example.
The touch-sensitive display 118 may be any suitable touch-sensitive display, such as a capacitive, resistive, infrared, surface acoustic wave (SAW) touch-sensitive display, strain gauge, optical imaging, dispersive signal technology, acoustic pulse recognition, and so forth, as known in the art. In the presently described example embodiment, the touch-sensitive display 118 is a capacitive touch-sensitive display which includes a capacitive touch-sensitive overlay 114. The overlay 114 may be an assembly of multiple layers in a stack which may include, for example, a substrate, a ground shield layer, a barrier layer, one or more capacitive touch sensor layers separated by a substrate or other barrier, and a cover. The capacitive touch sensor layers may be any suitable material, such as patterned indium tin oxide (ITO).
The display 112 of the touch-sensitive display 118 includes a display area in which information may be displayed, and a non-display area extending around the periphery of the display area. Information is not displayed in the non-display area, which is utilized to accommodate, for example, electronic traces or electrical connections, adhesives or other sealants, and/or protective coatings around the edges of the display area.
One or more touches, also known as touch contacts or touch events, may be detected by the touch-sensitive display 118. The processor 102 may determine attributes of the touch, including a location of a touch. Touch location data may include an area of contact or a single point of contact, such as a point at or near a center of the area of contact, known as the centroid. A signal is provided to the controller 116 in response to detection of a touch. A touch may be detected from any suitable object, such as a finger, thumb, appendage, or other items, for example, a stylus, pen, or other pointer, depending on the nature of the touch-sensitive display 118. The location of the touch moves as the detected object moves during a touch. The controller 116 and/or the processor 102 may detect a touch by any suitable contact member on the touch-sensitive display 118. Similarly, multiple simultaneous touches are detected.
One or more gestures are also detected by the touch-sensitive display 118. A gesture is a particular type of touch on a touch-sensitive display 118 that begins at an origin point and continues to an end point. A gesture may be identified by attributes of the gesture, including the origin point, the end point, the distance travelled, the duration, the velocity, and the direction, for example. A gesture may be long or short in distance and/or duration. Two points of the gesture may be utilized to determine a direction of the gesture.
An example of a gesture is a swipe (also known as a flick). A swipe has a single direction. The touch-sensitive overlay 114 may evaluate swipes with respect to the origin point at which contact is initially made with the touch-sensitive overlay 114 and the end point at which contact with the touch-sensitive overlay 114 ends rather than using each of location or point of contact over the duration of the gesture to resolve a direction.
Examples of swipes include a horizontal swipe, a vertical swipe, and a diagonal swipe. A horizontal swipe typically comprises an origin point towards the left or right side of the touch-sensitive overlay 114 to initialize the gesture, a horizontal movement of the detected object from the origin point to an end point towards the right or left side of the touch-sensitive overlay 114 while maintaining continuous contact with the touch-sensitive overlay 114, and a breaking of contact with the touch-sensitive overlay 114. Similarly, a vertical swipe typically comprises an origin point towards the top or bottom of the touch-sensitive overlay 114 to initialize the gesture, a horizontal movement of the detected object from the origin point to an end point towards the bottom or top of the touch-sensitive overlay 114 while maintaining continuous contact with the touch-sensitive overlay 114, and a breaking of contact with the touch-sensitive overlay 114.
Swipes can be of various lengths, can be initiated in various places on the touch-sensitive overlay 114, and need not span the full dimension of the touch-sensitive overlay 114. In addition, breaking contact of a swipe can be gradual in that contact with the touch-sensitive overlay 114 is gradually reduced while the swipe is still underway.
Meta-navigation gestures may also be detected by the touch-sensitive overlay 114. A meta-navigation gesture is a gesture that has an origin point that is outside the display area of the touch-sensitive overlay 114 and that moves to a position on the display area of the touch-sensitive display. Other attributes of the gesture may be detected and be utilized to detect the meta-navigation gesture. Meta-navigation gestures may also include multi-touch gestures in which gestures are simultaneous or overlap in time and at least one of the touches has an origin point that is outside the display area and moves to a position on the display area of the touch-sensitive overlay 114. Thus, two fingers may be utilized for meta-navigation gestures. Further, multi-touch meta-navigation gestures may be distinguished from single touch meta-navigation gestures and may provide additional or further functionality.
In some example embodiments, an optional force sensor 122 or force sensors is disposed in any suitable location, for example, between the touch-sensitive display 118 and a back of the portable electronic device 100 to detect a force imparted by a touch on the touch-sensitive display 118. The force sensor 122 may be a force-sensitive resistor, strain gauge, piezoelectric or piezoresistive device, pressure sensor, or other suitable device. Force as utilized throughout the specification refers to force measurements, estimates, and/or calculations, such as pressure, deformation, stress, strain, force density, force-area relationships, thrust, torque, and other effects that include force or related quantities.
Force information related to a detected touch may be utilized to select information, such as information associated with a location of a touch. For example, a touch that does not meet a force threshold may highlight a selection option, whereas a touch that meets a force threshold may select or input that selection option. Selection options include, for example, displayed or virtual keys of a keyboard; selection boxes or windows, e.g., “cancel,” “delete,” or “unlock”; function buttons, such as play or stop on a music player; and so forth. Different magnitudes of force may be associated with different functions or input. For example, a lesser force may result in panning, and a higher force may result in zooming.
A front view of an example of the portable electronic device 100 is shown in
In the shown example of
The electronic device 100 may also include an object sensor and a motion sensor (both not shown) in communication with the processor 102. The object sensor detects movement of an object relative to the electronic device during a period of contactless object movement. The motion sensor detects motion of the device during the period of contactless object movement. The processor, which may be configured as a gesture determinator, is configured to determine a gesture that corresponds to the movement of the object and to the movement of the device during the period of contactless object movement. In an example embodiment, the processor may be configured to compensate for the device movement when determining the gesture, such as by subtracting the device movement from the object movement. Thus, a more accurate determination of an intended gesture, such as a three-dimensional gesture can be made.
Detection of gestures relative to the device, such as above the display 112, allows for enhanced user interface (UI) functionality. However, if the device 100 is held in one hand of a user and the gesture is made or caused by the user's other hand, movement of the device may be mistakenly processed and determined to be movement associated with the gesture being made above the device, resulting in an erroneous determination of the gesture. In the present disclosure, the terms “motion” and “movement” are used interchangeably.
A contactless position, or contactless object position, is an object position at which the object is free of contact with the portable electronic device 100. For example, an object is in a contactless object position when the object is free of contact with the display 112. Contactless object movement is an object movement during which the object is free of contact with the device 100. A contactless gesture is based on contactless object movement. For example, a contactless gesture can include a contactless object movement above the display 112 of the device 100, without making contact with the display 112. Contactless object position and movement is in contrast to a gesture made on the display 112, such as the type of gesture typically associated with a device having a touch-sensitive display.
A three-dimensional gesture includes a gesture associated with movement that has at least one component in an axis or plane additional to the plane of the display 112 of the device 100. A standard gesture on a touch-sensitive display can include movement in the x and y axes and can also include contributions based on time delay, force intensity, and other factors. A three-dimensional gesture is a gesture performed relative to the device 100, such as above the display 112 in the z axis. Adding a further z axis component to a gesture can expand the number, type and variation of gestures that can be used to control the device 100. In example embodiments described herein, a contactless three-dimensional gesture is performed relative to the device 100 without making contact with the display 112.
In some example embodiments, the three-dimensional gesture is performed relative to the device 100 without making contact with the display 112. In other example embodiments, the three-dimensional gesture includes some contact with the display 112.
Examples of three-dimensional gestures and their determination are discussed in United States Patent Application Publication No. 2008/005703A1 entitled “Apparatus, methods and computer program products providing finger-based and hand-based gesture commands for portable electronic device applications”. Other discussions of examples of three-dimensional gestures and their determination are found in the following: United States Patent Application Publication No. 2009/0139778A1 entitled “User Input Using Proximity Sensing”; United States Patent Application Publication No. 2007/02211022A1 entitled “Method and Device for Three-Dimensional Sensing”. Each of these documents is incorporated herein by reference.
Typically, users interact with electronic devices with touch-sensitive displays via user interfaces (UIs), e.g. graphical user interfaces (GUIs). UIs may be rendered on the display prior to or after the detection of touch events by the touch-sensitive display 118. For example, when running a web browser application on the electronic device 100, the contents of a web page may be displayed on the display 112. Once the contents of the webpage have been rendered (or loaded) on the display 112, the UIs may not be displayed until the touch-sensitive display 118 detects a touch event, e.g., a user wanting to scroll down the contents (a scroll bar UI may then be rendered on the display), move away from the web page (the URL input area may be rendered on the display), or close the web browser application (a UI to close, minimize, adjust the size of the browser may be rendered on the display). In some instances, actions may be taken by the processor 102 without the rendering of UIs, e.g., a pinch gesture for zooming out, a flick gesture for turning a page on a reader application, etc.
UIs may be generally visualized as a graphical scene comprising elements or objects (also referred to as entities). Data structures known as scene graphs may be used to define the logical and/or spatial representation of a graphical scene. A scene graph is a collection of nodes in a graph or tree structure. The elements or objects of a UI may be represented as nodes in the scene graph. A node in a scene graph may have many children. The parent node of a scene graph that does not itself have a parent node corresponds to the overall UI.
Consequently, an effect applied to a parent is applied to all its child nodes, i.e., an operation performed on the parent of a group (related by a common parent) automatically propagates to all of its child nodes. For example, related objects/entities may be grouped into a compound object (also known as a layout), which may by moved, transformed, selected, etc., as a single group. In general, a layout can be any grouping of UI elements or objects. The term “container” as used herein refers to layouts that group UI elements in a particular ordered manner. A parent node can have one or more child nodes that can be, for example, any type of layout including a container.
Each container can in turn have its own child nodes, which may be, for example, other container nodes, basic UI elements or special effect nodes. The basic UI elements correspond to discrete components of the UI such as, for example, a button or a slider. A leaf node in a scene graph corresponds to a basic UI element. A leaf node does not have any child nodes.
As mentioned above, containers are layouts that group interface elements in a particular ordered manner. Containers can be of various types, including but not limited to, docking containers, stacking containers, grid-based containers, and scrolling containers.
A docking container refers to a layout that permits its children to dock to the edges of other items in the layout.
A stacking container refers to a layout that stacks its child components. The child components can be stacked, for example, vertically or horizontally. A stacking container dynamically recalculates the layout as changes occur to its children. For example, if the size of or number of its children changes then the layout is recalculated. This can occur in, for example, dynamically sized lists.
A grid container refers to a layout that orders its children in a grid structure.
A scrolling container refers to a layout that is used to scroll its contents if the number of items in the layout is too great to fit inside the layout.
Child node 304 is a scrolling container and is used to represent a list. Each item in the list is represented by one of nodes 308a to 308c. Child node 306 is a grid container and is used to represent a number of buttons ordered in a grid configuration. Accordingly, each of nodes 310a to 310d represent buttons. Accordingly, the overall user interface represented by parent node 302 has a list, which is represented by child node 304, and a set of buttons arranged in a grid pattern, which is represented by child node 306.
In addition, animation nodes are nodes that are used to create animation in a UI. Animation nodes are of various types, including but not limited to, special effects nodes and particle system effects.
Examples of special effect nodes include, but are not limited to, kernel effects, pixel effects, water effects, blob effects and image fade effects.
Kernel effects are based on more than one pixel. Examples include blur and sharpen effects. Pixel effects are performed on all pixels in an area. Examples include colorizing a set of pixels and the saturating a set of pixels. Water effects include distortion effects that resemble water such as, for example, a rippled surface. Blob effects include various types of displacement effects that resemble liquid behaviour. Image fade effects are used to perform transition effects.
Particle system effects are used to create a wide range of organic user interface effects such as sparkles, smoke, fire, star fields, and lava. The behaviour and properties of the particles such as, direction, lifetime, number, velocity, randomness can be selected and controlled. All elements in the UI may be treated as particles. In addition, the particles can have a z-value (in addition to x- and y-values) that can be used with perspective computations to provide a three-dimensional look to the UI.
According to known methods, the GUI of
A disadvantage of the approach outlined above is that the rendering of the GUI can be slowed down or appear jerky because the application itself (e.g., the Contacts List application) has to control both the application data and the graphical display and cannot update the rendered GUI until it has collected all the data.
Conventionally, as described above, UIs are developed for individual applications by the application developers with limited or no consistency between the UIs for different applications. In addition, UI development may be a cumbersome, time- and labor-intensive process. Once a significant amount of resource has been expended in developing application-specific UIs, there is little motivation or room for tailoring the UIs merely to enhance user experiences. Consequently, user experience is compromised.
For example, in conventional systems, an application is responsible for driving its UI. The application creates the UI elements, composites them into a complete UI screen and is responsible for displaying them. The actual rendering is often handled by the UI framework (e.g., calling the draw function for all widgets on the screen), but most of the code related to the UI is within the application. It is the responsibility of the application to collect the requisite data for each UI and to populate the UI. The data flow in the system is therefore driven by the applications, leading to a large amount of UI-related code in the application that is both difficult to maintain and customize.
As in the example of
For example, when a user wishes to “send a media item in MMS to a specific contact,” the process involves UIs from three applications (e.g, Media Player, Messenger and Contact List applications) installed on the electronic device 100 as shown in
The method and system described herein provide a UI framework that is independent of device platform (e.g., independent of mobile device architecture and operating system) as well as application framework (e.g., independent of application programming language). The UI framework described herein provides scalability, improved graphical capabilities and ease of customization, and results in enhanced user experiences.
The UI framework is used by applications to render their UIs. The UI framework is itself not an application framework (i.e., is not used for developing applications) and does not impose any rules on application structuring or application management. The UI framework does not provide application functionality. The applications themselves implement the functionality (or business logic) behind the UI. However, using the UI framework removes all UI call functionalities from the application code and instead lets the UI control data call functions. Thus, a the UI can interact with multiple applications for data requests in a seamless manner.
The single UI framework 800 described herein enforces a clear separation between UI visualization, UI logic, and UI data thereby allowing the creation of a seamless and truly rich UI. The applications are reduced to simple services, responsible for performing business logic and provide the data that the UI requests. An advantage of the single UI framework is that it allows that UI designer to create any user scenario without having to account for the applications that are currently running on the device. That is, the UI is driving the data flow. If there is a list on the screen displaying the contacts, there will be requests for data to the Contacts List application. The UI designer can readily use any application available on the device for its UI without having to specifically create or implement UI elements and populate the lists. Consequently, this architecture enables seamless cross application scenarios such as the example shown in
As noted above, the UI framework 800 described herein comprise multiple modules or engines: typically, a single UI rendering engine 902 for a device or a display; and separate UI client engines 904a, 904b, . . . 904n associated with separate applications, as shown in
Each UI client engine 904 is responsible for providing UI data from its associated application to the UI rendering engine 902. The UI client engine 904 is responsible for setting up UI component trees and informing the UI rendering engine 902 of the tree structure 906. The UI client engine 904 gets this information from the application. For example, the application code could specify the creation of elements, such as buttons and containers, programmatically in a language such as C++, or the application could describe the tree in a declarative language, such as XML, and have the UI client engine load it.
The UI rendering engine 902 mirrors the tree 906 set up by UI client engine 904. UI rendering engine 902 sets up visual node trees 908a, 908b, 908c for each UI element 909a, 909b, 909c of the UI component tree 906. To set up the visual node trees, the UI rendering engine 902 has predefined visual node trees for each UI component that the UI client engine 904 provides. For example if the UI client engine 904 sets up a Button, the UI rendering engine 902 will have a predefined visual node tree for Button which it will use. Typically, this predefined visual node tree will be described in a markup language, such as XML, but it could also be described in programmatic code, such as an API. The visual node trees are used for rendering the elements (for example the background, foreground and highlight images of a button is represented in the visual node tree 908b). The UI client engine 904 is not aware of the visual node trees.
The UI rendering engine 902 handles the logic and event handling associated with the UI elements that composite the UI (e.g., lists, menus, softkeys, etc.). The UI rendering engine 902 receives data from the UI client engine in an asynchronous manner, and binds the data to its visual nodes in the visual tree. As used herein “asynchronous” means that the transmission of data from the UI client engine 904 to the UI rendering engine 902 is independent of processing of data, or inputs, by the application. All data that can be presented in the UI for processing as a single thread is made available to the UI rendering engine 902 as it is available to the UI client engine 904. The underlying application processing and data sources behind the UI client engine are hidden from the UI rendering engine 902. The UI client engine 904 and UI rendering engine 902 can execute separate threads without waiting for responses from each other. In this manner, the UI rendering engine 902 can render the UI tree (using the visual node tree) without being blocked or stalled by UI client engine 904.
Since the UI client engine 904 sends data to the UI rendering engine 902 as it becomes available, the UI client engine 904 must also indicate to the UI rendering engine 902 whether the data is complete, or to await further data prior to rendering. In an example implementation, the data items necessary for rendering the UI form a “transaction.” Rather than waiting until all required data items are available, the UI client engine 904 can send data items relating to a single transaction in several communications or messages as they become available, and the messages will be received asynchronously by the UI rendering engine 902. The UI rendering engine 902 does not start processing the received data items until it has received all messages that at are part of the transaction. For example, the UI client engine 904 can inform the UI rendering engine 902 that one container with two child buttons has been created as one transaction. The UI rendering engine 902 does not process this transaction until it has received all data items related to the particular transaction; in other words, the UI rendering engine will not create the container and buttons before it has all the information.
The UI client engine module 904 and the UI rendering engine 902 are as decoupled from each other as possible. The UI client engine 904 is not aware of where in the UI its data is used, i.e., it does not hold a UI state.
The elements are the building blocks of the UI. The elements of the UI component tree represent the basic UI elements, lists, menus, tab lists, softkeys, etc. Elements are typically specified in a declarative language such as XML or JSON (currently QML which is JSON based), and given different attributes to make them behave as desired.
Examples of attributes include, but are not limited to, rendered attributes, response attributes, and decoding attributes. Rendered attributes refers to any attribute that specifies how a UI element is rendered. Examples of rendered attributes can include, but are not limited to color, opacity/transparency, the position on the display, orientation, shape, and size. In various embodiments, the position on the display can be described with any suitable coordinate system including (x,y) coordinates or (x,y,z) coordinates. The term color can include, but is not limited to, a luminance, hue, or saturation.
Examples of response attributes can include any attribute that specifies how the user interface element responds to commands or inputs, such as for example, but not limited to a single tap, double tap or swipe. For example, a response attribute can specify a speed of a double tap for the UI element.
Decoding attributes can include, but are not limited to, image decoding priority.
A complete UI is a set of elements composited in a visual tree. The elements interpret their associated data—for example, a menu component will interpret the data differently from a list component. The elements react upon events—for example, when a key is pressed or other event is posted to the UI, the elements in the UI will react, e.g., move up and down in a list or opening a sub menu. The elements also bind data to their respective visual tree nodes. The elements have built in UI logic (such as “highlight when pressed”, “scroll when flicked”, “navigate to tab 3 when tab 3 icon is clicked”), but the application logic (such as “start new application”, “find shortest route to bus station”, etc.) is in the application code, and typically is triggered by high level events from the elements (e.g. a “Button Click” event detected by the UI rendering engine 902, and passed to the UI client engine 904, may trigger the application to “find shortest route”).
Visuals define the appearance of elements, and are specified in the visual node trees. In an example, the visuals may be defined in XML. The XML could be generated independently or using a suitable visuals generation application. A visual could, for example, be a generic list that can be used by several different lists or a highly specialized visualization of a media player with a number of graphical effects and animations. Using different visual representations of elements is an effective way to change the look and feel of the UI. For example, skin changes can readily be done simply by changing the visuals of components in the UI.
If the visuals have a reference to a specific data element, the UI client engine 904 retrieves the data from the application and transmits it to the UI rendering engine 902. The UI client engine 904 also initiates animations on visuals. For example, UI client engine 904 can create and start animations on properties of UI elements (position, opacity, etc.). The UI client engine 904 is unaware of the actual composition and structure of its visuals. For example, when a list item receives focus, the list element will assume that there is animation for focusing in the list item visuals. The UI rendering engine 902 executes started animations. Animations run without involvement from the UI client engine 904. In other words, the UI client engine 904 cannot block the rendering of animations.
The UI rendering engine 902 is a rendering engine that may be specifically optimized for the electronic device 100. The rendering engine 902 is capable of rendering a tree of visual elements and effects and performing real time animations. The UI rendering engine 902 renders the pixels that eventually will be copied on to the physical display 112 of the electronic device 100. All elements active on the display have a graphical representation in the visual tree.
UI rendering engine 902 processes touch/key input without UI client engine involvement to ensure responsiveness (for example, list scrolling, changing of slider values, component animations, etc. run without UI client engine involvement).
UI rendering engine 902 notifies UI client engine 904 that a button has been pressed, slider has been dragged, etc. The UI client engine 904 can then react on the event (for example change the brightness if the slider has been dragged), but as already mentioned the UI client engine 904 does not need to be involved in updating the actual UI, only in responding to events from the UI.
The advantages of the UI driven architecture described herein are readily apparent during runtime. Runtime behaviour is defined by what is visible on the display screen of the device. For example, a “Main View” of the Contacts List application is shown in
The UI rendering engine 902 populates the visual node tree of the “Detailed Contact Information” elements, and a visual transition between the two screens is started. The UI rendering engine 902 runs and renders an animation associated with the transition. When the transition is complete, the visual node tree of the “Main View” is unloaded and all data bindings associated with the visuals can be released. Thus, the application (e.g., the Contacts List application 710) does not need to drive the UI, it basically only needs to supply the data that the client engine 904 requires to enable the UI rendering engine 902 to render the UI.
Thus, according to one aspect, there is provided a method of rendering a user interface (UI), as shown in
In further aspects of this method, and as shown in
If the UI client engine 904 determines that the user input received from the UI rendering engine 902 requires new data (step 1304), termed herein a “modification” to the UI, the UI client engine 904 sends further data items (step 1306) invoking the modification to the UI rendering engine 902, which then re-renders UI in accordance with the further data items and their associated visual node tree (step 1308), independently of further input from the client UI engine 904. For example, as described above, the UI client engine could initiate an animation effect.
According to another aspect, and as shown in
Each UI client engine determines a corresponding UI component tree for its respective application. Each UI client engine also receives inputs from its respective application related to elements of its UI component tree, and determines UI data items related to the inputs.
As shown in
Once in possession of a the single tree structure, the UI rendering engine 1402 determines a visual node tree for the single tree structure (step 1506), and then populating the visual node tree with UI data items received from at least one of the plurality of UI client engines (step 1508), and renders the UI in accordance with the visual node tree independently of further input from UI client engines (step 1510), as described above.
Different UI client engines 1404a, 1404b with different language bindings can coexist in same node/render tree, no matter what runtime limitations the language has (e.g. Python & threads). Since the individual UI component trees of the applications are combined to a single joint UI tree on the UI rendering engine 1402, the UI that is rendered by the server will, for end-users, appear as if all the applications UIs are part of the same application.
Using widgets as an example, the widgets could be separate processes/applications (as opposed to threads). The UI client engines associated with each widget can inject their UI into a single tree. Since the UI component tree is scene graph-based the UIs can be part of the same layout system, making it possible for the UIs to interact and to apply common effects to the overall UI. For example, a cool particle system effect could be applied to the UI component tree, thereby interacting with the UIs for each widget.
In a further example, one application could have a list while the list items provided by the UI client engine could consist of data items provided by the UI client engines of other applications.
According to another aspect, the method can be implemented such that the single UI rendering engine 1402 can support multiple UI client engines 1404a, 1404b, and their associated applications, running on different devices or platforms, such as a local device and an application running on a remote device, such as in the cloud or on networked server. One example is internet TV, where several UI client engines share UI input and output with a common UI rendering engine. Another example is in the automotive context. Multiple applications, such as navigation, infotainment, etc., can use a common UI rendering engine to render their own UI elements to a display in the vehicle. As above, since the UI client engines for each application inject their trees and data items into the same tree on the UI rendering engine, all scene graph UI advantages apply. The UI rendering engine does not need to know anything about a new application, so, for example, the UI client engine for a new car radio application can be transparently injected into the common UI.
An advantage of having a single UI rendering engine supporting multiple client engines is that the responsibility for the layout of UI elements from separate threads or processes can be distributed without stalling the UI rendering engine. According to this implementation, several applications, each having their own UI client engine, can negotiate their layout in the same UI component tree prior to the tree being mirrored to the UI rendering engine. This means that, while the layout decisions for a given application are affected by the other applications' layout decisions, the UI rendering engine can still continue rendering of data to its current UI component tree.
This implementation is shown by example in
To determine a new layout, the UI client engines can, for example, perform a negotiation, as set out in
Implementations of the disclosure can be represented as a computer program product stored in a machine-readable medium (also referred to as a computer-readable medium, a processor-readable medium, or a computer usable medium having a computer-readable program code embodied therein). The machine-readable medium can be any suitable tangible, non-transitory medium, including magnetic, optical, or electrical storage medium including a diskette, compact disk read only memory (CD-ROM), memory device (volatile or non-volatile), or similar storage mechanism. The machine-readable medium can contain various sets of instructions, code sequences, configuration information, or other data, which, when executed, cause a processor to perform steps in a method according to an implementation of the disclosure. Those of ordinary skill in the art will appreciate that other instructions and operations necessary to implement the described implementations can also be stored on the machine-readable medium. The instructions stored on the machine-readable medium can be executed by a processor or other suitable processing device, and can interface with circuitry to perform the described tasks.
The present disclosure may be embodied in other specific forms without departing from its spirit or essential characteristics. The described embodiments are to be considered in all respects only as illustrative and not restrictive. The scope of the present disclosure is, therefore, indicated by the appended claims rather than by the foregoing description. All changes that come within the meaning and range of equivalency of the claims are to be embraced within their scope. In some instances, features of the method and/or the device have been described with respect to different embodiments. It is understood that all the features described herein may be included in a single embodiment, where feasible.
This application claims priority to U.S. Provisional Application No. 61/548,647, filed Oct. 18, 2011, which application is entirely incorporated by reference herein.
| Number | Date | Country | |
|---|---|---|---|
| 61548647 | Oct 2011 | US |
