Esp32 DS1307 DHT11 Matrix p4 RGB 64x32

Set and retrieve Time for external RTC module or internal RTC
 
 

Schema


 

New Gerber File : https://youtu.be/xyV4Svr6yDg

Esp32 DS1307 DHT11 Matrix p4 RGB 64x32
Set and retrieve Time for external RTC module or internal RTC
NTP time synchronization 
Find Local Times 
Manually set and retrieve the time 
Scrolling Message Temperature Humidity Web Server
RGB LED Matrix with an ESP32 - How to get started In this video I show how to get one working with an ESP32

Code:

 
Panel - ESP32   Panel - ESP32
R1    - IO12      G1   - IO13
B1    - IO14      GND  - GND
R2    - IO25      G2   - IO26
B2    - IO27      GND  - GND
A     - IO15      B    - IO16
C     - IO17      D    - IO04
CLK   - IO00      LAT  - IO32
OE    - IO33      GND  - GND

Library

 - ESPxxTime Library:
- Adafruit RGB matrix Panel Library: 
https://github.com/beegee-tokyo/DHTesp
- Getting Started ESP32 / ESP32S : 
https://www.youtube.com/watch?v=9b0Txt-yF7E
Find All "Great Projects" Videos : 
 

Posted by 7 comments:

64x32 RGB Led Matrix Clock With esp8266

RGB Matrix p4 64*32 DHT11 DS1307 Arduino ESP8266

  

 New Gerber File : https://youtu.be/xyV4Svr6yDg

 
Arduino tutorial: 
RGB Matrix p4 64*32 
DHT11 
ESP8266

Schema


 

Code

// REQUIRES the following Arduino libraries:
// - Lien vidéo: https://youtu.be/a47UexhdcGA
// - RGB matrix Panel Library: https://github.com/2dom/PxMatrix
// - Adafruit_GFX Library: https://github.com/adafruit/Adafruit-GFX-Library
// - DHT Sensor Library: https://github.com/adafruit/DHT-sensor-library
// - Adafruit Unified Sensor Lib: https://github.com/adafruit/Adafruit_Sensor
// - ESPxxTime Library: https://github.com/3tawi/DS1307ESPTime
// - Getting Started ESP8266 : https://youtu.be/QRnPRKbtEGU
// Find All "Great Projects" Videos : https://www.youtube.com/c/GreatProjects


#include <FS.h>
#include <Wire.h>
#include <Ticker.h>
#include <EEPROM.h>
#include <LittleFS.h>
#include <DS1307ESPTime.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <PxMatrix.h>
#include <Adafruit_GFX.h>
#include <atawi21x12b.h>
#include <atawi8c.h>
#include "DHT.h"
#include "page.h"

#define DHTPIN 0  
#define EEPROM_SIZE 7
#define DHTTYPE DHT11   // DHT 11

#define P_LAT 16
#define P_A 5
#define P_B 4
#define P_C 15
#define P_D 12
#define P_OE 2

#define matrix_width 64
#define matrix_height 32

PxMATRIX display(64,32,P_LAT, P_OE,P_A,P_B,P_C,P_D);
DS1307ESPTime rtc;
ESP8266WebServer server(80);
GFXcanvas1 canvasF(64, 32);
DHT dht(DHTPIN, DHTTYPE);
Ticker display_ticker;

char ssid[30] = "";
char pass[30] = "";
const char* Apssid = "P4Matrix";
const char* Appassword = "3tawi-GP";
  IPAddress ip(192,168,1,142);
  IPAddress dns(192,168,1,1);
  IPAddress gateway(192,168,1,1);
  IPAddress gatewayap(192,168,4,1);
  IPAddress subnet(255,255,255,0);

File myfile;
float temp, humi;
int Tz = 1; // Time Zone
bool flasher = false;
bool wifiok = false;
bool Modeclock = true;
String Message = "Great Projects wish you a very nice day. Hope you have a great time ahead.";
long savednum = 0 ,passnum = 0; 
int xps=32, msg = 1;
uint32_t lastTime, prevTime, prevTim; 
String text, textmsg, textip;
int sp0=30, sp1=300, sp2=5, sp3=15, sp4, sp5, sp6, sp7;
long     hueShift;
long     value;
int      dx1, dx2, dx3, dx4, dy1, dy2, dy3, dy4, sx1, sx2, sx3, sx4;
int      r, g, b;
uint8_t  lo;
float rs1, rs2, rs3, rs4,
      cx1, cx2, cx3, cx4,
      cy1, cy2, cy3, cy4;
float  ag1, ag2, ag3, ag4;
static const int8_t PROGMEM sinetab[256] = {
     0,   2,   5,   8,  11,  15,  18,  21, 24,  27,  30,  33,  36,  39,  42,  45,
    48,  51,  54,  56,  59,  62,  65,  67, 70,  72,  75,  77,  80,  82,  85,  87,
    89,  91,  93,  96,  98, 100, 101, 103, 105, 107, 108, 110, 111, 113, 114, 116,
   117, 118, 119, 120, 121, 122, 123, 123, 124, 125, 125, 126, 126, 126, 126, 126,
   127, 126, 126, 126, 126, 126, 125, 125, 124, 123, 123, 122, 121, 120, 119, 118,
   117, 116, 114, 113, 111, 110, 108, 107, 105, 103, 101, 100,  98,  96,  93,  91,
    89,  87,  85,  82,  80,  77,  75,  72, 70,  67,  65,  62,  59,  56,  54,  51,
    48,  45,  42,  39,  36,  33,  30,  27, 24,  21,  18,  15,  11,   8,   5,   2,
     0,  -3,  -6,  -9, -12, -16, -19, -22, -25, -28, -31, -34, -37, -40, -43, -46,
   -49, -52, -55, -57, -60, -63, -66, -68, -71, -73, -76, -78, -81, -83, -86, -88,
   -90, -92, -94, -97, -99,-101,-102,-104, -106,-108,-109,-111,-112,-114,-115,-117,
  -118,-119,-120,-121,-122,-123,-124,-124, -125,-126,-126,-127,-127,-127,-127,-127,
  -128,-127,-127,-127,-127,-127,-126,-126, -125,-124,-124,-123,-122,-121,-120,-119,
  -118,-117,-115,-114,-112,-111,-109,-108, -106,-104,-102,-101, -99, -97, -94, -92,
   -90, -88, -86, -83, -81, -78, -76, -73, -71, -68, -66, -63, -60, -57, -55, -52,
   -49, -46, -43, -40, -37, -34, -31, -28, -25, -22, -19, -16, -12,  -9,  -6,  -3
};

struct Text {
 char *texte;
  uint16_t width, height;
  int16_t x, y;
  int16_t dx, dy;
} texte = {"22:22", 0, 0, 0, 0, 1, 1};
int16_t x=0, dx=1;

void display_updater() { display.display(10); }

void(* resetFunc) (void) = 0;//declare reset function at address 0

