Exercise - System Panel - Adding Objects

From Flowcode Help
Revision as of 15:59, 16 January 2014 by JonnyW (talk | contribs) (XML import)
Jump to navigationJump to search

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


New flowchart

  • 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

  • Click on the 'General options' tab Gen Panel General Options 01.png
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 Gen Panel Tools 01.png
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

Gen Inputs Components Toolbar 01.png
  • 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.
Gen System Panel LED 5mm 01.png




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. Gen Panel Camera Zoom.png
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:
Gen exerciseSystemPaneladdobjects outputprops 01.png
Gen exerciseSystemPaneladdobjects runicon 01.png
  • 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.

  • To download the file, click on the link below and then either:
  • Click on the file name.
  • Right click the file name and select 'Save link as...' or 'Save target as...' (depending on your browser).
FC6 Icon.png

Exercise - System Panel - Adding Objects


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}}