EdListen: May 2014

Digital Signage For GAFE Schools

It may seem like a simple task but putting that TV in the lobby with scrolling information is not as simple as it sounds. This was a task assigned to me and I thought I would share my findings.

Before I go on I would like mention that the application I chose to use was http://www.risevision.com/.

The first thing on my journey was to find out a what programs were doing this. I soon realized that I was looking for "Digital Signage" and costs were all over the place from $100/month to free. Because I work for a school I decided to stick with the free side of things.

Digital Signage is different than just presenting, as it included the ability to manage multiple displays showing identical or location specific information, and also allowing the end user to manage what information gets displayed when. In some cases digital signage can be touch-enabled or just presenting information.

My initial research lead me to http://www.digitalsignage.com/. Their video creator was free and webbased. Plus they sold media players for under $150. On the surface it seemed like it would work out fine, so I took the plunge and bought their cheap media player and went to create a presentation. It was not until I tried to create an actual presentation that I found the software was very unstable and unintuitive. The cheap media player also was underwhelming in terms of performance. Then every feature went to use like embed a webpage required an upgrade. The cost quickly went from free to $99/mo.

This is where I began to think creative and explored using Chromecast with Google presentations. At the same time I also reached out to my awesome Google Plus PLN, to see what others have been using.

I found several posts explaining how to use Chrome to create a Digital Sign, however scalability is a concern of mine. Here are two that I found interesting: http://goo.gl/KaAyfX and http://goo.gl/jBHJ7K.

My social network call-out (post) yielded 2 options http://www.reveldigital.com/ and http://www.risevision.com/. Revel was the first program I tried and seemed OK, but it was not free and I still ran into some issues, however not as much as with digitalsignage.com. The true winner was when I logged into Rise Vision.

+Rise Vision is built on Google App engine and requires a Google Account to even log in. There is no cost and certainly no-frills either. It is the simplicity of the product that made it much more appealing than any other option I tried. Rather than a lot of graphics they use text links and simple form fields to create the settings for the presentation. It gives full access to the code, so if you wanted to get granular in your presentation, and you are comfortable playing with css and html, you could make tweaks beyond the options given. Best part is that they have gadgets that integrate nicely with Google Documents.

Creation Process

First thing to note is that Rise has created many high-quality tutorial videos: http://www.risevision.com/user-training/. For a free application they went far beyond expectations. They also have an active user community which has been quite helpful.

Below is a screenshot of the different sections of the program. There are 3 places that you need to add to to create a presentation.

1. Presentations, is where you create the content that gets displayed. You can create as many presentations as you would like, and if you are a larger entity, you can even delegate access to certain presentations.

The presentation content if comprised of different gadgets. Rise has included many pre-built gadgets to use, many of which integrate with Google Documents. There are some like the weather app that for the moment are free, however there is a disclaimer that in the future that particular app may have a cost of $2/mo. So unlike other options when Rise does start charging, you only pay for what you use and at a very reasonable cost.

2. Displays, are the places that the presentations will be shown. Rise has official displays for Windows, Ubuntu, Chrome, and Rasberry Pi (players). Some 3rd parties have created players for Android: Rise Vision Player (this is the one I am using) or My Rise Player. I have not looked for iOS.

I was able to modify the Android player I purchased from DigitalSignage to run the Rise Vision Player. Moving forward I will likely purchase one from Amazon similar to this one here or use a ChromeBox. I did have to install a start-up manager app so that even if the device got rebooted, it would auto-launch back into the digital sign. If you plan to incooperate YouTube into your presentation, do not use an Android-based player as there is a known issue with Android not handling auto-play of YouTube video's.

These different players basically plug directly into any HD TV using the HDMI port. There are some companies that sell specific Kiosks, which I did not research much sorry.

3. Schedules, this is the connection from the Presentations to the Displays. At the very least you need to create a Schedule that plays a particular presentation "All The Time" on "Every Display".

Gadgets, Settings, Users, and Network all add scalability to your Digital Sign and I encourage learning more about them through the video tutorials.

The presentation I created for my school.

I thought I would mention some tricks that I learned while building the presentation for my school. At the time of this post the above presentation is just filled in with bogus data, but I think the format is pretty much complete.

I used the insert webpage or HTML gadget the most. Often embedding a published Google Document. This way all the end-user needed was to update that particular document.
They have a calendar gadget which can pull from a Google Calendar. I had this for a while but ultimately chose to use Google's embed code with the HTML gadget, because their tool showed the next 7 days, where I Google's embed code showed the next set of events.
For news I used their Google Spreadsheet gadget, which is an amazingly powerful tool. This also means all the person adding the news needs to do is put each item as new line in a spreadsheet.
The Sports Schedule was a little bit tricky.

