Creating components

To be able to distribute your apps through the VisionAppster Store or install them to the Engine, you need to create a component and store it in a component package.

The component package is a zip file with a known directory structure. Each component in the package is described by a component.json file. The Builder provides a user interface for creating a component package out of the current app directly. If you want to create other types of components, you need to create the directory structure manually and then use the Builder to compile the package file.

Packaging apps

We'll use the edge detector app as an example. The target is to create an app can be triggered to processed a file on the local hard drive through a REST API. The app will send the processing results as signals.

Click File, Open... and choose the directory you saved the project into. The Builder will show you the platform's file dialog, the picture below shows a Qt dialog in Linux.

Choose the directory of the project to open it.

Choose the directory of the project to open it.

As a first step, we'll give our app a component ID. The component ID will uniquely identify the app and its API. Select File, App properties... and change the auto-generated component ID to "com.example.edgedetector". If your intent is to sell or otherwise distribute the app through the Store, you need to register the component ID using your seller account.

Give the app a unique component ID.

Give the app a unique component ID.

The virtual camera the app was set up with reads images from your hard drive, which will not be accessible by the users of the app. The next step is to change this so that the name of the image file will come through an API call. Change the Camera Id parameter to "File name trigger".

Note that this will cause the processing graph to stop because there is no longer a camera from which images could be read. You can dismiss the error message by clicking "Restart now".

"File name trigger" makes the image source to treat trigger inputs as file names.

"File name trigger" makes the image source to treat trigger inputs as file names.

In the context menu of the Trigger input, select "Publish app API function" to add the input to the API object as a function.

Any connectable input can be turned into an API function.

Any connectable input can be turned into an API function.

Open the API editor to see the app's API. You'll see four entries: one function and three signals. Since we dragged two output parameters to an image display, the Builder has automatically created two signals for us. The trigger input will show up as a function paired with a signal that will be emitted whenever the function is called.

The API editor shows the public API of your app.

The API editor shows the public API of your app.

The default names of the API entries are composed of the name of the tool and the parameter name. Since the API is intended to be used as the public interface of your app, try to find descriptive names. Click the name of a signal to rename it.

We'll change the default names to sendFileName, sourceImage and edges and fileNameChanged as shown in the next picture. By convention, the names should be in camelCase, i.e. start with a lowercase letter and capitalize the first letter of subsequent words.

Make the names of API entries descriptive.

Make the names of API entries descriptive.

Close the API editor by clicking the API icon again and save it with Ctrl + s. Select File, Package this app... You'll be shown a component editor dialog. Open the "Local" section and pick a target folder. Then click "Create".

Creating a component out of an app is straightforward.

Creating a component out of an app is straightforward.

The .vapkg file you just created is ready to be installed to the Engine through the web-based management interface. Alternatively, you can upload it to a running remote engine instance directly on the "Remote" section of the dialog.

Packaging tool plugins

The Builder provides no GUI for creating the file system structure for components other than apps. But fear not, creating other types of components is still simple.

The VisionAppster SDK comes with a ready-to-build tool plugin that wraps some OpenCV functions. As a prerequisite, you should build that plugin as instructed here.

Depending on your platform, the build process will create either libmyopencv.so or myopencv.dll in sdk/examles/opencv/build. To make the plugin library a component, you need to create a specially named directory and put the file there.

  • Windows

    md myopencv-1\windows-x86_64
    copy sdk\examples\opencv\build\myopencv.dll myopencv-1\windows-x86_64
  • Linux

    mkdir -p myopencv-1/linux-x86_64
    cp sdk/examples/opencv/build/libmyopencv.so myopencv-1/linux-x86_64

When building component packages, directory names mostly don't matter. Binary plugins must however be put under a path that includes one of the known architecture identifiers. To make the component work on multiple architectures, it is possible to include many such paths.

Known architecture identifiers are:

  • windows-x86_64
  • windows-x86
  • linux-x86_64
  • linux-x86
  • linux-arm
  • linux-arm64
  • macos-x86_64

The final step is to create a component package in the builder. Click File, Package a folder... Select the myopencv-1 directory.

Once you have the files, you just need to fill in component ID and version.

Once you have the files, you just need to fill in component ID and version.

Make sure to enter the correct component ID (com.example.opencv) and version number (1.0.0). Then pick a target directory in the "Local" section and click "Create". Done.