From SpinetiX Support Wiki

Jump to: navigation, search

This example is shown in the Fusion Element video.


Project preview

The purpose of this Fusion example is to show you how to create a Fusion Template which displays a generic event description. This template will then be used to create Fusion Slides to personalize the event description shown on a screen according to your needs.

After following this example, the user will be able to:

  • Configure the text shown on a screen. Different texts can be used for the different day of the week
  • Switch between the 'normal' weekly messages and some custom text with a simple click in Fusion.

The process is divided in two steps:

  1. Administrator actions - Creates the template and setup Fusion.
  2. User actions - Use Fusion to enter the event description and show it in the screen.

The Template created in this example can be downloaded here. The Fusion Backup of this example can be downloaded here.

Administrator actions

Design a slide template

New slide template

Duration: 5 min

The administrator must first create the slide template using HMD.

  • Open HMD and go to "My Fusion Elements"
  • Create a "New Slide Template"
    • Enter the name of the template (Event)
    • Enter the Format (16:9)
    • A folder called Event will be created, it contains a single file called "template.svg"
  • Create a New Collection and rename it to media
    This collection will be used to put all file that are not editable in Fusion. In this example it will be used to store the background of the slide.
    Configuring the background
    • Open "My Templates" and go to the "background" folder
    • Copy "Top-bottom Gradient.svg" to the "media" collection
  • Open "template.svg"
  • Configure the Background:
    • Drag and drop the "Top-bottom Gradient.svg" from the media collection to the preview window.
    • Right-click on the background and make it full-screen.
    • Double-click on the background. This will modify the Properties tab on the right and let you choose the colors of the gradients.
    • Press the back arrow and save your work.
  • Add text area:
    Add text area
    • Press the "New text layer" button on top of the preview area
    • Change the size and position of the text area using the preview window.
    • Double click on the text area to modify the text.
    • Edit the text to type "Event name". This text will only be used for the preview.
    • Change the fonts, the size and/or the color of the text using the button on top of the editing area.
  • Add a second text area for the description of the event
  • Make the text area editable with Fusion
    Make text editable with Fusion
    • Click on the text area and select Properties
    • Check the box "Fusion editable"
    • Fill up the "Fusion label". Use for instance "Event name" and "Event description" depending on the text area you are currently editing.
    • A Fusion icon will be shown on top of the preview in the Layer view.
  • Set the duration of the Slide
    • Go to the properties view
    • Change the "Duration" to 10s
      This will insure that the slide is shown at least for 10s when used in Fusion.
  • Save your work
  • Export the slide template to be ready to use in Fusion
    • Go one level up in the Browsing panel
    • Select "Archive" on the folder containing the template.

Import the template in Fusion

Uploading the template

Duration: 1 min

Make sure Fusion is activated before starting.

  • Log into Fusion using an "Administrator" account.
  • Upload the template in Fusion
    • Go to the Settings pages and select the "Templates" tab.
    • Press the "Add" button and select the "Event.7z" file previously exported from HMD.
    • A new icon will be shown in the list of available Templates.

Creating content

New Slide

Duration: 5 min

In this example we will prepare a set of event for each day of the week together with a Special event that can be triggered on demand by the user.

  • Create a new Slide:
    • Go to the Slides menu
    • Press the "New button"
    • Select the Event template using the FusionNewIcon.gif icon.
    • Save the Slide using the "Save" button and name it "Monday".
      Slides for the week
      As we are just preparing the content from an administrative point of view, we don't care about the text content so far. This will be managed by the user.
    • An empty slide called "Event Monday" is now available in the Slide menu.
    • Repeat the operation, to create 7 Slides called "Monday" to "Friday" and "Weekend" and an additional one called "Special"
  • Create new Programs
    • Go to the "Programs" menu
  • Create the weekly program
    Program for the week
    • Press the "New" button
    • Add all the Slides from "Monday" to "Weekend" into your program
    • Press the "Scheduling" button
    • For each item, select the "Days" where is should be shown.
      Note that in this example we use a different Slide for each day, but Fusion let you select any combination of date in the scheduling. It is also perfectly possible to have more than one event shown in the day.
    • Save your work, calling the program "Week Program".
  • Create the "Special" program
    • Add the "Special" Slide to the program
      Note that in this case Scheduling is not used as this program will be trig on-demand by the user.
    • Save your work, calling the program "Special".

Creating Users

Creating new Users

Duration: 1 min

The final step of the process is to create an user with limited rights to manage the content shown by the player on a daily basis.

  • Create a new User
    • Go to the "Settings" menu
    • Open the "Users" tab
    • Enter the username (e.g. "Desk" ) and password for the new user;
    • Select the "Editor" set of rights
      This will let the user change the text of the Slides and activate the Special or Week Programs.
    • Press the Add button.

Additionally you may create a "Manager" user with the "Creator" rights. This user will then be able to create additional Slides and/or Programs.

The administrator can now logout of the system as all administrative task have been completed.

User actions

The user should login with the "Desk' account created by the administrator.

The user can do two types of actions:

  • Modify the Slide content
  • Activate the "Special" Program to shows some custom events not in the list of scheduled ones.

Slide Content

Editing a Slide

To modify the content of one or more Slides:

  • Go to the "Slides" menu
  • Select the Slide to modify using the FusionEditIcon.gif icon.
  • Edit the Slide content
    • Enter the text in the text area
    • Leaving the mouse on top of an area shows some tips.
    • Press the Preview button to have a preview of your content.
  • Save your work
    If the content correspond to the content currently being displayed it may take a few seconds to be updated in the screen.

The preview of the Slide in the "Slides" menu will be adapted to reflect the changes done by the user.

Active Program

Activate the Week Program

The user can switch between the normal operation mode (the Week Program) and a custom mode (the Special Program). This allows for the display of special or un-planed events.

To switch between programs:

  • Go to the "Programs" menu
  • The program on teh top is the Program currently active.
  • Use the FusionActivateIcon.gif to activate any other program.
  • The user may check the content of any program using the FusionViewIcon.gif.

Improving the example

Editable text box size

Advanced editable options
Improved slide layout

When editing the text for the event name and description the size of the editable to not match the size in the preview. To reduce the size of the editable text, the XML Tree view should be used.

  • Open the template.svg
  • Make sure that the layers are NOT "Fusion editable"
  • Open the XML Tree View
  • Find the layer corresponding to the first text.
  • Right-click on the <textArea> and select "Make unformatted text editable with Fusion" for the event name and "Make content editable with Fusion" for the event description.
  • Save the file. A new tab called "Fusion" will be created
  • Open the Fusion tab
  • Click on the left column of each line to set the name to be displayed in Fusion
  • Save and export the template.

When using Fusion the template will now show a more compact layout to edit the text.

Note that those changes have no impact on the behavior of the template/slide. It only modifies the user interface.

Adding a clock

Adding a clock

Additional media can be added to the slide to improve the layout. For instance a clock could be added at the bottom of the slide.

  • Open the template.svg
  • Open a new tab, and go to "My Templates/Clocks" folder
  • Copy the analog_2.svg to the Media folder
  • Add the clock to the preview window.
  • Save and export the template.

When using Fusion the template will now show a clock at the bottom of all slides.

This page was last modified on 29 September 2014, at 13:43.