Fusion:Adding options for Skins and Templates

This page is related to Fusion:Skin creation and Fusion:Template creation pages. See also the Fusion:Adding options for Skins and Templates (advanced) page.

Introduction

Fusion options are editable text and / or media fields that allow the Fusion user to:

• personalize a Skin (changing the background or the logo image for instance),
• create different Slides based on the same Template.

When creating a Skin / Template, you can configure different parts of the Skin / Template to become user-editable options within Fusion, directly from Elementi X / HMD Professional interface, without having to manually modify the SVG code behind.

• To add more advanced options, some SVG code changes might be required.

Option field type

The type of the option field depends on the type of the layer used to create the option in Elementi / HMD, as following:

• For a text layer -> the option field is:
  • a medium-size text area if there's no Smart text property applied on the text layer;
  • a regular input field, if "Headline" or "Ping-pong" is applied;
  • a large text area, if "Automatic fit" or "Automatic scroll" is applied.
• For a media layer -> the option field is a media area where you can drag & drop the media items uploaded into Fusion (video, image, slide, playlist and hypermedia project).
  • If the media layer refers to an image, Fusion will display an image (i.e static content) regardless of the media type used inside Fusion - meaning that the first frame will be shown for a video, the snapshot image will be shown for a hypermedia project etc.
  • If the media layer refers to an animation (SVG file), a video or a virtual placeholder, then Fusion will display the media as it is (i.e dynamic content).

Multiple sets of options

A Skin / Template can contain other SVG files, beside the required skin.svg / template.svg file and these files can be configured to generate options as well.

Fusion scans all the SVG files in the root folder of the Skin / Template for a special marking (i.e. ui="enabled") to generate the options. When this marking is found in multiple files, then multiple sets of options are presented for that Skin / Template.

• The set of options generated by the skin.svg / template.svg file is always displayed first.
• The other sets of options are separated by the title of the corresponding SVG document and displayed in alphabetical order.

Note:Fusion doesn't check the SVG files grouped into collections inside the Skin / Template for the special marking!

Using Elementi X

When opening a Skin or Template in Elementi X, a set of check-boxes are added in front of every property (under the "Fusion" column) and layer (under the "Edit" column). By enabling that check-box, the property / layer becomes a Fusion option (and a new entry is added under the "Fusion" view / tab).

• Each Fusion option will automatically get a standard name, but that can be changed from the "Fusion" view / tab in Elementi. This name is used in Fusion as a tooltip / default value / label for that option.
• You can create a "virtual" media layer, by setting its URI to: [some_name]. This layer will be displayed in Elementi as a light-blue rectangle, however nothing will be displayed on the screen unless the user assigns a media to this option within Fusion.
• Make sure not to set the "Program Area" as Fusion editable, since that will prevent the Skin from displaying the Fusion Program. To recover from this situation, you need to manually add an ui = "main" attribute under the <spx:media name="Program Area" ... > element.

Note: See also the tutorials: "Create a Fusion skin" & "Create a Fusion template" on the Elementi tutorials page.

Using HMD Professional

Enabling Fusion's editable fields

Using [Fusion] as URI

To make a layer of your Skin / Template to become a Fusion option, follow these steps:

1. Open the Skin / Template file in HMD Professional.
2. Select / add the layer which will be transformed into an option.
   • You can create a "virtual" media layer, by setting its URI to: [Fusion]. This layer will be displayed in HMD as an image, however nothing will be displayed on the screen unless the user assigns a media to this option within Fusion.
3. Open the Properties window of that layer.
4. Click on the Fusion editable check box to make the layer content editable within Fusion.
5. Enter the text label to be used for this option in Fusion.
6. Press the "Save" button.
7. A blue Fusion icon () is shown on top of the layer to indicate that it is editable within Fusion.
   

Troubleshooting

• The default text content or even the text entered by the user is not displayed.

  This happens when the text is identical to the option name. The solution is to change the option name or the default / entered text.