Zoomable web-based wall with natural user interface

• US 9,792,268 B2
• Filed: 05/15/2015
• Issued: 10/17/2017
• Est. Priority Date: 05/15/2015
• Status: Active Grant

• Current Assignee: SAP SE
• Original Assignee: SAP SE
• Inventors: Graf, Hans-Michael, Brackmann, Ulf
• Primary Examiner(s): Baderman, Scott
• Assistant Examiner(s): JUNG, SEUNG WOON
• Application Number:
  US14/713,951
• Publication Number:
  US 20160335740A1
• Time in Patent Office: 886 Days
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 2203/04806 Zoom, i.e. interaction techniques or interactors for controlling the zooming operation
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
• CPC Class Codes: G06F 3/04815 Interaction with a metaphor-based environment or interaction object displayed as three-dimensional, e.g. changing the user viewpoint with respect to the environment or object
• CPC Class Codes: G06F 40/106 Display of layout of documents; Previewing
• CPC Class Codes: G06F 40/143 Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
• CPC Class Codes: G06T 2200/24 involving graphical user interfaces [GUIs]

Abstract

A user interface allows zooming and panning of a web-based wall that can support a wide variety of content. Various natural user interface features can be implemented to allow users to interact with content in an intuitive way. Technical infrastructure such as a zoom engine, bounding boxes, and content sharing enable implementation of a rich set of features that are instantly grasped by users. A minimap can provide a helpful overview of content.

Claims

1. A system comprising:

one or more hardware processors;

one or more computer-readable media coupled to the one or more hardware processors;

a stored representation of a virtual wall comprising a plurality of viewable items posted on the virtual wall, wherein the viewable items have a z dimension and can overlap;

a viewport defining a spatial sub-area of the virtual wall that is currently presented; and

a display manager configured to manage the viewport and the stored representation of the virtual wall for presentation in a web-based user interface

wherein;

the stored representation of the virtual wall comprises a Document Object Model;

the viewable items are implemented as elements within the Document Object Model; and

the viewport is implemented via a cascading style sheet zoom property and cascading style sheet margin properties.

2. The system of claim 1 further comprising:

one or more stored relationships of the plurality of viewable items; and

a collision engine configured to calculate when a first bounding box of a first viewable item intersects a second bounding box of a second viewable item and further configured to update the stored relationships to reflect a relationship between the first viewable item and the second viewable item responsive to detecting intersection.

3. The system of claim 2 wherein:

the collision engine supports a plurality of bounding boxes of differing sizes for a single item; and

the collision engine computes a collision type indicating on which of the plurality of bounding boxes a collision is based.

4. The system of claim 3 wherein:

the plurality of bounding boxes comprise an inner bounding box and an outer bounding box.

5. The system of claim 1 wherein:

the display manager is configured to calculate a bounding box for a given plurality of the viewable items out of the plurality of viewable items.

6. The system of claim 5 wherein:

the display manager is configured to calculate an overall bounding box for an entirety of the viewable items on the virtual wall and generate a minimap of the virtual wall based on the overall bounding box.

7. The system of claim 1 further comprising:

a zoom engine configured to enlarge or shrink the viewport and simultaneously apply a center-based zoom effect to the spatial sub-area of the virtual wall that is currently presented in the viewport.

8. The system of claim 7 wherein:

the zoom engine applies negative values to the cascading style sheet margin properties.

9. A method implemented at least in part by a computing system, the method comprising:

for a plurality of viewable items on a virtual wall, maintaining a viewport area that covers less than an entirety of the virtual wall, wherein the viewable items have a z dimension and can overlap;

in a web-based user interface, displaying a portion of the virtual wall corresponding to the viewport area; and

in the web-based user interface, zooming the viewport area according to a center-based zoom technique, wherein the zooming comprises detecting events directed to a native zoom function of a browser and implementing the center-based zoom technique as a custom zoom in place of the native zoom function, wherein the native zoom function zooms relative to an upper left corner of the viewport area;

wherein the viewport area is implemented via a cascading style sheet zoom property and cascading style sheet margin properties.

10. The method of claim 9 wherein zooming the viewport area comprises:

positioning the virtual wall relative to the viewport area, wherein positioning comprises setting the cascading style sheet margin properties to negative values.

11. The method of claim 10 further comprising:

calculating the negative values as additive inverses of coordinates in a middle of the viewport area.

12. The method of claim 9 further comprising:

receiving a command to share the virtual wall with another user identifier; and

responsive to the command, sharing the virtual wall with the other user identifier.

13. The method of claim 9 further comprising:

processing movement of a given viewable item on the virtual wall;

detecting a near collision between the given viewable item and another viewable item; and

responsive to detecting the near collision, storing a relationship between the given viewable item and the other viewable item.

14. The method of claim 13 wherein:

storing the relationship comprises snapping the given viewable item and the other viewable item together.

15. The method of claim 13 wherein:

storing the relationship comprises connecting the given viewable item and the other viewable item together.

16. One or more non-transitory computer-readable media comprising computer-executable instructions that when executed cause a computing system to perform a method comprising:

for a plurality of viewable items on a virtual wall, maintaining a viewport area that covers less than an entirety of the virtual wall, wherein the viewable items have a z dimension and can overlap;

in a web-based user interface, displaying a portion of the virtual wall corresponding to the viewport area; and

in the web-based user interface, zooming the viewport area according to a center-based zoom technique, wherein the zooming comprises detecting events directed to a native zoom function of a browser and implementing the center-based zoom technique as a custom zoom in place of the native zoom function, wherein the native zoom function zooms relative to an upper left corner of the viewport area;

wherein the viewport area is implemented via a cascading style sheet zoom property and cascading style sheet margin properties.

17. One or more non-transitory computer-readable media comprising computer-executable instructions that when executed cause a computing system to perform a method comprising:

displaying an HTML-based virtual wall comprising a plurality of viewable items of a plurality of viewable item types comprising a note type, a document type, a contact type, and a multimedia type, wherein the plurality of viewable items can overlap and have respective z positions on the HTML-based virtual wall;

calculating an overall bounding box for the plurality of viewable items;

based on the overall bounding box, displaying a minimap of an entirety of the plurality of viewable items of the HTML-based virtual wall;

limiting display of the viewable items to those appearing within a viewport that is a sub-region of an entirety of the HTML-based virtual wall;

zooming the viewport according to a center-based zoom technique, wherein the viewport is implemented via a cascading style sheet zoom property and cascading style sheet margin properties;

receiving search criteria; and

disappearing or greying out displayed viewable items that do not meet the search criteria while leaving the displayed viewable items that do meet the search criteria in place.