Getting Started

Guide
 Getting Started
Guide

Introduction
Flowcode is an Integrated Development Environment (IDE) for programming
microcontrollers such as 8, 16 and 32bit PIC, Arduino and ARM devices.
It achieves this by using flowcharts instead of text based languages, thus
making programming simpler and faster.
Flowcode also contains hundreds of pre-made component libraries,
allowing users to interface with a host of sensors, inputs and outputs and
electro-mechanical components with ease. Despite its simplicity and ease of
use, Flowcode is a powerful tool allowing users to develop even the most
complex of embedded systems.
Flowcode supports both Matrix and 3rd party hardware. In this guide we will
create examples based on three different sets of hardware;
1. Matrix EB006 multi-programmer and EB083 development board
2. Arduino Uno and Matrix EB083 development board
3. Microchip Xpress development board

Prerequisites
A Windows based PC with a copy of Flowcode 7 installed

Should haves for this guide

Supported hardware a list covered in this guide is
provided above
USB cable to both power and program the
microcontroller of choice

What well cover in this guide?

This guide will be split into two main sections:
In section 1 we will provide an overview of the Flowcode IDE. How users
interact with the environment, add components to the simulation panel and
create flowcharts.
In section 2 we will run through three examples which will increase in
complexity and teach you how to create microcontroller programs.

Copyright 2016 Matrix Technology Solutions Ltd. 2

 Getting Started
Guide

Section 1: The Flowcode

IDE
In this section we will provide an overview of Flowcode, detailing
the programming interface and how users interact with it to
create microcontroller programs.

Copyright 2016 Matrix Technology Solutions Ltd. 3

 Getting Started
Guide

Creating a project
When you first launch Flowcode you will be presented with the following
splash screen. For the first run through we want to start a new project as this
gives us a blank canvas to go over the IDE. Later we will look at the use of
pre-configured template files.

Once a new project is started, you need to select the correct microcontroller. Did you know?
As we are using an EB006 board, with the default PIC16F1937 attached, we
Flowcode can
will need to ensure Flowcode has the corresponding chip selected. When
program hundreds
using Matrix hardware, this has automatically been configured for the of different
correct config properties and clock speed etc. microcontrollers. All
are slightly different,
and as such, it is
essential that you
select exactly the
right microcontroller
you are using.

Copyright 2016 Matrix Technology Solutions Ltd. 4

 Getting Started
Guide

If you are using the EB006; If you are using the Microchip
Xpress board;
1. Select the PIC8bit devices
2. Select the PIC16F family from 1. Select PIC8bit
within the PIC8bit devices 2. Select Misc family
3. Select the 16F1937 ensure you do 3. Select Microchip MPLAB Xpress
NOT select the Low Voltage (LV) 4. Press OK
version
4. Press OK We do not need to
configure any other options at this
point

If you are using the Arduino

Uno;
1. Select AVR
2. Select the Arduino family
3. Select Arduino Uno R3 PDIP
4. Press OK

Did you know?

You can change the

microcontroller at
any point during
your development.
Select the Project
Options window
by clicking Build-
>Project Options-
>Choose a Target
from the main
menu at the top of
the screen.
Copyright 2016 Matrix Technology Solutions Ltd. 5
 Getting Started
Guide

Once Flowcode has opened you will be presented with a blank IDE as seen
below;
7
1
6 5
3
4

1. Components 5. Main Window

Provides access to the component This is where you create
library. Double click or drag flowcharts. All programs will have
components onto the simulation a BEGIN and END, you must fill
panel. in the gaps in between with the
programming icons from point
2. Simulation Panel (4).
Where all your components will
live. Note; all components you 6. Project Explorer
wish to use must be added to the This is where variables and
simulation panel. macros (functions) are created,
edited and viewed.
3. Panel Properties
Here users select which pin/ 7. Toolbar
port of the microcontroller the We use the icons in this toolbar
components are connected to. to simulate and program our
hardware.
4. Command Toolbox
Drag and drop programming
icons onto the Flowchart window
(5) to construct your program.

