Expanding Menus

I had previously mentioned this, stating it might be a subject for a later post. I have now decided to do that post.

Another way to show  a page with a large number of announcements and not force the viewer to scroll excessively is to have a page of links, such that when one clicks a link, the page expands between that link and the next one and fills with the contents corresponding to that link. Clicking another link closes that part and opens a new content.

This is demonstrated by the following video:

click video for larger view

expand

The code for this is as follows:


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head profile='http://gmpg.org/xfn/11'>
<title>Enter Title Here</title>
<style type='text/css'>
body {margin-left:0;margin-right:0;font:normal normal normal 12px Arial;}
a{ text-decoration: }
:link { color: rgb(255, 125, 0) }
:visited {color :rgb(255, 125,0) }
:hover { }
:active { }
#content{position:absolute;width:100%;height:100%;left:0%;top:0%;font:normal normal 800 16px Arial; background: #AAAAAA;text-shadow: 2px 2px 2px #000000; color:white; padding:5px}
</style>
<script type='text/javascript'>
function setText(num) {
var d = document.getElementById("content");
if (num == “1”) {
d.innerHTML='<a href=””>Click</a> for Original State<br /><a href=”#2″ onclick=\x27setText(“2″);\x27>Click</a> for Test Page<br /><a href=”#2” onclick=\x27setText(“3”);\x27>Click</a> for Second Test Page<br />’;
} else if (num == “2”) {
d.innerHTML='<a href=””>Click</a> for Original State<br /><a href=”#2″ onclick=\x27setText(“2″);\x27>Click</a> for Test Page<br /><i><br />These are the notes<br />with a second line</i><br /><br /><a href=”#2” onclick=\x27setText(“3”);\x27>Click</a> for Second Test Page<br /><br />’;
} else if (num == “3”) {
d.innerHTML='<a href=””>Click</a> for Original State<br /><a href=”#2″ onclick=\x27setText(“2″);\x27>Click</a> for Test Page<br /><a href=”#2” onclick=\x27setText(“3″);\x27>Click</a> for Second Test Page<br /><i><br />Text for second test page<br />with a second line</i><br />’;
}
}
</script>
</head>
<body>
<div id=’content’>
<a href=”#2” onclick=’setText(“1″);’>Click</a> for Original State<br />
<a href=”#2” onclick=’setText(“2″);’>Click</a> for Test Page<br />
<a href=”#2” onclick=’setText(“3”);’>Click</a> for Second Test Page<br />
</div>
</body></html>

The basis for this method is the javascript function innerHTML, which substitutes the content of a division with that defined in a string.

There is a way to do the same thing with css3, but that suffers from compatibility problems. This javascript method should work with all browsers.

Although I used only text in the example, any valid html element could be inserted, including images, links and formatted text.

CardFlip

Using a cardflip effect is an efficient way to set up an about us page of a website. Rather than having the text flow around the picture, or even worse, appear below the picture, the description is on the back of the picture, occupying the same space. Thus you can get more pictures per page.

Below is some code to set a a cardflip using css3:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head profile='http://gmpg.org/xfn/11'>
<title>Enter Title Here</title>
<style type='text/css'>
#f1_container {    position: absolute; top: 100px; left: 170px;  width: 450px; height: 281px; z-index: 1;
-webkit-perspective: 1000;
-moz-perspective: 1000px; }
#f2_container {    position: absolute; top: 100px; left: 670px; width: 450px; height: 281px; z-index: 1;
-webkit-perspective: 1000;
-moz-perspective: 1000px; }#card {width: 100%; height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
-ms-transform-style: preserve-3d;
-ms-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
-webkit-box-shadow: 5px 5px 10px #aaa; -moz-box-shadow: 5px 5px 10px #aaa; box-shadow: 5px 5px 10px #aaa;}img{ border: 1px solid #CCCCCC; border-radius:10px;}#f1_container:hover #card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-box-shadow: -5px 5px 10px #aaa; -moz-box-shadow: -5px 5px 10px #aaa; box-shadow: -5px 5px 10px #aaa;    }

#f2_container:hover #card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-box-shadow: -5px 5px 10px #aaa; -moz-box-shadow: -5px 5px 10px #aaa; box-shadow: -5px 5px 10px #aaa;    }

.face {
position: absolute; width: 101%; height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden; }

.face.back {
display: block; box-sizing: border-box; padding: 10px; color: white; background-color: #aaa;
-webkit-transform: rotateY(180deg);
-webkit-box-sizing: border-box;
-moz-transform: rotateY(180deg);
-moz-box-sizing: border-box;
-o-transform: rotateY(180deg);
-o-box-sizing: border-box;
-ms-transform: rotateY(180deg);
-ms-box-sizing: border-box;
transform: rotateY(180deg); }

</style>
</head>
<body>

<center><b><font  size= 4>Mouse over a picture to see a description</font></b></center>

<div id=”f1_container”>
<div id=”card”>
<div>
<Img SRC=’Am 3.jpg’ width=”100%” height=”100%” alt=’ ‘ />
</div>
<div>
This is the information for the first card.<br />
It is along the lines of a baseball card, with the picture on the front and the description on the back.
</div>
</div>
</div>

<div id=”f2_container”>
<div id=”card”>
<div>
<Img SRC=’Am 3.jpg’ width=”100%” height=”100%” alt=’ ‘ />
</div>
<div>
This can be set up as a table of pictures, in which flipping each picture will give its description.<br />
This uses less real estate than having the text flow around the picture.
</div>
</div>
</div>

</body></html>

The container divisions include the css3 property “perspective”

The subdivision card has the css3 properties ” transform-style”  and  “transition”. The transform-style is preserve-3d and the transition is 1.0s linear, which means a 1 second transition.

Another subdivision is “:hover #card” which has the transform property rotateY(180deg) which means to rotate 180 degrees around the Y axis.

Finally there are the subdivisions “face” and “face,back”, with the face.back initially hidden.

Since everything is tied to the hover, moving the mouse over the image inside the face division rotates it 180 degrees, exposing the back. Moving the mouse out, reverses the process, showing the picture and hiding the back again.

Below is how it appears:

click image for larger view

cardflip

As you can see, this works very nicely, but has a problem; it is not supported in Internet Explorer or older browsers.

Therefore, there is another, all-javascript method. It does not have the perspective of the css3, but it has the advantage of being supported by all browsers.

