SE2a4 USB 2023/2024 E14

Projet USB S8

L'objectif est de concevoir un système permettant de gérer l'état des écrans d'une salle de travaux pratiques.

Introduction :

Pour cela j'utiliserai un micro-controleur différend, ici, un ESP8266 qui permettra de faire la gestion du servo moteur en Reseau uniquement, Grace à un server web qu'il aura créer.

De plus un autre serveur web sera démarrer sur la machine hôte qui permettra ainsi d'envoyer et recevoir des requêtes entres les deux serveur.

Etapes :

• Préparer un GIT pour sauvegarder sa progression
• Réaliser un server web sur hôte.
• Réaliser le programme de l'esp.
• Faire la carte électronique.
• Tester.

1) Réalisé la carte

Carte projet avec ESP12

J'ai utilisé le site / logiciel EasyEDA pour réaliser la carte.

Faisable sur KICAD !

Contenu de la carte :

• Un port USB Mini pour alimentation 5V uniquemen
• Un LDO pour le 5v vers 3v3 (tension d'alim de l'ESP)
• L'ESP8266 au format ESP12E
• 2 ports pour Servo moteur alimenté avec le 5v du port USB
• Un bouton pour IHM
• Une led rouge témoin
• Un port I2C pour ajouter un écran OLED ou autre module externe
• (composant passif (resistance et condensateur ) + connecteur pour la programmation du microcontroleur)

Deux cartes ont été brasées avec un pistolet à air chaud et un fer à souder, voici ce que ça donne :

toutes deux sont fonctionnel, car j'ai reussi à téléverser un code à l'aide d'un programmeur FTDI type FT232.

Schéma de cablage :

Progammeur et cablage pour téléversement du code sur l'esp12

FTDI pin | ESP pin

GND -> GND

VCC -> VCC

TX -> RX

RX -> TX

Pour passer l'ESP12 en mode programmation, il faut mettre la pin 0 au GND et reset la carte.

Puis téléverser.

2)Réalisation du server web

Contenu :

1) créer un programme en C capable de créer un server web sur un port prédéfini puis prendre en compte les différente requêtes reçu.

Le serveur web permet de recuprérer chaque requête HTTP d'être analysé et de répondre au client la page ou l'information souhaité au client grâce à de multiples librairie comme montré en cours, tel que :

#include <netinet/in.h> // gère les sockets

#include <pthread.h> // gère les différents client qui pourrait se connecter simultanément

#include <getopt.h> // permet de rentrer des paramètres lors de l'exécution de l'exécutable

De plus :

- Il permet d'enregistrer l'adresse IP qui se connecte au server afin de l'afficher sur la page HTML et ainsi permettra à plusieurs système d'écran de se connectés et d'être contrôlés par la suite.

de plus ce programme permet de filtrer les adresse IP pour seulement celle qui sont utile au process soit sauvegarder permettant ainsi de ne pas polluer l'affichage graphique avec des adresse IP (inutile).

- Il enregistrera toute adresse IP ayant envoyé une requête du type : "http://adresseIP/on" ou "http://adresseIP/off" au serveur pour se connecter.

Mise en place :

Le dossier du serveur s'accompagne d'un makeFile facilitant la compilation des programmes situé dans plusieurs dossier différents (facilité la visibilité du code).

Une fois le GIt cloner vous pouvez vous dirigez vers le dossier appelé : Simple-HTTP-Server-master

et une fois dans celui-ci, lancer un terminal et lancer la commande : "make". Une fois cette étape fait un fichier exécutable devrait être apparu dans le répertoire courant. pour le lancer, taper dans le terminal : "./webServer"

Par défaut le port sera 4242 mais si vous voulez lui préciser un port particulier une vous suffit de taper : "./webServer -p nbPort" ou "./webServer --port nbPort".

Une fois le programme lancer vous devriez voir apparaitre un message indiquant que le serveur est en écoute en attendant des requête.

exécution du programme (serveur web)

.

.

.

Affichage :

2) Créer la page HTML permettant de gérer les différents requêtes et afficher les états des écrans à contrôler dans un environnement pratique d'utilisation.

Une fois le serveur web lancer, nous avons besoin d'afficher les système d'écran disponible sur une page web pour ainsi intéragir avec eux plus facilement. c'est pourquoi nous devons programmer une page web permettant cela.

Pour ce faire nous avons besoin de 3 langages, l'HTML, CSS et JavaScript. Et un programme se fait en général sous cette forme :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    /* Graphisme */
</style>
</head>
<body>
    <!-- squelette de la page--> 

<script>
    // Action 
</script>

</body>
</html>

La page ci dessous permet d'afficher tout les système d'écran s'étant connecté au server de façon dynamique. c'est à dire que l'on viendra lire la contenu du fichier listIP.txt (reprenant les adresse Ip sauvegardé par le serveur) et viendra construire selon le nombre d'adresse enregistré, le même nombre de bouton et étiquette permettant d'intéragir de facon individuel avec chaque système d'écran.

Ci-dessous la page html sans systèmes d'écrans connecté.

Page HTML 1

.

.

.

.

.

.

