Visuino Third‑Party Component Manual

Welcome to the guide for creating and publishing your own third‑party components for Visuino. This manual walks you through every step—from setting up your library folder to writing .vcomp descriptors, declaring pins, organizing images, and finally packaging and releasing your component.

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

1. Library Folder Placement
   Copy your library folder into Arduino’s libraries/ directory (e.g., ~/Arduino/libraries/MyLibrary ).
2. visuino.library Marker
   In your library root, create an empty file named visuino.library . Visuino scans for this file to discover available component libraries.
3. library.properties
   Provide standard Arduino metadata: name=MyLibrary version=1.0.0 author=Your Name <you@example.com> architectures=* This file tells Arduino (and Visuino) about your library details.

3. Folder & File Layout

Your library should follow this top‑level structure:

MyLibrary/                  ← root of your library
├── README.md               ← optional overview for users
├── library.properties      ← Arduino metadata
├── visuino.library         ← empty discovery marker
├── src/                    ← C++ headers and source files
│   ├── MyComponent.h
│   └── MyComponent.cpp
└── Visuino/                ← Visuino descriptors and UI assets
├── Images/             ← component icons and thumbnails
│   └── MyComponent/    ← folder named after component group
│       ├── MyLibrary.TMyComponent.png
│       └── MyLibrary.TMyComponent.svg
└── MyLibrary.MyComponent.vcomp

• src/ : All .h and .cpp files implementing your components.
• Visuino/ : Contains every .vcomp descriptor and an Images/ subfolder.
• Images/ : Organize by component group (match .vcomp names). Filenames must include your library name.

4. Naming Conventions

Consistency is key so Visuino can link files, classes, and images correctly.

5. Anatomy of a .vcomp File

A .vcomp file describes one component (or a logical group). It uses Delphi‑style annotations to tell Visuino how to include headers, name the component, and declare pins.

LibraryName : Namespace
//---------------------------------------------------------------------------
[ArduinoInclude('MyComponent.h')]
[ArduinoClass('MyLibrary::MyComponent')]
[CreateName('MyComp')]
[Name('My Custom Component')]
+TMyComponent : TArduinoComponent
[OWPrimaryPin]
InputPin  : TOWArduinoDigitalSinkPin
[OWPrimaryPin]
OutputPin : TOWArduinoDigitalSourcePin
[ArduinoFlexibleVariable]
Threshold : Integer = 10
;
//---------------------------------------------------------------------------
; // end of namespace

• [ArduinoInclude] : Header file to include in generated code.
• [ArduinoClass] : Fully‑qualified C++ class name.
• [CreateName] : Internal Visuino identifier.
• [Name] : Display name in Visuino’s palette.
• [OWPrimaryPin] : Marks a pin exposed in the wiring view. Use Sink for inputs, Source for outputs.
• [ArduinoFlexibleVariable] : Component parameter with a default value.

6. Pin Types & Usage

Visuino supports many pin classes. Here are the most common:

Example: Integer Counter Component

[OWPrimaryPin]
CountOutput : TOWArduinoIntegerSourcePin
[OWPrimaryPin]
ResetInput  : TOWArduinoDigitalSinkPin

Wiring in Visuino: drag from a clock or button source pin into ResetInput , then wire CountOutput to a display or logic block.

7. Images & UI Assets

• Icon size: 24×24 or 32×32 px for palette icons
• Preview: 64×64 or 128×128 px for thumbnails
• Formats: .png or .svg
• Naming: Must start with your library name and the class name, e.g. MyLibrary.TMyComponent.png .
• Folder organization: Under Visuino/Images/ComponentGroup/ .

Example:

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

8. Building & Testing

1. Compile in Arduino IDE: open any .ino that uses your component and verify it compiles.
2. Run Visuino, refresh the component list, and confirm your component appears in the palette.
3. Drag & wire in a new project; generate code and inspect it for correct includes and pin hookups.

9. Publishing Your Library

1. Versioning: update library.properties with a new version= each release.
2. Package as ZIP: include all files and folders at the root level.
3. GitHub: tag releases, include a README.md with usage examples.
4. Share: distribute via your website, GitHub, or Arduino Library Manager.

10. Appendix & References

• Core Visuino SDK: inspect built‑in .vcomp files under Mitov/Visuino/ for reference.
• Troubleshooting: check Visuino’s Logs (Help → Show Logs) if components don’t appear.
• Further Reading: Visuino online documentation and community forum.

Now you’re ready to start building custom components for Visuino! Happy coding and sharing.