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

Create a custom user interface

You are here
MCS Home
Help Center
Tutorials
Testing
Create a custom user interface

Overview

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

This tutorial will walk through the steps required to create a custom user interface by manipulating the test definition directly in the HTML.

This includes call backs to manage the user experience during and after the test.

Step 1: Canvas

The test uses a <canvas> HTML element and this needs to be defined in the HTML page where the test is to run.

The canvas element would usually hold the default user interface. So, the canvas will be hidden in order to build the custom interface. Place the div defined below into your HTML page, the location of the div does not matter.

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

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

Creating a JavaScript file is as simple as creating a new text file and renaming the extension to ".js", instead of ".txt". You can then reference this file in the <head> section of the HTML page so it loads when the page loads.

An example of what this would look like is below.

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

This will be referenced later on in the tutorial.

Step 2: Test Parameters

The next step is to define the test parameters. To do this first define the variable below in the external JavaScript file.

var m_applet_params = '';

Now create a JavaScript function, which will be called when the test is to start. 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, which will be documented later.

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>';
	
	/*
	codebase :: defines the 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 as this is a 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
	*/
}

The parameter definitions above, 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, one is to implement the canvas tags shown in step 1. The second is to 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 have to be set before this is called.

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

var script = document.createElement('script'); //create script element
script.src = "/myspeed/boot.lib"; //point script element to the boot code, this example is for MCS hosting
document.getElementsByTagName('head')[0].appendChild(script); //adds the script element to the HTML page, which initiates the load

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 up is to define a link that, when clicked, calls the startTest() function.

Placing the HTML below into the HTML page will do just that.

<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 to speak of. 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. It's important that the ID of the div remains as it is shown below.

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

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

function progress(prog) {	
	//this code would output the progress of the test to an HTML div with an ID of progress.
	document.getElementById('progress').innerHTML = prog; 
}
Test End

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

function testFinished() {	
	//this code would output a message to an element with an ID of end.
	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 that is done they 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 would have to be updated to point to MCS or MCS Satellite. So, if the test was being hosted on visualware.com the codebase parameter would be codebase="mcs.company.com".

© Visualware Inc. 2024