Fusion:Example:Event
From SpinetiX Support Wiki
This example is shown in the Fusion Element video.
Contents
Introduction
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:
- Administrator actions - Creates the template and setup Fusion.
- 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
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.
- 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:
- 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
- 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
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
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
icon. - Save the Slide using the "Save" button and name it "Monday".
- 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
- 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".
- Add the "Special" Slide to the program
Creating 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
To modify the content of one or more Slides:
- Go to the "Slides" menu
- Select the Slide to modify using the
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
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.
- Go to the "Programs" menu
- The program on teh top is the Program currently active.
- Use the
to activate any other program. - The user may check the content of any program using the
.
Improving the example
Editable text box size
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
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.