Copyright 2016 Matrix Technology Solutions Ltd. 6

 Getting Started
Guide

The simulation panels

In this next section we will walk you through the 3D interface. The 2D control
panel is very similar in operation to the 3D simulation panel, except the Z-axis
is locked. Once you have mastered the 3D simulation panel you will quickly
understand the 2D control panel.

1 3 4
2

1. Simulation panel controls

There are two methods in
which you can interact with the 1 2 3
simulation panel; Camera and
Cursor mode. It is a dynamic b. Cursor Mode allows you to
menu, and selecting the Arrow move (1), rotate (2) and scale
icon will change the functionality (3) objects. To free move the
of the three icons to its right. In object in the panel, left click
camera mode; and hold the object and drag.
Alternatively, if you want to
a. You can pan (1), rotate (2) move your object along a
and zoom (3) the camera. constrained axis, left mouse
To pan and rotate, hold the click on the local axes and
left mouse button and drag. drag. Rotate and scale work
To zoom, drag a box to the in a similar way.
required size or use the
mouse wheel to zoom in/ out.

Copyright 2016 Matrix Technology Solutions Ltd. 7

 Getting Started
Guide

2. Orientation axes 4. Save camera

The 3-axes in the top left corner With the save camera button you
of the simulation panel allow you can save and load custom camera
to align the camera back to an angles to allow you to swap
axis. between your custom positions.

3. Tools
In this tool box you can adjust
the configuration properties of
the simulation panel; change
background colour, snap to grid,
lighting modes and more.

Copyright 2016 Matrix Technology Solutions Ltd. 8

 Getting Started
Guide

Section 2: Flowcode
Examples
We will now run through several examples; LED flasher, creating
a latch and finally the use of an LCD screen to create a counter.
Each will increase in complexity and at the same time reduce in
provided information, requiring you to remember what youve
learnt in previous examples.

Copyright 2016 Matrix Technology Solutions Ltd. 9

 Getting Started
Guide

Template files
Flowcode comes with a selection simulation panel, and be configured
of template files which are made to correctly.
assist you with development. These
are based on popular development For our first example we will use a
boards from Matrix and 3rd party template file and in example 2 and 3
equipment such as Microchip, we will create a new blank project, to
Digikey and Arduino. The template demonstrate both processes. To use
file will have all the necessary template files, start a new project and
hardware components added to the choose Open Template.

You will be presented with the following screen. If you are using the EB006 and
EB083 board, navigate to the 16F1937 section and select EB083. Flowcode will
open and have the EB083 development board configured as standard. We are
now ready to begin example 1.

Copyright 2016 Matrix Technology Solutions Ltd. 10

 Getting Started
Guide

Example 1: LED flasher

In this example we will create an LED Since we are using a template
flasher which will introduce you to we already have an LED on our
the most basic Flowcode features. simulation panel on our EB083
This will run in simulation and can be board. Ensure that the configuration
downloaded to hardware. properties are as seen below. We
will be using rhe LED connected to
To make an LED flasher we will simply PORTA.0.
turn the LED on and off, repeatedly.

Copyright 2016 Matrix Technology Solutions Ltd. 11

 Getting Started
Guide

Now we will create our flowchart. To Drag a Loop over to your flowchart
make our microcontroller execute as seen below. By default the loop
code indefinitely we add a while(1) command is set to be a while(1)
loop to our flowchart. This loop loop, so it does not need any further
condition essentially means that configuration.
whatever code is placed within our
loop will execute, forever.

Did you know?

The small red star

above any icons
alerts you that your
flowchart hasnt
been saved since
you added this icon.

Copyright 2016 Matrix Technology Solutions Ltd. 12

 Getting Started
Guide

With our while(1) loop added we can

