ARDUINO: THE VISUINO PROJECT - PART 3 PAGE - 1/16

CREATE YOUR OWN COMPONENTS FOR VISUINO

BY BOIAN MITOV The C++ code is the one that compiles and
In the previous 2 articles, we introduced Visuino – a executes in Arduino. The Delphi component is
new graphical development environment for Arduino, almost just an empty shell, that has some
and we demonstrated how you can use Delphi and attributes needed to describe the capabilities of
the upcoming CommunicationLab from Mitov
the C++ code. From that point of view, in most
Software to communicate with Arduino, and get the
data from its sensors into your applications. cases the Delphi code is just a simple description
It surely is a lot of fun to use Visuino and Delphi to of the component. In some cases however, some
talk to Arduino, but it would be even bigger fun to be more complex code generation logic can be
able to create your own components for Visuino and implemented in the Delphi component, to control
use them in your projects or share them with other the way the Arduino code is generated.
developers, the same way as you do in Delphi.
When I started developing Visuino, one of my
The Components SDK after installation, creates
early goals was to develop it as open and expandable
platform. Since the underlying OpenWire Studio
its own folder structure. Currently, the typical
already was developed around the concept of installation will create “OpenWire” and “LabPacks”
installable components, and packages, Visuino sub-folders under the Delphi main folder.
inherited this architecture. In the “LabPacks\Mitov\Arduino\Examples”
From the beginning, all components in Visuino folder, there is an example of component package
were parts of installable packages, and new for Visuino.
components could be added, by simply installing new
packages similar way as new components can be
In the C:\Program Files
installed in Delphi.
“LabPacks\Mitov\Arduino\
As Visuino approached its release version, I also
developed and released a Beta of the Visuino Examples\library” folder is where the C++
Components development SDK. The SDK is available code for Arduino is located.
for download from the Visuino Google+ community -
https://plus.google.com/ In the “LabPacks\Mitov\Arduino\
communities/116125623808250792822. Examples\XE8” folder, is the
In this article you will learn how you can develop your VisuinoExampleProjectGroup.groupproj
own components for Visuino. project group, containing the projects for the
example Visuino package.

START DEVELOPING VISUINO COMPONENTS If you open the project group, you will discover
Before you start developing Visuino components, that it contains 2 projects.
you will need to install Visuino and the Visuino
components development SDK. Visuino.ExamplePackage.dproj
The SDK currently requires Delphi XE8 to be and
used for the component development. Visuino.ExamplePackage.Design.dproj.
The typical Visuino installation will place the
executable under C:\Program Visuino.ExamplePackage.dproj contains the
Files\Mitov\Visuino or C:\Program Files demo components, and the
(x86)\Mitov\Visuino, depending on the Visuino.ExamplePackage.Design.dproj
version of Windows you use. contains the component registration code.
The Visuino directory will contain the
executable Visuino.exe . There is also a Demos
sub-directory. There is another typically empty
directory called “Component Packages”.
This is the directory where additional component
packages can be installed.In addition to this folder
structure, Visuino also instals C++ Arduino files into
“Mitov” sub-directory of the Arduino library folder.
Typically the Arduino libraries folder is
“My Documents\Arduino\libraries”.
Each Visuino component consists of 2 parts.
The Arduino C++ c ode in the
“libraries\Mitov” directory,
or another “libraries\*” sub-directory,
and a corresponding Delphi component in a
package in the “Component Packages”
directory.

12 Issue Nr 5 2015 BLAISE PASCAL MAGAZINE

ARDUINO: THE VISUINO PROJECT - PART 3 PAGE - 2/16
CREATE YOUR OWN COMPONENTS FOR VISUINO

You can compile the project group,

by selecting |Project|Build All Projects| .

After compiling the project group, in the

“LabPacks\Mitov\Arduino\Examples\XE8\Win32\Debug” will contain the compiled packages. To
install the example components package, you can copy the *.bpl files into the “Component Packages”
directory of Visuino.
If you run Visuino, you will see that a new “Quadratic Function Example” component is available:

Issue Nr 5 2015 BLAISE PASCAL MAGAZINE 13

ARDUINO: THE VISUINO PROJECT - PART 3 PAGE - 3/16
CREATE YOUR OWN COMPONENTS FOR VISUINO

