Update index.md
This commit is contained in:
greenjon
parent
88870e2651
commit
b9d593d2d0
|
|
@ -247,129 +247,4 @@ Replace host, user and password values with appropriate values for your external
|
|||
|
||||
Then make the new script executable and create a cron job to launch it every minute, as in step 8 above. Steps 3 to 7 above should be carried out on the external web server so that it can convert the two temporary files uploaded via FTP into public schedule data.
|
||||
|
||||
If you have secure shell access (SSH) to the remote web server, you could write a script to use the secure copy command (scp) instead of ftp.
|
||||
|
||||
Website widgets
|
||||
---------------
|
||||
|
||||
Example HTML, Javascript and CSS code for your public website are provided in the *widgets* folder of the Libretime installation tarball, or on GitHub: <https://github.com/LibreTime/libretime/tree/master/airtime_mvc/public/widgets>
|
||||
|
||||
If you have performed an automated installation on Debian or Ubuntu, the widgets can be found in the */usr/share/doc/libretime/examples/* directory.
|
||||
|
||||
For the widgets to work on a typical web server, links to the Javascript and CSS code have to be included in the HTML page <head> element, like the following example:
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Libretime widgets</title>
|
||||
<script src="js/jquery-1.6.1.min.js" type="text/javascript">
|
||||
</script>
|
||||
<script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript">
|
||||
</script>
|
||||
<script src="js/jquery.showinfo.js" type="text/javascript">
|
||||
</script>
|
||||
<link href="css/airtime-widgets.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
A full example is shown in the *widgets/sample\_page.html* file in the Libretime installation tarball, on GitHub, or in the */usr/share/doc/airtime/examples/* directory if you have installed the Debian/Ubuntu package of Libretime.
|
||||
|
||||
The following code is for a small *airtimeLiveInfo* widget that displays information about the current show (show time elapsed, and show time remaining), as well as some information about the next show (start time and end time). In this example, the label text for *onAirNow* is translated into French for local language support:
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#headerLiveHolder").airtimeLiveInfo({
|
||||
sourceDomain: "https://schedule.example.com/",
|
||||
text: {onAirNow:"Sur Les Antennes", offline:"Offline", current:"Current", next:"Next"},
|
||||
updatePeriod: 20 //seconds
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
The <script> element above would typically be added to the page's <head> element. You would then add a <div> element to the <body> element of the page to hold the widget, such as:
|
||||
|
||||
<div id="headerLiveHolder" style="border: 1px solid #999999; padding: 10px;"></div>
|
||||
|
||||
On the public website, this widget can be made to look like the following screenshot:
|
||||
|
||||
|
||||
|
||||
The CSS properties *color:* and *text-transform:uppercase* have been used to style the *onAirNow* label. There is a full example CSS file *widgets/css/airtime-widgets.css* in the Libretime installation tarball, GitHub repository, or */usr/share/doc/airtime/examples/* directory on Debian/Ubuntu.
|
||||
|
||||
A variation on this widget displays the item being played out, rather than the show names:
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#headerLiveTrackHolder").airtimeLiveTrackInfo({
|
||||
sourceDomain: "https://schedule.example.com/",
|
||||
text: {onAirNow:"On Air Now", offline:"Offline", current:"Current", next:"Next"},
|
||||
updatePeriod: 20 //seconds
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
The id of the <div> element in the page body would have to be updated to match:
|
||||
|
||||
<div id="headerLiveTrackHolder" style="border: 1px solid #999999; padding: 10px;"></div>
|
||||
|
||||
The next widget *airtimeShowSchedule* is medium sized, and displays the upcoming show schedule for that day.
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#onAirToday").airtimeShowSchedule({
|
||||
sourceDomain: "https://schedule.example.com/",
|
||||
text: {onAirToday:"On air today"},
|
||||
updatePeriod: 60 //seconds
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Again, the id of the <div> element has to match the script for the widget to appear:
|
||||
|
||||
<div id="onAirToday"></div>
|
||||
|
||||
The output from the widget script above can be styled to look like this screen shot:
|
||||
|
||||
|
||||
|
||||
Finally, the following code creates a large widget *airtimeWeekSchedule* that enables site visitors to browse through the show schedule for that week. In this example, all widget labels have been translated into French:
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#scheduleTabs").airtimeWeekSchedule({
|
||||
sourceDomain:"https://schedule.example.com/",
|
||||
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>
|
||||
|
||||
The <div> element for this widget would be:
|
||||
|
||||
<div id="scheduleTabs"></div>
|
||||
|
||||
Using the code above and the CSS and image files provided with Libretime, the weekly schedule can be styled to look like this:
|
||||
|
||||
|
||||
|
||||
Optionally, you can display the schedule for the week ahead, as well as the current week. This requires the Javascript file *jquery.showinfo.js* supplied with Libretime 2.5.0 or later, where the value of the variable *dow* (for days of the week) includes fourteen rather than seven days:
|
||||
|
||||
var dow = ["monday", "tuesday", "wednesday", "thursday", "friday",
|
||||
"saturday", "sunday", "nextmonday", "nexttuesday",
|
||||
"nextwednesday","nextthursday", "nextfriday",
|
||||
"nextsaturday", "nextsunday"];
|
||||
|
||||
In that case, the labels for the days of the week could be configured as follows:
|
||||
|
||||
dowText: {monday:"Monday", tuesday:"Tuesday", wednesday:"Wednesday",
|
||||
thursday:"Thursday", friday:"Friday", saturday:"Saturday",
|
||||
sunday:"Sunday", nextmonday:"Next Monday",
|
||||
nexttuesday:"Next Tuesday", nextwednesday:"Next Wednesday",
|
||||
nextthursday:"Next Thursday",nextfriday:"Next Friday",
|
||||
nextsaturday:"Next Saturday", nextsunday:"Next Sunday"},
|
||||
|
||||
The value of **sourceDomain** in the code examples above should match the URL that you wish to serve schedule information to the public from. If you have used the *Caching schedule information* method detailed above, this would be the URL of your schedule server, not the Libretime server directly.
|
||||
If you have secure shell access (SSH) to the remote web server, you could write a script to use the secure copy command (scp) instead of ftp.
|
||||
Loading…
Reference in New Issue