Exercise - System Panel - Adding Objects
<sidebar>Sidebar: Panel Exercises</sidebar>
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.
Contents
New flowchart
- Start a new Flowcode flowchart, using the default microcontroller.
- Make sure that the System Panel is visible. If necessary, click on View and then select 'System Panel' a check-box will appear next to the option when enabled.
General options
- 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
- 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
- Click on the 'Outputs' toolbox and locate an LED such as the 'LED 5mm Panel' component.
- Click on the down-arrow next to the component label 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.
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.
- 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'.
- This sends a logic 1 signal to all pins of PORT A.
- The flowchart resembles the one below:
- Run the simulation, by clicking on the 'Run' icon shown opposite.
- The LED will 'turn on'.
- Double-click on the 'Output' icon again, and change the value to '0'.
- Now when you simulate the flowchart, the LED will turn off.
- Save the flowchart as "System_Panel_Add_LED"
Download the exercise
You can download the file created by this exercise and open it in Flowcode to identify errors in your program/file or you could also download the file to skip to the next exercise.
Download the file by clicking on the file link below and then right clicking on the link and selecting 'Save link as...' or 'Save target as...' (depending on your browser).
What next
The next stage is to mount the LED on the instrument panel. This is covered in the exercise controlling shapes
Video instructions
See the Adding Objects to the Panel video for a demonstration and explanation about adding components and objects to the System Panel.
{{#ev:youtube|2yT5XTLLX6o|640}}