• Multi-page Presentations are best created in one Presentation and should not use embedded Presentations where possible.

• When adding an image to a Presentation that must execute some code when clicked (e.g. a button), use a Placeholder with a background image and attach an onclick attribute to the resulting div tag.

• If you find that you need to use an empty Placeholder somewhere in a Presentation (i.e. a Placeholder with no Play list items and no background image), then either:
• Don’t create it as a Placeholder and instead add the div tag directly to the HTML and style it with CSS, or
• Create it as a Placeholder so that the CSS is automatically generated, but then remove the placeholder="true" attribute. This will remove clutter from the Design view and kick empty Placeholders out.
• Using the Chrome Developer Tools, check the console for errors when testing and resolve any that are directly related to the Presentation.

• You may find it helpful to comment any custom Javascript that is in the HTML. This will make it easier to maintain the Presentation going forward.

• When initially loading a Presentation, all Gadgets that do not appear on the home page should be paused. When the user moves to a different page of the Presentation, all previous Gadgets should be paused and all Gadgets on the new page should be started. (Look for a blog post next week on how to do this).

• Where possible, place Javascript code just before the closing body tag.

• Only include code in a Presentation that is actually needed. It is not a good idea to copy the same code from Presentation to Presentation, as what was needed in one Presentation might not be needed in another.

Do you have any other recommendations to share? Leave us a comment or let us know in the forum.

Sequence is a jQuery slider plugin that provides the functionality of a slide transition mechanism without locking you in to a pre-defined theme, leaving you the creative control to build a unique slider using CSS3. What this means is that Sequence takes care of assigning the right CSS class names to the right elements at the right time. All you have to do is specify what the animation looks like using CSS. Or, if your CSS skills are not particularly sharp, you can select from one of 3 themes – Modern Slide In, Apple style or Sliding Horizontal Parallax. I used the Modern Slide In theme to create this basic Presentation:

Here’s how you can recreate this look:

• Download the Sequence script from here.
• Download the Modern Slide In theme.
• After you have uploaded the script and theme to a server, link to them both in your Presentation’s HTML.
• Add Sequence’s simple HTML structure:
  <div id="sequence">
  <ul>
    <li> <!--Slide 1 content here--> </li>
    <li> <!--Slide 2 content here--> </li>
    <li> <!--Slide 3 content here--> </li>
  </ul>
</div>
• Initiate an instance of Sequence, passing in the configuration options that you want. In the example below, I am initializing the plugin to automatically start the slideshow, and to display each slide for 3000ms (3 seconds). You can see the full list of options here:
  <script type="text/javascript">
  $(function() {
    var options = {
      autoPlay: true,
      autoPlayDelay: 3000
    }
    var sequence = $("#sequence").sequence(options);
  });
</script>
• Customize or override the CSS in the theme as needed. I found that I needed to override some of the colours, fonts and positioning of the theme to fit with my particular content. You can do this directly in the Presentation’s HTML or in the theme itself.

Sequence has some very good documentation. I highly recommend reading it if you have any problems. Also, keep in mind that this plugin is in beta, so it may be buggy. You can view a live demo here.

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Fondamento">

Once we’ve linked to the font, we need to actually use it somewhere. The following CSS will apply the font to the entire body of the Presentation. Notice that I’m specifying serif as a fallback font. This is a web safe font that will be used if the custom font is not available. You should always list at least one web safe font in case things go wrong:

body {
  font-family: 'Fondamento', serif;
}

Here’s what that font looks like in my Presentation:

If you try this, you may notice that text in Gadgets and Text Items are not affected. That’s because those components are rendered in iframes, so the Google Web Font has to be included directly inside of the particular Gadget or Text Item, as opposed to adding it to the HTML of the Presentation. For example, add this in the HTML view of a Text Item to apply the Fondamento font:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Fondamento">
<style>
    .fondamento {
        font-family: 'Fondamento', serif;
    }
</style>
<p class="fondamento">This is my custom font.</p>

You can request multiple fonts by separating them with the pipe (|) character:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Fondamento|Share">

The regular style of any requested fonts are returned by default. If you want to use another style, such as bold or italic, you need to add a colon (:) at the end of the font name, followed by the style you would like. For example, a request for a bold version of the Share font would look like this:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Share:bold">

I think it’s important to mention that the CSS stylesheet URL used here is not the same type of URL that you would use when specifying a custom font for a Gadget. The URL used by the Google Web Font API points to a CSS file, while the URL you would use in a Gadget links directly to the font file itself.

As with any other plugin, start by downloading the code from here and uploading it to a host server. Next, add a container with an ID attribute for holding the text:

<div id="txtlzr">
</div>

In the HTML of your Presentation, include a link to the Textualizer script file:

<script src="path/to/textualizer.min.js"></script>

Now we can add some Javascript to configure the plugin with the text and options that we want:

<script>
  $(function() {
    var list = ['This is some text',
      'that we would like to apply',
      'some transitions to.'];
    var txt = $('#txtlzr');
    //Configure the plugin.
    txt.textualizer(list, {
      duration: 1000,          //Time (ms) each snippet will remain on screen.
      rearrangeDuration: 1000, //Time (ms) a character takes to reach its position.
      effect: 'random',        //Animation effect the characters use to appear.
      centered: true           //Centers the text relative to its container.
    });
    txt.textualizer('start');
  });
</script>

Here we start by declaring a list variable which holds an array of text that the plugin will cycle through. Next, we configure the plugin with the options we would like. We can specify how long the snippet will be displayed for (duration), how long it takes each character to transition into position (rearrangeDuration), the type of animation to use (effect), and whether or not the text should be centered within its container (centered). After that, it’s just a matter of telling the plugin to start.

Click here to see the live demo.

Providing a link so that users can create accounts under your Network Operator Company requires two things; You have to be a Network Operator (check out this link for info on being one), and you need your Company ID. Click on the Network link, and on this page, you can confirm you’re a Network Operator, AND get your Company ID from the address bar:

Once you have both of those, now you can use this link anywhere you wish.: http://rva.risevision.com?parentId={ID}; (replacing the brackets and ID with your Network Operator Company ID).  When a user clicks on that link and they don’t have an account, they will be asked to sign in with their Google or Gmail address, and voila, they are now a Company under your Network Operator Company. Simple as that.

What if they already have a Company and want to move under you? For that, you will need their Company’s Authentication Key. Ask them to click on the Settings link, and at the bottom of this page they can see the Authentication Key:

Once you have their Authentication Key, log into your Network Operator Company, go to the Settings page, and choose the option “Move a Company”. Enter the Authentication Key, confirm that is the right Company, and presto, all done.

I hope you found these tips useful, and if you have any questions, please feel free to ask us in our very active community forum!

To implement this, we leverage the jQuery idleTimer plugin. The plugin works by starting a timer; if the timer expires without someone interacting with the Presentation, a custom event is fired. All you need to do is handle this event by navigating to the home page.

The plugin is available for download on GitHub. After including it in your Presentation, you start the timer with this line of code:

$.idleTimer(60000);

The parameter that is passed to this function is the timeout value in milliseconds. In this case the timer will expire after 60000 milliseconds (60 seconds).

You also need to add code to handle the idle.idleTimer event that the plugin fires when the timer expires:

$(document).bind("idle.idleTimer", function() {
   //Show the home page.
});

It’s a good idea to destroy the timer before starting a new one. You can do that like this:

$.idleTimer('destroy');

To see the code that we used in the Tradeshow Presentation, click here and then select Copy Template from the Preview bar.

Lettering.js is a plugin that provides fine-grained control of text, allowing you to easily style individual letters within that text. It is a popular plugin, and is used as the basis for both Kerning.js and Arctext.js. All the plugin does is wrap each letter, word or line in a span tag and gives each its own class name. You can then use these class names as CSS selectors to apply some styling. 

In your Presentation’s HTML, add the text that you want to style:

<p class="fancy">Fancy Title</p>

Download the plugin from here. Before the closing body tag, link to the plugin file and call the plugin on the text:

<script src="path/to/js/jquery.lettering-0.6.1.min.js"></script>
<script>
  $(document).ready(function() {
    $(".fancy").lettering();
  });
</script>

The HTML will be rendered as:

<p class="fancy">
  <span class="char1">F</span>
  <span class="char2">a</span>
  <span class="char3">n</span>
  <span class="char4">c</span>
  <span class="char5">y</span>
  <span class="char7">T</span>
  <span class="char8">i</span>
  <span class="char9">t</span>
  <span class="char10">l</span>
  <span class="char11">e</span>
</p>

All you need to do then is add the CSS to make everything look pretty. For the Fancy Title text, I gave every second letter a different colour:

.fancy {
  color: rgb(234, 153, 153);
}
.fancy .char1, .fancy .char3, .fancy .char5, .fancy .char7, .fancy .char9, .fancy .char11 {
  color: rgb(224, 102, 102);
}

Instead of breaking text up into individual letters, you can break it up into individual words or lines as described here.

You can view a demo Presentation and inspect the HTML here.

Here are a couple of things you may want to try with content sync:

Menu: With 2 Placeholders beside each other, one Placeholder’s Text item can describe the dish, ingredients, signature chef, etc, while the other Placeholder can have an image of what the dish looks like. Two totally separate items in 2 different Placeholders, moving together at the same time. Adding a transition so they appear to slide into each other makes it super cool.

