Displaying a text file

Introduction

Final result

This tutorial explains how to display the content of a text file as part of a layout. The tutorial is based on the Create a master playlist tutorial and assume it has already been followed.

In this tutorial we will create a Layout and use the Text file widgets to display a text files edited from word.

One of the key feature of Elementi is to provide a set of Widgets ready to be use in the Library to display data from files or servers.

You can download the project resulted after following this tutorial from the link below.

Video

For full screen, see this video on Vimeo.

Tutorial

Displaying a Text file project

Version 1.0 (2015-12-03)

Difficulty: Easy.
Total duration: 5-10 minutes.
Requirements:
- Elementi 2015 or later. (The latest version is recommended.)
- (Optional) One or more HMP devices using firmware 3.2.0 or later for the publishing part of the tutorial. (The latest version is recommended.)

Text file

Text editing

Saving text file

First, let's create the text file to be displayed in the layout.

Open MS Office Word and create a new document.
- Other text editors can also be used to create the text file. If non-Latin characters will be used, then the editor must be UTF-8 compatible.
- Note that it is not possible to create text file with Office Online.
Type the text you want to be displayed.
- Do not use any formatting in the document as that is lost when saving the document as plain text file.
Open the save dialog and select a location on your local hard drive where to save the file. Enter "stretching.txt" for the file name
Select "Plain Text (*.txt)" as document type.
Press the "Save" button.
- At this point, Word automatically opens the "File Conversion" dialog.
Under "Text encoding", select "Other encoding" and then "Unicode (UTF-8)".
- This ensures that non ASCII characters are kept and displayed as expected.
Press on the "OK" button.

Your text file in now ready to be imported inside the project.

Getting started

To get started, follow Create a master playlist tutorial. Once done, make a copy of that project, rename the copy to "Datafeed-text" and then open it.

Create a new layout and call it "Stretching", select a 16:9 format, a white background and make sure the last check-box is not checked.
Double-click on the layout icon to open it. Double click on the "index.svg" file to open it in the Preview panel.
Import the background image.
Drag & drop the image from the browse panel into the preview panel (or into the edit panel) to create a media layer. Click on the "Fit Screen" button on the toolbar to make sure the background layer occupies the entire screen.
Change the transparency of the background using the edit panel and clicking on (the "Layer Properties" button) next to the text layer. This opens the Layer Properties dialog and let you change the Opacity of the layer to 0.3.
Lock the layer by clicking on the "Lock" icon within the edit panel.
Import the text file.
- The text file will be copied from your local hard drive into the project. If you update the text file using the text editor, it will need to be imported again.
- Importing a text file is done the same way as for any media file (See this video about importing media in case of need).

Importing Text widget

Text Roll widget

Next, let's import the Text Roll widget into the current layout.

Click on the "Library" tab within the browse panel. This opens the Elementi Library.
Open the "Text" folder and find the "Text Roll.svg" widget.
Drag & drop the widget from the browse panel onto the preview panel. A new media layer is added on top of the other layers.
Go back to the project by clicking on the "Datafeed-text" tab in the browse panel.
Position the widget to occupy most of the layout.

Note that the widget file was automatically copied into the current project upon import.

Configuring Data source

Data Feed Properties

Testing data feeds

Next, let's change the widget data source from the default one pointing to the SpinetiX server (i.e. displaying the "Lorem ipsum ..." text) to the imported text file.

Double-click on the "Text Roll.svg" layer within the edit panel. This opens the widget within the main layout context (i.e. without closing index.svg document).
Click twice on the "Data source" property. This opens the "Data Feed Properties" dialog.
Enter the name of the text file to be displayed ("stretching.txt")
Click on the "Test..." button to verify the results.
Click on the "OK" button to save the changes to the data source.

Configuring Text widget

Configuring text roll

Next, let's modify the configuration of the widget.

Reduce the scrolling speed to 50.
Increase the spaces between the sentences to 200 pixels.
Reduce the number of lines to be displayed to 8.
Edit the text layout to change the color of the text.
- Click twice on the "Text template" property. This opens the "Edit Text" dialog.
- Select the default "[[title]]" (which is a placeholder for the line of the text)
- Use the color picker to change the color of the text.
Click on the "OK" button to save the changes to the text template.

Save your work, the layout is completed.

Master playlist

Add to master playlist

Finally, let's add the new layout to the master playlist and insure that all the advice are displayed.

Go back to the root of the project by clicking on the "Datafeed-text" name in the breadcrumb.
Double click on the project master file "index.svg" to open it in the Preview panel.
Double-click on the playlist layer inside the preview panel (or edit panel) to open the playlist within the main layout context (i.e. without closing index.svg document). See more details about editing within layout.
Drag & drop the "Stretching" Layout from the browse panel into the edit panel.
Click on (the "Layer Properties" button) next to the layout in the edit panel.
Change the duration to "Specify" and set the duration to one minute (You can type "1:00", Elementi will automatically convert it to an h:mm:ss notation: "0:01:00")

Save your work.