RiseVision

Developer Tips & Tricks – Creating Image Maps

Donna — Wed, 01 Feb 2012 09:00:24 +0000

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:

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.

Arctext.js – Curving Text for Your Presentations

Donna — Tue, 31 Jan 2012 09:00:27 +0000

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:

I wanna be different

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.

Add a Text Scroller to your Digital Signage

Byron Darlison — Mon, 30 Jan 2012 09:00:21 +0000

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.

User Tips and Tricks – Multiple Presentations vs Embedded Presentations

Robb — Mon, 30 Jan 2012 09:00:18 +0000

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!

Create, Keep and Grow Your Digital Signage User Base

Byron Darlison — Thu, 26 Jan 2012 09:00:42 +0000

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. 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.

Developer Tips & Tricks – Handling Image Click Events

Donna — Wed, 25 Jan 2012 09:00:02 +0000

In building Presentations with our digital signage software, you may find that you need something to happen when a user clicks on or touches an image. For example, the image might be a button that should show a different page in a multi-page Presentation when selected. Never fear! There are not one, but two ways in which this can be accomplished.

The first way is to use the Image Item. Simply add the Image Item as per usual, and then add the following Javascript to the Presentation’s HTML:

function onClick(id) { //Code to handle clicking on an image. }

This function will be called whenever an image is clicked. To determine exactly which image it was, you can inspect the id parameter and execute different code depending on its value.

The tricky part is in figuring out what the ids of each of the Image Items are. The easiest way to determine this is to add the following code to the onClick function:

function onClick(id) { console.log(id); }

Now when you preview the Presentation and click on an image, the id of that image will be displayed in the console.

The problem with doing things this way is that if you move an image to a different position in a Playlist, or to a completely different Placeholder, the id will change and your Javascript will no longer work as expected. A better alternative, and the one we recommend as a best practice, is to add an image as the background of a Placeholder. When you add an image in this way, a div tag gets added to the HTML, to which you can then add an onclick attribute. Whenever the Placeholder is clicked, the code specified in onclick will fire:

onclick="alert('I was clicked!');" ...>

Have another technique that you use? Let us know in the comments or on our forum.

Create Your Own Subway Maps

Donna — Tue, 24 Jan 2012 09:00:36 +0000

This week we have a real treat for you – a Subway Map Visualization jQuery Plugin. What the heck does that mean? It means that you can build your own custom maps and use them in your open source digital signage Presentations!

I like to take things for a test drive before recommending them to our dear readers. So my goal this time was to recreate a section of the TTC (Toronto Transit Commission) subway map. In particular, this is what I was hoping to recreate:

In a nutshell, here are the steps you’ll need to take in order to create a custom map (for a more detailed description, see the Step-by-Step Guide):

Download the plugin from here and upload it to a host server.
Include the plugin in the Presentation’s HTML:
Create the HTML markup that the plugin requires as outlined in the Step-by-Step Guide.
Initialize the plugin by including the following code immediately after the body tag:
Add CSS to style the map.

Here is what my Presentation looked like after integrating the plugin:

Not too bad, right? There is one caveat to using this plugin, and that is that it doesn’t work well inside of a Placeholder. You’ll need to forego using a Placeholder if you want the labels to line up with their markers.

In addition to maps, there are many other creative ways that this plugin can be used. Visit this web site to see more examples. If you decide to give this a go, expect to spend a bit of time getting your map to look exactly how you want it. I’m sure the results will be worth it!

User Tips and Tricks – Getting exact addresses for the Nearby Gadget

Robb — Mon, 23 Jan 2012 09:00:31 +0000

One of the Gadgets we are particularly proud of in our open source digital signage platform is the Nearby Gadget, which displays an interactive Google map with a list of locations maintained in a public Google spreadsheet. If you know the address of the locations you want to show, this website which is listed in the help file will help you get the longitude and latitude coordinates, but what if the location has no fixed address? For example, a college campus with a bunch of different buildings that you want to map out and include directions to.

When you find yourself in this situation, check out this website. it allows you to navigate around a map of the globe and zoom in as close as you need to to the location you don’t have an address for. Once you have zoomed in close enough to find your location, click on it, and the longitude and latitude coordinates will be listed under the map, as well as the address. Now, you have the coordinates you need, as well as the address so that you can include directions. Very helpful indeed!

I’m in there somewhere…

I hope you found this post helpful, and if you have any questions, feel free to let us know in the forum. Thanks!

Immediate Digital Signage Content Updates and Display Monitoring Now Available

Byron Darlison — Mon, 23 Jan 2012 09:00:07 +0000

We added the Google Channel API technology to our open source digital signage solution.

I know what you’re thinking. So what exactly does this have to do with digital signage and why exactly should you care?

Good question actually. The Channel by itself doesn’t really do anything useful for us other than it maintains a persistent connection between our Displays and Server – read they are always on and talking to each other, just like IM (Instant Messaging). This means that our Server knows the status of a Display’s connection, almost instantly.

By itself that’s kind of neat, but not really all that useful for what we do. But we didn’t stop there, we leveraged this technology even further in two ways.

Now when you log in and update your Presentation and click Publish, that new, or freshly revised content, is delivered to all of your Displays immediately. No more waiting for the Display to update since the connection between our digital signage software and the Display is now always on.
And… drum roll please… we used the Channel to add email notifications so that we can send you a note, or anyone you designate, if one or more of your Displays go offline. We check that your Displays are online and showing the content they are scheduled to be presenting every fifteen minutes. If a Display is off, when it shouldn’t be, for two consecutive checks, and you have marked that Display to be monitored, out goes the Email to your designated recipients. And if it comes back online, the same thing happens again, but in reverse, so you will be notified of both the failure, and the recovery.

Nothing needs to be done to take advantage of immediate content updates. That’s deployed and working. Enjoy. However, if you want to setup Email notifications for your Displays you need to check “Monitoring” for each Display that you want watched. And you need to setup a list of Email addresses on your Company Settings page that you want the notifications to go to.

We hope you enjoy the latest addition to our digital signage software! As always if you have questions, suggestions, or praise, please don’t hesitate to jump into our forum.

Digital Signage Synchronization

Byron Darlison — Thu, 19 Jan 2012 09:00:30 +0000

We originally thought we had the best idea ever for our new open source digitial signage – load and play content as soon as it is ready – so that no one is ever waiting for an entire Presentation to download before it starts, which is exactly how we did it with the old Rise Display Network. Our Users would see the Presentation as it came ready, just like a web page typically loads, no more waiting and wondering if it was stuck, something broke, or somebody sent a 1 gigabyte movie down. Sounds like a great idea. WRONG.

Turns out that we didn’t think this one through. If our digital signage software loads a Presentation that has 2 Placeholders in it, one of which is the header for the details in the other, and if we want to cycle through the Playlists in each Placeholder so that the right header appeared for the right details, all of those items, in those Placeholders, all of them, would have to load and be ready at exactly the same time. You guessed it. Not a chance in hell of that happening. Bad idea.

I am happy to say that as of today we have fixed this. And we didn’t fall back to the old way of doing it, which had a bunch of problems, the most obvious of which is you didn’t know what it was waiting for while it loaded.

It took us awhile to see how to do this, and it took even longer to explain it to each other internally, until we created the above somewhat cryptic diagram. Diagram doesn’t help either? I thought so. Here goes with the explanation.

We now have an internal timer keeping beat. Call it a metronome if you will. It provides one timing mechanism for a Presentation that controls start times for all Playlist Items, such that all Playlists, regardless of load delays, start and stop as per the central timing mechanism. One beat box for all.

Here’s how it works. The Presentation loads and the timer begins. If anything is ready immediately it shows for it’s defined duration that it was to be visible. If something isn’t ready, the Presentation shows nothing for that Item for the duration that this Item was supposed to have been shown. All Playlists continue, repeating this exact same logic, until such time as all Items are downloaded and being shown, with no white spots in between. The conclusion? A Presentation begins almost immediately, it may have a few blank spots until everything is downloaded for the first time, but the Presentation, and all the content within it stay in synch like a well tuned orchestra waiting for each musician to jump in and play on as per the conductor.

We hope you like it! Any questions or thoughts on this please don’t hesitate to jump into the forum and share.