ARDUINO TUTORIALS

Introduction
It's remarkably simple to design and create electronic projects with Visual Designer. These short
tutorials each cover a separate project and include various different techniques and methods in
the project design.

Arduino Tutorials
Tutorial 1 : Flashing an LED (Grove).
Covers project creation, adding peripherals. basic flowchart programming and Proteus
simulation.
Tutorial 2 :Nightlight (Grove)
Includes grove module configuration, decision making flowcharts, interactive simulation and
basic debugging.
Tutorial 3: Data Storage (AdaFruit Shield)
Includes resource handling, adding shields, taking measurements and programming physical
hardware.
Tutorial 4 : Motor Control (Adafruit Shield)
Includes programming with loops, adding and calling sub-routines and using the clipboard..
Tutorial 5: LED (Schematic Design)
Includes schematic entry for the electronics, using interrupts and CPU methods in Visual
Designer.

1
LABCENTER ELECTRONICS LTD.

Tutorial 1 : Flashing LED's

Introduction
This tutorial starts when you open Proteus and finishes with the flashing of an LED in a Proteus
simulation. The goal here is to cover the basics with the most simple of projects.
New Project Wizard
Visual Designer is integrated into the Proteus Design Suite and so we start our Visual Designer
Projects from the Proteus Home Screen. The easiest and best way to create a Visual Designer
Project is, unsurprisingly, through the New Project Wizard.

New project from the Home page of Proteus

The first page allows you to select the name and destination of your project.

The second screen of the wizard allows us to select which size of schematic sheet we want.
The default is fine for all but the largest of projects and is certainly OK for the flashing of an
LED.

2
 Arduino Tutorials

If your license includes Proteus PCB Design the next screen will offer you an option to create an
accompanying PCB with the project. It's not necessary for our purposes and beyond the scope
of this document so we'll leave the option disabled.

You may not see this screen at all if your license key doesn't include PCB Design.

Next up is the firmware screen and it is here that we really define our Visual Designer project.
First, we change the radio buttons at the top to the option for Flowchart Project and then we
select the Arduino family and either the Arduino Uno or the Arduino Mega from the controller
combo box.

3
LABCENTER ELECTRONICS LTD.

The firmware selection refers to a Proteus VSM simulation project rather than a Visual
Designer flowchart project.

Finally, you will be presented with a summary page of your configuration.

After you exit the dialogue form the project will be created and you will see both a skeleton
schematic with the Arduino processor placed and a skeleton chart project with the familiar
Setup and Loop routines on the Editing Window.

4
 Arduino Tutorials

The standard Arduino Sketch includes two functions, namely Setup and Loop. The Setup
function is intended for one time initialization and the Loop function provides a place for
the main program loop. Visual Designer for Arduino uses the same paradigm and you
must have at least one of these two constructs in your flowchart for it to compile. If
you have deleted them, just add an event block and name it appropriately.

Now we are ready to start designing our project.

Adding a Peripheral
The first thing to do is to add the peripheral(s) for the project. These can be Arduino shields or
just little Grove sensors. The Grove system consists of an Arduino shield with lots of 4-pin
headers into which any number of sensors, buttons and LED's can be plugged. This makes it
very flexible and ideal for experimenting.

We'll be adding a Grove LED. In Visual Designer, we right click on the Project Tree and select
the Add Peripheral command. Next, switch to Grove and select one of the LED's.

5
LABCENTER ELECTRONICS LTD.

Repeat the process to add a Grove button. If you then switch to the schematic tab you will see
that the 'virtual hardware' has been autoplaced for you.

To avoid clutter on the schematic, connections are made on the schematic by giving terminals
the same name. Any terminals with the same name can be thought of having an invisible wire
between them

In real hardware, this equates to connecting up the Grove button and Grove LED to the shield
and attaching the shield to the Arduino Uno.

6
 Arduino Tutorials

Grove LED and Grove Button connected onto the Arduino UNO.

Note that you must plug the peripherals into the same connectors on the Grove shield as they
are designated on the Proteus schematic. You must also ensure that you don't have two
peripherals with the same connector ID on the schematic; if you do, you need to switch to the
schematic and change the ConnectorID on one of the peripherals.

