HTML Screensaver Applications on the MiVoice Office 250

Posted by Paul Wilson on 07 September, 2015

Mitel 5300 series IP phones have the capability to run HTML based applications and one of the most commonly requested applications is the Screensaver. This step-by-step guide describes how to create, upload and activate an HTML screensaver application for Mitel 5300 series IP phones on the MiVoice Office 250.

To build a screensaver application for the Mitel 5300 series IP phones we need to use the Mitel HTML Toolkit.

Step 1. Get hold of a copy of the Mitel HTML Toolkit

The Mitel HTML Toolkit can be downloaded from the software downloads section of Mitel On-line and is currently on version 2.2. If you don’t have access to Mitel On-line you may need to speak to your Mitel reseller.

The HTML Toolkit is downloaded as a .ZIP file so you’ll need to extract it and run the HTMLToolKit_Setup.exe file to install it onto your PC. Once installed a new entry should appear in the Windows / Start menu under Mitel:

html-toolkit

Full documentation for the HTML Toolkit can be found in the Documentation folder and sample applications can be found in the Developer Resources folder.

Step 2. Modify the sample screensaver application

Finding the sample HTML applications

Using Windows Explorer navigate to the sample screensaver application. Our example will use the sample screensaver for a Mitel 5360 IP Phone:

C:UsersPublicMitelHTMLToolKitDeveloperResourcesSample ApplicationsScreen Saver Application5360

It may be useful to make a copy of the folder containing the sample screensaver rather than editing it directly. The copy can be saved anywhere on your computer; it doesn’t have to be in the DeveloperResources folder.

screensaver-images

Screensaver Images

As you can see in the screenshot above, the sample screensaver application contains three JPG images. When active, the screensaver application will choose one of the images to display on the phone at random then cycle through them once every minute until the screensaver is interrupted by lifting the handset or tapping the screen on the 5360.

The screensaver image files are sized as 480 pixels x 800 pixels at 72 pixels per inch and saved as a .JPG file. The name of the image files is case sensitive.

For our example, use an image editing application such as Adobe Photoshop or Paint .NET to create an image sized at 480 x 800. The image could contain your company logo on a suitably coloured background like our example below:

screensaver-image

Save the new image.

Our example will be called denwa-1.jpg.

Rename the screensaver.html file

The next step is to rename the screensaver.html file to screensaver.htm.

If the screensaver application is uploaded to the MiVoice Office 250 without changing .html to .htm then the screensaver will not work. This is how the file should appear once it has been renamed:

htm-screensaver

Edit the screensaver.htm file

Now we need to make a few changes to the screensaver.htm file so that it includes our new screensaver image file. The screensaver.htm file can be edited in most text editors including the Windows default Notepad.exe. You may find using a more advanced editor such as Notepad++ is beneficial because it will highlight and format the HTML tags in different colours and make editing the file a little easier. Here’s an example using Notepad++:

edit-screensaver

The first change we need to make to the screensaver.htm file is to remove the comments section from the beginning of the file. In the image above the comment section is in green text. Once you’ve removed the comments, the first line should read:

<html>

Next, look for the line that reads:

var images = [ "Mitel_Web_Brand.JPG", "Mitel_Web_Brand2.JPG", "Mitel_Web_Brand3.JPG" ];

This code contains a reference to each of the three image files used in the sample screensaver. We need to edit it so that it instead references the new image file we created earlier.

var images = [ "denwa-1.jpg" ];

If you want your screensaver to include more images then simply add them to the list as per the sample above. Each image in the list should be embedded in quotation marks and separated by a comma. Eg:

var images = [ "image1.jpg", “inage2.jpg”, “image3.jpg”, “image4.jpg” ];

This final change is optional. The screensaver application will cycle the image once every minute but you can change the interval by editing this line:

setInterval("UpdateDisplay()", 60*1000);

The interval is set at 60*1000 by default which equates to 60 x 1000 milliseconds = 1 minute so if you want to change the interval to two minutes then change the line to:

setInterval("UpdateDisplay()", 120*1000);

Once you have made all the necessary changes save the screensaver.htm file.

Edit the manifest.xml file

The manifest.xml file contains the name of the screensaver application and a reference to the screensaver.html file. Edit the file in your text editor and first of all remove any comments from the beginning of the file.

manifest-xml