If you press F9 in Visuino, it will generate the Arduino code.

The reason is that the Arduino IDE

can't find the
“Visuino_Example_Quadratic.h”
file. To make it available to the IDE, If you try to compile the code in the Arduino IDE,
you need to copy the file from you will receive the error:
“LabPacks\Mitov\Arduino\
Examples\library” to a sub-
directory of
“MyDocuments\Arduino\
libraries”. You can create a
directory called
“VisuinoExample” - “My
Documents\Arduino\librar
ies\VisuinoExample” and
copy the file there. To make the
Arduino IDE discover the directory,
you will need to close and restart it.
The easiest way is by again
pressing the F9 in Visuino after
closing the Arduino IDE .

14
6 Issue Nr 4 2015 BLAISE PASCAL MAGAZINE
ARDUINO: THE VISUINO PROJECT - PART 3 PAGE - 4/16
CREATE YOUR OWN COMPONENTS FOR VISUINO

THIS TIME IF YOU TRY TO COMPILE THE CODE, THERE WILL BE NO ERRORS:

Now after you have learned

how to compile and deploy
the example packages and
components from the Visuino
components SDK, it is time to
learn how to create packages
and components from
scratch.

Start by creating a new Delphi

package:

Save the package as Visuino.MyVisuinoPackage.

Issue Nr 5 2015 BLAISE PASCAL MAGAZINE 15

ARDUINO: THE VISUINO PROJECT - PART 3 PAGE - 5/16
CREATE YOUR OWN COMPONENTS FOR VISUINO

Add a second Delphi package to the project group:

Save this one as Visuino.MyVisuinoPackage.Design.

Save the project group as MyVisuinoProjectGroup

16 Issue Nr 5 2015 BLAISE PASCAL MAGAZINE

ARDUINO: THE VISUINO PROJECT - PART 3 PAGE - 6/16
CREATE YOUR OWN COMPONENTS FOR VISUINO
Open the project options for the Visuino.MyVisuinoPackage, select as Target “All configurations”.
In the Description settings page, type a description – as example “My Visuino Package”, and set the
package to be “Runtime only”:

In the “Delphi Compiler” page set: “DCP output directory” and “Package output
directory” to : .\$(Platform)\$(Config)

And the “Search Path” to:

.\$(Platform)\$(Config);$(BDS)\LabPacks\Mitov;$(BDS)\LabPacks\Mitov\Arduino;
$(BDS)\LabPacks\Mitov\XE8\$(Platform)\$(Config);$(BDS)\LabPacks\Mitov\Arduino\XE8\$(Plat
form)\$(Config)

Issue Nr 5 2015 BLAISE PASCAL MAGAZINE 17

 ARDUINO: THE VISUINO PROJECT - PART 3 PAGE - 7/16
CREATE YOUR OWN COMPONENTS FOR VISUINO

Do the same settings for the Visuino.MyVisuinoPackage.Design.

You should set a different description, as example “My Visuino
Design Package” :

Right-click on the Visuino.MyVisuinoPackage, and select “View Source”.

18 Issue Nr 5 2015 BLAISE PASCAL MAGAZINE

 ARDUINO: THE VISUINO PROJECT - PART 3 PAGE - 8/16
CREATE YOUR OWN COMPONENTS FOR VISUINO

Add the following packages in the

“requires” section:

requires
rtl,
vcl,
OpenWirePkgDXE8,
Mitov_Runtime_DXE8,
OpenWireBindingPkgDXE8,
SignalLabBasicPkgDXE8,
CommunicationLabBasicPkgDXE8,
Embedded.Arduino.Basic.DXE8;

Do the same for the Visuino.MyVisuinoPackage.Design,

however this time add to the “requires” section:

requires
rtl,
vcl,
OpenWirePkgDXE8,
Mitov_Runtime_DXE8,
OpenWireBindingPkgDXE8,
SignalLabBasicPkgDXE8,
CommunicationLabBasicPkgDXE8,
Mitov.Embedded.Arduino.Basic.DXE8,
Visuino.MyVisuinoPackage;

