Versions Compared

Old Version 2

changes.mady.by.user BrightSign TechDocs

Saved on

compared with

New Version Current

changes.mady.by.user BrightSign TechDocs

Saved on

Key

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

...

Adobe Photoshop is used as the example content creation application, but other applications such as Gimp have similar functionality.

Tip
titleTip

Download this .zip file for examples of functional BrightPlates templates.

Generating an HTML Template

...

  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

HDx24, LS424, HDx23, LS423, and HDx22 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

...

  • The BrightPlates template uploader does not perform error checking on the HTML/CSS code. Test your template thoroughly before uploading it.
  • We recommend creating templates that contain fewer than 100 files. If the template contains close to 100 files, the average file size should not exceed 650-700 KB. The template upload process may fail if these limits are exceeded.
  • Each browser treats fonts slightly differently: We recommend testing your template on a BrightSign player (rather than just the browser on your computer) to ensure that text is not truncated or misaligned.
  • We recommend using absolute positioning—with percentages—for all elements.
  • We recommend using inline CSS styling.
  • Avoid nested <div> elements whenever possible.

...

  1. Take a screenshot of the HTML page in your HTML authoring application or web browser. Save it as "preview.jpg" in the same folder as the HTML page.
  2. Place the HTML page, background image, preview image, and any other related content into a .zip folder.
  3. Navigate to http://www.brightplates.biz/.
  4. Log in to your BrightPlates account.
  5. Click Manage Templates in the top-right of the page.
  6. Click Upload new template. This will open the Upload Template window.
  7. Click Browse to locate and select your .zip file.
  8. Enter the name of the HTML template file in the Template filename field (e.g. index.html).
  9. Select the Category (i.e. vertical) to which the template belongs.
  10. Specify the Orientation of the template.
  11. Enter a Title for the template. The title will be visible in the Templates browser in the BrightPlates UI.
  12. Enter a Description for the template. The description will be visible when the template is selected in the Templates browser.
  13. Uncheck the Enable JQuery box if you are new to creating BrightPlates templates. This option enables advanced data parsing and server interaction.
  14. Click Upload to upload the template to BrightPlates. It will be visible in the Templates browser momentarily.
Note
titleNote

If you're encountering errors when uploading a template created on a Mac, see this FAQ for more details and a workaround.