WO2022238410A1

WO2022238410A1 - Alignment of element blocks

Info

Publication number: WO2022238410A1
Application number: PCT/EP2022/062651
Authority: WO
Inventors: Jeremy VUILLERMET
Original assignee: Pitch Software Gmbh
Priority date: 2021-05-10
Filing date: 2022-05-10
Publication date: 2022-11-17
Also published as: LU500143B1

Abstract

A computer implemented method (10) for an alignment (30) and a computer (100) for the alignment (30) of at least one of a plurality of elements (20) along a visual guideline (65) on a canvas (15) using a calculated alignment (30) is disclosed. The method (10) comprises displaying (SI 50), at the element (20) hovered by a user interface, the visual guideline (65) for selecting by a user. The method (10) further comprises the calculating (S170) of the alignment (30) of the picked elements (20) using the visual guideline (65) and the stored possible anchoring positions (50) for the alignment of the picked elements (20) on the canvas (15). The method further comprises aligning (S190) the picked elements (20) along the selected visual guideline (65) using the calculated alignment (30).

Description

1

Description

Title: Alignment of Element Blocks

FIELD OF THE INVENTION

[0001] This application claims priority of Luxembourg Patent Application number LU500143, filed on 10 May 2021. The entire disclosure of the Luxembourg Patent Applica tion number LU500143 is hereby incorporated herein by reference.

[0002] The field of the invention relates to a computer implemented method and a com puter program device for an alignment of a plurality of elements on a canvas displayed on a display unit.

BACKGROUND OF THE INVENTION

[0003] Effective communication with both internal and external audiences is important and electronic presentations using, for example, Microsoft’s PowerPoint software or Apple’s Keynote software are often used for communicating information to an audience. This soft ware creates a canvas on which the user can create slides and, on the slides, drawing blocks. The drawing blocks include images and texts and can usually be individually formatted. [0004] Such presentations can take a long time to prepare and to format correctly. A presentation may require regular updating (depending on its content) and new information may need to be added. This updating and addition may require re-arrangement of the text on the slides which can lead to the need to re-arrange the drawing blocks on the slide. This is time-consuming for a user to perform and there is therefore a need to establish an improved method for amending and reformatting the slides.

[0005] There are several patent documents known that describe a computer-implemented method for the re-arrangement of objects in a graphics editing program. For example, US Patent 8,659,621 (Stiglitz et al, assigned to Apple) teaches a method which involves the scanning of a drawing area of a graphics editing program to identify drawing objects and identifying the overlap of the drawing objects so as to eliminate the overlap.

[0006] US Patent US 7,545,392 B2 (Steven Jobs et al) teaches a system, method, and ap paratus that displays one or more visual guidelines if user-selected element moves into a 2 particular alignment with one or more other elements on the canvas. The one or more visual guidelines are used to align the elements in relation to one another. In this way, the screen is free from the clutter of the visual guidelines when the visual guidelines are not needed, but the visual guidelines are present when the visual guidelines are needed, i.e., when the se lected element moves into or near an alignment with another element or elements. The method therefore enables the user to align objects quickly and efficiently on the canvas. A method for automatically aligning a selected number of a plurality, however, is not disclosed in the document.

[0007] US Patent US 9,412,186 B2 (Allyn Barry Christopher et al, assigned to Microsoft Technology Licensing LLC) discloses a computer system that assists the user of computer drawing programs to accurately place elements on a canvas. The system establishes and dis plays visual guidelines according to elements already placed on the canvas. As a new ele ment is dragged for placement on the canvas, the system analyzes the areas around the new object for already -placed elements. The system then determines the spacing between the already -placed elements and indicates to the user where the dragged object should be placed to maintain the same spacing as the elements already placed on the canvas. The document offers a solution for aligning elements with already-placed elements of the canvas. The sys tem disclosed remains silent on automatically aligning objects on the canvas.

