Nice! Looks like you got the math right too, I guess we are using the same math even.
My main FOV calculator uses ASM. I've posted the ASM for that before. The AJAX one uses PHP.
Anyway, some advanced stuff is neat. I made mine more along the lines for gamers and end-users. It only offers the most common aspect-ratios because there's little need for other options. It would only complicate things with certain people. The only other thing that might be useful is maybe adding a list of resolutions to go along with the aspect-ratios because not everyone understands them.
Anyway, I have no problem handing out the source. It's a common algorithm.
calc.js
Code:
/* By Dopefish -- http://imk.cx/ -- <
[email protected]> */
var xmlHttp;
function calculate()
{
xmlHttp = GetXmlHttpObject();
if(xmlHttp == null)
{
alert("Your web browser does not support AJAX.");
return;
}
var cb1 = document.forms[0].cb1.value;
var cb2 = document.forms[0].cb2.value;
var fov = document.forms[0].fov.value;
var url = "fovcalc.php";
url = url + "?cb1=" + cb1;
url = url + "&cb2=" + cb2;
url = url + "&fov=" + fov;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(null);
}
function stateChanged()
{
if(xmlHttp.readyState == 4)
{
document.getElementById("fovResult").innerHTML = xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp = null;
try
{
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
fovcalc.php
Code:
<?php
/* By Dopefish -- http://imk.cx/ -- <
[email protected]> */
if(isset($_GET['cb1']) && isset($_GET['cb2']) && isset($_GET['fov'])):
$ComboBox1 = $_GET['cb1'];
$ComboBox2 = $_GET['cb2'];
$FieldOfView = $_GET['fov'];
echo Rad2Deg(2 * ATan(($ComboBox2 / $ComboBox1) * Tan(Deg2Rad($FieldOfView) / 2)));
else:
echo "Not all fields were set.";
endif;
?>
calc.xhtml -- Implement this in your own way. :)
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>fovCalculator</title>
<script type="text/javascript" src="calc.js"></script>
</head>
<body>
<div>
<form action="">
<div>
Source Aspect Ratio:<br />
<select name="cb1" class="dropdown" onchange="calculate(this.value)">
<option value="1.25">5:4</option>
<option value="1.3333333333333333333333333333333" selected="selected">4:3</option>
<option value="1.6">16:10</option>
<option value="1.6666666666666666666666666666667">15:9</option>
<option value="1.7777777777777777777777777777778">16:9</option>
<option value="3.75">15:4 (3 x 5:4)</option>
<option value="4">12:3 (3 x 4:3)</option>
<option value="4.8">24:5 (3 x 16:10)</option>
<option value="5">15:3 (3 x 15:9)</option>
<option value="5.3333333333333333333333333333333">16:3 (3 x 16:9)</option>
</select>
<br /><br />
Destination Aspect Ratio:<br />
<select name="cb2" class="dropdown" onchange="calculate(this.value)">
<option value="1.25">5:4</option>
<option value="1.3333333333333333333333333333333">4:3</option>
<option value="1.6" selected="selected">16:10</option>
<option value="1.6666666666666666666666666666667">15:9</option>
<option value="1.7777777777777777777777777777778">16:9</option>
<option value="3.75">15:4 (3 x 5:4)</option>
<option value="4">12:3 (3 x 4:3)</option>
<option value="4.8">24:5 (3 x 16:10)</option>
<option value="5">15:3 (3 x 15:9)</option>
<option value="5.3333333333333333333333333333333">16:3 (3 x 16:9)</option>
</select>
<br /><br />
Default FOV:<br />
<input type='text' name='fov' onkeyup="calculate(this.value);" />
</div>
</form>
<br />
Corrected FOV:<br />
<div id="fovResult"></div>
</div>
</body>
</html>
Login
FAQ
Search
Members
