LU500143B1

LU500143B1 - Alignment of Element Blocks

Info

Publication number: LU500143B1
Application number: LU500143A
Authority: LU
Inventors: Jeremy Vuillermet
Original assignee: Pitch Software Gmbh
Priority date: 2021-05-10
Filing date: 2021-05-10
Publication date: 2022-11-10
Also published as: WO2022238410A1

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 (S150), 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

92339LU (V2) -1- LU500143 Description Title: Alignment of Element Blocks

FIELD OF THE INVENTION

[0001] 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

[0002] 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.

[0003] 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 1s time-consuming for a user to perform and there is therefore a need to establish an improved method for amending and reformatting the slides.

[0004] 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.

[0005] 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 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

92339LU (V2) -2- LU500143 selected 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.

[0006] 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.

[0007] 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.

[0008] 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 auto- matically 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.

92339LU (V2) -3- LU500143

SUMMARY OF THE INVENTION

[0009] 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. À 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 1s used for the calculation of a bounding box surrounding the elements picked by a user.

[0010] 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

[0011] Figs. 1A, 1B, 1C, 1D and 1E show a first view of a computer program device for an alignment of elements on a canvas.

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

92339LU (V2) -4- LU500143

DETAILED DESCRIPTION OF THE INVENTION

[0013] 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.

[0014] Figs. 1A, 1B, 1C, 1D, and 1E 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.

[0015] 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 73c 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.

[0016] 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.

[0017] 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 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

92339LU (V2) -5- LU500143 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 73e 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.

[0018] 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.

[0019] 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.

[0020] Fig. 1B shows an example of the canvas 15 having a first element 20a and a second element 20b. As can be seen from Fig. 1B, the first element 20a has a left edge 70e1, a right edge 71el, a top edge 72el, and a bottom edge 73el. The first element 20a further has a vertical center 74c1 and a horizontal center 75c1. The second element 20b has a left edge 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.

92339LU (V2) -6- LU500143

[0021] 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, 71el, 72el, 73el, 70e2, 71e2, 72e2, 73e2 or the center lines 74e1, 75e1, 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 74e1, 75el, 74e2, 75e2 of the elements 20a, 20b displayed on the canvas 15.

[0022] 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 72e1 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 75e1 of the selected first element 20a if the cursor 27 of the user hovers over the horizontal center 75e1 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 73el of the selected first element 20a.

[0023] 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 70e1 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.

[0024] 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 81, the highest position 82 and the lowest position 83 of the picked elements 20a, 20b (in Figs. 1B and 1C) and the picked elements 20a, 20b and 20c (in Fig. 1D and Fig. 1E).

92339LU (V2) -7- LU500143

[0025] 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.

[0026] 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.

[0027] 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.

[0028] 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 72e1 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 72e1 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).

[0029] Fig. 1D 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, 7lel, 72e1, 73el, 70e2, 71e2, 72e2, 73e2, 70e3, 71e3, 72e3, 73e3 or the center lines 74el, 75e1, 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,

92339LU (V2) -8- LU500143 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 70e1 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.

[0030] 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. 1E. In the example shown in Fig. 1E, 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 70e1 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 S190).

[0031] If the user wants to, for example, align the first element 20a and the second 20b along the vertical center 74c1 or the horizontal center 75c1 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 75c1 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 hor- izontal 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

92339LU (V2) -9- LU500143 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.

[0032] 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.

[0033] 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 S110, 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.

[0034] The graphics processing unit 45 calculates in step S120 the vertical center 74el, 74e2, 74e3 and the horizontal center 75e1, 75e2, 75e3 for the picked elements 20a, 20b, 20c. Calculating the vertical center 74e1, 74e2, 74e3 of the picked elements 20a, 20b, 20c com- prises determining the middle point between the top edge 72e1, 72e2, 72e3 and the bottom edge 73el, 73e2, 73e3 of the picked elements 20a, 20b, 20c using the stored coordinates 85.

92339LU (V2) -10- LU500143 Calculating the vertical center 74e1, 74e2, 74e3 of the picked elements 20a, 20b, 20c com- prises 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.

[0035] 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 74e1, 75e1, 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 74e1, 75e1, 74e2, 75e2, 74e3, 75e3 of the picked elements 20a, 20b, 20c, the graphics processing unit displays in step S150 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 S170.

[0036] The calculating of the alignment 30 of the elements 20a, 20b, 20c by the graphics processing unit 45 comprises calculating common coordinates 85¢ for aligning the picked elements 20a, 20b, 20c along the line indicated by the visual guideline 65 as selected by the user in step S170. 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 70e1 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).

92339LU (V2) -11- LU500143

[0037] If the user then selects (as described in step S160) the visual guideline 65 with the cursor 27, the graphics processing unit 45 determines, in step S180, along which of the edges 70el, 71el, 72e1, 73el or which of the center lines 74e1, 75e1 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. 1D).

[0038] Inthe example of Fig. 1D, the user picks three elements 20a, 20b, 20c for alignment. The first element 20a comprises a first left edge 70e1, 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 70e1 of the first element 20a. The graphics processing unit 45 then knows that the visual guideline 65 displayed along the first left edge 70e1 of the first element 20a was selected by the user. The graphics processing unit 45 therefore knows that all of the first left edge 70e1, 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 85¢ 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.

[0039] If the graphics processing unit 45 determines, in step S180, 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 S190.

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

92339LU (V2) -12- LU500143 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 Tle right edge 72e top edge 73e bottom edge T4e vertical center 75e horizontal center 70c left edge 7lc right edge 7c top edge 73c bottom edge T4c vertical center 75¢ 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

92339LU (V2) -13- LU500143 230 third logic means 240 fourth logic means 250 fifth logic means

Claims

92339LU (V2) -14- LU500143 Claims

1. À 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 (S100) two or more of the plurality of elements (20) picked by a user; calculating (S110) 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 (S150), 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 (S190) 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.

92339LU (V2) -15- LU500143

4. The computer implemented method (10) according to claims 1 to 3, wherein selecting (S160) 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 (S110) 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 (S150) 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);

92339LU (V2) -16- LU500143 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).