DE102012024226A1 - Control unit/widget for controlling display of hierarchical data structure on picture screen as three-dimensional graphic, represents respective connection to directly higher level visually, when levels of hierarchy appear is smaller - Google Patents

Abstract

The unit represents each level in the hierarchy of the data structure by a closed curve (6). The respective connection is represented to the directly higher level visually, when lower levels of the hierarchy appear is smaller.

Description

Technical area

The invention described herein is a new element for a graphical user interface (GUI), which is always part of a software with a man-machine interface (HMI). Such an item, displayed in a rectangular area on a screen, often in a screen window, is called a control, widget, or canvas.

The invention is a new type of control that serves to visualize, navigate, edit and activate hierarchical structures and their objects. Activation means that you can perform operations on the objects or lists of objects of the edited structure, depending on the types of objects. Transform means here that certain objects may be able to initiate a change of the structure itself, this transformation can then be displayed animated. From now on, we will use the term present to refer to visualization, navigation, editing, activating and transforming in the near future.

State of the art

So far, hierarchical structures on the screen z. B. presented in the form of a tree view. In doing so, a list or other linear arrangement of a set of objects is rendered extensible so that sub-elements can be opened or expanded. Other common presentation forms are diagrams such. Eg UML class diagrams.

Technical problems and means of solution

The conventional representations of hierarchies lack a holistic structural overview. Since the space of the screen is limited, and each element occupies a constant space, it is often only possible to view a small part of the hierarchy. The simplest example of the problem is the unnecessary opening of empty directories when browsing through a directory system.

• 1. Sammlungen von Objekten werden kreisförmig angeordnet präsentiert.
• 2. Die Präsentation erfolgt dreidimensional.
• 3. Die Präsentation zeigt einen Überblick über die Gesamtstruktur.
• 4. Die Navigation erfolgt in einer einfachen, intuitiven und ansprechenden Form und wird animiert dargestellt.
• 5. Transformationen der Struktur können je nach Anwendungsbereich animiert dargestellt werden.
• 6. Äquivalenzrelationen von Objekten in der Struktur können repräsentiert werden und zwischen den verschiedenen Auftreten eines Objektes kann navigiert werden.

The solution is based on the following principles and can best be captured graphically:

• 1. Collections of objects are presented arranged in a circle.
• 2. The presentation takes place in three dimensions.
• 3. The presentation shows an overview of the overall structure.
• 4. The navigation takes place in a simple, intuitive and attractive form and is displayed animated.
• 5. Transformations of the structure can be animated depending on the application.
• 6. Equivalence relations of objects in the structure can be represented and navigated between the different occurrences of an object.

1 gives an impression of the visual appearance.

Technical solution

The structure presented by the control is a general tree structure in which each node can have a value. At any time a specific subtree is selected. The selected subtree is displayed as the largest and centrally visible closed curve ( 6 ). Preferably, the curves are each formed by circles, which become ellipses through the three-dimensional view ( 6 . 13 ).

A tree always belongs to a certain hierarchy level. The root node and empty subtrees can not be selected. The ellipses of lower hierarchical levels have a smaller diameter than those of the respective higher hierarchical levels. The objects of an object family with a lower hierarchy level are visually connected to the object of the higher hierarchical level by means of a connection element. Preferably, the connecting element is formed by at least one line.

Of the selected subtree, a specific node always has the focus. The focus node ( 7 ) is always used as the highest node of the selected ellipse ( 6 ). Each value can have an icon ( 9 . 11 ) and a label ( 8th . 10 ), which represent this value to the user. The icons ( 9 . 11 ) are projected onto the ellipses and rotated with them. The labels ( 8th . 10 ) are only used for the selected subtree ( 5 ). They are placed above the vertical center of the selected ellipse in an arc around the ellipse, and below that on the right and left sides. For sub trees with large amounts of objects, due to the limited space on the display, only a limited number of labels are drawn, always those that are adjacent to the label of the focused object to the right and left.

The basic navigation consists of the focus ( 7 . 8th . 9 ) to move to the right or left, or to select the subtree below or above ( 4 . 12 ). A basic navigation can be performed with cursor keys, a mouse or touch gestures become. The basic navigation results on the screen in an animation, a 3-D rotation for right and left and a zoom in for the selection of the underlying subtree and a zoom out for the selection of the parent tree.

Complex navigation consists of the sequential or parallel composition of the basic navigation. It is possible to select the selected subtree ( 5 . 6 ) freely to rotate, z. B. triggered by the mouse or touch gestures. It is possible to get a label ( 10 ) directly to select, z. By clicking on it, bringing it to the highest position ( 8th ) is rotated. In both cases, the sequential composition of "right" and "left" is basic navigation.

In the panel, the parent trees are represented by labels ( 3 ), and it is possible to select them directly. It is also possible a sub-zell ellipse ( 13 ) to select directly. The first leads to a sequential execution of "above" basic navigation, the second to a sequential execution of "below" basic navigation.