[0008] US Patent US 7,287,241 B2 (Fred Balsiger, assigned to Microsoft Corp.) provides a method for a visual code designer that allows a user to manipulate elements on a canvas when designing new software tools. In the visual code designer, each element has extensible visual guidelines that define alignment characteristics for the control. The method for the visual code designer disclosed assists the user in positioning the elements on the canvas by showing visual guidelines extending from one or more element on the canvas. The method does not, however, disclose a method for the automatic alignment of elements on the canvas. [0009] European Patent Application EP 0 848 351 A2 (Richard Gartland, assigned to Adobe Systems Inc.) discloses a method and apparatus for repositioning elements on a can vas in response to a user requesting to change a layout and/or size of the canvas. The method includes detecting the elements on the canvas and receiving a user request to change the layout or size of the canvas for display of the element. Using the detected elements and the user request, the method realigns and resizes the elements according to the user request. The page layout is redefined according to the user request. The method disclosed allows to -3- automatically realign and/or resize elements on the canvas for improved visual presentation of the elements to the user after changing the layout or size of the canvas by the user.

[0010] Zhang Yunke et.al. : “Layout Style Modeling for Automating Banner Design”, Pro ceedings of the on Thematic Workshops of ACM Multimedia 2017, Thematic Workshops 2017, [Online], 1 January 2017 discloses a system and method for automatically generating a banner layout. The system and method are directed at creating banners for layouts having different banner sizes. A plurality of training banners is input into the system and analyzed to identify relevant style parameters for a specific banner size. A probabilistic model is de veloped from these input training banners. A style parameter interpolation method is then used to determine support arbitrary size banner design based on a small collection of fixed- size style parameters. A style transfer technique generating new multi-size styles is also de scribed. A calculation of a user interface position is not disclosed. Displaying a visual guide line or aligning a plurality of elements along this visual guideline is also not disclosed. [0011] Marianela Ciolfi Felice et.al.: “Beyond Snapping”, User Interface Software and Technology, ACM, 2 Penn Plaza, Suite 701 New York Ny 10121 — 0701 USA, 16 October 2016 discloses a system and method for alignment of elements along a visual guideline re ferred to as “StickyLine”. Users of the system and method create guidelines using a range of five different tools, thereby creating horizontal, vertical, circular, and parallel guidelines. These guidelines are created by clicking a respective symbol in a toolbox/palette. An auto create mode is also described. Potential horizontal, vertical, and parallel alignments are dis played while objects are being moved in this auto-create mode. Marianela- further describes use of an adjustable bounding-box to influence the alignment of the elements relative to each other. Aligning elements using a plurality of determined anchoring positions and a visual guidelines selected by a user is not disclosed.

[0012] Kathy Ryall et.al.: “An Interactive Constraint-based System for Drawing Graphs”, UIST 1997. 10th Annual Symposium on User Interface Software and Technology. Proceed ings of the ACM Symposium on User Interface Software and Technology. Banff, Alberta, Canada, Oct. 14 - 17, 1997 discloses a constraint-based system termed “GLIDE” and a method for drawing small- and medium-sized graphs. GLIDE incorporates a specialized set of constraints referred to as “Visual Organization Features (VOFs)” and aims at improving constraint-based drawing systems using the specialized set of constraints. It is further dis closed that a set of unorganized elements can be organized using the GLIDE-system. A -4- calculation of a user interface position is not disclosed. Displaying a visual guideline or aligning a plurality of elements along this visual guideline is also not disclosed.

SUMMARY OF THE INVENTION

[0013] A computer program device and a computer-implemented method for an alignment of one or more of a plurality of elements on a canvas are disclosed. The computer program device comprises the canvas stored in a graphics memory and displayed on a display unit. The computer program device further comprises a graphics processing unit for the calcula tion of the alignment of the elements on the canvas. A plurality of anchoring positions for the elements on the canvas are identified using the graphics processing unit and items of memory elements stored in the graphics memory. The computer program device further comprises position information for the elements relative to the canvas. The position infor mation is used for the calculation of a bounding box surrounding the elements picked by a user.

