XML Tree view in HMD

This page is related to Hyper Media Director software.

Introduction

HMD - XML Tree view

The XML Tree is one of the tabs available in the Editing panel when opening an SVG document in HMD and is appropriate for users with some knowledge of SVG. It shows the SVG code in a friendly tree-structure and allows you to easily make modifications inside the XML/SVG document directly using the HMD User Interface (UI). The available options are displayed on mouse right-click.

Using the XML Tree view, you can:

• "Fine tune" the content, for instance: changing the position and / or size of a layer, changing the properties of a text layer (like the font or the color), adding rounded corners to a rectangle, cropping an image etc.;
• Add the "special" elements that will be recognised by the HMD as user-customisable fields.
• Add the "special" ui attribute that will be make an attribute or a text as user-customisable within Fusion.

For more complex vector graphics or animations, you can use Inkscape, Adobe Illustrator or other applications that are able to export to SVG.

Identifying a layer

HMD - XML Tree tab

HMD - Layers tab

When using the common HMD multilayer document, the list of layers can be found under the "Layers" tab. When opening the "XML Tree" tab, the same layers structure is shown under the group "layers" (e.g. <g id='layers'>). Each layer is usually represented within two group elements (<g>) and followed by (depending on the type of layer):

• <image> for an image media layer;
• <video> for a video media layer;
• <animation> for a media layer including an SVG file;
• <textArea> for a text layer without background;
• <g> followed by a <rect> and a <textArea> for a text layer with background or border.

In case of more complex layers, other elements might also be present.

Fine tuning of the content

Position and size of media

The position of a media element is controlled by the x and y attributes or by the transform attribute (this is the option used by HMD to position layers). You can edit either of these to set the exact position of the media element.

The dimensions of a media element are controlled by the width and height attributes. These are the same attributes that are modified when using the advanced section of the properties dialog in the HMD UI.

Text colour

For a text layer, HMD allows the configuration of the text colour using a predefined palette of colours. If you need to specify other colours in hex code, then using the XML Tree view:

1. Find the text layer to be modified (see "Identifying a layer" section above);
2. Find the fill attribute under the <textArea>, or the <tspan> element.
3. Change the attribute value to the desired hexadecimal colour code.
4. Save the changes.

Note: To make the text colour customizable by users not familiars with the XML Tree view, use the Make color editable action from the right-click menu on the attribute - this will make the text colour configurable from the Properties view.

Font parameters

Editing the font-weight

HMD allows the configuration of several properties of the font used on a text layer directly from GUI. Sometimes finer control over these parameters may be necessary. Using the XML Tree view, find the textArea or the tspan element and:

• Set the font-size attribute to an exact value (expressed in pixels).
• Set the font-weight attribute to an exact weight, in case the font is composed of more variants than just normal and bold. (common for fonts made up of many separate files)

Note: To control the space between the text lines of a textArea element, add a line-increment attribute and set it to a custom value (e.g. 50).

Add background colour

There are two ways to specify a background colour for an SVG document:

1. Using the viewport-fill attribute, with or without an additional viewport-fill-opacity attribute, under the <svg> element.
   • The SVG documents created with HMD have this as a configurable option on the Properties tab.
   • These attributes are ignored when the SVG document is included into another SVG document - see the explanation below.
2. Using a <rect> element covering the entire viewport.

Why the background colour is not shown?
An <animation> element is used to include / reference another SVG file - this will establish a new viewport for the referenced file, thus ignoring the width, height, preserveAspectRatio, viewport-fill and viewport-fill-opacity attributes set on the root-most <svg> element in the referenced SVG document. Therefore the background colour and opacity properties of an SVG document are used only when the SVG document is opened directly, but not when is referenced from another SVG document. To bypass this, you need to manually add the 'viewport-fill' and 'viewport-fill-opacity' attributes on the <animation> element with the desired values.

Note: Some HMD Templates ("Playlist", "news_crawler", "news_ticker" and "switch") offer a background property which is shown even if the template is included into another document - the reason being that these templates are not using the 'viewport-fill' attribute, instead a rectangle is drawn behind using JavaScript.

Add rounded corners to a text layer

Add rounded corner

Text layers with a background and/or a border are composed of a <rect> and a <textArea> element. HMD UI allows setting the colour and transparency of the background, as well as the colour and size of the stroke (outline); to obtain the rounded corners effect on that text layer, add the rx and ry attributes for the inner rectangle:

1. Find the text layer to be modified (see "Identifying a layer" section above);
2. Find the <rect> element inside the text layer;
3. Add the rx and ry attributes
4. Set their values according to the amount of corner rounding desired;
5. Save the changes.

Crop a media layer

Crop an image

As specified in the SVG page, some basic clipPath are supported by the HMP. To crop an image or a video, a rectangle-shaped clipPath can be used as following:

1. Find the text layer to be modified (see "Identifying a layer" section above);
2. Add a <clipPath> element ( ALT+C );
3. Add an id attribute (e.g. xml:id) to the clipPath ( ALT+A );
4. Add a <rect> child to the clipPath element;
5. Add the x, y, width, height attributes on the <rect> element.
6. Under the <image> or <video> element you want to crop, add a clip-path attribute and set its value to the id of the clipPath element set above.

Special elements

HMD recognises the SpinetiX special elements inside the SVG file and uses them to add user-customisable fields within the UI. These elements are grouped under the <spx:properties> element. See HMD Template Authoring page for the detailed description of these elements.

For example, you can add new configurable attributes to any SVG file using the XML Tree view, like this:

1. Select the element or attribute to be customizable by the user;
2. From the right click menu click Make … editable;
3. This will add an entry under <spx:properties> and a corresponding field in the UI.

The "ui" attribute

The "special" ui attribute will make an attribute or a text as user-customisable within Fusion. For more details about this subject, see how to add options for Skins and Templates.