include "FS.h" //Librairie pour le SPIFFS
include <ESP8266WiFi.h> //Librairie pour le Wifi de l'ESP8266
const uint16_t NBBTN = 4; //nombre de boutons <=10
int port[]= {14,12,13,15};
String backColor[NBBTN];
String pageHtml = "";
const char nomDeFichier = "/index.html";
const char ssid = "xxxxxx"; // NOM RESEAU WIFI
const char* password = "yyyyyyyyy"; // MOT DE PASSE WIFI
const uint16_t HTTPPort = 80;
int cmpt = 0;
WiFiServer serveur(HTTPPort); // crée un serveur sur le port HTTP standard
//****Routine d'affichage des informations de connexion**
void printHTTPServerInfo(){
Serial.print(F("Site web http://"));
Serial.print(WiFi.localIP());
if (HTTPPort != 80) {
Serial.print(F(":"));
Serial.print(HTTPPort);
}
Serial.println();
}
//****Routine de gestion d'un client***
void testRequeteWeb(){
String boutonClique = "";
WiFiClient client = serveur.available(); //on crée un WiFiClient qui s'appelle client
if (client){ // client connecté
Serial.print("Acces client N° ");
Serial.println(++cmpt);
if (client.connected()) {
String req = client.readStringUntil('r'); //* on lit toute la trame HTPP*
Serial.println(req);
client.flush();
// **On envoie une entête de réponse HTTP standard****
client.println(F("HTTP/1.1 200 OK")); //ligne de statut
client.println(F("Content-Type: text/html\r\n")); //****champ d'entete **
//***On teste le GET pour savoir si un bouton a ete appuye**
if (req.indexOf("GET /btn")>=0){
int nBouton = req.substring(8,9).toInt(); //*Recupere le numero du bouton appuye
boutonClique = "<br></br><p>Le bouton N° " + String(nBouton +1) + " est cliqué</p>";
if(digitalRead(port[nBouton])==HIGH){ //**Mise en condition des elements du bouton*
digitalWrite(port[nBouton],LOW);
backColor[nBouton]="skyblue";
}
else {
digitalWrite(port[nBouton],HIGH);
backColor[nBouton]= "red";
if (req.substring(10,12)=="pou") {
delay(500);
digitalWrite(port[nBouton],LOW);
}
}
}
// ****On envoie la page contenu dans SPIFFS vers le client*
//else {
pageHtml="";
Serial.println(F("Envoi du SPIFFS"));
if (SPIFFS.exists(nomDeFichier)) { //si le fichier SPIFFS existe
File pageWeb = SPIFFS.open(nomDeFichier, "r");
client.write(pageWeb);
pageWeb.close();
}
else { //** sinon on termine la requête*****
Serial.println(F("Erreur de fichier"));
client.println("break");
return;
}
pageHtml += "<div>\n";
for (int i=0;i<NBBTN;i++){ //*mise en forme des boutons avec leur couleur d'etat **
pageHtml += "<button onclick= \"action("+ String(i) + ")\" class=\"button\" style=\"background-color:" + backColor[i] + "\">Lum" + String(i) + "</button>\n";
}
pageHtml += "</div>\n";
pageHtml += "<p style=\"font-size:10px;\">Selection du type de bouton poussoir ou par défaut interrupteur</p><br></br>\n";
pageHtml += "<div>\n";
for (int i=0;i<NBBTN;i++){ //*mise en forme des checkbox pour poussoir **
pageHtml += "<input type=\"checkbox\" id=\"select" + String(i) + "\">";
pageHtml += "<label for = \"select" + String(i) + "\">" + "poussoir" + String(i+1) + "</label>\n";
}
pageHtml += "</div>\n";
//*Fin de la pade HTML***
pageHtml += boutonClique;
pageHtml += "</body></html>";
delay(1);
Serial.println(pageHtml);
client.println(pageHtml);
client.stop(); // termine la connexion
//}
}
}
}
//**SET UP**
void setup() {
for(int i=0;i<NBBTN;i++){
pinMode(port[i],OUTPUT);
digitalWrite(port[i],LOW);
backColor[i] = "skyblue";
}
Serial.begin(115200); //
Serial.println("\n\nTest SPIFFS\n");
if (!SPIFFS.begin()) { //** on démarre le SPIFFS
Serial.println("erreur SPIFFS");
while (true); // on ne va pas plus loin
}
WiFi.begin(ssid, password); //***on lance la connexion Wifi
Serial.println();
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.write('.'); //****on attend la connexion en affichant des ......
}
Serial.println();
serveur.begin(); // on démarre le serveur
printHTTPServerInfo(); //on affiche les caractéristiques
}
//**LOOP***
void loop() {
testRequeteWeb(); //*Lance la routine d'attente de client
}
//*****Code HTML:
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.ex1{
width: 50px;
padding: 5px;
background-color: skyblue;
display: inline;
margin: 2px;
}
p.ex2 {
width: 50px;
padding: 5px;
background-color: red;
display: inline;
margin: 2px
}
</style>
</head>
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h1 {
color: #0F3376;
padding: 2vh;
}
p {
font-size: 1.5rem;
}
label {
font-size: 12px;
margin: 10px;
}
.button {
display:inline;
border: none;
border-radius: 4px;
color: white;
padding: 6px;
text-decoration: none;
font-size: 16px;
margin: 2px;
cursor: pointer;
}
.button:hover {background-color: green;}
.button:active {background-color: black;}
</style>
<script type="text/javascript">
var msg = "";
function action(num){
if (document.getElementById("select" + num).checked==true) {msg="/pou";}
else {msg="/non";}
var xhttp = new XMLHttpRequest();
xhttp.open("GET","/btn" + num + msg, true);
xhttp.send();
}
</script>
<body>
<h1>ESP8266 Web Server</h1>
<h2>Etat des commandes lumineuses</h2>
<div> <p class="ex1">Eteint</p> <p class="ex2">Allumé</p> </div>
<br></br>
<p>Appuyer sur la touche désirée</p>