Ci-dessous la page html avec des systèmes d'écrans connectés.

Page HTML 2

.

.

.

.

.

.

.

.

On peut y voir que deux systèmes d'écrans ce sont connecté et que l'état de l'écran est afficher sur les pastille rouges et vertes (qui servent également de bouton)

Une fois que l'on appuie sur un bouton, cela envoie une requette http au système voulu et fera bouger le servo moteur en conséquence. Afin d'allumer ou éteindre l'écran

3)Réalisation du code contenu dans l'ESP8266

1. Mise en Place d'un point d'accès pour que l'ESP puisse se connecter au même réseau que l'hôte, via un routeur Cisco externe . cf : voir le TP précédant sur les routeurs.
2. Programme permettant à ESP de dialoguer avec le serveur web (en temps que client)

• Connection au réseau WiFi créer par le routeur

  WiFi.mode(WIFI_STA);
  WiFi.hostname(newHostname);
  
  
  if (!WiFi.config(apIP, gateway, subnet, primaryDNS, secondaryDNS)) {
  Serial.println("STA Failed to configure");
  }
  
  Serial.printf("connection to %s with %s\n",ssid, password );
  WiFi.begin(ssid, password);
  int dot_cnt = 1;
  while (WiFi.status() != WL_CONNECTED) {
      Serial.print(".");
  }
  

  Ici nous utilisons la librairie : #include <ESP8266WiFi.h> qui sur cette partie de code on peut y voir que l'esp8266 sera en mode station pour venir se connecter au routeur (ligne 1). Par la suite on configure son adresse IP (static) et autre paramètre réseau (ligne 5) et pour finir on le connecte au routeur (ligne 10).
• prise en compte des requêtes http reçu de la part du serveur (façon asynchrone)

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
          request->send(FS_SYS, "/index.html", "text/html");
      });
  
      // Send a GET request to <IP>/get?message=<message>
      server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
          String message = "Salut Fotin";
          request->send(200, "text/plain", "Hello, GET: " + message);
      });
  
      // Send a GET request to <IP>/get?message=<message>
      server.on("/state", HTTP_GET, [] (AsyncWebServerRequest *request) {
          request->send(200, "text/plain",  getLedState(analogRead(A0)));
      });
  
      // Send a GET request to <IP>/get?message=<message>
      server.on("/connect", HTTP_GET, [] (AsyncWebServerRequest *request) {
          send = true;
          request->send(200, "text/plain",  "OK");
      });
  
      // Send a GET request to <IP>/get?message=<message>
      server.on("/on", HTTP_GET, [] (AsyncWebServerRequest *request) {
          const char* message = "on";
          Serial.println("servo on");
          digitalWrite(LED, HIGH);
          servo1.write(onPos);
          delay(500);
          servo1.write(offPos); 
          request->send(200, "text/plain", String(message));
      });
  
      // Send a GET request to <IP>/get?message=<message>
      server.on("/off", HTTP_GET, [] (AsyncWebServerRequest *request) {
          const char* message = "off";
          Serial.println("servo off");
          digitalWrite(LED, LOW);
          servo1.write(onPos);
          delay(500);
          servo1.write(offPos); 
          request->send(200, "text/plain", String(message));
      });
  
      // Send a POST request to <IP>/post with a form field message set to <message>
      server.on("/post", HTTP_POST, [](AsyncWebServerRequest *request){
          String message;
          String port;
          String server;
          String ServoMin;
          String ServoMax;
          if (request->hasParam(PARAM_MESSAGE_4, true) && request->hasParam(PARAM_MESSAGE_5, true) && request->hasParam(PARAM_MESSAGE, true) && request->hasParam(PARAM_MESSAGE_2, true) && request->hasParam(PARAM_MESSAGE_3, true)) {
              message = request->getParam(PARAM_MESSAGE, true)->value();
              port = request->getParam(PARAM_MESSAGE_2, true)->value();
              server = request->getParam(PARAM_MESSAGE_3, true)->value();
              ServoMin = request->getParam(PARAM_MESSAGE_4, true)->value();
              ServoMax = request->getParam(PARAM_MESSAGE_5, true)->value();
              
          } else {
              message = "No message sent";
              port = "No message sent";
              server = "No message sent";
              ServoMin = "No message sent";
              ServoMax = "No message sent";
          }
          Serial.println(message);
          Serial.println(port);
          Serial.println(server);
          Serial.println(ServoMin);
          Serial.println(ServoMax);
          // ajouter si port et server vide alors remplacer avec ceux de base
          server_port = port;
          server_ip = server;
          adjustAnalogR = message.toInt();
          onPos = ServoMin.toInt();
          offPos = ServoMax.toInt();
          
          request->send(FS_SYS, "/index.html");
      });
  
      server.onNotFound(notFound);
  
      DefaultHeaders::Instance().addHeader("Access-Control-Allow-Origin", "*");
      server.begin();
  

  Ici nous utilisons la librairie : #include <AsyncTCP.h> et #include <ESPAsyncTCP.h> qui permettent de gérée les requêtes asynchrones et avons défini plusieurs appels possibles. De plus le programme inclu une page propre au client permettant de configurer les différents paramètres (calibrations LDR, Servo, adresse serveur / port) disponible à l'adresse IP du client (exemple : http://IPadresse/)(visible sur l'écran OLED après démarrage) .
  

  page configurations client
  .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