Now that you have your packages ready, you can start
working on your component. You will add component
almost identical to the one in the included example, so
you can also copy and paste some of the code from
there.
Add new unit to the Visuino.MyVisuinoPackage:

Issue Nr 5 2015 BLAISE PASCAL MAGAZINE 19

 ARDUINO: THE VISUINO PROJECT - PART 3 PAGE - 9/16
CREATE YOUR OWN COMPONENTS FOR VISUINO
Save the new unit as Visuino.MyComponent. Add a unit to the
In the unit add: Visuino.MyVisuinoPackage.Design,
unit Visuino . MyComponent ; and save it as Visuino.MyPackage.Register. In
this unit add:
interface
unit Visuino.MyPackage.Register;
uses interface
System.Classes,Mitov.Design.Components,
Mitov.Arduino.Types; procedure Register();
implementation
type
TVisuinoMyComponent = uses Visuino.MyComponent;
class( TArduinoCommonAnalogFilter )
end;
procedure Register();
begin
Visuino.MyComponent.RegisterPkg();
procedure RegisterPkg(); end;
end.
implementation

procedure RegisterPkg(); When Visuino loads the

begin Visuino.MyVisuinoPackage.Design
RegisterComponents(
[ package it will call the Register() method.
TVisuinoMyComponent The Register method will call
] Visuino.MyComponent.RegisterPkg();
);
RegisterPkg(); will call the
end;
RegisterComponents, and will pass array of
end. components to be registered in the Visuino
toolbar. If you install the packages in Visuino and
run it. You will see that our new component is
available:

20 Issue Nr 5 2015 BLAISE PASCAL MAGAZINE

 ARDUINO: THE VISUINO PROJECT - PART 3 PAGE 10/16
CREATE YOUR OWN COMPONENTS FOR VISUINO

The component however is not registered in any To add the desired user friendly names,
categories, does not have image, and does not add Mitov.Attributes to the uses, and
have user friendly name. Lets start fixing this. [CreateName( 'MyVisuinoComponent' )],
Add Mitov.Arduino.Categories.Basic and
to the uses clause, and [Category ( [Name( 'My First Visuino Component'
TArduinoMathFilterToolbarCategory )] )]
attribute to the component: attributes to the component:
uses System . Classes , Mitov . Design . Components ,
System . Classes , Mitov . Design . Components , Mitov . Arduino . Types ,
Mitov . Arduino . Types , Mitov.Arduino.Categories.Basic,
Mitov . Arduino . Categories . Basic ; Mitov.Attributes;

type type
[ Category ( TArduinoMathFilterToolbarCategory )] [Category(TArduinoMathFilterToolbarCategory)]
TVisuinoMyComponent = [CreateName( 'MyVisuinoComponent' )]
class ( TArduinoCommonAnalogFilter ) [Name( 'My First Visuino Component' )]
end ; TVisuinoMyComponent =
class( TArduinoCommonAnalogFilter )
end;

This will place the component in the

Arduino/Filters/Math subcategory ,
and the associated alternative categories. You can also add image for the component.
To do that, you need to create an empty
Visuino.MyComponent.res resource file, and add
32x32 pixels PNG image as resource named
“TVISUINOMYCOMPONENT” - upper case of our
component name as declared in the code. I usually
use Visual Studio to create and edit the resource
files, but you can use any other resource editor.

Issue Nr 5 2015 BLAISE PASCAL MAGAZINE 21

ARDUINO: THE VISUINO PROJECT - PART 3 PAGE 11/16
CREATE YOUR OWN COMPONENTS FOR VISUINO
You can also open and explore the This is just the code to have an empty header file
“Visuino.QuadraticFunctionExample.res” that has define preventing it from being included
included in the SDK example. multiple times, and includes the Mitov.h header
To use the resource in the component, add: file that contains the Visuino base classes.
Next you will create a namespace where you can
unit Visuino . MyComponent ;
put our component. This step is not really
{$R *.res} required, but is highly recommended to avoid
conflicts of multiple components from multiple
to the Visuino.MyComponent.pas file. vendors with the same name. Use your own name,
Now if you rebuild, and deploy the package and or company name for the namespace, or
run Visuino, you will see that the something else that is likely to be unique.
component has the new names and image,
and appears in the right categories:

I mentioned earlier that each Visuino component #ifndef _VISUINO_MY_COMPONENT_h

has 2 parts. The Arduino C++ code, and its visual #define _VISUINO_MY_COMPONENT_h
representation in Visuino. So far you have created
a visual representation of such Arduino #include <Mitov.h>
component. Now lets write the C++ code. namespace MyVisuinoComponents
Under “Arduino\libraries” create “MyExample” {
folder: }
“My documents\Arduino\libraries\MyExample”.
In this folder create a new .h file #endif
Visuino_MyComponent.h, and open the file to edit
it as example in RAD Studio, Visual Studio, In the namespace now you can declare your
Notepad or other editor, and write the minimal component:
code necessary:
namespace MyVisuinoComponents
#ifndef _VISUINO_MY_COMPONENT_h {
#define _VISUINO_MY_COMPONENT_h class MyComponent : public Mitov::CommonEnableFilter
{
#include <Mitov.h> typedef Mitov::CommonEnableFilter inherited;
};
#endif }

22 Issue Nr 5 2015 BLAISE PASCAL MAGAZINE

 ARDUINO: THE VISUINO PROJECT - PART 3 PAGE 12/16
CREATE YOUR OWN COMPONENTS FOR VISUINO

Now that you have a rudimentary Visuino This is enough to generate the proper code for
component that you can test, go back to the Arduino, however the MyComponent inherits
Delphi code, and instruct it how to generate code from Mitov::CommonEnableFilter which
for the component. contains abstract method virtual void
First you need to specify the header file that DoReceive( void *_Data ).
needs to be included in the Arduino project when You need to implement this method in your C++
you use the component. In this case code, and this is where our data processing will be
Visuino_MyComponent.h. You can do this by done. For now you can just do nothing with the
adding [ArduinoInclude( data, and send it to the output of the filter without
'Visuino_MyComponent' )] attribute. a change:
Second you need to specify the namespace and class MyComponent : public Mitov::CommonEnableFilter
the name of the C++ component. You can do this {
typedef Mitov::CommonEnableFilter inherited;
by adding [ArduinoComponent(
'MyVisuinoComponents::MyComponent' protected:
)] attribute: virtual void DoReceive( void *_Data )
{
type OutputPin.Notify( _Data );
[ArduinoInclude( 'Visuino_MyComponent' )] }
[Category( TArduinoMathFilterToolbarCategory )]
};
[ArduinoComponent( 'MyVisuinoComponents::MyComponent' )]
[CreateName( 'MyVisuinoComponent' )]
[Name( 'My First Visuino Component' )]
TVisuinoMyComponent = class( TArduinoCommonAnalogFilter
) DoReceive receives a pointer to the data,
end; and it just calls OutputPin.Notify passing
the same pointer to the data to be sent to
the next filter in the chain. If you generate
the code, and compile it in
the Arduino IDE, it will
succeed: see figure at left.

Your first component is

done, but it does not do
much.
To be useful it needs to
perform some processing
over the data.
Now you will implement
the same quadratic function
as implemented in the
SDK's example,
but you can easily
implement on your own
any other function you can
think of.

Issue Nr 5 2015 BLAISE PASCAL MAGAZINE 23

 ARDUINO: THE VISUINO PROJECT - PART 3 PAGE 13/16
CREATE YOUR OWN COMPONENTS FOR VISUINO

For the quadratic function you will need 3 properties containing the 3 coefficients A, B and C.
So lets declare them in the C++ code first:
class MyComponent : public Mitov :: CommonEnableFilter
{
typedef Mitov::CommonEnableFilter inherited;
public:
float A,B,C;

Next, you need to initialize them with their default values in the constructor:
class MyComponent : public Mitov :: CommonEnableFilter
{
typedef Mitov::CommonEnableFilter inherited;

public:
float A,B,C;

protected:
virtual void DoReceive( void *_Data )
{
OutputPin.Notify( _Data );
}
public:
MyComponent() :
A( 1.0 ), B( 2.0 ), C( 3.0 )
{
}
};

Finally you need to implement the proper computation in the DoReceive:

protected:
virtual void DoReceive( void *_Data )
{
if( Enabled )
{
float AValue = *(float *)_Data;
AValue = AValue * AValue * A + AValue * B + C;
OutputPin.Notify( &AValue );
}

else
OutputPin.Notify( _Data );

In this case if the component is Enabled it will obtain the floating point value from the _Data pointer,
use it for the calculation, and then send the result trough the OutputPin .
If the component is not Enabled it will just send the data trough the OutputPin without changes.
The C++ code for the component is ready. Now lets add the properties in the Delphi code.

First you need to declare the 3 fields that will hold the properties:
TVisuinoMyComponent = class ( TArduinoCommonAnalogFilter )
protected
FA : Single; FB : Single; FC : Single;

end;

Next you need to declare the 3 properties, and specify the default values. The Visuino
component framework will initialize the fields automatically with the default values:

24 Issue Nr 5 2015 BLAISE PASCAL MAGAZINE

 ARDUINO: THE VISUINO PROJECT - PART 3 PAGE 14/16
CREATE YOUR OWN COMPONENTS FOR VISUINO
TVisuinoMyComponent = class ( TArduinoCommonAnalogFilter )
protected
FA : Single; FB : Single; FC : Single;

published
[DefaultSingle( 1.0 )] Your component is ready to
property A : Single read FA write FA; be used. If you deploy the
compiled *.bpl files
[DefaultSingle( 2.0 )] to the “Component
property B : Single read FB write FB;
Packages” sub-directory of
[DefaultSingle( 3.0 )] Visuino, and run Visuino,
property C : Single read FC write FC; you will have the
properties available, and
end; you can edit them:

Here is example Visuino connection diagram that you can use to test the new component:

Issue Nr 5 2015 BLAISE PASCAL MAGAZINE 25

ARDUINO: THE VISUINO PROJECT - PART 3 PAGE 15/16
CREATE YOUR OWN COMPONENTS FOR VISUINO

If you compile and upload the Arduino code as described in the previous
articles, and then connect to it with Visuino, you will see the sine wave
deformed by the quadratic function plotted in the scope:

Your component is ready, tested and operational.

There are some final improvements that you can do. At the moment the end user of the component can
set any value for the A, B and C parameters. Sometimes you want to limit that range. You can limit the
range of a property by adding the ValueRange attribute, as example like this:

[DefaultSingle( 3.0 )]
[ValueRange( -1000, 1000 )]
property C : Single read FC write FC;

You can also add a suggested smaller range that will be used in the Visuino property editor when
showing the in-place track-bar value editor, by using the DesignRange attribute like this:

[DefaultSingle( 3.0 )]
[DesignRange( -100, 100 )]
[ValueRange( -1000, 1000 )]
property C : Single read FC write FC;

If you add those attributes, rebuild and deploy the package,

in Visuino the in-place editor will offer only the -100 to 100 range:

26 Issue Nr 5 2015 BLAISE PASCAL MAGAZINE

ARDUINO: THE VISUINO PROJECT - PART 3 PAGE 16/16
CREATE YOUR OWN COMPONENTS FOR VISUINO
If you compile and upload the Arduino code as described in the
previous articles, and then connect to it with Visuino, you will see the
sine wave deformed by the quadratic function plotted in the scope:

Any attempt to also enter manually value outside We are working hard to provide more resources
the -1000 to 1000 range will fail. and information on Visuino component
If the DesignRange attribute is not present, and development, and I hope you all will have many
ValueRange is present, the track-bar will use the joyful hours playing with Visuino and creating
ValueRange instead. If none of them is present, your own components for it.
In the next Visuino article we will show you how
the track-bar will offer the full range of floating
you can connect Delphi applications and Arduino
point values. boards over internet, and how you can make
different Arduino boards talk to each other. You
CONCLUSION
will be entering the exciting world of “Internet
In this article you learned the basics of
of Things”!
creating your own Visuino components. As you
have seen, it is very easy, and can be done by
almost anyone, even with limited programming
knowledge.
The component we demonstrated is very
simple, and yet already very useful. With the
component SDK you can create much more
complex and advanced components, with many
more features. All components included in
Visuino are written using this SDK, and you can
see the power they offer. It is not possible in a
single article to cover all aspects of Visuino
component development, but this is a very
good starting point.