Getting Started

Guide

Copyright © 2021 Matrix Technology Solutions Ltd. 1

 Getting Started

Guide

Introduction
Flowcode is an Integrated Development Environment (IDE) Flowcode supports both Matrix and 3rd party
for programming microcontrollers such as 8, 16 and 32bit hardware. In this guide we will create examples
based on three different sets of hardware;
PIC, Arduino and ARM devices. It achieves this by using
1. Matrix BL0011 multi-programmer and BL0114
flowcharts instead of text based languages, thus making
combo board
programming simpler and faster. 2. Arduino Uno and Matrix BL0114 combo board
Flowcode also contains hundreds of pre-made 3. Microchip Xpress board
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.

Prerequisites
• A Windows based PC with a copy of Flowcode 9
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 we’ll 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 © 2021 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 © 2021 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. As we are using an
BL0011 board, with the default PIC16F18877 attached, we will need to ensure Flowcode has the
corresponding chip selected. When using Matrix hardware, this has automatically been configured
for the correct config properties and clock speed etc.

Did you know?

Flowcode can program hundreds of
different microcontrollers. All are
slightly different, and as such, it is
essential that you select exactly
the right microcontroller you are
using.

Copyright © 2021 Matrix Technology Solutions Ltd. 4

 Getting Started

Guide

Select the relevant hardware on the following screen depending on

what you are working with.

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 © 2021 Matrix Technology Solutions Ltd. 5

 Getting Started

Guide

Once Flowcode has opened you will be presented with a blank IDE as seen below;

1. Components 5. Main Window

Provides access to the component library. This is where you create flowcharts. All
Double click or drag components onto the programs will have a ‘BEGIN’ and ‘END’, you
simulation panel. must fill in the gaps in between with the
programming icons from point (4).
2. Simulation Panel
6. Project Explorer
Where all your components will live. Note;
all components you wish to use must be This is where variables and macros (functions)
added to the simulation panel.
are created, edited and viewed.

3. Panel Properties 7. Toolbar

Here users select which pin/ port of the
We use the icons in this toolbar to simulate and
microcontroller the components are
program our hardware.
connected to.

4. Command Toolbox
Drag and drop programming icons onto the
Flowchart window (5) to construct your
program.

Copyright © 2021 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

1. Simulation panel controls

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

Copyright © 2021 Matrix Technology Solutions Ltd. 7

 Getting Started

Guide

2. Orientation axes The 3-axes

in the top left corner of the
simulation panel allow you to
align the camera back to an
axis.

3. Tools In this tool box you 4. Save camera With the ‘save
can adjust the configuration camera’ button you can save
properties of the simulation and load custom camera
panel; change background angles to allow you to swap
colour, snap to grid, lighting between your custom
modes and more. positions

Copyright © 2021 Matrix Technology Solutions Ltd. 8

 Getting Started

Guide

Section 2: Flowcode
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 you’ve learnt in
previous examples.

Copyright © 2021 Matrix Technology Solutions Ltd. 9

 Getting Started

Guide

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

You will be presented with a choice of templates where you can select the most appropriate board for your use . For
example, if you’re using the BL0011 and BL0114 combo board, navigate to E-blocks2 section and select BL0011_Combo.
We are now ready to begin example 1

Copyright © 2021 Matrix Technology Solutions Ltd. 10

 Getting Started

Guide

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

Copyright © 2021 Matrix Technology Solutions Ltd. 11

 Getting Started

Guide

Now we will create our flowchart. To make our You can drag the Loop over to your flowchart,
microcontroller execute code indefinitely we yet using Templates create the Loop for you. By
use a while(1) loop in our flowchart. This loop default the loop command is set to be a while
condition essentially means that whatever code (1) loop, so it does not need any further
is placed within our loop will execute, forever. configuration.

Copyright © 2021 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 © 2021 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 © 2021 Matrix Technology Solutions Ltd. 14

 Getting Started

Guide

Our final step is to add delays. Microcontrollers operate at very high speeds (a 32
MHz crystal is used on the BL0114 as standard). The default 32MHz crystal makes
the PIC operate 8 million instructions per 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 © 2021 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 © 2021 Matrix Technology Solutions Ltd. 16

 Getting Started

Guide

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

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 Depending on the hardware used, we will
and is working as required we will now provide some information below to
download our program to hardware 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 © 2021 Matrix Technology Solutions Ltd. 17

 Getting Started

Guide

1. Matrix hardware
In this section we will briefly discuss the Matrix hardware.

BL0011 – 8bit multi-programmer board

The datasheet for BL0011 can be found on our website. The BL0011 comes with
PIC16F18877 microcontroller inserted. The BL0011 will be both powered and
programmed via the micro USB cable.

BL0114 – E-block2 combo board

The BL0114 combo board will need to be connected to the BL0011 on PORT A
and B for this guide.

The BL0114 features:

• 16 individual LEDs
• 16 individual switches
• Quad 7-segment display
• 20 x 4 character alphanumeric LCD
• On-board analogue channels (Light / Potentiometer)

