Project:JavaScript API tester

Specification

JavaScript API tester

Version: 1.0 (2014-03-10)

• Category: Interactivity
• Author: SpinetiX S.A.
• License: GPL Version 3
• Target: Elementi

Description

This sample project can be used for testing interactive events and the JavaScript API.

The project contains two files:

• index.svg

  Listens for interactive events ('click', 'mousedown', 'mouseup', 'mousemove', 'mousewheel', 'textInput', 'keydown', 'keyup') and displays the details of the received event on the bottom part of the screen. Also, a click event is simulated after 5 seconds using fireSharedEvent() method.

• shared variable tester.svg

  Listens for update events of the configured shared variable (var1 by default) and displays the last update details on the top part of the screen.

How to use it

To use this project onto an HMP, follow these steps:

1. Open HMP Control Center to configure the player.
   • For HMP350 and HMP300 devices:
     • Open Advanced Applications > Interactivity and check "Accept touchscreen and keyboard events".
     • Open Advanced Applications > Network API and check "Network API".
   • For HMP200, HMP130, and HMP100 devices:
     • Set the HMP into Installation Mode to avoid multiple reboots.
     • Open Display Settings page > Interactivity tab and activate "Enable events" option.
     • Open Network Settings > Advanced tab and activate "Enable API server using port" option.
     • Open I/O Automation > USB Settings and deactivate "Support large number of USB devices" option.
2. Publish this project on the HMP.
3. Connect an HID mouse or keyboard device and test the interactive events.
4. Update the Shared Variable using any of the following methods:
   • Type "http://HMP_address:1234/update?var1=Hello" into your browser's address field. (where HMP_address is the IP or the hostname of the HMP)
   • Use the Shared Variable AJAX Updater, or the Shared Variable Updater if the former poses any problems.
   • Use a Telnet client to sent commands to the HMP.
   • Use an ajax call:

$.ajax( { 
  type: "POST", url: "http://HMP_address/rpc", contentType: 'application/json',
  data: JSON.stringify( {
    method: "webstorage_set", params: [[ { name: "var1", value: "Hello" } ]], id: 1
  } )
});

Note: To test the interactive events within Elementi, enable the "touch screen mode" using the hand-like icon from the Preview panel.

Sample code

index.svg

var eventsList = [ 'click', 'mousedown', 'mouseup', 'mousemove', 'mousewheel', 'textInput', 'keydown', 'keyup' ];

$(function(){
    // [...]

    // add a handler for each event defined in the eventsList array
    eventsList.forEach( function( element, index, array ){
        $('svg').bind( element, function( ev ) {
            var str = ev.type + ' ';
            switch ( index ) {
                case 0:
                case 1: 
                case 2:
                case 3:
                    str += 'at (' + ev.clientX + ',' + ev.clientY + ')';
                    break;
                case 4:
                    str += ev.wheelDelta; 
                    break;
                case 5:
                    str += ev.data; 
                    break;
                case 6:
                case 7:
                    str += ev.keyIdentifier; 
                    break;
            }
            textArea2.text( str ); 
        } );
    });
    
    // simulate a click event after 5 seconds
    $.setTimeout( function() {
        fireSharedEvent( "mousedown", "x=33,y=44,button=0" );
        fireSharedEvent( "mouseup",   "x=33,y=44,button=0" );
    }, 5000 );

});

shared variable tester.svg

$(function(){
    // [...]

    var config = $.parseJSON( $('#config').text() );
    $.setLocale( config.locale );

    // [...]

    // create the shared variable
    var v = createSharedVariable( config.sv_name );

    // register the update listener
    v.addUpdateListener( function( sv ) { 
        var dtf = new $.DateTimeFormat( $.DateTimeFormat.Format.MEDIUM_DATETIME );
        var date = dtf.format( new Date( sv.lastUpdateTime ) );
        textArea1.text( 'Name: ' + sv.name + '\nValue: ' + sv.value + '\nTimestamp: ' + sv.lastUpdateTime + '\nDate: ' + date );
    }, false);
});