ESP32 , AJAX et JoyStick

JoyStick

PIN DESCRIPTION RANG
GND Ground-liée au GND de la carte 0V
+5V +5V-Liée à la pin +5v de la carte 5v
VRx délivre une tension proportionelle à la position x de 0 à 5V
VRy délivre une tension proportionelle à la position y de 0 à 5V
SW délivre un signale numérique 0=> bouton clos
1=> bouton ouvert

JoyStick pinout

  • Valeur du  potentiométre interne : 10k
  • épaisseur du pin de soudage 2.54mm
  • Dimensions: 1.57 in x 1.02 in x 1.26 in (4.0 cm x 2.6 cm x 3.2 cm)
  • Température : 0 to 70 °C

Pin out ESP32

https://www.aliexpress.com/item/32799710563.html

Montage

Code ESP32

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include "index.h"  //Fichier header contenant la page web

WebServer server(80);
const char* ssid = "ESP32";//Enter le nom du réseau et le mot de passe
const char* password = "12345678";
// Cette voide est éxecutée quand on entre l'ip dans la barre d'adresse 
void handleRoot() {
 String s = MAIN_page; //Lire HTML
 server.send(200, "text/html", s); //Envoi de la page
}
void handleADC() {
 analogReadResolution(9);
 int x = analogRead(39);
 int y = analogRead(36);
 int s = analogRead(34);
 String adcValue = "X="+String(x)+"|Y="+String(y);
 Serial.println(adcValue);
 server.send(200, "text/plane", adcValue); //Envoi des valeurs lues
}
//===============================================================
void setup(void){
  Serial.begin(115200);
  Serial.println();
  Serial.println("Début...");
  WiFi.mode(WIFI_AP); //Access Point mode
  WiFi.softAP(ssid, password);
  Serial.println("Connexion à  ");
  Serial.print(ssid);
  //Attendre la connexion du WiFi
  while(WiFi.waitForConnectResult() != WL_CONNECTED){      
      Serial.print("X");
    }  
  //Affiche l'addresse IP lors de la connexion
  Serial.println("");
  Serial.print("Connecté à:");
  Serial.println(ssid);
  Serial.print("L'addresse IP: ");
  Serial.println(WiFi.localIP());  //L'addresse IP de l'esp 
  server.on("/", handleRoot);      //Affiche la page
  server.on("/readADC", handleADC);//Pour mettre à jour la valeur lue
  server.begin();                  //Lancer le serveur
  Serial.println("Le serveur HTTP fonctionne");
}
//===============================================================
void loop(void){
  server.handleClient();
  delay(1);
}

index.h


const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<style>
#canvas{
display:block;width:512px;height:512px;
background-color:black;border-radius:5px;
box-shadow: 2px 2px 6px black;
}
</style>
<body>
<center>
  <canvas width="512" height="512" id ="canvas"></canvas>
</center>
<script>
setInterval(function(){getData();}, 20); 
//20m avant la  nouvelle  valeur
function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) 
    {
      ctx.clearRect(0,0,512,512);
      recu =  this.responseText;
      var res = recu.split("|");
      var x = res[0].substring(2);
      var y = res[1].substring(2);
      pointMe(ctx,parseInt(x),parseInt(y));
      
    }
  };
  xhttp.open("GET", "readADC", true);
  xhttp.send();
}
var ctx = document.getElementById("canvas").getContext("2d");
var x=0;
var y=0;
function pointMe(ctx, a, b)
{
  ctx.beginPath();
  ctx.arc(a,b, 5, 0, 2 * Math.PI);
  ctx.fillStyle=" white";
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(a,0)
  ctx.lineTo(a,512);
  ctx.moveTo(0,b);
  ctx.lineTo(512,b);
  ctx.strokeStyle="white";
  ctx.stroke();
}
</script>
</body>
</html>
)=====";

Les frais de transport ne sont pas inclus

Composant Quantité Prix(DTN TTC)
ESP32 WROOM 1 43
FIl de connexion femelle/femelle (10) 1 1.5
JoyStick 1 11
Cable micro USB 1 7
Totale 62,5 DTN TTC

Smart Innovation