Add a mouse cursor

From SpinetiX Support Wiki

Jump to: navigation, search

This page is related to jSignage and Interactivity.

Introduction

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 driven by a mouse (connected on the USB port of the HMP) or displayed on a touchscreen, showing a mouse cursor at the mouse position might be required.

This tutorial explains how to add a mouse cursor on your interactive project using just few lines of jSignage code.

Tutorial

  • Difficulty: Medium (some programing skills are required).
  • Total duration: 5-10 minutes.
  • Requirements:

Steps

Editing within Elementi X
  1. Create a project in Elementi or open an existing one. (See also My first Elementi project tutorial.)
  2. Open index.svg file.
  3. Find the <script> section holding the jSignage / JavaScript code.
    • In Elementi X, open the XML Tree view in Edit panel, expand the second <script> element and double-click on the CDATA section (in green). This will open the script code in a new window as seen in the image on the right.
  4. Add the highlighted lines (6-13) to the existing script:
     1 $(function(){
     2   var txt = $('#jsonLayers').text();
     3   if ( $.trim(txt)=="") { txt = $('#defaultContent').text(); }
     4   $('#layers').add( $.uncan( $.parseJSON( txt ) ) );
     5 
     6   var svg = $('svg');
     7   var r = 10;
     8   var cursor = $.rect( { x: -r, y: -r, width: 2*r, height: 2*r, fill: 'blue', pointerEvents: 'none' } );
     9   cursor.addTo( svg );
    10   svg.mousemove( function( evt ){
    11     var click = $.getLocalCoord( svg[0], evt.clientX, evt.clientY );
    12     cursor.attr( { transform: 'translate(' + click.x + ',' + click.y + ')' } );
    13   });
    14 });
    
  5. Enable the interactivity on Elementi and test the project before publishing it on the HMP.

Code explanation

  • var svg = $('svg');
    Variable referencing the SVG document element, for easier access in various parts of the script.
  • var r = 10;
    Variable used for sizing the cursor.
  • var cursor = $.rect( { x: -r, y: -r, width: 2*r, height: 2*r, fill: 'blue', pointerEvents: 'none' } );
    The cursor is built as a jSignage rectangle having 20x20 pixels in size and filled with blue.
    To force the the cursor to pass the mouse events to the underlying layer, the pointerEvents property is set to 'none'.
  • cursor.addTo( svg );
    The cursor is added to the SVG document tree.
  • svg.mousemove( function( evt ){ ... }
    This registers a callback function to be called each time the mouse is moved.
  • var click = $.getLocalCoord( svg[0], evt.clientX, evt.clientY );
    Retrieves and converts the coordinates of the mouse pointer to local coordinates.
  • cursor.attr( { transform: 'translate(' + click.x + ',' + click.y + ')' } );
    Changes the coordinates of the cursor to the match the position of the mouse event.
This page was last modified on 20 February 2017, at 13:38.