It is a published Google Spreadsheet, where teach tab represents a different day. I used the publish feature listed under File => Publish to Web and not the share setting public on the web.
I used the placeholder scheduling so that she proper day's schedule would be shown. For organizational reasons I created a second presentation that just held the sport's schedules placeholders.
I inserted 7 webpage gadgets, one right on top of the other, setting the schedule to visible only for that particular days.
I ran into some trouble with the gadgets not displaying and thanks to the user community found out that I also needed to add a blank text gadget and in the "Presentation Settings" I needed to set the "Play Until Done" setting to that blank gadget.
Once my Sports presentation was done I inserted it into my main presentation, published, and everything started displaying where they needed to go.

Hope this helps, and Never Stop Learning

Edlisten 49: Blended Learning with Catlin Tucker

Download as MP3

Host & Producer: Bjorn Behrendt ~ g+ | twitter
Show Website: http://www.edlisten.com/ & Google+ Community

Description:

This was a great episode, hangout out with +Catlin Tucker (@Catlin_Tucker), talking about blended learning. The best part is she is blending her classroom in a school with very little technology resources.

Check out her:

Follow the show: | email | rss | Youtube

EdListen 48: Update On Our 1:1 Project

Download as MP3

Host & Producer: Bjorn Behrendt ~ g+ | twitter
Show Website: http://www.edlisten.com/ & Google+ Community

Description:

Fred and I just have a quick public chat about the progress of our 1:1 program which we are currently in the planning stages of.

Follow the show: | email | rss | Youtube

Google Site HTML Box slideshow

I was looking for a way to create a nice looking slideshow on a Google Site, that is easy to update. While there are many gadgets out there that works, many of them relied on an rss feed from an external site like Flicker. I wanted something even simpler. What I came up with is a simple bit of code that can get pasted into an HTML box in Google Sites.

Here is an example on a Google Site

Once inserted it is a little misleading as you will not see the slideshow change unless you are a viewer. So to preview you need to "Preview Page As Viewer".

Into this box past one of the two following codes. The first one just uses images, while the second allows you to mix images with text or any content. If you want you can play with the css to add a drop shadow and other style enhancements. Just replace the initial image, which is what will show up before the slideshow loads, and the images inside the "slideshow" div.

Just images:

 <style>  
 #slideshow, #initial {   
   position: relative;  
   width: 800px;   
   height: 240px;     
 }  
 #slideshow > img {   
   position: absolute;  
 }   
 </style>   
 <div id="initial"> <img src="http://www.fhuhs.org/files/slide1.png"></div>  
 <div id="slideshow" style="display:none">  
  <img src="http://www.fhuhs.org/files/slide1.png">  
  <img src="http://www.fhuhs.org/files/slide2.png">  
  <img src="http://www.fhuhs.org/files/slide3.png">  
  <img src="http://www.fhuhs.org/files/slide4.jpg">  
  <!-- <div>Pretty cool eh? This slide is proof the content can be anything. </div> -->  
 </div>  
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>  
 <script>  
  //http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/  
 $("#slideshow > img:gt(0)").hide();  
 setInterval(function() {   
  $('#slideshow > img:first')  
   .fadeOut(1000)  
   .next()  
   .fadeIn(1000)  
   .end()  
   .appendTo('#slideshow');  
 }, 3000);   
 $('#initial').hide();  
 $('#slideshow').show();  
 </script>

Images, Text, any content

 <style>  
 #slideshow, #initial {   
   /* margin: 50px auto; */  
   position: relative;  
   width: 800px;   
   height: 240px;   
 }  
 #slideshow > div {   
   position: absolute;  
 }  
 </style>   
 <div id="initial"> <div><img src="http://www.fhuhs.org/files/slide1.png"></div></div>  
 <div id="slideshow" style="display:none">  
  <div> <img src="http://www.fhuhs.org/files/slide1.png"> </div>  
  <div> <img src="http://www.fhuhs.org/files/slide2.png"> </div>  
  <div> <img src="http://www.fhuhs.org/files/slide3.png"> </div>  
  <div> <img src="http://www.fhuhs.org/files/slide4.jpg"> </div>  
  <div>Pretty cool eh? This slide is proof the content can be anything. </div>  
 </div>  
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>  
 <script>  
  //http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/  
 $("#slideshow > div:gt(0)").hide();  
 setInterval(function() {   
  $('#slideshow > div:first')  
   .fadeOut(1000)  
   .next()  
   .fadeIn(1000)  
   .end()  
   .appendTo('#slideshow');  
 }, 3000);   
 $('#initial').hide();  
 $('#slideshow').show();  
 </script>

Links

document.write(ssyby);

Digital Signage For GAFE Schools

document.write(ssyby);

Edlisten 49: Blended Learning with Catlin Tucker

document.write(ssyby);

EdListen 48: Update On Our 1:1 Project

document.write(ssyby);

Google Site HTML Box slideshow