[0014] The computer-implemented method for the alignment of the elements on the canvas comprises calculating the alignment for the elements picked by the user. The alignment is stored in the graphics memory and is analyzed by the graphics processing unit to identify common values for coordinates among the picked elements. Using the selection bounding box and the picked elements, the visual guidelines for the selection of the alignment are calculated by the graphic processing unit. If the user hovers, with a cursor, over an edge or a center line of one of the elements, the hovering of the cursor is detected by the graphics processing unit and a visual guideline extending from the edge or center of the element is displayed on the canvas. If the user selects the displayed visual guideline, an alignment of the picked elements is calculated by the graphics processing unit. The picked elements are then aligned along the direction of the selected one of the visual guidelines using the calcu lated alignment of the picked elements.

DESCRIPTION OF THE FIGURES

[0015] Figs. 1A, IB, 1C, ID and IE show a first view of a computer program device for an alignment of elements on a canvas. -5-

[0016] Figs. 2A and 2B show a flow chart describing the method for calculating of the alignment of elements on a canvas.

DETAILED DESCRIPTION OF THE INVENTION

[0017] The invention will now be described on the basis of the figures. It will be under stood that the embodiments and aspects of the invention described herein are only examples and do not limit the protective scope of the claims in any way. The invention is defined by the claims and their equivalents. It will be understood that features of one aspect or embod iment of the invention can be combined with a feature of a different aspect or aspects and/or embodiments of the invention.

[0018] Figs. 1 A, IB, 1C, ID, and IE show a first view of a computer 100 for an alignment 30 of elements 20 on a canvas 15. As can be seen from Fig. 1A, the computer 100 comprises a graphics memory 35, a graphics processing unit 45, and a display unit 40 for displaying at least one of the elements 20. The elements 20 comprise pictures, text boxes, diagrams, for mulas, or other types of shapes that can be aligned on the canvas 15.

[0019] The canvas 15 comprises a left edge 70c, a right edge 71c, a top edge 72c, and a bottom edge 73c. The left edge 70c indicates the left border of the canvas 15. The right edge 71c indicates the right border of the canvas 15. The top edge 72c indicates the top border of the canvas 15. The bottom edge 73 c indicates the bottom border of the canvas 15. The canvas 15 further comprises a vertical center 74c and a horizontal center 75c. The vertical center 74c indicates the middle of the canvas 15 in the vertical direction. The horizontal center 75c indicates the middle of the canvas 15 in the horizontal direction.

[0020] The element 20 has a left edge 70e, a right edge 71e, a top edge 72e, and a bottom edge 73e. The left edge 70e indicates the left border of the one of the element 20. The right edge 71e indicates the right border of the one of the element 20. The top edge 72e indicates the top border of the element 20. The bottom edge 73e indicates the bottom border of the element 20. The element 20 further has a vertical center 74e and a horizontal center 75e. The vertical center 74e indicates the middle of the element 20 in a vertical direction. The hori zontal center 75e indicates the middle of the element 20 in a horizontal direction.

[0021] The left edge 70e of the element 20 is calculated by the graphics processing unit 45 by defining coordinates for the start of the left edge 70e relative to the canvas 15 and the end 6 of the left edge 70e relative to the canvas 15. The right edge 71e of the element 20 is calcu lated by the graphics processing unit 45 by defining coordinates for the start of the right edge 71e relative to the canvas 15 and the end of the right edge 71e relative to the canvas 15. The top edge 72e of the element 20 is calculated by the graphics processing unit 45 by defining coordinates for the start of the top edge 72e relative to the canvas 15 and the end of the top edge 72e relative to the canvas 15. The bottom edge 73e of the element 20 is calculated by the graphics processing unit 45 by defining coordinates for the start of the bottom edge 73 e relative to the canvas 15 and the end of the bottom edge 73e relative to the canvas 15. The calculated coordinates are stored in the graphics memory 35 for later processing by the graphics processing unit 45.

[0022] The graphics memory 35 is used for storing the alignment 30 of the elements 20 on the canvas 15. The alignment 30 indicates common coordinates 85c of the selected elements 20 on the canvas 15. The common coordinates 85c are similar or identical values of coordi nates 85 of the elements 20 relative to the canvas 15. The coordinates are, for example, expressed in x-direction and y-direction relative to the canvas 15. The x-direction indicates a horizontal position on the canvas and the y-direction indicates a vertical position on the canvas 15. The graphics memory 35 is connected to the graphics processing unit 45 of the computer 100. The graphics processing unit 45 is used for analyzing memory elements stored in the graphics memory 35 to identify at least one alignment 30 of the elements 20 on the canvas 15.

[0023] A user interface comprises at least a cursor 27, pointer, or object displayed on the canvas 15. The cursor 27 is used by a user (not shown) to hover over, point at, or select one or more elements 20 displayed on the display unit 40. The graphics processing unit 45 is able to identify the position of the cursor 27 on the display unit 40 and sends a signal to the display unit 40 to display an appropriate symbol at the position on the display unit 40. The graphics processing unit 45 is able to access data in the graphics memory 35 and thereby able to identify the position of the cursor 27 relative to the canvas 15 and the elements 20 displayed on the canvas 15.

[0024] Fig. IB shows an example of the canvas 15 having a first element 20a and a second element 20b. As can be seen from Fig. IB, the first element 20a has a left edge 70el, a right edge 7 lei, a top edge 72el, and a bottom edge 73el. The first element 20a further has a vertical center 74cl and a horizontal center 75cl. The second element 20b has a left edge -7-

70e2, a right edge 71e2, a top edge 72e2, and a bottom edge 73e2. The second element 20b further has a vertical center 74c2 and a horizontal center 75c2.

[0025] Fig. 1C shows an example for the alignment 30 of two of the elements 20. If the user picks at least a first element 20a and a second element 20b displayed on the canvas 15 and hovers, with the cursor 27 displayed on the canvas 15, over one of the edges 70el, 7 lei, 72el, 73el, 70e2, 71e2, 72e2, 73e2 or the center lines 74el, 75el, 74e2, 75e2 of one of the picked elements 20a, 20b, a visual guideline 65 is displayed on the canvas 15. The visual guideline 65 will be displayed extending along the direction of one of the hovered edges 70el, 71el, 72el, 73el, 70e2, 71e2, 72e2, 73e2, or center lines 74el, 75el, 74e2, 75e2 of the elements 20a, 20b displayed on the canvas 15.

[0026] The visual guideline 65 will be displayed as a horizontal line if the user hovers over a horizontally extending edge or center line of the first element 20a or the second element 20b. The visual guideline 65 is, in a first example shown in Fig. 1C, displayed extending along a top edge 72el of the selected first element 20a when the user hovers the over the top edge 72el with the cursor 27. The visual guideline 65 will instead be displayed along a horizontal center 75el of the selected first element 20a if the cursor 27 of the user hovers over the horizontal center 75el of the selected first element 20a. The visual guideline 65 will be displayed at a bottom edge 73el of the first element 20a if the cursor 27 of the user hovers over the bottom edge 73 el of the selected first element 20a.

[0027] The visual guideline 65’ will be displayed as a vertical line if the cursor 27 of the user hovers over a vertically extending edge 70el, 71el or center line 74el of the first ele ment 20a or a vertically extending edge 70e2, 71e2 or center line 74e2 of the second element 20b. This is also shown in Fig. 1C in which a vertically arranged visual guideline 65’ is, in a second example, displayed extending along the left edge 70el of the selected first element 20a. The horizontal visual guidelines65 or the vertical visual guidelines 65’ are displayed in one direction and extend from one of the picked ones of the elements 20a, 20b within the selection bounding box 60. The calculating of the visual guidelines 65 for showing on the canvas 15 is conducted by the graphics processing unit 45, as is further elaborated in the description of Figs. 2A and 2B.

[0028] A selection bounding box 60 encompassing the picked first element 20a and the picked second element 20b is calculated by the graphics processing unit 45. The selection bounding box 60 comprises information on the leftmost position 80, the rightmost position 8

81, the highest position 82 and the lowest position 83 of the picked elements 20a, 20b (in Figs. IB and 1C) and the picked elements 20a, 20b and 20c (in Fig. ID and Fig. IE).

[0029] The selection bounding box 60 can be expressed in coordinates 85 relative to the canvas 15. The coordinates 85 can be, for example, expressed in position information 90 regarding the horizontal or x-direction of the canvas 15 and in position information 90 re garding the vertical or y-direction of the canvas 15. The outline of the selection bounding box 60 is limited by the canvas 15. If one or more of the elements 20 have coordinates extending beyond the canvas 15, the selection bounding box 60 is limited to the borders of the canvas 15.

[0030] In the present example, the selection bounding box 60 encompasses the picked first element 20a and the picked second element 20b. The position information 90 stored as the selection bounding box 60 therefore comprises information on the location of the picked first element 20a and the picked second element 20b relative to the canvas 15. More precisely, the selection bounding box 60 comprises the leftmost position 80, the rightmost position 81, the highest position 82, and the lowest position 83 of the picked first element 20a and the picked second element 20b relative to the canvas 15.

[0031] The visual guideline 65 is displayed within a selection bounding box 60. The visual guideline 65 will usually be displayed in the horizontal direction or in the vertical direction. The visual guideline 65 can also, if necessary, be displayed in other directions and/or at other angles.

[0032] In the present example shown in Fig. 1C, the user has picked the first element 20a and the second element 20b. If the user then selects, for example, the visual guideline 65 extending along the top edge 72el of the first element 20a, the second element 20b will be horizontally aligned with the first element 20a. More specifically, the top edge 72e2 of the second element 20b will be aligned with the top edge 72el of the first element 20a along the visual guideline 65. The aligning of the elements 20a, b is described in further detail in the description of Figs. 2A and 2B (see step 200).

[0033] Fig. ID shows a further example of the computer 100 and method 10 for the align ment 30 of the elements 20 on the canvas 15. The user picks, for example, a first element 20a, a second element 20b, and a third element 20c out of the plurality of elements 20 dis played on the canvas 15. If the user then hovers with the cursor 27 over one of the edges 70el, 71el, 72el, 73el, 70e2, 71e2, 72e2, 73 e2, 70e3, 71e3, 72e3, 73 e3 or the center lines -9-

74el, 75el, 74e2, 75e2, 74e3, 75e3 of the picked elements 20a, 20b, 20c, the visual guideline 60 is displayed extending along the edge 70el, 71el, 72el, 73el, 70e2, 71e2, 72e2, 73e2, 70e3, 71e3, 72e3, 73e3 70e71e72e73eor center line 74el, 75el, 74e2, 75e2, 74e3, 75e3 74e75e hovered by the cursor 27. If the user hovers with the cursor 27, for example, over the vertically extending left edge 70el of a first element 20a, the visual guideline 65 is displayed on the canvas 15 extending in the direction of the hovered left edge 70el of the first element 20a within the area surrounded by the selection bounding box 60. The visual guideline 65 therefore extends vertically from lowest position 83 of the picked elements 20a, 20b, 20c, as encompassed by the selection bounding box 60, to the highest position 82 of the picked elements 20a, 20b, 20c, as encompassed by the selection bounding box 60.

[0034] If the user then selects the displayed (vertically arranged) visual guideline 65’, the picked elements 20a, 20b, 20c are left aligned along the vertically arranged visual guideline 65 as shown in Fig. IE. In the example shown in Fig. IE, the left edge 71e2 of the second element 20b is aligned with the left edge 71el of the first element 20a. The left edge 71e3 of the third element 20c is also aligned with the left edge 71el of the first element 20a. The second element 20b and the third element 20c are therefore moved and arranged also left- aligned along the vertically arranged visual guideline 65’ extending from the left edge 70el of the first element. The alignment of the elements 20a, 20b, 20c is elaborated in further detail in the description of Figs. 2A and 2B (see step SI 90).

[0035] If the user wants to, for example, align the first element 20a and the second 20b along the vertical center 74cl or the horizontal center 75cl of the first element 20a, the graphics processing unit 45 needs to select one alignment of the first element20a and the second element 20b. The first element 20a has a center point located at a position within the first element 20 at which the vertical center 74el and the horizontal center 75el intersect. If the cursor 27 hovers over the center point of the first element 20a, the user desires, for ex ample, to align the first element 20a and the second element 20b along the vertical center 74cl or the horizontal center 75cl of the first element 20a. The alignment of the first ele ments 20a and the second element 20b is, however, not clear in the case of hovering the center point of the first element 20a because the graphics processing unit 45 is not able to determine if the user desires to align the first elements 20a and the second element 20b hor izontally or vertically. The graphics processing unit 45 is therefore set to display only one of the visual guidelines 65 or 65’ either extending in a vertical direction or extending in a 10 horizontal direction. The user will then select the displayed visual guideline 65, 65’ for the alignment of the first element 20a and the second element 20b, as will be described now. It will be noted that a similar alignment 30 could be made using the second element 20b but the method will only be described in detail in connection with the first element 20a.

[0036] Figs. 2A and 2B show a flow chart describing the computer implemented method 10 for calculating the alignment 30 of the elements 20a, 20b and 20c on the canvas 15. The user picks at least two of the plurality of the elements 20a, 20b and 20c displayed on the canvas 15. Picking the elements 20a, 20b and 20c is usually done using the cursor 27 but could also be done using a menu.

[0037] The graphics processing unit 45 detects in step S100 of Fig. 2A the elements 20a, 20b and/or 20c picked by the user (as described above). In step SI 10, the selection bounding box 60 is calculated by the graphics processing unit 45 using one of the edges 70el, 71el, 72el, 73el, 70e2, 71e2, 72e2, 73e2, 70e3, 71e3, 72e3, or 73e3 of the picked elements 20a, 20b, 20c. Calculating the selection bounding box 60 comprises calculating the leftmost po sition 80, the rightmost position 81, the highest position 82 and/or the lowest position 83 of all of the picked elements 20a, 20b and 20c. The graphics processing unit 45 then calculates the maximum and minimum values for the coordinates 85 of the elements 20a, 20b, 20c on the canvas 15 individually. The graphics processing unit 45, for example, first determines the leftmost position 80 of the picked elements 20a, 20b, 20c. The graphics processing unit 45 subsequently determines the rightmost position 81, the highest position 82, and the lowest position 83 of the picked elements 20a, 20b, 20c. The leftmost position 80 indicates the coordinates 85 of the border of one of the plurality of the elements 20a, 20b, 20c being the furthest on the left relative to the canvas 15. The rightmost position 81 indicates the coordi nates 85 of the border of one of the plurality of the elements 20a, 20b, 20c being the furthest on the right relative to the canvas 15. The highest position 82 indicates the coordinates 85 of the border of one of the plurality of the elements 20a, 20b, 20c being the furthest to the top relative to the canvas 15. The lowest position 83 indicates the coordinates 85 of the border of one of the plurality of the elements 20a, 20b, 20c being the furthest to the bottom relative to the canvas 15.