void getWifi()
{
  WiFi.config(ip, dns, gateway, subnet); 
  WiFi.begin(ssid, pass);
  int xc = 0;
  while (WiFi.status() != WL_CONNECTED && xc < 10) {
    delay(500);
    xc++;
  }
  if (WiFi.status() == WL_CONNECTED) { 
    textip = "CONNECTED To: ";
    textip += ssid;
    textip += " IP Address: http://";
    textip += WiFi.localIP().toString().c_str();
    WiFi.softAPdisconnect(true);
    wifiok = true;
    } else { 
    WiFi.softAP(Apssid, Appassword);
    textip = "CONNECTED To: ";
    textip += Apssid;
    textip += " Password: ";
    textip += Appassword;
    textip += " IP Address: http://";
    textip += WiFi.softAPIP().toString().c_str();
    wifiok = false;
    }
    msg = 4, getmesg();
}
void Colorplat(int cpla) {
  switch (cpla) { 
  case 0:
  rs1 = 4.1, rs2 = 6.3, rs3 = 10.2, rs4 = 11.1;
  cx1 = 4.1, cy1 = 2.2;
  cx2 = 5.8, cy2 = 1.7;
  cx3 = 5.8, cy3 = 3.5;
  cx4 = 1.1, cy4 = -1.5;
  sp4 = 3, sp5 = 2;
    break;
  case 1:
  rs1 = 4.1, rs2 = 6.3, rs3 = 10.2, rs4 = 11.1;
  cx1 = 4.1, cy1 = 2.2;
  cx2 = 5.8, cy2 = 1.7;
  cx3 = 5.8, cy3 = 3.5;
  cx4 = 1.1, cy4 = -1.5;
  sp4 = 1, sp5 = 2;
    break;
  case 2:
  rs1 = 4.1, rs2 = 6.3, rs3 = 10.2, rs4 = 11.1;
  cx1 = 4.1, cy1 = 2.2;
  cx2 = 5.8, cy2 = 1.7;
  cx3 = 5.8, cy3 = 3.5;
  cx4 = 1.1, cy4 = -1.5;
  sp4 = 2, sp5 = 3;
    break;
  case 3:
  rs1 = 8.1, rs2 = 8.5, rs3 = 15.4, rs4 = 17.1;
  cx1 = 8.1, cy1 = 4.3;
  cx2 = 5.8, cy2 = 3.3;
  cx3 = 11.7, cy3 = 7.0;
  cx4 = 2.1, cy4 = -1.5;
  sp4 = 2, sp5 = 3;
    break;
  case 4:
  rs1 = 12.1, rs2 = 12.5, rs3 = 20.4, rs4 = 22.1;
  cx1 = 12.1, cy1 = 6.3;
  cx2 = 8.8, cy2 = 4.8;
  cx3 = 16.9, cy3 = 10.5;
  cx4 = 3.1, cy4 = -2.1;
  sp4 = 2, sp5 = 3;
    break;
  case 5:
  rs1 = 16.3, rs2 = 23.0, rs3 = 40.8, rs4 = 44.2;
  cx1 = 16.1, cy1 = 8.7;
  cx2 = 11.6, cy2 = 6.5;
  cx3 = 23.4, cy3 = 14.0;
  cx4 = 4.1, cy4 = -2.9;
  sp4 = 2, sp5 = 3;
    break;
  case 6:
  rs1 = 24.6, rs2 = 34.5, rs3 = 15.4, rs4 = 66.4;
  cx1 = 34.2, cy1 = 23.4;
  cx2 = 35.2, cy2 = 19.9;
  cx3 = 33.8, cy3 = 42.0;
  cx4 = 12.2, cy4 = -5.6;
  sp4 = 2, sp5 = 3;
    break;
  case 7:
  rs1 = 32.6, rs2 = 46.0, rs3 = 20.4, rs4 = 88.4;
  cx1 = 32.2, cy1 = 17.4;
  cx2 = 23.2, cy2 = 13.0;
  cx3 = 23.4, cy3 = 28.0;
  cx4 = 8.2, cy4 = -5.6;
  sp4 = 2, sp5 = 3;
    break;
  case 8:
  rs1 = 65.2, rs2 = 92.0, rs3 = 40.8, rs4 = 176.8;
  cx1 = 64.4, cy1 = 34.8;
  cx2 = 46.4, cy2 = 26.0;
  cx3 = 46.8, cy3 = 56.0;
  cx4 = 16.4, cy4 = -11.2;
  sp4 = 2, sp5 = 3;
    break;
  case 9:
  rs1 = 97.8, rs2 = 138.0, rs3 = 61.2, rs4 = 265.2;
  cx1 = 96.6, cy1 = 52.2;
  cx2 = 69.6, cy2 = 39.0;
  cx3 = 70.2, cy3 = 84.0;
  cx4 = 24.6, cy4 = -16.8;
  sp4 = 2, sp5 = 3;
    break;
  case 10:
  rs1 = 130.4, rs2 = 184.0, rs3 = 81.6, rs4 = 353.6;
  cx1 = 128.8, cy1 = 69.6;
  cx2 = 92.8, cy2 = 52.0;
  cx3 = 93.6, cy3 = 112.0;
  cx4 = 32.8, cy4 = -22.4;
  sp4 = 3, sp5 = 4;
    break;
  default:
  rs1 = 130.4, rs2 = 184.0, rs3 = 81.6, rs4 = 353.6;
  cx1 = 128.8, cy1 = 69.6;
  cx2 = 92.8, cy2 = 52.0;
  cx3 = 93.6, cy3 = 112.0;
  cx4 = 32.8, cy4 = -22.4;
  sp4 = 5, sp5 = 6;
    break;
  }
}
void getColor(long hue) {
  // Hue
  hue %= 1791; // -1791 to +1791
  if (hue < 0)
    hue += 1791;      //     0 to +1791
  lo = hue & 255;     // Low byte  = primary/secondary color mix
  switch (hue >> 8) { // High byte = sextant of colorwheel
  case 0:
    r = 255;
    g = 255 - lo;
    b = 255 - lo;
    break; // W to R
  case 1:
    r = 255;
    g = lo;
    b = 0;
    break; // R to Y
  case 2:
    r = 255 - lo;
    g = 255;
    b = 0;
    break; // Y to G
  case 3:
    r = 0;
    g = 255;
    b = lo;
    break; // G to C
  case 4:
    r = 0;
    g = 255 - lo;
    b = 255;
    break; // C to B
  case 5:
    r = lo;
    g = 0;
    b = 255;
    break; // B to M
  default:
    r = 255;
    g = lo;
    b = 255;
    break; // M to W
  }
}
void getmesg()
{
    xps = 64;
    switch(msg)
    {
    case 0 :
        gettemphumi();
        textmsg = Message;
        msg++;
        break;
    case 1 :
        textmsg = "Temperature: ";
        textmsg += temp;
        textmsg += "°C";
        msg++;
        break;
    case 2 :
        textmsg = "Humidity: ";
        textmsg += humi;
        textmsg += "%";
        msg++;
        break;
    case 3 :
        textmsg = rtc.getTime("%A, %d %B %Y");
        msg = 0;
        break;
    case 4 :
        textmsg = textip;
        msg = 0;
        break;
    }
}
  void gettemphumi() {
        temp = dht.readTemperature();
        humi = dht.readHumidity();
}
  void getdata() {
  ag1   += 0.01;
  ag2   -= 0.03;
  ag3   += 0.5;
  ag4   -= 0.7;
  hueShift ++;
}
void getblat() {
  sx1 = (int)(cos(ag1) * rs1 + cx1);
  sx2 = (int)(cos(ag2) * rs2 + cx2);
  sx3 = (int)(cos(ag3) * rs3 + cx3);
  sx4 = (int)(cos(ag4) * rs4 + cx4);
  dy1 = (int)(sin(ag1) * rs1 + cy1);
  dy2 = (int)(sin(ag2) * rs2 + cy2);
  dy3 = (int)(sin(ag3) * rs3 + cy3);
  dy4 = (int)(sin(ag4) * rs4 + cy4);
  hueShift = xps*10;
  for(int y=0; y<32; y++) {
  dx1 = sx1; dx2 = sx2; dx3 = sx3; dx4 = sx4;
  for(int x=0; x<64; x++) {
  int c0 = canvasF.getPixel(x, y);
  if (c0 != 0) {
      value = hueShift
        + (int8_t)pgm_read_byte(sinetab + (uint8_t)((dx1 * dx1 + dy1 * dy1) >> sp4))
        + (int8_t)pgm_read_byte(sinetab + (uint8_t)((dx2 * dx2 + dy2 * dy2) >> sp4))
        + (int8_t)pgm_read_byte(sinetab + (uint8_t)((dx3 * dx3 + dy3 * dy3) >> sp5))
        + (int8_t)pgm_read_byte(sinetab + (uint8_t)((dx4 * dx4 + dy4 * dy4) >> sp5));
  getColor(value*3);
  display.drawPixelRGB888(x, y, r,g,b);
    } else {  
  display.drawPixelRGB888(x, y, 0,0,0);
  }
      dx1--; dx2--; dx3--; dx4--;
    }
    dy1--; dy2--; dy3--; dy4--;
  }
}
void scroll_text(String txt) {
  uint16_t text_length = txt.length() * 7;
    canvasF.fillRect(0, 22, 64, 10, 0x0000);
    canvasF.setFont(&atawi8c);
    canvasF.setCursor(xps, 22);
    canvasF.print(txt);
    canvasF.setFont();
     xps--;
     if (xps < -text_length) {getmesg();}
  }
void getTimA() {
  if (flasher) {
    canvasF.fillRect(0, 0, 64, 22, 0x0000);
    canvasF.setFont(&atawi21x12b);
    canvasF.setCursor(5, 0);
    canvasF.print(rtc.getTime("%H:%M"));
    canvasF.setFont();
  } else  { canvasF.fillRect(31, 0, 2, 21, 0x0000); }
}
void getTim() {
  if (!flasher)  { text = rtc.getTime("%H:%M"); }
  else  { text = rtc.getTime("%H %M"); }
  if(x+dx>=63 || x+dx<0)
   dx=-dx;
  x+=dx;
  if(texte.x+texte.dx+texte.width>=63 || texte.x+texte.dx<0)
    texte.dx=-texte.dx;
  if(texte.y+texte.dy+texte.height>=31 || texte.y+texte.dy<0)
    texte.dy=-texte.dy;
  texte.x+=texte.dx;
  texte.y+=texte.dy;
    canvasF.fillScreen(0);
    canvasF.setFont(&atawi21x12b);
    canvasF.setCursor(texte.x, texte.y);
    canvasF.print(text);
    canvasF.setFont();
}
  void handleRoot() {
 server.send(200, "text/html", MAIN_page); //Send web page
}
void handleRestesp() {  
    handleRoot();
    delay(1000);     
    resetFunc();
}
void handlesaveTime() { 
    handleRoot();
    writeTime();
}
void handlentpTime() {
    handleRoot();
  if (wifiok) { 
    configTime(Tz * 3600, 0, "time.nist.gov", "pool.ntp.org"); 
    while(!time(nullptr)){
        delay(100);
    }
    time_t now = time(nullptr);
    struct tm* p_tm = localtime(&now);
     int h = p_tm->tm_hour;
     int m = p_tm->tm_min;
     int s = p_tm->tm_sec;
     int dd = p_tm->tm_mday;
     int mo = p_tm->tm_mon;
     int yr = p_tm->tm_year;
    rtc.setTime(s, m, h, dd, mo, yr);
    }
}
void handlezoneTime() {
    handleRoot();
    Tz = server.arg("locatz").toInt(); 
    configTime(Tz * 3600, 0, "", "");
    EEPROM.write(5, Tz);
    EEPROM.commit();
}
void handlelocaltime() { 
    handleRoot();
    rtc.setTime(server.arg("locadt").toInt());  
    configTime(Tz * 3600, 0, "", "");
}
void handleMyTime() { 
    handleRoot(); 
    String hbuf = server.arg("htmie"); 
    String dbuf = server.arg("ddate");
    text = hbuf[0];
    text += hbuf[1];
    int h = text.toInt(); 
    text = hbuf[3];
    text += hbuf[4];
    int m = text.toInt(); 
    text = hbuf[6];
    text += hbuf[7];
    int s = text.toInt();
    
    text = dbuf[0];
    text += dbuf[1];
    text += dbuf[2];
    text += dbuf[3];
    int yr = text.toInt(); 
    text = dbuf[5];
    text += dbuf[6];
    int mo = text.toInt();
    text = dbuf[8];
    text += dbuf[9];
    int dd = text.toInt();
    rtc.setTime(s, m, h, dd, mo, yr);
}
void handleMode() { 
    handleRoot();
    Modeclock = !Modeclock;
    canvasF.fillScreen(0);
    EEPROM.write(6, Modeclock);
    EEPROM.commit();
  }