now focus on turning the LED on
and off. Since an LED is an output,
we will use the Output icon. Drag
an output icon across onto your
flowchart, as seen below, ensuring it
sits within the while loop.

Copyright 2016 Matrix Technology Solutions Ltd. 13

 Getting Started
Guide

You will now need to configure the

output icon. This is done by double
clicking it to view its properties. Our
LED is connected to PORTA.0, so we
must configure our properties to
match this. Finally, since we want to
turn the LED on we write a value of 1
in the variable or value box.

To make an LED flash we must turn it on and off. Place another output icon on
your flowchart, below the original, and configure it as before. Although this
time you should write a value of 0 instead to turn our LED off.

Copyright 2016 Matrix Technology Solutions Ltd. 14

 Getting Started
Guide

Our final step is to add delays.

Microcontrollers operate at very
high speeds (a 19.6608 MHz crystal
is used on the EB006 as standard).
This means it does nearly 20 million
things every second! If it was to turn
the LED on and off at this speed we
would not be able to see the change
occurring. Therefore we add delays
into our system. We will add a simple
1 second delay.

To add a delay we follow the same

procedure as adding other icons, but
instead drag a delay icon onto our
flowchart.

Copyright 2016 Matrix Technology Solutions Ltd. 15

 Getting Started
Guide

As before, we double click our delay

icon to configure it for the delay
we require. We can see the delay
configuration screen below, where
we have set a 1 second delay.

Currently we turn our LED on for 1 second, then we turn it off. However, we do
not hold the LED off and so it will turn on again very fast. It would therefore
appear that the LED is always on. We must add another delay icon after we
turn the LED off, which can be seen in the final flowchart below.

Copyright 2016 Matrix Technology Solutions Ltd. 16

 Getting Started
Guide

The simple LED flasher is now very right allow us to manually step
finished. First we will simulate through our program. As previously
our program to check it works as mentioned microcontrollers operate
required. Then we will write it to at very high speedsmuch faster
hardware, and get a real LED flashing. than we can see! We often need to
manually step through each icon in
To simulate, we use the buttons order to check that our program is
seen in the image below. The Play working correctly.
button begins our simulation. Once
in play mode we can pause or stop
our simulation. The two icons on the

If we run our simulator we will see that our LED flashes on for 1 second, and
off for 1 second.

Now that our program has been

simulated and is working as required
we will download our program to
hardware.

Depending on the hardware used, we will now provide some information

below to check that it is connected and configured correctly and you are
following the correct procedure for programming.

We will now cover the configurations needed for the three types of
hardware covered in this guide:
1. Matrix hardware
2. Arduino Uno hardware
3. Microchip Xpress hardware

Copyright 2016 Matrix Technology Solutions Ltd. 17

 Getting Started
Guide

1. Matrix hardware
In this section we will briefly discuss the Matrix If you are using
hardware. 3rd party hardware
you must ensure
you consult the
EB006v9 8bit multi-programmer board appropriate
documentation
The datasheet for the EB006 can be found on our website. Ensure the EB006 from the
has the default PIC16F1937 microcontroller inserted. The EB006 will be both manufacturer.
powered and programmed via the USB cable.

EB083 Development E-block

The EB083 development board will need to be connected to the EB006
on PORT A and B for this guide. It will also need a wire to allow power to
be routed to the EB083, connected between +V on the EB006 and EB083.
Consult the appropriate datasheet for connection configuration.
The EB083 features;
16 individual LEDs
16 individual switches
Quad 7-segment display
16 x 2 character alphanumeric LCD
On-board analogue channels (Light / Potentiometer)
Audio output socket

Copyright 2016 Matrix Technology Solutions Ltd. 18

 Getting Started
Guide

