Add a mouse cursor

Introduction

Mouse Cursor project

Version: 2.0 (revision history)

Date: January 7, 2021

Due to the nature of digital signage projects, usually there's no need to display a mouse cursor on the screen. Nevertheless, when having an interactive project for a touchscreen or driven by a mouse connected on the USB port of the HMP, showing a cursor might be necessary.

The tutorial below explains how to add a mouse cursor on your interactive project using just a few lines of code. Or you can just download the sample project.

Tutorial

• Difficulty: Medium (some programming skills are required).
• Total duration: 5-10 minutes.
• Requirements:
  • Elementi (X is recommended, but you can also use a text editor such as Notepad++)
  • Interactive device (such as USB mouse or touchscreen)

Steps

Editing within Elementi X

1. Create a new project in Elementi X or open an existing one.
2. Open its main index.svg file and go to the XML Tree view in Edit panel.
3. Include the jSignage UI plugin
   1. Find the <script> element loading the jSignage.js library.
   2. Press Ctrl+C, then Ctrl+V to duplicate it.
   3. Expand it and edit the value of the xlink:href attribute to point to http://download.spinetix.com/spxjslibs/jSignage.UI.js instead.
4. Add the following code that invokes the cursor function.
   1. Find the next <script> element that holds the jSignage code and click on the arrow to expand it.
   2. Double-click on the green text to open the "Edit CDATA" dialog.
   3. Add the highlighted line to the existing script:

      $(function(){
        var txt = $('#jsonLayers').text();
        if ( $.trim(txt)=="") { txt = $('#defaultContent').text(); }
        $('#layers').add( $.uncan( $.parseJSON( txt ) ) );
      
        jSignage.UI.cursor({type: 'circle', size: 10, color: 'blue'}).addTo('svg');
      });
      

   4. Click OK button to close the dialog.
5. Click the save button to apply the changes.
6. Click the finger button to enable the interactivity mode in Elementi.
7. Make sure a blue cursor is following the mouse movements.
8. Publish the project on the HMP (make sure that the player is configured to accept touchscreen and keyboard events).

Note:

If you are using a text editor, locate the project folder on your disk, open the index.svg file for editing, and manually add the above.