SMS
TextMarks Lite is a free online service that allows for the sending and recieving of text messages on the regular mobile network. TextMarks allows anyone to register a keyword of their choosing and to utilize the shortcode 41411.
(I registered the leitv for demonstration purposes)
One of the great things about TextMarks is that you can have the service hit a script running on a remote server through a web request (HTTP).
Using this functionality as well as the ability to send SMS back you can allow mobile users to participate with programming.
To have my keyword hit a script that I am running on a webserver, I have to choose "Respond to a keyword with text from a webpage" when setting up the keyword with TextMarks:
The URL I put in is as follows:
http://itp.nyu.edu/~sve204/leit/textmarks.php?phone=\p&text=\0
TextMarks substitutes the user's phone number where the "\p" is and the message they send where the "\0" is. (More documentation can be found here: http://www.textmarks.com/dev/docs/recv/.
Now we can write the "textmarks.php" script..
<?
// This PHP file: textmarks.php gets hit with phone and message when someone texts 41411 liveweb
// http://itp.nyu.edu/~sve204/leit/textmarks.php?phone=\p&text=\0
// Phone Number:
$phone = $_GET['phone'];
// Message:
$message = $_GET['text'];
// Save the message to the text file which changes my pages
$fp=fopen('/home/sve204/public_html/leit/textmarks.txt','w');
fwrite($fp,$message);
fclose($fp);
echo "Yay!!! Thanks";
?>
Now when ever someone texts 41411 with the keyword leit this script is called and they get a text back that says: "Yay!! Thanks"
In addition this script writes out the contents of their message to a text file: "textmarks.txt" on the server (this file needs to exist in the first place).
PHP
Quick and Dirty PHP Tutorial
Web Browser as Production Tool
The web browser has come a long way in the last 20 years. Because the web might be considered a medium of mediums, it may be an ideal tool to use in the production and presentation of interactive television content.
For instance, the browser can show live video, load on-demand video, query servers, present dynmaic content, run full screen and so on.
Full Screen is a must. Fortunately, Firefox has good support for it under the "View" menu and you can get rid of the toolbars, tabs and location bars.
Another possibility is:
Plainview
Running a browser in full screen with video support and SMS overlays could be interesting:
An Example.
AJAX
AJAX stands for Asynchronous JavaScript and XML. Basically it is a means through JavaScript to get additional or dynamic content from a server without reloading a page. This is particularly useful when using a browser as the means for displaying content.
Here is the source code for the above example:
<html>
<head>
<!-- Always load up the ajax.js file so you don't have to do all of the hard work -->
<script type="text/javascript" src="ajax.js"></script>
<!-- Do your own JavaScript below -->
<script type="text/javascript">
// A variable to hold the interval id
var interval = null;
// A function to call our server side file or script
// This get's triggered by the interval (in function setup_ajax()
function call_ajax()
{
makeHttpRequest('http://itp.nyu.edu/~sve204/leit/textmarks.txt',ajax_return);
}
// A function that gets called when the server responds
// This is where you would do what you want with the response
function ajax_return(response)
{
document.getElementById("textsection").innerHTML = response;
document.getElementById("secondtextsection").innerHTML = response;
}
// Setup AJAX function, creates a timeout so that we run something periodically
function setup_ajax()
{
// Set interval of 2000 milliseconds
// Keeps going over and over again
interval = setInterval("call_ajax()",2000);
}
// Register setup_ajax with the onload event of the window (when it is done loading)..
// This makes setup_ajax run after the browser renders the page
function addOnLoad()
{
if (window.addEventListener)
{
window.addEventListener('load', setup_ajax, false);
}
else if (window.attachEvent)
{
window.attachEvent('onload', setup_ajax);
}
}
// Tell the browser to run the addOnLoad function above
addOnLoad();
</script>
<style>
/*This is a comment*/
/* Put your CSS definitions here */
#videosection {
z-index: 0;
color: black;
position: absolute;
top: 0px;
left: 0px;
width: 640px;
height: 480px;
}
#textsection {
z-index: 10;
position: absolute;
top: 320px;
left: 0px;
width: 640px;
height: 160px;
/*background-color: blue;*/
color: white;
text-align: center;
font-size: 24pt;
}
#secondtextsection {
z-index: 9;
position: absolute;
top: 322px;
left: 0px;
width: 640px;
height: 158px;
/*background-color: blue;*/
color: black;
text-align: center;
font-size: 24pt;
}
</style>
</head>
<body>
<div id="videosection">
<embed wmode="transparent" src="http://blip.tv/scripts/flash/blipplayer.swf?autoStart=false&file=http://blip.tv/file/get/Zefrank-020507911.flv%3Fsource%3D3" quality="high" width="700" height="536" name="movie" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</div>
<div id="secondtextsection">Text Section</div>
<div id="textsection">Text Section</div>
</body>
</html>
As you can see, in the code above, there is JavaScript that calls a function called "makeHttpRequest" which is defined in ajax.js. (In order to develop these types of applications, is probably helpful to download and place in the same directory as your HTML the ajax.js script.)
The "makeHttpRequest" function takes in two arguments, the first is what URL to hit and the second is what to do when you get a response from that URL. In this example, when a response comes in it calls the "ajax_return" function which takes care of updating the text in the "textsection" div.
The above code also includes some CSS to place the video and text. Learn more about CSS here: http://www.w3schools.com/css/. For the purposes of this class, you will probably want to pay particular attention to "position", "z-index", font size, font color, alignment and so on.
Of course, you can do so much more, either in JavaScript in the "ajax_return" function or in PHP on the server side.
AJAX Gotchas
One thing that you need to be concerned with when doing any type of AJAX is that the request through AJAX needs to come from the same server that page initially loaded from. In our case, itp.nyu.edu.. You can't load data from elsewhere without getting it from itp.nyu.edu in the end. Of course, you could have a PHP script make the request for data from elsewhere and return that data to the AJAX script.
More Complex
This example allows users to vote via SMS for which video they would like to watch.
What follows is the PHP that get's hit by Textmarks when a message comes in. It is almost exactly the same as the version in the previous example but instead of re-writing the file which contains the last message, it saves all of the messages (using the "append" method of fopen).
<?
// This PHP file: textmarks.php gets hit with phone and message when someone texts 41411 L1V3
// http://itp.nyu.edu/~sve204/liveweb/textmarks.php?phone=\p&text=\0
// Phone Number:
$phone = $_GET['phone'];
// Message:
$message = $_GET['text'];
$fpt=fopen('/home/sve204/public_html/leit/textmarks_tally.txt','a');
fwrite($fpt,$message . "\n");
fclose($fp);
echo "Yay!!! Thanks";
?>
This file is the file that is hit by the HTML/JavaScript/AJAX which tallys up the results sent in via SMS. It opens the same text file and reads it into a string which is then split into an array.
It then loops through the array, counting the 1's and 2's
It then sends the data back to the HTML/JavaScript/AJAX by simply "echo"ing the two values with a comma in the middle.
<?
$contents = file_get_contents('/home/sve204/public_html/leit/textmarks_tally.txt');
$contents_array = split("\n",$contents);
$one = 0;
$two = 0;
for ($i = 0; $i < sizeof($contents_array); $i++)
{
if ($contents_array[$i] == 1)
{
$one++;
}
else if ($contents_array[$i] == 2)
{
$two++;
}
}
echo($one . "," . $two);
?>
Here is the main page. This page via JavaScript/AJAX hits the above scrip periodically and get's the latest tally results. It then does some calculations and adjusts how the screen looks. All of this happens in the "ajax_return" function.
<html>
<head>
<!-- Always load up the ajax.js file so you don't have to do all of the hard work -->
<script type="text/javascript" src="ajax.js"></script>
<!-- Do your own JavaScript below -->
<script type="text/javascript">
// A variable to hold the interval id
var interval = null;
// A function to call our server side file or script
// This get's triggered by the interval (in function setup_ajax()
function call_ajax()
{
makeHttpRequest('http://itp.nyu.edu/~sve204/leit/tally.php',ajax_return);
}
// A function that gets called when the server responds
// This is where you would do what you want with the response
function ajax_return(response)
{
//alert(response);
var tally = response.split(",");
var videoOneTotal = tally[0];
var videoTwoTotal = tally[1];
var total = parseInt(videoOneTotal) + parseInt(videoTwoTotal);
//alert(total);
var videoOnePercent = videoOneTotal/total;
var videoTwoPercent = videoTwoTotal/total;
document.getElementById("video1").style.zindex = 0;
document.getElementById("video2").style.zindex = 1;
document.getElementById("video2").style.left = 640 - (640 * videoTwoPercent);
document.getElementById("video2").style.width = (640 * videoTwoPercent);
}
// Setup AJAX function, creates a timeout so that we run something periodically
function setup_ajax()
{
// Set interval of 2000 milliseconds
// Keeps going over and over again
interval = setInterval("call_ajax()",2000);
}
// Register setup_ajax with the onload event of the window (when it is done loading)..
// This makes setup_ajax run after the browser renders the page
function addOnLoad()
{
if (window.addEventListener)
{
window.addEventListener('load', setup_ajax, false);
}
else if (window.attachEvent)
{
window.attachEvent('onload', setup_ajax);
}
}
// Tell the browser to run the addOnLoad function above
addOnLoad();
</script>
<style>
/*This is a comment*/
/* Put your CSS definitions here */
#video1 {
z-index: 0;
color: black;
position: absolute;
top: 0px;
left: 0px;
width: 640px;
height: 480px;
overflow: hidden;
}
#video2 {
z-index: 0;
color: black;
position: absolute;
top: 0px;
left: 320px;
width: 640px;
height: 480px;
overflow: hidden;
}
#textsection {
z-index: 10;
position: absolute;
top: 320px;
left: 0px;
width: 640px;
height: 160px;
/*background-color: blue;*/
color: white;
text-align: center;
font-size: 24pt;
}
#secondtextsection {
z-index: 9;
position: absolute;
top: 322px;
left: 0px;
width: 640px;
height: 158px;
/*background-color: blue;*/
color: black;
text-align: center;
font-size: 24pt;
}
</style>
</head>
<body>
<div id="video1">
<img src="http://thequotabledano.com/dano.jpg" width="640" height="480">
</div>
<div id="video2">
<img src="http://itpedia.nyu.edu/mediawiki/images/thumb/c/c9/Vanevery.jpg/200px-Vanevery.jpg" width="640" height="480">
</div>
<div id="secondtextsection">Text 41411 LEITV 1 or 2</div>
<div id="textsection">Text 41411 LEITV 1 or 2</div>
</body>
</html>
Try it
Cheat