RiseVision

Recently a member of our forum brought up a great question; “How do you have an interactive Presentation with some of the Gadgets non-interactive?”. His example was a Presentation that had a Youtube video running. You want your audience to be able to interact with the rest of the Presentation, but you don’t want them to be able to click on the Youtube video since it will go to www.youtube.com and show it there, leaving no way to get back to your Presentation. The solution for this is pretty easy, so I thought I would share it with everyone. You may want to consider this for some of your own digital signage templates that you make available to your clients.

For this example I am using the Youtube Gadget, but this can be done with pretty much any Gadget. All you have to do is put a Placeholder with no items in it on top of your Placeholder running your Youtube Video. The new Copy/Paste functionality makes this dead simple:

1. Create your Placeholder and Playlist with your Youtube Video
2. Create a copy of that Placeholder, and put it right on top of your original Placeholder
3. Delete the Youtube Video from the new Placeholder’s Playlist.

A very simple solution to a very common issue. What’s great about this solution is it will even work in a Presentation preview, so any clients who want to preview what their Presentation will look like in their browser, will see first hand how some areas are interactive and some are not.

This quick video shows how to accomplish the steps above:

I hope this helps anyone who had this same issue, and many thanks to Aaron in our forum for reminding me of it .

Hot on the heels of this weeks open source digital signage editor release we have another new editor version hitting quality assurance this Friday. It includes a bunch of improvements to transitions, automatic scaling for background images and Placeholder proportional resizing with the shift key for when you want to maintain that perfect aspect ratio. Look for that release mid November.

In parallel to all of this development work we also had the “best ideas for improving the platform contest” running last month and the quantity and quality of the ideas were immense. The ideas that got the most traction were all related to improving the editor and they went something like the following:

• Can you give me the ability to configure my Presentation such that if a User touches “here” then something pops up over “there” on the screen?
• Can I have content trigger other content? This content shows up and because it did something else shows up over here, similar to the touch example above but different in that it happens without user intervention and it is all about synching content across the Presentation.
• Can I let my viewers interact with playlists such that they can touch and move forward and back through content or hold to check something out for longer?

I have a bunch of ideas as to how to solve the above with layers, triggers and a new Playlist item – the Button – but I need more concrete examples as to how you would like this functionality to work? Don’t worry about the design of the software, I just need your requirements for the functionality you want as the content designer and what that functionality enables for your users viewing your Presentations. Any thoughts or ideas please don’t hesitate to add them to this topic in the forum. And thanks in advance for the help!

A couple of weeks ago, sshank over in the forum posed the following question:

“Has anyone been able to take the contents of a Google spreadsheet and re-arrange it systematically using logic or programming? Like, for example, entering some restaurant menu items into a google spreadsheet and having that displayed in a non-tabular way on the presentation, or doing some math to the numbers before rendering it, or other customized things? Just thinking through different approaches to this other than the google spreadsheet gadget…”

Since nobody had any examples for sshank, I set out to show how this can be done. Moreover, I wanted to show that it can, in fact, be accomplished with our existing Google Spreadsheet Gadget.

The Google Spreadsheet Gadget is one of our most popular Gadgets. By creating your own layout file and accompanying CSS, you can create any number of different looks to override the default table layout. Using sshank’s restaurant menu idea as my inspiration, I quickly created some menu data:

I then created this simple XML layout:

This layout does not use any HTML tables, but instead utilizes div tags and lists. There are a couple of important things to note about this layout:

• I replaced the value of the url attribute with the URL to my custom CSS file. More on this in a minute.
• I have assigned one of the div tags a class of repeat. This indicates that this HTML element and all of its children will be repeated for every row in the spreadsheet. This saves you from having to repeat the same markup for every row of the spreadsheet, which would be a maintenance nightmare.
• The HTML elements that have classes of a, b, c, and d refer to the corresponding column of the Spreadsheet. In our case, the mapping is:
  • a = Type
  • b = Item
  • c = Description
  • d = Price
• I’ve applied a class of heading_font-style to the same element with class b. This means that the Item will use the Heading Font as specified by the Gadget setting.
• I’ve applied a class of data_font-style to the same elements with classes c and d. This means that the Description and Price will use the Data Font as specified by the Gadget setting.

Here’s the only noteworthy section of my CSS:

I’m applying a custom style to all of the HTML elements with a class of a. This means that the Today’s Specials, Appetizers and Dinner headings with have this styling applied to them. Since there are really only two font settings that can be controlled by the Gadget’s settings (Heading Font and Data Font), I just create a new class here containing the font settings that I want.

Back in the Presentation editor, I check the Use Layout URL checkbox, then paste in the URL to my XML layout file. I also set Scroll By to None since I did not include any markup for scrollbars in my layout:

What we end up with is both clean and simple (and not a table!):

The XML and CSS files used in this example can be downloaded from here and here. Just right click on the page and select Save As. You can read more about the Google Spreadsheet Gadget on our Wiki. And please do keep using our forum to ask questions and share ideas. You never know when one of your posts might be highlighted here on our blog!

I am constantly coming across new and cool web techniques that can be used to spice up digital signage Presentations. One such find that I recently discovered is a Javascript library called Kerning.js. This library allows you to easily apply some neat effects to text. Since I can’t recommend something unless I spend some time with it myself (of course ), I played with this library for awhile to find out what it could do.

I started out with our Socialize template and tried customizing the word Socialize in different ways. To do this, I simply included the kerning.js file in the Presentation’s HTML and then, using their documentation as a guide, I experimented. Here are some of the effects I was able to create with a minimum of effort:

Each of these was achieved by adding just one or 2 lines of CSS to the HTML of the Presentation. Very cool! One thing to keep in mind though is that this will not work with custom fonts.

And, just because it’s a fun way to kill time, check out this kerning game.

Let us know in the forum if you decide to leverage kerning.js in any of your Presentations or Gadgets!

I am happy to announce that today we released another iteration of our open source digital signage editor, and there are some pretty obvious changes you’ll notice right off the bat. Here is what the top of the page looks like now when you are editing your Presentation:

All the text that was originally at the top far right of your editor has been replaced with icons, and we moved the “Settings” option that used to appear beside the name of your Presentation over there as well. The same functionality is all here, it just looks a bit different. On top of the existing actions (Preview, Save, Copy, Delete, Cancel), we have two new icons that you are just to the right of the Published/Revised state. These are the Placeholder Copy and Paste buttons. Users can now select a Placeholder, press the Copy button  OR Ctrl+C on their keyboard, and then press the Paste button OR Ctrl+V to paste the Placeholder into the same Presentation or a different Presentation. All Playlist items and settings for that Placeholder will be copied into the new instance of that Placeholder.

You can also copy individual Playlist Items as well; just go into your Placeholder, and click the “Add” button next to your Playlist Item, you’ll see the Playlist Copy and Paste options at the top of the menu. Very similar to Placeholders, users can copy and paste Playlist items to the same or different Placeholders in the same Presentation, or go into a different Presentation and paste it there:

On top of the Copy/Paste functionality, we also added a Banner URL setting on your Network page, so your banner can be a link to a URL, the same way your logo can.

Let us know what you think of these new features in our forum!