Fusion:Adding options for Skins and Templates (advanced)

From SpinetiX Support Wiki

Jump to: navigation, search

This topic is for user familiar with SVG, JavaScript and Elementi / HMD. See also the Fusion:Adding options for Skins and Templates page.

Using Elementi X

Fusion scans the children of the <spx:properties> element to find those customization tags that are marked to be transformed into Fusion options. The marking in done by adding an ui attribute with its value set to "enabled" - for instance: 

 <spx:json-color index="1" name="Title text color" propertyName="textContent.fill" ui="enabled" xlink:href="#jsonLayers"/>
 <spx:text name="Title" xlink:href="#headline" ui="enabled" />
Note Note:
Since Elementi is describing the layers creating within the interface in JSON format, the JSON customization tags are recommended (e.g., <spx:json-string>,<spx:json-choice> etc.). Furthermore, the regular customization tags cannot be used directly on JSON layers - instead they should reference SVG elements defined under the <defs> element (for instance <title>) that are updated via the interface and those values are "passed" to the JSON layers using JavaScript / jSignage. Also, the <spx:group> is not supported by Fusion, thus any element inside a group will be ignored by Fusion.

Examples

Text color option

Let's say that you have created a template with two text layers that can be editable within Fusion and you want to make the text color of the first of them editable within Fusion as well. To do this within Elementi X, follow these steps:

  1. Open the XML Tree view and find the <spx:properties> element.
  2. Right-click on it and select "Add Child".
  3. Set the element name to <spx:json-color>.
  4. Add the following attributes (name / value pairs) to this element:
    • ui = enabled
    • name = Title text color
    • xlink:href = #jsonLayers
    • index = 0 (or 1 to target the second layer)
    • propertyName = textContent.fill (or args.fill if the textContent doesn't have a fill attribute)

If you edit the file in a text editor, then add the following line under the <spx:properties> element: 

<spx:json-color index="0" name="Title text color" propertyName="textContent.fill" ui="enabled" xlink:href="#jsonLayers"/>

Streaming media URI option

See Tutorial:Fusion Template with streaming media content page for more details about how to create, within Elementi X, a Fusion Template that displays a streaming media whose URI will be entered by the user in Fusion when creating a new Fusion Slide based on this template.

Using HMD Professional

High level editing

XML Tree View

HMD - Make Fusion editable
HMD - Fusion editable fields type

HMD lets you configure any attribute or text content to be editable within Fusion. The following options are available when right-clicking on an attribute or element in the XML Tree:

  • If you selected an attribute:
    • Make content editable with Fusion
      Fusion will show a single line of text to be edited by the user.
    • Make choice editable with Fusion
      Fusion will show a drop box with the choice specified in the <spx:choice> element
    • Make color editable with Fusion
      Fusion will show a color selection dialog.
  • If you selected an element:
    • Make content editable with Fusion
      Fusion will show a medium size text edit dialog. This should only be used on <textArea> elements
    • Make unformatted text editable with Fusion
      Fusion will show a single line edit dialog. This should only be used on <textArea> elements
    • Make media editable with Fusion
      Fusion will show a large text edit dialog, when used on a <textArea> element, or a dropable media when used on an <animation> element.

Once you have selected all the parameters that you want to be customizable, you can save your document and then open the Fusion view.

Fusion View

Once you have selected some items to be editable with Fusion, they will appear under the newly created Fusion tab. The Fusion View allows to:

  • Rename the label of every item:
    Select the item to rename, double-click on the left column and enter the new label and save it using enter.
  • Change the order of the items.
    Right-click on an item and select Move up or Move down.
  • Change the default value of the item.
    Simply edit that property.

Low level editing

Fusion scans the children of the <spx:properties> element to find those that are marked to be transformed into Fusion options. This is signaled by the presence of the ui attribute set to "enabled". For instance: 

 <spx:text name="Title" xlink:href="#headline" ui="enabled" />

Notes:

  • See the list of customization tags for which the ui attribute can be used.
  • The type of text option displayed by Fusion can be controlled by using different spx elements, as following:
    • <spx:text> -> a single-line input field is shown;
    • <spx:rich> -> a double-line text box is shown;
    • <spx:media> (when referring to a textArea) -> a multiple-line text box is shown.
  • <spx:group> is not supported by Fusion, thus any element inside a group will be ignored by Fusion.

Examples

Template displaying news

Template displaying news

You can take any of the HMD Templates and make it compatible with Fusion. For instance if you want to create a Fusion customizable news template, follow these steps:

  1. Create a new Template under My Fusion Elements workspace.
  2. From My Templates workspace, copy the news_16_9.svg to your template folder.
  3. Delete the existing template.svg file and rename the news file to "template.svg".
  4. Open the file in HMD and go to the XML Tree View.
  5. Expand the <spx:properties> element and find the element you want to be customizable.
    • To make the RSS URI customizable:
      1. Find the <spx:choice [...] name="RSS Feed Source" xlink:href="#rss_uri"/>.
      2. If you want the user to be able to type a complete URI, change the name of the element to spx:text.
      3. Add the ui='enabled' attribute to the element.
    • To make the Item Duration configurable:
      1. Find <spx:text name="Item Duration" xlink:href="#rss_item_dur"/>.
      2. Add the ui='enabled' attribute to the element.
  6. Save the changes and upload the Template into Fusion.

Skin with a news ticker

HMD - Skin with a ticker
Fusion - Skin with a ticker

To create a Skin with a news ticker follow the procedure below:

  1. Create a new Skin under My Fusion Elements workspace.
  2. From My Templates workspace, copy the news_ticker.svg into your Skin folder.
  3. Create your layout as usual using HMD.
    • Optionally, add Fusion options and change the title of the document to a description of your Skin.
  4. Add the ticker as a new layer in template.svg.
  5. Open the news_ticker.svg and go to the XML Tree View.
  6. Make the RSS feed source configurable by the user
    1. Find the <spx:choice [...] name="RSS Feed Source" ui="enabled" xlink:href="#rss_uri"/>
    2. Change the name of the element to <spx:text>
    3. Add the ui='enabled' attribute to the element
  7. Make any other element configurable using the same logic.
  8. Change the title of the news_ticker.svg to a better description if needed.
  9. Save the changes and upload the Skin into Fusion.

Dynamic Templates

XML Tree - Dynamic templates

Fusion will scan for a special marking inside a news.svg file to create a Dynamic template. If found, when editing the template in Fusion, multiple tabs are presented to the user. Basically, for such templates, the content of the feed is edited directly inside Fusion by the user.

To create a Dynamic template, follow these steps:

  1. Copy the news_16_9.svg to your template folder.
  2. Delete the existing template.svg and rename the news file to template.svg.
  3. Open the file in HMD and design the layout as usual.
  4. Open the Properties view and do the following:
    • Set the Feed Type to XML-UI.
    • Set the RSS Feed Source to inline.
  5. Open the XML Tree view and do the following modifications:
    1. Modify the feed source:
      • Find the <spx:choice [...] name="RSS Feed Source" xlink:href="#rss_uri"/> .
      • Change the name of the element to <spx:text> .
      • Add the ui='enabled' attribute to the element.
      • Add the ui-href='#rss_parser' attribute to the element. Note that the target ID must be the same one as the one used to configure the Feed Type.
    2. Configure the data items:
      • Find the <spx:table> called Inline RSS and add the ui='datafeed' attribute. This will let Fusion know that this is the table containing the data.
    3. Add an ui-type attribute for each item of the table. The following values are supported:
      • animation: Fusion will show a dropable media interface.
      • text: Fusion will show a single line text box.
      • ltext: Fusion will show a multiline text box.
  6. Save the changes.

Note: Carriage returns are not supported in Dynamic templates (as of version 2.2.2).

Global options

Note that the global options can be used with firmwares grater than 3.1.0 or less than 3.0.0.

It is possible to create a global set of options that can be used freely inside the Skin(s) and / or the Template(s) of your Style Pack. To do this, follow these steps:

  1. Create a layouttheme.js file under the script collection.
  2. Add the global options using regular JavaScript variable declaration, but with the special type of comments afterwards (see more details below).
  3. Include the layouttheme.js file in the skin.svg, template.svg or any other file where you want to have access to the global options.
  4. Use the defined variables, instead of static values.
  5. Upload the Style Pack in Fusion.
  6. Find the global options under the Skin configuration page.

The following markup is recognized by Fusion:

  • // title [enter_your_title_here]
    Controls the title as shown by Fusion. For instance // title Theme setup, will display 'Theme setup' in Fusion.
  • // Keyword Description
    Any JavaScript variable can be following by a comment with this structure. The following Keywords are recognized:
    • text - to show a single-line text area;
    • rich - to show a double-line text area;
    • textarea - to show a multi-line text area;
    • animation - to show a media field;
    • color - to show a color-picker field;
    • yesno - to show a drop-box with two options (yes and no);
    • yesnoinherit - to show a drop-box with three options (yes, no and default);
    • fonts - to show a drop-box with the list of fonts available on the device.

Example

layouttheme.js example

For instance, the layouttheme.js document below will lead to the interface shown on the image on the right. 

 // title Theme setup
 var c = '#dedede'; // color Color
 var f = 'Verdana'; // fonts Font
 var b = 'yes'; // yesno Yes No
 var a = ' '; // animation Animation
 var t = ' '; // text Text
 var r = ' '; // rich Rich Text
 var u = ' '; // textarea Large Text

Retrieved from "https://support.spinetix.com/w/index.php?title=Fusion:Adding_options_for_Skins_and_Templates_(advanced)&oldid=14099"
This page was last modified on 9 February 2018, at 18:12.