We’ll use the same HTML markup for creating a menu for a digital signage Display as in the previous post (I’ve shortened it to only show the relevant parts):

<div id="menu">
  <div class="repeat menus">
    ...
  </div>
</div>

To support scrolling, we need to add an additional HTML element with an ID of scrollContainer. This element is a wrapper for all of the content that should be scrolled. Since we want the entire menu to be scrollable, we wrap it around the menu element:

<div id="scrollContainer">
  <div id="menu">
    ...
  </div>
</div>

Next, we need to add some sort of indicator for the scrolling functionality to know what content to scroll when Scroll By is set to Page. This is done by assigning a class of page to the appropriate element:

<div id="scrollContainer">
  <div id="menu" class="page">
    ...
  </div>
</div>

There is an important point to note when scrolling by page, and that is that the height of the page element must be greater than the height of scrollContainer. Otherwise it is assumed that all of the content is already visible and scrolling is not necessary. This can be achieved with some simple CSS to tell the scrollContainer to not automatically resize to fit its content, but rather to stay the same size as the Placeholder:

#scrollContainer {
  height: 100%;
}

There’s one final step, and that’s to add a similar indicator when scrolling by row. This is achieved by assigning a class of item to the appropriate element:

<div id="scrollContainer">
  <div id="menu" class="page">
    <div class="repeat item menus">
      ...
    </div>
  </div>
</div>

That’s pretty much it. You now have a menu that scrolls according to the Scroll By setting!

If you’d like to experiment with some of your own ideas, you can download the plugin from here. Don’t forget to start by including it in your digital signage Presentation:

<script src="path/to/jqfloat.js"></script>

From there, add the HTML that you would like to appear floated. If that HTML element had an ID of balloon, for example, you would add the following jQuery code to then “float” it:

$('#balloon').jqFloat();

You can configure the floating object by specifying its maximum horizontal floating area (width), maximum vertical floating area (height), maximum floating speed (speed), or its distance from the bottom (minHeight):

$('#balloon').jqFloat({
  width:5,
  height:30,
  speed:1500,
  minHeight:300
});

You can also start or stop the animation (like the balloon in the demo Presentation) by passing play or stop:

$('#balloon').jFloat('play');
$('#balloon').jFloat('stop');

The plugin takes care of the rest! Pretty neat, huh?

First you will need to get the query data source URL to put into the Google Spreadsheet Gadget. Notice that the URL ends with an =0 or 1. If you want the Spreadsheet to show the very top column as the header, change the value to 1. If you want no header, change it to 0. Pretty simple stuff.

Another thing to keep in mind is that any of the font options you apply to your header in the actual Spreadsheet will not be reflected in the Gadget in your Presentation. If you want the header to have a different font, size or color, select those options in the Google Spreadsheet Gadget’s “Heading Font” section.

I hope that helps, let us know if you have any questions in the forum.

Thanks!

Requesting Information about a Company

In your Gadget, make the following RPC call to request the Company ID:

gadgets.rpc.call("", "rsparam_get", null, id, "companyId");

where id is the ID of the Gadget (in case you’ve forgotten how to retrieve the Gadget’s ID, read this blog post).

To retrieve social connection data, use this instead:

gadgets.rpc.call("", "rsparam_get", null, id, "social:foursquare");

Handling the Response

The Viewer will send back a response via RPC as well. To receive this response your Gadget needs to register an RPC call:

gadgets.rpc.register("rsparam_set_" + id, handler);

where handler is the name of a callback function to which the Viewer will send the response.

The callback function takes 2 parameters, name and value:

function handler(name, value) {
  //Add code to handle the response.
}

For a Company ID request, name is companyId and value is the ID of the Company.

For a social connection request, name is social:foursquare and value is a JSON string of the format

{"network":"foursquare","access":"access_token", 
  "companyLocation":"location_token"}

where:

• network is the name of a social network.
• access is the OAuth access token for that social network associated with the Display.
• companyLocation is the location token for that social network associated with the Display.

Company Information for a Digital Signage Display

Get information about a Company from within a Gadget.

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.

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!

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.

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!

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.

To make sure you have Administrator privileges on Windows, click the Start Button, then click the image or blank spot, that appears above your Username, and up pops the User Accounts window which let’s you know what user rights you have.

To do the same thing in Linux Ubuntu click on your Username in the top right, choose “User Accounts” and up pops a similar dialogue.

If you are not an Administrator, you’ll need an Administrator to log in and change your account type. Until then don’t try to install the Rise Vision digital signage solution as it for sure won’t work as you expect. Any questions or suggestions let us know in the forum. Thanks!