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:

  1. gur001April 13, 2019 at 11:10 PM

    how to change time zone

    ReplyDelete
    Replies
    1. UnknownMay 14, 2019 at 3:28 PM

      I've updated the hour by adding the timezone my local time:

      line #376: h = line.substring(23, 25).toInt() + 7; // VN Time is GMT+7

      Delete
    2. VanDeWaterDecember 31, 2019 at 4:39 PM

      Why does the - 7 for the GMT not work properly?

      Delete
    3. SathyaFebruary 20, 2020 at 10:17 AM

      I guess you can add seconds to this line say -- 1 hour = 3600
      localEpoc = (h * 60 * 60 + m * 60 + s);

      Delete
    4. SathyaFebruary 20, 2020 at 10:21 AM

      Or add it in

      void updateTime()
      {
      s = localEpoc + 19800 + (millis()/1000);

      Delete
    5. KUBILAYOctober 24, 2020 at 4:36 PM

      how to change time zone

      Delete
    6. shajuNovember 16, 2020 at 6:04 PM

      Anybody updated for your question ?
      time changing is easy but Day,Date not changing after reaching 24Hrs.
      Author also not replaying .

      Delete
    7. UnknownMay 1, 2021 at 7:14 PM

      localEpoc = ((h +3)* 60 * 60 + m * 60 + s);

      Delete
    8. UnknownMay 2, 2021 at 9:13 AM

      localEpoc = ((h +3)* 60 * 60 + m * 60 + s);
      and void updateTime()
      {
      s = localEpoc + 19800 + (millis()/1000);

      do not work correct.

      Delete
  2. CarDaApril 17, 2019 at 6:09 AM

    Friend, help me please I need to show data from an analog sensor on two P4 RGB arrays with ESP8266. Some document or guide would thank you a lot.

    ReplyDelete
  3. gur001May 16, 2019 at 8:17 PM

    Thanks it works. there any chance code with the day light saving so you don't have to reprogram the esp8266 every time when the time change.

    Thanks
    Gur

    ReplyDelete
  4. gur001May 16, 2019 at 8:18 PM

    This comment has been removed by the author.

    ReplyDelete
  5. PierreMay 20, 2019 at 4:09 AM

    "Error compiling for board NodeMCU 1.0 (ESP-12E Module)."
    Which board should I select for compiling?

    ReplyDelete
  6. PatrickJune 4, 2019 at 8:11 PM

    I can't find: kongtext4pt7b.h
    Where can I find it? Thanks in advance

    ReplyDelete
  7. muraliJune 21, 2019 at 6:42 AM

    does it works with 3x3 i.e 9 p6(32x32) rgb modules and how i have to establish connections for all 9 P6's.

    ReplyDelete
  8. UnknownJuly 4, 2019 at 4:30 PM

    In your video you connect a female usb connector with a small print on the powerconnector in witch you plug a usb cable to the esp8266 board.
    Is this a board with special electronics or is this some kind of serial to usb converter?
    Could i connect the 5v from the powersupply directly to the esp8266?

    What is with the "Arduino-master" library (esp8266 library (nodemcu)?
    How do i implement this?
    I don't see any CPP or H files with normaly are included to run the library.
    In the video i don't see anything related to this library.
    Only Adafruit_GFX Library, DHT Sensor Library, PxMatrix-master & a Fonts is added to the library folder of Arduino.
    Where do i get the Fonts folder from?

    If i do exactly what is shown here & in the video i get a lot of errors.

    Please help me. I am new at this.
    Thank you

    ReplyDelete
  9. UnknownJuly 4, 2019 at 7:55 PM

    Addition to previous comment:
    I get the display working with some example files.
    However when using the "64x32_RGB_Led_Matrix_Clock_With_esp8266.ino" i get this message:
    "cc1plus.exe: out of memory allocating 1677721600 bytes"
    How can i fix this?

    Thanks
    VenHeelun

    ReplyDelete
  10. muraliJuly 5, 2019 at 6:46 AM

    if i want to connect 3 or more panels how i have to establish the connections with the esp8266. at the output side. while connecting as usual for the single panel, if i am doing like that only red color text is printing and other colors are not.

    ReplyDelete
  11. serestreAugust 23, 2019 at 2:23 PM

    Hi, I need some help.
    I would like to show on the screen the value of a 1-5V analog signal.
    How could that be implemented? Scaling it by the AO pin?

    ReplyDelete
  12. saadiAugust 25, 2019 at 7:14 PM

    how to set am or pm time

    ReplyDelete
  13. MirkoDecember 8, 2019 at 12:18 PM

    ReplyDelete
  14. Jar BinksDecember 9, 2019 at 10:03 AM

    LED through digital signage have significantly increased the sales particularly at super markets and the retail outlets. LED display

    ReplyDelete
  15. gunawan hatibieDecember 12, 2019 at 6:33 AM

    hi there, ist posible with 2x3 panel..?

    ReplyDelete
  16. UnknownFebruary 23, 2020 at 1:13 AM

    Hi.
    I did managed to get the panel working but when trying to modify the program i am lost.
    Could you make the program so that you could enter values at the beginning of the program like positioning, color, font, size etc. of each element so you could make this clock realy personalized?
    A photo of the working panel with detailed values of each element would be of great help too.

    Please help us....

    ReplyDelete
  17. RaisApril 20, 2020 at 5:59 AM

    64x32 RGB светодиодные матричные часы с esp8266. После ДОБАВЛЕНИЯ+10800 СЕКУНД -ЧАСЫ ПОСЛЕ 00-00 ПОКАЗЫВАЮТ -- 01 БЕЗ ПОКАЗАНИЯ ЧАСОВ А ПОСЛЕ 01-00 ВООБЩЕ ВЫКЛЮЧАЮТСЯ КАК ДАЛЬШЕ БЫТЬ?КАК ПРАВИЛЬНО ДОБАВИТЬ +3 ЧАСА?

    ReplyDelete
  18. andreaApril 30, 2020 at 10:02 AM


    hello: how come this error can help me Error during compilation for the DOIT ESP32 DEVKIT V1 card.

    ReplyDelete
  19. MarilyngeJuly 29, 2020 at 4:07 PM

    I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much. Countertop Dishwasher

    ReplyDelete
  20. German Granny-Meine GrannyNovember 14, 2020 at 2:51 PM

    Great Project !It works on a 32x64 25$ Amazon Matrix .How can I remove the blinking Heart ?

    ReplyDelete
  21. UnknownMay 1, 2021 at 7:20 PM

    How can I remove the blinking second separator?

    ReplyDelete
  22. AniMukherjeeJuly 19, 2021 at 6:04 PM

    Hi all, I'm trying to use 32x32 P6 RGB matrix. Do I need to follow the exact pin connections as mentioned here. And can you please suggest the code changes required. I'm trying with this code and all I can display is 1/4th of the display with broken lines in blue.

    ReplyDelete
  23. UnknownNovember 1, 2021 at 6:29 PM

    localEpoc = ((h* 60 * 60+7200) + m * 60 + s);// Greenwich + 2h(2*3600=7200)

    ReplyDelete
  24. subashsarafJanuary 28, 2022 at 10:29 AM

    SIR Can you make this project with ESP32

    ReplyDelete
    Replies
    1. 3tawiFebruary 5, 2022 at 5:35 PM

      https://arduino-projects-free.blogspot.com/2022/02/esp32-dht11-rtc-ds1307-sd-card-p4-rgb.html

      Delete
  25. subashsarafFebruary 2, 2022 at 4:29 AM

    Hello Sir,
    I made this project from the "Great Project " Youtube Channel and modify the code with hourly chime and brightness control during Night / Dark. Sir can you help me that I want to include DF Player Module so that the clock will make a sound Talking time according to the Hour and also Talking clock. Here I attached the code and video link for your reference. The code was modified by your earlier code. So please, help to complete the project.

    Video Link
    --------------
    https://youtu.be/wWgN7QTPdO0

    Code Link
    ------------
    https://drive.google.com/file/d/1FBAT5BPYo2tNIhvy_1kWRmqw4wxlVJnU/view?usp=sharing

    Email:- subashsaraf@gmail.com

    ReplyDelete
  26. UnknownFebruary 11, 2022 at 2:52 AM

    Where do I find these libraries?
    include
    include

    ReplyDelete
  27. UnknownFebruary 11, 2022 at 2:53 AM

    Where do I find these libraries?
    atawi21x12b.h
    atawi8c.h

    ReplyDelete
  28. subashsarafApril 9, 2022 at 10:03 AM

    Hello Sir Can you please make a RGB Talking Clock So that it will speak time every Hoor and strike bell sound according to time also sync NTP time . with the help of hardware like :- ESP32 RTC DS1307 DHT11, DFplayer, P4 RGB Led Matrix

    ReplyDelete
  29. subashsarafApril 9, 2022 at 10:04 AM

    Hello Sir Can you please make a RGB Talking Clock So that it will speak time every Hoor and strike bell sound according to time also sync NTP time . with the help of hardware like :- ESP32 RTC DS1307 DHT11, DFplayer, P4 RGB Led Matrix

    ReplyDelete
  30. cursos e arquivosFebruary 13, 2023 at 8:46 PM

    s = localEpoc - 10800 +(millis()/1000);

    ReplyDelete
  31. sashaJanuary 23, 2024 at 10:20 AM

    Здравствуйте!
    Помогите, пожалуйста.
    Ошибка:
    exit status 1
    'class DS1307ESPTime' has no member named 'datime'

    ReplyDelete

Subscribe to: Post Comments (Atom)