LOCODUINO

Aide
Forum de discussion
Dépôt GIT Locoduino
Flux RSS

dimanche 29 janvier 2023

68 visiteurs en ce moment

TCO Web interactif avec un ESP32 (1)

. Par : utpeca

DIFFICULTÉ :

Cet article propose de commander des appareils de voie depuis une tablette (ou un smartphone, ou un PC) et un browser. Pour ce faire, un ESP32 est utilisé en serveur web, qui, via une box et son réseau wifi va afficher le TCO qui permettra d’établir un itinéraire.

Le schéma ci-dessous donne le principe de fonctionnement de la solution mise en œuvre.

Figure 1
Figure 1
Principe de fonctionnement du TCO-Web.

Le projet met en œuvre un ESP32 serveur HTML B qui permet de piloter des aiguillages ou autres accessoires de réseau C à partir d’une tablette ou un smartphone A. La tablette/smartphone se connecte en wifi au serveur de l’ESP32 B qui présente une ou plusieurs pages en forme de TCO A sur lequel des commandes tactiles agissent sur les aiguilles.

Dans l’écran du TCO A, les appareils de voie sont repérés par une zone jaune qui indique leur état (la direction donnée). Les images des appareils de voie sont cliquables (sur un browser PC) ou touchables (sur un smartphone ou une tablette), ce qui permet de changer leur état (d’obtenir une autre direction).

Enfin, un message de changement d’état est envoyé par le serveur Web B, qui réaffiche la nouvelle image de l’appareil de voie A et commande électroniquement le ou les moteurs de l’appareil de voie C.

Les différents moteurs.

Les moteurs pris en compte disposent, de préférence, des caractéristiques suivantes :

  • Alimentation en courant continu ;
  • Mouvement lent des aiguilles ;
  • Dispositif de coupure de courant en fin de course ;
  • Réalimentation des cœurs.

Les moteurs disposant d’autres caractéristiques (alimentation en courant alternatif, servomoteurs, moteurs pas-à-pas, etc.) devront faire l’objet d’adaptations particulières.

La figure suivante présente des exemples de moteurs pouvant convenir :

Figure 2
Figure 2
Quelques moteurs pour le TCO-Web.

L’ESP32 sera hébergé sur une carte électronique permettant la commande de 8 moteurs. Le nombre d’appareils de voie pouvant être commandés par ces 8 moteurs se déduit du tableau ci-après.

Figure 3
Figure 3
Nombre de moteurs par type d’appareil de voie.

Avec cette carte électronique, on pourra commander au mieux :

  • soit 8 aiguillages simples (gauche, droite ou symétrique) ;
  • soit 4 appareils de voie complexes (TJD ou aiguillage triple) ;
  • soit entre 5 et 7 appareils de voie de toute sorte.

D’autres types de moteurs sont envisageables comme les moteurs à solénoïdes, à condition qu’ils soient dotés d’un dispositif de coupure de courant en fin de course et d’une réalimentation du cœur de l’appareil. Les moteurs Piko référence 55271 et Roco référence 61195 sont de ce type et peuvent convenir.

Les autres moteurs à solénoïdes, moyennant un supplément d’électronique (relais, redresseur, dispositif de décharge capacitive, etc.) peuvent convenir. Voir le sujet Décodeur pour aiguillage à solénoïdes sur Arduino ou bien Amplifier le signal de sortie d’un ARDUINO avec un ULN 2803. Les moteurs Peco PL10E, PL10W, PL1001, Marklin 74491 ou 74492 sont de cette catégorie.

Figure 4
Figure 4
Autres moteurs à solénoïdes.

Le microcontrôleur ESP32

Le choix s’est porté sur le microcontrôleur ESP32 NodeMCU de la société AZ-Delivery. Ce microcontrôleur présente les caractéristiques suivantes :

  • Double processeur ;
  • Fréquence d’horloge jusqu’à 240 MHz ;
  • Mémoire : 512k de RAM, 448k d’EEPROM, 4M de Flash ;
  • 38 broches (32 GIOP [1] , 5 pour l’alimentation, 1 Reset/Enable) ;
  • Alimentation de 7 à 12V par le régulateur intégré – les processeurs fonctionnant sous 3,3V ;
  • Capacités Wifi et Bluetooth (LE ou standard) ;
  • Connection aux périphériques grâce à ADC [2], DAC [3], PWM [4], I2C [5], SPI [6], UART [7] , … ;
  • Connection avec d’autres ESP par radio (2,4 MHz) avec la technologie ESP-NOW ;
  • Basse consommation d’énergie et dispositif de mise en sommeil.

