Tutoriel de programmation multi-tâches

Programmation – partie 2 : le serveur web

Le mode de fonctionnement est asynchrone. Il permet à d’autres tâches de s’exécuter sans bloquer l’exécution du code principal.

La page web est constituée de boutons ainsi que d’une barre de progression avec indication de la vitesse. En fonction du bouton une action sur les moteurs est effectuée : direction et vitesse.

====

(Programme déclaration)

#include <ESPAsyncWebServer.h>

AsyncWebServer server(80); // Creating an asynchronous server on port 80

(Programme setup)

// Starting the web server

server.begin();

..

// when web page is called (initial call)

server.on(“/”, HTTP_GET, [](AsyncWebServerRequest *request) {

request->send(LittleFS, “/index.html”, String(), false, processor);

}); // location of the web page in the file system

…

// when buttom « fast » is pressed

server.on(“/fas”, HTTP_GET, [](AsyncWebServerRequest *request) {

motAspeed += 10;

motBspeed += 10;

request->send(LittleFS, “/index.html”, String(), false, processor);};

====

Modification d’informations dans la page web par la fonction « processor ».

=====

(Programme déclaration)

// Replacement function for dynamic content

String processor(const String& var) {

motorcontrol();

if (var == “SPEEDEMO“) {

int val = max(motAspeed, motBspeed);

String section;

section = “<label>”;

section += “Speed L = ” + String(motBspeed) + ” Speed R = ” + String(motAspeed) + ” “;

section += “<progress value= ” + String(val) + ” ” + “max=\”100\”> 10% </progress>”;

section += “</label>”;

return section;

}

return String();

}

====

Cette fonction permet l’intégration d’une section de code pour modifier la page web. On ajoute ainsi du code html.

La section est localisée par la nom «%SPEEDEMO % » dans la page web. Elle est localisée par la fonction qui procède à l’intégration de code html dans la page. Cette intégration se fait à chaque rechargement de la page web.