[0038] The graphics processing unit 45 calculates in step SI 20 the vertical center 74el, 74e2, 74e3 and the horizontal center 75el, 75e2, 75e3 for the picked elements 20a, 20b, 20c. Calculating the vertical center 74el, 74e2, 74e3 of the picked elements 20a, 20b, 20c 11 comprises determining the middle point between the top edge 72el, 72e2, 72e3 and the bot tom edge 73el, 73e2, 73e3 of the picked elements 20a, 20b, 20c using the stored coordinates 85. Calculating the vertical center 74el, 74e2, 74e3 of the picked elements 20a, 20b, 20c comprises determining the middle point between the left edge 70el, 70e2, 70e3 and the right edge 71el, 71e2, 72e3 of the picked elements 20a, 20b, 20c using the stored coordinates 85. [0039] When the graphics processing unit 45 determines that the selection bounding box 60 was found for the picked elements 20a, 20b, 20c, the position of the cursor 27 relative to the canvas 15 is determined by the graphics processing unit 45 in step S130. The graphics processing unit 45 is configured to track the position of the cursor 27 as the cursor 27 is moved relative to the canvas 15, as already described above. The graphics processing unit 45 determines, in step S140, if the user hovers over one of the edges 70el, 71el, 72el, 73el, 70e2, 71e2, 72e2, 73e2, 70e3, 71e3, 72e3, 73e3 or the center lines 74el, 75el, 74e2, 75e2, 74e3, 75e3 of the picked elements 20a, 20b, 20c with the cursor 27. If the graphics processing unit detects that the cursor 27 hovers over one of the edges 70el, 71el, 72el, 73el, 70e2, 71e2, 72e2, 73e2, 70e3, 71e3, 72e3, 73e3 or the center lines 74el, 75el, 74e2, 75e2, 74e3, 75e3 of the picked elements 20a, 20b, 20c, the graphics processing unit displays in step SI 50 the visual guideline 65. The visual guideline 65 is displayed extending in the direction of the 70el, 71el, 72el, 73el, 70e2, 71e2, 72e2, 73e2, 70e3, 71e3, 72e3, 73e3 or the center lines 74el, 75el, 74e2, 75e2, 74e3, 75e3 over which the cursor 27 hovers. The visual guideline 65 is displayed within the selection bounding box 60. The visual guideline 65 extends within the selection bounding box 60 in one aspect in horizontal or vertical direction. If the user selects the displayed visual guideline 65 in step S160, the graphics processing unit 45 calcu lates the alignment of the elements 20 in step SI 70.

[0040] The calculating of the alignment 30 of the elements 20a, 20b, 20c by the graphics processing unit 45 comprises calculating common coordinates 85c for aligning the picked elements 20a, 20b, 20c along the line indicated by the visual guideline 65 as selected by the user in step SI 70. The common coordinates 85c are similar or identical values for the coor dinates 85 of the elements 20 and the calculating of the common coordinates 85c comprises determining of common values for the coordinates 85 of the elements 20a, 20b, 20c relative to each other and/or relative to the canvas 15. Calculating the alignment 30 also comprises determining the position of the selected visual guideline 65 relative to the one of the elements 20a, 20b, 20c hovered by the cursor 27. For example, if the user hovers over a left edge 70el 12 of a first element 20a, the visual guideline 65 is displayed extending vertically along the left edge 70el of the first element 20a (as described above).

[0041] If the user then selects (as described in step SI 60) the visual guideline 65 with the cursor 27, the graphics processing unit 45 determines, in step SI 80, along which of the edges 70el, 71el, 72el, 73el or which of the center lines 74el, 75el of the first element 20a the selected visual guideline 65 was displayed. The graphics processing unit 45 therefore deter mines that, in the present example, the visual guideline 65 was displayed along the left edge 70el of the first element 20a. The graphics processing unit 45 therefore knows, that the other ones of the picked media elements 20 need to be aligned along the left edge 70el of the picked media elements 20 (see also Fig. ID).

[0042] In the example of Fig. ID, the user picks three elements 20a, 20b, 20c for alignment. The first element 20a comprises a first left edge 70el, the second element 20b comprises a second left edge 70e2, and the third element 20c comprises a third left edge 70e3. The user then selects the visual guideline 65 displayed while hovering the first left edge 70el of the first element 20a. The graphics processing unit 45 then knows that the visual guideline 65 displayed along the first left edge 70el of the first element 20a was selected by the user. The graphics processing unit 45 therefore knows that all of the first left edge 70el, the second left edge 70e2, and the third left edge 70e3 of the selected three elements 20a, 20b, 20c should be aligned along the selected visual guideline 65 displayed along the first left edge 70el of the first element 20a. The graphics processing unit 45 then calculates, using the common coordinates 85c stored in the graphics memory 35 (see also step S130) for the picked media elements 20a, 20b, 20c the alignment along the selected visual guideline 65. [0043] If the graphics processing unit 45 determines, in step SI 80, that the alignment 30 was calculated for the picked elements 20a, 20b, 20c in the selection bounding box 60, the elements 20a, 20b, 20c are aligned using the calculated alignment 30 in step SI 90.

