Synchronized Content
Extension of JavaScript
When using JavaScript in an SVG file, the variable MULTI_SCREEN_ID is always defined. It allows you to visualize a specific content based on the screenID of the player running the project.
Value definitions:
MULTI_SCREEN_ID="screenID" is the variable tested by the if statement, it contains the ID of the current screen.
screenID is the value associated to each of the screens where the content will be displayed (e.g. “left”, “right”, “top”, “bottom”, etc).
Example: Screen Layout With Six Screens
The following example creates a
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:spx="http://www.amx.com/namespace/1.0/spx" height="100%" width="100%" spx:begin="T000000" viewBox="0 0 2560 2160" > <spx:multiScreen>
<spx:screen viewBox="0 0 1280 720" xml:id="TopLeft"/> <spx:screen viewBox="1280 0 1280 720" xml:id="TopRight"/> <spx:screen viewBox="0 720 1280 720" xml:id="MidLeft"/> <spx:screen viewBox="1280 720 1280 720" xml:id="MidRight"/> <spx:screen viewBox="0 1440 1280 720" xml:id="BotLeft"/> <spx:screen viewBox="1280 1440 1280 720" xml:id="BotRight"/> </spx:multiScreen>
Example: Screen Layout With an Empty Border Between the Screens
To obtain a better total effect, you should take into account the space that may remain unusable between the displays, due to the screen frames. In this example, we consider a thickness of 80 pixels for the screen frames. To create the final layout, you must sum the internal borders thickness to the viewbox parameters, both in the (x,y) position and in the (w)idth, (h)eight sizes.
The following example creates the same grid as the previous one, but empty internal borders are also calculated:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:spx="http://www.amx.com/namespace/1.0/spx" height="100%" width="100%" spx:begin="T000000" viewBox="0 0 2640 2320" > <spx:multiScreen>
<spx:screen viewBox="0 0 1280 720" xml:id="TopLeft"/> <spx:screen viewBox="1360 0 1280 720" xml:id="TopRight"/> <spx:screen viewBox="0 800 1280 720" xml:id="MidLeft"/> <spx:screen viewBox="1360 800 1280 720" xml:id="MidRight"/> <spx:screen viewBox="0 1600 1280 720" xml:id="BotLeft"/> <spx:screen viewBox="1360 1600 1280 720" xml:id="BotRight"/> </spx:multiScreen>
58 | Inspired XPress - Programming Guide |
