PDF content

Applies to all DSOS players except HMP350, HMP300, and DiVA.

Introduction

Portable Document Format (PDF) is a widely used file format developed by Adobe Inc. It is designed to present documents consistently across different devices and platforms. PDF files can contain a variety of content such as text, images, and graphics. One of the main advantages of PDFs is that they preserve the formatting of the document, ensuring that it appears the same way regardless of the software, hardware, or operating system used to view it.

Support

The native support for player's rendering of PDF files was introduced in DSOS 4.6.0. At the same time, Elementi 2021 (4.6.0) added the capability to handle PDF files, including features for importing multi-page PDFs as playlists and managing their individual pages.

Support is optimal for the ISO PDF/A standard, which is the default version used when exporting from Word or PowerPoint, or by the "print to PDF" function in Windows.

Note:

Some PDF files might contain advanced functions, such as scripting and forms, which are not supported – in general, this means that the PDF will be displayed as best as possible. Encrypted and password-protected PDFs cannot be displayed.

PDF support in SpinetiX ARYA

SpinetiX ARYA™ CMS offers support for PDF content, as well – when uploading a PDF file into ARYA, it gets converted into a collection of images, grouped under one project. This allows for more flexibility, as each project's page can be edited individually and others apps can be added, but it differs fundamentally from that of DSOS, which renders PDF files natively, preserving text and graphics without conversion.

See the full article on how to use PDF files in SpinetiX ARYA.

Elementi tutorials

The following tutorials show how you can use PDF files with Elementi.

Import a PDF file

It is recommended to import your PDF files into your Elementi project, as this ensures that their content is always available to the players, independent of the network connection.

To import a PDF file, follow these steps:

Create a new Elementi project or open an existing one.
Click the Menu → File → Import... option on the toolbar, select the PDF file you wish to import, and click "OK".
- You can also drag the PDF file from the File Explorer and drop it into the Browse panel of Elementi.
- If the PDF file contains multiple pages, a distinct folder (see its icon on the right side) is created containing both the original PDF file and a playlist ("pages.svg") having each page as a separate item.
Drag and drop the PDF file/folder into the Preview panel or Edit panel to include it in the project's main index file.
In case of a PDF playlist, you can:
- Change the order of the pages, or toggle their visibility with the radio button under the "Show" column.
- Use the toolbar buttons to change how the page is fitted (fill, meet, or slice) or aligned within the layer zone.
- Click the button to adjust the display duration (5 seconds by default) and fine-tune each layer properties.
- Change the default display duration for all the pages by clicking the button and enter a new media duration.
Save your project and publish it to your player.

Display an external PDF

Let's say that the PDF file is hosted on a web server – the file could be downloaded and imported into the project (as shown above), but that would need to be repeated each time the PDF gets updated on the server. For this case, it's best to link directly to the PDF file online, as follows:

Create a new Elementi project or open an existing one.
Add a new media layer using the button on the toolbar.
In the URI field, enter the HTTP(s) address of the PDF file.
Click the OK button. The first page of the PDF file is displayed in the Preview panel.
In case the PDF file has multiple pages, you can specify the page to display by appending #n to its URI, where n is the number of the page in the original file.
- For example, to display the second page of this PDF file, use: https://download.spinetix.com/content/demo/Sample_PDF.pdf#2
- See also the next tutorial about how to display multiple pages from an external PDF file.
Use the toolbar buttons to change how the page is fitted (fill, meet, or slice) or aligned within the layer zone.
Click the button to fine-tune the layer properties.
Save your project and publish it to your player.

Display multiple pages of an external PDF

The tutorial above shows how to display one page of a PDF file hosted on a web server. To display multiple pages from that PDF file at the same time, we can simply create a separate media layer for each page to display. There is, however, the matter of HTTP caching that must be dealt with, either by using unique URIs or by disabling the caching.

Unique URIs

In this case, we'll change the URI of each media layer by adding a unique query string, before the fragment part (#n). The query component is preceded by a question mark (?) and is most often a sequence of attribute–value pairs separated by a delimiter, although you can also use just a string (e.g., page1, page2, etc.).

http(s)://host/path/file.pdf?query#fragment

See the "URI syntax" section for more details.

The image above shows a project with three media layers displaying different pages of the same PDF:

The first layer uses the original the file URI: https://download.spinetix.com/content/demo/Sample_PDF.pdf
The second layer uses: https://download.spinetix.com/content/demo/Sample_PDF.pdf?p2#2
The third layer uses: https://download.spinetix.com/content/demo/Sample_PDF.pdf?p3#3

Note the usage of ?p2 and ?p3 queries to create two more entries in the cache for the same PDF file.

Disable caching

If the above method cannot be employed, it is possible to deactivate the caching, using the spx:cacheMaxAge attribute with its value set to 0.

Warning:

Disabling the cache means that the PDF file will be downloaded multiple times, every time one of its pages is displayed.

For each media layer, follow these steps:

Click the button to open the Layer Properties dialog.
Go to "Advanced" tab.
Click on the "Click to add..." field under the "Name" column. The selection box is expanded.
Select the spx:cacheMaxAge attribute from the list.
Click on the right column next to it (under the "Value" column).
Type 0 and press "Enter" on your keyboard.
Click the "OK" button to apply it.

Multiple external PDF files

Let's say that we want to display multiple PDF files that are stored in folder online (e.g., Microsoft OneDrive, Google Drive, etc.).

Note:

In case any of these PDF files contains multiple pages, only the first page will be displayed.

For that, follow these steps:

Create a new Elementi project or open an existing one.
Click the Widgets tab in the Browse panel and open the "Media" folder.
Drag & drop the Media Playlist widget from the Browse panel into the Preview panel or Edit panel. The widget is automatically copied within your opened project.
Go back to your project's tab and double-click on the widget's icon to open it.
Configure the data source:
- Click the button to open the Data Properties dialog.
- Select the desired Channel and the Account to use.
- Click Change and select the folder where the PDF files are stored.
- Click the Test button to check if the widget returns the list of PDF files.
- If the folder contains other types of media aside from PDF files you wish to display, click on Filter and type *.pdf directly in the field.
Configure the "Media template" layer:
- Click the button to open the "Layer Properties" dialog.
- Make sure that the URI data placeholder is set to [[href]].
- Fine-tune the media layer properties.
Test that the widget displays the first page of each PDF file located in the selected folder, one after another.
Save your project and publish it to your player.

Conclusion

Using PDF files in Elementi is straightforward. The tutorials above show how you can import a PDF file into your project, reference it online, or create a playlist of multiple PDFs. By following the steps detailed above, you'll be able to effectively integrate and showcase PDF content in your Elementi projects.