1
mirror of https://github.com/rvdbreemen/OTGW-firmware synced 2024-11-16 04:33:49 +01:00

working otmonitor ui

Need visual cleanup, but it works
This commit is contained in:
Robert van den Breemen 2021-01-10 01:49:03 +01:00
parent 37ec99be30
commit 758a05616f
4 changed files with 216 additions and 134 deletions

View File

@ -1,9 +1,9 @@
/*
***************************************************************************
** Program : index.js, part of ESP_ticker
** Program : index.js, part of OTGW-firmware project
** Version : v0.5.1
**
** Copyright (c) 2020 Willem Aandewiel
** Copyright (c) 2021 Robert van den Breemen
**
** TERMS OF USE: MIT License. See bottom of file.
***************************************************************************
@ -20,48 +20,68 @@
window.location.reload(true);
}
};
var tid = 0;
//============================================================================
function bootsTrapMain() {
console.log("bootsTrapMain()");
document.getElementById('saveMsg').addEventListener('click',function()
{saveMessages();});
document.getElementById('M_FSexplorer').addEventListener('click',function()
{ console.log("newTab: goFSexplorer");
location.href = "/FSexplorer";
});
document.getElementById('D_FSexplorer').addEventListener('click',function()
{ console.log("newTab: goFSexplorer");
location.href = "/FSexplorer";
});
document.getElementById('S_FSexplorer').addEventListener('click',function()
{ console.log("newTab: goFSexplorer");
location.href = "/FSexplorer";
});
document.getElementById('back').addEventListener('click',function()
document.getElementById('D_back').addEventListener('click',function()
{ console.log("newTab: goBack");
location.href = "/";
location.href = "/";
});
document.getElementById('Settings').addEventListener('click',function()
{settingsPage();});
document.getElementById('saveSettings').addEventListener('click',function()
{saveSettings();});
document.getElementById('S_back').addEventListener('click',function()
{ console.log("newTab: goBack");
location.href = "/";
});
document.getElementById('S_saveSettings').addEventListener('click',function(){saveSettings();});
document.getElementById('tabDeviceInfo').addEventListener('click',function(){deviceinfoPage();});
document.getElementById('tabSettings').addEventListener('click',function(){settingsPage();});
needReload = false;
refreshDevTime();
refreshDevInfo();
refreshOTmonitor();
tid = setInterval(function(){refreshOTmonitor();refreshDevTime(); }, 1000); //delay is in milliseconds
document.getElementById("displayMainPage").style.display = "block";
document.getElementById("displaySettingsPage").style.display = "none";
document.getElementById("displayDeviceInfo").style.display = "none";
} // bootsTrapMain()
function deviceinfoPage()
{
clearInterval(tid);
document.getElementById("displayMainPage").style.display = "none";
document.getElementById("displaySettingsPage").style.display = "none";
var deviceinfoPage = document.getElementById("deviceinfoPage");
refreshDeviceInfo();
document.getElementById("displayDeviceInfo").style.display = "block";
} // settingsPage()
function settingsPage()
{
clearInterval(tid);
document.getElementById("displayMainPage").style.display = "none";
document.getElementById("displayDeviceInfo").style.display = "none";
var settingsPage = document.getElementById("settingsPage");
refreshSettings();
document.getElementById("displaySettingsPage").style.display = "block";
} // settingsPage()
//============================================================================
function refreshDevTime()
@ -96,7 +116,7 @@
fetch(APIGW+"v0/devinfo")
.then(response => response.json())
.then(json => {
//console.log("parsed .., data is ["+ JSON.stringify(json)+"]");
console.log("parsed .., data is ["+ JSON.stringify(json)+"]");
data = json.devinfo;
for( let i in data )
{
@ -127,26 +147,23 @@
{
console.log("refreshOTmonitor() ..");
}
function refreshMessages()
{
console.log("refreshMessages() ..");
data = {};
fetch(APIGW+"v1/otgw/otmonitor")
fetch(APIGW+"v1/otgw/otmonitor") //api/v1/otgw/otmonitor
.then(response => response.json())
.then(json => {
console.log("then(json => ..)");
msg = json.messages;
for( let i in msg )
//console.log("parsed .., data is ["+ JSON.stringify(json)+"]");
data = json.otmonitor;
for( let i in data )
{
console.log("["+msg[i].name+"]=>["+msg[i].value+"]");
var otmonitor = document.getElementById('mainPage');
if( ( document.getElementById("otmon_"+msg[i].name)) == null )
document.getElementById("waiting").innerHTML = "";
//console.log("["+data[i].name+"]=>["+data[i].value+"]");
var mainPage = document.getElementById('mainPage');
if( ( document.getElementById("otmon_"+data[i].name)) == null )
{ // if element does not exists yet, then build page
var rowDiv = document.createElement("div");
rowDiv.setAttribute("class", "msgDiv");
rowDiv.setAttribute("id", "msgR_"+msg[i].name);
rowDiv.setAttribute("class", "settingDiv");
rowDiv.setAttribute("id", "otmon_"+data[i].name);
rowDiv.setAttribute("style", "text-align: right;");
rowDiv.style.marginLeft = "10px";
rowDiv.style.marginRight = "10px";
@ -158,25 +175,25 @@
fldDiv.setAttribute("style", "margin-right: 10px;");
fldDiv.style.width = "30px";
fldDiv.style.float = 'left';
fldDiv.textContent = msg[i].name;
fldDiv.setAttribute("id", "otmon_"+msg[i].name);
fldDiv.textContent = translateToHuman(data[i].name);
fldDiv.setAttribute("id", "otmon_"+data[i].name);
rowDiv.appendChild(fldDiv);
//--- input ---
var valDiv = document.createElement("div");
valDiv.setAttribute("style", "text-align: left;");
fldDiv.style.width = "30px";
fldDiv.style.float = 'left';
valDiv.textContent = msg[i].value;
valDiv.setAttribute("style", "background: white");
valDiv.textContent = data[i].value;
valDiv.setAttribute("style", "background: lightblue");
rowDiv.appendChild(valDiv);
otmonitor.appendChild(rowDiv);
mainPage.appendChild(rowDiv);
}
else
{ //if the element exists, then update the value
document.getElementById("otmon_"+msg[i].name).value = data[i].value;
document.getElementById("otmon_"+data[i].name).value = data[i].value;
}
}
// document.getElementById("waiting").innerHTML = "";
})
.catch(function(error) {
var p = document.createElement('p');
@ -185,9 +202,66 @@
);
});
} // refreshMessages()
} // refreshOTmonitor()
function refreshDeviceInfo()
{
console.log("refreshDeviceInfo() ..");
data = {};
fetch(APIGW+"v0/devinfo")
.then(response => response.json())
.then(json => {
console.log("then(json => ..)");
console.log("parsed .., data is ["+ JSON.stringify(json)+"]");
data = json.devinfo;
for( let i in data )
{
console.log("["+data[i].name+"]=>["+data[i].value+"]");
var deviceinfoPage = document.getElementById('deviceinfoPage');
if( ( document.getElementById("devinfo_"+data[i].name)) == null )
{ // if element does not exists yet, then build page
var rowDiv = document.createElement("div");
rowDiv.setAttribute("class", "settingDiv");
rowDiv.setAttribute("id", "devinfo_"+data[i].name);
rowDiv.setAttribute("style", "text-align: right;");
rowDiv.style.marginLeft = "10px";
rowDiv.style.marginRight = "10px";
rowDiv.style.width = "850px";
rowDiv.style.border = "thick solid lightblue";
rowDiv.style.background = "lightblue";
//--- field Name ---
var fldDiv = document.createElement("div");
fldDiv.setAttribute("style", "margin-right: 10px;");
fldDiv.style.width = "30px";
fldDiv.style.float = 'left';
fldDiv.textContent = translateToHuman(data[i].name);
rowDiv.appendChild(fldDiv);
//--- input ---
var valDiv = document.createElement("div");
valDiv.setAttribute("style", "text-align: left;");
fldDiv.style.width = "30px";
fldDiv.style.float = 'left';
valDiv.textContent = data[i].value;
valDiv.setAttribute("style", "background: lightblue");
rowDiv.appendChild(valDiv);
deviceinfoPage.appendChild(rowDiv);
}
else
{ //if the element exists, then update the value
document.getElementById("devinfo_"+data[i].name).value = data[i].value;
}
}
})
.catch(function(error) {
var p = document.createElement('p');
p.appendChild(
document.createTextNode('Error: ' + error.message)
);
});
} // refreshDeviceInfo()
//============================================================================
function refreshSettings()
{
@ -197,6 +271,7 @@
.then(response => response.json())
.then(json => {
console.log("then(json => ..)");
console.log("parsed .., data is ["+ JSON.stringify(json)+"]");
data = json.settings;
for( let i in data )
{
@ -332,12 +407,10 @@
//do something to each div like
var msgId = mRow[i].getAttribute("id");
var field = msgId;
//console.log("msgId["+msgId+", msgNr["+field+"]");
console.log("msgId["+msgId+", msgNr["+field+"]");
value = document.getElementById(msgId).value;
//console.log("==> name["+field+"], value["+value+"]");
console.log("==> name["+field+"], value["+value+"]");
changes = false;
if (getBackGround(field) == "lightgray")
{
setBackGround(field, "white");
@ -349,7 +422,6 @@
sendPostSetting(field, value);
}
}
} // saveSettings()
@ -498,6 +570,7 @@
,[ "outsidetemperature", "Outside Temperature"]
,[ "roomtemperatature", "Room Temperature"]
,[ "roomsetpoint", "Room Temperature Setpoint"]
,[ "remoteroomsetpoint", "Remote Room Temperature Setpoint"]
,[ "relmodlvl", "Relative Modulation Level"]
,[ "maxrelmodlvl", "Max. Rel. Modulation Level"]
,[ "chwaterpressure", "Central Heating Water Pressure"]

View File

@ -47,90 +47,93 @@ void processAPI()
Debugln(" ");
}
if (words[1] != "api")
{
sendApiNotFound(URI);
return;
}
if (words[2] == "v1")
{ //v1 API calls
if (words[3] == "otgw"){
if (words[4] == "otmonitor") {
// GET /api/v1/otgw/otmonitor
// Response: see json response
sendOTmonitor();
} else if (words[4] == "id"){
if (words[1] == "api"){
if (words[2] == "v1")
{ //v1 API calls
if (words[3] == "otgw"){
if (words[4] == "otmonitor") {
// GET /api/v1/otgw/otmonitor
// Response: see json response
sendOTmonitor();
} else if (words[4] == "id"){
//what the heck should I do?
// /api/v1/otgw/id/{msgid} msgid = OpenTherm Message Id (0-127)
// Response: label, value, unit
// {
// "label": "Tr",
// "value": "0.00",
// "unit": "°C"
// }
sendOTGWvalue(words[5].toInt());
} else if (words[4] == "label"){
//what the heck should I do?
// /api/v1/otgw/label/{msglabel} = OpenTherm Label (matching string)
// Response: label, value, unit
// {
// "label": "Tr",
// "value": "0.00",
// "unit": "°C"
// }
sendOTGWlabel(CSTR(words[5]));
} else if (words[4] == "command"){
if (httpServer.method() == HTTP_PUT || httpServer.method() == HTTP_POST)
{
/* how to post a command to OTGW
** POST or PUT = /api/v1/otgw/command/{command} = Any command you want
** Response: 200 OK
** @@Todo: Check if command was executed correctly.
*/
//Send a command to OTGW
sendOTGW(CSTR(words[5]), words[5].length());
httpServer.send(200, "text/plain", "OK");
}
}
else sendApiNotFound(URI);
}
else sendApiNotFound(URI);
}
else if (words[2] == "v0")
{ //v0 API calls
if (words[3] == "otgw"){
//what the heck should I do?
// /api/v1/otgw/id/{msgid} msgid = OpenTherm Message Id (0-127)
// /api/v0/otgw/{msgid} msgid = OpenTherm Message Id
// Response: label, value, unit
// {
// "label": "Tr",
// "value": "0.00",
// "unit": "°C"
// }
sendOTGWvalue(words[5].toInt());
} else if (words[4] == "label"){
//what the heck should I do?
// /api/v1/otgw/label/{msglabel} = OpenTherm Label (matching string)
// Response: label, value, unit
// {
// "label": "Tr",
// "value": "0.00",
// "unit": "°C"
// }
sendOTGWlabel(CSTR(words[5]));
} else if (words[4] == "command"){
sendOTGWvalue(words[4].toInt());
}
else if (words[3] == "devinfo")
{
sendDeviceInfo();
}
else if (words[3] == "devtime")
{
sendDeviceTime();
}
else if (words[3] == "settings")
{
if (httpServer.method() == HTTP_PUT || httpServer.method() == HTTP_POST)
{
/* how to post a command to OTGW
** POST or PUT = /api/v1/otgw/command/{command} = Any command you want
** Response: 200 OK
** @@Todo: Check if command was executed correctly.
*/
//Send a command to OTGW
sendOTGW(CSTR(words[5]), words[5].length());
httpServer.send(200, "text/plain", "OK");
postSettings();
}
else
{
sendDeviceSettings();
}
}
}
}
else if (words[2] == "v0")
{ //v0 API calls
if (words[3] == "otgw"){
//what the heck should I do?
// /api/v0/otgw/{msgid} msgid = OpenTherm Message Id
// Response: label, value, unit
// {
// "label": "Tr",
// "value": "0.00",
// "unit": "°C"
// }
sendOTGWvalue(words[4].toInt());
}
else if (words[3] == "devinfo")
{
sendDeviceInfo();
}
else if (words[3] == "devtime")
{
sendDeviceTime();
}
else if (words[3] == "settings")
{
if (httpServer.method() == HTTP_PUT || httpServer.method() == HTTP_POST)
{
postSettings();
}
else
{
sendDeviceSettings();
}
}
else sendApiNotFound(URI);
} else sendApiNotFound(URI);
else sendApiNotFound(URI);
} else sendApiNotFound(URI);
}
else
{
sendApiNotFound(URI);
}
} // processAPI()