void handleSpe0() {
    handleRoot();
    sp0 = server.arg("Speed0").toInt();
    EEPROM.write(1, sp0);
    EEPROM.commit();
  }
void handleSpe1() {
    handleRoot();
    sp1 = server.arg("Speed1").toInt();
    EEPROM.write(2, sp1);
    EEPROM.commit();
  }
void handleColor() { 
    handleRoot();
    sp2 = server.arg("Color0").toInt();
    EEPROM.write(3, sp2);
    EEPROM.commit();
    Colorplat(sp2);
  }
void handleBright() {
    handleRoot();
    sp3 = server.arg("Bright").toInt();
    EEPROM.write(4, sp3);
    EEPROM.commit();
    display.setBrightness(sp3);
  }
void handleSpe4() { 
    handleRoot();
    sp4 = server.arg("Speed4").toInt();
  }
void handleSpe5() { 
    handleRoot();
    sp5 = server.arg("Speed5").toInt();
  }
void handleMesg() { 
    handleRoot();
    Message = server.arg("Message");
  myfile = LittleFS.open("/Message.txt", "w");
    if(myfile){ 
      myfile.print(Message);
    }
    myfile.close();
    msg = 0, getmesg();
  }
void handleWifi() { 
  handleRoot();
  text = server.arg("usname");
  myfile = LittleFS.open("/Ssid.txt", "w");
    if(myfile){ 
      myfile.print(text); 
    }
    myfile.close();
  int len = text.length() + 1; 
  text.toCharArray(ssid, len);
  text = server.arg("pssw");
  myfile = LittleFS.open("/Password.txt", "w");
    if(myfile){ 
      myfile.print(text);
    }
    myfile.close();
  len = text.length() + 1;
  text.toCharArray(pass, len); 
  getWifi();
}
void getssid() { 
myfile = LittleFS.open("/Ssid.txt", "r");
 if(!myfile){
   return;
 }
int nb = 0;
while (myfile.available()) {
  savednum = myfile.read();
  ssid[nb] = (char) savednum;
  nb += 1;
}
myfile.close();
}
void getpass() { 
myfile = LittleFS.open("/Password.txt", "r");
 if(!myfile){
   return;
 }
int nb = 0;
while (myfile.available()) {
  savednum = myfile.read();
  pass[nb] = (char) savednum;
  nb += 1;
}
myfile.close();
}
void getstting() { 
    sp0 = EEPROM.read(1);
    sp1 = EEPROM.read(2);
    sp2 = EEPROM.read(3);
    sp3 = EEPROM.read(4);
    Tz = EEPROM.read(5);
    Modeclock = EEPROM.read(6);
    if (Tz > 12) { Tz = Tz - 256; }
myfile = LittleFS.open("/Message.txt", "r");
 if(!myfile){
   return;
 }
Message = "";
while (myfile.available()) {
  savednum = myfile.read();
  Message += (char)savednum;
}
myfile.close();
}
void setup() {
 Wire.begin(1, 3);   
  rtc.begin(); 
  updateTime();
  EEPROM.begin(EEPROM_SIZE);
  LittleFS.begin();
  getssid();
  getpass();
  WiFi.mode(WIFI_STA); 
  getWifi();
  display.begin(16);
  display_ticker.attach(0.004, display_updater);
  display.setTextWrap(false);
  display.clearDisplay();
  display.setFont(&atawi21x12b);  
  canvasF.setTextWrap(false);
  server.on("/", handleRoot); 
  server.on("/MesBright", handleBright);
  server.on("/MesColor", handleColor); 
  server.on("/MesMode", handleMode);  
  server.on("/readtemhu", handlestate); 
  server.on("/MesSpeed0", handleSpe0);
  server.on("/MesSpeed1", handleSpe1); 
  server.on("/MesSpeed4", handleSpe4); 
  server.on("/MesSpeed5", handleSpe5);
  server.on("/myMesg", handleMesg);  
  server.on("/Mywifi", handleWifi); 
  server.on("/ntptime", handlentpTime); 
  server.on("/mytimezon", handlezoneTime); 
  server.on("/localdatime", handlelocaltime);
  server.on("/restime", handleMyTime);
  server.on("/savetime", handlesaveTime); 
  server.on("/restesp", handleRestesp);
  server.begin();
  getstting();
  Colorplat(sp2); 
  display.setBrightness(sp3);
  int16_t x1 = 0, y1 = 0;
  display.getTextBounds(texte.texte, 0, 0, &x1, &y1, &texte.width, &texte.height);
  texte.width-=2;
  texte.height-=2;
  x=0, dx=1;
  delay(2000);
  dht.begin();
}
void loop() {
  server.handleClient(); 
   if(millis() - lastTime >= 1000 && Modeclock) {
      getTim();
      getblat();
      flasher = !flasher; 
      lastTime = millis();
    }
   else if(millis() - lastTime >= 1000 && !Modeclock) {
      getTimA();
      flasher = !flasher; 
      lastTime = millis();
    }
   if(millis() - prevTime >= sp1 && Modeclock) {
      getdata();
      prevTime = millis();
    }
   else if(millis() - prevTime >= sp1 && !Modeclock) {
      getdata();
      prevTime = millis();
    }
   if(millis() - prevTim >= sp0 && !Modeclock) {
      scroll_text(textmsg);
      getblat();
      prevTim = millis();
    }
}
void handlestate() {
  gettemphumi();
  String content = "<?xml version = \"1.0\" ?>";
  content += "<inputs><analog>";
  content += temp;
  content += "</analog><analog>";
  content += humi;
  content += "</analog><analog>";
  content += Tz;
  content += "</analog><analog>";
  content += Modeclock;
  content += "</analog></inputs>";
  server.sendHeader("Cache-Control", "no-cache");
  server.send(200, "text/xml", content); //Send web page
}
void updateTime()
{
  configTime(0, 0, "", "");
  rtc.DSgetTime(); 
  int dd = rtc.dayOfMonth, mo = rtc.month + 1, yr = rtc.year + 2000;
  rtc.setTime(rtc.second, rtc.minute, rtc.hour, dd, mo, yr);
  configTime(Tz * 3600, 0, "", "");
} 
void writeTime()
{
  configTime(0, 0, "", ""); 
  int h = rtc.getHour(true), m = rtc.getMinute(), s = rtc.getSecond(),
      yr = rtc.getYear(), mo = rtc.getMonth(), dd = rtc.getDay(),
      dw = rtc.getDayofWeek();
  rtc.datime(h, m, s, yr, mo, dd, dw); 
  rtc.DSsetTime(); 
  configTime(Tz * 3600, 0, "", "");
}

page.h

const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
    <head>
        <title>Great Projects</title>
        <script>
        var Message = 0;
        var data_val1 = 0;
        var data_val2 = 0;
        var tz_val;
      function DisplayCurrentTime() {
          var dt = new Date();
  var weekday = new Array(7);
  weekday[0] = "Sunday";
  weekday[1] = "Monday";
  weekday[2] = "Tuesday";
  weekday[3] = "Wednesday";
  weekday[4] = "Thursday";
  weekday[5] = "Friday";
  weekday[6] = "Saturday";
  var dow = weekday[dt.getDay()];
document.getElementById("datetime").innerHTML = (dow) +" "+ (dt.toLocaleString());
        setTimeout('DisplayCurrentTime()', 1000);
      }
function myFunction() {
  var d = new Date();
  var n = d.getTime()/1000;
  var request = new XMLHttpRequest();
  var strLine = "localdatime?locadt=" + n;
  request.open("GET", strLine, false);
  request.send(null);
}
function myFunctionT() {
  var request = new XMLHttpRequest();
  var nt = document.getElementById("mytmie");
  var nd = document.getElementById("myddate");
  var strLine = "restime?htmie=" + nt.value;
      strLine += "&ddate=" + nd.value;
  request.open("GET", strLine, false);
  request.send(null);
}
function myFunctionTz() {
  var nz = document.getElementById("mylocatz");
  var request = new XMLHttpRequest();
  var strLine = "mytimezon?locatz=" + nz.value;
  request.open("GET", strLine, false);
  request.send(null);
}
function myFunctionN() {
  var request = new XMLHttpRequest();
  request.open("GET", "ntptime", false);
  request.send(null);
}
function myFunctionS() {
  var request = new XMLHttpRequest();
  request.open("GET", "savetime", false);
  request.send(null);
}
        function GetArduinoInputs()
        {
          var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
            data_val1  = this.responseXML.getElementsByTagName('analog')[0].childNodes[0].nodeValue;
            data_val2 = this.responseXML.getElementsByTagName('analog')[1].childNodes[0].nodeValue;
            tz_val = this.responseXML.getElementsByTagName('analog')[2].childNodes[0].nodeValue;
            Message = this.responseXML.getElementsByTagName('analog')[3].childNodes[0].nodeValue;
    }
    if(tz_val < 0) { document.getElementById("TZmesg").innerHTML = "GMT" + tz_val; }
    else { document.getElementById("TZmesg").innerHTML = "GMT+" + tz_val; }

    if(Message == 0) {  
                  var codeBlock1 = '<button type="submit" class="button">Mode Clock</button>';
                  document.getElementById("modemesg").innerHTML = codeBlock1;
    }
    else  { 
                  var codeBlock1 = '<button type="submit" class="button">Mode Message</button>';
                  document.getElementById("modemesg").innerHTML = codeBlock1;
    }

                  var codeBlock2 = '<h1>' + data_val1 + ' &degC</h1>';
                  var codeBlock3 = '<h1>' + data_val2 + ' %RH</h1>';
