Need help creating online Lens calculator

[isntworkdull]

Hi all

I have an online cctv website, and i want to try to help customers by providing an online lens calculator.

i have found an offline one http://homepage.ntlworld.com/n.buckingham1/index.htm

now i know all the maths equations that are required, but i've just got no idea how to go about this.

my website knowledge is limited to html & css, i know very little about any programming.

basically i'm wondering if anyone can point me in the right direction, any ideas how i could start to move forward with this?

any advice is very welcome

thanks
james

[djr33]

To start, you need to decide how the user will interact and what language(s) you want to use.

A serverside language (like PHP) functions only on the server-- it runs through code and then outputs html, so that won't be live interaction with the user, but it allows interaction with databases, files on the server, etc. So if you wanted to make user accounts and store information that would help. (Might help if you have tables of data for certain brands, etc.)

A clientside language (like Javascript) functions on the page itself, in real time with the user. It is, however, limited then to just running on the user's computer, not on the server (with files, etc.). The problems here, though, come from running on different systems-- differences in the browsers, some users without Javascript, and testing enough to be sure it's reliable, rather than knowing it is when it's just running on your server every time.

You can also use both to interact with each other (a popular method is called Ajax).

So, for your situation it's probably best to use Javascript, unless you need to later store information or get values from a database. (If your calculations get very complex, with lots of references to camera models, etc., then it may be worth looking into adding something with a PHP back end at least.)

What you will want to do, assuming you want it to work something like that screen capture of the program on your page, is make a form. This is just html, with enough inputs for all the information required. Then you do some basic math with some javascript and assign an event to a button-- something like: onClick="calculate()".

However, if you are ok with having to submit the page and reloading it through the server, the same effect could be done with PHP and might actually be easier. It would just be a little fancier to have it respond in real time with Javascript. The complex way to do this would be to have Javascript as the main option and PHP as a backup for users who have Javascript disabled (rare, but some do).

Anyway, I hope this gives you some idea where to start. Once you know a bit more about what you're doing, feel free to tell us and we can give some more advice. Sorry for being so vague right now.

The real question is how you are going to set up the calculation itself-- how you are going to get it to calculate. The math will be very easy, just variables and expressions you enter. ($lenslength*$distance=$result, etc.)

So to start, pick what language you'd like to try and just get a basic form going with a tutorial. It should be very easy to adapt it to give you basic calculations. Google for a "basic javascript calculator tutorial" and see what that gives you.

[isntworkdull]

thanks for the reply djr33

I've started trying to build this using javascript. which i know nothing about and am using tutorials to try and figure it out myself.

you can see what i've come up with so far at www [dot] jmcsecurity.co.uk [/] CCTV-Lens-Calculator.asp

i've got a simple calculation in place, but i'm stuck on something, if the customer has 3 options, say A, B or C.

and each of these options represent a value, in the equation. how can i do this using javascript and radio buttons. (the form i can build, i just dont know how to make javascript take the value selected and input it into my equation.)

my equation is:

difference = Math.round( A, B, or C * (myDistance / myWidth) * 10) /10;

any one can tell me this?

thanks
James

[djr33]

The simple answer is to not use checkboxes. Use radio buttons and that way you can just get the associated value. Or you can use a dropdown menu which will have the same effect.
If you really want to use checkboxes, then you'll have to do it indirectly, with javascript running through each one and looking to see whether it's checked, then assign a value to the variable and then calculate the form-- plus I'm not sure what you'd do if a couple are checked. Radio buttons are basically the form of checkbox that fits what you're doing, though, since you only need one at a time.



