Exercise - Adding Devices to a Program

<sidebar>Sidebar: Controlling Electronic Devices With Flowcode</sidebar> This exercise assumes that you have already built the Flowcode flowchart described in the exercise Configuring Icons and Variables.
To complete the program, you need to add the two electronic components, the switch and the lamp.

Load the Flowcode Flowchart

• Open the flowchart, called 'Lamp1.fcf' which you created in the exercise Configuring Icons and Variables.

(For help with this, see the article Opening an Existing Flowchart)

The System Panel and Panel Properties should be visible. If not, use the View menu to select them.

Add the Switch

• Click on the 'Inputs' toolbox, and locate the Push Round Panel switch.
• Hover over the image, and click on the down arrow that appears.
• Select the 'Add to system panel' option.

• Click on the switch on the System Panel to select it. Its properties appear in the Panel Properties.

Notice that the name ('Handle') of the component selected appears at the top of the Panel Properties.

In this case, it shows the name of the switch as 'sw_push_rnd_pnl'!

• Find the 'Connections' properties on the Panel Properties, the box to the right of it.

A pinout of the microcontroller appears.

• Ensure that it is connected to Port A bit 0 by using the drop down menus or clicking on the rectangle representing the pin for Port A bit 0 (called RA0/AN0 on the graphic.)

This connects the switch to Port A bit 0 of the microcontroller, matching the settings you used when you created the flowchart.

This setting is shown opposite.

• No other properties need changing, though the Scale section allows you to change the size (and shape) of the switch if you wish.

Add the Lamp

• Click on the 'Outputs' toolbox, and locate and add an LED such as the LED 5mm Panel component, which we will use as a lamp.
• Hover over the image, and click on the down arrow that appears.
• Select the 'Add to system panel' option.
• The LED appears in the middle of the System Panel, probably right on top of the switch.

It should already be selected, but if not click on it.

If so, drag it to a suitable position off to one side.

• With the LED selected, look at the Panel Properties.

Notice that the 'Handle' has changed to the name of the component handle.

The 'Connection' property may not be connected to the correctly, as the flowchart expects it to be connected to Port B, bit 0.

• Click on the box next to the 'Connection' property and, as before, a pinout of the chip appears.
• Click on the rectangle representing the pin for bit 0 of Port B, shown as RB0/INT or use the drop down menus to connect the component.

The Panel Properties now show that the LED is connected to Port B, bit 0.

• Once again, no other properties need changing, though the 'Scale' section can alter the size of the component and the 'Color' property (also known as 'Bulb color' in other components) allows you to change the colour of the LED.

Save the Flowchart

• Save the flowchart using the same name. The simplest way to do this is to click on the 'Save' icon.

For more information, see Saving a Flowchart.

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

Exercise - Adding Devices to a Program

What next?

Now that the flowchart is complete, we are ready to test it in simulation, as described in the next exercise Simulating a Program.