HMD Templates

Introduction

Various templates are included within HMD, accessible using "My Templates" shortcut from the Browsing panel. These templates, divided into several collections, are SVG files that can be freely used for different purposes inside your projects. Except for some backgrounds and cliparts, the rest were written by SpinetiX to provide you different types of functionalities, which would otherwise require specific programming knowledge and time for you to write the necessary code. Many HMD templates include specific elements inside their code that make them configurable from the HMD User Interface (UI).

To learn how to create your own templates, see the HMD Template Authoring page.
The templates are stored in the Program Files folder, under SpinetiX\HMD\share\templates folder (i.e. "C:\Program Files (x86)\SpinetiX\HMD\share\templates").
By default, these templates are read-only when opened in HMD to avoid accidental edits. You can remove this protection using the "Enable template editing" option from the "Settings" menu. Note that to restore the original versions of the templates, HMD must be reinstalled.
- Due to security changes in Windows 7, templates can no longer be edited or new templates copied to the "My Templates" folder, even when this option is enabled. The solution is to copy the original template in your project, to modify that copy and then to copy it back using Windows Explorer.

Basic templates

Multi-layer SVG file

This is the template generated by right-clicking in a project and clicking "New SVG File".

The document can be customised as follows:

Title: A title for the document
Description: An informative description of the document (note both Title and Description are optional, and for convenience purposes only. They will not be shown by the HMP)
Duration: The duration of the document. If set to indefinite the document will never loop. If set to media, the duration of the document will be computed automatically and the document will loop at the end of the playing time. An explicit duration can also be set, after which time the document will loop.
Document:
- Canvas Size: the size of the document in the following syntax:
  origin x, origin y, width, height.
- As SVG is a scalable language, the actual pixel size of the canvas is not important, and useful mainly for precise positioning. However, the ratio between the width (3rd number) and the height (4th number) determines the aspect ratio of the document which should always remain the same.
- The first two numbers describe the origin of the document and should be left to 0.
New Layer:
- Default Width: the width of a new layer.
- Default Height: the height of a new layer.
- Default Position: position of the top-left corner of the new layer.
- Default Aspect Ratio: you can choose if you want a new layer to keep its aspect ratio (xMidYMid) or to be scaled (none) when inserted into the document.
- The new layer properties can be changed with no effect on the existing content. This is useful if you are adding new layers to specific positions, especially when using Multiscreen.

Playlist file

This is the template generated by right-clicking inside the project (browsing panel) and choosing "New Playlist". See also the HMD Playlist page.

Schedule file

This is the template generated by right-clicking in a project and clicking "New Schedule".

Graphics

Backgrounds and Cliparts collections contain many graphical images which can be used in your projects. The Backgrounds folder is organised by aspect ratios and the Cliparts folder by different categories (Arrows, Map Symbols, Passenger Information, Road signs, Sports, Weather etc.).

Clocks

There are several clock templates in this collection, both digital and analogue, a countdown template and a date template.

The clock templates are especially useful for checking synchronization between HMPs.
See how to display a clock in a different time zone.

Changing clock font

For the digital clocks and the date template, click on the Format entry of the properties (hh:mm:ss or D,j M Y). This will open a menu letting you set the color, the fonts and the size of the text.
For the analogue clocks, go to XML Tree view, expand the <g> elements and find the one with <text> elements for the numbers on the clock. Change the "font-family" attribute to the font desired (e.g. Verdana).

Countdown template

The countdown template accept the following format modifiers: 'd' 'D' 'h' 'H' 'm' 'M' 's' 'S'.
- Examples of formats: 'ddd:hh:mm:ss', 'hhhh:mm' or 'ssssssss'.
The "End date" property can be set either as number of seconds (123), as a time (1:15:45) or as a date (01 Aug 2012 12:35:56)
- The string date should be in a format recognized by the parse method.
The "Count up" property can be set to Off or On to control if the timer will stop at 0 or continue in the opposite direction (e.g. to count up).
- To force the timer to count only up set the "Count up" to "On" and "End date" to 0 or to a negative value (e.g. -10 will force the timer to start at 10 and count up).

Date template

Use this template to dynamically display the current date - the date is automatically updated at midnight according to the player time.
The date template accept the following format modifiers: 'Y' 'y' 'F' 'm' 'M' 'n' 'd' 'D' 'j' 'l'. The default format is: D, j M Y.
- See PHP Date format options for more details about each format modifier.

Effects

The SVG files from the "Effects" collection allow you to apply certain animations to your existing layers (images, videos, SVG files).
They are divided into two categories based on the timing of their action:
- "in" = to animate how the media will appear in the scene (entry effects).
- "out" = to animate how the media will disappear from the scene (exit effects).
To apply effects to media elements, drag and drop the effect file directly on the media element you want to animate, either in the preview panel or in the editing panel.
- Effects cannot exist as separate layers in a document; when dragging and dropping effects onto existing layers, ensure that the effect is dropped directly onto the layer, not above or below.
Effects can be configured using the media editing dialog.
To remove the effect, use the popup menu on the media element, and select Remove Effect ….

Interactivity

Interactivity Example project

Version 1.0 (2011-10-10)

Interactivity templates have been designed to help users build basic interactive projects.

menu_buttons