Below is the code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head profile='http://gmpg.org/xfn/11'>
<title>Enter Title Here</title>
<style type='text/css'>
body {margin-left:0;margin-right:0;font:normal normal normal 12px Arial; white-space: pre-wrap}
a{ text-decoration: }
:link { color: rgb(0, 0, 255) }
:visited {color :rgb(100, 0,100) }
:hover { }
:active { }
#l1{position:absolute;width:450px;height:300px;left:100px;top:100px;font:normal normal normal 12px Arial; background: #DDDDDD; border: 1px solid #CCCCCC; border-radius:10px;-moz-box-shadow:-0px 0px 10px rgba(0,0,0,1);-webkit-box-shadow:-0px 0px 10px rgba(0,0,0,1);box-shadow:-0px 0px 10px rgba(0,0,0,1);
}
img{position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 1px solid #CCCCCC; border-radius:10px; }
</style>
<script type='text/javascript'>
var back = false; var shrink = true; var si;  var wd = 500;  var lft = 100;
function startRot(wt) {
wd = wt;
var stop = false;
if (wd > wt)  stop = true;
if ( ! back) {
back = true;
} else {
back = false;
}
shrink = true;
clearInterval(si)
if (! stop) si = setInterval("rot(back)", 3);
}
var sz = ""; var sin = ""; var ftsz =24; var fntsz = "";
function rot(back) {
if (shrink) {
wd -= 10;
lft += 5;
if (! back) {
ftsz = (24 * wd / 450) ;
fntsz = ftsz + "px";
document.getElementById("l1").style.fontSize=fntsz;
}
if (wd <= 0) shrink = false;
}
if (! shrink) {
wd += 10;
lft -= 5;
if (back) {
ftsz = (24 * wd / 450) ;
fntsz = ftsz + "px";
document.getElementById("l1").innerHTML="This is a test<br />This is a second line";
document.getElementById("l1").style.fontSize=fntsz;
}
if (! back) {
document.getElementById("l1").innerHTML="<Img SRC='Am 3.jpg' width='100%' height='100%' name='image1' alt=' ' />";
}
if (wd >= 450) {
wd = 450;
lft = 100;
clearInterval(si);
shrink - true;
}
}
sz = wd + "px";
sin = lft + "px";
document.getElementById("l1").style.width=sz;
document.getElementById("l1").style.left=sin;
}
</script>
<div id=’l1′ onclick=’startRot(445);’>
<Img SRC=’Am 3.jpg’ width=’100%’ height=’100%’ name=’image1′ alt=’ ‘ />
</div></body></html>

 

A division is created and rotation is simulated by setting a timer with “startRot” , changing the division width and changing the contents of the division, depending on whether the front of back is showing. The transition in this case is initiated by clicking on the division. The division content is changed with :

sz = wd + "px";
sin = lft + "px";
document.getElementById("l1").style.width=sz;
document.getElementById("l1").style.left=sin;

Below is how this looks. It does not have the perspective, but it still has somwwhat of a 3d effect.
click for larger image
javaflip

An Online Form with HTML5 Validation

Below is the code for a php file to perform online registration for a race with PayPal payment. Since it is a php file, it must be uploaded to a server, or run offline with a virtual server. I use Xampp for my offline testing.


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head profile='http://gmpg.org/xfn/11'>
<title>Online Registration</title>
<style type='text/css'>
body {margin-left:0;margin-right:0;font:normal normal normal 12px Arial; padding: 10px}
a{ text-decoration: }
:link { color: rgb(0, 0, 255) }
:visited {color :rgb(100, 0,100) }
:hover { }
:active { }
img{}
input{width: 50%; background: #DDDDDD;}
select{background: #DDDDDD}
#age{width: 5%}
#sex{width: 2%}
#dob{width: 6%}
#city{width: 38%}
#state{width: 4%}
#zip{width: 6%}
#phone{width: 13%}
#initial{width: 6%}
#date{width: 6%}
#paypal{width: 150px}
#paypal2{position: absolute; top: 80%}
</style>
<script type="text/javascript"    src="jquery.min.js"></script>
</head>
<body>
<?php
$sex = "";
$size="";
// $captainname="Team Captain";
$teamname="";
// $captainemail = "Email";
$input1 = "";
$input2 = "";
$input3 = "";
$input4 = "";
$input5 = "";
$input6 = "";
$input7 = "";
$input8 = "";
$input9 = "";
$input10 = "";
$input11 = "";
$input12 = "";
$sex1 = “M”;
$sex2 = “F”;
$sex1a = “”;
$sex2a = “”;
$size1 = “S”;
$size2 = “M”;
$size3 = “L”;
$size4 = “XL”;
$size5 = “XXL”;
$size1a = “”;
$size2a = “”;
$size3a = “”;
$size4a = “”;
$size5a = “”;
$race1 = “10K Run”;
$race2 = “5K Run/Walk”;
$race1a = “”;
$race2a = “”;if (stripos($_SERVER[‘HTTP_USER_AGENT’], ‘win’) !== FALSE) {
$string = “\r\n”;
} else {
$string = “\n”;
}$team = array();
$teamselected = “”;
$enteredfirstname = array();
$enteredlastname = array();
$entereddob = array();$waiver = “WAIVER: MUST BE SIGNED OR APPLICATION WILL BE REJECTED: I hereby release PureFitness, and its affiliate clubs, YouBComplete, the City of San Diego, San Diego Food Bank, Foodmobile, Jewish Family Service, Westfield Horton Plaza Shopping Center, all governmental agencies whose property and-or personnel are used, and other sponsoring or co-sponsoring companyries), agency(ies) or individualist from responsibility for any injuries or damages I may suffer as a result of my participation in the Run for the Hungry 10/5K Run/Walk. I hereby certify that I am in good condition and am able to safely compete in this event I will additionally permit the use of my name and picture in broadcasts, telecasts, newspapers. brochures. etc. and I also understand that the entry fee is non-refundable. As a participating athlete, I certify that all information provided in this foim is true and complete. I have read the entry information provided for the event and certify my compliance by initialing below.”;if ($_POST[‘hidden2’] == “hidden2”) {if (file_exists(“DB/Team-DB2.csv”)) {
$file = fopen(“DB/Team-DB2.csv”,”r”);
while (! feof($file)) {
$teamcnt ++;
$line = fgets($file);
$strt = strpos($line, “~”);
$enteredfirstname[$teamcnt] = substr($line, 0, $strt);
$strt = strpos($line, “~”) + 1;
$line= substr($line, $strt);
$strt = strpos($line, “~”) ;
$enteredlastname[$teamcnt] = substr($line, 0, $strt);
$strt = strpos($line, “~”) + 1;
$line= substr($line, $strt);
$strt = strpos($line, “~”);
$entereddob[$teamcnt] = substr($line, 0, $strt);
}
fclose($file);
}

$teamname = $_POST[‘teamname’];
$input1 = $_POST[‘input1’];
$input2 = $_POST[‘input2’];
$input5 = $_POST[‘input5’];
$input6 = $_POST[‘input6’];
$input7 = $_POST[‘input7’];
$input8 = $_POST[‘input8’];
$input9 = $_POST[‘input9’];
$input10 = $_POST[‘input10’];

for ($i = 1; $i <= $teamcnt; $i ++) {
if ($input1 == $enteredfirstname[$i] && $input2 == $enteredlastname[$i] && $input5 == $entereddob[$i]) {
$error = true;
$err = “You have already entered a team!<br />”;
}
}

if ($input1 == “First Name” || $input1 == “”) {
$error = true;
$err .= “You must enter your First Name<br />”;
}

if ($input2 == “Last Name”  || $input2 == “”) {
$error = true;
$err .= “You must enter your Last Name<br />”;
}

if ($input5 == “Address”  || $input5 == “”) {
$error = true;
$err .= “You must enter your Address<br />”;
}

if ($input6 == “City”  || $input6 == “”) {
$error = true;
$err .= “You must enter your City<br />”;
}

if ($input7 == “State”  || $input7 == “”) {
$error = true;
$err .= “You must enter your State<br />”;
}

if ($input8 == “Zip”  || $input8 == “”) {
$error = true;
$err .= “You must enter your Zip Code<br />”;
}

if ($input9 == “Phone – with area code)”  || $input9 == “”) {
$error = true;
$err .= “You must enter your Phone with Area Code<br />”;
}

if ($input10 == “EMail”  || $input10 == “”) {
$error = true;
$err .= “You must enter your EMail<br />”;
}

if ($error) {
$err .= “<br />”;
echo $err;
} else {
$error = false;
$err = “”;
}

if (! $error) {

if (! file_exists(“DB/Team-DB2.csv”)) {
$file = fopen(“DB/Team-DB2.csv”,”w”);
fwrite($file, “First Name”.”~”.”Last Name”.”~”.”Address”.”~”.”City”.”~”.”State”.”~”.”Zip Code”.”~”.”Phone”.”~”.”EMail”. “~” . “Team Name” . “~”.$string);
fclose($file);
}

$file = fopen(“DB/Team-DB2.csv”,”a”);
fwrite($file, $input1.”~”.$input2.”~”. $input5.”~”.$input6.”~”.$input7.”~”.$input8.”~”.$input9.”~”.$input10.”~”. $teamname .”~”.$string);
fclose($file);
echo “<b><font  size= 3>Your data has been saved</font></b><br />”;

}

}

if ($_POST[‘hidden’] == “hidden”) {

if ( $_POST[‘teamselect’] != “Team Name”) {
$teamselected = $_POST[‘teamselect’];
}

if (file_exists(“DB/Reg-DB2.csv”)) {
for ($i = 1; $i <= $teamcnt; $i ++) {
$enteredfirstname[$teamcnt] = “”;
$enteredlastname[$teamcnt] = “”;
$entereddobname[$teamcnt] = “”;
}
$teamcnt = 0;
$file = fopen(“DB/Reg-DB2.csv”,”r”);
while (! feof($file)) {
$teamcnt ++;
$line = fgets($file);
$strt = strpos($line, “~”);
$enteredfirstname[$teamcnt] = substr($line, 0, $strt);
$strt = strpos($line, “~”) + 1;
$line= substr($line, $strt);
$strt = strpos($line, “~”) ;
$enteredlastname[$teamcnt] = substr($line, 0, $strt);
$strt = strpos($line, “~”) + 1;
$line= substr($line, $strt);
$strt = strpos($line, “~”);
$entereddob[$teamcnt] = substr($line, 0, $strt);
}
fclose($file);
}

$input1 = $_POST[‘input1’];
$input2 = $_POST[‘input2’];
$input3 = $_POST[‘input3’];
$input4 = $_POST[‘dobmonth’].”/”.$_POST[‘dobday’].”/”.$_POST[‘dobyear’];
$input5 = $_POST[‘input5’];
$input6 = $_POST[‘input6’];
$input7 = $_POST[‘input7’];
$input8 = $_POST[‘input8’];
$input9 = $_POST[‘input9’];
$input10 = $_POST[‘input10’];
$input11 = $_POST[‘input11’];
$input12 = $_POST[‘thismonth’].”/”.$_POST[‘thisday’].”/13″;

if (strpos($input1, “First Name “) > -1) {
$input1 = substr($input1, 11);
}

if (strpos($input1, “First Name”) > -1) {
$input1 = substr($input1, 10);
}

if (strpos($input2, “Last Name “) > -1) {
$input2 = substr($input2, 10);
}

if (strpos($input2, “Last Name”) > -1) {
$input2 = substr($input2, 9);
}

if (strpos($input3, “Age “) > -1) {
$input3 = substr($input3, 4);
}

if (strpos($input3, “Age”) > -1) {
$input3 = substr($input3, 3);
}

if (strpos($input5, “Address “) > -1) {
$input5 = substr($input5, 8);
}

if (strpos($input5, “Address”) > -1) {
$input5 = substr($input5, 7);
}

if (strpos($input6, “City “) > -1) {
$input6 = substr($input6, 5);
}

if (strpos($input6, “City”) > -1) {
$input6 = substr($input6, 4);
}

if (strpos($input7, “State “) > -1) {
$input7 = substr($input7, 6);
}

if (strpos($input7, “State”) > -1) {
$input7 = substr($input7, 5);
}

if (strpos($input8, “Zip “) > -1) {
$input8 = substr($input8, 4);
}

if (strpos($input8, “Zip”) > -1) {
$input8 = substr($input8, 3);
}

if (strpos($input9, “Phone “) > -1) {
$input9 = substr($input9, 22);
}

if (strpos($input9, “Phone”) > -1) {
$input9 = substr($input9, 21);
}

if (strpos($input10, “EMail “) > -1) {
$input10 = substr($input10, 6);
}

if (strpos($input10, “EMail”) > -1) {
$input10 = substr($input10, 5);
}

$sex = $_POST[‘radio1’];
if ($sex == “M”) $sex1a = “checked”;
if ($sex == “F”) $sex2a = “checked”;
$size = $_POST[‘radio2’];
if ($size == “S”) $size1a = “checked”;
if ($size == “M”) $size2a = “checked”;
if ($size == “L”) $size3a = “checked”;
if ($size == “XL”) $size4a = “checked”;
if ($size == “XXL”) $size5a = “checked”;

$race = $_POST[‘radio3’];
if ($race == “10K Run”) $race1a = “checked”;
if ($race == “5K Run/Walk”) $race2a = “checked”;

for ($i = 1; $i <= $teamcnt; $i ++) {
if ($input1 == $enteredfirstname[$i] && $input2 == $enteredlastname[$i] && $input3 == $entereddob[$i]) {
$error = true;
$err = “You have already registered!<br />”;
}
}

if ($input1 == “First Name” || $input1 == “”) {
$error = true;
$err .= “You must enter your First Name<br />”;
}

if ($input2 == “Last Name”  || $input2 == “”) {
$error = true;
$err .= “You must enter your Last Name<br />”;
}

if ($input3 == “Age”  || $input3 == “”) {
$error = true;
$err .= “You must enter your Age<br />”;
}

if (stripos($input4, “month”) > -1 || stripos($input4, “day”) > -1 || stripos($input4, “year”) > -1) {
$error = true;
$err .= “You must enter your Date of Birth<br />”;
}

if ($input5 == “Address”  || $input5 == “”) {
$error = true;
$err .= “You must enter your Address<br />”;
}

if ($input6 == “City”  || $input6 == “”) {
$error = true;
$err .= “You must enter your City<br />”;
}

if ($input7 == “State”  || $input7 == “”) {
$error = true;
$err .= “You must enter your State<br />”;
}

if ($input8 == “Zip”  || $input8 == “”) {
$error = true;
$err .= “You must enter your Zip Code<br />”;
}

if ($input9 == “Phone – with area code”  || $input9 == “”) {
$error = true;
$err .= “You must enter your Phone with Area Code<br />”;
}

if ($input10 == “EMail”  || $input10 == “”) {
$error = true;
$err .= “You must enter your EMail<br />”;
}

if ($input11 == “Participant’s Initial”  || $input11 == “”) {
$error = true;
$err .= “You must Initial your Approval of the Waiver<br />”;
}

if (stripos($input12, “month”) > -1 || stripos($input12, “day”) > -1) {
$error = true;
$err .= “You must enter the Application Date<br />”;
}

if ($sex == “”) {
$error = true;
$err .= “You must enter your Sex<br />”;
}

if ($size == “”) {
$error = true;
$err .= “You must enter your T-Shirt Size<br />”;
}

if ($race == “”) {
$error = true;
$err .= “You must enter your Race<br />”;
}

if ($error) {
$err .= “<br />”;
echo $err;
} else {
$error = false;
$err = “”;
}

if (! $error) {
echo “<b><font  size= 3>Your data has been saved. Please use the PayPal Button</font></b><br />”;
echo ‘<form id = “paypal2″ target=”paypal” action=”https://www.paypal.com/cgi-bin/webscr&#8221; method=”post”><br />
<input type=”hidden” name=”cmd” value=”_s-xclick”><br />
<input type=”hidden” name=”hosted_button_id” value=”YBVQAR4W2285J”><br />
<table><br />
<tr><td><input type=”hidden” name=”on0″ value=”Entry Fees”>Entry Fees</td></tr><tr><td><select name=”os0″><br />
<option value=”Adult Entry Fee on or before 11/04/12″>Adult Entry Fee on or before 11/04/12 $35.00 USD</option><br />
<option value=”Adult Entry Fee 11/05 – 11/17″>Adult Entry Fee 11/05 – 11/17 $37.00 USD</option><br />
<option value=”Adult Entry Fee 11/18 – 11/27″>Adult Entry Fee 11/18 – 11/27 $40.00 USD</option><br />
<option value=”Adult Both Races on or before 11/04/12″>Adult Both Races on or before 11/04/12 $50.00 USD</option><br />
<option value=”Adult Both Races 11/05 – 11/17″>Adult Both Races 11/05 – 11/17 $52.00 USD</option><br />
<option value=”Adult Both Races 11/18 – 11/27″>Adult Both Races 11/18 – 11/27 $55.00 USD</option><br />
<option value=”Youth (12 & under) Entry Fee on or before 11/04/12″>Youth (12 & under) Entry Fee on or before 11/04/12 $22.00 USD</option><br />
<option value=”Youth 11/05 – 11/17″>Youth 11/05 – 11/17 $25.00 USD</option><br />
<option value=”Youth after 11/12″>Youth after 11/12 $28.00 USD</option><br />
<option value=”Youth (12 & under) Both Races on or before 11/04/12″>Youth (12 & under) Both Races on or before 11/04/12 $34.00 USD</option><br />
<option value=”Youth Both Races 11/05 – 11/17″>Youth Both Races 11/05 – 11/17 $36.00 USD</option><br />
<option value=”Youth Both Races after 11/17″>Youth Both Races after 11/17 $39.00 USD</option><br />
<option value=”Dog Registration”>Dog Registration $10.00 USD</option><br />
</select> </td></tr><br />
</table><br />
<input type=”hidden” name=”currency_code” value=”USD”><br />
<input type=”image” id=”paypal” src=”https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif&#8221; border=”0″ name=”submit” alt=”PayPal – The safer, easier way to pay online!”><br />
<img alt=”” border=”0″ src=”https://www.paypalobjects.com/en_US/i/scr/pixel.gif&#8221; width=”1″ height=”1″><br />
</form>’;

if (! file_exists(“DB/Reg-DB2.csv”)) {
$file = fopen(“DB/Reg-DB2.csv”,”w”);
fwrite($file, “First Name”.”~”.”Last Name”.”~”.”Age”.”~”.”Sex”.”~”.”DOB”.”~”.”T-Shirt Size”.”~”.”Address”.”~”.”City”.”~”.”State”.”~”.”Zip Code”.”~”.”Phone”.”~”.”EMail”.”~”.”Race”.”~”.”Waiver”.”~”.”Initial”.”~”.”Team”.”~”.”Date”.”~”.”Paid”. “~”.$string);
fclose($file);
}

$file = fopen(“DB/Reg-DB2.csv”,”a”);
fwrite($file, $input1.”~”.$input2.”~”.$input3.”~”.$sex.”~”.$input4.”~”.$size.”~”.$input5.”~”.$input6.”~”.$input7.”~”.$input8.”~”.$input9.”~”.$input10.”~”.$race.”~”.$waiver.”~”.$input11.”~”.$teamselected.”~”.$input12.”~”.$string);
fclose($file);
}

}

?>
<b><font  size= 4>TEAM REGISTRATION</font></b><br />

<form name = “team” action=”formTest5.php?=1″ method=”post”>
<input type=”text” placeholder=”First Name eg: Jane” required name=”input1″ value=”<?php echo $input1; ?>” /><br />
<input type=”text” placeholder=”Last Name eg: Doe” required name=”input2″ value=”<?php echo $input2; ?>” /><br />
<input type=”text” placeholder=”Address” required name=”input5″ value=”<?php echo $input5; ?>” /><br />
<input id=”city” type=”text” placeholder=”City” required name=”input6″ value=”<?php echo $input6; ?>” /> &nbsp&nbsp&nbsp<input id=”state” type=”text” placeholder=”State eg: CA” required name=”input7″ value=”<?php echo $input7; ?>” /> &nbsp&nbsp&nbsp<input id=”zip” type=”text” placeholder=”Zip eg: 92101″ required name=”input8″ value=”<?php echo $input8; ?>” /><br />
<input id = “tel” type=”text” placeholder=”Phone with Area Code eg: (222) 222-2222″ required name=”input9″ value=”<?php echo $input9; ?>” /><br />
<input type=”text” placeholder=”EMail eg example@example.com” required name=”input10″ value=”<?php echo $input10; ?>” /><br />
<input type=”text” placeholder=”Team Name” required name=”teamname” value=”<?php echo $teamname; ?>” /><br />
<input type=”hidden” name=”hidden2″ value=”hidden2″ /><br />
<button name=”submit” value=”submit”type=”submit”>Register Team</button>
</form>
<br /><br />

<b><font  size= 4>INDIVIDUAL REGISTRATION</font></b><br />
<form name = “indiv” action=”formTest5.php” method=”post”>
<input type=”text” placeholder=”First Name eg: Jane” required  name=”input1″ value=”<?php echo $input1; ?>” /><br />
<input type=”text” placeholder=”Last Name eg: Doe” required name=”input2″ value=”<?php echo $input2; ?>” /><br />
<input id=”age” ‘type=”text” placeholder=”Age eg: 39″ required name=”input3″ value=”<?php echo $input3; ?>” />  <input id=”sex” type=”radio” required name=”radio1″ value=”<?php echo $sex1; ?>” <?php echo $sex1a; ?> />M <input id=”sex” type=”radio” required name=”radio1″ value=”<?php echo $sex2; ?>” <?php echo $sex2a; ?> />F &nbsp&nbsp&nbsp&nbsp

<!– <input id=”dob” ‘type=”text” name=”input4″ value=”<?php echo $input4; ?>” /> –>

<select name=”dobmonth”>
<option>DOB Month</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>

<select name=”dobday”>
<option>DOB Day</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>

<select name=”dobyear”>
<option>DOB Year</option>
<option>2012</option>
<option>2011</option>
<option>2010</option>
<option>2009</option>
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option>
<option>1989</option>
<option>1988</option>
<option>1987</option>
<option>1986</option>
<option>1985</option>
<option>1984</option>
<option>1983</option>
<option>1982</option>
<option>1981</option>
<option>1980</option>
<option>1979</option>
<option>1978</option>
<option>1977</option>
<option>1976</option>
<option>1975</option>
<option>1974</option>
<option>1973</option>
<option>1972</option>
<option>1971</option>
<option>1970</option>
<option>1969</option>
<option>1968</option>
<option>1967</option>
<option>1966</option>
<option>1965</option>
<option>1964</option>
<option>1963</option>
<option>1962</option>
<option>1961</option>
<option>1960</option>
<option>1959</option>
<option>1958</option>
<option>1957</option>
<option>1956</option>
<option>1955</option>
<option>1954</option>
<option>1953</option>
<option>1952</option>
<option>1951</option>
<option>1950</option>
<option>1949</option>
<option>1948</option>
<option>1947</option>
<option>1946</option>
<option>1945</option>
<option>1944</option>
<option>1943</option>
<option>1942</option>
<option>1941</option>
<option>1940</option>
<option>1939</option>
<option>1938</option>
<option>1937</option>
<option>1936</option>
<option>1935</option>
<option>1934</option>
<option>1933</option>
<option>1932</option>
<option>1931</option>
<option>1930</option>
</select>

<br />
T-Shirt Size <input id=”sex” type=”radio” required name=”radio2″ value=”<?php echo $size1; ?>” <?php echo $size1a; ?> />S <input id=”sex” type=”radio” required name=”radio2″ value=”<?php echo $size2; ?>” <?php echo $size2a; ?> />M <input id=”sex” type=”radio” required name=”radio2″ value=”<?php echo $size3; ?>” <?php echo $size3a; ?> />L <input id=”sex” type=”radio” required name=”radio2″ value=”<?php echo $size4; ?>” <?php echo $size4a; ?> />XL <input id=”sex” type=”radio” required name=”radio2″ value=”<?php echo $size5; ?>” <?php echo $size5a; ?> />XXL<br />
<input type=”text” placeholder=”Address” required name=”input5″ value=”<?php echo $input5; ?>” /><br />
<input id=”city” type=”text” placeholder=”City” required name=”input6″ value=”<?php echo $input6; ?>” /> &nbsp&nbsp&nbsp<input id=”state” type=”text” placeholder=”State: eg CA” required name=”input7″ value=”<?php echo $input7; ?>” /> &nbsp&nbsp&nbsp<input id=”zip” type=”text” placeholder=”Zip eg: 92101″ required name=”input8″ value=”<?php echo $input8; ?>” /><br />
<input id = “phone” type=”tel” placeholder=”Phone with Area Code eg: (222) 222-2222″ required name=”input9″ value=”<?php echo $input9; ?>” /><br />
<input type=”email”  placeholder=”EMail eg example@example.com” required name=”input10″ value=”<?php echo $input10; ?>” /><br />
<input id=”sex” type=”radio” required name=”radio3″ value=”<?php echo $race1; ?>” <?php echo $race1a; ?> />10K Run <input id=”sex” type=”radio” required name=”radio3″ value=”<?php echo $race2; ?>” <?php echo $race2a; ?> />5K Run/Walk<br /><br />
10K participants must reach 5th & Market St. in the second loop within 50 minutes (3.5 miles) or the San Diego Police will turn you Eastbound on Market to the finish. This may result im some 10Kers running a shorter distance.<br />
<input type=”hidden” name=”hidden” value=”hidden” /><br />
<br />
<?php echo $waiver; ?><br /><br />

<!– <input id = “initial” type=”text” required name=”input11″ value=”<?php echo $input11; ?>” /> &nbsp&nbsp&nbsp<input id = “date” type=”text” required name=”input12″ value=”<?php echo $input12; ?>” /><br /><br /> –>

<input id = “initial” type=”text” placeholder=”Initial eg:JD” required name=”input11″ value=”<?php echo $input11; ?>” /> &nbsp&nbsp&nbsp
<select name=”thismonth”>
<option>This Month</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>

<select name=”thisday”>
<option>This Day</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select> &nbsp&nbsp&nbsp

<select name=”teamselect”>
<option>Team Name</option>
<?php
if (file_exists(“DB/Team-DB2.csv”)) {
$cntr = 0;
$file = fopen(“DB/Team-DB2.csv”,”r”);
while (! feof($file)) {
$cntr ++;
$team[$cntr] = fgets($file);
$strt = strpos($team[$cntr], “~”) + 1;
$team[$cntr] = substr($team[$cntr], $strt);
$strt = strpos($team[$cntr], “~”) + 1;
$team[$cntr] = substr($team[$cntr], $strt);
$strt = strpos($team[$cntr], “~”) + 1;
$team[$cntr] = substr($team[$cntr], $strt);
$strt = strpos($team[$cntr], “~”) + 1;
$team[$cntr] = substr($team[$cntr], $strt);
$strt = strpos($team[$cntr], “~”) + 1;
$team[$cntr] = substr($team[$cntr], $strt);
$strt = strpos($team[$cntr], “~”) + 1;
$team[$cntr] = substr($team[$cntr], $strt);
$strt = strpos($team[$cntr], “~”) + 1;
$team[$cntr] = substr($team[$cntr], $strt);
$strt = strpos($team[$cntr], “~”) + 1;
$fin = strrpos ($team[$cntr], “~”);
$team[$cntr] = substr($team[$cntr], $strt, $fin – $strt);
echo “<option>” . $team[$cntr] . “</option>”;
}
fclose($file);

}
?>
</select><br /><br />

<button name=”submit” value=”submit”type=”submit”>Register</button>
</form>
<script>
$(‘input, textarea’).placeholder();
</script>

</body></html>

Here is how the blank form appears:

Click Image for larger view

form

This form uses HTML5 validation as well as backup php validation, to make certain all data is entered correctly.

The HTML5 validation is as follows:

<input id = "initial" type="text" placeholder="Initial eg:JD" required name="input11" value="<?php echo $input11; ?>" />

The required statement forces the validation, while the placeholder puts in default text which can be used as a sample of how to enter the data in the field. If there is an error, all incorrect fields are outlined in red and there is a popup warning as seen in the next picture:

Click Image for larger view

html5Val

If the browser is old and does not yet support HTML5, there is a back up php validation.

if ($input11 == "Participant's Initial"  || $input11 == "") {
$error = true;
$err .= "You must Initial your Approval of the Waiver<br />";
}

If the button is clicked with errors present, a list of all errors will appear at the top of the form. If the form is correctly filled and the button is clicked, the following
screen will appear:
Click for larger view

succReg

A database is appended with the registrants information and a confirmation is given at the top of the form, requesting the registrant to go to PayPal and complete the transaction.

The registrant is then ready to choose the payment category and click the PayPal button to make the entry fee payment.

Instantly Create an Online Flip Book Album and Slide Show

This is another application that I have ported from c to python. It creates in almost no time, a flip book album and slide show that you can just upload and use online with no further work, or send to your friends. Below are some pictures of how it looks:
This is how it looks when it starts. Instructions are on the left and the closed book cover is on the right.
Click image for a larger view.

cover

Clicking the cover brings up an index of thumbnails, as seen in the next image:

Click image for larger view.

index

Clicking a thumbnail will open the book to the page with that image.

Click image for larger view

page

You can use the right and left arrow to move forward or back a page, or you can drag a corner to manually turn a page, as seen in the next image.

Click image for larger view

curl

Clicking an image on a page will take you back to the cover, which you can also do by using the down arrow.

Using the up arrow will start a slide show, where the pages are turned automatically. This automatic presentation can be halted with the down arrow..

The interface is very simple, with just two input boxes and one button.

Click for larger view

gui

Here is how you create the album:

Create a subfolder of your main python folder; in my case C:\Python33. This will become the parent folder for all albums. Then create a subfolder  of that folder with the name of the album you want to create. In the example I am using it is called Balboa_Park. Copy or move the pictures you want to use to that folder. Then start the application. In the Album Name box enter the name of the subfolder you have created and in the Album Title box enter the title that you would want to go on the cover. Click Create Album, select the images you want included and the album is instantaneously created. The entire subfolder can then be uploaded to a web site or sent to a friend for use with no further modification. Just opening the folder in a browser starts the album.

The album and slide show are based on jquery. The following files must be placed in your main python folder

jquery-1.7.1.min.js
turn.min.js
index.html

The first two can be downloaded and the third, which contains some jquery code is the following:


<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="turn.min.js"></script>
<script type="text/javascript" src="txt.js"></script>
<style type=”text/css”>
body{
background:#ccc;
}body img {
-webkit-user-select: none;  /* Chrome all / Safari all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE 10+ */
-o-user-select: none;
user-select: none;
}#table1{position: absolute; width:50%; top:0; left: 49%}
td{position: relative; width: 10%}// #i1{position: relative; width:100%; height:650px; scrolling: yes; }
#container{position: absolute; width: 200%; height: 100%; top: 0; left: 0}#book{ position: absolute;
width:48%;
height:98%;
left: 5px;
top: 0px;
}#book .turn-page{
//    background-color:white;
}#book .cover{
background:#440500;
border: 15px solid #220200;
// background-image: url(‘T5.jpg’ ) ;
//    -moz-background-size: 100% 100%;
//    background-size: 100% 100%;
}#book .cover h1{
white-space: pre-wrap;
text-shadow: 2px 2px 2px #0000FF; color: yellow;
text-align:center;
font-size:30px;
line-height:500px;
margin:0px;
}#book .loader{
background-image:url(loader.gif);
width:24px;
height:24px;
display:block;
position:absolute;
top:238px;
left:188px;
}#book .data{
text-align:center;
font-size:40px;
color:#999;
line-height:500px;
}

#controls{position: absolute;
width:30px;
top: 0px;
left: 99%;
text-align:center;
margin:5px 0px;
font:15px arial;
}

#controls2{position: absolute;
width:30px;
top: 400px;
text-align:center;
margin:20px 0px;
font:20px arial;
}

#controls input, #controls label, #controls2 input, #controls2 label{
font:15px arial;
}

#book .odd{
background-image:-webkit-linear-gradient(left, #EFE8CC 98%, #ddd 100%);
background-image:-moz-linear-gradient(left, #EFE8CC 98%, #ddd5d0 100%);
background-image:-o-linear-gradient(left, #EFE8CC 98%, #ddd 100%);
background-image:-ms-linear-gradient(left, #EFE8CC 98%, #ddd 100%);

}

#book .even{
background-image:-webkit-linear-gradient(right, #EFE8CC 98%, #ddd 100%);
background-image:-moz-linear-gradient(right, #EFE8CC 98%, #ddd5d0 100%);
background-image:-o-linear-gradient(right, #EFE8CC 98%, #ddd 100%);
background-image:-ms-linear-gradient(right, #EFE8CC 98%, #ddd 100%);

}
</style>
</head><u></u>
<body onload =’makeTable();’ oncontextmenu=’return false; ‘>
Instructions for use<br />
Go to thumbnail index: Click Cover or Book Page<br />
Go to page with picture: Click Thumbnail<br />
Advance one page: Right Arrow or Drag Right Corner<br />
Back one page: Left Arrow or Drag Left Corner<br />
Start Slide Show: Up Arrow<br />
Stop Slide Show and Show Instructions: Down Arrow <br />
<div id=”container”>
<div id=”table1″>

</div>

<div id=”book”>
<div onclick=’document.getElementById(“container”).style.left=”-98%”;’><h1 id = “book .cover h1″>Announcement Book</h1></div>
</div>

<!– <div id=”controls”>
<label for=”page-number”>Page:</label> <input type=”text” size=”3″ id=”page-number”>
</div> –>
</div>

<script type=”text/javascript”>

// Sample using dynamic pages with turn.js

var numberOfPages = 1000; var  txt = “”;

// Adds the pages that the book will need
function addPage(page, book) {

//     First check if the page is already in the book
if (!book.turn(‘hasPage’, page)) {

// Create an element for this page
var element = $(‘<div />’, {‘class’: ‘page ‘+((page%2==0) ? ‘odd’ : ‘even’), ‘id’: ‘page-‘+page}).html(‘<i></i>’);
// If not then add the page
book.turn(‘addPage’, element, page);
// Let’s assum that the data is comming from the server and the request takes 1s.

setTimeout(function(){

getText(page);

element.html(‘<div id=”data” style=”padding: 5px 16px 5px 16px;”>page ‘+txt+'</div>’);

}, 1000);
}
}

$(window).ready(function(){
$(‘#book’).turn({acceleration: true,
pages: numberOfPages,
elevation: 50,
gradients: !$.isTouch,
when: {
turning: function(e, page, view) {

// Gets the range of pages that the book needs right now
var range = $(this).turn(‘range’, page);

// Check if each page is within the book
for (page = range[0]; page<=range[1]; page++)
addPage(page, $(this));

},

turned: function(e, page) {
$(‘#page-number’).val(page);
}
}
});

$(‘#number-pages’).html(numberOfPages);

$(‘#page-number’).keydown(function(e){

if (e.keyCode==13)
$(‘#book’).turn(‘page’, $(‘#page-number’).val());

});
});

$(window).bind(‘keydown’, function(e){

if (e.target && e.target.tagName.toLowerCase()!=’input’)
if (e.keyCode==37)
$(‘#book’).turn(‘previous’);
else if (e.keyCode==39)
$(‘#book’).turn(‘next’);
else if (e.keyCode==38)
slideShow(“1”);
else if (e.keyCode==40)
slideShow(“2”);

});

</script>

</body>
</html>

On clicking the Create Album button, If they are not already there, the three above files will be copied to the album folder and a new file, txt.js will be created in that folder.

The python is as follows:


import shutil
import os
import subprocess
import tkinter
from tkinter import *
from tkinter import filedialog
cnt = 1
def callback() :
global cnt
odir = os.getcwd()
if os.name == 'nt' :
if os.path.isdir(odir + "\\Bookalbum\\" + t1.get()) != True :
os.makedirs(odir + "\\Bookalbum\\" + t1.get())
os.chdir(odir + "\\Bookalbum\\" + t1.get())
else :
if os.path.isdir(odir + "/Bookalbum/" + t1.get()) != True :
os.makedirs(odir + "/Bookalbum/" + t1.get())
os.chdir(odir + "/Bookalbum/" + t1.get())
filename = filedialog.askopenfilenames()
filename = (filename.split())
f=open("txt.js", "w")
for w in filename :
w = w.split('/')[-1]
cnt += 1
if cnt == 2 :
f.write ("function getText(page) {\n")
f.write("var str = \"<a href='#' onclick='document.getElementById(\\x22container\\x22).style.left=\\x22-98%\\x22;'>\";\n")
f.write("if (page == 2" ") {\n")
f.write("txt = \"2<br /><br /><center>\"+ str + \"<Img SRC='" + w + "' width='98%' border='0' name='image1' alt=' ' /></a></center>\";\n")
else :
f.write("} else if (page == " + str(cnt)  + ") {\n")
f.write("txt = \"" + str(cnt) + "<br /><br /><center>\"+ str + \"<Img SRC='" + w + "' width='98%' border='0' name='image1' alt=' ' /></a></center>\";\n")
f.write("} else {\n")
f.write("txt = page;\n")
f.write("}\n")
f.write("}\n\n")
f.write(“var strname = new Array(100);\n”)
f.write(“function makeTable() {\n”)
f.write(“document.getElementById(‘book .cover h1’).innerHTML=\”” + t2.get() + “\”;\n”)
f.write(“var stra = ‘<table><tr>’;\n”)
f.write(“var strb = ‘<Img SRC=’;\n”)
f.write(“var strc=\” width=’100%’ name=’image1′ alt=’ ‘ /></a></td>\”;\n”)
cnt = 1
for w in filename :
w = w.split(‘/’)[-1]
cnt += 1
f.write(“strname[” + str(cnt) + “] = ‘” + w + “‘;\n”)
for i in range(cnt + 1, 102) :
f.write(“strname[” + str(i) + “] = ”;\n”)
f.write(“for (var j = 2;  j <= 11; j++) {\n”)
f.write(“stra = stra + \”<td><a href=’#’ onclick=\\x22$(‘#book’).turn(‘page’, \” + j + \”); document.getElementById(‘container’).style.left=’0′;\\x22\\x22 >\” + strb + strname[j] + strc;\n”)
f.write(“}\n”)
f.write(“stra = stra + ‘</tr>’;\n”)
f.write(“stra = stra + ‘<tr>’;\n”)
f.write(“for (var j = 12;  j <= 21; j++) {\n”)
f.write(“stra = stra + \”<td><a href=’#’ onclick=\\x22$(‘#book’).turn(‘page’, \” + j + \”); document.getElementById(‘container’).style.left=’0′;\\x22\\x22 >\” + strb + strname[j] + strc;”)
f.write(“}\n”)
f.write(“stra = stra + ‘</tr>’;\n”)
f.write(“stra = stra + ‘<tr>’;\n”)
f.write(“for (var j = 22;  j <= 31; j++) {\n”)
f.write(“stra = stra + \”<td><a href=’#’ onclick=\\x22$(‘#book’).turn(‘page’, \” + j + \”); document.getElementById(‘container’).style.left=’0′;\\x22\\x22 >\” + strb + strname[j] + strc;\n”)
f.write(“}\n”)
f.write(“stra = stra + ‘</tr>’;\n”)
f.write(“stra = stra + ‘<tr>’;\n”)
f.write(“for (var j = 32;  j <= 41; j++) {\n”)
f.write(“stra = stra + \”<td><a href=’#’ onclick=\\x22$(‘#book’).turn(‘page’, \” + j + \”); document.getElementById(‘container’).style.left=’0′;\\x22\\x22 >\” + strb + strname[j] + strc;\n”)
f.write(“}\n”)
f.write(“stra = stra + ‘</tr>’;\n”)
f.write(“stra = stra + ‘<tr>’;\n”)
f.write(“for (var j = 42;  j <= 51; j++) {\n”)
f.write(“stra = stra + \”<td><a href=’#’ onclick=\\x22$(‘#book’).turn(‘page’, \” + j + \”); document.getElementById(‘container’).style.left=’0′;\\x22\\x22 >\” + strb + strname[j] + strc;\n”)
f.write(“}\n”)
f.write(“stra = stra + ‘</tr>’;\n”)
f.write(“stra = stra + ‘<tr>’;\n”)
f.write(“for (var j = 52;  j <= 61; j++) {\n”)
f.write(“stra = stra + \”<td><a href=’#’ onclick=\\x22$(‘#book’).turn(‘page’, \” + j + \”); document.getElementById(‘container’).style.left=’0′;\\x22\\x22 >\” + strb + strname[j] + strc;\n”)
f.write(“}\n”)
f.write(“stra = stra + ‘</tr>’;\n”)
f.write(“stra = stra + ‘<tr>’;\n”)
f.write(“for (var j = 62;  j <= 71; j++) {\n”)
f.write(“stra = stra + \”<td><a href=’#’ onclick=\\x22$(‘#book’).turn(‘page’, \” + j + \”); document.getElementById(‘container’).style.left=’0′;\\x22\\x22 >\” + strb + strname[j] + strc;\n”)
f.write(“}\n”)
f.write(“stra = stra + ‘</tr>’;\n”)
f.write(“stra = stra + ‘<tr>’;\n”)
f.write(“for (var j = 72;  j <= 81; j++) {\n”)
f.write(“stra = stra + \”<td><a href=’#’ onclick=\\x22$(‘#book’).turn(‘page’, \” + j + \”); document.getElementById(‘container’).style.left=’0′;\\x22\\x22 >\” + strb + strname[j] + strc;\n”)
f.write(“}\n”)
f.write(“stra = stra + ‘</tr>’;\n”)
f.write(“stra = stra + ‘<tr>’;\n”)
f.write(“for (var j = 82;  j <= 91; j++) {\n”)
f.write(“stra = stra + \”<td><a href=’#’ onclick=\\x22$(‘#book’).turn(‘page’, \” + j + \”); document.getElementById(‘container’).style.left=’0′;\\x22\\x22 >\” + strb + strname[j] + strc;\n”)
f.write(“}\n”)
f.write(“stra = stra + ‘</tr>’;\n”)
f.write(“stra = stra + ‘<tr>’;\n”)
f.write(“for (var j = 92;  j <= 101; j++) {\n”)
f.write(“stra = stra + \”<td><a href=’#’ onclick=\\x22$(‘#book’).turn(‘page’, \” + j + \”); document.getElementById(‘container’).style.left=’0′;\\x22\\x22 >\” + strb + strname[j] + strc;\n”)
f.write(“}\n”)
f.write(“stra = stra + ‘</tr></table>’;\n”)
f.write(“document.getElementById(‘table1’).innerHTML=stra;\n”)
f.write(“}\n\n”)f.write(“var si; var cnt2 = 1;\n”)
f.write(“function slideShow(indx) {\n”)
f.write(“clearInterval(si);\n”)
f.write(“if (indx == \”1\”) {\n”)
f.write(“si = setInterval(\”showslides1()\”,5000);\n”)
f.write(“} else if (indx == \”2\”) {\n”)
f.write(“clearInterval(si);\n”)
f.write(“$(‘#book’).turn(‘page’, 1);\n”)
f.write(“}\n”)
f.write(“}\n\n”)f.write(“function showslides1() {\n”)
f.write(“cnt2 ++;\n”)
f.write(“$(‘#book’).turn(‘page’, cnt2);\n”)
f.write(“if (strname[cnt2] == \”\”) cnt2 = 1;\n”)
f.write(“}”)
f.close()
if os.name == ‘nt’ :
if os.path.isfile(odir + “\\Bookalbum\\” + t1.get() + “\\jquery-1.7.1.min.js”) == False :
shutil.copy(odir + “\\jquery-1.7.1.min.js”, odir + “\\Bookalbum\\” + t1.get() + “\\jquery-1.7.1.min.js”)if  os.path.isfile(odir + “\\Bookalbum\\” + t1.get() + “\\index.html”) == False  :
shutil.copy(odir + “\\index.html”, odir + “\\Bookalbum\\” + t1.get() + “\\index.html”)if  os.path.isfile(odir + “\\Bookalbum\\” + t1.get() + “\\turn.min.js”) == False  :
shutil.copy(odir + “\\turn.min.js”, odir + “\\Bookalbum\\” + t1.get() + “\\turn.min.js”)
else :
if  os.path.isfile(odir + “/Bookalbum/” + t1.get() + “/jquery-1.7.1.min.js”) == False  :
shutil.copy(odir + “/jquery-1.7.1.min.js”, odir + “/Bookalbum/” + t1.get() + “/jquery-1.7.1.min.js”)if  os.path.isfile(odir + “/Bookalbum/” + t1.get() + “/index.html”) == False  :
shutil.copy(odir + “/index.html”, odir + “/Bookalbum/” + t1.get() + “/index.html”)

if  os.path.isfile(odir + “/Bookalbum/” + t1.get() + “/turn.min.js”) == False  :
shutil.copy(odir + “/turn.min.js”, odir + “/Bookalbum/” + t1.get() + “turn.min.js”)
window = tkinter.Tk()
window.title(“Book Album”)
window.geometry(“300×200″)
b1 = Button(text=”Create Album”, width=’20’, command=callback)
b1.grid(row=”0″, column=”0″)
t1=tkinter.Entry(window, width=”20″)
t1.grid(row=”1″, column=”0″)
t2=tkinter.Entry(window, width=”20″)
t2.grid(row=”2″, column=”0″)
t1.insert(0, “Album Name”)
t2.insert(0, “Album Title”)
window.mainloop()

And that is all that is necessary to create your own flip albums and slideshows; no flash necessary.

Something Different – An Application to View 2D Videos in 3D

I have written applications and scripts in the following languages:

Fortran, Java, Javascript, Basica, Visual Basic, Win32 Assembly, c, PHP and recently Python.

This small application to view 2D videos in 3D in realtime was originally written in c, but I have recently ported it to Python, which is what I will discuss today.

This is done with the aid of the freeware application Avisynth.

Avisynth is a video editing application that runs from user created scripts, which have the avs extension. Together with other applications such as Videodubmod, it can edit videos and save them as new videos. However, certain multimedia players can play a script as if it were a video, and so view the modified video as if it were a new video, with no actual change having been made to the video.

There are a couple of caveats however. The video must be an avi video and to assure the sound is synchronized, it must be at 25fps.

Mutimedia players that will play avs scripts are Media Player Classic, MPlayer, Zoom Player and Windows Media Player.

Below is an example of a public domain video that was spontaneously viewed in 3D. I did a screen capture and converted the snippet to an animated GIF for viewing on this site.

Click image for full size

HHH

Below is a view of the GUI

Click image to view full size

gui

To run, just choose the player you want and then the type of 3D. On clicking the type, a folder dialog will open and after choosing the folder, a file dialog will open for the selected folder. Choosing a file will then open the chosen player and play the file in the selected 3D.

The type options are Crossed (side-by-side crossed), Parallel (side-by-side parallel), R-B (anaglyph – red left cyan right), B-Y (anaglyph – blue left yellow right), B-R (anaglyph – cyan left red right), and Y-B (anaglyph – yellow left blue right). The first two can be viewed without glasses, while the anaglyphs require the porper glasses.

The code is listed below:


import os
import subprocess
import tkinter
from tkinter import *
from tkinter import filedialog
def callback() :
odir = os.getcwd()
dirname = filedialog.askdirectory()
os.chdir(dirname)
filename = filedialog.askopenfilename()
a = filename.rfind(“/”) + 1
filename2 = filename[a: -4]
if os.name == ‘nt’ :
filename = filename.replace(“/”, “\\”)
fpsstr = ” fps=25, ConvertFPS=True”
syncstr = “”
if type.get() == “C” :
filestr = ‘a = DirectShowSource(“‘ + filename + ‘” , ‘ + fpsstr + ‘).ConvertToYUY2’ + syncstr + ‘ a1 = Crop(a,46,0,0,0) a2 =  Crop(a,0,0,-46,0) StackHorizontal(a1,a2)’
elif type.get() == “P” :
filestr = ‘a = DirectShowSource(“‘ + filename + ‘” , ‘ + fpsstr + ‘).ConvertToYUY2’ + syncstr + ‘ a1 = Crop(a,46,0,0,0) a2 =  Crop(a,0,0,-46,0) StackHorizontal(a2,a1)’
elif type.get() == “RB” :
filestr = ‘a = DirectShowSource(“‘ + filename + ‘” , ‘ + fpsstr + ‘)’ + syncstr  + ‘a1 = Width(a) >= 600 ? Crop(a,64,0,0,0) : Crop(a,32,0,0,0) a1 = Tweak(a1, bright = 0, cont = 1.5) a2 = Width(a) >= 600 ? Crop(a,0,0,-64,0) : Crop(a,0,0,-32,0)a2 = Tweak(a2, bright = 0, cont = 1.5)  ConvertToRGB32(a1)’  + syncstr + ‘a1 = RGBAdjust(r=1.0,g=0.0,b=0.0) ConvertToRGB32(a2) a2 = RGBAdjust(r=0.0,g=1.0,b=1.0) Merge(a1,a2,0.5)’
elif type.get() == “BY” :
filestr = ‘a = DirectShowSource(“‘ + filename + ‘” , ‘ + fpsstr + ‘)’  + syncstr + ‘a1 = Width(a) >= 600 ? Crop(a,64,0,0,0) : Crop(a,32,0,0,0) a1 = Tweak(a1, bright = 0, cont = 1.5) a2 = Width(a) >= 600 ? Crop(a,0,0,-64,0) : Crop(a,0,0,-32,0) a2 = Tweak(a2, bright = 0, cont = 1.5) ConvertToRGB32(a1) a1 = RGBAdjust(r=1.0,g=1.0,b=0.0) ConvertToRGB32(a2) a2 = RGBAdjust(r=0.0,g=0.0,b=1.0) Merge(a1,a2,0.5)’
elif type.get() == “BR” :
filestr = ‘a = DirectShowSource(“‘ + filename + ‘” , ‘ + fpsstr + ‘)’  + syncstr + ‘a1 = Width(a) >= 600 ? Crop(a,64,0,0,0) : Crop(a,32,0,0,0) a1 = Tweak(a1, bright = 0, cont = 1.5) a2 = Width(a) >= 600 ? Crop(a,0,0,-64,0) : Crop(a,0,0,-32,0) a2 = Tweak(a2, bright = 0, cont = 1.5) ConvertToRGB32(a1) a1 = RGBAdjust(r=1.0,g=0.0,b=0.0) ConvertToRGB32(a2) a2 = RGBAdjust(r=0.0,g=1.0,b=1.0) Merge(a2,a1,0.5)’
elif type.get() == “YB” :
filestr = ‘a = DirectShowSource(“‘ + filename + ‘” , ‘ + fpsstr + ‘)’  + syncstr + ‘a1 = Width(a) >= 600 ? Crop(a,64,0,0,0) : Crop(a,32,0,0,0) a1 = Tweak(a1, bright = 1.5, cont = 1.5, sat=2.0) a2 = Width(a) >= 600 ? Crop(a,0,0,-64,0) : Crop(a,0,0,-32,0) a2 = Tweak(a2, bright = 1.5, cont = 1.5, sat=2.0) ConvertToRGB32(a1) a1 = RGBAdjust(r=1.0,g=1.0,b=0.8) ConvertToRGB32(a2) a2 =RGBAdjust(r=0.0,g=0.0,b=0.2) Merge(a2,a1,0.5)’if player.get() == “MPC” :
appstr = “mplayerc.exe”
elif player.get() == “MP” :
appstr = “mplayer.exe”
elif player.get() == “WMP” :
appstr = “wmplayer.exe”
elif player.get() == “Zoom” :
appstr = “zplayer.exe”outputstr = odir + “/” + filename2 + “.avs”
if os.name == ‘nt’ :
outputstr = outputstr.replace(“/”, “\\”)
print(filename)
print(outputstr)
os.chdir(odir)
f = open(outputstr, ‘w’)
f.write(filestr)
f.close
subprocess.Popen([appstr, outputstr])window = tkinter.Tk()
window.title(“3dConversion”)
window.geometry(“360×480”)
text1 = “Player                                                        ”
text2 = “3d-Type                                                    ”
label1 = Label(window, text=text1, anchor=W, justify=LEFT)
player=StringVar()
r1 = Radiobutton(window, text=”MediaPlayer Classic                 “, variable = player, value=”MPC”)
r2 = Radiobutton(window, text=”MPlayer                                     “, variable = player, value=”MP”)
r3 = Radiobutton(window, text=”Windows Media Player            “, variable = player, value=”WMP”)
r4 = Radiobutton(window, text=”Zoom Player                            “, variable = player, value=”Zoom”)
label2 = Label(window, text=text2, anchor=W, justify=LEFT)
type=StringVar()
r5 = Radiobutton(window, text=”Crossed                                      “, variable = type, value=”C”, command=callback)
r6 = Radiobutton(window, text=”Parallel                                       “, variable = type, value=”P”, command=callback)
r7 = Radiobutton(window, text=”R-B                                            “, variable = type, value=”RB”, command=callback)
r8 = Radiobutton(window, text=”B-Y                                            “, variable = type, value=”BY”, command=callback)
r9 = Radiobutton(window, text=”B-R                                            “, variable = type, value=”BR”, command=callback)
r10 = Radiobutton(window, text=”Y-B                                           “, variable = type, value=”YB”, command=callback)
label1.grid(row=0, column=0)
r1.grid(row=1, column=0)
r2.grid(row=2, column=0)
r3.grid(row=3, column=0)
r4.grid(row=4, column=0)
label2.grid(row=5, column=0)
r5.grid(row=6, column=0)
r6.grid(row=7, column=0)
r7.grid(row=8, column=0)
r8.grid(row=9, column=0)
r9.grid(row=10, column=0)
r10.grid(row=11, column=0)
window.mainloop()

The first part imports necessary modules.

The second part saves the application directory in a variable, chooses a folder and then the video file path, gets the file name and converts the slashes for windows, if it is to be viewed there.


odir = os.getcwd()
dirname = filedialog.askdirectory()
os.chdir(dirname)
filename = filedialog.askopenfilename()
a = filename.rfind("/") + 1
filename2 = filename[a: -4]
if os.name == 'nt' :
filename = filename.replace("/", "\\")

The next code creates the script strings for the various types of 3D


if type.get() == "C" :
filestr = 'a = DirectShowSource("' + filename + '" , ' + fpsstr + ').ConvertToYUY2' + syncstr + ' a1 = Crop(a,46,0,0,0) a2 =  Crop(a,0,0,-46,0) StackHorizontal(a1,a2)'
elif type.get() == "P" :
filestr = 'a = DirectShowSource("' + filename + '" , ' + fpsstr + ').ConvertToYUY2' + syncstr + ' a1 = Crop(a,46,0,0,0) a2 =  Crop(a,0,0,-46,0) StackHorizontal(a2,a1)'

The next code sets up the player, creates the avs file and writes to it.


if player.get() == "MPC" :
appstr = "mplayerc.exe"
elif player.get() == "MP" :
appstr = "mplayer.exe"
elif player.get() == "WMP" :
appstr = "wmplayer.exe"
elif player.get() == "Zoom" :
appstr = "zplayer.exe"outputstr = odir + "/" + filename2 + ".avs"
if os.name == 'nt' :
outputstr = outputstr.replace("/", "\\")
print(filename)
print(outputstr)
os.chdir(odir)
f = open(outputstr, 'w')
f.write(filestr)
f.close
subprocess.Popen([appstr, outputstr])

;

The final code sets up the GUI


window = tkinter.Tk()
window.title("3dConversion")
window.geometry("360x480")
text1 = "Player                                                        "
text2 = "3d-Type                                                    "
label1 = Label(window, text=text1, anchor=W, justify=LEFT)
player=StringVar()
r1 = Radiobutton(window, text="MediaPlayer Classic                 ", variable = player, value="MPC")
r2 = Radiobutton(window, text="MPlayer                                     ", variable = player, value="MP")
r3 = Radiobutton(window, text="Windows Media Player            ", variable = player, value="WMP")
r4 = Radiobutton(window, text="Zoom Player                            ", variable = player, value="Zoom")
label2 = Label(window, text=text2, anchor=W, justify=LEFT)
type=StringVar()
r5 = Radiobutton(window, text="Crossed                                      ", variable = type, value="C", command=callback)
r6 = Radiobutton(window, text="Parallel                                       ", variable = type, value="P", command=callback)
r7 = Radiobutton(window, text="R-B                                            ", variable = type, value="RB", command=callback)
r8 = Radiobutton(window, text="B-Y                                            ", variable = type, value="BY", command=callback)
r9 = Radiobutton(window, text="B-R                                            ", variable = type, value="BR", command=callback)
r10 = Radiobutton(window, text="Y-B                                           ", variable = type, value="YB", command=callback)
label1.grid(row=0, column=0)
r1.grid(row=1, column=0)
r2.grid(row=2, column=0)
r3.grid(row=3, column=0)
r4.grid(row=4, column=0)
label2.grid(row=5, column=0)
r5.grid(row=6, column=0)
r6.grid(row=7, column=0)
r7.grid(row=8, column=0)
r8.grid(row=9, column=0)
r9.grid(row=10, column=0)
r10.grid(row=11, column=0)
window.mainloop()

Here is how a created avs file appears:


a = DirectShowSource("G:\mediaplayer-viral\FLV\AVI\A-L\HouseonHauntedHill_xvid.avi" ,  fps=25, ConvertFPS=True)a1 = Width(a) >= 600 ? Crop(a,64,0,0,0) : Crop(a,32,0,0,0) a1 = Tweak(a1, bright = 0, cont = 1.5) a2 = Width(a) >= 600 ? Crop(a,0,0,-64,0) : Crop(a,0,0,-32,0) a2 = Tweak(a2, bright = 0, cont = 1.5) ConvertToRGB32(a1) a1 = RGBAdjust(r=1.0,g=0.0,b=0.0) ConvertToRGB32(a2) a2 = RGBAdjust(r=0.0,g=1.0,b=1.0) Merge(a2,a1,0.5)

This application was written in Python 3.3 and although i feel it will work for all Python 3 versions, I am not sure about Python 2. Python is free and versions can be installed for any os.