|
|
| (38 intermediate revisions by 5 users not shown) |
| Line 1: |
Line 1: |
| − | Component macros are sections of code that have been written to support the components included with Flowcode 6.<br />
| + | For an excellent introduction guide, we recommend [https://www.flowcode.co.uk/education/ Introduction to microcontroller programming] |
| − | 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.
| |
| − | | |
| − | | |
| − | __TOC__
| |
| − | | |
| − | ==The core 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 Your First Flowchart|Creating Your First 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 [[System Panel]] for information on how to zoom.)
| |
| − | | |
| − | | |
| − | ===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|30px]]
| |
| − | ::* 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:gen_exerciseUsingCompMacros_timevarprops_01.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=4 caption="Component Macro Properties">
| |
| − | File:gen_exerciseUsingCompMacros_compmacprop1.png
| |
| − | File:gen_exerciseUsingCompMacros_compmacprop2_01.png
| |
| − | File:gen_exerciseUsingCompMacros_compmacprop3_01.png
| |
| − | File:gen_exerciseUsingCompMacros_compmacprop4_01.png
| |
| − | </gallery>
| |
| − | | |
| − | ===Finishing touches===
| |
| − | :* 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.
| |
| − | [[File:gen_exerciseUsingCompMacros_coreprog1_01.png|500px|center]]
| |
| − | : 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 [[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 RB0/INT, to connect the switch to Port B, bit 0 of the microcontroller.
| |