2. Arduino hardware
If you are using an Arduino Uno you from within Flowcode you should
must ensure you have the Arduino now check that Flowcode has seen
drivers installed before you can your connected hardware. Navigate
program directly from Flowcode. to Build-> Project Options ->
Consult the Arduino website to General Options and you will see the
download the latest drivers for your image below. From the Programmer
hardware. Port drop down box you must select
the COM port used by your Arduino,
With the drivers installed, and the here COM7.
Arduino microcontroller selected

Did you know?

If you are using

an Arduino, you
cannot change
properties such as
the configuration
and clock speed as
these are fixed.

Copyright 2016 Matrix Technology Solutions Ltd. 19

 Getting Started
Guide

3. Microchip Xpress hardware

If you are using the Microchip Xpress mass storage device. After you have
hardware, ensure you have the programmed your board, you will see
correct microcontroller selected from the name of your program saved as a
the Project Options menu. As with .HEX file on your board
other hardware, press compile to
chip, and Flowcode will program the Once your flowchart is complete
Xpress board. you create a hex file by pressing the
button seen below;
Note; There are no drivers to install
for the Xpress board, however,
check it has been seen correctly by
navigating to my computer and the
Xpress board should be seen as a

Did you know?

If you are using

the Microchip
Xpress board, you
wont be able to
complete the third
example program in
hardware, however,
you can still use the
simulator.

Copyright 2016 Matrix Technology Solutions Ltd. 20

 Getting Started
Guide

With your appropriate hardware middle icon compiles the Flowchart

connected and configured correctly, into a .Hex file. These two options
you must now program the device. are useful if you are using Flowcode
to create your program, but 3rd
In Flowcode it is easy to download party hardware to flash your
our program to hardware. When microcontroller. With these examples
downloading code to our device we we are using Flowcode to flash our
again have a shortcut toolbar. There microcontroller, and as such we use
are 3 icons in the programming the right hand icon. This compiles
section of the toolbar, as seen and programs our microcontroller in
below. The left icon compiles our one button press.
flowchart into a .C file, while the

Once we select to program the device a new window will appear on

the screen detailing the compilation and programming progress. When
complete you should see the program working as desired on hardware. If it
is not, ensure that you have followed every step in this tutorial, and that the
flowchart is correctly configured.

Copyright 2016 Matrix Technology Solutions Ltd. 21

 Getting Started
Guide

Example 2: Creating a latch

In the next two examples we will the switch the LED should stay on
assume you are now getting to grips until the switch is pressed again.
with Flowcode and will provide you This will introduce us to two new
with a few less details. Well still programming concepts; inputs and
walk you through any new features variables.
though, so do not worry.
First we will add our components to
In this example we will look at adding the simulation panel. We need;
a switch to the simulation panel, and
LED (5mm, Panel)
creating a latching system from a
Switch (Push, Panel)
simple momentary push-to-make
switch. First you must create a new
program and select the appropriate
microcontroller as discussed earlier
in this guide.
We will create a program that reads
the switch and lights up an LED when
pressed. When the user releases

Consult the table below for connection properties relevant to the hardware
you are using;

EB006 Arduino Uno Xpress

LED A0 A0 A0
Switch B0 D0 A5

We will now create a variable. When reading inputs we must have a variable
to save the state of the switch press. To create a variable click on the down
arrow next to Variables in the Project Explorer and click Add new.

Copyright 2016 Matrix Technology Solutions Ltd. 22

 Getting Started
Guide

The Edit variable name window will appear. There are 4 sections we should fill
out. Although the description is optional, it is good practice to do so.

i. Here weve called our iii. We added a brief description

variable SwitchPressed. so that later we can remember
Note you cannot have spaces exactly what this variable
in variable names. does. This is purely a visual
hint, and has no bearing on
ii. We have initialised our
functionality.
variable to zero to ensure no
old values remain in memory iv. We are selecting this as a type
byte, therefore it can save any
value between 0-255.

Copyright 2016 Matrix Technology Solutions Ltd. 23

 Getting Started
Guide