7
LABCENTER ELECTRONICS LTD.

Drag and Drop Flowchart Design

Back in Visual Designer, you'll notice that the Project Tree now has two entries under the
peripherals section.

The beauty of Visual Designer is that you can expand the peripherals to find a list of methods.
These methods are the primary way in which we interact with the hardware. For example, drag
and drop the 'On' method of the LED into the loop routine.

To test this simply press the play button. The program will compile, the simulator will start and
the LED will turn on. You can see this either via the Active popup at the right of Visual Designer
or by switching to the schematic tab.

8
 Arduino Tutorials

Press stop to exit the simulation and we'll extend our program to switch the LED on and off with
a button press. You'll notice that the button has no methods in the project tree.

The only sensible information we need from the button is to know whether it has been pressed
and for that we have what we call a 'sensor function'. A sensor function returns either TRUE or
FALSE depending on whether the basic peripheral function is true or not. For example, the
sensor function for a button will return TRUE when the button is pressed and FALSE if it isn't.
Similarly, the sensor function for an LED will return TRUE when the LED is on and FALSE when
the LED is off. Place the sensor function for the button by dragging and dropping from the
button itself onto the loop function of the flowchart.

You will notice that it appears as a decision block. Sensor functions always return TRUE or
FALSE and a decision block allows us to split our code into two conditional paths. Your loop
routine should currently look something like the following.
9
LABCENTER ELECTRONICS LTD.

We are constantly testing the button to see if it is pressed and we are turning on the LED if it is.
However, we still need to tell the program what to do if the button is not pressed. We want the
LED to turn off so lets drag and drop that method into space alongside the ON operation.

Now, we need to wire from the decision block to the top of the OFF command. To place a
flowline click on an output node (the decision block), move the mouse to an available input node
(top of the OFF routine) and click the mouse again.

10
 Arduino Tutorials

Similarly we need to connect the flow from the bottom of the OFF command back into the main
loop.

Your program should now look like the following

Note that the decision block has two labels indicating which code path is followed if the decision
resolves to TRUE (YES) and which code path is followed if the decision resolves to FALSE
(NO). If these are the wrong way around you can switch them by right clicking on the decision
block and selecting the swap command from the context menu.

Having made this change, our program now turns the LED off when the button is down and on
when the button is released. To compile and test, first press the play button and then use the
mouse to press the button down.

11
LABCENTER ELECTRONICS LTD.

You can experiment further here with changing the decision or swapping in the toggle method.
You might also find it useful to add a delay.

For more information, read Tutorial 2.

12
 Arduino Tutorials

TUTORIAL 2: LUX SENSOR

Introduction
In this tutorial we are going to use a couple of Grove sensors and an LED to design a mini
nightlight. Project setup is covered in the first tutorial so we'll assume that you have a blank
Arduino Uno project in front of you.

This tutorial is also covered by a short movie on the Labcenter Youtube Channel

Adding Hardware
We'll use the Grove infra-red proximity sensor and the Grove luminance sensor along with a
Grove LED. All of these can be picked via the Add Peripheral command on the Project Menu.

13
LABCENTER ELECTRONICS LTD.

After they have been added to the project, you will see the methods for controlling the
peripherals in the Project Tree and the 'virtual hardware' for the peripherals placed for you on
the schematic.

Note that the connectors are both labeled A0 and will need to be manually changed to be
A0 & A2.

It is vitally important to configure the Grove connectors properly and this is often not as simple
as it first appears. Let's take an example:
14
 Arduino Tutorials

The real proximity sensor requires only three wires with the fourth left NC. Note therefore that,
when plugged into socket A0 the sensor is connecting to analog pin A1.

This is fine, except if you then plug the luminance sensor into socket A1. The luminance sensor
will use analog pin A1 on socket A1 and therefore clash. You should plug this sensor into socket
A2.

Golden Rule
Look closely at the Grove board to see the connections and double check against the sensors
for conflicts.
The sockets include connections through to two Arduino IO pins and there is a pin overlap. For
example:

- Socket A0 can use pins A0 and A1

- Socket A1 can use pins A1 and A2
- Socket A2 can use pins A2 and A3.
- etc.
15
LABCENTER ELECTRONICS LTD.

Digital sockets are exactly the same.

Our configuration for this project is therefore proximity sensor in socket A0 and luminance
sensor in socket A2. The LED can be in any digital socket we like.

16
 Arduino Tutorials

Designing the Program

In our nightlight mock up we are looking for our LED to light when the following are true:
It's is dark.
Someone is nearby.
These are both decisions on the flowchart. Start by drag and drop the readLuminance() method
onto the loop routine of the chart.

This sensor returns a lux value between 0 and 1000, with 0 being pitch black and 1000 max
light. Let's then use our result in a decision block and set our initial test value to around 100.

The datasheet for the APDS-9002 photo sensor used in this Grove module provides data
on lux values.

17
LABCENTER ELECTRONICS LTD.

See Also: [Link]

For the proximity sensor, we want to read a distance so drag and drop into the top of the loop.

The proximity sensor can detect up to 80cm but we'll set our initial test to 20cm.

See Also: [Link]

Since, we need both conditions to be true for the LED to turn on, make sure that the second
decision is on the YES branch of the first decision.

Next, drag and drop the led on method at the bottom of the YES branch.

18
 Arduino Tutorials

Finally, place the LED off method to the right of the main loop beside the LED on method.

Since we want the LED to turn off if either condition is false we can wire both NO branches from
the decisions to this method.

Finally, connect the bottom of the NO program branch back into the main program loop.

19
LABCENTER ELECTRONICS LTD.

Simulating and Testing

To test our program, all we need to do is press the play button and then adjust the distance
display on the proximity sensor and the lux display on the luminance sensor.

The LED should turn on when the distance value is less than 20 and it's a little cloudy.
20
 Arduino Tutorials

Pause the simulation and set a breakpoint on the LED off method.

Press play again to run the simulation and change either the distance or the light until the
breakpoint triggers

21
LABCENTER ELECTRONICS LTD.

You'll notice that both our variables are available in the variables display.

Comparing these values to the tested decisions will tell us which condition has failed.

As you single step via the icons at the top you'll notice the LED turn off.

1, Single step once. 2, Notice the END block is highlighted. 3. LED has turned off

22
 Arduino Tutorials

Programming
Since everything seems to working in good order, the remaining task is to plug in the Arduino
and program the real hardware. The process here is:

1) Plug the Grove sensors into the Grove baseboard in the same connectors as on the
schematic. See also the golden rule discussed earlier.
2) Connect the baseboard to the Arduino and connect the Arduino to the PC. Until you
have something like so:

3) Click the program upload button in Visual Designer.

4) Test in hardware.

23
LABCENTER ELECTRONICS LTD.

If the programming fails, click on the project settings icon (next to the icon shown above)
to make sure the COM port and settings are correct.

24
 Arduino Tutorials

TUTORIAL 3: DATA STORAGE

Introduction
This tutorial introduces data resources and the storage model. We'll be creating a program to
display a bitmap on an SD card onto the TFT display, although the same principles would hold
true for audio (.WAV) files on the Wave Shield.

It is assumed as this stage that you have worked through the other tutorials and are familiar with
general placement and connecting of flowblocks.

You can watch a short movie of this tutorial on the Labcenter Youtube Channel.
Setup
We'll set up this project in the usual way via the new project wizard and configure it as an
Arduino Uno flowchart project.

Next, we'll want to add our peripheral shield. We right click on the Project Tree and add the
Adafruit TFT shield. Note that this is not a module for the Grove Shield but a completely
different shield which contains both an SD card and a TFT display.

25
LABCENTER ELECTRONICS LTD.

The last thing we need to do is add the resource. In our case this is the picture that we want to
store in the SD card and display on the TFT display. We do this via the Add Resource
command on the right click context menu.

