Added reusable slider function - Now send the JSON keyname to update
Added AdvSettings finally Added 'r' to telnetspy to allow for restarting of esp via telnet
This commit is contained in:
parent
89a52403ca
commit
b7b15e8532
|
@ -919,6 +919,9 @@ void checkDebugCommands()
|
||||||
val++;
|
val++;
|
||||||
bSendVal = true;
|
bSendVal = true;
|
||||||
}
|
}
|
||||||
|
else if(rxVal == 'r') {
|
||||||
|
ESP.restart(); // reset the esp
|
||||||
|
}
|
||||||
else if(rxVal == '[') {
|
else if(rxVal == '[') {
|
||||||
val--;
|
val--;
|
||||||
bSendVal = true;
|
bSendVal = true;
|
||||||
|
|
|
@ -201,5 +201,9 @@ void interpretJsonCommand(char* pLine)
|
||||||
else if(strcmp("Thermostat", it->key) == 0) {
|
else if(strcmp("Thermostat", it->key) == 0) {
|
||||||
setThermostatMode(it->value.as<unsigned char>());
|
setThermostatMode(it->value.as<unsigned char>());
|
||||||
}
|
}
|
||||||
|
else if(strcmp("Date", it->key) == 0) {
|
||||||
|
}
|
||||||
|
else if(strcmp("Time", it->key) == 0) {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,10 +6,31 @@ const char* MAIN_PAGE PROGMEM = R"=====(
|
||||||
<head>
|
<head>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
// Scripts for date handling
|
||||||
Date.prototype.today = function () {
|
Date.prototype.today = function () {
|
||||||
return ((this.getDate() < 10)?"0":"") + this.getDate() +"/"+(((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) +"/"+ this.getFullYear();
|
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
|
// Date Picker Script
|
||||||
|
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
|
@ -114,10 +135,6 @@ window.onload = function() {
|
||||||
};
|
};
|
||||||
// End date Picker Script
|
// End date Picker Script
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var Socket;
|
var Socket;
|
||||||
function init() {
|
function init() {
|
||||||
Socket = new WebSocket('ws://' + window.location.hostname + ':81/');
|
Socket = new WebSocket('ws://' + window.location.hostname + ':81/');
|
||||||
|
@ -156,10 +173,6 @@ window.onload = function() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function funcNavLinks() {
|
function funcNavLinks() {
|
||||||
var x = document.getElementById("myLinks");
|
var x = document.getElementById("myLinks");
|
||||||
if (x.style.display === "block") {
|
if (x.style.display === "block") {
|
||||||
|
@ -198,6 +211,7 @@ function funcdispSettings() {
|
||||||
document.getElementById("Advanced").style.display = "none";
|
document.getElementById("Advanced").style.display = "none";
|
||||||
document.getElementById("myLinks").style.display ="none";
|
document.getElementById("myLinks").style.display ="none";
|
||||||
}
|
}
|
||||||
|
|
||||||
function funcdispHome(){
|
function funcdispHome(){
|
||||||
document.getElementById("Settings").style.display = "none";
|
document.getElementById("Settings").style.display = "none";
|
||||||
document.getElementById("Home").style.display = "block";
|
document.getElementById("Home").style.display = "block";
|
||||||
|
@ -214,8 +228,6 @@ function funcdispAdvanced(){
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Function to check the power on/off slide switch.
|
// Function to check the power on/off slide switch.
|
||||||
function OnOffCheck(){
|
function OnOffCheck(){
|
||||||
|
|
||||||
|
@ -251,11 +263,13 @@ function OnOffCheck(){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSlide(newVal) {
|
function onSlide(newVal, JSONKey) {
|
||||||
document.getElementById("sliderAmount").innerHTML = newVal;
|
//elementid must equal the JSON name for each setting
|
||||||
|
|
||||||
|
document.getElementById(JSONKey).innerHTML = newVal;
|
||||||
|
|
||||||
const cmd = { DesiredTemp: 0 };
|
const cmd = { JSONKey: 0 };
|
||||||
cmd.DesiredTemp = newVal;
|
cmd.JSONKey = newVal;
|
||||||
var str = JSON.stringify(cmd);
|
var str = JSON.stringify(cmd);
|
||||||
|
|
||||||
console.log("JSON Tx:", str);
|
console.log("JSON Tx:", str);
|
||||||
|
@ -278,41 +292,6 @@ function onSlide(newVal) {
|
||||||
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">
|
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
|
|
||||||
// Date Picker Styles
|
|
||||||
|
|
||||||
.contextmenu {
|
|
||||||
position: absolute;
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
width: 140px;
|
|
||||||
display: none;
|
|
||||||
background: #f6f6f6;
|
|
||||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
||||||
}
|
|
||||||
|
|
||||||
a.previous, a.next, .days a {
|
|
||||||
cursor: pointer;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
width: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected {
|
|
||||||
font-weight: bold;
|
|
||||||
background: #8a46ff;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
input.datepicker:focus + div.contextmenu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
input.datepicker:focus + div.contextmenu, div.contextmenu:hover {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
// End Date Picker Styles
|
|
||||||
|
|
||||||
.slider {
|
.slider {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -498,37 +477,45 @@ MainPage {
|
||||||
<div>
|
<div>
|
||||||
<h2>Temperature Control</h2>
|
<h2>Temperature Control</h2>
|
||||||
</div>
|
</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>
|
<div>
|
||||||
<b>Desired Temp: </b>
|
<b>Desired Temp: </b>
|
||||||
<span id="sliderAmount"></span>
|
<span id="sliderAmount"></span>
|
||||||
<div>
|
<div>
|
||||||
</div>
|
</div>
|
||||||
<b>Current Temp: </b><span id="TempCurrent">
|
<b>Current Temp: </b><span id="DesiredTemp">
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div id="Advanced" class="AdvSettings">
|
<div id="Advanced">
|
||||||
Place holder for ADVANCED SETTINGS page
|
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>
|
||||||
|
|
||||||
|
|
||||||
<Div ID="Settings">
|
<Div id="Settings">
|
||||||
Current Date:<br>
|
Current Date:<br>
|
||||||
<input type="text" id="curdate" value="00:00:00">
|
<input type="text" id="curdate"><input type="button" Value="Set Date" onclick="setcurrentdate()">
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
Current Time:<br>
|
Current Time (24 Hour Format):<br>
|
||||||
<input type="text" id="curtime" value=time>
|
<input type="text" id="curtime"> <input type="button" Value="Set Time" onclick="setcurrenttime()">
|
||||||
|
|
||||||
<input type="text" class="datepicker">
|
<hr></hr>
|
||||||
|
<br><br>
|
||||||
<hr></hr>
|
|
||||||
Settings will go here for automatic mode schedule
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<input type="submit" value="Submit" onload="funcgettime()" action="SendSettings()">
|
|
||||||
|
|
||||||
</Div>
|
</Div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in a new issue