The first line should read:

<?xml version="1.0"?>

Next, edit the name of the screensaver. The default entry looks like this:

<name>ScreenSaverSample</name>

Change the text between the <name> and </name> tags to give the screensaver a different name. It’s best to keep the name simple and without spaces or other symbols.

Finally, find the line that reads:

<invoke-service>screensaver.html</invoke-service>

Change the reference screensaver.html so that it reads screensaver.htm - remember we renamed the screensaver.html file to .htm earlier in this guide.

<invoke-service>screensaver.htm</invoke-service>

Save the manifest.xml file.

Important: Don’t be tempted to leave the comments section at the start of either the screensaver.htm file or the manifest.xml file. If the comments are present the MiVoice Office 250 will not recognise the application once you upload it.

Step 3: Build the screensaver package file (.SPX)

Once the source files have been edited as described in the steps above the screensaver application needs to be built into a package file (.SPX) ready for uploading to the MiVoice Office 250.

From the Start menu:

All Programs | Mitel | HTML Toolkit

Launch the HTML App Packager application:

packager-application

Next, we need to add the screensaver source files.

Click the Browse for directory button and navigate to the folder containing the source files for your screensaver application.

choose-the-package

Click the Choose a file or directory button to select the current folder. The application should automatically populate the fields as shown in the example below.

packager-file-path

Click the Generate button to build the screensaver. The filename of the screensaver .SPX file is displayed in the Package Filename field:

package-filename

Close the HTML App Packager application.

Step 4. Upload the .SPX file to the MiVoice Office 250

To upload the new screensaver to the MiVoice Office 250 launch the Mitel System Administration and Diagnostics utility and connect to the MiVoice Office 250.

admin-and-diag

From the System management tools drop-down select Launch phone system AWP webpage for <system name>. This will launch the administration web page.

system-manage-tools

Click on the Upgrade & Uploads link and select HTML Apps.

html-apps

You should now see a list of the existing HTML applications on the MiVoice Office 250 and an option to upload a new one. Click the Browse button, navigate to the .SPX file we created earlier and click Open.

choose-the-package

The path and filename should appear in the HTML Application to upload field.

app-to-upload

Click Upload File to upload the .SPX file to the MiVoice Office 250. The new screensaver will now appear in the list.

Close the browser.

Step 5. Add the screensaver to the MiVoice Office 250 applications list

In Mitel System Administration & Diagnostics, select Launch DB programming from the System management tools drop-down.

In the DB programming window navigate to System | Phone-Related Information | Applications

The currently available screensaver applications should be visible in the right hand area of the screen.

add-the-screensaver

To add the new screensaver, right-click in the gray area and choose Manage Application Files… In the dialog box that appears, all the HTML applications that are available will be listed. Select the new screensaver .SPX file and click Add.

add-the-screensaver

The new screensaver should now appear under Applications

new-screensaver

The next step is to assign the new screensaver to an application profile.

Step 6. Assign a screensaver to an application profile

Navigate to System | Phone-Related Information | Application Profiles and select an existing application profile or right-click on the grey area to create a new one. Under the application profile are two sub-entries, Applications, and Phones. Click on Applications.

To assign a screensaver to the application profile, right-click in the grey area and select Add to Application List… This will start a wizard to guide you through assigning the HTML application.

add-application

Under Select Types to Include, choose Applications and click Next >

application

From the list of HTML applications, choose the new screensaver and click Add Items.

add-items

Click Finish to close the wizard. The new screensaver will now be associated with the application profile. The final step is to associate the extensions which want to use the screensaver with the application profile.

Step 7. Associate extensions with the profile

Under the application profile select Phones.

Right-click in the grey area and choose Move to Phones List…

Another wizard will launch.

wizard-launch

Under Select Types to Include: choose 52xx/53xx and click Next >

phones-list

From the list of extensions, select the ones who you want to assign to this application profile and click Move Items to assign those extensions. Click Finish to close the wizard. The new screensaver is now assigned to the appropriate users.

Close the DB Programming and Mitel System Administration & Diagnostics.

The users may want to adjust the settings on their phones to control when the screensaver will ‘kick in’. They can do that by pressing the blue application key on the phone and going into the Settings | Screen Saver menu. The screensaver will start when the phone has been idle for the time selected. To test, set the time to 1 minute and wait...