I wrote that, it is working well but not clean, no comment inside.
//https://github.com/fabriceDurand/esp_webserver
#include <WiFi.h>
const char* ssid = "ssid";
const char* password = "pass";
#include <WebServer.h>
#include <Adafruit_NeoPixel.h>
#define LED_PIN 15
#define LED_COUNT 76
Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);
int value_B = 0,value_C = 0; // valeur de B bright et C color
int i = 0 , d = 10 , m = 20, s= 1 ;
//https://htmlbeaify.com
String head = "<!DOCTYPE html> <html lang='fr'> <head> <title>esp32 ws2812</title> <meta URL=http:/' charset='UTF-8' /> <style> a{text-decoration: none;} a div:hover{ background-color: blue; color:white;} table{width:100% ; height:100% ; background-color: coral; } table, th, td {border: 1px solid black;} td { text-align: center; vertical-align: middle; font-size: 300%; padding-left:15px; height:30%; } </style> </head> <body> <table> <tr> <td style=\"width:48%\" colspan = 4> <a href=\"/tm\"> <div><h3> B </h3></div> </a> </td> <td rowspan = 3 > </td> <td style=\"width:48%\" colspan = 4> <a href=\"/tp\"><div><h3> C </h3></div></a> </td> </tr> <tr> <td colspan = 4>";
String mide ="</td><td colspan = 4>";
String foot = "</td> </tr> <tr> <td style=\"width:12%\"> <a href=\"/bmd\"><div><h3> - 10 </h3></div></a> </td> <td style=\"width:12%\"> <a href=\"/bmu\"><div><h3> - 1 </h3></div></a> </td> <td style=\"width:12%\"> <a href=\"/bpu\"><div><h3> + 1 </h3></div></a> </td> <td style=\"width:12%\"> <a href=\"/bpd\"><div><h3> + 10 </h3></div></a> </td> <td style=\"width:12%\"> <a href=\"/cmd\"><div><h3> - 10 </h3></div></a> </td> <td style=\"width:12%\"> <a href=\"/cmu\"><div><h3> - 1 </h3></div></a> </td> <td style=\"width:12%\"> <a href=\"/cpu\"><div><h3> + 1 </h3></div></a> </td> <td style=\"width:12%\"> <a href=\"/cpd\"><div><h3> + 10 </h3></div></a> </td> </tr> </table> </body> </html>";
WebServer server(80);
void ilumine()
{
/*
strip.Color(255, 0, 0); // red
strip.Color( 0, 255, 0); // green
strip.Color( 0, 0, 255); // blue
strip.Color(255, 255, 0); // yellow
strip.Color( 0, 255, 255); // cyan
strip.Color(255, 0, 255); // magenta
strip.Color(255, 255, 255); // white
*/
char message[60] = "";
int i = value_C , m = i + 10 , s= 1 , pixel = 0;
// variation lumiere
Serial.print("\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
for( i = value_C ; i < m ; i += s )
{
strip.setPixelColor(pixel++, strip.Color( i, 0, 0));
sprintf(message,"\n%s | Pixel = %3d | Bright = %3d | Color( %3d , %3d, %3d )", "RED", pixel, value_B , i, 0, 0);
Serial.print (message);
}
Serial.print("\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
for( i = value_C ; i < m ; i += s )
{
strip.setPixelColor(pixel++, strip.Color( i, i, 0));
sprintf(message,"\n%s | Pixel = %3d | Bright = %3d | Color( %3d , %3d, %3d )", "YEL", pixel, value_B , i, i, 0);
Serial.print (message);
}
Serial.print("\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
for( i = value_C ; i < m ; i += s )
{ strip.setPixelColor(pixel++, strip.Color( 0, i, 0));
sprintf(message,"\n%s | Pixel = %3d | Bright = %3d | Color( %3d , %3d, %3d )", "GRE", pixel, value_B , 0, i, 0);
Serial.print (message);
}
Serial.print("\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
for( i = value_C ; i < m ; i += s )
{ strip.setPixelColor(pixel++, strip.Color( 0, i, i));
sprintf(message,"\n%s | Pixel = %3d | Bright = %3d | Color( %3d , %3d, %3d )", "CYA", pixel, value_B , 0, i, i);
Serial.print (message);
}
Serial.print("\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
for( i = value_C ; i < m ; i += s )
{ strip.setPixelColor(pixel++, strip.Color( 0, 0, i));
sprintf(message,"\n%s | Pixel = %3d | Bright = %3d | Color( %3d , %3d, %3d )", "BLU", pixel, value_B , 0, i, i);
Serial.print (message);
}
Serial.print("\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
for( i = value_C ; i < m ; i += s )
{ strip.setPixelColor(pixel++, strip.Color( i, 0, i));
sprintf(message,"\n%s | Pixel = %3d | Bright = %3d | Color( %3d , %3d, %3d )", "MAG", pixel, value_B , i, 0, i);
Serial.print (message);
}
Serial.print("\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
for( i = value_C ; i < m ; i += s )
{ strip.setPixelColor(pixel++, strip.Color( i, i, i));
sprintf(message,"\n%s | Pixel = %3d | Bright = %3d | Color( %3d , %3d, %3d )", "WHI", pixel, value_B , i, i, i);
Serial.print (message);
}
strip.setBrightness(value_B); // Set BRIGHTNESS (max = 255)
strip.show();
Serial.println("\n===========================================================");
Serial.print(" strip.setBrightness(");Serial.print(value_B);Serial.println(")");
Serial.println("===============================================================");
}
//#########################################################################
void Actions(int modif)
{ char message[60] = "";
sprintf(message,"\n boutons B et C appuyés : %3d | %3d ", value_B, value_C );
Serial.print (message);
value_B += modif;
value_B = (0 > value_B) ? 0 : (value_B > 255) ? 255 : value_B;
value_C += modif;
value_C = (0 > value_C) ? 0 : (value_C > 255) ? 255 : value_C;
sprintf(message," devienent : %3d | %3d ", value_B, value_C );
Serial.print (message);
ilumine();
homePage();
}
void Action(String bouton, int modif, int *value)
{ char message[60] = "";
sprintf(message,"\n bouton %s %3d appuyé : %3d ", bouton , modif , *value );
Serial.print (message);
*value += modif;
*value = (0 > *value) ? 0 : (*value > 255) ? 255 : *value;
sprintf(message," devient %3d", *value );
Serial.print (message);
ilumine();
homePage();
}
void Action_bpu()
{ Action("B", 1, &value_B);
}
void Action_bpd()
{ Action("B", 10, &value_B);
}
void Action_bmu()
{ Action("B", -1, &value_B);
}
void Action_bmd()
{ Action("B",-10, &value_B);
}
void Action_cpu()
{ Action("C", 1, &value_C);
}
void Action_cpd()
{ Action("C", 10, &value_C);
}
void Action_cmu()
{ Action("C", -1, &value_C);
}
void Action_cmd()
{ Action("C",-10, &value_C);
}
void Action_tp()
{ Actions( 10);
}
void Action_tm()
{ Actions(-10);
}
void pageIntrouvable()
{
server.send(404, "text/plain", "404: page introuvable");
}
void colorWipe(uint32_t color, int wait)
{ for(int i=0; i<strip.numPixels(); i++)
{
strip.setPixelColor(i, color);
strip.show();
delay(wait);
}
}
void init_ws2812()
{ Serial.println("init ws2812");
strip.show(); // Turn OFF all pixels ASAP
strip.setBrightness(200); // Set BRIGHTNESS to about 1/5 (max = 255)
colorWipe(strip.Color(255, 0, 0), 10); // red
colorWipe(strip.Color( 0, 255, 0), 10); // green
colorWipe(strip.Color( 0, 0, 255), 10); // blue
colorWipe(strip.Color(255, 255, 255), 10); // white
colorWipe(strip.Color( 0, 0, 0), 10); // black
}
void homePage()
{
strip.show();
//strip.fill(strip.Color(150,150,90),72,82);
strip.setBrightness(2);
strip.show();
server.send(200, "text/html", head + String(value_B) + mide + String(value_C) + foot);
}
//////////////////////
void setup()
{
Serial.begin(115200);
strip.begin();
init_ws2812();
WiFi.persistent(false);
WiFi.begin(ssid, password);
Serial.print("Tentative de connexion ~~");
byte cli = false;
uint32_t led_colo[] = {strip.Color(255,0,255),0};
while (WiFi.status() != WL_CONNECTED)
{ Serial.print("~~");
strip.fill(led_colo[cli],0,60);
strip.show();
cli = !cli;
delay(500);
}
Serial.print("\n Connexion etablie : ");
Serial.println(WiFi.localIP());
// à faire : affichage localIP sur ws2812
// blanc-vif pour le point, blanc doux pour 0, rouge pour centaines, vert pour dizaines, bleu pour unités, couleur vive = 5, couleur douce = unités
// 192.168.0.2 = rouge vert-vif vert vert vert vert bleu bleu blanc-vif rouge vert-vif vert bleu-vif bleu bleu bleu blanc-vif blanc-doux blanc-vif bleu bleu
server.on("/", homePage);
server.on("/bpu", Action_bpu);
server.on("/bpd", Action_bpd);
server.on("/bmu", Action_bmu);
server.on("/bmd", Action_bmd);
server.on("/cpu", Action_cpu);
server.on("/cpd", Action_cpd);
server.on("/cmu", Action_cmu);
server.on("/cmd", Action_cmd);
server.on("/tp", Action_tp);
server.on("/tm", Action_tm);
server.onNotFound(pageIntrouvable);
server.begin();
Serial.println("Serveur web disponible!");
}
void loop()
{
server.handleClient();
}
If you want, you can rewrite it much more better (optimized) and please give me back it.
Thank you.