Web app

Web app

Summary

This recipe shows how to create a web app that communicates with the VisionAppster Engine. As an example server app, the simple edge detection app created in the Builder tutorial will be used. The technique is however generally applicable. The provided web app template can be used with many types of API objects with minimal modifications.

If you followed the tutorial, you can download and install the web app package, and it should work out of the box. If not, the server app package is also provided here for completeness.

Downloads

Detailed description

As the first step, install both of the provided .vapkg files to your local Engine. Some of the links below point to the installed packages.

A web app consists of at least one HTML file. The front page of the app must be called index.html. The full contents of the file are as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css" media="all">
    <script src="/VisionAppster.js"></script>
    <script src="webapp.js"></script>
    <title>Web app template</title>
    <link href="/style/fonts.css" rel="stylesheet">
  </head>
  <body>
    <div class="header row">
      <ul id="sourceList" class="menuList">
        <li><img src="/visionappster.png"></li>
        <li><a id="webcamOption">Webcam</a></li>
        <li>
          <input id="imageInput" style="display:none;" type="file" accept="*.png,*.jpg,*.jpeg"/>
          <a id="imageFileOption">Image file...</a>
        </li>
        <li><a id="textOption">Text...</a></li>
      </ul>
    </div>
    <div class="row content">
      <div id="resultContainer">
        <div class="display">
          <video id="video" autoplay playsinline></video>
          <canvas id="sourceImage" width="500" height="500"></canvas>
        </div>
        <div class="display">
          <canvas id="resultImage" class="result" width="500" height="500"></canvas>
          <table id="resultTable">
            <thead id="resultTableHead">
            </thead>
            <tbody id="resultTableBody">
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>

Since the web app is intended to be installed to the VisionAppster Engine, it makes references to resources available on the built-in web server instead of including everything in the app:

In addition, the page links to two files that are included in the app itself:

You are encouraged to look at the source code. It works with most API functions that have a single input parameter and a single output parameter. If your API has a different structure, you need to modify the code.

The only piece of code that usually needs to be modified is at the top:

const config = {
  appId: 'com.example.edgedetector/1',
  apiFunction: 'sendFileName',
  resultSignal: 'edges',
  resultHandler: displayImage,
  binaryImage: true
};

The configurable parameters are as follows:

appId
The full component ID of your app.
apiFunction
The name of the API function to call. This may be either a tool function or a single input function. In the latter case, resultSignal is needed to receive processing results. Note that this template only supports functions that take a single argument.
resultSignal
The name the signal that passes processing results. Not needed with tool functions.
resultHandler

The function that displays the processing result. You need to pick the correct function depending on the type of the result. The template provides the following display functions:

displayImage
Draws an output image on the web page.
displayTable
Creates an HTML table out of a va.Table or va.Matrix.
displayText
Converts any object to text and displays it as such.
displayBoundingBoxes
Draws bounding boxes on top of the source image.

To build an installable web app component, you need to store the three files (index.html, webapp.js and style.css) into any directory. In the Builder, select File, Package a folder... and select the directory. Type in the component ID (com.example.edgedetector.web) and version number (1.0.0), select the "Remote" section and click "Upload".

Uploading a web app component directly to a remote Engine.

Uploading a web app component directly to a remote Engine.

Browse to the components page and install the web app to your local Engine.

Components page after installing two packages.

Components page after installing two packages.

The apps page should now look like this:

The apps page contains two apps.

The apps page contains two apps.

Click on the com.example.edgedetector.web/1/ link to open the web app. If the server isn't running, the web app will start it automatically.

The input to the edge detector app is a file name. Use the "Text..." link at the top to send a text string to the API function.

Enter the full path to a file.

Enter the full path to a file.

The result of the edge detector is a binary image, which is why binaryImage was specified in the configuration. As a result, the gray levels of the output image will be scaled from [0, 1] to [0, 255].

The web app template has a placeholder for an input image if it comes from the browser. In this case, it will be empty as the app reads the image from a file on the server side. The result:

Pena's gorgeous contours.

Pena's gorgeous contours.