Difference between revisions of "Exercise - Creating a Flowchart"

From Flowcode Help
Jump to navigationJump to search
 
(73 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
+
<sidebar>Sidebar: Flowcode Exercises:Ex1</sidebar>
The task is to produce a Flowcode flowchart that lights a lamp for ten seconds when a switch is pressed.<br />
+
The task is to produce a Flowcode flowchart which will set the base of a program that will (when configured and programmed correctly) light a lamp for ten seconds when a switch is pressed. Note that we will not be configuring the flowchart icons to function in this exercise, we are just setting up the base to be expanded upon.
 +
<br /><br />
 
Although it may not be realistic to use a microcontroller in such a straight-forward application, it illustrates the technique of producing a Flowcode program.<br />
 
Although it may not be realistic to use a microcontroller in such a straight-forward application, it illustrates the technique of producing a Flowcode program.<br />
 
The program itself may form part of a bigger program.
 
The program itself may form part of a bigger program.
Line 12: Line 13:
 
:: If it isn't, go back to the beginning.
 
:: If it isn't, go back to the beginning.
 
:: If it is:
 
:: If it is:
::: switch on the lamp;
+
::: Switch on the lamp;
::: wait for 10 seconds;
+
::: Wait for 10 seconds;
::: switch off the lamp;
+
::: Switch off the lamp;
::: go back to the beginning.
+
::: Go back to the beginning.
[[File:Gen_Running_Flowcode_Startup_Selection.png||250px|right]]
+
 
 
It takes such a short time for the microcontroller to carry this out, that we don't need to worry whether the switch latches on or not.
 
It takes such a short time for the microcontroller to carry this out, that we don't need to worry whether the switch latches on or not.
  
  
 
==Set up the flowchart==
 
==Set up the flowchart==
* Open Flowcode.
+
[[File:Gen_Startup_Selection.png||250px|right]]
* On the Startup screen, click on 'New embedded project'. (See [[Opening Flowcode]])
+
* [[Opening Flowcode|Open Flowcode]].
 
+
* On the Startup screen, click on 'New project'.
 
 
 
 
 
 
 
 
  
  
 
+
[[File:Gen_Project_Options_Target_SIM.png|right|250px]]
[[File:Project_Options_Target_16F1937.png|right|250px]]
 
 
: The [[Project Options]] dialogue box opens.  
 
: The [[Project Options]] dialogue box opens.  
 
: (Click on the link for a full explanation of all the options available.)
 
: (Click on the link for a full explanation of all the options available.)
 +
  
 
* Accept the default settings by clicking on 'OK'.
 
* Accept the default settings by clicking on 'OK'.
Line 43: Line 40:
 
: The flowchart window should resemble the one shown below (depending on the configuration.)
 
: The flowchart window should resemble the one shown below (depending on the configuration.)
  
[[File:gen_exerciseFirstFlowchart_startscreen_01.png|500px|center]]
+
[[File:Exercise_Creating_a_Flowchart_Flowcode_Layout.png|500px|center]]
 +
 
  
: The System Panel and Properties Panel can be moved by 'clicking and dragging the title bar at the top of each panel.
+
: The System Panel and Properties Panel can be moved by clicking and dragging the title bar at the top of each panel.
  
  
==Set up the input==
+
==Prepare the input==
 
: More information about the icons used in this flowchart can be found in [[Icon Properties]].
 
: More information about the icons used in this flowchart can be found in [[Icon Properties]].
* Drag and drop a 'Loop' icon between the Begin and End icons.
+
* Drag and drop a [[Loop Icon Properties|Loop icon]] between the BEGIN and END icons.
: The 'Loop' icon makes the microcontroller repeatedly run through the program, (though the icon can be configured to limit the number of times this happens.)
+
: The 'Loop' icon will make the microcontroller repeatedly run through the program, (though the icon can be configured to limit the number of times this happens.)
[[File:Gen exerciseFirstFlowchart newvar 01.png|250px|right]]
+
 
 +
* Inside the loop, drag and drop an [[Input Icon Properties|Input icon]] from the [[Tools and Views#1) Icons Toolbar|Icons toolbar]].
 +
:* This will be configured later and contain a variable value which will be used to read the state of the switch - to detect if the switch is being pressed..
 +
 
 +
 
 +
==Prepare the switch==
 +
* Drag and drop a [[Decision Icon Properties|Decision icon]] after the 'Input' icon.
 +
: This icon will be used to make the program perform what is known as a conditional branch when the following icons are configured.
 +
 
 +
[[File:Exercise_Creating_a_Flowchart_Icons_Layout.png|right]]
 +
 
 +
: When the icons are configured and programmed, these icons will be able to continually check if the switch is being pressed or not.
 +
: In the next step we will be adding icons which will allow us to control what happens if the switch is pressed. Note that the program will not function until the icons are configured and programmed.
  
* Inside the loop, drag and drop an 'Input' icon from the Icons toolbar,. (See [[Tools and Views]].)
+
: Once programmed - when the switch is pressed it will perform an the action or process and continue to check if it is being pressed again.
:* Double click on the icon.  
+
: If the switch is not pressed it will follow the 'No' branch and keep looping to continue to check if the switch has been pressed.
:: This opens the 'Properties: Input' dialogue box, allowing you to configure the way the program treats information from the switch.
 
:: This information will be contained in a variable called 'switch'.
 
::* Click on the down arrow at the right-hand end of the 'Variable:' box to open the variables dialogue box.
 
  
  
::* Hover to the left of the 'Variables' label and click on the down arrow that appears.
+
==Set up the lamp==
::* Click on the 'Add new' option to open the 'Create a New Variable' dialogue box.
+
: Next we concentrate on the 'Yes' branch of the 'Decision' icon.
::* Create a new variable named "switch" with initial value "0" and description "Copies the state of the switch"
+
* Drag and drop an [[Output Icon Properties|Output icon]] in the 'Yes' branch.
 +
: When programmed, this icon is going to function as a trigger to turn the lamp on.
  
::* Leave the 'Variable type:' as 'Byte'.
 
::: (For more information about variables, see [[Creating Variables]] and [[Variable Types]].
 
::: (The resulting dialogue box is shown opposite.)
 
[[File:gen_exerciseFirstFlowchart_inputprops_01.png|250px|right]]
 
  
:* Finish configuring the input properties as follows:
+
: Next we want the lamp to stay on for ten seconds and then turn off.
::* Change the 'Display name:' to "Read the switch".
+
* Drag and drop a [[Delay Icon Properties|Delay icon]] after the 'Output' icon.
::* In the 'Variable:' box, type the name of the variable you created "switch".
+
:* This is the icon which will allow us to delay the circuit for a specified period of time.
::* Leave the 'Port:' as PORT A.
+
:* The delay will last for 10 seconds, in this time the circuit will not be able to carry out any other function until the delay is complete.
::* Select to 'Input from:' 'Single Bit' and choose bit 0.
 
::: (The resulting dialogue box is shown opposite.)
 
  
  
: Set up like this, the program monitors the state of the switch, which will be connected to bit 0 of Port A of the microcontroller.
+
:* Drag and drop a second 'Output' icon after the 'Delay' icon.
: When the program looks at the input switch if it is pressed, the variable 'switch' contains logic 1. If unpressed, it contains logic 0.
+
: Finally this will be used to turn the lamp off after the ten second delay.
  
 +
Your flowchart should now be set up to resemble the image to the right. Note that none of the icons are configured yet, so the program will not simulate or function, please see the next exercise to configure the icons so that the program will simulate accordingly.
  
==Check the switch==
 
[[File:gen_exerciseFirstFlowchart_deciconprop_01.png|250px|right]]
 
* Drag and drop a 'Decision' icon after the 'Input' icon.
 
:* Double click on it to open the configuration dialogue box, and then:
 
::* Rename it "Switch pressed?".
 
::* In the 'If:' box, type "switch=1".
 
::* Leave the 'Swap Yes and No' box unchecked.
 
::* Click on 'OK'.
 
  
: This icon makes the program perform what is known as a conditional branch.
+
You should now [[Saving a Flowchart|save the flowchart]] as "Lamp1.fcf", and [[Closing Flowcode|close Flowcode]].
: The subsequent course of the program depends on the outcome of the condition specified in the 'Decision' icon.
 
: In this case, it depends on whether or not the variable 'switch' = 1.
 
: If it is, the program follows the 'Yes' route. If not, it follows the 'No' route.
 
  
==Control the lamp==
 
  
: The 'No' branchis easy to set up. All we want is that the program returns to the beginning (taken care of by the 'Loop' icon.)
+
==Download the exercise==
: No further configuration is needed.
+
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.
[[File:gen_ exerciseFirstFlowchart_ outputprops_ 01.png|250px|right]]
 
: Next we concentrate on the 'Yes' branch.
 
* Drag and drop an 'Output' icon in the 'Yes' branch.
 
:* Double click on it to open the configuration dialogue box, and then:
 
::* Change the 'Display name:' to "Switch on".
 
::* In the 'Variable or value:' box, type value "1".
 
::* Change the 'Port:' to PORT B.
 
::* Select to 'Output to: 'Single Bit' and choose bit 0.
 
::* Click on 'OK'.
 
::: (The resulting dialogue box is shown opposite.)
 
  
: The effect of this icon is to send a logic 1 signal (high voltage) to the lamp, connected to Port B, bit 0 of the microcontroller.
+
*To download the file, click on the link below and then either:
: This turns on the lamp.
+
:*Click on the file name.
: Now, we tackle the requirement that it stays on for ten seconds and then goes off.
+
:*Right click the file name and select 'Save link as...' or 'Save target as...' (depending on your browser).
[[File:gen_exerciseFirstFlowchart_delayiconprop_01.png|250px|right]]
 
* Drag and drop a 'Delay' icon after the 'Output' icon.
 
:* Double click on it to open the configuration dialogue box, and then:
 
::* Change the 'Display name:' to "For 10 seconds".
 
::* Leave the 'Delay value:' as '1'.
 
::* Change the unit to 'seconds.
 
::* Click on 'OK'.
 
::: (Again, the resulting dialogue box is shown opposite.)
 
[[File:gen_exerciseFirstFlowchart_outputprop2_01.png|250px|right]]
 
: Finally, we need to turn off the lamp, after the ten second delay.
 
: To do this:
 
* Drag and drop a second 'Output' icon after the 'Delay' icon.
 
* Double click on it to allow you to configure it.
 
: Rename it "Switch off", and configure it to deliver value "0" to single bit 0 of Port B.
 
: The resulting dialogue box is shown opposite.
 
  
You should now save the flowchart as "Lamp1.fcf", and close Flowcode. (See [[Closing Flowcode]])
+
:::{{Fcfile|Exercise - Creating a Flowchart.fcfx|Exercise - Creating a Flowchart}}
  
  
==What next==
+
==What next?==
The next step is to add the switch and lamp to the flowchart. This is covered in the exercise [[Adding Devices to a Flowchart]].
+
The flowchart is now ready to be configured and programmed in order to operate electronic devices (components). The configuration of the flowchart is covered in the exercise [[Exercise - Configuring Icons and Variables|Configuring Icons and Variables]].

Latest revision as of 14:27, 13 March 2014

<sidebar>Sidebar: Flowcode Exercises:Ex1</sidebar> The task is to produce a Flowcode flowchart which will set the base of a program that will (when configured and programmed correctly) light a lamp for ten seconds when a switch is pressed. Note that we will not be configuring the flowchart icons to function in this exercise, we are just setting up the base to be expanded upon.

Although it may not be realistic to use a microcontroller in such a straight-forward application, it illustrates the technique of producing a Flowcode program.
The program itself may form part of a bigger program.


Formulate the sequence

The flowchart sequence will be:

Check if the switch is pressed.
If it isn't, go back to the beginning.
If it is:
Switch on the lamp;
Wait for 10 seconds;
Switch off the lamp;
Go back to the beginning.

It takes such a short time for the microcontroller to carry this out, that we don't need to worry whether the switch latches on or not.


Set up the flowchart

Gen Startup Selection.png


Gen Project Options Target SIM.png
The Project Options dialogue box opens.
(Click on the link for a full explanation of all the options available.)


  • Accept the default settings by clicking on 'OK'.
An empty flowchart window opens, which may contain other items such as a System Panel, Dashboard Panel, Properties Panel etc.
These can be revealed or hidden using the View menu.


  • Set up the flowchart window so that you can see the System Panel and the Properties Panel.
The flowchart window should resemble the one shown below (depending on the configuration.)
Exercise Creating a Flowchart Flowcode Layout.png


The System Panel and Properties Panel can be moved by clicking and dragging the title bar at the top of each panel.


Prepare the input

More information about the icons used in this flowchart can be found in Icon Properties.
  • Drag and drop a Loop icon between the BEGIN and END icons.
The 'Loop' icon will make the microcontroller repeatedly run through the program, (though the icon can be configured to limit the number of times this happens.)
  • This will be configured later and contain a variable value which will be used to read the state of the switch - to detect if the switch is being pressed..


Prepare the switch

This icon will be used to make the program perform what is known as a conditional branch when the following icons are configured.
Exercise Creating a Flowchart Icons Layout.png
When the icons are configured and programmed, these icons will be able to continually check if the switch is being pressed or not.
In the next step we will be adding icons which will allow us to control what happens if the switch is pressed. Note that the program will not function until the icons are configured and programmed.
Once programmed - when the switch is pressed it will perform an the action or process and continue to check if it is being pressed again.
If the switch is not pressed it will follow the 'No' branch and keep looping to continue to check if the switch has been pressed.


Set up the lamp

Next we concentrate on the 'Yes' branch of the 'Decision' icon.
When programmed, this icon is going to function as a trigger to turn the lamp on.


Next we want the lamp to stay on for ten seconds and then turn off.
  • Drag and drop a Delay icon after the 'Output' icon.
  • This is the icon which will allow us to delay the circuit for a specified period of time.
  • The delay will last for 10 seconds, in this time the circuit will not be able to carry out any other function until the delay is complete.


  • Drag and drop a second 'Output' icon after the 'Delay' icon.
Finally this will be used to turn the lamp off after the ten second delay.

Your flowchart should now be set up to resemble the image to the right. Note that none of the icons are configured yet, so the program will not simulate or function, please see the next exercise to configure the icons so that the program will simulate accordingly.


You should now save the flowchart as "Lamp1.fcf", and close Flowcode.


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).
FC6 Icon.png

Exercise - Creating a Flowchart


What next?

The flowchart is now ready to be configured and programmed in order to operate electronic devices (components). The configuration of the flowchart is covered in the exercise Configuring Icons and Variables.