krommetje
Super User
Joined: December 29 2004
Location: Netherlands
Online Status: Offline
Posts: 695
|
| Posted: October 26 2006 at 06:21 | IP Logged
|
|
|
Hey guys,
I stumbled on a piece of Javascript which enables you to enter data into a form using a Javascript Keypad and I want to use it in a new Touchscreen I am currently saving for:
for more info here is the link:
http://www.jtricks.com/javascript/forms/calculator.html
When I hit the link in the keypad to close the Keypad, I get an error.... when I click the Calc.gif button everything works normal.... At first I didn't get this to work at al but since I hate to give up I took a hard bite and I got it to work...
(I was biting off more javascript then I could possible chew...)
Code:
<center>
<font face="MS Sans Serif" color=white size=2>Bedlampje Maike:
<script type="text/javascript"><!--
/* Script by: www.jtricks.com
* Version: 20060426
* Latest version:
* www.jtricks.com/javascript/forms/calculator.html
*/
var calc_image = 'calc.gif';
var calc_start_num = false;
var calc_cur_oper = '';
var calc_acc = 0;
var calc_prev_oper = 0;
var calc_prev_entry = 0;
var calc_field;
function calc_num_value()
{
if (calc_field.value == '0.')
return calc_field.value;
else if (isNaN(calc_field.value))
return 0;
else
return parseFloat(calc_field.value);
}
function calc_perform_oper(oper, val1, val2)
{
switch(oper)
{
case '*':
return val1 * val2;
case '/':
return val1 / val2;
case '+':
return Math.round(
val1 * 10000000000000 +
val2 * 10000000000000) /
100000000000 00;
case '-':
return Math.round(
val1 * 10000000000000 -
val2 * 10000000000000) /
100000000000 00;
default:
return val2;
}
}
function calc_press(button)
{
switch (button)
{
case 'CE':
calc_start_num = true;
calc_field.value = "0";
return;
case 'C':
calc_acc = 0;
calc_prev_entry = 0;
calc_cur_oper = "";
calc_prev_oper = "";
calc_start_num = true;
calc_field.value = "0";
return;
case '+/-':
calc_field.value = calc_num_value() * -1;
return;
case ',':
case '.':
if (calc_start_num || isNaN(calc_field.value))
{
calc_f ield.value = "0.";
calc_s tart_num = false;
}
else
{
if &nbs p;(calc_field.valu e.indexOf(".") == -1)
calc_f ield.value += ".";
}
return;
case '+':
case '-':
case '/':
case '*':
calc_prev_oper = button;
if (calc_start_num)
{
calc_c ur_oper = button;
return ;
}
// No break here.
case '=':
calc_start_num = true;
if (button == '=' && calc_cur_oper != '=')
{
calc_p rev_entry = calc_num_value();
}
if (button == '=' && calc_cur_oper == '=')
{
calc_a cc = calc_perform_oper(
calc_p rev_oper, calc_acc, calc_prev_entry)
}
else
calc_a cc = calc_perform_oper(
calc_c ur_oper , calc_acc, calc_num_value());
calc_field.value = calc_acc;
calc_cur_oper = button;
return;
}
if (calc_start_num)
{
calc_field.value = button;
calc_start_num = false;
}
else
{
if (calc_num_value() == "0")
calc_f ield.value = button;
else
calc_f ield.value += button;
}
}
function calc_setup(frm, inp)
{
if (!document.getElementById)
return;
document.write(
'<a href="javascript:void(0);" ' +
'onclick="calc_show_hide(\'' +
frm + '\', \'' + inp +
'\')"><img style="border:none" ' +
'src="' + calc_image +
'"><' + '/a>');
}
function move_box(an, box)
{
var cleft = 0;
var ctop = 0;
var obj = an;
while (obj.offsetParent)
{
cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;
}
box.style.left = cleft + 'px';
ctop += an.offsetHeight + 2;
// Handle Internet Explorer body margins,
// which affect normal document, but not
// absolute-positioned stuff.
if (document.body.currentStyle &&
document.body.currentStyle['marginTop'])
{
ctop += parseInt(
docume nt.body.curr entStyle ['marginTop']);
}
box.style.top = ctop + 'px';
}
function calc_show_hide(frm, inp)
{
var boxcalc = document.getElementById('attach_calc_div');
var to_obj = document.forms[frm].elements[inp];
if (boxcalc == null)
return;
if (to_obj != calc_field ||
boxcalc.style.display=='none')
{
// Show and move calculator.
move_box(to_obj, boxcalc);
calc_field = to_obj;
boxcalc.style.display='block';
}
else
// Hide currently shown calculator.
boxcalc.style.display='none';
return false;
}
function calc_hide()
{
document.getElementById('attach_calc _div')
.style.display = 'none';
}
//--></script>
<form name="dim" action="/ph-cgi/devicebtn">
<form method="get" action="/ph-cgi/devicebtn">
<input type="hidden" name="type" value="0">
<input type="hidden" name="id" value="M2">
<input type="submit" name="cmd" value="On" style="background-color:white;border-color:red";>
<input type="submit" name="cmd" value="Off" style="background-color:white;border-color:red"'>
<input type="submit" value="ADim" style="background-color:white;border-color:red";>
<input name="level" type="text" size="5" value="0">
<script type="text/javascript"><!--
calc_setup('dim', 'level');
//--></script>
<input type="hidden" name="cmd" value="ADim">
<div id="attach_calc_div"
style="background:white;padding:2px;border:1px solid #2266AA;position:absolute;display:none">
<form name="attach_calc_form" action="/ph-cgi/devicebtn"
style="margin-bottom:0px;margin-top:0px">
<table style="border:none;padding:0px;border-spacing:0px">
<tbody>
<tr><td></td><td></td><td&g t;</td><td></td>
<td align="center"><a style="font-size:9px;color:#2266AA"
href="javascript:void(0);" onmouseup="calc_hide()">Close</a></td>
</tr>
<tr>
<td><input style="width:40px" name="cbtn7"
type="button" value="7" onmouseup="calc_press(7)"></td>
<td><input style="width:40px" name="cbtn8"
type="button" value="8" onmouseup="calc_press(8)"></td>
<td><input style="width:40px" name="cbtn9"
type="button" value="9" onmouseup="calc_press(9)"></td>
<td><input style="width:40px" name="cbtnp"
type="button" value="+" onmouseup="calc_press('+')"></td>
<td><input style="width:40px" name="cbtnm"
type="button" value="-" onmouseup="calc_press('-')"></td>
</tr>
<tr>
<td><input style="width:40px" name="cbtn4"
type="button" value="4" onmouseup="calc_press(4)"></td>
<td><input style="width:40px" name="cbtn5"
type="button" value="5" onmouseup="calc_press(5)"></td>
<td><input style="width:40px" name="cbtn6"
type="button" value="6" onmouseup="calc_press(6)"></td>
<td><input style="width:40px" name="cbtnm"
type="button" value="*" onmouseup="calc_press('*')"></td>
<td><input style="width:40px" name="cbtnd"
type="button" value="/" onmouseup="calc_press('/')"></td>
</tr>
<tr>
<td><input style="width:40px" name="cbtn1"
type="button" value="1" onmouseup="calc_press(1)"></td>
<td><input style="width:40px" name="cbtn2"
type="button" value="2" onmouseup="calc_press(2)"></td>
<td><input style="width:40px" name="cbtn3"
type="button" value="3" onmouseup="calc_press(3)"></td>
<td><input style="width:40px" name="cbtnc"
type="button" value="C" onmouseup="calc_press('C')"></td>
<td><input style="width:40px" name="cbtne"
type="button" value="CE" onmouseup="calc_press('CE')"></td>
</tr>
<tr>
<td><input style="width:40px" name="cbtn0"
type="button" value="0" onmouseup="calc_press(0)"></td>
<td><input style="width:40px" name="cbtnd"
type="button" value="." onmouseup="calc_press('.')"></td>
<td><input style="width:40px" name="cbtnn"
type="button" value="+/-" onmouseup="calc_press('+/-')"></td>
<td colspan=2><input style="width:84px" name="cbtnq"
type="Button" value="=" onmouseup="calc_press('=')"></td>
</tr>
</table>
</form>
</div>
<center><font face="MS Sans Serif" color=blue size=2><b>Dimlevel: <font face="MS Sans Serif" color=yellow
size=2><%int(PH_GETX10LEVEL("M2"))%>
|
|
|
it took a few days to figure out how it works andf to get it working.... (silly me  ) The PSP-page works but when I press the calculator link to close the keypad I get an error, can you wizzards out there explain this to me? When I click the calculator button it appears and disappears normally.....
for now I have removed the CLOSE link out of the page so to hide the Keypad, the CALC.GIF button has to be clicked again...
2nd question:
where should I put the NextUrl Statement?
Peter
Edited by krommetje - October 28 2006 at 09:58
|
Active Topics 
Memberlist 
Search 
Help
Register 
Login
PowerHome Messageboard : PowerHome Programming
Topic: Javascript Keypad for Dim value input
