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.
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.
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.
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:
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!
January 26th, 2012 by Byron Darlison
Everyone wants to attract Users and keep them. Everyone wants to build bigger and bigger digital signage networks. We get it. And we have heard you loud and clear that you want more ways to accomplish this, while reinforcing your brand and message. With our latest release we have given you a few more tools to make this happen.
You can now specify your own login link and bypasses the standard Rise Vision page. No more Rise branding. Not that we think that is a bad thing, just that you might like yours, more than ours. And you can go even further with your login and specify whether or not new Users can sign up and join your Network automatically if they haven’t already registered.
To make this happen create a Rise Vision login link on your website, or just about anything that allows a URL link to be embedded, and that link should point to a URL that looks like this:
http://rva.risevision.com?parentId={CompanyId}
Where CompanyID is equal to that crazy ID that appears to the right of the Rise Vision application URL as shown, albeit in a blurry way, below.
Everything that logs in must, eventually, log out. And what better place to check up on your Users than at the exits of the building. Metaphorically speaking. You can now specify a Logout URL that your Users will land on each and every time they logout of our open source digital signage software platform. Some ideas for what to do with this page? Redirect them back to your main web site so that they can learn the latest and greatest that your company has to offer. Ask them if everything is okay and if they need any support help? Nudge them to share the love and tell their friends on Twitter, Facebook, Google+ and just about any social network site you can think of, all about you. Showcase you latest creative content. Offer them more services… You get the idea.
And to make it easier to add Users to your Network who may have previously registered with Rise Vision, but who now want you to manage and service their network, we have added a “Move a Company” function to your Company settings page. Click it and enter the Authentication Key of the Company that you want moved to your Network, hit confirm, and voila, they are all yours to manage. Just remember they need to give you the Authentication Key, you don’t have access to it until they are under your Network.
As always if you have any thoughts, questions, praise, ideas, or are just feeling lonely and want to shout out, jump into our forum and you will be heard.