Exercise - Using Component Macros

Component macros are sections of code that have been written to support the components included with Flowcode 6.
They take all the effort out of using these components.

This exercise uses them to control a particularly complicated, but very common device, the Liquid Crystal Display (LCD).
In this case, it uses a LCD to display elapsed time in a timer.

The core sequence

At the core of the program is a section that sets up the LCD to display the time.
The flowchart sequence for displaying the elapsed time will be:

• Initialize the LCD using the 'Start' macro.
• Set the cursor position in the LCD, using the 'Cursor' macro.
• Display the text "Elapsed time", using the 'PrintString' macro.
• Set the time to zero.
• Change the cursor position, using the 'Cursor' macro.
• Display the time.
• Wait for one second.
• Increment the time.
• Display the new time.
• Loop back and repeat the process from the one second delay.

Set up the flowchart

• Open Flowcode, and set up the new flowchart as described in Creating Your First Flowchart.

Create the core sequence

Add the LCD

• Locate the 'LCD' inside the 'Outputs' toolbox in the Icons toolbar.

• Hover over the image to the left of the 'LCD' label, and click on the down-arrow that appears.
• Click on the 'Add to system panel' option to select it.
• Zoom in until the LCD image is big enough to read.(See System Panel for information on how to zoom.)

250px

Initialise the LCD

• Click and drag an infinite loop between the 'BEGIN' and 'END' icons.
• Inside the loop:

• Click and drag a 'Component macro' icon.

• Double click on it to open the dialogue box, so that you can configure it.

The program 'knows' which components you have added to the System or Dashboard panel, and modifies the list of available commands accordingly.

Under 'Components', the LCD will be listed, and underneath it the list of commands.

• Scroll down to the bottom of the list and click on the 'Start' command.
• Rename the 'Display name' as "Start the LCD".
• Click on 'OK'.
• The dialogue box resembles that shown opposite.

• Gen exerciseUsingCompMacros compmacprops2 01.png

  right

Set up the display

The first task is to define where the text will be displayed.
This involves another LCD 'Component Macro' called 'Cursor'. This defines the LCD 'cell' where the text display starts. The LCD has a grid of 32 cells, arranged in 2 rows of 16.
The upper row is given the value y=0, and the lower y=1. The sixteen horizontal cells are given values from x=0 to x=15.

• Click and drag a second 'Component macro' icon just below the first.

• Double click on it to open the dialogue box.
• Scroll down to the 'Cursor' command.
• Rename the 'Display name' as "Move the cursor".
• In the 'Parameters' section, set the value of 'x' to 2, and 'y' to 0.
• Click on 'OK'.

The next 'Component Macro' specifies the text to be printed, starting at this location.

• Click and drag a third 'Component macro' icon just below the first.

• Double click on it to open the dialogue box.
• Scroll down to the 'PrintString' command and click on it.
• Rename the 'Display name' as "Elapsed time".
• In the 'Expression' box, type "Elapsed time" (making sure you include the quotation marks "".)
• Click on 'OK'.
• The dialogue box is shown opposite.

250px

Display elapsed time

• In the 'Edit' menu, on the main toolbar, click on 'Variables...' to open the Variable Manager dialogue box.

• Hover just to the left of the 'Variables' label, and click on the down arrow that appears.
• Select 'Add new' and the 'Create a New Variable' dialogue box opens.
• Name the new variable "time", and give it an initial value of zero.
• Leave the variable type as 'Byte'.
• Click on 'OK'.
• The dialogue box should resemble that opposite.

250px

• Click and drag a third 'Component Macro' to follow the second one.

• Double click on it to open the dialogue box.
• Scroll down to the 'PrintNumber' command and click on it.
• Rename the 'Display name' as "Display elapsed time".
• In the 'Expression' box, type the variable name "time".
• Click on 'OK'.
• The third 'Component Macro' dialogue box is shown opposite.

• Click and drag a 'Delay' icon to follow the third 'Component Macro'.

• Double click on it to open the dialogue box.
• Rename it "Wait one second."
• Configure it to give a delay of one second.

For help with 'Delay' icons, see Icon Properties

• Click on 'OK'.

• Click and drag a 'Calculation' icon to follow the 'Delay'.

• Double click on it to open the dialogue box.
• Rename it "Add one second."
• In the 'Calculations:' section, type "time=time+1".

The effect of this is to increase the number stored in the 'time' variable by one, (also called incrementing the 'time' variable.)

For help with 'Calculation' icons, see Icon Properties

• Click on 'OK'.

Test the Core

The diagram below shows the flowchart at this stage.

500px

At this point, the flowchart should be saved as 'Stopwatch', and can be simulated to test it.

Add the switch

• Locate the 'Push Round Panel' switch in the 'Inputs' toolbox in the Icons toolbar.

• Hover over the image to the left of the switch label, and click on the down-arrow that appears.
• Click on the 'Add to system panel' option to select it.
• Click on the image of the switch on the System panel to select it and drag it to a suitable position.
• On the Panel Properties, click on the 'Unconnected' label, next to 'Connection'.

A pinout of the microcontroller appears.

• Click on the rectangle that represents the pin RB0/INT, to connect the switch to Port B, bit 0 of the microcontroller.