Project:Line breaks

Specifications

Line Breaks Project

Version 1.0

• Category: Feeds
• Author: SpinetiX S.A.
• License: GPL Version 3
• Target: HMD

Description

Sample project

This is an advanced HMD project that use custom JavaScript code to retrieve news from an XML source and display them on the HMP. The script looks for possible line breaks in the input text. If any are found, the text will be split in separate lines on the screen.

This script is based on the concept of ID, and will replace the text content of the SVG document with the information returned by the news feed. Each news item will be displayed on a separate page during a fixed amount of time.

• The script will search for element whose id is equal to one of the entry defined in the variable name.
• For textArea the content of the element will be replaced by the content of the news.
• For image and animation tag the xlink:href attribute will be modified.

Note that the script is designed so that the news is loaded once when the document is opened.

Controlling the parameters

• Open the JavaScript file with a text editor.
• The line var uri = "sample.xml"; controls the the source of the data
• The line var item_dur = 10; controls the display duration of each item.
• The line var looping = true; controls whether the news should loop forever or not.
• The line var names=["title", "description"]; list of the id to be replaced.
• The line var separator = "\n"; controls the separator use to detect line breaks in the input source.
• Save the JavaScript file

Note: When using firmware 2.2.4, the following special characters: "\n", "\r" and "\t" are converted into spaces when the data source is parsed, therefore none of these should be used as the separator character. You can use any other character(s) as separator (for instance "##" string). This issue has been fixed in 2.2.5.

Controlling the layout

The layout is controlled in the SVG file calling the script. The SVG file can be edited by HMD for the layout. However it is necessary to use the XML Tree View to modify the Id of the elements that will be modified by the script.

• Open the XML Tree View
• Find the element you want to be modified by the script
• If the element already has an id or an xml:id, modify this id to match the element name of the source, otherwise add an new attribute called id.

How does it works

If the news feed contains the following entry:

<description>Item to display:\n-First item\n-Next item</description>

And the script is configured to use this element:

var names=["description"]; 

The SVG file containing the the following element will be replaced by the content of "description" preserving the line breaks:

<textArea id='description'>xx</textArea>

Resulting in the following document:

<textArea id='description'>
 <tspan>Item to display:</tspan><tbreak/>
 <tspan>First item</tspan><tbreak/>
 <tspan>Next item</tspan>
</textArea>