RGB Matrix p4 64*32 DHT11 DS1307 Arduino ESP32
Arduino tutorial:
RGB Matrix p4 64*32
DHT11
ESP32
RGB Matrix p4 64*32
DHT11
ESP32
RTC DS1307
SD Card
This project with esp8266
64x32 RGB Led Matrix Clock With esp32
64x32 RGB Led Matrix Clock With esp32 Russian font
Lien vidéo:
https://youtu.be/gwQPx3qzFcc
https://youtu.be/ZtfwS9de9B4 " Russian font"
Library
RGB matrix Panel : 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
Getting Started ESP32 : https://www.youtube.com/watch?v=9b0Txt-yF7E
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 + ' °C</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>
)=====";
Hello Sir,
ReplyDeleteI made your earlier 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