Login

Digital Signage

Our school wanted to utilize a 48" flatscreen monitor as a digital sign for school related information. Our principal puts out a weekly newsletter that contains a look ahead at the calendar. We wanted that information plus some specific newsletter info to be on the sign. As we thought about how to do this, we settled on using a PC to access an internal web server that hosts just the signage information.

We divided the sign into four sections, as diagrammed:

screen

Number the sections starting in the upper left corner and working around clockwise. These are the different frames of the webpage. This allows for a variety of content on the page. Each frame has its own source code. The page is entitled index.html. Here is the source for that file:

<html> <head>
<meta http-equiv="refresh" content="300">
<title>School Digital Signage</title>
</head>
<body bgcolor="#cc0000">
<!--Events Div-->
<div id="events" style="position:absolute; left:10; top:10; width:332; height:600; clip:rect(0,332,600,0); background:#FFF;">
<iframe src="/events.html" width="332" height="600" scrolling="no" frameborder="0"></iframe>
</div><!--Slideshow Div-->
<div id="slideshow" style="position:absolute; left:10; top:611; width:332; height:244; clip:rect(0,332,244,0); background:#FFF;">
<iframe src="/slideshow.html" width="332" height="244" scrolling="no" frameborder="0"></iframe>
</div><!--Main Div-->
<div id="main" style="position:absolute; left:343; top:10; width:800; height:600; clip:rect(0,800,600,0); background:#FFF;">
<iframe src="/main.html"width="800" height="600" scrolling="no" frameborder="0" align="left"></iframe>
</div><!--Weather Div-->
<div id="weather" style="position:absolute; left:343; top:611; width:800; height:244; clip:rect(0,800,244,0); background:#FFF;">
<iframe src="/weather.html"width="800" height="244" scrolling="no" frameborder="0"></iframe>
</div>
 </body> </html>

 

Section 1 is the scrolling look ahead which contains the week's events. This file is called events.html. Here is the source for that file:

 <html> <head>
<title>Events</title>
</head>
 <body bgcolor="#ffffff">
<P><font face="arial" size="5" color="#cc0000">The Week Ahead</font></P>
<marquee scrollamount="2" scrolldelay="5" direction="up" width="332" height="520" style="font-family: Verdana; font-size: 14pt">
<font color="#cc0000">Monday, September 17<BR></font>
A-VB Practice 2:45-4:30<BR>
B-VB Practice 4:30-6:00<P>
<font color="#cc0000">Tuesday, September 18<BR></font>
A-VB Practice 2:45-4:30<BR>
B-VB Practice 4:30-6:00<P>
<font color="#cc0000">Wed., September 19<BR></font>
VB vs. SJ, Jefferson (H) 4:00<BR>
CC at Sussex 4:00<P>
<font color="#cc0000">Thursday, Sept. 20<BR></font>
End Midterm 1 <P>
<font color="#cc0000">Friday, September 21<BR></font>
No School - Teachers' Conference<BR>
All Day Care Available!<P>
<font color="#cc0000">Saturday, Sept. 22<BR></font>
No Events Scheduled<P>
<font color="#cc0000">Sunday, September 23<BR></font>
Worship Services  8:00 & 10:30<BR>
Adult Bible Study / SBS  9:15<P>
</marquee>
</body>
</html>
  

 

Section 2 is the content from the newsletter. We decided to put this into Keynote and then export as a Quicktime movie which could be set to play automatically. This file is called main.html. Here is the source for that file:

 

<html> <head>
<title>Slideshow</title>
</head>
 <body bgcolor="#ffffff">
<EMBED SRC="keynote.mov" WIDTH=800 HEIGHT=600 AUTOPLAY=true CONTROLLER=false LOOP=true PLUGINSPAGE=http://www.apple.com/quicktime/">
</body>
 </html>  Section 3 is the weather and news ticker. This file is called weather.html. The news ticker is a separte file and is called ticker.html. Here is the source for those files:

weather.html

<html> <head>
<meta http-equiv=refresh content="900; URL=weather.html">
<title>Weather Page</title>
</head>
 <body bgcolor="white">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height=168 valign=center align=center>
