At Radio Enfield, The presenters used to read information about upcoming shows from a white board. In today’s age, this is old hat. We now use a dedicated Pi to display a full screen digital information board that automatically updates/refreshes every 5 minutes.
What we used:
- Raspberry Pi – Model B – Running Raspbian OS.
- DVI Screen connected to the Pi via HDMI to DVI cable.
- Our web server, with PHP and MySQL installed.
The Raspberry Pi is running a web browser – chromium – in kiosk mode. To install and run the Pi in this mode, we did the following.
sudo apt-get update && apt-get upgrade -y sudo apt-get install chromium x11-xserver-utils unclutter
This installs the Chromium browser, next we set the Pi to launch it on boot in full screen, and point to a URL of choice. While connected to your pi over SSH type:
sudo nano /etc/xdg/lxsession/LXDE/autostartOnce in the nano editor, we added the following to the bottom of the document. You can replace radioenfield.co.uk with the URL you wish to display.
xset s off @xscreensaver -no-splash @xset -dpms @xset s noblank @chromium --kiosk --incognito http://radioenfield.co.uk
The Pi is now set up to launch in full screen mode, with the screensaver disabled so the screen won’t go blank after a while. If you are linking to a page that doesn’t update, this is where you’d stop. However, for Radio Enfield we needed a page which presenters can update their information regularly and display ‘live read scripts’ on occasion.
We have PHP and MySQL installed on our web server, I won’t go over installing or connecting these as there’s hundreds of other sites that explain this process very well.
For Us, we needed a page that refreshed regularly to update the content shown on the screen. We achieved this by pointing Chromium to a container page. which contained the following code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Studio Information</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
$("#responsecontainer").load('new.php?Ran='+ Math.random());
var refreshId = setInterval(function() {
$("#responsecontainer").load('new.php?Ran='+ Math.random());
}, 300000);
});
</script>
</head>
<body> <div id="responsecontainer"></div> </body>
This loads the contents of new.php into the div – responsecontainer – and will reload it every 5 minutes. We could have used a meta refresh tag, but decided this way was simpler incase we wanted to change what page was displayed quickly.
The new.php page contains the database connection along with RSS feeds to show the presenters the latest news or Top 5 singles. But it’s up to you what you do with the page that gets refreshed. Ours looks like this:
something to note, which I found out whilst designing the information board is that at the time of writing, Chromium doesn’t seem to support CSS width calculations such as:
.leftcontent{
width: calc(100% - 100px);
}
So adding a fallback that’s customised to the screen your using is a good practise.
.leftcontent{
width: calc(100% - 100px); //for browsers that can handle calc functions
width: 900px; //for browsers that can't
}
Comments are closed