Piloter d’un serveur web un servomoteur avec un input range ESP32
Description :
Ce projet consiste à utiliser un microcontrôleur ESP32 pour piloter un servomoteur à partir d’une interface accessible depuis un navigateur web. L’ESP32 héberge un serveur web léger permettant d’afficher une page HTML contenant un slider (input range).
L’utilisateur peut déplacer ce slider pour modifier en temps réel l’angle du servomoteur. Chaque changement de valeur sur le slider est envoyé à l’ESP32 via une requête HTTP (GET ou POST) pour une mise à jour instantanée. L’ESP32 traduit ensuite cette valeur en impulsion PWM afin de positionner le servomoteur à l’angle désiré.
Prérequis :
- 1 x Carte ESP32
- 1 x Servomoteur
- 1 x LED verte
- 1 x Résistance 220Ω
- 1 x Breadboard
- Fils de connexion
Version IDE :
- Arduino IDE 2.3.5
Bibliothèque :
- LittleFS.h (Tuto dispo)
- ESPAsyncWebServer.h (version: 3.7.10 par ESP32Async)
- AsyncTCP.h (version 3.4.7 par ESP32Async)
- ESP32Servo.h (version 3.0.9 par Kevin Harrington,John K. Bennett)
Vidéo de démonstration :
Schéma de câblage :
Code :
Code Arduino :
#include "LittleFS.h"
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <WiFi.h>
int Ledverte = 33;
#include <ESP32Servo.h>
Servo myservo;
const char *ssid = "......"; // "Votre Nom_du_routeur"
const char *password = "......"; // "Votre Mot_de_passe_du_routeur"
AsyncWebServer server(80);
int ValeurRange = 0;
void setup() {
Serial.begin(115200);
myservo.attach(23);
pinMode(Ledverte, OUTPUT);
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
// Imprimer l'adresse IP locale ESP
Serial.println(WiFi.localIP());
if (!LittleFS.begin()) {
Serial.println("An Error has occurred while mounting LittleFS");
return;
}
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/index.html", "text/html");
});
server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/script.js", "text/javascript");
});
server.on("/read_ValueRange", HTTP_GET, [](AsyncWebServerRequest *request) {
String message = String(ValeurRange);
request->send(200, "text/plain", message);
});
server.on("/write_ValueRange", HTTP_POST, [](AsyncWebServerRequest *request) {
if (request->hasParam("ValueRange", true)) {
String message;
message = request->getParam("ValueRange", true)->value();
ValeurRange = message.toInt();
}
request->send(204);
});
// Démarrer le serveur
server.begin();
}
void loop() {
if (WiFi.status() == WL_CONNECTED) {
digitalWrite(Ledverte, HIGH);
} else {
digitalWrite(Ledverte, LOW);
}
myservo.write(ValeurRange);
}
Code HTML :
( index.html )
<!DOCTYPE html>
<html lang="fr">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
<script type="text/javascript" src="https://webapps1.chicago.gov/cdn/jQuery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<h2>Serveur Web ESP32 :</h2>
<h5>Piloter servo moteur :</h5>
<div>
<input type="range" id="ValueRange" min="0" max="180" />
<p>Angle du servo: <span id="value"></span>°</p>
</div>
</div>
</body>
</html>
Code Javascript :
( script.js )
function getDataValeurRange() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("value").innerHTML = this.responseText;
document.getElementById("ValueRange").value = this.responseText;
}
};
xhttp.open("GET", "read_ValueRange", true);
xhttp.send();
};
getDataValeurRange();
document.addEventListener('DOMContentLoaded', (event) => {
const selectElement = document.querySelector('#ValueRange');
if (selectElement) {
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('#value');
if (result) {
result.innerHTML = selectElement.value
}
});
selectElement.addEventListener('input', (event) => {
const result = document.querySelector('#value');
if (result) {
result.innerHTML = selectElement.value
}
});
}
});
$(document).ready(function () {
$("#ValueRange").change(function () {
var valeur = $("#ValueRange").val();
$.post("write_ValueRange", {
ValueRange: valeur
});
});
});
