Skip to content

Commit

Permalink
Modified the example page now use two JoyStick
Browse files Browse the repository at this point in the history
  • Loading branch information
@bobboteck
bobboteck committed Apr 10, 2020
1 parent ed73f8c commit db716dd
Showing 1 changed file with 103 additions and 34 deletions.
137 changes: 103 additions & 34 deletions joy.html
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,115 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Joy</title>
<style>
<head>
<title>Joy</title>
<meta charset="utf-8">
<meta name="description" content="Example page of use pure Javascript JoyStick">
<meta name="author" content="Roberto D'Amico">
<link rel="shortcut icon" type="image/png" href="http://bobboteck.github.io/img/roberto-damico-bobboteck.png">
<style>
*
{
box-sizing: border-box;
}
body
{
margin: 0px;
padding: 0px;
margin: 0px;
padding: 0px;
font-family: monospace;
}
.row
{
display: inline-flex;
clear: both;
}
.columnLateral
{
float: left;
width: 15%;
min-width: 300px;
}
.columnCetral
{
float: left;
width: 70%;
min-width: 300px;
}
#joy2Div
{
width:200px;
height:200px;
margin:50px
}
#joystick
{
border: 1px solid #9C9898;
width: 190px;
height: 190px;

border: 1px solid #FF0000;
}
</style>
<script src="joy.js"></script>
</head>
<body>
<div id="joyDiv" style="width:200px;height:200px;margin-bottom:20px;margin:50px"></div>
#joystick2
{
border: 1px solid #0000FF;
}
</style>
<script src="joy.js"></script>
</head>
<body>
<div class="row">
<div class="columnLateral">
<div id="joy1Div" style="width:200px;height:200px;margin:50px"></div>
Posizione X:<input id="joy1PosizioneX" type="text" /><br />
Posizione Y:<input id="joy1PosizioneY" type="text" /><br />
Direzione:<input id="joy1Direzione" type="text" /><br />
X :<input id="joy1X" type="text" /></br>
Y :<input id="joy1Y" type="text" />
</div>
<div class="columnCetral">
<h2>JoyStick</h2>
<p>
A simple JoyStick that use HTML5, Canvas and JavaScript, for touch and mouse interfaces (no JQuery required).<br /><br />
The project is available at <a href="https://github.com/bobboteck/JoyStick">https://github.com/bobboteck/JoyStick</a>.<br /><br />
The left JoyStick (in red square) is an example that use default parametrs, the right JoyStick (in blue square) instead use same custom parameters, specifically the title and the autoReturnToCenter disabled, this also uses CSS class instead inline style.<br /><br />
<b>NOTE:</b> currently the JoyStick does not work correctly if inserted in a Table tag, to put more than one JoyStick on a single line it is recommended to create a structure with the Div, as in this example page.
</p>
</div>
<div class="columnLateral">
<div id="joy2Div"></div>
Posizione X:<input id="joy2PosizioneX" type="text" /></br>
Posizione Y:<input id="joy2PosizioneY" type="text" /></br>
Direzione:<input id="joy2Direzione" type="text" /></br>
X :<input id="joy2X" type="text" /></br>
Y :<input id="joy2Y" type="text" />
</div>
</div>
<script type="text/javascript">
// Create JoyStick object into the DIV 'joy1Div'
var Joy1 = new JoyStick('joy1Div');

var joy1IinputPosX = document.getElementById("joy1PosizioneX");
var joy1InputPosY = document.getElementById("joy1PosizioneY");
var joy1Direzione = document.getElementById("joy1Direzione");
var joy1X = document.getElementById("joy1X");
var joy1Y = document.getElementById("joy1Y");

setInterval(function(){ joy1IinputPosX.value=Joy1.GetPosX(); }, 50);
setInterval(function(){ joy1InputPosY.value=Joy1.GetPosY(); }, 50);
setInterval(function(){ joy1Direzione.value=Joy1.GetDir(); }, 50);
setInterval(function(){ joy1X.value=Joy1.GetX(); }, 50);
setInterval(function(){ joy1Y.value=Joy1.GetY(); }, 50);

Posizione X:<input id="posizioneX" type="text" /></br>
Posizione Y:<input id="posizioneY" type="text" /></br>
Direzione:<input id="direzione" type="text" /></br>
X :<input id="X" type="text" /></br>
Y :<input id="Y" type="text" />
<script type="text/javascript">
// Create JoyStick object into the DIV 'joyDiv'
var joy = new JoyStick('joyDiv');
// Create JoyStick object into the DIV 'joy2Div'
var joy2Param = { "title": "joystick2", "autoReturnToCenter": false };
var Joy2 = new JoyStick('joy2Div', joy2Param);

var inputPosX = document.getElementById("posizioneX");
var inputPosY = document.getElementById("posizioneY");
var direzione = document.getElementById("direzione");
var x = document.getElementById("X");
var y = document.getElementById("Y");
var joy2IinputPosX = document.getElementById("joy2PosizioneX");
var joy2InputPosY = document.getElementById("joy2PosizioneY");
var joy2Direzione = document.getElementById("joy2Direzione");
var joy2X = document.getElementById("joy2X");
var joy2Y = document.getElementById("joy2Y");

setInterval(function(){ inputPosX.value=joy.GetPosX(); }, 50);
setInterval(function(){ inputPosY.value=joy.GetPosY(); }, 50);
setInterval(function(){ direzione.value=joy.GetDir(); }, 50);
setInterval(function(){ x.value=joy.GetX(); }, 50);
setInterval(function(){ y.value=joy.GetY(); }, 50);
</script>
</body>
setInterval(function(){ joy2IinputPosX.value=Joy2.GetPosX(); }, 50);
setInterval(function(){ joy2InputPosY.value=Joy2.GetPosY(); }, 50);
setInterval(function(){ joy2Direzione.value=Joy2.GetDir(); }, 50);
setInterval(function(){ joy2X.value=Joy2.GetX(); }, 50);
setInterval(function(){ joy2Y.value=Joy2.GetY(); }, 50);
</script>
</body>
</html>

0 comments on commit db716dd

Please sign in to comment.