If you’ve ever spent some time inspecting a Presentation using Chrome’s Developer Tools, you may have noticed that the Viewer (the application that runs in Preview or on a digital signage player) outputs some information that you might find useful, especially when debugging a Presentation that is not working correctly. Let’s walk through what that information is and how to view it.

You can open the Developer Tools by right-clicking on the Presentation and selecting Inspect Element or, if you’re previewing a Presentation, by selecting the Wrench menu at the top-right of your browser window, and then choosing Tools -> Developer Tools. In the new window that opens, click the Elements toolbar item if it is not already selected. Inside the body tag, you should see a div with an id of main. Drill down into it and there should now be two child elements, a div with an id of log and another with an id of mainDiv. mainDiv contains the HTML for all of the items in the Presentation, while log contains some messages about the status of those items:

The IDs used to identify each item in the log are somewhat cryptic. To distinguish between them, you can inspect the last character. Text IDs will end with a t, Images with i, Videos with v, Presentations with p and Gadgets with g. If you have given your Placeholders meaningful names, you should be able to distinguish the items from each other.

Each Text, Image, Video or embedded Presentation should have a message in the log that report it as being ready. These types of items are built directly into the Viewer. Gadgets are a little more involved, as they can really be thought of as third-party components. During normal execution of a Gadget, the states that get reported are loading, responded and ready.

If something did not load as expected, you will either see an error or you will not see that item reporting itself as being ready. For example, in the screenshot below, both an Image and a Video failed to load because I didn’t supply a proper URL to either. The Video item shows an error, while the Image (that has an ID of sc0_pre0_ph0_0i) simply never reports ready:

You can use the information displayed (or not displayed) in the log to help you the next time you find yourself debugging a Presentation!

When writing CSS3 for use in your Presentations and Gadgets, you might draw a blank on a property name or the order of the values it expects (I know I do!). Thankfully, there are online tools that can make your life easier, and one of those tools is CSS3, Please.

CSS3, Please is a cross-browser CSS3 rule generator. It takes care of writing all of the vendor-specific prefixes and remembering which browsers support which features. It simplifies the design process by allowing users to enter one value, and have it instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically. Why do we even care about vendor-specific prefixes when our digital signage software currently only supports Google Chrome? Well, one can never predict the future, so we consider it a best practice to include all of the vendor-specific prefixes, just in case.

It’s very easy to use CSS3, Please. Just plug in the value you want for the appropriate property, and all of the associated properties are updated. The box in the upper right-hand corner is styled to reflect the change. You can also toggle the styling of individual properties so that you can see the effect they have on the box. Once you’re satisfied with the look you’ve created, copy the code to your clipboard and paste it into your Presentation or Gadget. Easy peasy.

Why not try it out the next time you have some CSS3 to write?

Windows is a popular operating system for digital signage players, so its best to make sure they are configured to run at maximum efficiency.

We have an optimization checklist that details all the important steps, including making sure drivers are up to date, turning the screensaver off, and other OS settings. After you have all that configured, assign a scheduled restart time in the Display’s properties. Scheduled restarts clear your Player’s cache to ensure you always have the newest version of Gadgets, and are an all around good idea for Windows machines.

Another thing you may want to install is CCleaner. CCleaner is a great tool that you can set to run at start up so it will clear all sorts of caches, empty recycle bins, and do a general clean up of any temporary files on the machine. A counterpart to CCleaner is Defraggler, which you can set to defrag your machine on a schedule, my recommendation would be once a month.

Following the optimization guide, ensuring your machine reboots regularly, clearing caches and defragging once a month will help your Display be the most reliable it can be. Let us know if you have any questions in the forum!

An issue that has been brought to our attention is people utilizing Google’s multiple sign on capability sometimes log into our digital signage software with the wrong user account. We have added some functionality so that users can select the account they want to log in as. This quick video tutorial shows how when you are logged into your two different accounts using multiple sign on and you then access the Rise Vision platform in a separate tab, you will be asked which account you want to log in as.

I hope everyone finds that information useful, and if you have any other questions, feel free to post them in our forum.

Thanks!

We’ve already talked about how to customize the layout for the Google Spreadsheet Gadget, but what we haven’t covered yet is how to scroll that custom layout. So, let’s tie up that loose end right now.

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):

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:

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:

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:

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

Using a jQuery plugin called jqFloat.js, you can create floating effects like the one’s in this Presentation. It works by utilizing jQuery’s animate function to animate elements to different positions indefinitely, giving them the illusion that they’re floating. This demo is the same one provided on the plugin’s web site, and it highlights some interesting ways in which the plugin can be used.

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:

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?

When using the Google Spreadsheet Gadget, you will see there is an option to change the Heading font, color and size.  Recently a user in our forum was having some issues in getting the header to show, so today’s post is about how to show or hide the header from your Spreadsheet using our digital signage solution.

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!

In a previous post, we discussed how to request some information about the digital signage Display that a Gadget is running on. In a similar way, you can also get information about the Company, including the Company ID and social connection data. Currently, the only supported social connection is Foursquare.

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.

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:

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:

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:

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!