Exercise - System Panel - Adding Objects

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

New flowchart

• 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'.

General options

• 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.)

Grid and snap options

• 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.

Add the LED

150px

• 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

Change the LED properties

• 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.

Zoom in

• 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. The 'zoom' icon appears. 30px

Move the cursor over this icon. Now when you move the cursor up the screen, the view zooms in, and when you move it down, it zooms out.

Adjust the zoom so that the 'Table top' fills most of the System Panel, making the LED more visible.

Switch on

• Click and drag an 'Output' icon to your flowchart.

Double-click on it and change the 'Variable or value' setting from '0' to '255'.

Run the simulation, by clicking on the 'Run' icon