<!--<font size=6 face="arial" color="#cc0000">Current Time and Weather</font>-->
<P>
<script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj=new Object;obj.clockfile="5005-red.swf";obj.TimeZone="CST";obj.width=240;obj.height=80;obj.wmode="transparent";showClock(obj);</script>
<div style="width: 700px; height: 90px; background-image: url( http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/clouds_728x90_bg.jpg ); background-repeat: no-repeat;">
<div id="NetweatherContainer" style="height: 74px;">
<script src="http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&tStyle=normal&logo=1&zipcode=53066&lang=eng&size=11&theme=clouds&metric=0&target=_self"></script>
</div>
<div style="float: left; padding-left: 10px;">
<a href="http://www.accuweather.com/us/WI/OCONOMOWOC/53066/city-weather-forecast.asp?partner=accuweather&traveler=0"></a></div>
</div>
<!--<IFRAME> ticker- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->
<iframe id="tickermain" src="/ticker.html" width=750 height=50 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>
</td>
</tr>
</table>
</div>
</body>
 </html>

ticker.html

<script language="JavaScript1.2">//IFRAME TICKER- By Dynamic Drive (http://www.dynamicdrive.com)//configure delay between changing messages (3000=3 seconds)
var delay=5000
var ie4=document.allvar curindex=0
var totalcontent=0
function get_total(){
if (ie4){
while (eval("document.all.content"+totalcontent))
totalcontent++
}
else{
while (document.getElementById("content"+totalcontent))
totalcontent++
}
}
function contract_all(){
for (y=0;y<totalcontent;y++){
if (ie4)
eval("document.all.content"+y).style.display="none"
else
document.getElementById("content"+y).style.display="none"
}
}
function expand_one(which){
contract_all()
if (ie4)
eval("document.all.content"+which).style.display=""
else
document.getElementById("content"+which).style.display=""
}
function rotate_content(){
get_total()
contract_all()
expand_one(curindex)
curindex=(curindex<totalcontent-1)? curindex+1: 0
setTimeout("rotate_content()",delay)
}
window.onload=rotate_content</script><body bgcolor="#ffffff">
    <!--ADD YOUR TICKER CONTENT BELOW, by wrapping each one inside a <DIV> as shown below.--><!--For each DIV, increment its ID attribute for each additional content (ie: "content1", "content2" etc)-->
    <div id="content0" align="center" style="display:''">
        <!-- ADD TICKER's CONTENT #1 HERE--------------------->
            <font face="Verdana" color="#cc0000" size="3">SMLS welcomes LPS Recruitment Director Pastor Scharf on Wednesday.</font></p>
        <!-- END CONTENT #1-----------------></div>
    <div id="content1" align="center" style="display:none">
        <!-- ADD TICKER's CONTENT #2 HERE--------------------->
        <font face="Verdana" color="#cc0000" size="3">Terra Nova achievement testing will begin for grades 3-8 next week.</font></font></p>
        <!-- END CONTENT #2-----------------></div>
    <div id="content2" align="center" style="display:none">
        <!-- ADD TICKER's CONTENT #3 HERE--------------------->
        <font face="Verdana" color="#cc0000" size="3">No school Friday, CWLPC Conference. All-day daycare available!</font></font></p>
        <!-- END CONTENT #3-----------------></div>
</body>

Section 4 is the picture slideshow. These are pictures taken during the preceeding week and uploaded to a SmugMug account. SmugMug then has code for embedding a slideshow on a webpage. This file is called slideshow.html. Here is the source for that file:

 <html> <head>
<title>Slideshow</title>
</head>
 <body bgcolor="#ffffff">
<center><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="332" height="244"><param name="movie" value="http://cdn.smugmug.com/swfs/badge/flashbadge.swf?useLargeImages=true&nickName=paulsen5&feedType=&BadgeHost=cdn.smugmug.com&albumID=15302167&albumKey=whp95J&width=332&height=244&gridSpacing=1&gridColumns=1&gridRows=1&background=%23000000&preloaderColor=&preloaderGlow=&gridDelay=2&slideshowDelay=4&order=random&forceSize=&showCaptions=false&introMode=fadein&aboutlink=&sharelink=&albums=" /><param name="wmode" value="transparent" /><param name="allowScriptAccess" value="always" /><embed src="http://cdn.smugmug.com/swfs/badge/flashbadge.swf?useLargeImages=true&nickName=paulsen5&feedType=&BadgeHost=cdn.smugmug.com&albumID=15302167&albumKey=whp95J&width=332&height=244&gridSpacing=1&gridColumns=1&gridRows=1&background=%23000000&preloaderColor=&preloaderGlow=&gridDelay=2&slideshowDelay=4&order=random&forceSize=&showCaptions=false&introMode=fadein&aboutlink=&sharelink=&albums=" width="332" height="244"  wmode="transparent"  allowScriptAccess="always" ></embed></object>
</center>
</body>
 </html>

Here is a screen shot of the digital signage at our school:

digital signage screenshot