mobile menu
About MCS
Solutions
Try a Demo
MyConnection Server
BCS
Information

Create a Custom User Interface

Build a custom test interface using JavaScript, HTML, and CSS with callbacks to manage the user experience.

Overview

Interfaces like this can be built with some basic knowledge of JavaScript, HTML, and CSS.

This tutorial walks through the steps required to create a custom user interface by manipulating the test definition directly in the HTML. This includes callbacks to manage the user experience during and after the test.

Step 1: Canvas

The test uses a <canvas> HTML element that needs to be defined in the HTML page where the test will run.

The canvas element would usually hold the default user interface. To build a custom interface, the canvas will be hidden. Place the div defined below into the HTML page; the location does not matter.

<div id="canvas-container"></div>

Create a JavaScript file and include it in the HTML page. Then add this variable to the JavaScript file.

Including a JavaScript file: Create a new text file and rename the extension to .js. Reference this file in the <head> section of the HTML page so it loads when the page loads.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="yourfile.js"></script>
<title>Page Title</title>
</head>
<body>
</body>
</html>
var canvastags = '<canvas id="canvs3" style="background-color:#F0F0F0;"></canvas>';

This will be referenced later in the tutorial.

Step 2: Test Parameters

The next step is to define the test parameters. First define the variable below in the external JavaScript file.

var m_applet_params = '';

Now create a JavaScript function that will be called when the test starts. The test definition will be placed in this function. Any customization to the test parameters can be done here, as they must be in place before the boot code is called.

function startTest() {

m_applet_params = '<applet name="mcs" codebase="" width="0" height="0">\
    <param name="testspecid" value="-1">\
    <param name="config" value="default">\
    <param name="autostart" value="yes">\
    <param name="js" value="testFinished()">\
    <param name="js-prog" value="progress($PROGRESS$)">\
    </applet>';

}

Parameter definitions:

  • codebase - Location of the MCS test code. If left blank, the test must be hosted by MCS. If hosting on a third-party server, set the codebase to point to MCS or a Satellite IP/URL.
  • testspecid - Defines the test to run. -1 is a default VoIP test.
  • config - Defines the test interface settings to use. Required but not used for custom UI.
  • autostart - The test will auto-start once it loads. Required for custom UI tests.
  • js - testFinished() will be called at the end of the test.
  • js-prog - Test progress is passed to progress() as the test progresses.

These parameters, along with others, can be found in detail here.

Step 3: Boot Code

Add the code below to the startTest() function defined in step 2. The code has two purposes: implement the canvas tags shown in step 1, and include the boot code (boot.lib) in the HTML page programmatically. When this occurs, the test will start the load process. This is why the test parameters must be set before this is called. 

document.getElementById('canvas-container').innerHTML = canvastags;
document.getElementById('canvas-container').style.display = 'none';

var script = document.createElement('script');
script.src = "/myspeed/boot.lib";
document.getElementsByTagName('head')[0].appendChild(script);

The full function will now look like the code below.

function startTest() {

m_applet_params = '<applet name="mcs" codebase="" width="0" height="0">\
    <param name="testspecid" value="-1">\
    <param name="config" value="default">\
    <param name="autostart" value="yes">\
    <param name="js" value="testFinished()">\
    <param name="js-prog" value="progress($PROGRESS$)">\
    </applet>';

document.getElementById('canvas-container').innerHTML = canvastags;
document.getElementById('canvas-container').style.display = 'none';

var script = document.createElement('script');
script.src = "/myspeed/boot.lib";
document.getElementsByTagName('head')[0].appendChild(script);
}

Step 4: Start Link

So far the HTML page has been set up to implement the canvas and include the external JavaScript file. The JavaScript file now contains the parameter and canvas variables and a function that contains the code to set and start the test.

Next, define a link that calls the startTest() function when clicked. Place the HTML below into the HTML page.

<a href="javascript:startTest()">Click here to start the test</a>

Step 5: Test Output

As it stands, clicking the start test button will run a test. However, there will be no user feedback. The page will be blank as the test runs.

Test Errors

Place the div defined below into the HTML page to output any test errors. The ID of the div must remain as shown.

<div id="test_msg_out"></div>

Progress

In step 2, a parameter named js-prog was defined that calls a function named progress() and passes it a variable holding the test progress. Create a function called progress() in the JavaScript file.

function progress(prog) {
    document.getElementById('progress').innerHTML = prog;
}

Test End

In step 2, a parameter named js was defined that calls a function named testFinished(). Create a function called testFinished() in the JavaScript file.

function testFinished() {
    document.getElementById('end').innerHTML = "The test has finished";
}

Step 6: Hosting

In step 2, the codebase parameter was mentioned. This example is set up to be hosted on MCS itself. The files created in this tutorial need to be uploaded to the /MCS Root/www/publish directory.

Once uploaded, the files should be accessible in the browser. For example, if MCS was running on mcs.company.com, the URL would be https://mcs.company.com/myspeed/newtestpage.html.

When hosting on a third-party webserver, the codebase parameter must be updated to point to MCS or an MCS Satellite. For example, if the test was being hosted on visualware.com, the codebase parameter would be codebase="mcs.company.com".

© Visualware Inc. 2026