In a preferred embodiment, equivalence relations may be represented as lines between the different occurrences of an object. In mathematics, an equivalence relation is a relation that divides a set into subsets so that each element belongs to exactly one subset. Two elements are equivalent (in relation to this relation), if and only if they belong to the same subset. This is important when categorizing, because some objects belong to more than one category. It is possible to select the smallest subtree that ensures the visibility of the line (s). It is possible to navigate to the next, previous or a specific occurrence. This navigation is a complex navigation made up of rotations and zooming.

In a preferred embodiment, the device can be used to visualize the transitions between different but similar hierarchical structures, which we call the term transformation. Basic transformations include hiding a subtree, rotating a subtree, inserting a new subtree, and raising and lowering a subtree about a hierarchy level. The basic transformations result on the screen in an animation.

In turn, complex transformations consist of the sequential or parallel composition of basic transformations. Examples of transformations are the visualization of the operations of formal systems, eg. For example, the final rule or application rules.

In a preferred embodiment, each object may have an associated list of actions displayed ( 1 ) and whose actions can be applied to the focused object. A subtree may allow the user to delete the focused object and / or the focused subtree, or to create new objects and subtrees. The properties of the focused object can be edited.

In a preferred embodiment, the objects of the selected sub-tree may be sorted according to programmable criteria. The objects of the selected subtree and recursively those of its subtrees can be filtered by programmable criteria. It is possible to search the selected subtree and recursively its subtrees according to programmable criteria.

In a preferred embodiment, a state that remembers the last focused objects of the visited subtrees and, if applicable, the state of the sort, filter, and search criteria. This condition can be remembered between sessions.

In a preferred embodiment, the widget may be configured with respect to various criteria ( 2 ), which include, among other things, the level of detail of the display, which should be set according to the performance of the graphics processor, and various parameters of the appearance, such as colors, text style, icon size, center offset, and animation speed.

These features are made applicable and extensible through a flexible programming interface (API). The API allows polymorphism, which means that objects of different types can be presented through a uniform interface. The specific form of the API is programming-language-dependent (eg Java, C #, C ++).

The API publishes a stream of events that informs about selection, actions, and changes to the edited structure (adding, deleting, property changes). The API can support the lazy loading of subtrees, allowing the presentation of very large and even infinite structures.

embodiment

An embodiment of the invention is in 1 shown. It is a Y-combinator of combinatorial logic of the basic IKS. Each node is either a combiner (I, K or S), or contains subnodes and represents the right spine of the binary combinator tree.

LIST OF REFERENCE NUMBERS

1

Command area

2

Operations area

3

parents label

4

parent node

5

selected tree

6

selected ellipse

7

Focused knot

8th

Focused label

9

Focused icon

10

Other label

11

Other Icon

12

Under tree

13

under ellipse

The next figures are animations, each with 4 levels: initial state, intermediate state 1, intermediate state 2, final state. An animation on the screen displays many more intermediate levels, creating a fluid movement. 2 represents a navigation to the right (rotation). 3 represents a navigation down (zoom in). 4 represents a complex transformation (first 2 nodes are hidden and one node is rotated, then the previously rotated node is lifted).

This application is based on a prototypical implementation, which is done in the functional programming language Haskell and Cairo uses as a graphics library. The domain model is represented as a zipper to uniformly handle the tree and position in the tree so that synchronization errors can not occur. Since Cairo is a 2-D graphics library, the 3-D appearance is achieved through a series of matrix transformations translate, scale, and rotate. Without optimization, the prototype has a good execution speed on modern hardware.

advantages

By using the widget, the clarity, and thus the rapid capture of the hierarchical relationships and affiliation of the objects to each other can be improved. Intuitive navigation promotes productivity, and the pretty animations make working with the control enjoyable. A formatting activity by the user is not necessary because the structure is automatically translated into a uniform form. This saves time and boosts productivity.

Claims (9)

Control (or widget) that displays a hierarchical data structure on a screen as a 3-dimensional graph, where each hierarchical level of the data structure is represented by at least one closed curve. Deeper hierarchy levels are displayed smaller, as well as the respective connection to the directly higher level visualized. Control according to FIG. 1, in which quantities and elements can be selected by right, left, up and down navigation and their composition and the navigation is represented by an animation (rotate, zoom) on the screen. Control according to FIGS. 1 and 2, in which quantities and elements are designated by labels which are arranged around and above the graphic. Control according to FIGS. 1 and 2, in which the activation of object-specific operations on one or more selected elements and quantities is made possible. Control according to Figures 1 and 2, in which the insertion, deletion and modification of objects and sets of objects is possible. Control according to FIGS. 1 and 2, in which the sorting, searching, filtering according to execution-form-specific criteria in the hierarchical data structure is possible. Control according to FIGS. 1 and 2, in which transformations between different but similar hierarchical data structures are represented by animations (fade in, fade out, rotate, lift, lower). Control according to FIGS. 1 and 2, in which equivalence relations can be displayed graphically, and navigation between different occurrences of the same object is supported and can be animated graphically. A control according to claims 1 and 2 and further preceding claims used as part of a more comprehensive user interface.

Images