Be careful with the naming of resource files. The Arduino SD stack by default supports
only 8.3 filenames in order to support FAT16 cards. This means that the namestem must
be 8 characters or less and the extension must be 3 characters or less. For example, a
picture called [Link] will not load whereas renaming it to [Link] or
[Link] will work fine.
Designing the Program
Now that we have all the pieces we need, the remaining job is to create the program. This could
hardly be easier in Visual Designer. First, drag the fillSreen() method onto the top of the loop
and set the fill colour to black.

Next drag and drop the bitmap resource into the loop routine. Visual Designer knows that the
only sensible target for the resource is the TFT display and it knows the method for rendering
the resource is drawBitmap() and so it will automatically configure the flowblock for you.

26
 Arduino Tutorials

Now you need to edit the Image and set the xPos and yPos to be 0

Press the play button to compile and run the simulation.

27
LABCENTER ELECTRONICS LTD.

If necessary, you can configure the rotation in the setup routine via the same drag and drop
method.

Taking Measurements
One of the nice things about Visual Designer is that it contains the Proteus schematic. This
means that, if you want to, you can look a little deeper at what is happening in your design. For
example, in our example the SD card is connected to the processor on the SPI bus and so we
can place and wire a protocol analyzer to examine the SPI packets. In Proteus, all signals and
waveforms travel through the wires, and two terminals with the same name have an 'invisible
wire' between them.

Two terminals with the same name are connected together as though they were wired.
Given this, the easiest way to connect the SPI terminal is to place one and wire it to terminals
with the same names as the other SPI lines. The alternative is to connect up to existing wires.

28
 Arduino Tutorials

Placing a SPI Analyser:

Wiring SPI Analyser:

Next, set a breakpoint in the drawBitmap() command as this is where the majority of the SPI
transmissions happen.

29
LABCENTER ELECTRONICS LTD.

Now, when we run the simulation we'll see some initialisation chatter on the SPI bus until we hit
our breakpoint. When we single step, we will see an awful lot of data being moved from the SD
card corresponding to the bitmap being read by the processor. You can drill all the way down to
bit level on any packet if need be.

The same basic process will work with any instrument (Oscilloscope, Logic Analyser, I2C
Analyser etc.).

Attaching instrumentation is essential for analysis but will slow down simulation. It's worth
deleting instruments when a debug session is complete.
Programming Hardware
When we are finished development we can easily program the physical hardware. First, connect
the Adafruit TFT shield to the Arduino Uno and make sure a compatible SD card is inserted in
the shield. Then, connect to the PC and then simply press the program button.

If the upload doesn't start, use the settings dialogue to specify the COM port that you have
connected to and try again.

You should see an upload complete message in the simulation log and your TFT should be
displaying the picture.

This programming process is twofold. First, the resource is written to the SD card and then the
firmware program is sent to the AVR microcontroller.

They physical SD Card must be FAT16 or FAT32 and big enough to hold the resource file
that will be programmed onto it.
30
 Arduino Tutorials

TUTORIAL 4 : MOTOR CONTROL

Introduction
This tutorial shows how you can easily control both DC motors and Stepper motors with Visual
Designer. We'll do this using the Arduino Motor Shield V1 R3.

Front View Rear View

See Also: [Link]

You can experiment with Servo motors using the Grove Servo peripheral and you can
also use BLDC motors by drawing on the schematic.
DC Motor Control
Start by creating a new Visual Designer Project and then Add the Arduino Shield with DC
Motors in the normal way.

31
LABCENTER ELECTRONICS LTD.

Note that under the Motor Control heading there are actually two shields. These are identical
except that the first has the board configured and populated with two DC motors and the second
is configured and populated with one stepper motor. In the real hardware of course you would
need to configure and populate the shield manually according to which project you were
programming the Arduino with.

You should notice that in the Project Tree you now have two motors with associated methods.

Let's write a small program to drive the motors in opposite directions. The first thing we want to
do is initialise a variable for the speed of the motors so drag and drop an assignment block into
the Setup routine (we only need to do this once).

Edit the block, create a new variable and assign a value.

Now, let's drive the first motor forwards. Drag and drop the run methods into the loop routine.

32
 Arduino Tutorials

Edit the block, set the direction forwards and assign the speed to our variable.

