Fusion:Skin creation

Introduction

Creating a Fusion Skin is very similar to creating a project, except that the Skin requires to have a main SVG file called skin.svg (instead of index.svg). Of course, beside this file, a Skin can also contain other SVG and media files.

To make a Skin configurable, you can add options to the Skin, which are editable elements that will be shown within the Fusion interface.

To use custom fonts inside your Skin, create the Skin inside a Style Pack and include the custom font inside the "fonts" collection of the Style Pack.

Note: Skins samples can be downloaded from the Download Skins page.

Using Elementi X

Skin creation

A Skin can only be created inside the "skins" collection of a Style Pack.

To create a new Skin, follow these steps:

1. Open / create a Style Pack inside which you want to create the new Skin.
2. Open "files" > "skins" collection.
3. Right-click inside the Browse panel (or click on the "Menu" icon in the toolbar, then select "Projects" > "Fusion Elements").
4. Select the "New Skin..." option. A pop-up window appears.
5. Enter the name of the Skin, the model of the target HMP, the format of the target screen and the duration of the Skin.
6. Click on the "OK" button. A new folder is created, containing a single file: skin.svg.
7. Double-click on the "skin.svg" icon to open it.
8. Create the Skin layout as desired.
   • Two sets of layers are available for customizing the Skin layout: "Layers (back)" and "Layers (front)". When adding a new layer in the Preview panel, it will be added in the "Layers (back)" group.
   • The "Program Area" layer is placed between these two sets, and acts as a placeholder for the Fusion Program activated by the user. Note that the Program's content is loaded within this layer as big as possible, but without altering the Program's aspect ration, nor cropping the content.
9. Set the Skin options (i.e. elements that can be editable within Fusion interface).
10. If needed, you can use multiple SVG files inside the Skin to add more functionalities. These should be loaded from the skin.svg content.
11. Finally, archive the Skin (see below) and upload it into Fusion.
    • Alternatively, you can archive the entire Style Pack and upload it into Fusion.

Skin archiving

To archive a Skin, follow these steps:

1. Right-click on the Skin icon inside the Browse panel. (Or click on the "Menu" icon in the toolbar, then select "Projects".)
2. Select the "Archive..." option.
3. Select where the 7z archive file will be saved and set the name of the file.
4. Click on the "Save" button.

Using HMD Professional

Skin creation

HMD - New Skin

HMD - Initial Skin view

To create a Skin using HMD Professional, follow these steps:

1. Open My Fusion Elements workspace and decide where to create the Skin.
   • You can create a standalone Skin or as part of a Style Pack (within the "skins" collection).
2. Right click on the browsing panel and select the New Skin option.
3. Set the name and the format of the Skin.
4. Press OK. (A new collection is created, containing a single file: skin.svg)
5. Open skin.svg and create the Skin layout. (See the "Skin editing" section below)
   • On the "Properties" tab, note the presence the Main media element, describing where Fusion will place the Program. This special layer is placed between the two sets of layers, "Layers (back)" and "Layers (front)", that are available to further customize the Skin layout.
   • When adding new layers within the Preview panel, these will be added in the "Layers (back)" group of layers.
   • You can use multiple SVG files inside the Skin to add more functionalities.
6. Set the Skin options (i.e. elements that can be editable within Fusion interface).
7. Finally, archive the Skin (see below) and upload it into Fusion.
   • If the Skin is part of a Style Pack, then export the Style Pack and upload it into Fusion.

Note: See also the Webminars section from the SpinetiX main website.

Skin archiving

To archive a Skin, follow these steps:

1. Open My Fusion Elements workspace and find the Skin to archive.
2. Right click on it and choose the "Update metadata" option. (To make sure that all previews are generated before exporting the Skin)
3. Right click on it and choose the "Archive" option. (A new window will open)
4. Select where the 7z archive file will be saved and set the name of the file.
5. Press the "Save" button.

Example

HMD - Simple Skin

Fusion - Simple Skin

To create a Skin like the one presented on the right, follow these steps:

1. Create a new Skin (as explained above) and open it.
2. Delete the existing text layers from the "Layers (back)" and "Layers (front)" tabs.
3. From the Preview panel, move the only layer left ("Program Area") towards the top-right corner.
4. Open the "Properties" tab and click on the lock button next to the "Program Area" layer.
5. Open the "Layers (back)" tab. (Here is where the rest of the layers will be added.)
6. In the browsing panel, create a collection called media, open it and import there a background image and a clock.
7. Drag & drop the background image into Preview panel. Right-click on it and make it full screen. Lock this layer.
8. Drag & drop the clock into Preview panel. Move it to the left side and adjust the size of the clock.
9. Insert a media layer, type [Fusion] as URI, enable the "Fusion editable" option, input a Fusion label (e.g., "logo") and press the OK button. Move it to the top-left side and adjust its size.
10. Insert a new text layer, move it to the bottom side, adjust its size and properties. Make sure to enable the "Fusion editable" option and to input a Fusion label (e.g., "Custom text").
11. Save the changes.
12. To use this Skin: archive it, then upload it into Fusion and activate it.