Crash_Override/ESP32_ChinaDieselHeater_Control
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added date picker and time setup input boxes

Browse source 
Added two start and stop timers - No code attached - Simply UI at this stage
This commit is contained in:
Jimmy C 2018-12-23 02:27:17 +11:00
parent 5d2f42acba
commit d378d902ac
1 changed files with 279 additions and 274 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

553
Arduino/BTCDieselHeater/src/WiFi/mainpage.cpp
View file

@ -25,405 +25,415 @@
const char* MAIN_PAGE PROGMEM = R"=====( const char* MAIN_PAGE PROGMEM = R"=====(
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<link rel="icon" href="data;,"> <link rel="icon" href="data;,">
<script> <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/');
Socket.onmessage = function(event){ Socket.onmessage = function(event){
var heater = JSON.parse(event.data); var heater = JSON.parse(event.data);
var key; var key;
for(key in heater) { for(key in heater) {
console.log("JSON decode:", key, heater[key]); console.log("JSON decode:", key, heater[key]);
switch(key) { switch(key) {
case "RunState": case "RunState":
if (heater[key] == 0) { if (heater[key] == 0) {
document.getElementById("myonoffswitch").checked = false; document.getElementById("myonoffswitch").checked = false;
document.getElementById("myonoffswitch").style = "block"; document.getElementById("myonoffswitch").style = "block";
document.getElementById("onoffswitch").style.visibility = "visible"; document.getElementById("onoffswitch").style.visibility = "visible";
} else if(heater[key] >= 7) { } else if(heater[key] >= 7) {
document.getElementById("myonoffswitch").checked = false; document.getElementById("myonoffswitch").checked = false;
document.getElementById("myonoffswitch").style = "none"; document.getElementById("myonoffswitch").style = "none";
document.getElementById("onoffswitch").style.visibility = "hidden"; document.getElementById("onoffswitch").style.visibility = "hidden";
} else { } else {
document.getElementById("myonoffswitch").checked = true; document.getElementById("myonoffswitch").checked = true;
document.getElementById("myonoffswitch").style = "block"; document.getElementById("myonoffswitch").style = "block";
document.getElementById("onoffswitch").style.visibility = "visible"; document.getElementById("onoffswitch").style.visibility = "visible";
} }
document.getElementById("RunString").style.visibility = (heater[key] == 5 || heater[key] == 0) ? "hidden" : "visible"; document.getElementById("RunString").style.visibility = (heater[key] == 5 || heater[key] == 0) ? "hidden" : "visible";
break; break;
case "ErrorString": case "ErrorString":
case "PumpFixed": case "PumpFixed":
case "RunString": case "RunString":
case "TempCurrent": case "TempCurrent":
document.getElementById(key).innerHTML = heater[key]; document.getElementById(key).innerHTML = heater[key];
break; break;
case "TempDesired": case "TempDesired":
document.getElementById("slide").value = heater[key]; document.getElementById("slide").value = heater[key];
document.getElementById(key).innerHTML = heater[key]; document.getElementById(key).innerHTML = heater[key];
break; break;
case "ErrorState": case "ErrorState":
document.getElementById("ErrorDiv").hidden = heater[key] <= 1; document.getElementById("ErrorDiv").hidden = heater[key] <= 1;
break; break;
case "TempBody": case "TempBody":
//The threshold levels for each bar to come on are: 21°C, 41°C, 61°C, 81°C, 101°C, 121°C //The threshold levels for each bar to come on are: 21°C, 41°C, 61°C, 81°C, 101°C, 121°C
if(heater[key] > 120){ if(heater[key] > 120){
document.getElementById("TopBar").className = "active121"; document.getElementById("TopBar").className = "active121";
} }
else if(heater[key] > 100){ else if(heater[key] > 100){
document.getElementById("TopBar").className = "active101"; document.getElementById("TopBar").className = "active101";
} }
else if(heater[key] > 80){ else if(heater[key] > 80){
document.getElementById("TopBar").className = "active81"; document.getElementById("TopBar").className = "active81";
} }
else if(heater[key] > 60){ else if(heater[key] > 60){
document.getElementById("TopBar").className = "active61"; document.getElementById("TopBar").className = "active61";
} }
else if(heater[key] > 40){ else if(heater[key] > 40){
document.getElementById("TopBar").className = "active41"; document.getElementById("TopBar").className = "active41";
} }
else if(heater[key] > 20){ else if(heater[key] > 20){
document.getElementById("TopBar").className = "active21"; document.getElementById("TopBar").className = "active21";
} }
else { else {
document.getElementById("TopBar").className = "active0"; document.getElementById("TopBar").className = "active0";
} }
break; break;
case "Thermostat": case "Thermostat":
if(heater[key] != 0) { if(heater[key] != 0) {
document.getElementById("FixedDiv").hidden = true; document.getElementById("FixedDiv").hidden = true;
document.getElementById("ThermoDiv").hidden = false; document.getElementById("ThermoDiv").hidden = false;
} }
else { else {
document.getElementById("FixedDiv").hidden = false; document.getElementById("FixedDiv").hidden = false;
document.getElementById("ThermoDiv").hidden = true; document.getElementById("ThermoDiv").hidden = true;
} }
break; break;
} }
}
} }
} }
}
function setSchedule(){ function setSchedule(){
//clearly need to add some code here to send the Json formatted data to the esp //clearly need to add some code here to send the Json formatted data to the esp
console.log("Set Schedule Button Press") console.log("Set Schedule Button Press")
} }
Date.prototype.toDateInputValue = (function() {
var local = new Date(this);
local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
return local.toJSON().slice(0,10);
});
function sendJSONobject(obj){ function sendJSONobject(obj){
var str = JSON.stringify(obj); var str = JSON.stringify(obj);
console.log("JSON Tx:", str); console.log("JSON Tx:", str);
Socket.send(str); Socket.send(str);
} }
// Scripts for date handling // 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 // Scripts for setting date and time
function setcurrenttime(){ function setcurrenttime(){
var cmd = {}; var cmd = {};
cmd.Time = document.getElementById("curtime").value; cmd.Time = document.getElementById("curtime").value;
sendJSONobject(cmd); sendJSONobject(cmd);
} }
function setcurrentdate(){ function setcurrentdate(){
var cmd = {}; var cmd = {};
cmd.Date = document.getElementById("curdate").value; cmd.Date = document.getElementById("curdate").value;
sendJSONobject(cmd); sendJSONobject(cmd);
} }
function funcNavLinks() { function funcNavLinks() {
var x = document.getElementById("myLinks"); var x = document.getElementById("myLinks");
if (x.style.display === "block") { if (x.style.display === "block") {
x.style.display = "none"; x.style.display = "none";
} else { } else {
x.style.display = "block"; x.style.display = "block";
} }
} }
function checkTime(i) function checkTime(i)
{ {
if (i<10) if (i<10)
{ {
i="0" + i; i="0" + i;
} }
return i; return i;
} }
function funcdispSettings() { function funcdispSettings() {
document.getElementById("Settings").style.display = "block"; document.getElementById("Settings").style.display = "block";
currentTime = new Date(); currentTime = new Date();
var h = currentTime.getHours(); var h = currentTime.getHours();
var m = currentTime.getMinutes(); var m = currentTime.getMinutes();
var s = currentTime.getSeconds(); var s = currentTime.getSeconds();
// add a zero in front of numbers<10 // add a zero in front of numbers<10
h = checkTime(h); h = checkTime(h);
m = checkTime(m); m = checkTime(m);
s = checkTime(s); s = checkTime(s);
console.log("Hours",h); console.log("Hours",h);
console.log("Minutes",m); console.log("Minutes",m);
console.log("Seconds",s); console.log("Seconds",s);
document.getElementById("curtime").value = h + ":" + m + ":" + s; document.getElementById("curtime").value = h + ":" + m + ":" + s;
document.getElementById("curdate").value = currentTime.today() document.getElementById("curdate").value = currentTime.today()
document.getElementById("Home").style.display = "none"; document.getElementById("Home").style.display = "none";
document.getElementById("Advanced").style.display = "none"; document.getElementById("Advanced").style.display = "none";
document.getElementById("myLinks").style.display ="none"; document.getElementById("myLinks").style.display ="none";
document.getElementById('curdate').valueAsDate = new Date();
} }
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";
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 funcdispAdvanced(){ function funcdispAdvanced(){
document.getElementById("Settings").style.display = "none"; document.getElementById("Settings").style.display = "none";
document.getElementById("Home").style.display = "none"; document.getElementById("Home").style.display = "none";
document.getElementById("Advanced").style.display = "block"; document.getElementById("Advanced").style.display = "block";
document.getElementById("myLinks").style.display ="none"; document.getElementById("myLinks").style.display ="none";
} }
// Function to check the power on/off slide switch. // Function to check the power on/off slide switch.
function OnOffCheck(){ function OnOffCheck(){
// Get the checkbox status and place in the checkbox variable // Get the checkbox status and place in the checkbox variable
var checkBox = document.getElementById("myonoffswitch"); var checkBox = document.getElementById("myonoffswitch");
// Send a message to the Devel console of web browser for debugging // Send a message to the Devel console of web browser for debugging
console.log("OnOffCheck:", document.getElementById("myonoffswitch").checked); console.log("OnOffCheck:", document.getElementById("myonoffswitch").checked);
// If the checkbox is checked, display the output text // If the checkbox is checked, display the output text
// We also need to send a message back into the esp as we cannot directly run Arduino Functions from within the javascript // We also need to send a message back into the esp as we cannot directly run Arduino Functions from within the javascript
var cmd = {}; var cmd = {};
if (checkBox.checked){ if (checkBox.checked){
//Insert Code Here To Turn On The Heater //Insert Code Here To Turn On The Heater
console.log("Turning On Heater"); console.log("Turning On Heater");
cmd.RunState = 1; cmd.RunState = 1;
sendJSONobject(cmd); sendJSONobject(cmd);
} }
else{ else{
//Insert Code Here To Turn Off The Heater //Insert Code Here To Turn Off The Heater
console.log("Turning Off Heater"); console.log("Turning Off Heater");
cmd.RunState = 0; cmd.RunState = 0;
sendJSONobject(cmd); sendJSONobject(cmd);
} }
} }
function onSlide(newVal, JSONKey) { function onSlide(newVal, JSONKey) {
//elementid must equal the JSON name for each setting //elementid must equal the JSON name for each setting
document.getElementById(JSONKey).innerHTML = newVal; document.getElementById(JSONKey).innerHTML = newVal;
var cmd = {}; var cmd = {};
cmd[JSONKey] = newVal; // note: variable name needs [] cmd[JSONKey] = newVal; // note: variable name needs []
cmd.NVsave = 8861; // named variable DOESN'T !! cmd.NVsave = 8861; // named variable DOESN'T !!
sendJSONobject(cmd); sendJSONobject(cmd);
} }
</script> </script>
<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>
.throb_me { .throb_me {
animation: throbber 1s linear infinite; animation: throbber 1s linear infinite;
} }
@keyframes throbber { @keyframes throbber {
50% { 50% {
opacity: 0; opacity: 0;
} }
} }
.slider { .slider {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #ccc; background-color: #ccc;
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
} }
.slider:before { .slider:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 26px; height: 26px;
width: 26px; width: 26px;
left: 4px; left: 4px;
bottom: 4px; bottom: 4px;
background-color: white; background-color: white;
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
} }
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.onoffswitch { .onoffswitch {
position: relative; width: 90px; position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
} }
.onoffswitch-checkbox { .onoffswitch-checkbox {
display: none; display: none;
} }
.onoffswitch-label { .onoffswitch-label {
display: block; overflow: hidden; cursor: pointer; display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px; border: 2px solid #999999; border-radius: 20px;
} }
.onoffswitch-inner { .onoffswitch-inner {
display: block; width: 200%; margin-left: -100%; display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
} }
.onoffswitch-inner:before, .onoffswitch-inner:after { .onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box; box-sizing: border-box;
} }
.onoffswitch-inner:before { .onoffswitch-inner:before {
content: "ON"; content: "ON";
padding-left: 10px; padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF; background-color: #34A7C1; color: #FFFFFF;
} }
.onoffswitch-inner:after { .onoffswitch-inner:after {
content: "OFF"; content: "OFF";
padding-right: 10px; padding-right: 10px;
background-color: #EEEEEE; color: #999999; background-color: #EEEEEE; color: #999999;
text-align: right; text-align: right;
} }
.onoffswitch-switch { .onoffswitch-switch {
display: block; width: 18px; margin: 6px; display: block; width: 18px; margin: 6px;
background: #FFFFFF; background: #FFFFFF;
position: absolute; top: 0; bottom: 0; position: absolute; top: 0; bottom: 0;
right: 56px; right: 56px;
border: 2px solid #999999; border-radius: 20px; border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
} }
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0; margin-left: 0;
} }
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px; right: 0px;
} }
.mobile-container { .mobile-container {
margin: auto; margin: auto;
background-color: #555; background-color: #555;
height: 500px; height: 500px;
color: white; color: white;
border-radius: 10px; border-radius: 10px;
} }
.topnav { .topnav {
overflow: hidden; overflow: hidden;
background-color: #333; background-color: #333;
position: relative; position: relative;
} }
.topnav #myLinks { .topnav #myLinks {
display: none; display: none;
} }
.topnav a { .topnav a {
color: white; color: white;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
font-size: 17px; font-size: 17px;
display: block; display: block;
} }
.topnav a.icon { .topnav a.icon {
background: black; background: black;
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
} }
.topnav a:hover { .topnav a:hover {
background-color: #ddd; background-color: #ddd;
color: black; color: black;
} }
.active0 { .active0 {
background-color: #40ffff; background-color: #40ffff;
color: #000000; color: #000000;
} }
.active21 { .active21 {
background-color: #5f9ea0; background-color: #5f9ea0;
color: #ffffff; color: #ffffff;
} }
.active41 { .active41 {
background-color: #4CAF50; background-color: #4CAF50;
color: #ffffff; color: #ffffff;
} }
.active61 { .active61 {
background-color: #eeee00; background-color: #eeee00;
color: #000000; color: #000000;
} }
.active81 { .active81 {
background-color: #8b0000; background-color: #8b0000;
color: #ffffff; color: #ffffff;
} }
.active101 { .active101 {
background-color: #cd0000; background-color: #cd0000;
color: #ffffff; color: #ffffff;
} }
.active121 { .active121 {
background-color: #ff0000; background-color: #ff0000;
color: #ffffff; color: #ffffff;
} }
input:checked + .slider { input:checked + .slider {
background-color: #2196F3; background-color: #2196F3;
} }
input:focus + .slider { input:focus + .slider {
box-shadow: 0 0 1px #2196F3; box-shadow: 0 0 1px #2196F3;
} }
input:checked + .slider:before { input:checked + .slider:before {
-webkit-transform: translateX(26px); -webkit-transform: translateX(26px);
-ms-transform: translateX(26px); -ms-transform: translateX(26px);
transform: translateX(26px); transform: translateX(26px);
} }
.slider.round { .slider.round {
border-radius: 34px; border-radius: 34px;
} }
.slider.round:before { .slider.round:before {
border-radius: 50%; border-radius: 50%;
} }
MainPage { MainPage {
display: block display: block
} }
#Advanced { #Advanced {
display: none display: none
} }
#Settings { #Settings {
display: none display: none
} }
} }
@ -437,26 +447,26 @@ MainPage {
<!-- Top Navigation Menu --> <!-- Top Navigation Menu -->
<div class="topnav"> <div class="topnav">
<div id="TopBar" style="padding-left:30px"><a href="javascript:void(0);" onclick="funcdispHome()" >Chinese Diesel Heater Web Control</a></div> <div id="TopBar" style="padding-left:30px"><a href="javascript:void(0);" onclick="funcdispHome()" >Chinese Diesel Heater Web Control</a></div>
<div id="myLinks"> <div id="myLinks">
<a href="javascript:void(0);" onclick="funcdispHome()">Home</a> <a href="javascript:void(0);" onclick="funcdispHome()">Home</a>
<a href="javascript:void(0);" onclick="funcdispSettings()">Settings</a> <a href="javascript:void(0);" onclick="funcdispSettings()">Settings</a>
<a href="javascript:void(0);" onclick="funcdispAdvanced()">Advanced Settings</a> <a href="javascript:void(0);" onclick="funcdispAdvanced()">Advanced Settings</a>
</div> </div>
<a href="javascript:void(0);" class="icon" onclick="funcNavLinks()"> <a href="javascript:void(0);" class="icon" onclick="funcNavLinks()">
</i>= </i>=
</a> </a>
</div> </div>
<div style="padding-left:16px"> <div style="padding-left:16px">
<span class="MaingPage" id="Home"> <span class="MaingPage" id="Home">
<div><H2>Power Control</H2></div> <div><H2>Power Control</H2></div>
<div class="onoffswitch" id="onoffswitch"> <div class="onoffswitch" id="onoffswitch">
<input type="checkbox" onclick="OnOffCheck()" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" clicked> <input type="checkbox" onclick="OnOffCheck()" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" clicked>
<label class="onoffswitch-label" for="myonoffswitch"> <label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span> <span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span> <span class="onoffswitch-switch"></span>
</label> </label>
</div> </div>
<span class="throb_me" id="RunString" style="visibility:hidden"></span> <span class="throb_me" id="RunString" style="visibility:hidden"></span>
@ -500,22 +510,17 @@ Advanced Settings
<Div id="Settings"> <Div id="Settings">
Current Date:<br> Current Date:<br>
<input type="text" id="curdate"><input type="button" Value="Set Date" onclick="setcurrentdate()"> <input type="date" id="curdate"><input type="button" Value="Set Date" onclick="setcurrentdate()">
<br> <br>
Current Time (24 Hour Format):<br> Current Time (24 Hour Format):<br>
<input type="text" id="curtime"> <input type="button" Value="Set Time" onclick="setcurrenttime()"> <input type="time" id="curtime"> <input type="button" Value="Set Time" onclick="setcurrenttime()">
<hr></hr> <hr></hr>
<br><br> <br><br>
Mon:<input type="checkbox" border-radius="4px" name="Mon" value="Mon"> <input type="text" class="schedule" id="Mon"> <input type="text" id="curtime"> <br> Timer1: <input type="checkbox" border-radius="4px" name="Timer1" id="Timer1onoff"> <input type="text" class="schedule" id="Timer1Start"> <input type="text" id="Timer1End"> <br>
Tue:<input type="checkbox" border-radius="4px" name="Tue" value="Tue"> <input type="text" class="schedule" id="Tue"> <input type="text" id="curtime"><br> Timer2: <input type="checkbox" border-radius="4px" name="Tue"> <input type="text" class="schedule" id="Timer2Start"> <input type="text" id="Timer2End"><br>
Wed:<input type="checkbox" border-radius="4px" name="Wed" value="Wed"> <input type="text" class="schedule" id="Wed"> <input type="text" id="curtime"><br>
Thu:<input type="checkbox" border-radius="4px" name="Thu" value="Thu"> <input type="text" class="schedule" id="Thu" <input type="text" id="curtime"><br>
Fri:<input type="checkbox" border-radius="4px" name="Fri" value="Fri"> <input type="text" class="schedule" id="Fri"> <input type="text" id="curtime"><br>
Sat:<input type="checkbox" border-radius="4px" name="Sat" value="Sat"> <input type="text" class="schedule" id="Sat"> <input type="text" id="curtime"><br>
Sun:<input type="checkbox" border-radius="4px" name="Sun" value="Sun"> <input type="text" class="schedule" id="Sun"> <input type="text" id="curtime"><br>
<input type="button" Value="Save Schedule" onclick="setSchedule()"> <input type="button" Value="Save Schedule" onclick="setSchedule()">
</Div> </Div>
</body> </body>