Je travaille sur un microcontrôleur esp32 qui doit commander un robot à l'aide d'un smartphone en wifi.
Pour que n'importe quel téléphone fonctionne je veux passer par une page web, faire une appli est hors de portée de mes connaissances.
Je suis ignorant en javascript et je pense que pour un pratiquant moyen l'aide dont j'ai besoin est facile à donner.
J'ai récupéré un fichier qui fonctionne bien comme un joystick sur l'écran.
Il est déplaçable au doigt et me permet de connaître la valeur en horizontal de la direction avec un retour au neutre quand on relâche et en vertical le moteur, là la valeur reste quand on relâche.
J'aurais besoin de trimer le neutre de la direction...
J'ai donc fait un peu de copier coller et en affichage c'est bon mais je ne sais pas comment une action sur la barre du bas permettrait d'avoir un retour au neutre non pas à 0 mais à la valeur définie en bas.
Code : Tout sélectionner
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
user-scalable=no" /> <!-- zoom interdit -->
<title>Commande</title>
<style>
#container {
width: 100%;
height:500px;
background-color: #133;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 7px;
touch-action: none;
}
#item {
width: 150px;
height: 100px;
background-color: rgb(245, 230, 99);
border: 10px solid rgba(136, 16, 136, .5);
border-radius: 40%;
touch-action: none;
user-select: none;
}
#item:active {
background-color: rgba(168, 218, 220, 1.00);
}
#item:hover {
cursor: pointer;
border-width: 20px;
}
#container2 {
width: 100%;
height:20px;
background-color: #333;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
touch-action: none;
}
#item2 {
width: 20px;
height: 20px;
background-color: rgb(45, 230, 99);
border: 5px solid rgba(6, 6, 6, .5);
touch-action: none;
user-select: none;
}
#item2:active {
background-color: rgba(168, 28, 220, 1.00);
}
#item2:hover {
cursor: pointer;
border-width: 12px;
}
</style>
</head>
<body>
<div id="outerContainer">
<div id="container">
<div id="item">
</div>
</div>
<div class="slidecontainer">
<p><center>Trim direction</center></p>
<div id="container2">
<div id="item2">
</div>
</div>
<script>
var dragItem = document.querySelector("#item");
var container = document.querySelector("#container");
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
if (e.type === "touchstart") {
initialX = e.touches[0].clientX - xOffset;
initialY = e.touches[0].clientY - yOffset;
} else {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
}
if (e.target === dragItem) {
active = true;
}
}
function dragEnd(e) {
xOffset = 0;
setTranslate(0, currentY, dragItem);
initialY = currentY;
active = false;
}
function drag(e) {
if (active) {
e.preventDefault();
if (e.type === "touchmove") {
currentX = e.touches[0].clientX - initialX;
currentY = e.touches[0].clientY - initialY;
} else {
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
}
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, dragItem);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
</script>
</body>
</html>