Repeat the process for the second motor to send it spinning backwards.

33
LABCENTER ELECTRONICS LTD.

Next, we'll add a sub-routine to stop the motors. Drag and drop an Event block into an empty
place, edit the Event block and give it a sensible name.

Now, drag and drop the stop routine for both motors into the sub-routine we've just added.

Finally, drag and drop a subroutine call block into the main loop and edit it to call our routine.

34
 Arduino Tutorials

To see this in action press the pause button and then single step the code using the Step-Into
icon at the top of the source window. You'll notice that the code executes through the sub-
routine and then returns to the main loop.

We have most of the pieces of our program in place but we are starting and stopping the motors
very quickly which isn't going to help them build momentum. Much better to add a delay in the
drive phase and a similar time delay in the stop phase. Again, this is drag and drop from the
flowblock menu onto the chart routines.

If you run the simulation now you can monitor the drive and spin down loops via the time display
on the status bar

You could also pause the simulation, set a breakpoint and step the code. Unlike the real
hardware the motors won't lose momentum when you are at a breakpoint - a real advantage to
debugging in software.

35
LABCENTER ELECTRONICS LTD.

For more advanced analysis you could place and wire an oscilloscope on the schematic and
watch the PWM waveforms drive the motor.

As always, you can program the physical board at any time via the upload button.

Stepper Motor Control

For the stepper motor we are using the same hardware shield (Arduino Motor Shield V1 R3) but
configured for a single unipolar stepper motor. Start a new Visual Designer project and bring in
the virtual shield via the Add Peripheral command.

36
 Arduino Tutorials

We'll design a small program to step the motor in one direction and then reverse direction and
step backwards. Our first job is to define the speed which we can do by dragging the setSpeed()
method into the Setup routine.

In order to step a set number of times we want to use a loop construct. Drag and drop one onto
the Main (Loop) routine and edit the block.

37
LABCENTER ELECTRONICS LTD.

We'll use a For-Next loop here so add a variable for count, initialise to zero and let's go round
the loop 12 times.

Now, drag the step() method of the motor inside our loop - you'll notice the colour change to
indicate it's part of the loop construct.

38
 Arduino Tutorials

Edit the flowblock and make the number of steps 4 so that we get sensible movement, set the
direction to forwards and the mode to interleave.

Single Mode means single-coil activation, Double mode means 2 coils are activated at
once (for higher torque) and "interleave" mode means that it alternates between single
and double to get twice the resolution (but of course its half the speed). Lots more info on
this in various internet resources.

Add a modest delay after the step routine to allow the drive phase to complete before we iterate
the loop.

39
LABCENTER ELECTRONICS LTD.

That's the forwards motion in place. Driving the motor in the opposite direction is identical
except that we change the direction in the step routine. You can place a second loop and drag
methods in or we can just use the trusty copy and paste. Drag a box with the right mouse
around the loop and select copy from the resulting context menu.

Next, right click (or CTRL+V) to paste a second set of blocks.

Drag them into place underneath the first loop, releasing the mouse when the top node appears
with a dot.

40
 Arduino Tutorials

Finally, edit the step method and change the direction.

That's it. Press play and watch the motor step forwards and backwards or pause, set a
breakpoint and single-step your program. Note that the counter variable is displayed in the
variables window which will tell you instantly how many more iterations of your loop remain.

41
LABCENTER ELECTRONICS LTD.

TUTORIAL 5: SCHEMATIC BREADBOARD

Introduction
So far in all of the tutorials we have used pre-existing Arduino shields or Grove modules for the
hardware. There is however nothing to stop us designing our own hardware directly on the
schematic. We will cover the basics in this tutorial with a button and an LED. Note however that
there are literally thousands of parts that can be simulated in the Proteus libraries. Start by
creating a new project with a schematic, no PCB and with Firmware for Arduino Uno using the
Visual Designer Compiler for Arduino.

This tutorial is also covered by a short movie on the Labcenter Youtube channel.
Drawing on the Schematic
There is a good deal of documentation on schematic drawing in the main Proteus help files so
we'll cover only in brief here. Our task is to draw the following circuitry on the schematic;

