Method of rendering a user interface
View Patent ↗A user interface (UI) is presented in which a UI client engine is associated with an application, and a UI rendering engine is associated with the client engine. The UI client engine processes a client thread to manage a scene graph. The UI rendering engine receives the scene graph and data items associated with elements of the scene graph, and processes a rendering thread to render a UI in accordance with the scene graph and the data items, independently of further input from the client UI engine.
1. A user interface (UI) system comprising:
one or more electronic devices each having one or more processors and a memory, the memory or memories carrying instructions which, when carried out by the processor or processors of the one or more electronic devices, cause the processor or processors of the one or more electronic devices to be configured to provide:
a UI client engine associated with an application, the UI client engine configured for:
determining a UI component tree for the application,
receiving inputs from the application related to elements of the UI component tree, and
determining UI data items related to the inputs; and
a plurality of UI rendering engines each associated with a respective display for displaying a respective UI, each of the plurality of UI rendering engines configured for:
receiving the UI component tree from the UI client engine,
determining a visual node tree for the UI component tree, and
asynchronously receiving, from the UI client engine, the UI data items related to elements of the UI component tree,
populating the visual node tree with the UI data items; and
rendering its respective UI in accordance with the visual node tree independently of further input from the UI client engine.
2. The system of claim 1 , wherein the plurality of UI rendering engines are associated with a single device.
3. The system of claim 2 , wherein the plurality of UI rendering engines are associated with separate respective displays of the single device.
4. The system of claim 1 , wherein the plurality of UI rendering engines are associated with separate respective devices.
5. The system of claim 1 , wherein the plurality of UI rendering engines are each further configured for:
detecting a user input; and
communicating the user input to the UI client engine.
6. The system of claim 5 , wherein the plurality of UI rendering engines are each further configured for re-rendering the respective UI in response to the user input independently of further input from the UI client engine.
7. The system of claim 6 , wherein the user input is a button press, and the re-rendering the UI comprises re-rendering the respective UI to animate a button associated with the button press.
8. The system of claim 6 , wherein the user input is a slider drag, and the re-rendering the UI comprises re-rendering the respective UI to animate a dragging of a slider associated with the slider drag.
9. The system of claim 6 , wherein the user input is a list scroll, and re-rendering the respective UI comprises re-rendering the UI to scroll a list associated with the list scroll.
10. The system of claim 5 , wherein each of the plurality of rendering engines is further configured for:
receiving from the UI client engine further data items invoking a modification, and
re-rendering its respective UI in accordance with the further data items and an associated visual node tree independently of further input from the UI client engine.
11. The system of claim 10 , wherein the modification is an animation effect.
12. A method of rendering a user interface (UI), the method comprising:
at each of a plurality of UI rendering engines associated with a respective display for displaying a respective UI:
receiving a UI component tree for an application from a UI client engine associated with the application,
determining a visual node tree for the UI component tree, asynchronously receiving, from the UI client engine, UI data items related to elements of the UI component tree,
populating the visual node tree with the UI data items; and
rendering the respective UI in accordance with the visual node tree independently of further input from the UI client engine.
13. The method of claim 12 , where the plurality of UI rendering engines are associated with separate respective displays.
14. The method of claim 12 , further comprising:
detecting a user input; and
communicating the user input to the UI client engine.
15. The method of claim 14 , further comprising re-rendering the respective UI in response to the user input independently of further input from the UI client engine.
16. The method of claim 14 , wherein the user input is a button press, and the re-rendering the respective UI comprises re-rendering the respective UI to animate a button associated with the button press.
17. The method of claim 14 , wherein the user input is a slider drag, and the re-rendering the respective UI comprises re-rendering the respective UI to animate a dragging of a slider associated with the slider drag.
18. The method of claim 14 , wherein the user input is a list scroll, and re-rendering the respective UI comprises re-rendering the respective UI to scroll a list associated with the list scroll.
19. The method of claim 14 , further comprising:
receiving from the UI client engine further data items invoking a modification, and
re-rendering its respective UI in accordance with the further data items and an associated visual node tree independently of further input from the UI client engine;
wherein the modification is preferably an animation effect.
20. The method of claim 12 , further comprising:
carrying out one or more UI modification steps from a queue prior to rendering the respective UI;
when a time remaining to render the UI is determined as sufficient to carry out a next modification step in the queue, carrying out the next modification prior to rendering the UI; and
when the time remaining to render the UI is not sufficient to carry out the next modification step, rendering the UI.
21. The method of claim 20 , further comprising, when a time required to carry out one of the one or more UI modification steps and render the UI exceeds the time allowed by a frame-rate of the UI, causing the rendering of a placeholder or rendering partial results prior to completion of that UI modification step.
22. An electronic device, comprising:
one or more processors; and
a memory, the memory carrying instructions which, when carried out by the processor or processors, cause the processor or processors to be configured to provide a plurality of UI rendering engines associated with a respective display for displaying a respective UI, the UI rendering engines configured for:
receiving a UI component tree for an application from a UI client engine associated with the application,
determining a visual node tree for the UI component tree, and
asynchronously receiving, from the UI client engine, UI data items related to elements of the UI component tree,
populating the visual node tree with the UI data items; and
rendering the respective UI in accordance with the visual node tree independently of further input from the UI client engine.
23. The device of claim 22 , wherein the plurality of UI rendering engines are associated with separate respective devices, or wherein the plurality of UI rendering engines are associated with a single device, and the plurality of UI rendering engines are preferably associated with separate respective displays of the single device.
24. The device of claim 22 , wherein the UI rendering engines are each further configured for:
detecting a user input; and
communicating the user input to the UI client engine.
25. The device of claim 24 , wherein the UI rendering engines are each further configured for re-rendering the respective UI in response to the user input independently of further input from the UI client engine.
26. The device of claim 24 , wherein the user input is one of:
a press of a button, a drag of a slider, or a scroll of a list; and
the re-rendering the respective UI comprises re-rendering the respective UI to animate one of the press of the button, the drag of the slider or the scroll of the list, as the case may be.
27. The device of claim 24 , wherein the wherein the UI rendering engines are each further configured for:
receiving from the UI client engine further data items invoking a modification, and
re-rendering its respective UI in accordance with the further data items and an associated visual node tree independently of further input from the UI client engine;
wherein the modification is preferably an animation effect.
28. The device of claim 22 , wherein the UI rendering engines are each further configured for:
carrying out one or more UI modification steps from a queue prior to rendering the respective UI;
when a time remaining to render the UI is determined as sufficient to carry out a next modification step in the queue, carrying out the next modification prior to rendering the respective UI; and
when the time remaining to render the respective UI is not sufficient to carry out the next modification step, rendering the respective UI.
29. The device of claim 28 , wherein the UI rendering engines are each further configured to, when a time required to carry out one of the one or more UI modification steps and render the UI exceeds the time allowed by a frame-rate of the UI, cause the rendering of a placeholder or render partial results prior to completion of that UI modification step.
30. A product stored on a non-transitory medium carrying instructions which, when executed by a processor or processors of an electronic device
cause the electronic device to be configured to provide a plurality of UI rendering engines associated with a respective display for displaying a UI, the UI rendering engines configured for carrying out a method comprising:
receiving a UI component tree for an application from a UI client engine associated with the application,
determining a visual node tree for the UI component tree, and
asynchronously receiving, from the UI client engine, UI data items related to elements of the UI component tree,
populating the visual node tree with the UI data items; and
rendering the UI in accordance with the visual node tree independently of further input from the UI client engine.