Separate RSS Feeds that have a logo: To me I just think this looks COOL. Take 2 Placeholders and put one above the other one.  In the top Placeholder add the logo for CNN and Rise Vision, each play for 10 seconds, and make the Placeholder transition “Slide Down”. In the bottom Placeholder, Add two RSS List Gadgets, change the Scroll Direction in both Gadgets to Up, and change the Time Between Items to 5 seconds. Both Gadgets go for 10 seconds each, with a Placeholder transition of “Slide Up”.  Preview or put that Presentation on a Display, and now you have the logo showing while the RSS Lists show below. Very neat!

See what the two  scenario’s above look like in this Presentation Template I have shared from my test Company.

I hope everyone gets a kick out of the new stuff content sync allows you to do, and if you have any questions, please feel free to post them in the forum! Thanks!

Image maps can be thought of as hot spots within an image. The first thing you’ll need to do is determine the coordinates of each of these hot spots. When building the Campus Concierge Presentation, I simply opened the background image in MS Paint, and noted the coordinates that defined each of the tabs. With coordinates in hand, I was then able to write a Javascript function to create the image map in the Presentation’s HTML. Here’s a snippet of what that looked like:

function initImageMap() {
   var backgroundImage = getPlaceholderIFrameIds("CampusNewsBackground")[0];
   var imageMap = {
     name: "tabs",
     areas: [
       {
         shape: "poly",
         coords: "0, 0, 218, 0, 212, 82, 0, 68",
         title: "CampusNews"
       },
       {
         shape: "poly",
         coords: "219, 0, 377, 0, 379, 75, 217, 82, 215, 45",
         title: "Events"
       }
     ]
   }
   if (backgroundImage) {
     document.getElementById(backgroundImage).contentWindow.addImageMap(imageMap);
   }
}

Let’s break this down to see what the code is doing. The first line is:

var backgroundImage = getPlaceholderIFrameIds("CampusNewsBackground")[0];

I’ve talked about getPlaceholderIFrameIds before. This code gets the first iFrame that is inside the Placeholder named CampusNewsBackground. In this case, the first (and only) Item in that Placeholder is an Image Item which contains the background image.

Next, we define the image map. This is where you’ll use the coordinates of each hot spot:

var imageMap = {
  name: "tabs",
  areas: [
    {
      shape: "poly",
      coords: "0, 0, 218, 0, 212, 82, 0, 68",
      title: "CampusNews"
    },
    {
      shape: "poly",
      coords: "219, 0, 377, 0, 379, 75, 217, 82, 215, 45",
      title: "Events"
    }
  ]
}

Finally, we associate the image map with the background image:

if (backgroundImage) {
  document.getElementById(backgroundImage).contentWindow.addImageMap(imageMap);
}

So far, so good, but we still need to set up some sort of event handler so that we know when a user clicks on one of the hot spots. That is accomplished by adding the following function:

function onImageClicked(id, title) {
   //Check parameters and do something.
}

The id parameter contains the ID of the Image Item, while the title parameter contains the value of the title that was previously defined in the image map. (Incidentally, you can name these parameters anything you want.) What you do when a hot spot is clicked is entirely dependent on the nature of your particular Presentation. In the case of the Campus Concierge Presentation, the previous page is hidden and the page associated with the tab that the user has just clicked on is shown.

The last thing left to do is call the initImageMap function after the Presentation has loaded:

<body style="height:1920px;width:1080px; margin: 0; overflow: hidden;" onLoad="initPage();">

If you want to examine the code for the Campus Concierge Presentation, click here to see a Preview, and then click on Copy Template in the Preview bar.

I’m guessing you would fire up Photoshop and start creating this as an image. What if I told you that there’s another way to do it; a way that doesn’t involve images at all?

Turns out that this can be done with Arctext.js, a jQuery plugin that uses CSS3 transforms to rotate letters along a curved path. The above can be re-created using Arctext to curve the text and plain ‘ole CSS to style it.

As usual, start by downloading the plugin from here and hosting it on the web somewhere. Then, using our digital signage software, create a Presentation containing some HTML that represents the text that you want to curve. After linking to the plugin in the Presentation’s HTML, you can invoke it on the appropriate element.

For example, if I have the following HTML:

<h3 id="example1">I wanna be different</h3>

I can curve the text by executing the following Javascript:

$('#example1').arctext({radius: 300});

This uses jQuery to select the element with an ID of example1, and rotates the letters across the imaginary arc of the supplied radius parameter (in this case, 300). The result will be something like this:

There are additional options for specifying whether the letters should curve up or down, and whether each letter should be rotated or left straight. If you so desire, you can also animate the curving effect:

$('#example1').arctext('set', {
   radius : 500,
   dir : -1,
   animation : {
      speed : 1000,
      easing : 'ease-out'
   }
});

One advantage of choosing CSS over images is that the number of requests that need to be made to the server are reduced, thereby saving bandwidth and decreasing latency time.

You can check out a live demo here.