User Tips and Tricks – Cool things you can do with Content Sync
February 6th, 2012 by Robb
With the latest release of our digital signage software, one new feature was content sync. A lot of our Users have been asking for content sync between Placeholders in the forum, while some Users may not understand what it is all about. The short answer is content that has the same duration in 2 different Placeholders will transition to the next item in the Playlist at the same time. This comes in handy, and looks super cool at the same time.
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!
(seriously, FREE, GRATIS, NADA, and it doesn't expire, really)
Developer Tips & Tricks – Creating Image Maps
February 1st, 2012 by Donna
Last week I talked about how to handle image click events. This week, on a related topic, I’d like to discuss how to implement image maps. We use image maps in the Campus Concierge Presentation, one of our free digital signage templates, to navigate to a different page of the Presentation when one of the tabs at the top is clicked. Image maps can be somewhat involved, so if you are not already familiar with them, I suggest reading this article before continuing on with the rest of this post.
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.
(seriously, FREE, GRATIS, NADA, and it doesn't expire, really)
Arctext.js – Curving Text for Your Presentations
January 31st, 2012 by Donna
What do you think it would take to build something like the below?
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.
(seriously, FREE, GRATIS, NADA, and it doesn't expire, really)
Add a Text Scroller to your Digital Signage
January 30th, 2012 by Byron Darlison
We just released an open source digital signage Gadget that does text scrolling. And yes, we gave it a brilliant name. The Rise Vision Text Scroller. Creative, I know. Now available in your Gadget library. You can also click here or the image below to see it in action.
As always, comments, suggestions, praise, diatribes, and just about anything else that can be expressed via a keyboard, are welcome on our forum. Enjoy.
(seriously, FREE, GRATIS, NADA, and it doesn't expire, really)
User Tips and Tricks – Multiple Presentations vs Embedded Presentations
January 30th, 2012 by Robb
With our free digital signage platform, you can have multiple Presentations in one Schedule. Everything you need to know about Schedules can be found here, but if you want one Presentation to play for breakfast, another for lunch, another for dinner, no problem. However what if you have a Presentation that is a full screen video, and you want it to move to the next Presentation after the video is finished? Since Schedules don’t know when a video is completed, you would have to make the Presentation show for the exact length of the video before moving to the next Presentation…yikes, what a nightmare.
There is a very easy workaround for this, and it is embedding Presentations. For our example, we have the following 4 Presentations:
- Full screen video that plays all the time
- Breakfast menu that plays from 6 am – 11:45 am
- Lunch menu that plays 11:45 am – 3:45 pm
- Dinner menu that plays from 3:45 pm until 11:45 pm
In the Presentation that is the full screen video, add Presentation Items for the breakfast, lunch and dinner Presentations and schedule them to play at the correct times. Once you have done that, you only need that one Presentation in your Schedule. Once the video has finished, it will move to the next item in the Playlist, which is the appropriate menu.
No having to determine the exact time of the video, just set it and forget it. I hope that helps anyone who was having a similar conundrum, and if you have any questions, feel free to let us know in the forum.
Thanks!
(seriously, FREE, GRATIS, NADA, and it doesn't expire, really)