Digital Signage – our journey (part 2)

TV_f025-20120301095707-00005

With the hardware side of things pretty much sorted out the next step was to sort out a suitable design to put on them. Initially it’s far too easy to simply put various lumps of content in boxes and leave it at that, OK it works but equally isn’t the most visually appealing. Fortunately we have talented creative people in our media block who had better ideas 🙂

Flash transparencies

The winning method was to try adding a transparent mask over the top of a background video and vary the shape \ design of the transparency dependent on the content to be shown. First step was to see if Planet eSign could handle this so we tried a test screen with a PNG file, which worked perfectly. Moving on from this we then went a step further and added an animated SWF file using eSign’s built-in Flash content option… although it displayed the transparent function disappeared.

A quick search led me to the fact that SWFs don’t display transparently as a default function, to get it to work as expected you need to:

  1. configure the stage background to be transparent when creating the source file in Flash
  2. use the Flash object via HTML embed embed code to enable transparency
    <param name=”wmode” value=”transparent”>

The second attempt using the HTML object (set to 1360×768) over the top of the video worked perfectly. This is also where you’ll see if your hardware is up to the job as our old DG35 integrated graphics couldn’t handle the video and transparency without stuttering – no such problems with the nVidia card installed 🙂

We now have a variety of SWFs for various screen layouts e.g.

  • animated bar at the bottom (for news ticker)
  • side bar, white with lower opacity (for announcement text)
  • 1/2 screen version of the white side bar (for posters)

transparency

To store them I created an additional directory on the eStream server aka http://yourestreamserver/esign/swfs. I’ve noticed that digital signage content pages are created on the server so relative paths work fine within the embed code. A copy of the code we use can be found on SkyDrive (note to point to a different file name than transparency.swf you need to change 3 occurrences of it within the code, use find and replace to make sure you get them all!)

You’ll then need to make sure your SWF is layered on top of a video playing in the background, chances are both will need to be full-screen as well. To set the correct order right-click on a layer then hit bring to front \ send to back as appropriate.

Tip: If you do have both layers full-screen and need to change the background video later a neat trick is to use the Toggle Fill Screen button to temporarily reduce the size of the transparency, this will let you then hit the edit button for the window behind without disturbing the layer order. When done just click the Toggle button again to return to the previous full-screen state, sorted 🙂

Fonts

Part of the branding for the screen templates also required using specific fonts to match our other marketing materials. Many were sourced from Google Fonts and initially the process looked quite simple; eSign already has a /fonts directory you can drop custom typefaces into and it’ll automatically pick them up. Trouble is that only works for the news ticker and similar items; at present the HTML editor is a law unto itself.

With that in mind I had to find a way to get the fonts to display via some custom HTML. Fortunately I realised that the main embed code is already done by eSign automatically for use in the custom ticker fonts mentioned above.

All you need to do is preview a signage screen then right-click in the browser and click View Source. At that point search for @font-face and you’ll see the embed code for all your custom fonts. Make a note of the font-family name for each one you want to use in the editor.

font code

In your signage screen template create a new panel for where you want your custom fonts to appear then switch to HTML view and paste in the code below (my example uses the FredokaOne-Regular and Kreon-Regular fonts). Substitute font names, colours and sizes as required. Grab the code from the .txt file I’ve uploaded to SkyDrive as copying \ pasting from web pages doesn’t always play nicely!

Note: don’t be worried if the wrong font appears in the editor preview window, it doesn’t show up properly until you run a screen preview via eSign as you need that initial embed code to be present (which won’t happen when in HTML editor mode)

<!DOCTYPE html>
<html>
 <head>
 <style>
 h1panel {
 font-family: 'FredokaOne-Regular', cursive;
 font-size:72px;
 color: #004C93;
 }
 p {
 font-family: 'Kreon-Regular', serif;
 font-size: 54px;
 color: #004C93;
 }
 </style>
 </head>
 <body style="overflow: hidden;">
 <h1panel>Title</h1panel>
 <p>Your body text goes here</p>
 </body>
</html>

Note: the second font description is what the system will fall back to if for some reason your embed doesn’t work
Ref: http://www.w3schools.com/cssref/pr_font_font-family.asp

To find what the generic family should be look at the Google Font embed samples, e.g. Fredoka One sample

Note: some fonts we used caused webpage errors as for some reason they refused to embed properly. After reading about various font standards (TTF, EOT and so on), embed bits and various code samples the simplest answer was to find another font that looked similar and worked! If you’re desperate for one particular font you might have to go through similar amounts of Google whacking to get a result or use a service like FontSquirrel to convert a non-working font into one that embeds neatly.

The end product

You’d be forgiven for wondering if all this is worth it for the end result, check out the screenshot below and imagine a full length video running with the ticker along the bottom and you should get a good idea of why it’s worth putting in the effort to build it. 

Anecdotal evidence suggests visitors like the design too, I’ve seen numerous occasions where people have stopped to watch the video which didn’t happen with the previous static content. I think it’s a great way to showcase the wide range of activities that go on inside the college and gets people to notice whatever messages go on the screen alongside, a win-win situation 🙂

screen sample   screen sample2

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: