Jump to content

Exercise - Using Component Macros: Difference between revisions

From Flowcode Help
← Older edit

MartinW (talk | contribs)

1 user group
1,487 edits
JonnyW (talk | contribs)
3,997 edits
XML import
Replaced content with "For an excellent introduction guide, we recommend [https://www.flowcode.co.uk/education/ Introduction to microcontroller programming]"
Tag: Replaced
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<sidebar>Sidebar: What Is a Macro?</sidebar>
For an excellent introduction guide, we recommend [https://www.flowcode.co.uk/education/ Introduction to microcontroller programming]
Component macros are sections of code that have been written to support the components included with Flowcode 6.<br />
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).<br />
In this case, it uses a LCD to display elapsed time in a timer.
 
The first section looks at using [[Component Macro Icon Properties|Component Macros]] to create the core timing sequence. The second section looks at using it to turn on a lamp for ten seconds once a switch is pressed.
 
 
__TOC__
 
==The core timing sequence==
At the core of the program is a section that sets up the LCD to display the time.<br />
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 [[Exercise - Creating a Flowchart|Creating a Flowchart]].
 
 
===Create the core sequence===
===Add the LCD===
* Locate the 'LCD' inside the 'Outputs' toolbox in the [[Tools and Views#1) Icons Toolbar|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 [[Exercise - Controlling the Camera]] for information on how to zoom in on the [[System Panel]].)
 
 
===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.[[File:Btn_Component_Macro.gif|border]]
::* 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 is shown below.
 
 
===Set up the display===
The first task is to define where the text will be displayed.<br />
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.<br />
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 below.
 
 
[[File:Exercise_Using_Component_Macros_Variable_Properties.png|250px|right]]
===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 is shown below.
 
: The next Component Macro repositions the cursor, so that the elapsed time is shown below the "Elapsed time" label.<br />
: The y value is changed to y=1, and the x value to x=8.
:* Click and drag a fourth 'Component Macro' to follow the third one.
::* 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 8, and 'y' to 1.
::* Click on 'OK'.
 
:* Click and drag a fifth 'Component macro' icon just below the fourth.
::* 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 fifth 'Component Macro' dialogue box is shown below.
<gallery widths=200px heights=200px perrow=5 caption="Component Macro Properties">
File:Exercise_Using_Component_Macros_Icon_Properties_01.png
File:Exercise_Using_Component_Macros_Icon_Properties_04.png
File:Exercise_Using_Component_Macros_Icon_Properties_02.png
File:Exercise_Using_Component_Macros_Icon_Properties_05.png
File:Exercise_Using_Component_Macros_Icon_Properties_03.png
</gallery>
 
===Finishing touches===
:* Click and drag a 'Delay' icon to follow the fifth '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.
[[File:Exercise_Using_Component_Macros_Flowchart_01.png|350px|center]]
: At this point, the flowchart should be saved as 'Timer', and can be simulated to test it.
 
 
==Extend the program==
The full program is designed to:
:::: wait until a switch is pressed momentarily;
:::: light a lamp ;
:::: time a ten second period;
:::: then switch it off.
 
To do this, the sequence is now modified, as follows:
:* Is the switch pressed?
::* If not, branch back and test the switch again.
::* If it has:
:::* light the lamp;
:::* run through the timing core ten times,
:::* switch off the lamp.
 
 
===Add the switch===
* Locate the 'Push Round Panel' switch in the 'Inputs' toolbox in the [[Tools and Views#1) Icons Toolbar|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 RA1/AN1, to connect the switch to Port A, bit 1 of the microcontroller.
 
 
===Add the LED===
* Locate and LED such as the 'Single LED' or 'LED 5mm Panel' in the 'Outputs' toolbox in the [[Tools and Views#1) Icons Toolbar|Icons toolbar]].
:* Hover over the image to the left of the component label (e.g. 'Single LED' and 'LED 5mm Panel), and click on the down-arrow that appears.
:* Click on the 'Add to system panel' option to select it.
:* Select the LED on the System panel and drag it to a suitable position.
:* Look at the Panel Properties, the 'Connection' property shows that, by default, it is connected to Port A, bit 0.
:: Leave it like this.
 
 
===Modify the flowchart===
* Immediately after the 'Begin' icon, drag and drop a 'Connection Point (Declare Connection Point)' icon.[[File:Btn Connection Point.gif|border]]
* Next, add an 'Input' icon, and double click on it to open the dialogue box.
* Change the 'Display name:' to "Read the switch".
* Create a new variable, called 'switch'. One way to do this is to click on the down arrow at the end of the 'Variable:' box.
:* Then click on the down arrow next to the 'Variables' label, and select 'Add new'.
:* The 'Create a New Variable' dialogue box opens. Type in "switch" as the name of the new variable. Leave the variable type as 'Byte'.
:* Click on 'OK'.
* In the 'Variable' box, type the name of the new variable "switch".
* In the 'Port:' box, select 'PORT A'. Configure the rest of the dialogue box to 'Input from:' 'Single Bit:' 1.
:* Click on 'OK'.
* Next, drag and drop a 'Decision' box, and double click on it to open the dialogue box.
:* Rename it "Switch pressed?".
:* In the condition 'If' box, type "switch=1"
:* Click on 'OK'.
* In the 'No' branch, drag and drop a 'Connection Point (Jump to Connection Point)' icon.[[File:Btn Goto Connection Point.gif|border]]
* In the 'Yes' branch, drag and drop an 'Output' icon.
:* Double click on it to open the dialogue box.
:* Change the 'Display name:' to "Switch on the lamp".
:* In the 'Variable or value:' box, type "1".
:* Configure the rest of the box to output this to 'PORT A' 'Single Bit:' 0.
:* Click on 'OK'.
* Click and drag the 'Loop' icon to follow this in the 'Yes' branch.
:* Double click on the 'Loop' icon to configure it.
:* Leave the 'Display name:' as 'Loop', and the 'Loop while:' box checked.
:* In the other box, type the condition "time<10".
:* Click on 'OK'.
* After the end of the loop, drag and drop a second 'Output' icon.
:* Double click on it, rename it "Switch off the lamp" and configure it to output value 0 to Port A, bit 0.
:* Click on 'OK'.
 
 
The dialogue boxes for all these additions are shown below.
<gallery widths=200px heights=200px perrow=5 caption="Added Component Macro Properties">
File:Exercise_Using_Component_Macros_Input_Properties_01.png
File:Exercise_Using_Component_Macros_Decision_Properties_01.png
File:Exercise_Using_Component_Macros_Output_Properties_01.png
File:Exercise_Using_Component_Macros_Loop_Properties_01.png
File:Exercise_Using_Component_Macros_Output_Properties_02.png
</gallery>
 
 
The final flowchart resembles the one below.
[[File:Exercise_Using_Component_Macros_Flowchart_02.png|350px|center]]
 
 
==Final testing==
* [[Saving a Flowchart|Save the flowchart]].
* [[Starting Flowchart Simulation|Run the simulation]] to test that it works.
 
 
==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).
 
:::{{Fcfile|Exercise - Using Component Macros.fcfx|Exercise - Using Component Macros}}

Latest revision as of 13:23, 25 April 2023

For an excellent introduction guide, we recommend Introduction to microcontroller programming

Retrieved from "https://www.flowcode.co.uk/wiki/index.php?title=Exercise_-_Using_Component_Macros&oldid=38983"