The three main steps are pick, place and wire.

Picking
To pick from the library select the 'P' button above the parts bin on the schematic. This presents
us with the library browser. We are only interested in those parts that we can simulate so start
by checking the box to filter the results.

42
 Arduino Tutorials

We will need an LED, a 220 Ohm resistor, a pullup resistor and a button, all of which we can
find by typing keywords at the top left of the dialogue form.

To pick a part into the parts bin, simply double click on the result.

You may be asked if you want to replace the existing part. This will happen when you
pick a part already in the parts bin; for example, there is already an LED in the parts bin
because it's used in the Arduino Uno Shield.
Placing
To place a part, select it in the parts bin, left click once on the schematic, then drag into place
and left click again to drop.

If you need to rotate, you can do this with the plus and minus keys on the keyboard during
placement.

Place all of the parts approximately in position - something like the following:

43
LABCENTER ELECTRONICS LTD.

We can apply power and ground by selecting terminal mode and placing /rotating in the same
way as we did the parts.

Edit the power terminal and specify the correct voltage.

We'll also need a terminal to connect our button and our LED up to the correct pin on the
Arduino. We can use default terminals for this.

44
 Arduino Tutorials

It is here that the hardware and the firmware designs start to merge. The best way to wait for a
button press in firmware is via a pin change interrupt. This means however that we need to
connect the button to a pin on the Arduino for which a pin change interrupt is available. On the
Uno we can use IO2 for this and can connect the LED to any available IO pin.

You want it to look like the one below (without the wires at this stage).

45
LABCENTER ELECTRONICS LTD.

Wiring
Wiring on the schematic is point to point. First, hover the mouse over a pin until the cursor turns
green and then left click

Next, move the mouse to the destination pin/wire until the cursor turns green again.

Left click the mouse again to complete the wire.

After wiring is complete your schematic should look like the following.

46
 Arduino Tutorials

Remember the two terminals with the same name on the schematic have an 'invisible
wire' between them so by wiring the button to a terminal called IO2 we have actually
connected it to the IO2 pin on the Arduino chip.

Designing our Program

Everything we have done so far is hardware design. The program design itself takes place on
the Visual Designer tab. Unlike our other tutorials we don't have any external peripheral
methods in the project tree so we will have to drive the electronics directly using the CPU
methods.

We'll start by dragging and dropping the pin change interrupt routine in to the Setup routine.

47
LABCENTER ELECTRONICS LTD.

Now, there are two available interrupt pins on the Uno but we need to select INT0 because we
wired the button onto IO2.

Similarly, we need to set the interrupt to trip on a falling edge because we wired the button to
pull low when pressed.

Now we need to handle the interrupt event. Drag and drop an event block onto the Flowchart
Editor and edit. Give a sensible name and then specify the trigger as INT0.

We are going to turn on an LED when the button was pressed so we need to write out a logic
high on one of the IO lines. Specifically, it needs to be IO9 because that's where we wired the
LED on the schematic.

48
 Arduino Tutorials

Start by setting the pin to be an output pin. We can do this directly in the Setup routine by
dragging a pinMode routine on to the Flowline.

Then drag and drop the digitalWrite method into the interrupt handler, name the pin and set the
state to true.

That's it. Press play to simulate, switch to the schematic tab and press the button to test.

To bring an area of the schematic into the Visual Designer we need to specify it as an Active
Popup. To do this, stop the simulation, select Active Popup mode and drag a box with the left
mouse around the components of interest.

49
LABCENTER ELECTRONICS LTD.

This time, when you press play you can test in Visual Designer via the Active Popups. It's a
matter of preference in this case but, when debugging, it's often very useful to be able to see
the circuit at the same time.

You can easily add a few blocks to change the program into a toggle or continue with
developing the hardware on the schematic.
Your Flowchart project should finally look something like the following:

Interrupts are really useful but be aware that in the Arduino environment you are limited in
what you can do. For example, attempting to write to an LCD inside an interrupt routine
will simply fail because the Arduino stack for writing to the LCD itself uses interrupts.
Caution is required.

50