RiseVision

This week, let’s discuss how to achieve a shuffling effect like this one for the text in your Presentations. For the sake of this demo, we’ll show two different pieces of text that reshuffle every 5 seconds.

This is pretty easy to achieve. You can download the base Javascript functionality from here. The only file you’ll really need is jquery.shuffleLetters.js, so upload it to a hosting server. Once that’s done, include it in your Presentation:

<script src="path/to/jquery.shuffleLetters.js"></script>

Next, add a Placeholder to the Presentation using our free digital signage software. In this case, I’ve given the Placeholder a name of container. Then, add the following code:

<script>
  var i = 0,
    container = $("#container"),
    text = [ "This is a demo of how to shuffle text on a Presentation.", "Try it for yourself!" ];

  $(container).text(text[i]);
  container.shuffleLetters();
  i++;

  setInterval(function() {
    // Shuffle the Placeholder with custom text.
    container.shuffleLetters({
      "text": text[i]
    });

    if (++i >= text.length) {
      i = 0;
    }
  }, 5000);
</script>

This code creates an array of static text entries. The first text entry is added to the Placeholder and shuffled. Every 5 seconds thereafter, the next text entry in the array is shuffled, and so on.

Let’s also add some basic CSS to style the Placeholder:

<style>
  #container {
    color: #555;
    font-size: 58px;
    font-family: 'Open Sans Condensed',sans-serif;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
  }
</style>

Visit this page if you’re interested in learning more about how the shuffling functionality works. You can see the Presentation demo here.

For those of you using the Linux version of our digital signage player, an issue you may have seen crop up is even though you have screensaver set to never and suspend set to never, if Linux is set to auto login, the screen turns off after 10 minutes. Once you hit a key on the keyboard or move the mouse, it comes back up for good.

Thankfully after a LOT of different solutions that didn’t work, I found one that works.  If you’re going to try this fix, make sure to back up all your files before modifying them.

Open a Terminal window, and type “gksu gedit /etc/X11/xorg.conf” (without the quotes) and overwrite the text in there with the following:

Section “ServerFlags”
Option “BlankTime” “0″
Option “StandbyTime” “0″
Option “SuspendTime” “0″
Option “OffTime” “0″
EndSection

Save the changes, and reboot your machine. Notice now that it doesn’t turn off after 10 minutes like it did before. Here is where I found the fix if you wanted to thank the original author.

I hope everyone found this useful, and if you have any other questions, please feel free to throw them into our very active community forum. Thanks!

Want to review content before it gets published to your digital signage displays?

Need to seperate your Editors from your Publishers?

Now you can.

With this release Users with the role of Editor can create and revise Presentations but they can’t Publish them. And by Publish I mean they can’t send their creative work to your Displays. You need a User with the Publisher role to review the work and hit that Publish button.

To make this happen give the creative types the user role of Editor and give the Grand Poo Bah, or Pooh Bahs, the Publisher role. That’s all there is to it. And as always if you have any questions or suggestions don’t hesitate to jump into our forum.

When building your own Gadgets for use with our digital signage system, it’s important to handle the situation where the Internet may be disconnected while the Gadget is playing. A Gadget should never stop playing if the Internet connection is lost. Instead, it should continue cycling through its cached data. Let’s walk through how to do this.

Every time the Gadget goes out to the Internet to retrieve new information, that information should be cached in a Javascript variable(s). For example, in the case of the RSS Gadget, all data is cached in a variable called feedData. Whenever the Gadget needs to show a new entry, it can just read from the feedData variable instead of making another costly HTTP request. And what if the Internet goes down? No problem. You won’t even notice because the Gadget will be cycling through the cached results. Of course, in order for this to work properly, the Gadget must have had the chance to play through at least once in its entirety, so that any images that might appear in the feed entries can be cached by the browser.

But what about when the time comes for the Gadget to check for fresh content updates? If the Internet connection has been lost, the Gadget may block while it waits for its callback function to execute, so unless you gracefully recover from this situation, the Gadget will halt. How you recover will depend on your particular Gadget. With the RSS Gadget for example, a timer is started immediately before new data is requested. This timer is set to expire after 5 seconds. When it does, the Gadget proceeds with showing the next feed entry from the cache. If instead the Gadget receives a response back from the feed before that 5 seconds is up, the timer is cancelled, the cached data is updated, and the Gadget can start showing the updated content on the digital signage player. The code snippet might look a little something like this:

var self = this;

//Start a timer in case there is a problem loading the feed.
this.feedLoadFailedTimer = setTimeout(function() {
  //Show next feed entry.
  self.showFeed();
}, 5000);

//Attempt to load the feed.
this.feed.load(function(result) {
  if (!result.error) {
    clearTimeout(self.feedLoadFailedTimer);
    self.feedData = result.feed;
    //Show next feed entry.
    self.showFeed();
  }
});

For Gadgets such as the Directory Gadget, which uses the Google Visualization API to read its data from a Google Spreadsheet, it’s even easier. The Visualization API handles refreshes for you, and because it pushes updates to the Gadget only when changes have been detected, the Gadget will never block when the Internet is disconnected. Once the Internet comes back up, the Visualization API will resume querying for data. So, no extra work is required on your part.

We hope this helps you in your quest to build the perfect Gadget!

Popcorn.js is an HTML5 media framework that enables you to create time-based interactive media for your digital signage Presentations. What does that mean? It means that you can synchronize your video with different types of content, including Twitter, Flickr, Google Maps and so much more. Plus, Popcorn.js supports HTML5 video, Youtube and Vimeo. Take your pick!

It took me about 15 minutes to get this basic demo working. I used a Youtube video, together with the Twitter and OpenMap plugins, to show tweets from the 5 second mark to the 15 second mark, and a map from the 15 to 25 second marks. Here’s what I did:

• Included the Popcorn.js script in the Presentation HTML -
  <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>

• Added an 800 x 300 pixel Placeholder to the Presentation, and placed the following HTML inside of it -
  <div id="video" style="float:left; width: 400px; height: 300px;"></div>
<div id="content" style="background-color: lightgray; float:left; width:400px; height:300px;"></div>

• Next, I added the following Javascript -
  <script>
  //Ensure the web page (DOM) has loaded.
  document.addEventListener("DOMContentLoaded", function () {
    //Create a popcorn instance by calling the Youtube player plugin.
    var pop = Popcorn.youtube(
      '#video',
      'http://www.youtube.com/watch?v=u9JKR-14HBA' );
    //Show tweets from 5-15 seconds.
    pop.twitter({
      start: 5,
      end: 15,
      title: "Rise Vision",
      src: "@risevision",
      target: "content",
    });
    //Show map from 15-25 seconds.
    pop.openmap( {
      start: 15,
      end: 25,
      type: "ROADMAP",
      target: "content",
      lat: 43.65922,
      lng: -79.65293,
      zoom: "13"
    });
    //Play the video immediately.
    pop.play();
  }, false);
</script>

And that’s it! I then had a working demo.

You can visit the Plugins page to see what other types of content are supported, or the Players page to learn how to use Popcorn.js to play HTML5 or Vimeo videos on your digital signage displays.