Also, a couple notes:
1. You can disable typing in the last field, so that way people won't try to type in a value themselves and get confused when it changes for "calculate".
2. For posting urls on the forum there's no need to make them hidden ("[dot]" etc) as long as it's a legitimate question, which yours is. (But of course if you want to hide it from search engines while you're building, or something else, then feel free to do so.)

[isntworkdull]

Thanks again, DJR33

I'm happy to use radio buttons, but what javascript code will get the associated value?

can you point me in the right direction?

also, how would i disable the typing into the last field, that sounds like a good tip?

thanks
James

edit**

i found a tutorial which shows me how to do this, but i cant seem to get it to work...can anyone see a blatant error in the below javascript?

<!-- Begin
var myWidth;
var myDistance;
function process(){

var ccd = "";

for (i = 0; i < 3; i++){
if (document.lenscalc.chooseccd[i].checked == true){
ccd = document.lenscalc.chooseccd[i].value; }
}
}
function HowMany(lenscalc) {
var lens;
lens = Math.round( ccd * (myDistance / myWidth) * 10) /10;
lenscalc.Fdiff.value = lens;
}
function SetMyWidth(width) {
myWidth = width.value;
}
function SetmyDistance(dis) {
myDistance = dis.value;
}
function ClearForm(lenscalc){
lenscalc.myWidth.value = "";
lenscalc.myDistance.value = "";
lenscalc.Fdiff.value = "";
lenscalc.comment.value = "";
}
// End -->

the script in red was according to a tutorial what i needed to take the value from a radio button selected by the user....

does the code look ok?

please advise

[vwphillips]

have not checked your code but have done this

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/

function Cal(frm){
 var ABC='';
 for (var z0=0;z0<frm['chooseccd'].length;z0++){
  if (frm['chooseccd'][z0].checked){
   ABC=frm['chooseccd'][z0].value;
  }
 }
 var wip=frm['myWidth'];
 wip.value=wip.value.replace(/[^0-9.]/g,''); // only floaing point number
 var dip=frm['myDistance'];
 dip.value=dip.value.replace(/[^0-9.]/g,''); // only floaing point number
 if (wip.value&&dip.value&&ABC){
// input values are strings */ or - calculations automatically change the value type to digits
  frm['Fdiff'].value=Math.round( ABC * (dip.value / wip.value) * 10) /10;
 }
 else {
  frm['Fdiff'].value='';
 }
}
/*]]>*/
</script></head>

<body>
<form name="lenscalc" method="post">
<table border="3">
<tr>
<td><div align="center">1/4&quot; CCD</div></td>
<td><div align="center">1/3&quot; CCD</div></td>
<td><div align="center">1/2&quot; CCD</div></td>        Fdiff    chooseccd myWidth myDistance

</tr>
<tr>
<td><div align="center"><input type="radio" name="chooseccd" value="3.6" /></div></td>
<td><div align="center"><input type="radio" name="chooseccd" value="4.8" /></div></td>
<td><div align="center"><input type="radio" name="chooseccd" value="6.4" /></div></td>
</tr>
</table>
<table border="3">
<tr>
<td><div align="center"><strong>Width</strong><br />(of object)</div></td>
<td><div align="center"><strong>Distance</strong><br />(from camera to object)</div></td>
<td><div align="center"><strong>Lens size Required</strong><br /></div></td>

<td><input type="button" onclick="Cal(this.form)" value="Calculate" /></td>
</tr>
<tr>
<td><div align="center"><input type="text"  name="myWidth" size="4" /> Metres</div></td>
<td><div align="center"><input type="text"  name="myDistance" size="4"  /> Metres</div></td>
<td><div align="center"><input type="text" name="Fdiff" value="" size="6" disabled="disabled" /> mm</div></td>
<td><div align="center"><input type="button" value="   Reset   " onclick="this.form.reset()" /></div></td>
</tr>
</table>

</form>


</body>

</html>

[isntworkdull]

thanks Vic

that works a treat...

all i need to do now is have a good look at it, and see if i can understand it in anyway... as its completely different to the tutorials i was looking at! lol

important thing thou, it works

thanks again
James

[isntworkdull]

Me again,

in the above code (generously provided by Vic), the distance is simply estimated by the customer...

but i am thinking of making it a little more accurate, and to do this i would need to use pythagoras theory.

a2 + b2 = c2

"a" being the horizontal distance between camera and object
"b" being the height of the camera from the ground
"c" being the true distance

so to work out the true distance:

c= (square root of) (a2 + b2)

so...

can anyone tell me how i would go about adding this to the above code, i would obviously need to get the customer to input 2 details, "a" & "b". but how can i go about this in javascript.

thanks
James

edit***
ignore this message, i've figured it out...