The FUScaBR "Align" module is responsible for providing an alignment system for ScadaBR Graphic Views. This page is dedicated to explaining how to use the alignment features provided by this module.

The Align module is responsible for creating, on the Graphic View Editing page, a window with several alignment commands, as can be seen in the image below:

The main parts of this interface are:

• General controls: They are responsible for starting or stopping the alignment module, or clearing the selection of elements to be aligned. If alignment mode is not active, only this part of the interface will be visible.
• Anchor-related controls: provide features to handle the anchor element (such as changing its position, activating keyboard shortcuts for moving the anchor, or forcing the other selected elements to follow the anchor's position).
• Alignment controls: provide several features for aligning, distributing, and centering elements. The elements to be aligned must be previously selected.

To identify which elements should be aligned, you must first select a set of elements. Simply hover over the elements and click on those you want to select.

The first element selected is always called "anchor". This element is taken as a reference for several types of alignments. If you want to select a different anchor, click on Clear selection (S) to clear the currently selected elements.

Tip: be careful when clicking on HTML buttons or links. They can often redirect the current page and make you exit Graphic View edit mode. In FUScaBR 2.1+, the Align module has been improved to prevent these elements from being clicked when the alignment mode is active.

The following options allow you to manipulate the position and behavior of the anchor element (that is, the first selected element):

• Anchor position controls: Allows you to change the X and Y coordinates of the anchor in the Graphical View. Enter a custom value for X and Y and press OK to change the position.

• Move with keyboard arrows: If selected, allows you to move the anchor using the arrow keys on the keyboard. By default, each time an arrow is pressed the anchor moves by a multiple of 10px (this value can be changed in the module settings).

• Elements follow anchor: If selected, whenever the anchor position changes, the other selected elements will be moved to follow the new anchor position.

  

Alignment features are divided into 3 "categories": Alignments (top, bottom, left, right), Centering (vertical, horizontal) and Distribution (vertical, horizontal). Below is detailed how each alignment feature behaves:

Top alignment shifts the top margin of each element so that it has the same position as the top margin of the anchor.

Bottom alignment shifts the bottom margin of each element so that it has the same position as the bottom margin of the anchor.

Left alignment shifts the left margin of each element so that it has the same position as the left margin of the anchor.

Right alignment shifts the right margin of each element so that it has the same position as the right margin of the anchor.

Horizontal centering aligns the height center of each element to match the height center of the anchor.

Vertical centering aligns the width center of each element to match the width center of the anchor.

Horizontal distribution shifts elements horizontally so that they have the same horizontal distance from each other. In this context, the anchor behaves as if it were a common element.

Vertical distribution shifts elements vertically so that they have the same vertical distance from each other. In this context, the anchor behaves as if it were a common element.

You can control various functions of the alignment module through keyboard shortcuts. The table below lists the keyboard shortcuts available in the latest version of FUScaBR:

Key	Action	Remarks
a	Align left
d	Align right
w	Align top
x	Align bottom
f	Center horizontally
g	Center vertically
r	Distribute horizontally
t	Distribute vertically
Esc	Exit alignment mode	Only available if alignment mode is active
s	Clear selected elements	Only available if alignment mode is active
↑ (keyboard up arrow)	Move the anchor up	Only available if the Move with keyboard arrows checkbox is selected
↓ (keyboard down arrow)	Move the anchor down	Only available if the Move with keyboard arrows checkbox is selected
← (keyboard left arrow)	Move the anchor left	Only available if the Move with keyboard arrows checkbox is selected
→ (keyboard right arrow)	Move the anchor right	Only available if the Move with keyboard arrows checkbox is selected