USER@raspberrypi:~ $ cat Stepper2.html
<html>
<head>
<title>Stepper</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
// read CurrentPosition On start
webiopi().ready(function(){
setInterval(ReadPosition,500);
ReadTarget(0);
ReadTarget(1);
});
function ReadPosition()
{
webiopi().callMacro("GetStepperPosition",[0], readPositioncallback);
webiopi().callMacro("GetStepperPosition",[1], readPositioncallback);
}
function SetTarget(StepperId,value)
{
var nStep = parseInt(value);
webiopi().callMacro("StepperMoveTo",[StepperId , nStep]);
}
function ReadTarget(StepperId)
{
webiopi().callMacro("GetStepperTarget",[StepperId], readTargetcallback);
}
var readTargetcallback = function(macro,args,response){
var StepperId = parseInt(args[0]);
var TargetP = "TargetP" + StepperId.toString();
// let's put the Target value
document.getElementById(TargetP).value=response;
}
var readPositioncallback = function(macro,args,response){
var StepperId = parseInt(args[0]);
var CurrentP = "CurrentP" + StepperId.toString();
// let's put the position
document.getElementById(CurrentP).value=response;
}
function Move(StepperId , StepCount) {
webiopi().callMacro("StepperMove",[StepperId , StepCount]);
var TargetP = "TargetP" + StepperId.toString();
var newTarget = parseInt(document.getElementById(TargetP).value);
newTarget = newTarget + StepCount;
document.getElementById(TargetP).value = newTarget.toString();
}
function Forward(StepperId)
{
var nStep = "nStep"+StepperId.toString();
var StepValue = parseInt(document.getElementById(nStep).value)
Move(StepperId,StepValue);
}
function Backward(StepperId)
{
var nStep = "nStep"+StepperId.toString();
var StepValue = parseInt(document.getElementById(nStep).value)
Move(StepperId,-StepValue);
}
</script>
<style type="text/css">
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color:#ffffff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
width: 130px;
height:30px;
margin:1px;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
padding:6px 24px;
}
.myButton:active {
color:#ff0000;
position:relative;
top:1px;
padding:6px 24px;
}
</style>
</head>
<body>
<center><h3> My Stepper</h3><br>
<table border="2">
<td>
<table style="margin-left:auto;margin-right:auto">
<tr><td colspan="2" align="center">Stepper 0</td></tr>
<tr><td>Current Position:</td><td><input type="text" id="CurrentP0" name="CurrentP0" value="0" readonly></td></tr>
<tr><td>Target Position:</td><td><input type="text" id="TargetP0" name="TargetP0" value="0" onchange="SetTarget(0,this.value)"></td></tr>
<tr><td>Number of Step:</td><td><input type="text" id="nStep0" name="nStep0" value="100"></td></tr>
<tr><td colspan="2" align="center"><button class="myButton" type="button" onclick="Backward(0)">Backward</button>
<button class="myButton" type="button" onclick="Forward(0)">Forward</button></td></tr>
</table>
</td>
<td>
<table border="0">
<tr><td colspan="2" align="center">Stepper 1</td></tr>
<tr><td>Current Position:</td><td><input type="text" id="CurrentP1" name="CurrentP1" value="0" readonly></td></tr>
<tr><td>Target Position:</td><td><input type="text" id="TargetP1" name="TargetP1" value="0" onchange="SetTarget(0,this.value)"></td></tr>
<tr><td>Number of Step:</td><td><input type="text" id="nStep1" name="nStep1" value="100"></td></tr>
<tr><td colspan="2" align="center"><button class="myButton" type="button" onclick="Backward(1)">Backward</button>
<button class="myButton" type="button" onclick="Forward(1)">Forward</button></td></tr>
</table>
</td>
</table>
</center>
</body>
</html>
USER@raspberrypi:~ $