Le brochage de l’ESP32 NodeMCU d’AZ-Delivery est présenté dans la figure suivante. Merci de bien vouloir noter que pour un ESP32 d’un autre modèle ou d’un autre fournisseur, le brochage peut être différent. Veuillez-vous reporter à la documentation normalement fournie avec le microcontrôleur. Dans la suite du document, le nom du microcontrôleur sera abrégé en ESP32.

Figure 5
Figure 5
Brochage de l’ESP NodeMCU.

Plus d’explications sur le fonctionnement des différentes broches se trouve sur le site suivant (en anglais) Random Nerd Tutorials : ESP32 Pinout Reference : Which GPIO pins should you use ?.

L’ESP32 peut être programmé avec l’IDE de l’Arduino. La procédure d’installation de l’ESP32 dans l’IDE est décrite par Jean-Luc dans l’article intitulé Éclairer le réseau (2). Le site Random Nerd Tutorials : Installing ESP32 in Arduino IDE (Windows, Mac OS X, Linux) décrit également (en anglais) la procédure à mettre en œuvre.

Une présentation de l’ESP32 a également été faite dans le sujet Automatisation du pont FLEISCHMANN 6152 (HO) avec un ESP32 (1).

La conception du TCO

Comme dans le sujet Écran couleur tactile Kuman, le TCO est constitué de petites images carrées représentant une portion du réseau pour laquelle les appareils de voie doivent être commandés.

Figure 6
Figure 6
Exemple de TCO simple.

Les différentes images des éléments de construction du TCO sont, pour le moment, hébergées par le site web http://utpeca.free.fr/ dans le sous-répertoire TCO. Le tableau ci-après présente les différents éléments pouvant entrer dans la composition d’un TCO.

Figure 7
Figure 7
Liste des éléments de TCO.

De même, les images des éléments correspondants à la rotation des autres éléments de voie existent :

  • AigD1_E1_090.png, AigD1_E1_180.png, AigD1_E1_270.png pour l’aiguillage droit ;
  • Crois2_E4_090.png, Crois2_E4_180.png, Crois2_E4_270.png pour la TJD2 ;

Pour les lecteurs qui souhaiteraient héberger ces vignettes dans leur propre site Web, ou bien utiliser d’autres technologies (SPIFFS [8], cartes MicroSD, …), elles sont fournies dans le ZIP ci-après.

Vignettes pour la construction de TCO

Construction du TCO.

Le code HTML pour représenter le TCO de la figure 6 est le suivant :

  1. <table border='0' cellspacing='0' cellpadding='0'><tr>
  2. <tr>
  3. <td> <img class='img1' src='http://utpeca.free.fr/TCO/Sign.png'></td>
  4. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  5. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  6. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  7. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  8. <td> <img class='img1' src='http://utpeca.free.fr/TCO/VirG1_180.png'></td>
  9. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  10. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  11. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  12. <td> <img class='img1' src='http://utpeca.free.fr/TCO/VirD1.png'></td>
  13. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  14. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  15. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  16. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  17. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  18. </tr>
  19. <tr>
  20. <td> <img class='img1' src='http://utpeca.free.fr/TCO/But5.png'></td>
  21. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  22. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  23. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  24. <td> <img class='img1' src='http://utpeca.free.fr/TCO/AigG1_E1.png'></td>
  25. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  26. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  27. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  28. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  29. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  30. <td> <img class='img1' src='http://utpeca.free.fr/TCO/Crois2_E1.png'></td>
  31. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  32. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  33. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  34. <td> <img class='img1' src='http://utpeca.free.fr/TCO/But5_180.png'></td>
  35. </tr>
  36. <tr>
  37. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  38. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  39. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  40. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  41. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  42. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  43. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  44. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  45. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  46. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  47. <td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>
  48. <td> <img class='img1' src='http://utpeca.free.fr/TCO/VirD1_180.png'></td>
  49. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  50. <td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>
  51. <td> <img class='img1' src='http://utpeca.free.fr/TCO/But5_180.png'></td>
  52. </tr>

