Merge remote-tracking branch 'remotes/origin/TelnetSpyRevisited'
Resolved Conflicts: Arduino/BTCDieselHeater/BTCWebServer.cpp Arduino/BTCDieselHeater/BTCota.cpp
This commit is contained in:
commit
db62e38274
4 changed files with 710 additions and 176 deletions
|
@ -864,6 +864,9 @@ void checkDebugCommands()
|
|||
val++;
|
||||
bSendVal = true;
|
||||
}
|
||||
else if(rxVal == 'r') {
|
||||
ESP.restart(); // reset the esp
|
||||
}
|
||||
else if(rxVal == '[') {
|
||||
val--;
|
||||
bSendVal = true;
|
||||
|
|
|
@ -42,6 +42,7 @@ void initOTA(){
|
|||
DebugPort.println("\nEnd");
|
||||
DebugPort.handle(); // keep telnet spy alive
|
||||
DebugPort.end(); // force graceful close of telnetspy - ensures a client will reconnect cleanly
|
||||
ESP.restart();
|
||||
})
|
||||
.onProgress([](unsigned int progress, unsigned int total) {
|
||||
DebugPort.printf("Progress: %u%%\r", (progress / (total / 100)));
|
||||
|
@ -62,4 +63,3 @@ void initOTA(){
|
|||
void DoOTA(){
|
||||
ArduinoOTA.handle();
|
||||
};
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -5,6 +5,136 @@ const char* MAIN_PAGE PROGMEM = R"=====(
|
|||
<html>
|
||||
<head>
|
||||
<script>
|
||||
|
||||
// Scripts for date handling
|
||||
Date.prototype.today = function () {
|
||||
return ((this.getDate() < 10)?"0":"") + this.getDate() +"/"+(((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) +"/"+ this.getFullYear();
|
||||
}
|
||||
|
||||
// Scripts for setting date and time
|
||||
|
||||
function setcurrenttime(){
|
||||
const cmd = { Time: 0 };
|
||||
cmd.Time = document.getElementById("curtime").value;
|
||||
var str = JSON.stringify(cmd);
|
||||
Socket.send(str);
|
||||
|
||||
|
||||
}
|
||||
|
||||
function setcurrentdate(){
|
||||
var cmd = { Date: 0 };
|
||||
cmd.date = document.getElementById("curdate").value
|
||||
var str = JSON.stringify(cmd);
|
||||
console.log("Json Tx",str);
|
||||
Socket.send(str);
|
||||
|
||||
}
|
||||
|
||||
// Date Picker Script
|
||||
|
||||
window.onload = function() {
|
||||
// IE11 forEach, padStart
|
||||
(function () {
|
||||
if ( typeof NodeList.prototype.forEach === "function" ) return false;
|
||||
NodeList.prototype.forEach = Array.prototype.forEach;
|
||||
})();
|
||||
|
||||
(function () {
|
||||
if ( typeof String.prototype.padStart === "function" ) return false;
|
||||
String.prototype.padStart = function padStart(length, value) {
|
||||
var res = String(this);
|
||||
if(length >= (value.length + this.length)) {
|
||||
for (var i = 0; i <= (length - (value.length + this.length)); i++) {
|
||||
res = value + res;
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
})();
|
||||
|
||||
var datePickerTpl = '<div class="yearMonth"><a class="previous">‹</a><span class="year">{y}</span>-<span class="month">{m}</span><a class="next">›</a></div><div class="days"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>10</a><a>11</a><a>12</a><a>13</a><a>14</a><a>15</a><a>16</a><a>17</a><a>18</a><a>19</a><a>20</a><a>21</a><a>22</a><a>23</a><a>24</a><a>25</a><a>26</a><a>27</a><a>28</a><a>29</a><a>30</a><a>31</a>';
|
||||
|
||||
function daysInMonth(month, year) {
|
||||
return new Date(year, month, 0).getDate();
|
||||
}
|
||||
|
||||
function hideInvalidDays(dp, month, year){
|
||||
dp.querySelectorAll(".days a").forEach(function(a){
|
||||
a.style.display = "inline-block";
|
||||
});
|
||||
var days = daysInMonth(month, year);
|
||||
var invalidCount = 31 - days;
|
||||
if(invalidCount > 0) {
|
||||
for (var j = 1; j <= invalidCount; j++) {
|
||||
dp.querySelector(".days a:nth-last-child(" + j + ")").style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function clearSelected(dp) {
|
||||
dp.querySelectorAll(".days a.selected").forEach(function(e){
|
||||
e.classList.remove("selected");
|
||||
});
|
||||
}
|
||||
|
||||
function setMonthYear(dp, month, year, input) {
|
||||
dp.querySelector(".month").textContent = String(month).padStart(2, "0");
|
||||
dp.querySelector(".year").textContent = year;
|
||||
clearSelected(dp);
|
||||
hideInvalidDays(dp, month, year);
|
||||
if(input && input.value) {
|
||||
var date = input.value.split("-");
|
||||
var curYear = parseInt(dp.querySelector(".year").textContent), curMonth = parseInt(dp.querySelector(".month").textContent);
|
||||
if(date[0] == curYear && date[1] == curMonth) {
|
||||
dp.querySelector(".days a:nth-child(" + parseInt(date[2]) + ")").className = "selected";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll(".datepicker").forEach(function(input) {
|
||||
input.setAttribute("readonly", "true");
|
||||
var dp = document.createElement("div");
|
||||
dp.className = "contextmenu";
|
||||
dp.style.left = input.offsetLeft + "px";
|
||||
dp.style.top = input.offsetTop + input.offsetHeight + "px";
|
||||
var now = new Date();
|
||||
dp.insertAdjacentHTML('beforeEnd', datePickerTpl.replace("{m}", String(now.getMonth() + 1).padStart(2, "0")).replace("{y}", now.getFullYear()));
|
||||
hideInvalidDays(dp, now.getMonth() + 1, now.getFullYear());
|
||||
|
||||
dp.querySelector("a.previous").addEventListener("click", function(e){
|
||||
var curYear = parseInt(dp.querySelector(".year").textContent), curMonth = parseInt(dp.querySelector(".month").textContent);
|
||||
var firstMonth = curMonth - 1 == 0;
|
||||
setMonthYear(dp, firstMonth ? 12 : curMonth - 1, firstMonth ? curYear - 1 : curYear, input);
|
||||
});
|
||||
|
||||
dp.querySelector("a.next").addEventListener("click", function(e){
|
||||
var curYear = parseInt(dp.querySelector(".year").textContent), curMonth = parseInt(dp.querySelector(".month").textContent);
|
||||
var lastMonth = curMonth + 1 == 13;
|
||||
setMonthYear(dp, lastMonth ? 1 : curMonth + 1, lastMonth ? curYear + 1 : curYear, input);
|
||||
});
|
||||
|
||||
dp.querySelectorAll(".days a").forEach(function(a){
|
||||
a.addEventListener("click", function(e) {
|
||||
clearSelected(dp);
|
||||
e.target.className = "selected";
|
||||
input.value = dp.querySelector(".year").textContent + "-" + dp.querySelector(".month").textContent + "-" + this.text.padStart(2, "0");
|
||||
});
|
||||
});
|
||||
|
||||
input.parentNode.insertBefore(dp, input.nextSibling);
|
||||
|
||||
input.addEventListener("focus", function(){
|
||||
if (input.value){
|
||||
var date = input.value.split("-");
|
||||
setMonthYear(dp, date[1], date[0]);
|
||||
dp.querySelector(".days a:nth-child(" + parseInt(date[2]) + ")").className = "selected";
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
// End date Picker Script
|
||||
|
||||
var Socket;
|
||||
function init() {
|
||||
Socket = new WebSocket('ws://' + window.location.hostname + ':81/');
|
||||
|
@ -33,7 +163,7 @@ const char* MAIN_PAGE PROGMEM = R"=====(
|
|||
break;
|
||||
case "DesiredTemp":
|
||||
console.log("JSON Rx: DesiredTemp:", heater.DesiredTemp);
|
||||
document.getElementById("slide").value = heater.DesiredTemp;
|
||||
document.getElementById("slide") = heater.DesiredTemp;
|
||||
document.getElementById("sliderAmount").innerHTML = heater.DesiredTemp;
|
||||
break;
|
||||
case "ErrorState":
|
||||
|
@ -43,7 +173,6 @@ const char* MAIN_PAGE PROGMEM = R"=====(
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
function funcNavLinks() {
|
||||
var x = document.getElementById("myLinks");
|
||||
if (x.style.display === "block") {
|
||||
|
@ -53,12 +182,36 @@ function funcNavLinks() {
|
|||
}
|
||||
}
|
||||
|
||||
function checkTime(i)
|
||||
{
|
||||
if (i<10)
|
||||
{
|
||||
i="0" + i;
|
||||
}
|
||||
return i;
|
||||
}
|
||||
|
||||
function funcdispSettings() {
|
||||
document.getElementById("Settings").style.display = "block";
|
||||
currentTime = new Date();
|
||||
var h = currentTime.getHours();
|
||||
var m = currentTime.getMinutes();
|
||||
var s = currentTime.getSeconds();
|
||||
// add a zero in front of numbers<10
|
||||
h = checkTime(h);
|
||||
m = checkTime(m);
|
||||
s = checkTime(s);
|
||||
|
||||
console.log("Hours",h);
|
||||
console.log("Minutes",m);
|
||||
console.log("Seconds",s);
|
||||
document.getElementById("curtime").value = h + ":" + m + ":" + s;
|
||||
document.getElementById("curdate").value = currentTime.today()
|
||||
document.getElementById("Home").style.display = "none";
|
||||
document.getElementById("Advanced").style.display = "none";
|
||||
document.getElementById("myLinks").style.display ="none";
|
||||
}
|
||||
|
||||
function funcdispHome(){
|
||||
document.getElementById("Settings").style.display = "none";
|
||||
document.getElementById("Home").style.display = "block";
|
||||
|
@ -75,8 +228,6 @@ function funcdispAdvanced(){
|
|||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Function to check the power on/off slide switch.
|
||||
function OnOffCheck(){
|
||||
|
||||
|
@ -112,11 +263,13 @@ function OnOffCheck(){
|
|||
}
|
||||
}
|
||||
|
||||
function onSlide(newVal) {
|
||||
document.getElementById("sliderAmount").innerHTML = newVal;
|
||||
function onSlide(newVal, JSONKey) {
|
||||
//elementid must equal the JSON name for each setting
|
||||
|
||||
const cmd = { DesiredTemp: 0 };
|
||||
cmd.DesiredTemp = newVal;
|
||||
document.getElementById(JSONKey).innerHTML = newVal;
|
||||
|
||||
const cmd = { JSONKey: 0 };
|
||||
cmd.JSONKey = newVal;
|
||||
var str = JSON.stringify(cmd);
|
||||
|
||||
console.log("JSON Tx:", str);
|
||||
|
@ -132,12 +285,13 @@ function onSlide(newVal) {
|
|||
// Socket.send("[CMD]degC" + document.getElementById("slide").value);
|
||||
// console.log("Sending desired temp", document.getElementById("slide").value, this.value);
|
||||
// }
|
||||
</script>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
</script>
|
||||
|
||||
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">
|
||||
<style>
|
||||
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
@ -323,27 +477,47 @@ MainPage {
|
|||
<div>
|
||||
<h2>Temperature Control</h2>
|
||||
</div>
|
||||
<input type="range" id="slide" min="8" max="35" step="1" value="22" oninput="onSlide(this.value)" onchange="onSlide(this.value)">
|
||||
<input type="range" id="slide" min="8" max="35" step="1" value="22" oninput="onSlide(this.value, 'DesiredTemp')" onchange="onSlide(this.value, 'DesiredTemp')">
|
||||
<div>
|
||||
<b>Desired Temp: </b>
|
||||
<span id="sliderAmount"></span>
|
||||
<div>
|
||||
</div>
|
||||
<b>Current Temp: </b><span id="TempCurrent">
|
||||
<b>Current Temp: </b><span id="DesiredTemp">
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<div id="Advanced" class="AdvSettings">
|
||||
Place holder for ADVANCED SETTINGS page
|
||||
<div id="Advanced">
|
||||
Advanced Settings
|
||||
<b>Pump Min</b>
|
||||
<input type="range" id="PumpMinSlide" min=".5" max="35" step=".5" value="22" oninput="onSlide(this.value, 'PumpMin')" onchange="onSlide(this.value, 'PumpMin')"> <span id="PumpMin"></span>
|
||||
<div>
|
||||
<b>Pump Max</b>
|
||||
<input type="range" id="PumpMaxSlide" min=".5" max="5" step=".5" value="22" oninput="onSlide(this.value, 'PumpMax')" onchange="onSlide(this.value, 'PumpMax')"> <span id="PumpMax"></span>
|
||||
</div>
|
||||
<div>
|
||||
<b>Fan Min</b>
|
||||
<input type="range" id="FanMinSlide" min="1000" max="5000" step="50" value="22" oninput="onSlide(this.value, 'FanMin')" onchange="onSlide(this.value, 'FanMin')"> <span id="FanMin"></span>
|
||||
</div>
|
||||
<div>
|
||||
<b>Fan Max</b>
|
||||
<input type="range" id="FanMaxSlide" min="1000" max="5000" step="50" value="22" oninput="onSlide(this.value, 'FanMax')" onchange="onSlide(this.value, 'FanMax')"> <span id="FanMax"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<Div ID="Settings">
|
||||
Place hold for SETTINGS page
|
||||
<Div id="Settings">
|
||||
Current Date:<br>
|
||||
<input type="text" id="curdate"><input type="button" Value="Set Date" onclick="setcurrentdate()">
|
||||
|
||||
<br>
|
||||
Current Time (24 Hour Format):<br>
|
||||
<input type="text" id="curtime"> <input type="button" Value="Set Time" onclick="setcurrenttime()">
|
||||
|
||||
<hr></hr>
|
||||
<br><br>
|
||||
</Div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
)=====";
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue