Clément SAILLANT
527 lines
23 KiB
Plaintext
527 lines
23 KiB
Plaintext
const char MAIN_page[] PROGMEM = R"=====(
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<title>Digital Clcok & Scrolling Text with ESP32 and P10 RGB 32x16</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
html {font-family: Helvetica, sans-serif;}
|
|
h1 {font-size: 1.1rem; color:#1976D2;}
|
|
|
|
label {font-size: 14px;}
|
|
|
|
.div_Form {
|
|
margin: auto;
|
|
width: 90%;
|
|
border:1px solid #D8D8D8;
|
|
border-radius: 10px;
|
|
background-color: #f2f2f2;
|
|
padding: 9px 9px;
|
|
}
|
|
|
|
.myButton {
|
|
display: inline-block;
|
|
padding: 3px 25px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
outline: none;
|
|
color: #fff;
|
|
background-color: #1976D2;
|
|
border: none;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px #999;
|
|
}
|
|
.myButton:hover {background-color: #104d89}
|
|
.myButton:active {background-color: #104d89; box-shadow: 0 1px #666; transform: translateY(2px);}
|
|
.myButton:disabled {background-color: #666; box-shadow: 0 1px #666; transform: translateY(2px);}
|
|
|
|
.myButtonX {background-color: #ff0000}
|
|
.myButtonX:hover {background-color: #7a0101}
|
|
|
|
.div_Form_Input {display: table; margin: 0px; padding: 0px; box-sizing: border-box;}
|
|
.div_Input_Text {display: table-cell; width: 100%;}
|
|
.div_Input_Text > input {width:99.5%; margin-left: 0px; padding-left: 2px; box-sizing: border-box;}
|
|
|
|
table, th, td {
|
|
border: 0px solid black;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
}
|
|
tr {height: 30px;}
|
|
|
|
textarea {
|
|
resize: none;
|
|
height:50px;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div style="text-align: center;">
|
|
<h1>Digital Clcok & Scrolling Text with ESP32 and P10 RGB 32x16</h1>
|
|
</div>
|
|
|
|
<div class="div_Form">
|
|
<form>
|
|
<!-- Input Key -->
|
|
<label for="keys_TXT">Key :</label>
|
|
<input type="password" style="width: 170px;" id="input_Keys_TXT" name="input_Keys_TXT" maxlength="20" placeholder="Enter key here..." />
|
|
<!-- -->
|
|
|
|
<hr style="border: 1px solid #e6e6e6;">
|
|
|
|
<!-- Displays and applies time and date. -->
|
|
<label id="show_Date_Time">Please wait...</label>
|
|
<br>
|
|
<button type="button" class="myButton" style="font-size: 12px; padding: 3px 10px; margin-top: 5px;" id="btn_Apply_TimeDate" onclick="btn_Apply_TimeDate_Click()">Apply Time and Date</button>
|
|
<!-- -->
|
|
|
|
<hr style="border: 1px solid #e6e6e6;">
|
|
|
|
|
|
<table style="width:280px; margin-left: -1px;">
|
|
<!-- Set display mode. -->
|
|
<tr>
|
|
<td>Display Mode</td>
|
|
<td>:</td>
|
|
<td>
|
|
<select name="input_Display_Mode" id="input_Display_Mode">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
</select>
|
|
</td>
|
|
<td align="right">
|
|
<button type="button" class="myButton" style="font-size: 12px; padding: 3px 10px;" id="btn_Apply_Display_Mode" onclick="btn_Apply_Display_Mode_Click()">Apply</button>
|
|
</td>
|
|
</tr>
|
|
<!-- -->
|
|
|
|
<!-- Set Brightness. -->
|
|
<tr>
|
|
<td>Brightness</td>
|
|
<td>:</td>
|
|
<td>
|
|
<input type="text" value="50" id="input_Brightness" maxlength="3" size="3" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" /> (0 - 255)
|
|
</td>
|
|
<td align="right">
|
|
<button type="button" class="myButton" style="font-size: 12px; padding: 3px 10px;" id="btn_Apply_Input_Brightness" onclick="btn_Apply_Input_Brightness_Click()">Apply</button>
|
|
</td>
|
|
</tr>
|
|
<!-- -->
|
|
|
|
<!-- Set Clock Color. -->
|
|
<tr>
|
|
<td>Clock Color</td>
|
|
<td>:</td>
|
|
<td>
|
|
<input type="color" id="input_Color_Clock" name="input_Color_Clock" value="#0000ff">
|
|
</td>
|
|
<td align="right">
|
|
<button type="button" class="myButton" style="font-size: 12px; padding: 3px 10px;" id="btn_Apply_Input_Color_Clock" onclick="btn_Apply_Input_Color_Clock_Click()">Apply</button>
|
|
</td>
|
|
</tr>
|
|
<!-- -->
|
|
|
|
<!-- Set Date Color. -->
|
|
<tr>
|
|
<td>Date Color</td>
|
|
<td>:</td>
|
|
<td>
|
|
<input type="color" id="input_Color_Date" name="input_Color_Date" value="#0000ff">
|
|
</td>
|
|
<td align="right">
|
|
<button type="button" class="myButton" style="font-size: 12px; padding: 3px 10px;" id="btn_Apply_Input_Color_Date" onclick="btn_Apply_Input_Color_Date_Click()">Apply</button>
|
|
</td>
|
|
</tr>
|
|
<!-- -->
|
|
</table>
|
|
|
|
<hr style="border: 1px solid #e6e6e6;">
|
|
|
|
<label for="Keys_TXT">Scrolling Text :</label>
|
|
<br>
|
|
<table style="width:100%; margin-left: -1px;">
|
|
<tr>
|
|
<!-- Set Scrolling Text. -->
|
|
<td>
|
|
<textarea id="input_Scrolling_Text" name="input_Scrolling_Text" style="width: 100%; margin: 0px; padding: 0px;" maxlength="150" placeholder="Enter text here...(Max 150 characters)"></textarea>
|
|
</td>
|
|
<td style="width: 5px;"></td>
|
|
<td style="width: 30px; vertical-align: top;" align="center">
|
|
<button type="button" class="myButton myButtonX" style="font-size: 12px; padding: 3px 10px;" id="btn_Clear_Input_Scrolling_Text" onclick="btn_Clear_Input_Scrolling_Text_Click()">X</button>
|
|
</td>
|
|
<td style="width: 50px; vertical-align: top;" align="right">
|
|
<button type="button" class="myButton" style="font-size: 12px; padding: 3px 10px;" id="btn_Apply_Input_Scrolling_Text" onclick="btn_Apply_Input_Scrolling_Text_Click()">Apply</button>
|
|
</td>
|
|
</tr>
|
|
<!-- -->
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<table style="width:280px; margin-left: -1px;">
|
|
<!-- Set Text Color. -->
|
|
<tr>
|
|
<td>Text Color</td>
|
|
<td>:</td>
|
|
<td>
|
|
<input type="color" id="input_Text_Color" name="input_Text_Color" value="#0000ff">
|
|
</td>
|
|
<td align="right">
|
|
<button type="button" class="myButton" style="font-size: 12px; padding: 3px 10px;" id="btn_Apply_Input_Text_Color" onclick="btn_Apply_Input_Text_Color_Click()">Apply</button>
|
|
</td>
|
|
</tr>
|
|
<!-- -->
|
|
|
|
<!-- Set Scrolling Speed. -->
|
|
<tr>
|
|
<td>Scrolling Speed</td>
|
|
<td>:</td>
|
|
<td>
|
|
<select name="input_Scrolling_Speed" id="input_Scrolling_Speed">
|
|
<option value="20">20</option>
|
|
<option value="25">25</option>
|
|
<option value="30">30</option>
|
|
<option value="35">35</option>
|
|
<option value="40">40</option>
|
|
<option value="45">45</option>
|
|
<option value="50">50</option>
|
|
<option value="55">55</option>
|
|
<option value="60">60</option>
|
|
<option value="65">65</option>
|
|
<option value="70">70</option>
|
|
<option value="75">75</option>
|
|
</select>
|
|
</td>
|
|
<td align="right">
|
|
<button type="button" class="myButton" style="font-size: 12px; padding: 3px 10px;" id="btn_Apply_Input_Scrolling_Speed" onclick="btn_Apply_Input_Scrolling_Speed_Click()">Apply</button>
|
|
</td>
|
|
</tr>
|
|
<!-- -->
|
|
</table>
|
|
|
|
<hr style="border: 1px solid #e6e6e6;">
|
|
|
|
<button type="button" class="myButton" id="btn_Get_Settings" onclick="btn_Get_Settings_Click()">Get Settings</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
setInterval(myTimer, 1000);
|
|
|
|
var t_Hour;
|
|
var t_Minute;
|
|
var t_Second;
|
|
|
|
const d_DaysOfTheWeek_Array = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
|
|
|
var d_DaysOfTheWeek_Now;
|
|
var d_Day;
|
|
var d_Month;
|
|
var d_Year;
|
|
|
|
var full_DateTime;
|
|
|
|
//________________________________________________________________________________ myTimer()
|
|
function myTimer() {
|
|
getDateTime();
|
|
document.getElementById("show_Date_Time").innerHTML = full_DateTime;
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ getDateTime()
|
|
function getDateTime() {
|
|
const dt = new Date();
|
|
|
|
t_Hour = dt.getHours();
|
|
t_Minute = dt.getMinutes();;
|
|
t_Second = dt.getSeconds();
|
|
|
|
d_DaysOfTheWeek_Now = dt.getDay();
|
|
d_Day = dt.getDate();
|
|
d_Month = dt.getMonth() + 1;
|
|
d_Year = dt.getFullYear();
|
|
|
|
full_DateTime = "Date : <b>";
|
|
full_DateTime += d_DaysOfTheWeek_Array[d_DaysOfTheWeek_Now];
|
|
full_DateTime += ", ";
|
|
full_DateTime += d_Day.toString().padStart(2, '0') + "-" + d_Month.toString().padStart(2, '0') + "-" + d_Year;
|
|
full_DateTime += "</b> | Time : <b>" + t_Hour.toString().padStart(2, '0') + ":" + t_Minute.toString().padStart(2, '0') + ":" + t_Second.toString().padStart(2, '0') + "</b>";
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ check_Key_TXT()
|
|
function check_Key_TXT() {
|
|
var key_TXT = document.getElementById("input_Keys_TXT").value;
|
|
|
|
if (key_TXT == "") {
|
|
alert("Error ! \rThe key cannot be empty.");
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ function btn_Apply_TimeDate_Click()
|
|
// Function to send settings to the server.
|
|
function btn_Apply_TimeDate_Click() {
|
|
if (check_Key_TXT() == false) return;
|
|
|
|
var key_TXT = document.getElementById("input_Keys_TXT").value;
|
|
|
|
getDateTime();
|
|
|
|
var msg;
|
|
msg = "key=" + key_TXT;
|
|
msg += "&sta=setTimeDate";
|
|
msg += "&d_Year=" + d_Year;
|
|
msg += "&d_Month=" + d_Month;
|
|
msg += "&d_Day=" + d_Day;
|
|
msg += "&t_Hour=" + t_Hour;
|
|
msg += "&t_Minute=" + t_Minute;
|
|
msg += "&t_Second=" + t_Second;
|
|
|
|
Send("set", msg);
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ function btn_Apply_Display_Mode_Click()
|
|
// Function to send settings to the server.
|
|
function btn_Apply_Display_Mode_Click() {
|
|
if (check_Key_TXT() == false) return;
|
|
|
|
var key_TXT = document.getElementById("input_Keys_TXT").value;
|
|
var input_Display_Mode = document.getElementById("input_Display_Mode").value;
|
|
|
|
var msg;
|
|
msg = "key=" + key_TXT;
|
|
msg += "&sta=setDisplayMode";
|
|
msg += "&input_Display_Mode=" + input_Display_Mode;
|
|
|
|
Send("set", msg);
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ function btn_Apply_Input_Brightness_Click()
|
|
// Function to send settings to the server.
|
|
function btn_Apply_Input_Brightness_Click() {
|
|
if (check_Key_TXT() == false) return;
|
|
|
|
var key_TXT = document.getElementById("input_Keys_TXT").value;
|
|
var input_Brightness = document.getElementById("input_Brightness").value;
|
|
|
|
var msg;
|
|
msg = "key=" + key_TXT;
|
|
msg += "&sta=setBrightness";
|
|
msg += "&input_Brightness=" + input_Brightness;
|
|
|
|
Send("set", msg);
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ function btn_Apply_Input_Color_Clock_Click()
|
|
// Function to send settings to the server.
|
|
function btn_Apply_Input_Color_Clock_Click() {
|
|
if (check_Key_TXT() == false) return;
|
|
|
|
var key_TXT = document.getElementById("input_Keys_TXT").value;
|
|
var input_Color_Clock = hexToRgb(document.getElementById("input_Color_Clock").value);
|
|
var Color_Clock_R = input_Color_Clock[0];
|
|
var Color_Clock_G = input_Color_Clock[1];
|
|
var Color_Clock_B = input_Color_Clock[2];
|
|
|
|
var msg;
|
|
msg = "key=" + key_TXT;
|
|
msg += "&sta=setColorClock";
|
|
msg += "&Color_Clock_R=" + Color_Clock_R + "&Color_Clock_G=" + Color_Clock_G + "&Color_Clock_B=" + Color_Clock_B;
|
|
|
|
Send("set", msg);
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ function btn_Apply_Input_Color_Date_Click()
|
|
// Function to send settings to the server.
|
|
function btn_Apply_Input_Color_Date_Click() {
|
|
if (check_Key_TXT() == false) return;
|
|
|
|
var key_TXT = document.getElementById("input_Keys_TXT").value;
|
|
var input_Color_Date = hexToRgb(document.getElementById("input_Color_Date").value);
|
|
var Color_Date_R = input_Color_Date[0];
|
|
var Color_Date_G = input_Color_Date[1];
|
|
var Color_Date_B = input_Color_Date[2];
|
|
|
|
var msg;
|
|
msg = "key=" + key_TXT;
|
|
msg += "&sta=setColorDate";
|
|
msg += "&Color_Date_R=" + Color_Date_R + "&Color_Date_G=" + Color_Date_G + "&Color_Date_B=" + Color_Date_B;
|
|
|
|
Send("set", msg);
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ btn_Clear_Input_Scrolling_Text_Click()
|
|
function btn_Clear_Input_Scrolling_Text_Click() {
|
|
document.getElementById("input_Scrolling_Text").value = "";
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ function btn_Apply_Input_Scrolling_Text_Click()
|
|
// Function to send settings to the server.
|
|
function btn_Apply_Input_Scrolling_Text_Click() {
|
|
if (check_Key_TXT() == false) return;
|
|
|
|
var key_TXT = document.getElementById("input_Keys_TXT").value;
|
|
var input_Scrolling_Text = document.getElementById("input_Scrolling_Text").value;
|
|
|
|
var msg;
|
|
msg = "key=" + key_TXT;
|
|
msg += "&sta=setScrollingText";
|
|
msg += "&input_Scrolling_Text=" + input_Scrolling_Text;
|
|
|
|
Send("set", msg);
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ function btn_Apply_Input_Text_Color_Click()
|
|
// Function to send settings to the server.
|
|
function btn_Apply_Input_Text_Color_Click() {
|
|
if (check_Key_TXT() == false) return;
|
|
|
|
var key_TXT = document.getElementById("input_Keys_TXT").value;
|
|
var input_Text_Color = hexToRgb(document.getElementById("input_Text_Color").value);
|
|
var Color_Text_R = input_Text_Color[0];
|
|
var Color_Text_G = input_Text_Color[1];
|
|
var Color_Text_B = input_Text_Color[2];
|
|
|
|
var msg;
|
|
msg = "key=" + key_TXT;
|
|
msg += "&sta=setTextColor";
|
|
msg += "&Color_Text_R=" + Color_Text_R + "&Color_Text_G=" + Color_Text_G + "&Color_Text_B=" + Color_Text_B;
|
|
|
|
Send("set", msg);
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ function btn_Apply_Input_Scrolling_Speed_Click()
|
|
// Function to send settings to the server.
|
|
function btn_Apply_Input_Scrolling_Speed_Click() {
|
|
if (check_Key_TXT() == false) return;
|
|
|
|
var key_TXT = document.getElementById("input_Keys_TXT").value;
|
|
var input_Scrolling_Speed = document.getElementById("input_Scrolling_Speed").value;
|
|
|
|
var msg;
|
|
msg = "key=" + key_TXT;
|
|
msg += "&sta=setScrollingSpeed";
|
|
msg += "&input_Scrolling_Speed=" + input_Scrolling_Speed;
|
|
|
|
Send("set", msg);
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ btn_Get_Settings_Click()
|
|
function btn_Get_Settings_Click() {
|
|
if (check_Key_TXT() == false) return;
|
|
|
|
var key_TXT = document.getElementById("input_Keys_TXT").value;
|
|
|
|
var send_Request;
|
|
send_Request = "key=" + key_TXT;
|
|
send_Request += "&sta=getSettings";
|
|
|
|
Send("get", send_Request);
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ function hexToRgb(hex)
|
|
function hexToRgb(hex) {
|
|
const normal = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
|
|
if (normal) return normal.slice(1).map(e => parseInt(e, 16));
|
|
|
|
const shorthand = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
|
|
if (shorthand) return shorthand.slice(1).map(e => 0x11 * parseInt(e, 16));
|
|
|
|
return null;
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ rgbToHex(red, green, blue)
|
|
function rgbToHex(red, green, blue) {
|
|
const rgb = (red << 16) | (green << 8) | (blue << 0);
|
|
return '#' + (0x1000000 + rgb).toString(16).slice(1);
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ function apply_the_Received_Settings(texts)
|
|
// Function to apply settings received from the server.
|
|
function apply_the_Received_Settings(texts) {
|
|
const myArray_Getting_Settings = texts.split("|");
|
|
|
|
var input_Display_Mode = myArray_Getting_Settings[0];
|
|
var input_Brightness = myArray_Getting_Settings[1];
|
|
|
|
var Color_Clock_R = myArray_Getting_Settings[2];
|
|
var Color_Clock_G = myArray_Getting_Settings[3];
|
|
var Color_Clock_B = myArray_Getting_Settings[4];
|
|
var input_Color_Clock = rgbToHex(Color_Clock_R, Color_Clock_G, Color_Clock_B);
|
|
|
|
var Color_Date_R = myArray_Getting_Settings[5];
|
|
var Color_Date_G = myArray_Getting_Settings[6];
|
|
var Color_Date_B = myArray_Getting_Settings[7];
|
|
var input_Color_Date = rgbToHex(Color_Date_R, Color_Date_G, Color_Date_B);
|
|
|
|
var input_Scrolling_Text = myArray_Getting_Settings[8];
|
|
|
|
var Color_Text_R = myArray_Getting_Settings[9];
|
|
var Color_Text_G = myArray_Getting_Settings[10];
|
|
var Color_Text_B = myArray_Getting_Settings[11];
|
|
var input_Text_Color = rgbToHex(Color_Text_R, Color_Text_G, Color_Text_B);
|
|
|
|
var input_Scrolling_Speed = myArray_Getting_Settings[12];
|
|
|
|
|
|
document.getElementById("input_Display_Mode").value = input_Display_Mode;
|
|
document.getElementById("input_Brightness").value = input_Brightness;
|
|
document.getElementById("input_Color_Clock").value = input_Color_Clock;
|
|
document.getElementById("input_Color_Date").value = input_Color_Date;
|
|
document.getElementById("input_Scrolling_Text").value = input_Scrolling_Text;
|
|
document.getElementById("input_Text_Color").value = input_Text_Color;
|
|
document.getElementById("input_Scrolling_Speed").value = input_Scrolling_Speed;
|
|
}
|
|
//________________________________________________________________________________
|
|
|
|
//________________________________________________________________________________ function Send(sta, msg)
|
|
function Send(sta, msg) {
|
|
if (window.XMLHttpRequest) {
|
|
// code for IE7+, Firefox, Chrome, Opera, Safari
|
|
xmlhttp = new XMLHttpRequest();
|
|
} else {
|
|
// code for IE6, IE5
|
|
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
|
|
}
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
if (this.responseText == "+ERR") {
|
|
alert("Error !\rWrong Key !\rPlease enter the correct key.");
|
|
return;
|
|
}
|
|
|
|
if (this.responseText == "+ERR_DM") {
|
|
alert("Error !\rThis setting is only for Display Mode : 1. \rPlease change the Display Mode to apply this setting.");
|
|
return;
|
|
}
|
|
|
|
if (sta == "get") {
|
|
apply_the_Received_Settings(this.responseText);
|
|
}
|
|
}
|
|
}
|
|
xmlhttp.open("GET", "settings?" + msg, true);
|
|
xmlhttp.send();
|
|
}
|
|
//________________________________________________________________________________
|
|
</script>
|
|
</body>
|
|
</html>
|
|
)====="; |