L’attribut class=’img1’ permet de définir le style (les caractéristiques) de l’affichage des éléments du TCO, comme suit :

  1. .img1 {border: 0px; width: 64px; height=64px;}
  2. </style>

Cette portion de code doit se trouver dans la section head du code HTML.

Introduction de l’interactivité.

Le TCO tel qu’il est défini précédemment ne permet pas l’interactivité (c’est-à-dire de commander les appareils de voie). Pour ce faire, il faut remplacer les lignes :

  1. <td> <img class='img1' src='http://utpeca.free.fr/TCO/AigG1_E1.png'></td>
  2. <td> <img class='img1' src='http://utpeca.free.fr/TCO/Crois2_E1.png'></td>

par les lignes suivantes :

  1. <td> <a href='javascript:;'
  2. onClick="posApp1=ChangeAig(posApp1, 'Aig1', 'AigG1', '')">
  3. <img class='img1' src='http://utpeca.free.fr/TCO/AigG1_E1.png'
  4. name='imgAig1'></td>
  5. <td> <a href='javascript:;'
  6. onClick="posApp2=ChangeTjd(posApp2, 'Tjd2', 'Crois2', '')">
  7. <img class='img1' src='http://utpeca.free.fr/TCO/Crois2_E1.png'
  8. name='imgTjd2'></td>

De cette façon, un clic sur l’image de l’appareil de voie (ou un toucher de l’écran) déclenchera l’appel à la fonction Javascript ChangeAig pour l’aiguillage ou ChangeTjd pour la TJD.

Le code de la fonction ChangeAig est le suivant :

  1. function ChangeAig(posApp, kodApp, imgApp, angApp)
  2. {
  3. var posAig = posApp;
  4. var xhr = new XMLHttpRequest();
  5. if ( posAig == "1" )
  6. {
  7. posAig = "2";
  8. document.getElementById("DESC").innerHTML =
  9. "&nbsp;"+kodApp+" : voie d&eacute;vi&eacute;e";
  10. }
  11. else
  12. {
  13. posAig = "1";
  14. document.getElementById("DESC").innerHTML =
  15. "&nbsp;"+kodApp+" : voie directe";
  16. }
  17. if ( angApp == '' )
  18. {
  19. document.images['img'+kodApp].src=imgWeb+imgApp+'_E'+posAig+'.png';
  20. }
  21. else
  22. {
  23. document.images['img'+kodApp].src=
  24. imgWeb+imgApp+'_E'+posAig+'_'+angApp+'.png';
  25. }
  26. xhr.open("GET", "/update?output="+document.getElementById(kodApp).id+
  27. ":A&state="+posAig, true);
  28. xhr.send();
  29. return posAig;
  30. }

Le code des fonctions ChangeTjd, ChangeAigS et ChangeAigT prend en compte les différences d’état des appareils correspondants, mais reste similaire à la fonction ChangeAig.

Le code à téléverser dans l’ESP32.

Ce programme est basé sur l’exemple fourni par Rui Santos publié sur le site RandomNerdTutorials, à l’adresse suivante https://RandomNerdTutorials.com/esp....

Il comprend, dans l’ordre :

  • Les includes nécessaires au programme : Wifi, AsyncTCP et ESPAsyncWebServer ;
  • Les constantes et variables générales du programme (connexion au routeur, état des appareils, etc.) ;
  • Une chaîne de caractères contenant les instructions HTML qui seront exécutées sur le serveur ESP32 ainsi que le code Javascript ;
  • Un include définissant la table des appareils ainsi que le TCO à afficher (code HTML) – ce code est injecté dans la chaîne de caractères vue ci-dessus par la fonction processor ;
  • Une fonction pour actionner les appareils à la demande de l’utilisateur ;
  • La fonction setup qui permet la connexion au router, qui envoie la page HTML sur la tablette ou le PC du demandeur et qui récupère l’appareil à positionner ;
  • La fonction loop vide.

Les bibliothèques utilisées.

Il faut tout d’abord importer les bibliothèques prenant en charge un serveur web asynchrone. Ces bibliothèques sont WiFi, AsyncTCP et ESPAsyncWebServer.

  1. // Import required libraries
  2. #include "WiFi.h"
  3. #include <AsyncTCP.h>
  4. #include <ESPAsyncWebServer.h>

Les constantes et variables.

  1. // Connection au routeur wifi (la box)
  2. const char* ssid = "... le nom de votre routeur ...";
  3. const char* password = "... votre mot de passe ...";
  4.  
  5. // communication entre le serveur et la page HTML (browser)
  6. const char* PARAM_INPUT_1 = "output"; // Nom de l'appareil
  7. const char* PARAM_INPUT_2 = "state"; // Etat de l'appareil
  8.  
  9. // Adresse du site où sont stockées les images
  10. String img_Web = "http://utpeca.free.fr/TCO/";
  11.  
  12. // Gestion des 74HC595
  13. const byte verrou = 2; // ST_CP (latch)
  14. const byte donnee = 4; // DS (data)
  15. const byte horloge = 0; // SH_CP (clock)
  16. uint16_t u_Data = 0b0101010101010101; // data pour les 74hc595
  17. const uint16_t k_Msk = 0b1100000000000000; // Masque
  18. const uint16_t k_Dir = 0b0100000000000000; // Moteur direct
  19. const uint16_t k_Dev = 0b1000000000000000; // Moteur dévié
  20.  
  21. // Create AsyncWebServer object on port 80
  22. AsyncWebServer server(80);

La chaîne contenant le code HTML+Javascript.

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
 <title>TCO par UTPECA</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" href="data:,">
 <style>
   html {font-family: Arial; display: inline-block; text-align: left;}
   h2 {font-size: 3.0rem;}
   p {font-size: 15px; font-weight: bold; width: 400px; margin-left: 30px;
      padding-bottom: 2px; padding-top: 2px; border: 2px solid #6B6B94}
   .img1 {border: 0px; width: 64px; height=64px;}
   body {max-width: 1280px; margin:0px auto; padding-bottom: 10px;
         padding-top: 10px;}
 </style>
</head>
<body background='http://utpeca.free.fr/TCO/Pierre.gif' >
<table border='0' width='1280' cellspacing='0' cellpadding='0'>
<tr><td><img border='0' src=’%IMAGE_WEB%Titre2.gif'</td></tr>
<tr><td><img border='0' src=’%IMAGE_WEB%Ligne.gif'</td></tr></table>

%CONSTRUIRE_TCO%

<table><tr><td><img border='0' src='%IMAGE_WEB%Ligne.gif'</td></tr></table>
<p id='DESC'> &nbsp;Manoeuvrez un appareil</p>
<table><tr><td><img border='0' src='%IMAGE_WEB%Ligne.gif'</td></tr></table>

<script>
var imgWeb  = '%IMAGE_WEB%';
var posApp1 = '%VALEUR_APP1%';
var posApp2 = '%VALEUR_APP2%';
var posApp3 = '%VALEUR_APP3%';
var posApp4 = '%VALEUR_APP4%';
var posApp5 = '%VALEUR_APP5%';
var posApp6 = '%VALEUR_APP6%';
var posApp7 = '%VALEUR_APP7%';
var posApp8 = '%VALEUR_APP8%';

function ChangeAig(posApp, kodApp, imgApp, angApp)
{
  var posAig = posApp;
  var xhr = new XMLHttpRequest();

  ...Comme vu dans le paragraphe "Introduction de l’interactivité"

  xhr.open("GET", "/update?output="+document.getElementById(kodApp).id+
                  ":Aig&state="+posAig, true);
  xhr.send();   return posAig;
}

function ChangeAigS(posApp, kodApp, imgApp, angApp)
{
  ...Comme vu dans le paragraphe "Introduction de l’interactivité"
  return posAig;
}

function ChangeAigT(posApp, kodApp, imgApp, angApp)
{
   ...Comme vu dans le paragraphe "Introduction de l’interactivité"
 return posAig;
}

function ChangeTjd(posApp, kodApp, imgApp, angApp)
{
   ...Comme vu dans le paragraphe "Introduction de l’interactivité"
 return posTjd;
}

</script>
</body>
</html>
)rawliteral";

Le module de description du TCO (tables des appareils et fonction processor).

D’une manière générale, ce module de description du TCO est un fichier source chargé dans le croquis et contenant du code supplémentaire décrivant la table des appareils, ainsi que la fonction processor. Cette fonction permet d’injecter dans le code HTML la description du TCO et d’injecter dans le code Javascript les données permettant l’interactivité du TCO.

Le croquis fourni avec ce projet comprend quatre définitions de TCO. Le choix de chaque TCO se fait en modifiant le #define qui va bien (sic) et en recompilant. Par exemple, modifier #define TCO1 par #define TCO3 pour obtenir le TCO nommé PO-Midi1 puis téléverser.

  1. // Prise en compte du fichier source du TCO
  2. /*********************************************************************/
  3. #define TCO1
  4. #ifdef TCO1
  5. #include "Mon_TCO_No01.h"
  6. #endif
  7. #ifdef TCO2
  8. #include "Mon_TCO_No02.h"
  9. #endif
  10. #ifdef TCO3
  11. #include "PO-Midi1.h"
  12. #endif
  13. #ifdef TCO4
  14. #include "Mon_TCO_No04.h"
  15. #endif

Ces TCO sont donnés à titre d’exemple pour permettre au lecteur de produire son propre TCO.

Figure 8
Figure 8
Images des TCO fournis en exemple

Le code de la description de la table des appareils de voie est donné ci-après.

  1. // Définition de la table des Appareils
  2. /*********************************************************************/
  3. // par TCO_Web (Utpeca) le 24/06/2022
  4. typedef struct
  5. {
  6. char etaApp; // état de l'appareil ( de '1' à '4')
  7. char typApp; // type de l'appareil ('A', 'J', 'T', 'S')
  8. byte noMot1; // No du 1er moteur (de 1 à 8)
  9. byte noMot2; // No du 2me moteur (de 1 à 8)
  10. } appareil;
  11.  
  12. appareil t_App[NBMOT] =
  13. {
  14. {'1', 'A', 1, 0},
  15. {'1', 'J', 2, 3},
  16. {'1', ' ', 0, 0},
  17. {'1', ' ', 0, 0},
  18. {'1', ' ', 0, 0},
  19. {'1', ' ', 0, 0},
  20. {'1', ' ', 0, 0},
  21. {'1', ' ', 0, 0}
  22. };

Le code de la fonction processor est comme suit :

  1. // Remplacer %CONSTRUIRE_TCO% par la table des images dans la page web
  2. /*********************************************************************/
  3. String processor(const String& var)
  4. {
  5. if (var == "CONSTRUIRE_TCO")
  6. {
  7. String tco = "";
  8. tco += "<table border='0' cellspacing='0' cellpadding='0'><tr>\n";
  9. tco += "<tr>\n";
  10. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/Sign.png'></td>\n";
  11. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  12. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  13. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  14. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  15. tco += "<td> <img class='img1'
  16. src='http://utpeca.free.fr/TCO/VirG1_180.png'> </td>\n";
  17. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  18. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  19. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  20. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/VirD1.png'></td>\n";
  21. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  22. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  23. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  24. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  25. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  26. tco += "</tr>\n";
  27. tco += "<tr>\n";
  28. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/But5.png'></td>\n";
  29. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  30. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  31. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  32. tco += "<td> <a href='javascript:;'
  33. onClick=\"posApp1=ChangeAig(posApp1, 'Aig1', 'AigG1', '')\">
  34. <img class='img1' src='http://utpeca.free.fr/TCO/AigG1_E1.png'
  35. name='imgAig1'></td>\n";
  36. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  37. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  38. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  39. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  40. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  41. tco += "<td> <a href='javascript:;'
  42. onClick=\"posApp2=ChangeTjd(posApp2, 'Tjd2', 'Crois2', '')\">
  43. <img class='img1' src='http://utpeca.free.fr/TCO/Crois2_E1.png'
  44. name='imgTjd2'></td>\n";
  45. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  46. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  47. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  48. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/But5_180.png'></td>\n";
  49. tco += "</tr>\n";
  50.  
  51. tco += "<tr>\n";
  52. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  53. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  54. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  55. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  56. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  57. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  58. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  59. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  60. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  61. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  62. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/vide.png'></td>\n";
  63. tco += "<td> <img class='img1'
  64. src='http://utpeca.free.fr/TCO/VirD1_180.png'></td>\n";
  65. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  66. tco += "<td> <img class='img1' src='http://utpeca.free.fr/TCO/H1.png'></td>\n";
  67. tco += "<td> <img class='img1'
  68. src='http://utpeca.free.fr/TCO/But5_180.png'></td>\n";
  69. tco += "</tr>\n";
  70. tco += "</table>\n";
  71. return tco;
  72. }
  73. else if (var == "IMAGE_WEB") { return img_Web; }
  74. else if (var == "VALEUR_APP1") { return String(t_App[0].etaApp); }
  75. else if (var == "VALEUR_APP2") { return String(t_App[1].etaApp); }
  76. else if (var == "VALEUR_APP3") { return String(t_App[2].etaApp); }
  77. else if (var == "VALEUR_APP4") { return String(t_App[3].etaApp); }
  78. else if (var == "VALEUR_APP5") { return String(t_App[4].etaApp); }
  79. else if (var == "VALEUR_APP6") { return String(t_App[5].etaApp); }
  80. else if (var == "VALEUR_APP7") { return String(t_App[6].etaApp); }
  81. else if (var == "VALEUR_APP8") { return String(t_App[7].etaApp); }
  82. else return String();
  83. }

La fonction setup.

Les principales étapes exécutées dans la fonction sont les suivantes :

  • Mise en route du moniteur série à la vitesse de 115 200 bauds ;
  • Déclarations des broches utilisées pour faire fonctionner les registres à décalage 74HC595 ;
  • Initialisation des appareils pour les mettre en conformité avec le TCO affiché ;
  • Connexion au réseau wifi avec les paramètres SSID et Mot-de-Passe, puis envoi au moniteur du résultat de la connexion ;
  • Envoi de la chaîne de caractères HTML (index_html) complétée par l’exécution de processor au browser via le wifi ;
  • Attente de la réponse du browser et si celle-ci est correcte, appel de la fonction CommandeAppareil avec les paramètres véhiculés dans la réponse.

La fonction CommandeAppareil.

Les principales étapes exécutées dans la fonction sont les suivantes :

  • Décodage des données renvoyées par le browser au serveur web (nom, type et état de l’appareil ;
  • Appel de la fonction AfficheAppareil permettant l’affichage sur le moniteur série des informations relatives à l’appareil concerné (la quantité d’information dépendant de l’éventuelle directive DEBUG dans le croquis) ;
  • Appel de la fonction ActionneAppareil effectuant le calcul de la donnée à passer aux registres à décalage 74HC595 qui permettront la mise en route des moteurs adéquats ;
Figure 9
Figure 9
Affichage sur le moniteur série des données de l’appareil.
Figure 10
Figure 10
Algorithme de calcul des sorties des 74HC595.
Fichiers du croquis

Mise en route du serveur Web.

Une fois le code du croquis téléversé dans l’ESP32, l’écran ci-après s’affiche sur le moniteur série du PC.

Figure 11
Figure 11
Affichage du moniteur série au lancement du croquis.

Dans la ligne de commande de votre browser, il faut entrer l’adresse IP du serveur Web sous la forme suivante : http://192.168.1.xxx. C’est celle indiquée dans la figure ci-dessus.

La carte électronique et sa mise en œuvre

Le circuit imprimé.

Figure 12
Figure 12
Vue de dessus du circuit imprimé.

L’implantation des composants.

Figure 13
Figure 13
Vue de la carte coté composants.

Liste des composants :

  • un ESP32 à 38 broches ;
  • un connecteur 12 V (J1), 8 connecteurs 3 bornes vers les moteurs d’aiguillages (M1 à M8) et un strap (fil de câblage) ;
  • un réducteur de tension (buck converter) – entrée de 4,5V à 24V) – sortie réglée sur 3,3V ;
  • deux 74HC595 et deux ULN2803 ;
  • trois condensateurs de découplage (100 nF/35 V).

