Exercise - Adding Devices to a Program

This exercise assumes that you have already built the Flowcode flowchart described in the exercise Creating a Flowchart.
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 Creating a Flowchart.

(For help with this, see the exercise 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

300px

• 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, and click on the 'Unconnected' label.

A pinout of the microcontroller appears.

• Click 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 'Scale' allows you to change the size (and shape) of the switch if you wish.

Add the Lamp

300px

• Click on the 'Outputs' toolbox, and locate the 'Single LED', 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 'led'.

The 'Connection' property shows that it is already connected to Port A, bit 0.

This has to be changed, as the flowchart expects it to be connected to Port B, bit 0.

• Click on the label $PORTA,0 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.

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

• Once again, no other properties need changing, though 'Scale' and 'Bulb color' settings can be altered to change the size and color 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.

What Next?

Now that the flowchart is complete, we are ready to test it. The exercise Simulating a Flowchart deals with this.