Exercise - System Panel - Adding Objects

This exercise starts the process of building the display panel for a car. It sets up the System Panel, loaded with a warning LED, mounted on the instrument panel. Although specific settings are given, you should play around with alternatives to see the effect.

• Open a new Flowcode flowchart, using the default microcontroller.

• Make sure that the System Panel is visible. If necessary, click on View and then on the check-box next to 'System Panel'.

• Click on the 'General options' tab 30px

Make the following changes:

• Move the 'Level of detail' slider fully to the right (to '10').
• Select 'Table top' shadow mode.
• Choose a 'Background' style of 'Solid color' and set the background color to dark blue, (Red=0, Green=0, Blue=128 on the 'Custom' tab.)
• Set the 'Table top' size to '20'.
• Choose a 'Table top' style of 'Solid color' and set its color to light blue, (Red=0, Green=70, Blue=255 on the 'Custom' tab.)

150px

• Click on the 'Grid and Snap options' tab 30px

Make the following changes:

• Set it to snap to the 'Table top', by clicking on the check-box next to the 'Table top' label.
• Leave the 'Show' gridlines box unchecked.

• Click on the 'Outputs' toolbox and locate the 'Single LED'.

• Click on the down-arrow next to it and then on 'Add to system panel'.

• Right click anywhere on the System Panel and select the 'Zoom to 100%' option.

The System Panel should now resemble the one shown below.

150px

• Click on the LED to select it.

In the Panel Properties, two properties appear for the LED - 'color' and 'pin'.

• The 'color' property is set as red (0x0000FF). Click on this value, and change it to orange (0x0080FF).

You may see very little change in the appearance of the LED, as currently it is turned off.

• The 'pin' property determines which pin of the microcontroller the LED is connected to.

Currently, this is $PORTA,0 (pin 0 of PORTA). Click on the label. A pinout of the microcontroller appears.

Click on bit 1 (RA1/AN1) to change this connection.

• The Panel Properties also gives information about the size and position of the LED.

By default, size is shown in terms of 'Scale'.

Hover the cursor over the folder icon next to the 'Scale' label, and then click on the down-arrow that appears.

Select 'World size'.

• Click on the 'Width' setting, (which may be shortened to 'Wi...'). Change it to 10mm.

• In similar fashion, change the 'Height' ('He...') to 10mm and the 'Depth' ('De...') to 5mm.

• As a result, the LED now looks very small on the System Panel.

You can zoom in to make it look larger. To do this:

Hold down the control 'Ctrl' key on the keyboard.