Le schéma de câblage.

Le schéma de câblage est présenté dans la figure suivante. Les condensateurs de découplage ne sont pas représentés afin d’alléger le schéma.

Figure 14
Figure 14
Schéma de câblage
Le réducteur de tension.

Le réducteur de tension peut être un modèle de base. Il coûte quelques euros sur les sites chinois ou américains vendant du chinois (Amazon, AliExpress, etc.). Il n’a pas de référence précise, mais on peut le retrouver en faisant une recherche "mini-réducteur de tension".

Il faut le préparer comme indiqué dans l’image suivante. Certains fabricants le fournissent avec l’ajustable en fonction, auquel cas il faut couper la piste cuivrée avec un cutter comme indiqué dans la figure. Dans tous les cas, il faut faire un pont de soudure pour avoir 3,3V.

Figure 15
Figure 15
Préparation du réducteur de tension.

D’autres réducteurs de tension peuvent être utilisés comme le Mini360 ou le MP1584. Cependant, leur mise en œuvre nécessite un multimètre et une adaptation des connexions au circuit imprimé.

Les décodeurs série/parallèle et les réseaux de Darlington.
Figure 16
Figure 16
Brochage des circuits intégrés 74HC595 et ULN2803.

Le fonctionnement du décodeur série/parallèle 74HC595 est décrit dans le site Arduino Serial to Parallel Shifting-Out with a 74HC595. Il a été également expliqué par Christian dans la fiche pratique du Loco Revue N° 902 d’août 2022.

Le fonctionnement du réseau de Darlington ULN2803 est exposé dans le sujet Amplifier le signal de sortie d’un ARDUINO avec un ULN 2803.

Le branchement des moteurs.

Connecteur

  • la broche de gauche (notée Mia) vers la commande de voie directe ;
  • la broche centrale au +12V (commun du moteur) ;
  • la broche de droite (Mib) vers la commande de voie déviée.

La commande d’un moteur se fait en mettant au niveau bas la sortie correspondante du 74HC595.

Fichiers Gerber du circuit imprimé

Câblage des appareils.

Les deux schémas ci-après indiquent comment câbler l’aiguillage et la TJD contrôlés par le TCO :

Figure 17
Figure 17
Câblage de l’aiguillage.
Figure 18
Figure 18
Câblage de la traversée jonction double.

Conclusion

Cet article a présenté un TCO économique (pas d’électrotechnique), universel (pour réseau analogique ou DCC) et évolutif, qui pourra inciter le lecteur à construire sa propre solution.
Un deuxième article est en préparation pour présenter une évolution de ce projet : séparation des fonctions Serveur HTML / Commande des Appareils et hébergement des vignettes du TCO dans le serveur HTML plutôt que dans un site Web.

[1GPIO (ou GIOP) : General Purpose Input/Output pins – broche d’entrée/sortie générale.

[2ADC : analogic digital convertor – convertisseur analogique digital.

[3DAC : digital analogic convertor– convertisseur digital analogique.

[4PWM : pulse wide modulator – modulation de largeur d’impulsion.

[5I2C : inter integrated circuit – bus série synchrone bidirectionnel half-duplex (origine Philips).

[6SPI : serial peripheral interface – bus série synchrone full-duplex (origine Motorola).

[7UART : universal asynchronous receiver/transmitter – émetteur-récepteur asynchrone universel.

[8SPIFFS : Serial Peripheral Interface Flash File System.

4 Messages

Réagissez à « TCO Web interactif avec un ESP32 (1) »

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.

Lien hypertexte

(Si votre message se réfère à un article publié sur le Web, ou à une page fournissant plus d’informations, vous pouvez indiquer ci-après le titre de la page et son adresse.)

Rubrique « Technique »

Les derniers articles

TCO Web interactif avec un ESP32 (1)


utpeca

Les articles les plus lus

TCO Web interactif avec un ESP32 (1)