AMX IS-SPX-1000/1300 Triggering of SVG Animations

Remote Control

44 Inspired XPress - Programming Guide

It might be desirable for the main media not to start over each time it is reopened. In this case, two scenarios are possible:

The main media resume its playback, as if paused during the alternative content.

The main media continue playing, as if playing in the background during the alternative content.

The first scenario can be controlled using the Resume where left parameters of the menu_media.svg template. Settings

this parameter to 'on' will prevent the main media from restarting each time it is opened. For the second scenario, the

main media must be placed in a schedule file. It is also possible to use the spx:begin attribute on the <svg> element of

the main media.

Triggering of SVG Animations

For more advanced effects, you can design your custom SVG document to include animations that will be triggered

remotely over the network. To do this, you design the animations as if triggered by time, but use indefinite as the begin

attribute.

In a <script> element you can then instantiate a shared variable for remote control and install an update listener on the

variable. From this callback, you can use the beginElement() or beginElementAt() methods of the

smil::ElementTimeControl interface to trigger the animation.

In the sample document below, a rectangle is set to move through the screen from left to right when the “kick” variable is

set to “go”.

<?xml version="1.0" encoding="UTF-8"?>

dur="indefinite" viewport-fill="white">

<script><![CDATA[

var anim=document.getElementById( "anim" );

var v=createSharedVariable( "kick" );

v.addUpdateListener( function () { anim.beginElement(); } );

]]></script>

<animateTransform xml:id="anim" attributeName="transform"

begin="indefinite" type="translate" to="1080,0" dur="3s" fill="freeze"/>

</rect>

</svg>

You can also use the content of the shared variable to modify the document on the fly. In the example below, a rectangle

will flash for once second each time the variable is updated and its color is set to the content of the variable.

<?xml version="1.0" encoding="UTF-8"?>

dur="indefinite" viewport-fill="white">

<script><![CDATA[

var anim=document.getElementById( "anim" );

var rect=document.getElementById( "rect" );

var v=createSharedVariable( "kick" );

v.addUpdateListener( function ( sv ) {

rect.setAttribute( "fill", sv.value );

anim.beginElement();

} );

]]></script>

<rect xml:id="rect" display="none" x="540" y="260" width="200"

height="200" fill="blue">

<animate xml:id="anim" attributeName="display" begin="indefinite"

to="inherit" dur="1s"/>

</rect>

</svg>