This template is designed to trigger action from click on touch screens.
Use this template to display a menu with "buttons" on the screen.
Each button is actually a layer and it can be a text, a media or an svg.
By clicking a button, an update of the "shared variable" associated with this template is triggered.
It is designed to work with menu_media template.

menu_buttons_auto

Same as the above, except that the buttons are automatically arranged in a table format specified from the properties of the template.

menu_select

This template is very similar to the menu_buttons.svg, but is design to work within interactive projects using keyboards.
The user can activate each button of the menu using a keyboard.
Each button can has two state: selected and activated. Typically the user will select one button using the arrow keys, and then activate it using the enter key.
An update of an "Instant Messaging Variable" is triggered for each modification done by the user.
Different highlight layout can be selected to show to the user that the button is selected.
It is designed to work with menu_media template.

menu_select_auto

Same as the above, except that the menu elements are automatically arranged in a table format specified from the properties of the template.

menu_media

Use this template to control the media displayed based on the actions triggered by the user.
It can be controlled by the other templates or the changes of the "Instant Messaging Variable" .
Each media is actually a layer and it can be a text, a media or an svg.
The default media is the first one. Once a media has been played, the document return to the default media.
When using a menu inside another menu, actions on the sub-menu might reset the main menu to the default content. Make sure that the main menu and the sub-menu are using different instant messaging variables.

keystroke

Use this template to control the other templates from the keyboard.
It doesn't show anything on the screen, but it maps the keystrokes on your keyboard with values to be set for the defined Shared Variable (multiple variables can be defined in the same time).
The template have to be included directly in the index.svg file.

keyboard

Use this template to display a full keyboard on the screen.
When used with a touch screen, this template will emulate an USB keyboard.
It can be configured to use any type of keyboard layout using the Key Map properties tab.
Each entry of the table corresponds to one keyboard layout.
Use // to separate lines. For instance 7 8 9 // 4 5 6 // 1 2 3 will display a typical numeric key pad
The size of the key can be controlled using [ and ], [3]0 will show a large 0 button
You can switch from one layout to another using the -> sign, [1->1]Num. The first row has index 0

playback

Use this template to control the playback (play / pause) of a media file or svg document.
The shared variable that controls this templates is called by default "playback" and accepts "PLAY" and "PAUSE" commands. The two commands can be followed by a number (representing seconds) or a percentage in order to specify the position (relative to the beginning of the media) where the command should be applied.
- use "PLAY 8.5" to start playing at second 8.5;
- use "PLAY 50%" / "PAUSE 50%" to play / pause at the middle;
- use "PAUSE 0" to pause at the beginning (i.e. to stop).

Playback Control Buttons Project

Version 2.0

The menu_buttons template can be used to interactively control the playback template (you will need to change the shared variable for one of the two templates). See the sample project on the right demonstrating this kind of usage.

slider

Use this template to control the playback position of a media file or svg document.

queuing

Use this template to create a basic queueing system.

Multiscreen

The multiscreen templates are used to build synchronized content.

The "configurable.svg" template uses javascript to dynamically configure the layout of the multiscreen
The name of each screen is in this format: screen-[row]-[column].
The other templates are using predefined layout using the <spx:multiScreen> element.

News

The news template are some very powerful templates allowing you to display news tickers but also more advanced data feeds sources.

Note that although the news templates are very flexible, in many situations creating simpler custom scripts will be more efficient. See the projects from Category:Custom Code and Scripting for more information on this topic.

Serial Port

This section contains four templates for sending commands via RS232 port from your project:
- mute.svg - used for sending "MuteOn" and "MuteOff" commands;
- power.svg - used for sending "PowerOn" and "PowerOff" commands to screens connected via RS232, but also via VGA or DVI;
- sources.svg - used for sending the "SelectInput" command;
- volume.svg - used for sending the "SetVolume" command.

These templates will not display any content and contain basically one auxCmd command line controlling the name of the command to be sent and the target.
- For instance, the PowerOn command is sent like this:
```
<auxCmd command="PowerOn" target="monitor"/>
```
- They should be used together with FSM files that implement the commands above - meaning that you have inside your FSM file something like this:
```
<onStart command='PowerOn' goto='start'>
```
Other RS232 commands can be implemented in the same manner; first in the protocol file and then called from an svg using the auxCmd statement.
Such svg files containing auxCmd commands are especially useful for sending scheduled commands to a device connected via RS232 (e.g. by using the svg file inside a schedule file). For instance, the power.svg template can be used to create a custom power saving schedule.

Troubleshooting

See also Troubleshooting HMD.

"Target does not have a viewport" error when applying an effect.
- The effect is being applied to an item in a playlist, which is not supported. Either use the transitions built into the playlist (on the Properties tab of the playlist) or, replace each playlist item with an SVG file, and insert the original item into each of the SVGs. Then apply the effect within the SVG files themselves.
Occasionally an HMP does not update the date displayed to the current day (e.g. the day before is displayed), until it is rebooted. This is a problem affecting older versions of some date/time templates. To remedy, either use a newer date template (at least from HMD 2.2.3 version) or open the template in a text editor (such as Notepad++) and replace this line of code:
```
timer=createTimer( days-now, days );
```
with this one:
```
timer=createTimer( days-now+1000, 60*1000 );
```
When opening a News or Ticker template a JavaScript error is returned "id is null". See Updating from 2.1 to 2.2 page for more info on how to solve this issue.