[0044] The user is able to align again, or re-align, already aligned elements 20 as described in steps SI 00 to SI 90 by picking the elements 20a, 20b, 20c and selecting (as described in step SI 70) one of the visual guidelines 65. The elements 20 will then be aligned as described above. -13-

Reference numerals

10 computer implemented method

15 canvas

20 elements

30 alignment

35 graphics memory

40 display unit

45 graphics processing unit

60 selection bounding box

65 visual guidelines

70e left edge

71e right edge

72e top edge

73e bottom edge

74e vertical center

75e horizontal center

70c left edge

71c right edge

72c top edge

73c bottom edge

74c vertical center

75c horizontal center

80 leftmost position

81 rightmost position

82 highest position

83 lowest position

85 coordinates

85c common coordinates

90 position information

210 first logic means

220 second logic means third logic means fourth logic means fifth logic means

Claims

-15-Claims

1. A computer implemented method (10) for an alignment (30) of at least one of a plu rality of elements (20) displayed on a canvas (15), wherein the canvas (15) is stored as items of storage in a graphics memory (35) and displayed on a display unit (40), the computer implemented method comprising: detecting (SI 00) two or more of the plurality of elements (20) picked by a user; calculating (SI 10) at least one selection bounding box (60) for the picked ones of the plurality of elements (20); determining (S130) a user interface position relative to the canvas (15); displaying (SI 50), at a hovered one of the picked ones of the plurality of ele ments (20), a visual guideline (65) for selecting by a user, wherein the hovered one of the picked ones of the plurality of elements (20) is hovered by a user interface; calculating (S170) the alignment (30) of the picked ones of the plurality of elements (20) using the plurality of the anchoring positions (50) and the visual guide line (65) selected by the user; and aligning (SI 90) the picked ones of the plurality of elements (20) along the selected visual guideline (65) using the calculated alignment (30).

2. The computer implemented method (10) according to claim 1, further comprising calculating (S120) a vertical center (74e) and a horizontal center (75e) for the picked ones of the plurality of elements (20);

3. The computer implemented method (10) according to claims 1 and 2, wherein calculating (S170) the alignment (30) of the picked ones of the plurality of elements (20) comprises determining a position of the selected visual guideline (65) relative to the hovered one of the plurality of the element (20), wherein the hovered one of the picked ones of the plurality of elements (20) is hovered by the user inter face. -16-

4. The computer implemented method (10) according to claims 1 to 3, wherein selecting (SI 60) the visual guideline (65) by the user is done using a deter mined position of the user interface to the canvas (15).

5. The computer implemented method (10) according to claims 1 to 4, wherein elements (20) comprise at least one of a left edge (70), a right edge (71), a top edge (72), a bottom edge (73), a vertical center (74) or a horizontal center (75).

6. The computer implemented method (10) according to claims 1 to 5, wherein calculating (SI 10) the selection bounding box (60) comprises calculating the leftmost position (80), the rightmost position (81), the highest position (82) and the lowest position (83) of the picked ones of the plurality of elements (20).

7. The computer implemented method (10) according to claims 1 to 6, wherein displaying (SI 50) the visual guideline (65) comprises calculating at least one of the intersection of the visual guideline (65) and the selection bounding box (60) using the graphics memory (35).

8. A computer (100) for an alignment (30) of at least one of a plurality of elements (20) on a canvas (15), wherein the canvas (15) is stored as items of storage in a graphics memory (35) and displayed on a display unit (40), the computer (100) comprising: first logic means (210) for calculating, using the graphics processing unit (45) and at least one of a leftmost position (80), a rightmost position (81), a topmost po sition (82) and/or a bottommost position (83) of the picked ones of the plurality of elements (20), a selection bounding box (60); second logic means (220) for storing the selection bounding box (60) in the graphics memory (35); third logic means (230) for calculating a vertical center (74e) and a horizontal center (75e) of the picked ones of the plurality of elements (20); fourth logic means (240) for determining a position of a user interface relative to the canvas (15); -17- fifth logic means (250) for rearranging at least one of said elements (20) to a different position on said canvas (15) so that at least one of the anchoring positions 50) of said rearranged elements (20) moves to a common alignment (30).