Example - Editing Key Mappings - Component Key Mappings window.

Flowcode Help:Community portal

2013-11-06T14:15:04Z

ReeceL:

There is an introduction course based around the Flowcode software and getting started with Microcontrollers.

[http://www.matrixmultimedia.com/courses/itm/index.php Introduction to Microcontroller Programming]

There is a very active Flowcode community on the Matrix forums which can be used to ask questions, share knowledge and collaborate on projects.

[http://www.matrixmultimedia.com/mmforums/ Matrix User Forums]

To sign up for the forums please visit the following link.

[http://www.matrixmultimedia.com/mmforums/ucp.php?mode=register Matrix User Forums Registration Page]

There is also a Blog which is written and maintained by the Matrix staff responsible for the creation and the upkeep of the Flowcode software.

[http://matrixmultimedia.com/blog/ Matrix Blog]

Finally there is a repository of information, test files, examples, videos and articles available as part of our Learning Centre.

[http://www.matrixmultimedia.com/lc_index.php Learning Centre]

Sidebar: Advanced Features

2013-11-06T14:04:26Z

ReeceL:

2013-11-06T14:01:26Z

ReeceL:

Assigning Code to an Existing Component

2013-11-06T14:00:07Z

ReeceL: ReeceL moved page Assigning code to an existing component to Assigning Code to an Existing Component without leaving a redirect

Here is a brief video detailing how to wrap up your custom macros into a component that can be re-used in many projects. This should also prove useful to anyone wanting to understand the basics of creating a component in Flowcode.

<div align="center">
{{#ev:youtube|xhvrwILJA38|640}}
</div>

Exercise - Exporting the LED Component

2013-11-06T13:59:01Z

ReeceL:

<sidebar>Sidebar: Component Exercises</sidebar>
Now that we have created an LED in the previous [[Exercise - Create an LED Component]] article we can now export the component for use elsewhere.

__NOTOC__
==Preliminaries==
[[File:gen_exerciseLEDexport_compmansetup_01.png|280px|right]]
* Create a LED component as shown in the [[Exercise - Create an LED Component]].

==Declaring the interface==

Before you export a component, you need to 'declare the interface'. The interface is the collection of macros and files publically available to the user. Declaring the interface means deciding which of the component routines to make available to the user, and to decide whether these are suitable for simulation or for download.

* Move the mouse cursor over the [[System Panel]], and right-click.

* Select the option 'Export component'. The 'Component Management' dialogue box opens. This replicates the settings, [[Settings Manager]], [[Interface Manager]] and [[Resource Manager]] available on the [[Properties Panel]].
[[File:gen_exerciseLEDexport_componentman01.png|280px|right]]
* Configure this for the LED component as follow:
:* Click on the 'Setup' tab.
::* Assign the component to a category, by clicking on the down-arrow next to the label 'Category'. In this case, the component will go into the 'Outputs' toolbox.
::* Click on the check-box next to the 'Use an image of the panel' label.
:* Click on the 'Interface' tab.
::* Set the 'LEDoff' and 'LEDon' macros as 'Component' macros, by selecting each in turn, and clicking on 'Component macro' in the 'Type of macro' drop-down menu.
::* Set the 'PinChange' macro as a 'Hidden' macro, in the same way.
:* In this case, there is no need to use the 'Resources' tab, as there are no additional files to save with the component.

* Click on 'OK'.

==Saving the component==
* You may be asked if you want to save the current flowchart. Do so if you wish.

* The 'Save As' dialogue box opens. This will automatically point to a destination Flowcode will search for components. Select a suitable name for the component.

* Click 'Save'. The component file is saved with a '*.fcpx' extension.

==What next?==
Now you need to [[Exercise - Importing the LED Component|import the component]] into a new flowchart for testing.

Exercise - Create an LED Component

2013-11-06T13:57:57Z

ReeceL:

<sidebar>Sidebar: Component Exercises</sidebar>
[[File:gen_exerciseLEDcreate_oneLEDprops.png|200px|right]]

==Creating a graphic==
* [[Creating Flowcharts|Create a new Flowcode flowchart]].

* Make sure that the [[System Panel]] and [[Properties Panel]] are visible.

* If they are not, then select them in the [[View]] menu.

* Click on the hemisphere shape in the Shapes menu and drag one onto the Systems Panel.

: [[File:Gen_Panel_Shapes_Toolbar_01.png|center|border]]

* The blue dotted square around it shows that this object is currently selected.

* Change the name of the component to 'oneLED'.
: To do this:
::* Find the 'handle' of the component at the top of the Panel Properties.
::* Click on the name 'shape' (the default name).
::* Change it to 'oneLED'.

==Adding properties==
Next, add two properties to the LED. The first allocates a color. The second sets up a connection from the LED to the microcontroller.

First add a default color to the component, using a new property called 'color'.
: To do this:
::* De-select the hemisphere by clicking anywhere outside it in the Systems Panel.
::* Hover over the icon to the right of the 'Properties' label.
::* Click on the down-arrow that appears.
::* Click on 'Add new'.
::* In the 'Cosmetic name' box type "LEDcolor".
::* Select 'Color picker' for the 'Property type'.
::* Type "color" for the 'Property variable' name.

In the same way, then add another new property to specify the default connection. Give it a Cosmetic name "Connection", with Property type 'Single digital pin' and a Property variable name "pin".

Finally, configure these properties.
: To do this:
::* Click on the color shown for the 'color' property.[[File:Gen_ExerciseLEDcreate_LEDcomppropsdetail_01.jpg|200px|right]]
::* Select a color from the color chart that appears.
::* Click on the word 'Unconnected', alongside the 'pin' property.
::* Select an appropriate pin, such as RA0, from the chip pin layout.

==Reacting when the pin changes state==
[[File:Gen_Exercise_LEDcreate_Proj_explorer.png|200px|right]]

This involves two macros. One, called [[Event Connection.PinChange|PinChange]], recognizes when the pin changes logic level. The second, called Property, then causes a property of the LED, in this case the color, to change. 

First, create a 'PinChange' macro.

* Open the [[Using the Project Explorer|Project Explorer]] from the [[View]] menu.

* Double-click on the item 'Connection -> PinChange'. The 'Add event' dialogue box opens.

* Hover over the icon to the left of the 'Macro' label. A drop-down arrow appears.

* Click on the arrow and select the option 'Add new'. The 'Edit Macro Details' dialogue box opens.

* Change the name of the macro to 'PinChange'.

* Click on 'OK'.
 
Next, set up the 'PinChange' macro.

* Select 'Show as Flowchart' from the 'Macro' menu, and choose the 'PinChange' macro.

Add the following details:

* Add a Decision icon to the PinChange, rename it "Pin state", and set the condition as 'If pin = 1'.

* Drag a SIM command into the 'No' branch. Configure it as follows:

::* Rename it "Switch off".

::* Click on the 'Functions' label.

::* Expand the 'Component' and then the 'Property' sections.

::* Click on the SetValue command, and complete it by adding "oneLED" as the Handle, "color" (including the quotes) as the Property and 0 (zero) as the Value. Then click on 'OK'.

* Click on the Panel command and copy and paste it into the 'Yes' branch.

* Change the configuration as follows:

::* Rename it "Switch on".

::* Change the Value to "color".

* Then click on 'OK'.
 
The flowchart now resembles this. [[File:Gen exerciseLEDcreate pinchangeprog01.png|500px|centre]]

==Updating the LED==

When the state of the LED pin changes, you want the color of the LED to change too. This is done through the 'Component / Property' macro. This will re-use the code already created in the PinChange macro.

* Open the [[Project Explorer]] as before.

* Click on the 'Functions' label.

* Expand the 'Component' section.

* Double-click on the 'Property' command to open the 'Add event' dialogue box.

* Click on the PinChange macro (to re-use it,) and then click on 'OK'.
 
==Adding an interface==
[[File:Gen exerciseLEDcreate macropropsLEDoff 01.png|300px|right]]

A component is not much use if no one can interact with it. What is needed is to create two macros, LEDon and LEDoff, which set and reset the state of the pin. This will become the ''public interface'' of the component.
 

* Click on Macro in the top toolbar, and select the New option (Macro > New...). This opens the [[Creating a New Macro|Create a New Macro]] dialogue box.

* Name the new macro "LEDoff", and click on 'OK'. A new tab is created on the Flowchart workspace.
: Set it up as follows:
::* Drag a [[Calculation Icon Properties|Calculation]] icon into the macro.

::* Double-click on it and re-name it "Reset pin".

::* In the calculation area, type "pin=0", and click 'OK'

* Create the second macro in the same way. This one is called LEDon. It contains a calculation icon, called "Set pin" and the calculation "pin=1".
 

==What next?==
The next stage in the process is to [[Exercise - Exporting the LED Component|export the component]].

Exercise - Create an LED Component

2013-11-06T13:57:46Z

ReeceL:

2013-09-23T12:35:32Z

ReeceL:

<sidebar>Sidebar: What Is a Component?</sidebar>
[[File:Gen_Analog_Window_01.png|right|332x290px]]
The '''Analog Window''' displays and monitors analog values on each channel, allowing you to see the results/values of each channel both as a text values and dynamic bars to display the output values of analog devices.

To open the 'Analog Window' select 'Analog Inputs' from the 'View' menu (View > Analog Inputs').

The Analog Window dynamically displays values of analog inputs and can display the data from a range of different channels simultaneously during simulation. Analog data is displayed in this window by using bars to convey the data value as well as text to accurately read the results the text can be changed to display the data as several different values/units.

You can change the 'View values as:' option at the top of the window by selecting an option from the drop-down box, by doing so you can change the text to display the data value of the analog channels as:
*Raw
*Byte
*Percent
*Unit

{| style="margin:auto; text-align:center;"
|-
|[[File:Gen_Analog_Window_Raw_01.png]]
| width="100px" |
|[[File:Gen_Analog_Window_Percent_01.png]]
|}