• envoie de requête http vers le serveur

  void sendGet()
  {
      WiFiClient client;
  
      HTTPClient http;
  
      Serial.print("[HTTP] begin...\n");
      if (http.begin(client, "http://" + String(server_ip) + ":" + server_port +"/" + getLedState(analogRead(A0)))) {  // HTTP
      Serial.println("http://" + String(server_ip) + ":" + server_port +"/" + getLedState(analogRead(A0)));
  
        Serial.print("[HTTP] GET...\n");
        // start connection and send HTTP header
        int httpCode = http.GET();
  
        // httpCode will be negative on error
        if (httpCode > 0) {
          // HTTP header has been send and Server response header has been handled
          Serial.printf("[HTTP] GET... code: %d\n", httpCode);
  
          // file found at server
          if (httpCode == HTTP_CODE_OK || httpCode == HTTP_CODE_MOVED_PERMANENTLY) {
            String payload = http.getString();
            Serial.println(payload);
          }
        } else {
          Serial.printf("[HTTP] GET... failed, error: %s\n", http.errorToString(httpCode).c_str());
        }
  
        http.end();
      } else {
        Serial.println("[HTTP] Unable to connect");
      }
  }
  

  Pour envoyer des requêtes au serveur nous utilisons la librairie : #include <ESP8266HTTPClient.h> qui va permettre d'envoyer au serveur la présence de se système afin d'être sauvegardé dans le fichier IPlist.txt. Et cette requête contient l'adresse du serveur, le port et l'état de la LED de l'écran mesurer par la LDR.
• lecture de l'état de la led de l'écran via LDR

  String getLedState(int analog)
  {
    int state = map(analog, 0, 1024, 0,100);
    if(state > adjustAnalogR)
    {
       return "on";
    }
    else
    {
      return "off";
    }
    
  }
  

  Ici cette fonction permet simplement de mesurer la valeur analogique du CAN venant de la LDR et de retourner un String pour mieux l'incorporé dans la requête HTTP.
• mouvement du(des) servo(s) en fonction des requêtes reçue)

  Servo servo1;  // on créé l'objet servo1
  int onPos = 45;
  int offPos = 135;
  
  
  servo1.attach(12);  // on dit a cette objet que le servo est sur la pin 12 dans le setup
  

  Pour controler le Servo nous nous servons de librairie : #include <Servo.h>. Qui va nous permettre de controler l'angle du servo en générant un signal PWM approprié.
• Ajout d'un écran OLED monochrome pour facilité l'utilisation du système et permettre d'autres tâche dans le futur.

  // ### Exemple d'utilisation de cette librairie ###
  #include <U8g2lib.h>
  
  #ifdef U8X8_HAVE_HW_I2C
  #include <Wire.h>
  #endif
  
  U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);
  
  void setup(){
      
      u8g2.begin();
      u8g2.clearBuffer();					// effacer le buffer de l'écran
      u8g2.setDisplayRotation(U8G2_R1);
      u8g2.setFlipMode(0);
      u8g2.setFont(u8g2_font_squeezed_r6_tr);	// choix de la police
      u8g2.drawStr(0,10,"Projet S8 : start");	// ce qui s'affichera sur l'écran
      u8g2.sendBuffer();					// envoie vers le buffer
  }
  

4) Réalisation d'un support en 3D

Pour réaliser le support 3D, j'ai utilisé le logiciel gratuit disponible en ligne appelé TinkerCad . Cela m'a permis de facilement réaliser des pièces sur mesure afin de faire un support modulable et pouvant s'accrocher à même l'écran pour plus de facilité d'installations.

cf: galerie.

5) Axes d'amélioration :

Lors de ce projet j'ai rencontrer quelques difficultés:

• Mauvais routage des servo sur la carte (inversion des VCC et Signal) => Solution : fabrication d'un adaptateur
• Modélisation de plusieurs système d'accroche car le premier ne permettait pas un maintient suffisant sur l'écran.
• Erreur lors de la fermeture du serveur web et sa re-ouverture (port all ready use), l'erreur s'arrête après quelques secondes et le serveur web peut s'exécuté à nouveau.

Les améliorations possibles :

• Meilleur routage de la carte en corrigeant les erreurs.
• Faire un PCB double face, permettant d'inclure directement le circuit de programmation (facilitant l'améliorations du programme).
• Refaire une nouvelle version du chassis en 3D pour corriger les petites erreurs restantes.
• Améliorations du programme du serveur web pour ajouter des options (ajout d'un second servo sur une même carte).

Galerie :

• 
• 
• 
• 
• 
• 

Ecran OLED après connection

Vidéo disponible sur : https://www.youtube.com/shorts/fdwK9TlrLNs

Vu d'ensemble

programmeur

système sur l'écran

Annexe :

dos de l'écran après montage du système

avant du système après montage

avant du système après montage 2

Tout les programmes, photos, fichier 3D sont disponibles sur le GIT associer.