Skip to end of metadata
Go to start of metadata

Ancient Documentation Warning

This documentation is out-of-date and we do not recommend following this approach.

 

Contents:

Widget Installation

Using the widgets is very simple.

1) In the Airtime admin interface, login as an administrator, go to the "Preferences" page, and enable the option "Allow Remote Websites To Access 'Schedule' Info?".

2) Get the widgets from the "widgets" directory in the tarball.  (Download the latest from here)

3) Put that directory on your webserver and name it "airtime-widgets".

4) In order to avoid conflicts with other javascript libraries, it is best to put the widgets in an iframe:

<iframe src="/airtime-widgets/airtime-iframe.html" width="300px" height="250px" marginheight="0" marginwidth="0" scrolling="no" frameborder="0">
</iframe>

"airtime-iframe.html" contains:

<link rel="stylesheet" href="/airtime-widgets/css/airtime-widgets.css" type="text/css" />
<script src="/airtime-widgets/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="/airtime-widgets/js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script src="/airtime-widgets/js/jquery.showinfo.js" type="text/javascript"></script>

<script>
$(document).ready(function() {
 $("#headerLiveHolder").airtimeLiveInfo({
   sourceDomain: "http://airtime-dev.sourcefabric.org/",
   text: {onAirNow:"On Air Now", offline:"Offline", current:"Current", next:"Next"},
   updatePeriod: 20 //seconds
 });
});
</script>
<div id="headerLiveHolder" style="border: 1px solid #999999; padding: 10px;"></div>

<script>
$(document).ready(function() {
 $("#onAirToday").airtimeShowSchedule({
   sourceDomain: "http://airtime-dev.sourcefabric.org/",
   text: {onAirToday:"On air today"},
   updatePeriod: 5 //seconds
 });
});
</script>
<div id="onAirToday" style="margin-top: 10px"></div>

You can tweak the above using the guides below for each widget.

5) In order to test the widgets, make sure you have some shows scheduled for the next 24 hours.

The widgets should now be displaying data properly.

The Three Widgets

Current/Next show widget

A very small widget that displays information about the current show (show time elapsed, show time remaining), as well as some information about the next show (start time, end time).

The widget can be used as follows:

<script>
    $(document).ready(function() {
        $("#headerLiveHolder").airtimeLiveInfo({
            sourceDomain: "http://airtime-dev.sourcefabric.org/",
            text: {onAirNow:"On Air Now", offline:"Offline", current:"Current", next:"Next"},
            updatePeriod: 20 //seconds
        });
    });
</script>
<div id="headerLiveHolder" style="border: 1px solid #999999; padding: 10px;"></div>

If you do not see anything displayed, it may mean that the widget is unable to connect to the server you specified.

Upcoming shows widget

A medium sized widget the displays the upcoming show schedule for that day.

Usage:

<script>
    $(document).ready(function() {
        $("#onAirToday").airtimeShowSchedule({
            sourceDomain: "http://airtime-dev.sourcefabric.org/",
            text: {onAirToday:"On air today"},
            updatePeriod: 5 //seconds
        });
    });
</script>
<div id="onAirToday"></div>

Weekly shows widget

A large sized widget that lets you browse through the show schedule for that week.

Usage:

<script>    
    $(document).ready(function() {
        $("#scheduleTabs").airtimeWeekSchedule({
            sourceDomain:"http://airtime-dev.sourcefabric.org/",
            dowText:{monday:"Lundi", tuesday:"Mardi", wednesday:"Mercredi", thursday:"Jeudi", friday:"Vendredi", saturday:"Samedi", sunday:"Dimanche"},
            miscText:{time:"Temps", programName:"Nom du Programme", details:"Détails", readMore:"Lire La Suite"},
            updatePeriod: 600 //seconds
        });
        var d = new Date().getDay();
        $('#scheduleTabs').tabs({selected: d === 0 ? 6 : d-1, fx: { opacity: 'toggle' }});
    });
</script>
<div id="scheduleTabs" class="ui-tabs"></div>

How to Push Widget Data from Airtime to Your Public Website

This may be needed if the Airtime server is hidden behind a firewall on an internal network. It may also be used to protect the Airtime server from large numbers of direct hits from the public to the schedule api.

Airtime Server

1. Create script to export the widget data:

sudo vi /opt/airtime/export-widget-data.sh

File content:

#!/bin/sh
curl -s "http://localhost/api/live-info/type/endofday?callback=***" > /tmp/airtime-live-info
curl -s "http://localhost/api/week-info?callback=***" > /tmp/airtime-week-info

Set perms on the script:

sudo chmod 755 /opt/airtime/export-widget-data.sh

2. Set the export script to run each minute:

sudo vi /etc/cron.d/airtime-widgets-generate-data

File content:

* * * * * root /opt/airtime/export-widget-data.sh

3. Create the file to upload widget data to public site:

sudo vi /opt/airtime/upload-widget-data.sh

File content:

!/bin/bash
HOST='PUBLIC_WEB_SERVER'
USER='PUT_USERNAME_HERE'
PASSWD='PUT_PASSWORD_HERE'

ftp -n -v $HOST << EOT
user $USER $PASSWD
ascii
prompt
put /tmp/airtime-week-info
put /tmp/airtime-live-info
bye
EOT

Set permissions for the file:

sudo chmod 755 /opt/airtime/upload-widget-data.sh

4. Upload widget data to public site once per minute:

sudo vi /etc/cron.d/airtime-widgets-upload

File content:

* * * * * root /opt/airtime/upload-widget-data.sh

5. Restart cron so that it can see your new cron entries:

sudo service cron restart

Public Web Site Server

1. Create on public site root the folders api/live-info and api/week-info (they MUST be named exactly as shown).

2. Create index.php file in api/live-info folder:

<?php
$filename = '/tmp/airtime-live-info';  // define here the path and name of uploaded live-info file

header('Content-Type: text/javascript');
header("Expires: Thu, 01 Jan 1970 00:00:00 GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");

$callback = empty($_GET['callback']) ? null : $_GET['callback'];
$content = file_get_contents($filename);
$content = str_replace('***', $callback, $content);
echo $content;
?>

3. Create index.php file in api/week-info folder:

<?php
$filename = '/tmp/airtime-week-info';  // define here the path and name of uploaded week-info file

header('Content-Type: text/javascript');
header("Expires: Thu, 01 Jan 1970 00:00:00 GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");

$callback = empty($_GET['callback']) ? null : $_GET['callback'];
$content = file_get_contents($filename);
$content = str_replace('***', $callback, $content);
echo $content;
?>

4. Set up widgets to work with public site

...
sourceDomain: public_site_address
...

3rd Party Widgets

This widget will show what is currently playing on an Icecast server:

http://blog.codingexpert.de/?p=66

  • No labels