Creating and Publishing Third‑Party Components for Visuino

1. Introduction

Visuino is a visual programming environment for Arduino that lets users drag-and-drop components and wire them together. While Visuino ships with many built-in components, you can extend it by writing your own third-party libraries — adding new sensors, actuators, or logic blocks.

Why build third‑party components?

• Reuse and share custom hardware interfaces (e.g., specialized sensors, motor drivers).
• Encapsulate complex code in a simple drag-and-drop UI.
• Contribute to the Visuino ecosystem and help other users.

Prerequisites

• Arduino IDE installed and configured.
• Visuino (matching the version you target).
• Basic knowledge of C++ classes and Arduino wiring.

2. Installation & Discovery

Library Folder Placement

~/Arduino/libraries/MyLibrary

visuino.library Marker

In your library root, create an empty file named:

visuino.library

Visuino scans for this file to discover available component libraries.

library.properties

name=MyLibrary
version=1.0.0
author=Your Name <you@example.com>
architectures=*

3. Folder & File Layout

MyLibrary/
├── README.md               ← optional overview for users
├── library.properties      ← Arduino metadata
├── visuino.library         ← empty discovery marker
├── src/                    ← C++ headers
│   └── MyComponent.h
└── Visuino/                ← Visuino descriptors and UI assets
├── Images/
│   └── MyComponent/
│       ├── MyLibrary.TMyComponent.png
│       └── MyLibrary.TMyComponent.svg
└── MyLibrary.MyComponent.vcomp

4. Naming Conventions

Item	Pattern	Example
Library folder	MyLibrary	FinnAndreLib
Namespace in .vcomp	LibraryName::ComponentClass	FinnAndreLib::SRFlipFlop
.vcomp filename	LibraryName.ComponentGroup.vcomp	FinnAndreLib.FlipFlops.vcomp
Image subfolder	Match .vcomp ComponentGroup	Visuino/Images/FlipFlops/
Image filename	LibraryName.TClassName.png	FinnAndreLib.TSRFlipFlop.png

5. Anatomy of a .vcomp File

LibraryName : Namespace
//--------------------------------------------------------------------------
[ArduinoInclude('MyComponent.h')]
[ArduinoClass('MyLibrary::MyComponent')]
[CreateName('MyComp')]
[Name('My Custom Component')]
[ArduinoInit]
[ArduinoStart]
[ArduinoLoopBegin]
[ArduinoLoopEnd]
+TMyComponent : TArduinoComponent
InputPin   : TOWArduinoDigitalSinkPin
OutputPin  : TOWArduinoDigitalSourcePin
AnalogOut  : TOWArduinoAnalogSourcePin
StringIn   : TOWArduinoStringSinkPin
CountOut   : TOWArduinoIntegerSourcePin
[ArduinoFlexibleVariable]
Threshold  : Integer = 10
;
//--------------------------------------------------------------------------
; // end of namespace

Annotation Overview

Annotation	Description
[ArduinoInclude]	Header to include
[ArduinoClass]	Full C++ class path
[CreateName]	Internal Visuino ID
[Name]	Palette display name
[ArduinoInit]	Triggers SystemInit() during setup()
[ArduinoStart]	Calls SystemStart() after init()
[ArduinoLoopBegin]	Runs SystemLoopBegin() at loop start()
[ArduinoLoopEnd]	Runs SystemLoopEnd() at loop end()
[ArduinoFlexibleVariable]	Editable property with default value

6. Example Header File ( MyComponent.h )

namespace MyLibrary
{
template <
typename T_OutputPin,
typename T_AnalogOutPin,
typename T_CountOutPin
> class FinnPulse :
public T_OutputPin,
public T_AnalogOutPin,
public T_CountOutPin
{
_V_PIN_( OutputPin )
_V_PIN_( AnalogOutPin )
_V_PIN_( CountOutPin )
public:
bool extvalue = false;
int count = 0;
inline void SystemInit() {
count = 0;
}
inline void SystemStart() {
}
inline void SystemLoopBegin() {
T_OutputPin::SetPinValue(extvalue);
T_AnalogOutPin::SetPinValue(extvalue ? 0.9f : 0.0f);
T_CountOutPin::SetPinValue(count);
}
inline void SystemLoopEnd() {
}
inline void InputPin_o_Receive(void* _Data) {
extvalue = *(bool*)_Data;
if (extvalue) count++;
}
inline void StringIn_o_Receive(void* _Data) {}
};
}

7. Images & UI Assets

Organize your icon files under the Visuino/Images/ directory. Visuino expects the following sizes and formats:

• Palette icons: 24×24 or 32×32 px (PNG)
• Thumbnails: 64×64 or 128×128 px (PNG or SVG)

Naming should follow:

LibraryName.TClassName.png

Example structure:

Visuino/
└── Images/
└── FlipFlops/
├── FinnAndreLib.TArduinoSRFlipFlop.png
└── FinnAndreLib.TArduinoSRFlipFlop.svg

8. Building & Testing

1. Launch Visuino and let it scan for new libraries.
2. Create a new project and drag your component into the workspace.
3. Connect pins between components.
4. Click Generate Arduino Code to inspect the output.
5. Compile and upload from the Arduino IDE to verify functionality.

9. Publishing Your Library

1. Increment version in library.properties (e.g., version=1.1.0 ).
2. Zip your library folder: zip -r MyLibrary.zip MyLibrary/
3. Create a GitHub release and tag the version.
4. Include a README.md with usage examples and documentation.
5. Submit to the Arduino Library Manager, if desired.

10. Appendix & References

To debug discovery issues, in Visuino go to Help → Show Logs and inspect scanning output.

Explore existing .vcomp files in the installation folder (e.g., Mitov/Visuino/ ) for examples.

Visit the Visuino Official Website for more info.