• Audio output socket

Copyright © 2021 Matrix Technology Solutions Ltd. 18

 Getting Started

Guide

2. Arduino hardware
If you are using an Arduino Uno you must ensure you hardware. Navigate to Build-> Project Options ->
have the Arduino drivers installed before you can General Options and you will see the image below. From
program directly from Flowcode. Consult the Arduino the ‘Programmer Port’ drop down box you must select
website to download the latest drivers for your the appropriate COM port for your Arduino (COM’s is
hardware. With the drivers installed, and the Arduino shown in the image below but this might be different on
microcontroller selected from within Flowcode you your PC). Note that the COM port will only be shown if
should now check that Flowcode has seen your your Arduino is connected and the drivers are installed.
connected

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 © 2021 Matrix Technology Solutions Ltd. 19

 Getting Started

Guide

3. Microchip Xpress
hardware
If you are using the Microchip Xpress hardware, ensure have programmed your board, you will see the
you have the correct microcontroller selected from the name of your program saved as a .HEX file on
Project Options menu. As with other hardware, press your board Once your flowchart is complete
compile to chip, and Flowcode will program the Xpress you create a hex file by pressing the button
board. 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 mass storage device. After you

Did you know?

If you are using the Microchip Xpress
board, you won’t be able to complete
the third example program in hardware,
however, you can still use the simulator

Copyright © 2021 Matrix Technology Solutions Ltd. 20

 Getting Started

Guide

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

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 © 2021 Matrix Technology Solutions Ltd. 21

 Getting Started

Guide

Example 2: Creating a latch

In the next two examples we will assume you are now First we will add our components to the
getting to grips with Flowcode and will provide you with a simulation panel. We need;
few less details. We’ll still walk you through any new • LED (5mm, PCB)
features though, so do not worry. In this example we will
look at adding a switch to the simulation panel, and creating
a latching system from a 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 the
switch the LED should stay on until the switch is pressed
If you double click on a component in the
again. This will introduce us to two new programming
System Panel you can access its Properties
concepts; inputs and variables.
where you can change port connections of
the component if required.

Consult the table below for connection properties

relevant to the hardware you are using;

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 © 2021 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.

1. Here we’ve called our variable

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

Copyright © 2021 Matrix Technology Solutions Ltd. 23

 Getting Started

Guide

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

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 wasn’t 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 © 2021 Matrix Technology Solutions Ltd. 24

 Getting Started

Guide

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

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 © 2021 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 © 2021 Matrix Technology Solutions Ltd. 26

 Getting Started

Guide

Example 3: LCD screen and

counter

In the final example we will step through creating a As with example 2, we will step through familiar
simple counter, and displaying that value on an LCD concepts with less detail, but any new features
display. (If you are using the Xpress board, this exercise will be carefully explained. Create a new
can only be performed in simulation mode). In this flowchart with the correct microcontroller
exercise you will be introduced to a new flowchart selected and add an LCD (Generic, 20 x 4)
command; the component macro. A component macro is screen to the simulation panel. This is the
how we interface with the more complex components in screen used on both the standalone BL0169 E-
Flowcode. For simple things like switches and LEDs we blocks2, and the BL0144 combo board used in
can use inputs and outputs. However, if we want to talk this tutorial. With the LCD screen added to the
to an LCD screen we may need to execute a series of simulation panel you should check its
commands back and forth. Component macros are
libraries of code that we have developed that simplify

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 type byte, and initialise it to zero.
2. Place a while(1) loop into your flowchart

3. Place a calculation box within this while(1) loop, and increment the variable counter using a
calculation command
a.Counter = Counter + 1
4. Place a 1 second delay after the calculation box

Copyright © 2021 Matrix Technology Solutions Ltd. 27

 Getting Started

Guide

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

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_4x20 component to access
the available component macros.

Copyright © 2021 Matrix Technology Solutions Ltd. 28

 Getting Started

Guide

Once opened you will see a list of 13 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 are
such a useful feature.

The Start routine is required to initialise the LCD screen, so that the
microcontroller knows it exists, and sets up timing routines etc.

Copyright © 2021 Matrix Technology Solutions Ltd. 29

 Getting Started

Guide

With the screen initialised we need two more There is one final component macro we need. We
component macros. The first is to display the value want our value of Counter to always be displayed
of the variable ‘counter’ on the LCD screen. Add in the top left corner (X,Y position; 0,0). Currently
another component macro within the while(1) our program will write the value of Counter on the
loop, directly above the calculation box. Configure LCD screen, however, the cursor will move each
it to be a ‘PrintNumber’ macro, however, you will time we write a value and we will end up with
notice that there is a parameter box that you must something like below; .
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

Did you know?

The BL0114 combo board has small
slide switches used to turn the LCD
screen and the 7SEG LCD screen on
and off. Make sure that this switch in
in the ‘on’ position for the LCD screen
when using

Copyright © 2021 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 © 2021 Matrix Technology Solutions Ltd. 31

 Getting Started

Guide

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

Copyright © 2021 Matrix Technology Solutions Ltd. 32