Versions Compared

Old Version 11

changes.mady.by.user BrightSign TechDocs

Saved on

compared with

New Version 12

changes.mady.by.user BrightSign TechDocs

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Open the generated .html file using an HTML editing application (e.g. Dreamweaver). If you don't have such an application, use a plain text editor (e.g. Notepad, Textedit).
  2. Edit the body element in the CSS section to include a desired font family. Photoshop will not include fonts from the saved template by default.
  3. Create a CSS id named #template and include the properties and values as shown in the screenshot below. Ensure the following:
    1. The position is absolute.
    2. The width and height properties are 100%.
    3. The background-image property matches the name of the background image saved as part of the page files by Photoshop.
  4. Navigate to the <body> portion of the HTML. Notice that the HTML body consists of a number of <div> templates that correspond to the slices created in Photoshop.
    Image Removed Image Added 

  5. (Optional) If you want the background image of the template to be customizable in BrightPlates, you will need to add the following to the <body> tag: 

    Code Block
    data-template-background="background.jpg"
  6. In the <div> tags that correspond to editable images, enter data-block-type="image" in the tag.
  7. In the <div> tags that correspond to editable videos, enter data-block-type="video" in the tag.
  8. In the <div> tags that correspond to dynamic data, enter data-block-type="mrss" in the tag. Because BrightPlates always uses Live Media feeds, you will need to specify the block type as "mrss" even if the feed only contains text.
  9. For each item in a dynamic data <div>, do the following:

    1. Create a <div> ag  tag for the item formatted as follows. The other <div> elements created in steps b through e will be placed within the boundaries of this <div> element. 

      Code Block
      <div data-block-item="mrss">
</div>

    2. If the item contains an image, create a <div> tag formatted as follows:

      Code Block
      <div data-item-media="image" class="itemImage" />
      Note
      titleNote

      Video via MRSS is not supported in BrightPlates templates.

    3. Create a <div> tag for the title formatted as follows: 

      Code Block
      <div data-item-type="title" class="itemTitle" />

    4. Create a <div> tag for the description formatted as follows: 

      Code Block
      <div data-item-type="description" class="itemDescription" />

    5. Below the <div> tag for the description, you can add any number of custom data fields by adding additional <div> tags. The data-item-type of the <div> should equal the name of the custom field in the BSN Live Media Feed (created using the Add Custom Field button in the WebUI). For example, a custom field named "Caloriecount" in the Live Media Feed would correspond to the following: 

      Code Block
      <div data-item-type="caloriecount" class="itemCaloriecount" />

 

Warning
titleImportant

We strongly recommend stating the maximum character limit for item titles, item descriptions, and custom data fields in the default text. This will help the end user create dynamic text that does not get cut off when it is displayed in the template.

Building Templates for HD/LS Players

HDx23, HDx22, and LS423 players support BrightPlates presentations, but these models have a single video decoder (rather than the two video decoders offered by the XD, XT, and 4K models). This leads to several limitations that you need to consider when creating a BrightPlates template:

  • The template can either have one video <div> tag or a set of MRSS <div> tags.
  • By default, a video decoder is used to display the background image (this ensures it is always placed behind other content); however, on single-decoder models, there will be no decoders left to display MRSS content. To work around this limitation, you will need to do the following:
    • Add the background-color:transparent property to the <div> tag for the playlist/MRSS block.
    • Ensure the background image is a .png with an alpha channel for transparency, and add a transparent window that is the same size and location of the playlist/MRSS block.

Code Block
languagexml
titleExample Playlist <div>
<div id="playlist" style="position:absolute; left:400px; top:100px; width:500px; height:800px; background-color:transparent; z-index=0 " data-block-type="dynamic-playlist">

Additional Steps for Portrait Templates

...