document.getElementById("Temp").innerHTML = codeBlock2;
document.getElementById("Humi").innerHTML = codeBlock3;
    var elem = document.getElementById("Humi");
    elem.style.color = "#0000ff";
    elem.style.fontSize = "30px";
    var elem = document.getElementById("Temp");
    elem.style.color = "#ff0000";
    elem.style.fontSize = "30px";
  }
  xhttp.open("GET", "readtemhu", true);
  xhttp.send();
            setTimeout('GetArduinoInputs()', 5000);
        }
      document.addEventListener('DOMContentLoaded', function() {
        DisplayCurrentTime(),GetArduinoInputs();
      }, false);
    </script>
      <style>

  body {
  text-align: center;
  background-color: #ffaaaa;
  }
/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Set a style for all buttons */
button {
  padding: 5px 5px 5px 5px;
  text-shadow: 2px 2px #000000;
  width: 100%;
  border: #fbfb00 solid 3px;
  background-color: #0000ff;
  color:white;
  font-size:22px;
  padding-bottom:5px;
  font-weight:600;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

button:hover {
  text-shadow: 2px 2px #ff0000;
  opacity: 0.8;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
}
/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  background: #ffff00;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  border: 2px solid #ff00ff;
  opacity: 1;
}


.slider::-moz-range-thumb {
  width: 15px;
  height: 25px;
  background: #FF0F50;
  cursor: pointer;
}
  .data-input {
  text-align: center;
  background-color: #bbbbff;
  font-size:26px;
  color:red;
  border: 5px solid #444444;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  }
  table {
  text-align: center;
  border: 2px solid #ff00ff;
  background-color: #ffffff;
  width:100%;
  color: #0000ff;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  }
  td {
  border: #fb0000 solid 2px;
  background-color: #111111;
  padding: 5px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  }
  .dtime {
  padding: 5px 5px 5px 5px;
  width: 100%;
  color:#ffffff;
  font-size:30px;
  padding-bottom:5px;
  font-weight:700;
  }
  .button-blue {
  padding: 5px 5px 5px 5px;
  width: 100%;
  border: #fbfb00 solid 3px;
  background-color: #4444ff;
  color:white;
  font-size:22px;
  padding-bottom:5px;
  font-weight:700;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  }
  .button-blue:hover {
  opacity: 1;
  text-shadow: 2px 2px #ff0000;
  color: #ff93bd;
  }
  </style>
    </head>
    <body>
    <table>
   <tr>
   <td style="width:16%">
    <b  class="button-blue"v><span id="TZmesg"></span></b>
   </td>
   <td style="width:24%">
  <form action="/" method="POST">
   <input type="number" value="0" name="locatz" id="mylocatz" min="-12" max="+12" class="button-blue" style="width:22%">
   <button onclick="myFunctionTz()" class="button" style="width:68%">Set</button>
  </form>
   </td>
   <td style="width:38%">
   <b class="dtime"><span id="datetime"></span></b></td>
   <td style="width:28%">
  <form action="/" method="POST">
   <button onclick="myFunctionN()" class="button">NTP Time</button>
  </form></td>
  </tr>
    </table>
    <table>
   <tr>
   <td style="width:14%">
  <form action="/MesColor" method="POST">
   <input type="number" value="5" name="Color0" min="0" max="10" class="button-blue" style="width:26%">
   <input type="submit" value="Color" class="button-blue" style="width:50%">
  </form></td>
   <td style="width:62%">
  <form action="/" method="POST">
   <input type="date" value="0" name="ddate" id="myddate" class="button-blue" style="width:32%">
   <input type="time" value="00:00:00" name="htmie" id="mytmie" class="button-blue" step="2" style="width:32%">
   <button onclick="myFunctionT()" class="button" style="width:22%">Set</button>
  </form></td>
   <td style="width:22%">
  <form action="/" method="POST">
   <button onclick="myFunction()" class="button">Set local Time</button>
  </form></td>
  </tr>
    </table>
    <table>
   <tr>
  <form action="/myMesg" method="POST">
   <td><div class="slidecontainer">
  <input type="text" placeholder="Enter your message here..."  name="Message" maxlength="655" style="width:78%;height:35px;font-size:30px">
  <input type="submit" value="Send" class="button-blue" style="width:20%">
  </div></td></form>
  </tr>
   <tr>
<form action="/MesSpeed0" method="POST">
   <td>
  <b style="width:8%"><span class="button-blue" id="speed0"></span></b>
  <input type="range" name="Speed0" min="5" max="300" value="30" class="slider" style="width:74%" id="mySpeed0">
  <input type="submit" value="Speed Mesg" style="width:18%" class="button-blue">
  </td>
  <script>
var slider0 = document.getElementById("mySpeed0");
var output0 = document.getElementById("speed0");
output0.innerHTML = slider0.value;

slider0.oninput = function() {
  output0.innerHTML = this.value;
}
</script>
</form>
  </tr>
   <tr>
<form action="/MesSpeed1" method="POST">
   <td>
  <b style="width:8%"><span class="button-blue" id="speed1"></span></b>
  <input type="range" name="Speed1" min="1" max="2500" value="1000" class="slider" style="width:74%" id="mySpeed1">
  <input type="submit" value="Speed Frame" style="width:18%" class="button-blue">
  </td>
  <script>
var slider1 = document.getElementById("mySpeed1");
var output1 = document.getElementById("speed1");
output1.innerHTML = slider1.value;

slider1.oninput = function() {
  output1.innerHTML = this.value;
}
</script>
</form>
  </tr>
   <tr>
<form action="/MesBright" method="POST">
   <td>
  <b style="width:8%"><span class="button-blue" id="bright"></span></b>
  <input type="range" name="Bright" min="0" max="250" value="25" class="slider" style="width:74%" id="myBright">
  <input type="submit" value="setBrightness" style="width:18%" class="button-blue">
  </td>
  <script>
var sliderb = document.getElementById("myBright");
var outputb = document.getElementById("bright");
outputb.innerHTML = sliderb.value;

sliderb.oninput = function() {
outputb.innerHTML = this.value;
}
</script>
</form>
  </tr>
   <tr>
<form action="/MesSpeed4" method="POST">
   <td>
  <b style="width:8%"><span class="button-blue" id="speed4"></span></b>
  <input type="range" name="Speed4" min="1" max="9" value="5" class="slider" style="width:74%" id="mySpeed4">
  <input type="submit" value="Set" style="width:18%" class="button-blue">
  </td>
  <script>
var slider4 = document.getElementById("mySpeed4");
var output4 = document.getElementById("speed4");
output4.innerHTML = slider4.value;

slider4.oninput = function() {
  output4.innerHTML = this.value;
}
</script>
</form>
  </tr>
   <tr>
<form action="/MesSpeed5" method="POST">
   <td>
  <b style="width:8%"><span class="button-blue" id="speed5"></span></b>
  <input type="range" name="Speed5" min="1" max="9" value="6" class="slider" style="width:74%" id="mySpeed5">
  <input type="submit" value="Set" style="width:18%" class="button-blue">
  </td>
  <script>
var slider5 = document.getElementById("mySpeed5");
var output5 = document.getElementById("speed5");
output5.innerHTML = slider5.value;

slider5.oninput = function() {
  output5.innerHTML = this.value;
}
</script>
</form>
  </tr>
    </table>
    <table>
   <tr>
   <td style="width:48%">
    <b><span id="Temp"></span></b>
   </td>
   <td style="width:48%">
   <b><span id="Humi"></span></b>
   </td>
  </tr>
    </table>
    <table>
   <tr>
        <td style='width:25%'>
  <form action="/" method="POST">
   <button onclick="myFunctionS()" class="button">Save Time</button>
  </form>
   </td>
        <td style='width:25%'>
    <div class="slidecontainer">
    <button onclick="document.getElementById('id01').style.display='block'" class="button">Connect to Wi-Fi</button>
  </div>
    <div id="id01" class="modal">
  <form class="modal-content animate" action="/Mywifi" method="POST">
    <div  class="data-input">
    <div class="slidecontainer">
      <label for="usname"><b>Wifi Ssid</b></label>
      <input type="text" placeholder="Enter Ssid" name="usname" required>
      <label for="pssw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="pssw">
      <button type="submit" class="button"><b>Connect</b></button>
    </div>
    </div>
  </form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script></td>
        <td style='width:25%'>
  <form action="/MesMode" method="POST">
    <b><span id="modemesg"></span></b>
  </form>
   </td>
        <td style='width:25%'>
  <form action="/restesp" method="POST">
      <button type="submit" name = "rerset" class="button">Restart ESP</button>
  </form>
   </td>
  </tr>
    </table>
    </body>
</html>
)=====";
Posted by 41 comments:

arduinoFFT With ESP32 and RGB Matrix

Spectrum Music Visualizer With RGB Matrix And ESP32

Schema



Esp32 Matrix p4 RGB 64x32 
ArduinoFFT
Web Server
RGB LED Matrix with an ESP32 - How to get started In this video I show how to get one working with an ESP32
 

Code:

 
Panel - ESP32   Panel - ESP32
R1    - IO25      G1   - IO26
B1    - IO27      GND  - GND
R2    - IO12      G2   - IO13
B2    - IO14      GND  - GND
A     - IO15      B    - IO16
C     - IO17      D    - IO18
CLK   - IO19      LAT  - IO32
OE    - IO33      GND  - GND

Library

REQUIRES the following Arduino libraries:
- RGB LED Matrix with an ESP32 - How to get started : https://youtu.be/0gGnr2HYCnQ
- Adafruit RGB matrix Panel Library: https://github.com/adafruit/RGB-matrix-Panel
- Getting Started ESP32 / ESP32S : https://www.youtube.com/watch?v=9b0Txt-yF7E
-Find All "Great Projects" Videos : https://www.youtube.com/c/GreatProjects

 
Product link: 
Module de capteur de détection de son vocal émetteur de microphone voiture robot intelligente
https://www.banggood.com/custlink/GKKEitq2gV
Geekcreit® 40pcs FR-4 2.54mm Double Côté Prototype PCB Carte de Circuit Imprimé
https://www.banggood.com/custlink/DmDyZh1Bq4
Geekcreit® ESP32 Carte de développement WiFi + Bluetooth Consommation d'énergie Ultra-faible Double Cœurs Broches non soudées
https://www.banggood.com/custlink/KGvE9YT4Mo
32x64 Assemblé Coloré Multifonctions Horloge Musique Spectre LED Affichage
https://www.banggood.com/custlink/G33hSP2UaP
Geekcreit P2.5 LED Affichage HD Écran couleur 64x64 LED Module d'affichage Défilement horizontal
https://www.banggood.com/custlink/333E9R7gM5
DC12-24V TPA3116D2 Carte d'amplificateur de puissance de subwoofer numérique 2.1 canaux
https://www.banggood.com/custlink/D3vRiHqzo4
Geekcreit® 37 En 1 Ensemble Kit de Carte de Module de Capteur pour Arduino
https://www.banggood.com/custlink/vm3YZ5k2aT
Posted by No comments:

ESP32 DHT11 RTC DS1307 SD Card P4 RGB Led Matrix Russian font

RGB Matrix p4 64*32 DHT11 DS1307 Arduino ESP32

Arduino tutorial: 
RGB Matrix p4 64*32 
DHT11 
ESP32
RTC DS1307
SD Card 
 
 This project with esp8266

Schema


RGB LED Matrix with an ESP32 - How to get started: https://youtu.be/0gGnr2HYCnQ


Code

// REQUIRES the following Arduino libraries:
// - Lien vidéo: https://youtu.be/gwQPx3qzFcc
// - RGB matrix Panel Library: https://github.com/adafruit/RGB-matrix-Panel
// - Adafruit_GFX Library: https://github.com/adafruit/Adafruit-GFX-Library
// - Adafruit_BusIO Library: https://github.com/adafruit/Adafruit_BusIO 
// - DHT Sensor Library: https://github.com/beegee-tokyo/DHTesp
// - ESPxxTime Library: https://github.com/3tawi/DS1307ESPTime
// - RGB LED Matrix with an ESP32 - How to get started: https://youtu.be/0gGnr2HYCnQ
// - Getting Started ESP32 : https://www.youtube.com/watch?v=9b0Txt-yF7E 
// Find All "Great Projects" Videos : https://www.youtube.com/c/GreatProjects


#include <SD.h>
#include "SPIFFS.h"
#include <EEPROM.h>
#include <WiFi.h>
#include <WebServer.h>
#include <DS1307ESPTime.h>
#include <RGBmatrixPanel.h>
#include <Adafruit_GFX.h>
#include <atawi21x12b.h>
#include <atawi8c.h>
#include "DHTesp.h"
#include "page.h"

#define dhtPin 2  
#define EEPROM_SIZE 7
#define DHTTYPE DHT11   // DHT 11

#define A    15
#define B    16
#define C    17
#define D    4
#define CLK  0 
#define LAT  32 
#define OE   33

#define matrix_width 64
#define matrix_height 32

RGBmatrixPanel matrix(A, B, C, D, CLK, LAT, OE, false, 64);
DS1307ESPTime rtc;
WebServer server(80);
GFXcanvas1 canvasF(64, 32);
DHTesp dht;

char ssid[30] = "";
char pass[30] = "";
const char* Apssid = "P4Matrix";
const char* Appassword = "3tawi-GP";
  IPAddress ip(192,168,1,142);
  IPAddress dns(192,168,1,1);
  IPAddress gateway(192,168,1,1);
  IPAddress gatewayap(192,168,4,1);
  IPAddress subnet(255,255,255,0);

File myfile;
String Message = "Great Projects wish you a very nice day. Hope you have a great time ahead.";
String datee, datetxt, ddate;
float temp, humi;
int Tz = 1; // Time Zone
int NewRTCh = 24;
int NewRTCm = 60;
int NewRTCs = 60;
bool flasher = false;
bool wifiok = false;
bool Modeclock = true;
long savednum = 0 ,passnum = 0; 
int xps=32, msg = 1;
uint32_t lastTime, prevTime, prevTim; 
String text, textmsg, textip;
int sp0, sp1, sp2, sp3, sp4;
long     hueShift;
long     value;
int      dx1, dx2, dx3, dx4, dy1, dy2, dy3, dy4, sx1, sx2, sx3, sx4;
int      r, g, b;
uint8_t  lo;
float rs1, rs2, rs3, rs4,
      cx1, cx2, cx3, cx4,
      cy1, cy2, cy3, cy4;
float  ag1, ag2, ag3, ag4;
static const int8_t PROGMEM sinetab[256] = {
     0,   2,   5,   8,  11,  15,  18,  21, 24,  27,  30,  33,  36,  39,  42,  45,
    48,  51,  54,  56,  59,  62,  65,  67, 70,  72,  75,  77,  80,  82,  85,  87,
    89,  91,  93,  96,  98, 100, 101, 103, 105, 107, 108, 110, 111, 113, 114, 116,
   117, 118, 119, 120, 121, 122, 123, 123, 124, 125, 125, 126, 126, 126, 126, 126,
   127, 126, 126, 126, 126, 126, 125, 125, 124, 123, 123, 122, 121, 120, 119, 118,
   117, 116, 114, 113, 111, 110, 108, 107, 105, 103, 101, 100,  98,  96,  93,  91,
    89,  87,  85,  82,  80,  77,  75,  72, 70,  67,  65,  62,  59,  56,  54,  51,
    48,  45,  42,  39,  36,  33,  30,  27, 24,  21,  18,  15,  11,   8,   5,   2,
     0,  -3,  -6,  -9, -12, -16, -19, -22, -25, -28, -31, -34, -37, -40, -43, -46,
   -49, -52, -55, -57, -60, -63, -66, -68, -71, -73, -76, -78, -81, -83, -86, -88,
   -90, -92, -94, -97, -99,-101,-102,-104, -106,-108,-109,-111,-112,-114,-115,-117,
  -118,-119,-120,-121,-122,-123,-124,-124, -125,-126,-126,-127,-127,-127,-127,-127,
  -128,-127,-127,-127,-127,-127,-126,-126, -125,-124,-124,-123,-122,-121,-120,-119,
  -118,-117,-115,-114,-112,-111,-109,-108, -106,-104,-102,-101, -99, -97, -94, -92,
   -90, -88, -86, -83, -81, -78, -76, -73, -71, -68, -66, -63, -60, -57, -55, -52,
   -49, -46, -43, -40, -37, -34, -31, -28, -25, -22, -19, -16, -12,  -9,  -6,  -3
};

struct Text {
 char *texte;
  uint16_t width, height;
  int16_t x, y;
  int16_t dx, dy;
} texte = {"22:22", 0, 0, 0, 0, 1, 1};
int16_t x=0, dx=1;


void(* resetFunc) (void) = 0;//declare reset function at address 0

void getWifi()
{
  WiFi.config(ip, dns, gateway, subnet); 
  WiFi.begin(ssid, pass);
  int xc = 0;
  while (WiFi.status() != WL_CONNECTED && xc < 10) {
    delay(500);
    xc++;
  }
  if (WiFi.status() == WL_CONNECTED) { 
    textip = "CONNECTED To: ";
    textip += ssid;
    textip += " IP Address: http://";
    textip += WiFi.localIP().toString().c_str();
    WiFi.softAPdisconnect(true);
    wifiok = true;
    } else { 
    // WiFi.config(ip, dns, gatewayap, subnet); 
    WiFi.softAP(Apssid, Appassword);
    textip = "CONNECTED To: ";
    textip += Apssid;
    textip += " Password: ";
    textip += Appassword;
    textip += " IP Address: http://";
    textip += WiFi.softAPIP().toString().c_str();
    wifiok = false;
    }
    msg = 4, getmesg();
}
void Colorplat(int cpla) {
  switch (cpla) { 
  case 0:
  rs1 = 4.1, rs2 = 6.3, rs3 = 10.2, rs4 = 11.1;
  cx1 = 4.1, cy1 = 2.2;
  cx2 = 5.8, cy2 = 1.7;
  cx3 = 5.8, cy3 = 3.5;
  cx4 = 1.1, cy4 = -1.5;
  sp1 = 3, sp2 = 2;
    break;
  case 1:
  rs1 = 4.1, rs2 = 6.3, rs3 = 10.2, rs4 = 11.1;
  cx1 = 4.1, cy1 = 2.2;
  cx2 = 5.8, cy2 = 1.7;
  cx3 = 5.8, cy3 = 3.5;
  cx4 = 1.1, cy4 = -1.5;
  sp1 = 4, sp2 = 5;
    break;
  case 2:
  rs1 = 4.1, rs2 = 6.3, rs3 = 10.2, rs4 = 11.1;
  cx1 = 4.1, cy1 = 2.2;
  cx2 = 5.8, cy2 = 1.7;
  cx3 = 5.8, cy3 = 3.5;
  cx4 = 1.1, cy4 = -1.5;
  sp1 = 2, sp2 = 3;
    break;
  case 3:
  rs1 = 8.1, rs2 = 8.5, rs3 = 15.4, rs4 = 17.1;
  cx1 = 8.1, cy1 = 4.3;
  cx2 = 5.8, cy2 = 3.3;
  cx3 = 11.7, cy3 = 7.0;
  cx4 = 2.1, cy4 = -1.5;
  sp1 = 2, sp2 = 3;
    break;
  case 4:
  rs1 = 12.1, rs2 = 12.5, rs3 = 20.4, rs4 = 22.1;
  cx1 = 12.1, cy1 = 6.3;
  cx2 = 8.8, cy2 = 4.8;
  cx3 = 16.9, cy3 = 10.5;
  cx4 = 3.1, cy4 = -2.1;
  sp1 = 3, sp2 = 4;
    break;
  case 5:
  rs1 = 16.3, rs2 = 23.0, rs3 = 40.8, rs4 = 44.2;
  cx1 = 16.1, cy1 = 8.7;
  cx2 = 11.6, cy2 = 6.5;
  cx3 = 23.4, cy3 = 14.0;
  cx4 = 4.1, cy4 = -2.9;
  sp1 = 3, sp2 = 4;
    break;
  case 6:
  rs1 = 24.6, rs2 = 34.5, rs3 = 15.4, rs4 = 66.4;
  cx1 = 34.2, cy1 = 23.4;
  cx2 = 35.2, cy2 = 19.9;
  cx3 = 33.8, cy3 = 42.0;
  cx4 = 12.2, cy4 = -5.6;
  sp1 = 4, sp2 = 5;
    break;
  case 7:
  rs1 = 32.6, rs2 = 46.0, rs3 = 20.4, rs4 = 88.4;
  cx1 = 32.2, cy1 = 17.4;
  cx2 = 23.2, cy2 = 13.0;
  cx3 = 23.4, cy3 = 28.0;
  cx4 = 8.2, cy4 = -5.6;
  sp1 = 2, sp2 = 3;
    break;
  case 8:
  rs1 = 65.2, rs2 = 92.0, rs3 = 40.8, rs4 = 176.8;
  cx1 = 64.4, cy1 = 34.8;
  cx2 = 46.4, cy2 = 26.0;
  cx3 = 46.8, cy3 = 56.0;
  cx4 = 16.4, cy4 = -11.2;
  sp1 = 2, sp2 = 3;
    break;
  case 9:
  rs1 = 97.8, rs2 = 138.0, rs3 = 61.2, rs4 = 265.2;
  cx1 = 96.6, cy1 = 52.2;
  cx2 = 69.6, cy2 = 39.0;
  cx3 = 70.2, cy3 = 84.0;
  cx4 = 24.6, cy4 = -16.8;
  sp1 = 2, sp2 = 3;
    break;
  case 10:
  rs1 = 130.4, rs2 = 184.0, rs3 = 81.6, rs4 = 353.6;
  cx1 = 128.8, cy1 = 69.6;
  cx2 = 92.8, cy2 = 52.0;
  cx3 = 93.6, cy3 = 112.0;
  cx4 = 32.8, cy4 = -22.4;
  sp1 = 3, sp2 = 4;
    break;
  default:
  rs1 = 130.4, rs2 = 184.0, rs3 = 81.6, rs4 = 353.6;
  cx1 = 128.8, cy1 = 69.6;
  cx2 = 92.8, cy2 = 52.0;
  cx3 = 93.6, cy3 = 112.0;
  cx4 = 32.8, cy4 = -22.4;
  sp1 = 5, sp2 = 6;
    break;
  }
}
void getmesg()
{
  xps = 64;
  getdata();
    switch(msg)
    {
    case 0 :
        gettemphumi();
        textmsg = Message;
        msg++;
        break;
    case 1 :
        textmsg = "Temperature: ";
        textmsg += temp;
        textmsg += "°C";
        msg++;
        break;
    case 2 :
        textmsg = "Humidity: ";
        textmsg += humi;
        textmsg += "%";
        msg++;
        break;
    case 3 :
        textmsg = rtc.getTime("%A, %d %B %Y");
        msg = 0;
        break;
    case 4 :
        textmsg = textip;
        msg = 0;
        break;
    }
}
  void gettemphumi() {
  TempAndHumidity newValues = dht.getTempAndHumidity();
       temp = newValues.temperature;
       humi = newValues.humidity;
  if (NewRTCm != rtc.getMinute()) {
  if (!isnan(temp) && !isnan(humi)) { wirttemphu(); }
  NewRTCm = rtc.getMinute();
      }
}
  void getdata() {
  ag1   += 0.03;
  ag2   -= 0.05;
  ag3   += 0.07;
  ag4   -= 0.05;
}
void getblat() {
  sx1 = (int)(cos(ag1) * rs1 + cx1);
  sx2 = (int)(cos(ag2) * rs2 + cx2);
  sx3 = (int)(cos(ag3) * rs3 + cx3);
  sx4 = (int)(cos(ag4) * rs4 + cx4);
  dy1 = (int)(sin(ag1) * rs1 + cy1);
  dy2 = (int)(sin(ag2) * rs2 + cy2);
  dy3 = (int)(sin(ag3) * rs3 + cy3);
  dy4 = (int)(sin(ag4) * rs4 + cy4);
  hueShift += xps * 0.05;
  for(int y=0; y<32; y++) {
  dx1 = sx1; dx2 = sx2; dx3 = sx3; dx4 = sx4;
  for(int x=0; x<64; x++) {
  int c0 = canvasF.getPixel(x, y);
  if (c0 != 0) {
      value = hueShift
        + (int8_t)pgm_read_byte(sinetab + (uint8_t)((dx1 * dx1 + dy1 * dy1) >> sp1))
        + (int8_t)pgm_read_byte(sinetab + (uint8_t)((dx2 * dx2 + dy2 * dy2) >> sp1))
        + (int8_t)pgm_read_byte(sinetab + (uint8_t)((dx3 * dx3 + dy3 * dy3) >> sp2))
        + (int8_t)pgm_read_byte(sinetab + (uint8_t)((dx4 * dx4 + dy4 * dy4) >> sp2));
      matrix.drawPixel(x, y, matrix.ColorHSV(value * 3, 255, sp3, true));
    } else {  
      matrix.drawPixel(x, y, matrix.Color333(0, 0, 0));
  }
      dx1--; dx2--; dx3--; dx4--;
    }
    dy1--; dy2--; dy3--; dy4--;
  }
}
void scroll_text(String txt) {
  uint16_t text_length = txt.length() * 7;
    canvasF.fillRect(0, 22, 64, 10, 0x0000);
    canvasF.setFont(&atawi8c);
    canvasF.setCursor(xps, 22);
    canvasF.print(txt);
    canvasF.setFont();
     xps--;
     if (xps < -text_length) {getmesg();}
  }
void getTimA() {
  if (flasher) {
    canvasF.fillRect(0, 0, 64, 22, 0x0000);
    canvasF.setFont(&atawi21x12b);
    canvasF.setCursor(5, 0);
    canvasF.print(rtc.getTime("%H:%M"));
    canvasF.setFont();
  } else  { canvasF.fillRect(31, 0, 2, 21, 0x0000); }
}
void getTim() {
  if (!flasher)  { text = rtc.getTime("%H:%M"); }
  else  { text = rtc.getTime("%H %M"); }
  if(x+dx>=63 || x+dx<0)
   dx=-dx;
  x+=dx;
  if(texte.x+texte.dx+texte.width>=63 || texte.x+texte.dx<0)
    texte.dx=-texte.dx;
  if(texte.y+texte.dy+texte.height>=31 || texte.y+texte.dy<0)
    texte.dy=-texte.dy;
  texte.x+=texte.dx;
  texte.y+=texte.dy;
    canvasF.fillScreen(0);
    canvasF.setFont(&atawi21x12b);
    canvasF.setCursor(texte.x, texte.y);
    canvasF.print(text);
    canvasF.setFont();
}
void handleRestesp() {  
    handleRoot();
    delay(1000);     
    resetFunc();
}

void handleRoot() {
 server.send(200, "text/html", MAIN_page); //Send web page
}
void handlesendate() {
    handleRoot();
    datetxt = server.arg("bday");
  if (datetxt == "") { datetxt = rtc.getTime("%F"); }
    datee = "/Temhumi/";
    datee += datetxt;
    datee += ".txt";
}
void handletxt() {
  if (datetxt == "") { handlesendate(); }
  File file = SD.open(datee);
  if (file) {
    size_t sent = server.streamFile(file, "text/plain");
  } else {
    server.send(200, "text/plain", "file not fond");
  }
    file.close();
}
void handlesaveTime() { 
    handleRoot();
    writeTime();
}
void handlentpTime() {
    handleRoot();
  if (wifiok) {  
  configTime(Tz * 3600, 3600, "145.238.203.10", "145.238.203.14"); 
    }
}
void handlezoneTime() {
    handleRoot();
    Tz = server.arg("locatz").toInt(); 
    configTime(Tz * 3600, 0, "", "");
    EEPROM.write(1, Tz);
    EEPROM.commit();
}
void handlelocaltime() { 
    handleRoot();
    rtc.setTime(server.arg("locadt").toInt());  
    configTime(Tz * 3600, 0, "", "");
}
void handleMyTime() { 
    handleRoot(); 
    String hbuf = server.arg("htmie"); 
    String dbuf = server.arg("ddate");
    text = hbuf[0];
    text += hbuf[1];
    int h = text.toInt(); 
    text = hbuf[3];
    text += hbuf[4];
    int m = text.toInt(); 
    text = hbuf[6];
    text += hbuf[7];
    int s = text.toInt();
    
    text = dbuf[0];
    text += dbuf[1];
    text += dbuf[2];
    text += dbuf[3];
    int yr = text.toInt(); 
    text = dbuf[5];
    text += dbuf[6];
    int mo = text.toInt();
    text = dbuf[8];
    text += dbuf[9];
    int dd = text.toInt();
    rtc.setTime(s, m, h, dd, mo, yr);
}
void handleSpe0() {
    handleRoot();
    sp0 = server.arg("Speed0").toInt();
    EEPROM.write(2, sp0);
    EEPROM.commit();
  }
void handleSpe1() { 
    handleRoot();
    sp1 = server.arg("Speed1").toInt();
  }
void handleSpe2() { 
    handleRoot();
    sp2 = server.arg("Speed2").toInt();
  }
void handleBright() {
    handleRoot();
    sp3 = server.arg("Bright").toInt();
    EEPROM.write(3, sp3);
    EEPROM.commit();
    if (sp3 < 70) { sp3 = 70; }
  }
void handleColor() { 
    handleRoot();
    sp4 = server.arg("Color0").toInt();
    EEPROM.write(4, sp4);
    EEPROM.commit();
    Colorplat(sp4);
  }
void handleMode() { 
    handleRoot();
    Modeclock = !Modeclock;
    canvasF.fillScreen(0);
    EEPROM.write(5, Modeclock);
    EEPROM.commit();
  }
void handleMesg() { 
    handleRoot();
    Message = server.arg("Message");
  myfile = SPIFFS.open("/Message.txt", FILE_WRITE);
    if(myfile){ 
      myfile.print(Message);
    }
    myfile.close();
    msg = 0, getmesg();
  }
void handleWifi() { 
  handleRoot();
  text = server.arg("usname");
  myfile = SPIFFS.open("/Ssid.txt", FILE_WRITE);
    if(myfile){ 
      myfile.print(text); 
    }
    myfile.close();
  int len = text.length() + 1; 
  text.toCharArray(ssid, len);
  text = server.arg("pssw");
  myfile = SPIFFS.open("/Password.txt", FILE_WRITE);
    if(myfile){ 
      myfile.print(text);
    }
    myfile.close();
  len = text.length() + 1;
  text.toCharArray(pass, len); 
  getWifi();
}
void getssid() { 
myfile = SPIFFS.open("/Ssid.txt");
 if(!myfile){
   return;
 }
int nb = 0;
while (myfile.available()) {
  savednum = myfile.read();
  ssid[nb] = (char) savednum;
  nb += 1;
}
myfile.close();
}
void getpass() { 
myfile = SPIFFS.open("/Password.txt");
 if(!myfile){
   return;
 }
int nb = 0;
while (myfile.available()) {
  savednum = myfile.read();
  pass[nb] = (char) savednum;
  nb += 1;
}
myfile.close();
}
void getstting() { 
    Tz        = EEPROM.read(1);
    sp0       = EEPROM.read(2);
    sp3       = EEPROM.read(3);
    sp4       = EEPROM.read(4);
    Modeclock = EEPROM.read(5);
    if (sp3 < 70) { sp3 = 70; }
    if (Tz > 12) { Tz = Tz - 256; }
myfile = SPIFFS.open("/Message.txt");
 if(!myfile){
   return;
 }
Message = "";
while (myfile.available()) {
  savednum = myfile.read();
  Message += (char)savednum;
}
myfile.close();
}
void prepacard() { 
    File root = SD.open("/Temhumi");
    if(!root.isDirectory()){
        SD.mkdir("/Temhumi");
    }
}
void setup() { 
  rtc.begin(); 
  updateTime(); 
  SPIFFS.begin(true);
  SD.begin(5);
  EEPROM.begin(EEPROM_SIZE);
  getssid();
  getpass();
  getWifi();
  matrix.begin();
  matrix.setTextWrap(false);
  matrix.setFont(&atawi21x12b);  
  canvasF.setTextWrap(false);
  server.on("/", handleRoot); 
  server.on("/MesBright", handleBright);
  server.on("/MesColor", handleColor); 
  server.on("/MesMode", handleMode);  
  server.on("/readtemhu", handlestate); 
  server.on("/MesSpeed0", handleSpe0);
  server.on("/MesSpeed1", handleSpe1); 
  server.on("/MesSpeed2", handleSpe2); 
  server.on("/myMesg", handleMesg);  
  server.on("/Mywifi", handleWifi); 
  server.on("/ntptime", handlentpTime); 
  server.on("/mytimezon", handlezoneTime); 
  server.on("/localdatime", handlelocaltime);
  server.on("/restime", handleMyTime);
  server.on("/savetime", handlesaveTime); 
  server.on("/readMesge", handleMesge); 
  server.on("/sendate", handlesendate);
  server.on("/readtext", handletxt);
  server.on("/restesp", handleRestesp);
  server.begin();
  prepacard();
  getstting();
  Colorplat(sp4); 
  int16_t x1 = 0, y1 = 0;
  matrix.getTextBounds(texte.texte, 0, 0, &x1, &y1, &texte.width, &texte.height);
  texte.width-=2;
  texte.height-=2;
  x=0, dx=1;
  delay(2000);
  dht.setup(dhtPin, DHTesp::DHT11);
}
void loop() {
  server.handleClient(); 
   if(!Modeclock) { getblat(); }
   if(millis() - prevTim >= sp0 && !Modeclock) {
      scroll_text(textmsg);
      prevTim = millis();
    }
   if(millis() - lastTime >= 1000 && !Modeclock) {
      getTimA();
      flasher = !flasher; 
      lastTime = millis();
    }
   else if(millis() - lastTime >= 1000 && Modeclock) {
      getTim();
      getblat();
      getdata();
      flasher = !flasher; 
      lastTime = millis();
    }
}
void handleMesge()
{
  String content = "<?xml version = \"1.0\" ?>";
  content += "<inputs><analog>";
  content += datetxt;
  content += "</analog></inputs>";
  server.sendHeader("Cache-Control", "no-cache");
  server.send(200, "text/xml", content); //Send web page
}
void handlestate() {
  gettemphumi();
  String content = "<?xml version = \"1.0\" ?>";
  content += "<inputs><analog>";
  content += temp;
  content += "</analog><analog>";
  content += humi;
  content += "</analog><analog>";
  content += Tz;
  content += "</analog><analog>";
  content += Modeclock;
  content += "</analog></inputs>";
  server.sendHeader("Cache-Control", "no-cache");
  server.send(200, "text/xml", content); //Send web page
}
void updateTime()
{
  configTime(0, 0, "", "");
  rtc.DSgetTime(); 
  int dd = rtc.dayOfMonth, mo = rtc.month + 1, yr = rtc.year + 2000;
  rtc.setTime(rtc.second, rtc.minute, rtc.hour, dd, mo, yr);
  configTime(Tz * 3600, 0, "", "");
} 
void writeTime()
{
  configTime(0, 0, "", ""); 
  int h = rtc.getHour(true), m = rtc.getMinute(), s = rtc.getSecond(),
      yr = rtc.getYear(), mo = rtc.getMonth(), dd = rtc.getDay(),
      dw = rtc.getDayofWeek();
  rtc.datime(h, m, s, yr, mo, dd, dw); 
  rtc.DSsetTime(); 
  configTime(Tz * 3600, 0, "", "");
}
void wirttemphu() {
    ddate = "/Temhumi/";
    ddate += rtc.getTime("%F");
    ddate += ".txt";
    text = rtc.getTime("%T");
    text += " Temperature: ";
    text += temp;
    text += " *C Humidity: ";
    text += humi;
    text += " %RH";
   File file = SD.open(ddate, FILE_APPEND);
    if(file){
        file.println(text);
    }
    file.close();
}

page.h

const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
    <head>
        <title>Great Projects</title>
        <script>
        var MesgeDate;
        var Message = 0;
        var data_val1 = 0;
        var data_val2 = 0;
        var tz_val;
      function DisplayCurrentTime() {
          var dt = new Date();
  var weekday = new Array(7);
  weekday[0] = "Sunday";
  weekday[1] = "Monday";
  weekday[2] = "Tuesday";
  weekday[3] = "Wednesday";
  weekday[4] = "Thursday";
  weekday[5] = "Friday";
  weekday[6] = "Saturday";
  var dow = weekday[dt.getDay()];
document.getElementById("datetime").innerHTML = (dow) +" "+ (dt.toLocaleString());
        setTimeout('DisplayCurrentTime()', 1000);
      }
function myFunction() {
  var d = new Date();
  var n = d.getTime()/1000;
  var request = new XMLHttpRequest();
  var strLine = "localdatime?locadt=" + n;
  request.open("GET", strLine, false);
  request.send(null);
}
function myFunctionT() {
  var request = new XMLHttpRequest();
  var nt = document.getElementById("mytmie");
  var nd = document.getElementById("myddate");
  var strLine = "restime?htmie=" + nt.value;
      strLine += "&ddate=" + nd.value;
  request.open("GET", strLine, false);
  request.send(null);
}
function myFunctionTz() {
  var nz = document.getElementById("mylocatz");
  var request = new XMLHttpRequest();
  var strLine = "mytimezon?locatz=" + nz.value;
  request.open("GET", strLine, false);
  request.send(null);
}
function myFunctionN() {
  var request = new XMLHttpRequest();
  request.open("GET", "ntptime", false);
  request.send(null);
}
function myFunctionS() {
  var request = new XMLHttpRequest();
  request.open("GET", "savetime", false);
  request.send(null);
}
        function GetArduinoInputs()
        {
          var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
            data_val1  = this.responseXML.getElementsByTagName('analog')[0].childNodes[0].nodeValue;
            data_val2 = this.responseXML.getElementsByTagName('analog')[1].childNodes[0].nodeValue;
            tz_val = this.responseXML.getElementsByTagName('analog')[2].childNodes[0].nodeValue;
            Message = this.responseXML.getElementsByTagName('analog')[3].childNodes[0].nodeValue;
    }
    if(tz_val < 0) { document.getElementById("TZmesg").innerHTML = "GMT" + tz_val; }
    else { document.getElementById("TZmesg").innerHTML = "GMT+" + tz_val; }

    if(Message == 0) {  
                  var codeBlock1 = '<button type="submit" class="button">Mode Clock</button>';
                  document.getElementById("modemesg").innerHTML = codeBlock1;
    }
    else  { 
                  var codeBlock1 = '<button type="submit" class="button">Mode Message</button>';
                  document.getElementById("modemesg").innerHTML = codeBlock1;
    }

                  var codeBlock2 = '<h1>' + data_val1 + ' &degC</h1>';
                  var codeBlock3 = '<h1>' + data_val2 + ' %RH</h1>';
document.getElementById("Temp").innerHTML = codeBlock2;
document.getElementById("Humi").innerHTML = codeBlock3;
    var elem = document.getElementById("Humi");
    elem.style.color = "#0000ff";
    elem.style.fontSize = "30px";
    var elem = document.getElementById("Temp");
    elem.style.color = "#ff0000";
    elem.style.fontSize = "30px";
  }
  xhttp.open("GET", "readtemhu", true);
  xhttp.send();
            setTimeout('GetArduinoInputs()', 5000);
        }
        function GetMesgeDate()
        {
          var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      
                            MesgeDate = this.responseXML.getElementsByTagName("analog")[0].childNodes[0].nodeValue;
    }
                  var codeBlock4 = '<embed type="text/html" src="readtext" class="embed-g" width="98%" height="380px">';
document.getElementById("dat").innerHTML = 'Date : ' + MesgeDate;
document.getElementById("ID").innerHTML = codeBlock4;
  }
  xhttp.open("GET", "readMesge", true);
  xhttp.send();
        }
      document.addEventListener('DOMContentLoaded', function() {
        DisplayCurrentTime(),GetArduinoInputs(),GetMesgeDate();
      }, false);
    </script>
      <style>

  body {
  text-align: center;
  background-color: #ffaaaa;
  }
/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Set a style for all buttons */
button {
  padding: 5px 5px 5px 5px;
  text-shadow: 2px 2px #000000;
  width: 100%;
  border: #fbfb00 solid 3px;
  background-color: #0000ff;
  color:white;
  font-size:22px;
  padding-bottom:5px;
  font-weight:600;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

button:hover {
  text-shadow: 2px 2px #ff0000;
  opacity: 0.8;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
}
/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  background: #ffff00;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  border: 2px solid #ff00ff;
  opacity: 1;
}


.slider::-moz-range-thumb {
  width: 15px;
  height: 25px;
  background: #FF0F50;
  cursor: pointer;
}
  .data-input {
  text-align: center;
  background-color: #bbbbff;
  font-size:26px;
  color:red;
  border: 5px solid #444444;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  }
  table {
  text-align: center;
  border: 2px solid #ff00ff;
  background-color: #ffffff;
  width:100%;
  color: #0000ff;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  }
  td {
  border: #fb0000 solid 2px;
  background-color: #111111;
  padding: 5px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  }
  .embed-g {
  background-color: #ffff00;
  color:#00ff00;
  border: #fb0000 solid 2px;
  padding: 5px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  }
  .dtime {
  padding: 5px 5px 5px 5px;
  width: 100%;
  color:#ffffff;
  font-size:30px;
  padding-bottom:5px;
  font-weight:700;
  }
  .button-blue {
  padding: 5px 5px 5px 5px;
  width: 100%;
  border: #fbfb00 solid 3px;
  background-color: #4444ff;
  color:white;
  font-size:22px;
  padding-bottom:5px;
  font-weight:700;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  }
  .button-blue:hover {
  opacity: 1;
  text-shadow: 2px 2px #ff0000;
  color: #ff93bd;
  }
  </style>
    </head>
    <body>
    <table>
   <tr>
   <td style="width:16%">
    <b  class="button-blue"v><span id="TZmesg"></span></b>
   </td>
   <td style="width:24%">
  <form action="/" method="POST">
   <input type="number" value="0" name="locatz" id="mylocatz" min="-12" max="+12" class="button-blue" style="width:22%">
   <button onclick="myFunctionTz()" class="button" style="width:68%">Set</button>
  </form>
   </td>
   <td style="width:38%">
   <b class="dtime"><span id="datetime"></span></b></td>
   <td style="width:28%">
  <form action="/" method="POST">
   <button onclick="myFunctionN()" class="button">NTP Time</button>
  </form></td>
  </tr>
    </table>
    <table>
   <tr>
   <td style="width:14%">
  <form action="/MesColor" method="POST">
   <input type="number" value="5" name="Color0" min="0" max="10" class="button-blue" style="width:26%">
   <input type="submit" value="Color" class="button-blue" style="width:50%">
  </form></td>
   <td style="width:62%">
  <form action="/" method="POST">
   <input type="date" value="0" name="ddate" id="myddate" class="button-blue" style="width:32%">
   <input type="time" value="00:00:00" name="htmie" id="mytmie" class="button-blue" step="2" style="width:32%">
   <button onclick="myFunctionT()" class="button" style="width:22%">Set</button>
  </form></td>
   <td style="width:22%">
  <form action="/" method="POST">
   <button onclick="myFunction()" class="button">Set local Time</button>
  </form></td>
  </tr>
    </table>
    <table>
   <tr>
  <form action="/myMesg" method="POST">
   <td><div class="slidecontainer">
  <input type="text" placeholder="Enter your message here..."  name="Message" maxlength="655" style="width:78%;height:35px;font-size:30px">
  <input type="submit" value="Send" class="button-blue" style="width:20%">
  </div></td></form>
  </tr>
   <tr>
<form action="/MesSpeed0" method="POST">
   <td>
  <b style="width:8%"><span class="button-blue" id="speed0"></span></b>
  <input type="range" name="Speed0" min="1" max="100" value="25" class="slider" style="width:74%" id="mySpeed0">
  <input type="submit" value="Speed Mesg" style="width:18%" class="button-blue">
  </td>
  <script>
var slider0 = document.getElementById("mySpeed0");
var output0 = document.getElementById("speed0");
output0.innerHTML = slider0.value;

slider0.oninput = function() {
  output0.innerHTML = this.value;
}
</script>
</form>
  </tr>
   <tr>
<form action="/MesBright" method="POST">
   <td>
  <b style="width:8%"><span class="button-blue" id="bright"></span></b>
  <input type="range" name="Bright" min="0" max="250" value="50" class="slider" style="width:74%" id="myBright">
  <input type="submit" value="setBrightness" style="width:18%" class="button-blue">
  </td>
  <script>
var sliderb = document.getElementById("myBright");
var outputb = document.getElementById("bright");
outputb.innerHTML = sliderb.value;

sliderb.oninput = function() {
outputb.innerHTML = this.value;
}
</script>
</form>
  </tr>
   <tr>
<form action="/MesSpeed1" method="POST">
   <td>
  <b style="width:8%"><span class="button-blue" id="speed1"></span></b>
  <input type="range" name="Speed1" min="1" max="9" value="7" class="slider" style="width:74%" id="mySpeed1">
  <input type="submit" value="Set" style="width:18%" class="button-blue">
  </td>
  <script>
var slider1 = document.getElementById("mySpeed1");
var output1 = document.getElementById("speed1");
output1.innerHTML = slider1.value;

slider1.oninput = function() {
  output1.innerHTML = this.value;
}
</script>
</form>
  </tr>
   <tr>
<form action="/MesSpeed2" method="POST">
   <td>
  <b style="width:8%"><span class="button-blue" id="speed2"></span></b>
  <input type="range" name="Speed2" min="1" max="9" value="6" class="slider" style="width:74%" id="mySpeed2">
  <input type="submit" value="Set" style="width:18%" class="button-blue">
  </td>
  <script>
var slider2 = document.getElementById("mySpeed2");
var output2 = document.getElementById("speed2");
output2.innerHTML = slider2.value;

slider2.oninput = function() {
  output2.innerHTML = this.value;
}
</script>
</form>
  </tr>
    </table>
    <table>
        <td style="width:28%">
        <b style= "color: #ff00ff;font-size:45px">Temperature</b>
        <p><span id="Temp"></span></p>
        <p><span id="Humi"></span></p>
        <b style= "color: #ff00ff;font-size:45px">Humidity</b>
       </td>
        <td style="width:70%;height:340">
        <form action="/sendate" method="POST">
        <input type="date" id="mydate" name="bday" class="button-blue" style="width:28%">
        <input type="submit" value="Get" class="button-blue" style="width:16%">
        <span id="dat" class="button-blue" style="width:20%"></span>
        </form>
        <span id="ID"></span>
       </td>
     </table>
    <table>
   <tr>
        <td style='width:25%'>
  <form action="/" method="POST">
   <button onclick="myFunctionS()" class="button">Save Time</button>
  </form>
   </td>
        <td style='width:25%'>
    <div class="slidecontainer">
    <button onclick="document.getElementById('id01').style.display='block'" class="button">Connect to Wi-Fi</button>
  </div>
    <div id="id01" class="modal">
  <form class="modal-content animate" action="/Mywifi" method="POST">
    <div  class="data-input">
    <div class="slidecontainer">
      <label for="usname"><b>Wifi Ssid</b></label>
      <input type="text" placeholder="Enter Ssid" name="usname" required>
      <label for="pssw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="pssw">
      <button type="submit" class="button"><b>Connect</b></button>
    </div>
    </div>
  </form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script></td>
        <td style='width:25%'>
  <form action="/MesMode" method="POST">
    <b><span id="modemesg"></span></b>
  </form>
   </td>
        <td style='width:25%'>
  <form action="/restesp" method="POST">
      <button type="submit" name = "rerset" class="button">Restart ESP</button>
  </form>
   </td>
  </tr>
    </table>
    </body>
</html>
)=====";
Posted by 1 comment:
Subscribe to: Posts (Atom)