Merge remote-tracking branch 'remotes/origin/JCWebColorChangeBar'
Resolved Conflicts in : Arduino/BTCDieselHeater/BTCDieselHeater.ino Arduino/BTCDieselHeater/src/WiFi/mainpage.cpp
This commit is contained in:
rljonesau
commit
6a3e57ca11
|
|
@ -133,7 +133,7 @@ void checkDisplayUpdate();
|
|||
void checkDebugCommands();
|
||||
|
||||
// DS18B20 temperature sensor support
|
||||
OneWire ds(DS18B20_Pin); // on pin 5 (a 4.7K resistor is necessary)
|
||||
OneWire ds(15); // on pin 5 (a 4.7K resistor is necessary)
|
||||
DallasTemperature TempSensor(&ds);
|
||||
long lastTemperatureTime; // used to moderate DS18B20 access
|
||||
float fFilteredTemperature = -100; // -100: force direct update uopn first pass
|
||||
|
|
@ -233,13 +233,27 @@ void parentKeyHandler(uint8_t event)
|
|||
ScreenManager.keyHandler(event); // call into the Screen Manager
|
||||
}
|
||||
|
||||
void setup() {
|
||||
// Added additional t
|
||||
|
||||
int numberOfDevices; // Number of temperature devices found
|
||||
DeviceAddress tempDeviceAddress;
|
||||
|
||||
void printAddress(DeviceAddress deviceAddress)
|
||||
{
|
||||
for (uint8_t i = 0; i < 8; i++)
|
||||
{
|
||||
if (deviceAddress[i] < 16) DebugPort.print("0");
|
||||
DebugPort.print(deviceAddress[i], HEX);
|
||||
}
|
||||
}
|
||||
void setup() {
|
||||
TempSensor.begin();
|
||||
DebugPort.print("Temperature for the device 1 (index 0) is: ");
|
||||
DebugPort.println(TempSensor.getTempCByIndex(0));
|
||||
// initialise TelnetSpy (port 23) as well as Serial to 115200
|
||||
// Serial is the usual USB connection to a PC
|
||||
// DO THIS BEFORE WE TRY AND SEND DEBUG INFO!
|
||||
|
||||
TempSensor.begin();
|
||||
DebugPort.setWelcomeMsg("*************************************************\r\n"
|
||||
"* Connected to BTC heater controller debug port *\r\n"
|
||||
"*************************************************\r\n");
|
||||
|
|
@ -257,8 +271,45 @@ void setup() {
|
|||
Clock.begin();
|
||||
|
||||
// initialise DS18B20 temperature sensor(s)
|
||||
TempSensor.setWaitForConversion(false);
|
||||
TempSensor.requestTemperatures();
|
||||
// Grab a count of devices on the wire
|
||||
numberOfDevices = TempSensor.getDeviceCount();
|
||||
|
||||
// locate devices on the bus
|
||||
DebugPort.print("Locating devices...");
|
||||
|
||||
DebugPort.print("Found ");
|
||||
DebugPort.print(numberOfDevices, DEC);
|
||||
DebugPort.println(" devices.");
|
||||
|
||||
// report parasite power requirements
|
||||
DebugPort.print("Parasite power is: ");
|
||||
if (TempSensor.isParasitePowerMode()) Serial.println("ON");
|
||||
else DebugPort.println("OFF");
|
||||
|
||||
// Loop through each device, print out address
|
||||
for(int i=0;i<numberOfDevices; i++)
|
||||
{
|
||||
// Search the wire for address
|
||||
if(TempSensor.getAddress(tempDeviceAddress, i))
|
||||
{
|
||||
DebugPort.print("Found device ");
|
||||
DebugPort.print(i, DEC);
|
||||
DebugPort.print(" with address: ");
|
||||
printAddress(tempDeviceAddress);
|
||||
DebugPort.println();
|
||||
|
||||
|
||||
DebugPort.print("Resolution actually set to: ");
|
||||
DebugPort.print(TempSensor.getResolution(tempDeviceAddress), DEC);
|
||||
DebugPort.println();
|
||||
}else{
|
||||
DebugPort.print("Found ghost device at ");
|
||||
DebugPort.print(i, DEC);
|
||||
DebugPort.print(" but could not detect address. Check power and cabling");
|
||||
}
|
||||
}
|
||||
// TempSensor.setWaitForConversion(false);
|
||||
// TempSensor.requestTemperatures();
|
||||
lastTemperatureTime = millis();
|
||||
lastAnimationTime = millis();
|
||||
|
||||
|
|
@ -267,7 +318,7 @@ void setup() {
|
|||
#if USE_WIFI == 1
|
||||
|
||||
initWifi(WiFi_TriggerPin, FAILEDSSID, FAILEDPASSWORD);
|
||||
#if USE_OTA==1
|
||||
#if USE_OTA == 1
|
||||
initOTA();
|
||||
#endif // USE_OTA
|
||||
#if USE_WEBSERVER == 1
|
||||
|
|
@ -431,7 +482,6 @@ void loop()
|
|||
// Skip state machine immediately to BTC_Tx, sending our own settings.
|
||||
bHasHtrData = false;
|
||||
bHasOEMController = false;
|
||||
bHasHtrData = false;
|
||||
bool isBTCmaster = true;
|
||||
TxManage.PrepareFrame(DefaultBTCParams, isBTCmaster); // use our parameters, and mix in NV storage values
|
||||
TxManage.Start(timenow);
|
||||
|
|
@ -644,7 +694,7 @@ void loop()
|
|||
// synchronised with serial reception as interrupts do get disabled in the OneWire library
|
||||
tDelta = timenow - lastTemperatureTime;
|
||||
if(tDelta > TEMPERATURE_INTERVAL) { // maintain a minimum holdoff period
|
||||
lastTemperatureTime += TEMPERATURE_INTERVAL; // reset time to observe temeprature
|
||||
lastTemperatureTime += TEMPERATURE_INTERVAL; // reset time to observe temeprature
|
||||
fTemperature = TempSensor.getTempCByIndex(0); // read sensor
|
||||
// DebugPort.print("DS18B20 = "); DebugPort.println(fTemperature);
|
||||
// initialise filtered temperature upon very first pass
|
||||
|
|
@ -664,7 +714,11 @@ void loop()
|
|||
fFilteredTemperature = -100;
|
||||
}
|
||||
DefaultBTCParams.setTemperature_Actual((unsigned char)(fFilteredTemperature + 0.5)); // update [BTC] frame to send
|
||||
// Added DISABLE INTERRUPTS to test for parasitic fix.
|
||||
portDISABLE_INTERRUPTS();
|
||||
TempSensor.requestTemperatures(); // prep sensor for future reading
|
||||
portENABLE_INTERRUPTS();
|
||||
|
||||
ScreenManager.reqUpdate();
|
||||
}
|
||||
updateJSONclients(bReportJSONData);
|
||||
|
|
|
|||
|
|
@ -25,444 +25,354 @@
|
|||
const char* MAIN_PAGE PROGMEM = R"=====(
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="icon" href="data;,">
|
||||
<script>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="icon" href="data;,">
|
||||
<script>
|
||||
|
||||
var Socket;
|
||||
function init() {
|
||||
Socket = new WebSocket('ws://' + window.location.hostname + ':81/');
|
||||
|
||||
Socket.onmessage = function(event){
|
||||
var heater = JSON.parse(event.data);
|
||||
var key;
|
||||
for(key in heater) {
|
||||
var Socket;
|
||||
function init() {
|
||||
Socket = new WebSocket('ws://' + window.location.hostname + ':81/');
|
||||
|
||||
Socket.onmessage = function(event){
|
||||
var heater = JSON.parse(event.data);
|
||||
var key;
|
||||
for(key in heater) {
|
||||
console.log("JSON decode:", key, heater[key]);
|
||||
switch(key) {
|
||||
case "RunState":
|
||||
if (heater[key] == 0) {
|
||||
document.getElementById("myonoffswitch").checked = false;
|
||||
document.getElementById("myonoffswitch").style = "block";
|
||||
document.getElementById("onoffswitch").style.visibility = "visible";
|
||||
} else if(heater[key] >= 7) {
|
||||
document.getElementById("myonoffswitch").checked = false;
|
||||
document.getElementById("myonoffswitch").style = "none";
|
||||
document.getElementById("onoffswitch").style.visibility = "hidden";
|
||||
} else {
|
||||
document.getElementById("myonoffswitch").checked = true;
|
||||
document.getElementById("myonoffswitch").style = "block";
|
||||
document.getElementById("onoffswitch").style.visibility = "visible";
|
||||
}
|
||||
document.getElementById("RunString").style.visibility = (heater[key] == 5 || heater[key] == 0) ? "hidden" : "visible";
|
||||
break;
|
||||
case "ErrorString":
|
||||
case "PumpFixed":
|
||||
case "RunString":
|
||||
case "TempCurrent":
|
||||
document.getElementById(key).innerHTML = heater[key];
|
||||
break;
|
||||
case "TempDesired":
|
||||
document.getElementById("slide").value = heater[key];
|
||||
document.getElementById(key).innerHTML = heater[key];
|
||||
break;
|
||||
case "ErrorState":
|
||||
document.getElementById("ErrorDiv").hidden = heater[key] <= 1;
|
||||
break;
|
||||
case "TempBody":
|
||||
//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){
|
||||
document.getElementById("TopBar").className = "active121";
|
||||
}
|
||||
else if(heater[key] > 100){
|
||||
document.getElementById("TopBar").className = "active101";
|
||||
}
|
||||
else if(heater[key] > 80){
|
||||
document.getElementById("TopBar").className = "active81";
|
||||
}
|
||||
else if(heater[key] > 60){
|
||||
document.getElementById("TopBar").className = "active61";
|
||||
}
|
||||
else if(heater[key] > 40){
|
||||
document.getElementById("TopBar").className = "active41";
|
||||
}
|
||||
else if(heater[key] > 20){
|
||||
document.getElementById("TopBar").className = "active21";
|
||||
}
|
||||
else {
|
||||
document.getElementById("TopBar").className = "active0";
|
||||
}
|
||||
break;
|
||||
case "Thermostat":
|
||||
if(heater[key] != 0) {
|
||||
document.getElementById("FixedDiv").hidden = true;
|
||||
document.getElementById("ThermoDiv").hidden = false;
|
||||
}
|
||||
else {
|
||||
document.getElementById("FixedDiv").hidden = false;
|
||||
document.getElementById("ThermoDiv").hidden = true;
|
||||
}
|
||||
break;
|
||||
case "RunState":
|
||||
if (heater[key] == 0) {
|
||||
document.getElementById("myonoffswitch").checked = false;
|
||||
document.getElementById("myonoffswitch").style = "block";
|
||||
document.getElementById("onoffswitch").style.visibility = "visible";
|
||||
} else if(heater[key] >= 7) {
|
||||
document.getElementById("myonoffswitch").checked = false;
|
||||
document.getElementById("myonoffswitch").style = "none";
|
||||
document.getElementById("onoffswitch").style.visibility = "hidden";
|
||||
} else {
|
||||
document.getElementById("myonoffswitch").checked = true;
|
||||
document.getElementById("myonoffswitch").style = "block";
|
||||
document.getElementById("onoffswitch").style.visibility = "visible";
|
||||
}
|
||||
document.getElementById("RunString").style.visibility = (heater[key] == 5 || heater[key] == 0) ? "hidden" : "visible";
|
||||
break;
|
||||
case "ErrorString":
|
||||
case "PumpFixed":
|
||||
case "RunString":
|
||||
case "TempCurrent":
|
||||
document.getElementById(key).innerHTML = heater[key];
|
||||
break;
|
||||
case "TempDesired":
|
||||
document.getElementById("slide").value = heater[key];
|
||||
document.getElementById(key).innerHTML = heater[key];
|
||||
break;
|
||||
case "ErrorState":
|
||||
document.getElementById("ErrorDiv").hidden = heater[key] <= 1;
|
||||
break;
|
||||
case "TempBody":
|
||||
//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){
|
||||
document.getElementById("TopBar").className = "active121";
|
||||
}
|
||||
else if(heater[key] > 100){
|
||||
document.getElementById("TopBar").className = "active101";
|
||||
}
|
||||
else if(heater[key] > 80){
|
||||
document.getElementById("TopBar").className = "active81";
|
||||
}
|
||||
else if(heater[key] > 60){
|
||||
document.getElementById("TopBar").className = "active61";
|
||||
}
|
||||
else if(heater[key] > 40){
|
||||
document.getElementById("TopBar").className = "active41";
|
||||
}
|
||||
else if(heater[key] > 20){
|
||||
document.getElementById("TopBar").className = "active21";
|
||||
}
|
||||
else {
|
||||
document.getElementById("TopBar").className = "active0";
|
||||
}
|
||||
break;
|
||||
case "Thermostat":
|
||||
if(heater[key] != 0) {
|
||||
document.getElementById("FixedDiv").hidden = true;
|
||||
document.getElementById("ThermoDiv").hidden = false;
|
||||
}
|
||||
else {
|
||||
document.getElementById("FixedDiv").hidden = false;
|
||||
document.getElementById("ThermoDiv").hidden = true;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setSchedule(){
|
||||
//clearly need to add some code here to send the Json formatted data to the esp
|
||||
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){
|
||||
var str = JSON.stringify(obj);
|
||||
console.log("JSON Tx:", str);
|
||||
Socket.send(str);
|
||||
var str = JSON.stringify(obj);
|
||||
console.log("JSON Tx:", str);
|
||||
Socket.send(str);
|
||||
}
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
// Scripts for setting date and time
|
||||
|
||||
function setcurrenttime(){
|
||||
var cmd = {};
|
||||
cmd.Time = document.getElementById("curtime").value;
|
||||
sendJSONobject(cmd);
|
||||
|
||||
|
||||
var cmd = {};
|
||||
cmd.Time = document.getElementById("curtime").value;
|
||||
sendJSONobject(cmd);
|
||||
|
||||
|
||||
}
|
||||
|
||||
function setcurrentdate(){
|
||||
var cmd = {};
|
||||
cmd.Date = document.getElementById("curdate").value;
|
||||
sendJSONobject(cmd);
|
||||
|
||||
var cmd = {};
|
||||
cmd.Date = document.getElementById("curdate").value;
|
||||
sendJSONobject(cmd);
|
||||
|
||||
}
|
||||
|
||||
// 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
|
||||
|
||||
function funcNavLinks() {
|
||||
var x = document.getElementById("myLinks");
|
||||
if (x.style.display === "block") {
|
||||
x.style.display = "none";
|
||||
} else {
|
||||
x.style.display = "block";
|
||||
}
|
||||
var x = document.getElementById("myLinks");
|
||||
if (x.style.display === "block") {
|
||||
x.style.display = "none";
|
||||
} else {
|
||||
x.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
function checkTime(i)
|
||||
{
|
||||
if (i<10)
|
||||
{
|
||||
i="0" + i;
|
||||
}
|
||||
return 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);
|
||||
|
||||
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";
|
||||
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";
|
||||
document.getElementById('curdate').valueAsDate = new Date();
|
||||
|
||||
|
||||
}
|
||||
|
||||
function funcdispHome(){
|
||||
document.getElementById("Settings").style.display = "none";
|
||||
document.getElementById("Home").style.display = "block";
|
||||
document.getElementById("Advanced").style.display = "none";
|
||||
document.getElementById("myLinks").style.display ="none";
|
||||
|
||||
document.getElementById("Advanced").style.display = "none";
|
||||
document.getElementById("myLinks").style.display ="none";
|
||||
|
||||
}
|
||||
|
||||
function funcdispAdvanced(){
|
||||
document.getElementById("Settings").style.display = "none";
|
||||
document.getElementById("Home").style.display = "none";
|
||||
document.getElementById("Advanced").style.display = "block";
|
||||
document.getElementById("myLinks").style.display ="none";
|
||||
|
||||
document.getElementById("Advanced").style.display = "block";
|
||||
document.getElementById("myLinks").style.display ="none";
|
||||
|
||||
}
|
||||
|
||||
// Function to check the power on/off slide switch.
|
||||
function OnOffCheck(){
|
||||
|
||||
// Get the checkbox status and place in the checkbox variable
|
||||
var checkBox = document.getElementById("myonoffswitch");
|
||||
|
||||
// Send a message to the Devel console of web browser for debugging
|
||||
console.log("OnOffCheck:", document.getElementById("myonoffswitch").checked);
|
||||
|
||||
// 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
|
||||
|
||||
var cmd = {};
|
||||
if (checkBox.checked){
|
||||
//Insert Code Here To Turn On The Heater
|
||||
console.log("Turning On Heater");
|
||||
|
||||
cmd.RunState = 1;
|
||||
sendJSONobject(cmd);
|
||||
}
|
||||
else{
|
||||
//Insert Code Here To Turn Off The Heater
|
||||
console.log("Turning Off Heater");
|
||||
|
||||
cmd.RunState = 0;
|
||||
sendJSONobject(cmd);
|
||||
}
|
||||
|
||||
// Get the checkbox status and place in the checkbox variable
|
||||
var checkBox = document.getElementById("myonoffswitch");
|
||||
|
||||
// Send a message to the Devel console of web browser for debugging
|
||||
console.log("OnOffCheck:", document.getElementById("myonoffswitch").checked);
|
||||
|
||||
// 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
|
||||
|
||||
var cmd = {};
|
||||
if (checkBox.checked){
|
||||
//Insert Code Here To Turn On The Heater
|
||||
console.log("Turning On Heater");
|
||||
|
||||
cmd.RunState = 1;
|
||||
sendJSONobject(cmd);
|
||||
}
|
||||
else{
|
||||
//Insert Code Here To Turn Off The Heater
|
||||
console.log("Turning Off Heater");
|
||||
|
||||
cmd.RunState = 0;
|
||||
sendJSONobject(cmd);
|
||||
}
|
||||
}
|
||||
|
||||
function onSlide(newVal, JSONKey) {
|
||||
//elementid must equal the JSON name for each setting
|
||||
|
||||
document.getElementById(JSONKey).innerHTML = newVal;
|
||||
|
||||
var cmd = {};
|
||||
cmd[JSONKey] = newVal; // note: variable name needs []
|
||||
cmd.NVsave = 8861; // named variable DOESN'T !!
|
||||
sendJSONobject(cmd);
|
||||
//elementid must equal the JSON name for each setting
|
||||
|
||||
document.getElementById(JSONKey).innerHTML = newVal;
|
||||
|
||||
var cmd = {};
|
||||
cmd[JSONKey] = newVal; // note: variable name needs []
|
||||
cmd.NVsave = 8861; // named variable DOESN'T !!
|
||||
sendJSONobject(cmd);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">
|
||||
<style>
|
||||
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">
|
||||
<style>
|
||||
|
||||
.throb_me {
|
||||
animation: throbber 1s linear infinite;
|
||||
}
|
||||
.throb_me {
|
||||
animation: throbber 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes throbber {
|
||||
@keyframes throbber {
|
||||
50% {
|
||||
opacity: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
transition: .4s;
|
||||
}
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.onoffswitch {
|
||||
position: relative; width: 90px;
|
||||
position: relative; width: 90px;
|
||||
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
|
||||
}
|
||||
.onoffswitch-checkbox {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
.onoffswitch-label {
|
||||
display: block; overflow: hidden; cursor: pointer;
|
||||
border: 2px solid #999999; border-radius: 20px;
|
||||
display: block; overflow: hidden; cursor: pointer;
|
||||
border: 2px solid #999999; border-radius: 20px;
|
||||
}
|
||||
.onoffswitch-inner {
|
||||
display: block; width: 200%; margin-left: -100%;
|
||||
transition: margin 0.3s ease-in 0s;
|
||||
display: block; width: 200%; margin-left: -100%;
|
||||
transition: margin 0.3s ease-in 0s;
|
||||
}
|
||||
.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;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
content: "ON";
|
||||
content: "ON";
|
||||
padding-left: 10px;
|
||||
background-color: #34A7C1; color: #FFFFFF;
|
||||
}
|
||||
.onoffswitch-inner:after {
|
||||
content: "OFF";
|
||||
content: "OFF";
|
||||
padding-right: 10px;
|
||||
background-color: #EEEEEE; color: #999999;
|
||||
text-align: right;
|
||||
}
|
||||
.onoffswitch-switch {
|
||||
display: block; width: 18px; margin: 6px;
|
||||
background: #FFFFFF;
|
||||
position: absolute; top: 0; bottom: 0;
|
||||
right: 56px;
|
||||
border: 2px solid #999999; border-radius: 20px;
|
||||
transition: all 0.3s ease-in 0s;
|
||||
display: block; width: 18px; margin: 6px;
|
||||
background: #FFFFFF;
|
||||
position: absolute; top: 0; bottom: 0;
|
||||
right: 56px;
|
||||
border: 2px solid #999999; border-radius: 20px;
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
|
||||
margin-left: 0;
|
||||
}
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
|
||||
right: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.mobile-container {
|
||||
|
||||
margin: auto;
|
||||
background-color: #555;
|
||||
height: 500px;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
|
||||
margin: auto;
|
||||
background-color: #555;
|
||||
height: 500px;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topnav #myLinks {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
color: white;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
display: block;
|
||||
color: white;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.topnav a.icon {
|
||||
background: black;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: black;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.active0 {
|
||||
|
|
@ -490,40 +400,40 @@ body {
|
|||
color: #ffffff;
|
||||
}
|
||||
.active121 {
|
||||
background-color: #ff0000;
|
||||
color: #ffffff;
|
||||
background-color: #ff0000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
input:checked + .slider {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #2196F3;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
MainPage {
|
||||
display: block
|
||||
display: block
|
||||
}
|
||||
#Advanced {
|
||||
display: none
|
||||
display: none
|
||||
}
|
||||
#Settings {
|
||||
display: none
|
||||
display: none
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -537,26 +447,26 @@ MainPage {
|
|||
|
||||
<!-- Top Navigation Menu -->
|
||||
<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="myLinks">
|
||||
<a href="javascript:void(0);" onclick="funcdispHome()">Home</a>
|
||||
<a href="javascript:void(0);" onclick="funcdispSettings()">Settings</a>
|
||||
<a href="javascript:void(0);" onclick="funcdispAdvanced()">Advanced Settings</a>
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="icon" onclick="funcNavLinks()">
|
||||
</i>=
|
||||
</a>
|
||||
<div id="TopBar" style="padding-left:30px"><a href="javascript:void(0);" onclick="funcdispHome()" >Chinese Diesel Heater Web Control</a></div>
|
||||
<div id="myLinks">
|
||||
<a href="javascript:void(0);" onclick="funcdispHome()">Home</a>
|
||||
<a href="javascript:void(0);" onclick="funcdispSettings()">Settings</a>
|
||||
<a href="javascript:void(0);" onclick="funcdispAdvanced()">Advanced Settings</a>
|
||||
</div>
|
||||
<a href="javascript:void(0);" class="icon" onclick="funcNavLinks()">
|
||||
</i>=
|
||||
</a>
|
||||
</div>
|
||||
<div style="padding-left:16px">
|
||||
<span class="MaingPage" id="Home">
|
||||
<div><H2>Power Control</H2></div>
|
||||
|
||||
<div class="onoffswitch" id="onoffswitch">
|
||||
<input type="checkbox" onclick="OnOffCheck()" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" clicked>
|
||||
<label class="onoffswitch-label" for="myonoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
<input type="checkbox" onclick="OnOffCheck()" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" clicked>
|
||||
<label class="onoffswitch-label" for="myonoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
<span class="throb_me" id="RunString" style="visibility:hidden"></span>
|
||||
|
||||
|
|
@ -600,15 +510,18 @@ Advanced Settings
|
|||
|
||||
|
||||
<Div id="Settings">
|
||||
Current Date:<br>
|
||||
<input type="text" id="curdate"><input type="button" Value="Set Date" onclick="setcurrentdate()">
|
||||
Current Date:<br>
|
||||
<input type="date" 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()">
|
||||
<br>
|
||||
Current Time (24 Hour Format):<br>
|
||||
<input type="time" id="curtime"> <input type="button" Value="Set Time" onclick="setcurrenttime()">
|
||||
|
||||
<hr></hr>
|
||||
<br><br>
|
||||
<hr></hr>
|
||||
<br><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>
|
||||
Timer2: <input type="checkbox" border-radius="4px" name="Tue"> <input type="text" class="schedule" id="Timer2Start"> <input type="text" id="Timer2End"><br>
|
||||
<input type="button" Value="Save Schedule" onclick="setSchedule()">
|
||||
</Div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue