Dashboard Panel

Tutorial 5 - Dashboard Panel

Overview

The Dashboard Panel provides another framework on which to load Flowcode components. Unlike the System Panel, it gives only a top-down view of them, though they can be made more lifelike by clicking on the ‘3D view’ icon (show icon).

Electronic devices, located in the Components toolbox, can also be added to the Dashboard Panel.

You usually place buttons and other controls on it to ensure that they are always available, even when they are out of sight on the System Panel component because of object or camera rotation.

The Dashboard Panel is opened by selecting it in the View menu. When it opens, you see a background work area, with a Shapes toolbar running vertically down the left-hand side, and a Controls toolbar running horizontally across the top.

Multiple items can be selected:

• by holding down the shift key and then clicking on a number of items, one after the other;
• by left-clicking the mouse button and dragging over the items.

They can then be grouped:

• by clicking on the ‘group’ icon (show icon)
• by selecting the ‘Group’ option from the ‘Selection’ option which appears when you click the right-hand mouse button.

In this way, complex structures can be assembled from a number of parts. To ungroup, select the object and then click on the same icon.

The controls

Shapes toolbar

At the top is a color selector, which configures the color of any shape added to the work area. By clicking on the down-arrow, one of a wide range of colors can be selected.

Below it is the text icon. This can be used to 'drag and drop' a single row of alphanumeric characters onto the work area. Afterwards, you can select it, by clicking on it, and configure it using the Properties Panel. In particular, it is initially displayed as “Please change caption.” You can edit the text displayed using the bottom ‘Text’ control on the Properties Panel.

The next icon on this toolbar allows you to add a textbox. This adds a two-dimensional array of alphanumeric characters. As before, these can be edited using the ‘Text’ control on the Properties Panel. The ‘Colour’ and the ‘Background’ properties allow you to change the colour of the text in the textbox, and the background to that text. Other controls allow you to select the character font and size, and the horizontal and vertical alignment of the text within the textbox.

The next four icons allow you to add various shapes - a circle, a rectangle, a rounded rectangle and a line, to the work area. Each takes the colour chosen in the colour selector at the top. Each one can be configured using the Properties Panel, to determine the position, size and rotation of the shape, for example.

Controls toolbar

The left-hand end control (show icon) allows you to move the selected object around the work area.

Moving to the right, the next control (show icon) allows you to re-position a single point on an item. When you select an object and click on this control, two pink ‘handles’ appear on the object. Either can be selected with the mouse and moved to a new position on the work area. The effect is to change the appearance, size or rotation of the object.

The next control (show icon) allows you to change the size of the object. After selecting an object and clicking on this control, a number of blue ‘handles’ appear on the object. Any of these can be ‘grabbed’ and moved to re-size that particular dimension of the object. (Handles at the corners affect size in two dimensions.)

The next control (show icon) allows you to rotate an object. After selecting it and clicking on this control, a number of yellow ‘handles’ appear on the object. These allow the object to be rotated around different axes.

The next control (show icon) determines what happens when two objects ‘collide‘. The options are that they move through, move around or move over each other.

The next one (show icon) allows a pseudo three-dimensional effect to make the objects look more life-like.

The next two controls are used to set properties for the whole panel.

The first (show icon) allows you to lock movement of objects:

• to the grid,
• to other objects.

The grid can be re-sized and made visible in a range of colours via this control.

The second, (show icon), is used to set:

• the resolution, ‘level of detail’, of the display; More...
• the ‘Shadow mode’ (either to Object, Table top, or disabled.)

There is a zoom facility, operated by pressing the Ctrl key and moving the cursor over the viewpoint icon (show icon). Clicking the mouse button and dragging downwards causes the view to zoom out. Dragging upwards causes the view to zoom in.

The co-ordinates of the cursor are shown in the status bar at the bottom of the screen. Using this information can help you to position objects. First of all, move the cursor to the desired position, to find its co-ordinates. Then enter these into the 'Position' properties of the object in the Properties Panel.