Next, add a while(1) loop to the connected to, see the table above).
flowchart, as we did in the first You must also select to save to the
LED flasher example. Then, add an variable called SwitchPressed. This
input to the flowchart within this reads the switch whenever we call
loop. Configure the input as below, this icon, and will save its state to the
ensuring that you select Single Bit; variable SwitchPressed. If the switch is
PORTA.0 (for the Arduino Uno or pressed, it will return a 1, if nothing
Xpress board you will need to select is pressed, it will return a 0.
the same pin that the switch is

Did you know?

Whenever we use switches with microcontrollers we need to consider a

thing called bounce. Bounce occurs when a user presses a switch and
the generated mechanical movement can cause the switch to physically
bounce between the on/ off state multiple times, even though we only
intended to press it once. Since microcontrollers operate so fast, this will
result in unwanted switch presses.

Imagine a small microcontroller system where a person working on a

ticket gate is pressing a switch to count people attending a sporting
event. If de-bounce wasnt implemented, they may press a switch as a
person walks past and the mechanical bounce of the switch may count 3
people, despite only feeling like it was pressed once.

We overcome this by adding de-bounce. De-bounce can be added in

hardware, or more commonly through programming. The simplest way
to overcome bounce in software is to add a small delay after a switch is
pressed. A value of 20-50ms is typically enough.

Add a delay of 50ms directly after your input icon to allow for bounce.

Copyright 2016 Matrix Technology Solutions Ltd. 24

 Getting Started
Guide

With the value now stored in the There are several ways to achieve
variable SwitchPressed we must this, but for this one we need a
do something with it. We could just second variable, which we have
add a single output icon to turn named Flag. What we want to do is
on the LED whenever we press the toggle the value of Flag only when
switch, but thats a bit too simple. the button is pressed. To achieve
Instead we will make a latch, so this we use a Decision command.
when the switch is pressed it turns The first thing we need to do is
on the LED and holds it on until the determine whether the switch was
switch is pressed again. pressed or not. Drag a decision
command onto the flowchart, and
configure it as seen below;

Since we are creating a latch we only want to modify the value of Flag when
the switch has been pressed. Therefore, we will only place code in the Yes
branch of the decision. We leave the No branch empty. Once the switch has
been pressed we want to toggle the value of Flag from 0-1 or vice versa.
Place a calculation box within the Yes branch. The statement here Flag = !Flag
will toggle the value of Flag between 1 and 0 each time it is executed.

Our final command is to output the status of Flag to the LED. We do this with
an output command, as we did in the first example. However, rather than
writing a 1 or 0 in the Variable or Value box we write the variable name Flag.

Copyright 2016 Matrix Technology Solutions Ltd. 25

 Getting Started
Guide

The final flowchart can be seen below:

You should now both simulate and download your code to hardware for
verification. As you press the switch on your board, the appropriate LED
should illuminate, and stay that way until you press the switch again. Once
confirmed working, move onto the final exercise.

Copyright 2016 Matrix Technology Solutions Ltd. 26

 Getting Started
Guide

Example 3: LCD screen and counter

In the final example we will step talk to an LCD screen we may need
through creating a simple counter, to execute a series of commands
and displaying that value on an LCD back and forth. Component macros
display. (If you are using the Xpress are libraries of code that we have
board, this exercise can only be developed that simplify such things.
performed in simulation mode). A component macro therefore is
a sub-routine, and is a block of
In this exercise you will be introduced code that can be called by a single
to a new flowchart command; the flowchart icon.
component macro. A component
macro is how we interface with As with example 2, we will step
the more complex components in through familiar concepts with less
Flowcode. For simple things like detail, but any new features will be
switches and LEDs we can use inputs carefully explained.
and outputs. However, if we want to

Create a new flowchart with the correct microcontroller selected and add an
LCD (EB005, 16x2) screen to the simulation panel. This is the screen used on
both the standalone EB005 E-block, and the EB083 development board used
in this tutorial.
With the LCD screen added to the simulation panel you should check
its connection properties. Consult the table below to check connection
properties;

Connection EB006 Arduino

Data0 PORTB.0 PORTD.0
Data1 PORTB.1 PORTD.1
Data2 PORTB.2 PORTD.2
Data3 PORTB.3 PORTD.3
Register Select PORTB.4 PORTD.4
Enable PORTB.5 PORTD.5

We will now quickly progress through a few steps where we are doing familiar
coding. If you struggle to keep up you can check the code listing at the end of
this section.

1. Create a variable called Counter of 3. Place a calculation box within this

type byte, and initialise it to zero. while(1) loop, and increment the
2. Place a while(1) loop into your variable counter using a calculation
flowchart command
a. Counter = Counter + 1

4. Place a 1 second delay after the

calculation box.

Copyright 2016 Matrix Technology Solutions Ltd. 27

 Getting Started
Guide

If we were to run this program now yet have a method of displaying

it would simply count up from 0-255. this information on the LCD screen.
Since we are using a variable type of We will now introduce component
Byte for Counter it will reach 255 macros. Add a component macro
and roll back around to zero where it to the very start of your flowchart,
will continue counting again. above the while(1) loop, as seen
below;
Despite having a counter we do not

Open its configuration properties, as usual, by double clicking on the

component macro. You will see the box below. Press the + button next to the
lcd_eb005 component to access the available component macros.

Copyright 2016 Matrix Technology Solutions Ltd. 28

 Getting Started
Guide

Once opened you will see a list of 12 component macros available for the
LCD screen. These are all pre-written sub routines, developed by Matrix,
to assist you with using the LCD screen. The first we want to use is Start.
Select Start and press OK.

Did you know?

Without this macro

you would have to
input approximately
30-40 lines of code/
flowchart icons to
initialise the screen.
You can see why
component macros
The Start routine is required to initialise the LCD screen, so that the are such a useful
microcontroller knows it exists, and sets up timing routines etc. feature.

Copyright 2016 Matrix Technology Solutions Ltd. 29

 Getting Started
Guide

With the screen initialised we need There is one final component macro
two more component macros. The we need. We want our value of
first is to display the value of the Counter to always be displayed in
variable counter on the LCD screen. the top left corner (X,Y position; 0,0).
Add another component macro Currently our program will write the
within the while(1) loop, directly value of Counter on the LCD screen,
above the calculation box. Configure however, the cursor will move each
it to be a PrintNumber macro, time we write a value and we will end
however, you will notice that there up with something like below;
is a parameter box that you must
now fill in, called Number. Here we
must write the name of our variable;
Counter. Each time this command is
now executed it will display whatever
value we currently have saved in
counter.

What we need to do is clear the LCD screen each time we write a new value.
Luckily for us executing a clear screen routine also moves the cursor position
back to (0,0). Add another component macro above the PrintNumber macro,
and configure it to Clear.
We have now finished our third and final example. You should first test your
program is right by comparing it to the code listing below. Simulate, before
downloading to hardware to confirm it works.

Copyright 2016 Matrix Technology Solutions Ltd. 30

 Getting Started
Guide

We have now introduced you to the most basic principles within Flowcode.
These principles are the foundation of all microcontroller development. There
are more complex features that we have not covered, but at this point you
should have an understanding of how Flowcode works, and be able to begin
experimenting for yourself as to other features.

Copyright 2016 Matrix Technology Solutions Ltd. 31

 Getting Started
Guide

Version control

Version Author Date Changes

1.0 PN 24/06/2016 Document creation
1.1 PN 12/07/2016 Image updates, minor changes

Copyright 2016 Matrix Technology Solutions Ltd. 32

Matrix Technology Solutions Limited
The Factory
33 Gibbet Street
Halifax HX1 5BA
United Kingdom

t: +44 (0) 1422 252380

f: +44 (0) 1422 341830
e: [email protected]

@MatrixTSL

www.matrixtsl.com