View File

@ -24,30 +24,36 @@ R"(
<div id="displayMainPage" style="display:none">
<div class="nav-container">
<div class='nav-left'>
<a id='saveMsg' class='nav-item tabButton' style="background: lightblue;">save</a>
<a id='M_FSexplorer' class='nav-img'>
<img src='/FSexplorer.png' alt='FSexplorer'></a>
<a id='Settings' class='nav-img'>
<img src='/settings.png' alt='Settings'></a>
<a id='tabDeviceInfo' class='nav-item tabButton' style="background: lightblue;">Device Info</a>
<a id='M_FSexplorer' class='nav-img'> <img src='/FSexplorer.png' alt='FSexplorer'></a>
<a id='tabSettings' class='nav-img'> <img src='/settings.png' alt='Settings'></a>
</div>
</div>
<br/>
<div id="mainPage">
<div id="waiting">Not implemented yet. <br><br>Wait! Retrieving local messages...</div>
<div id="waiting">Wait for it...</div>
</div>
</div>
<div id="displaySettingsPage" style="display:none">
<div id="displayDeviceInfo" style="display:none">
<div class="nav-container">
<div class='nav-left'>
<a id='back' class='nav-item tabButton' style="background: lightblue;">Terug</a>
<a id='saveSettings' class='nav-item tabButton' style="background: lightblue;">save</a>
<a id='S_FSexplorer' class='nav-img'>
<img src='/FSexplorer.png' alt='FSexplorer'></a>
<a id='D_back' class='nav-item tabButton' style="background: lightblue;">Back</a>
<a id='D_FSexplorer' class='nav-img'> <img src='/FSexplorer.png' alt='FSexplorer'></a>
</div>
</div>
<br/>
<div id="settingsPage"></div>
<div id="deviceinfoPage"></div>
</div>
<div id="displaySettingsPage" style="display:none">
<div class="nav-container">
<div class='nav-left'>
<a id='S_back' class='nav-item tabButton' style="background: lightblue;">Back</a>
<a id='S_saveSettings' class='nav-item tabButton' style="background: lightblue;">Save</a>
<a id='S_FSexplorer' class='nav-img'> <img src='/FSexplorer.png' alt='FSexplorer'></a>
</div>
</div>
<br/>
<div id="settingsPage">Loading...</div>
</div>
<!-- KEEP THIS --->

View File

@ -2,13 +2,13 @@
#define _VERSION_MAJOR 0
#define _VERSION_MINOR 5
#define _VERSION_PATCH 1
#define _VERSION_BUILD 369
#define _VERSION_BUILD 381
//#define _VERSION_PRERELEASE beta //uncomment to define prerelease labels: alpha - beta - rc
#define _VERSION_DATE "07-01-2021"
#define _VERSION_TIME "19:17:29"
#define _VERSION_DATE "10-01-2021"
#define _VERSION_TIME "01:36:09"
#define _SEMVER_CORE "0.5.1"
#define _SEMVER_BUILD "0.5.1+369"
#define _SEMVER_FULL "0.5.1+369"
#define _SEMVER_NOBUILD "0.5.1 (07-01-2021)"
#define _VERSION "0.5.1+369 (07-01-2021)"
#define _SEMVER_BUILD "0.5.1+381"
#define _SEMVER_FULL "0.5.1+381"
#define _SEMVER_NOBUILD "0.5.1 (10-01-2021)"
#define _VERSION "0.5.1+381 (10-01-2021)"
//The version information is created automatically, more information here: https://github.com/rvdbreemen/autoinc-semver