thooge
/
esp32-nmea2000-obp60
mirror of https://github.com/thooge/esp32-nmea2000-obp60.git
1
0
Fork 0
Code Releases Activity

improved counter display on status page

This commit is contained in:
andreas 2021-11-07 17:00:40 +01:00
parent 1deef5c7de
commit 9147359b90
5 changed files with 88 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
lib/counter/GwCounter.h
View File

@ -42,17 +42,18 @@ template<class T> class GwCounter{
} }
int getJsonSize(){ int getJsonSize(){
return JSON_OBJECT_SIZE(4)+JSON_OBJECT_SIZE(okCounter.size()+1)+ return JSON_OBJECT_SIZE(4)+JSON_OBJECT_SIZE(okCounter.size()+1)+
JSON_OBJECT_SIZE(failCounter.size()+1); JSON_OBJECT_SIZE(failCounter.size()+1)+
okCounter.size()*5+failCounter.size()*5;
} }
void toJson(JsonDocument &json){ void toJson(JsonDocument &json){
JsonObject jo=json.createNestedObject(name); JsonObject jo=json.createNestedObject(name);
jo["sumOk"]=globalOk; jo[F("sumOk")]=globalOk;
jo["sumFail"]=globalFail; jo[F("sumFail")]=globalFail;
JsonObject jok=jo.createNestedObject("ok"); JsonObject jok=jo.createNestedObject(F("ok"));
for (auto it=okCounter.begin();it!=okCounter.end();it++){ for (auto it=okCounter.begin();it!=okCounter.end();it++){
jok[String(it->first)]=it->second; jok[String(it->first)]=it->second;
} }
JsonObject jfail=jo.createNestedObject("fail"); JsonObject jfail=jo.createNestedObject(F("fail"));
for (auto it=failCounter.begin();it!=failCounter.end();it++){ for (auto it=failCounter.begin();it!=failCounter.end();it++){
jfail[String(it->first)]=it->second; jfail[String(it->first)]=it->second;
} }

4
src/main.cpp
View File

@ -86,7 +86,7 @@ GwRequestQueue mainQueue(&logger,20);
GwWebServer webserver(&logger,&mainQueue,80); GwWebServer webserver(&logger,&mainQueue,80);
GwCounter<unsigned long> countNMEA2KIn("count2Kin"); GwCounter<unsigned long> countNMEA2KIn("count2Kin");
GwCounter<unsigned long> countNMEA2KOut("count2kout"); GwCounter<unsigned long> countNMEA2KOut("count2Kout");
GwCounter<String> countUSBIn("countUSBin"); GwCounter<String> countUSBIn("countUSBin");
GwCounter<String> countUSBOut("countUSBout"); GwCounter<String> countUSBOut("countUSBout");
@ -595,8 +595,8 @@ void SendNMEA0183Message(const tNMEA0183Msg &NMEA0183Msg, int sourceId) {
} }
void handleReceivedNmeaMessage(const char *buf, int sourceId){ void handleReceivedNmeaMessage(const char *buf, int sourceId){
updateNMEACounter(sourceId,buf,true);
if (! checkFilter(buf,sourceId,true)) return; if (! checkFilter(buf,sourceId,true)) return;
updateNMEACounter(sourceId,buf,true);
if ((sourceId == USB_CHANNEL_ID && n2kFromUSB->asBoolean())|| if ((sourceId == USB_CHANNEL_ID && n2kFromUSB->asBoolean())||
(sourceId >= MIN_TCP_CHANNEL_ID && n2kFromTCP->asBoolean())|| (sourceId >= MIN_TCP_CHANNEL_ID && n2kFromTCP->asBoolean())||
(sourceId == SERIAL1_CHANNEL_ID && n2kFromSerial->asBoolean()) (sourceId == SERIAL1_CHANNEL_ID && n2kFromSerial->asBoolean())

11
web/index.css
View File

@ -13,6 +13,16 @@ body{
#statusPage .even { #statusPage .even {
background-color: rgb(211 211 211 / 43%); background-color: rgb(211 211 211 / 43%);
} }
#statusPageContent {
margin-bottom: 0.5em;
}
.counter-row .value{
text-align: right;
width: 6em;
}
.icon-row .label{
width: 8.7em;
}
.category .title .label { .category .title .label {
opacity: 1; opacity: 1;
margin-left: 1em; margin-left: 1em;
@ -50,6 +60,7 @@ body{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
} }
input,select { input,select {
border: 1px solid #808080a1; border: 1px solid #808080a1;

122
web/index.html
View File

@ -20,109 +20,27 @@
<div class="tab" data-page="dashboardPage">Data</div> <div class="tab" data-page="dashboardPage">Data</div>
</div> </div>
<div id="statusPage" class="tabPage"> <div id="statusPage" class="tabPage">
<div class="row"> <div id="statusPageContent">
<span class="label">VERSION</span> <div class="row">
<span class="value" id="version">---</span> <span class="label">VERSION</span>
<button class="infoButton" id="converterInfo">?</button> <span class="value" id="version">---</span>
</div> <button class="infoButton" id="converterInfo">?</button>
</div>
<div class="row even"> <div class="row even">
<span class="label">Access Point IP</span> <span class="label">Access Point IP</span>
<span class="value" id="apIp">---</span> <span class="value" id="apIp">---</span>
</div> </div>
<div class="row "> <div class="row ">
<span class="label">wifi client connected</span> <span class="label">wifi client connected</span>
<span class="value" id="wifiConnected">---</span> <span class="value" id="wifiConnected">---</span>
</div> </div>
<div class="row even"> <div class="row even">
<span class="label">wifi client IP</span> <span class="label">wifi client IP</span>
<span class="value" id="clientIP">---</span> <span class="value" id="clientIP">---</span>
</div> </div>
<div class="row"> </div>
<span class="label"># NMEA2000 in</span> <button id="reset">Reset</button>
<span class="value" id="count2Kin.sumOk">---</span>
</div>
<div class="row even">
<span class="label">NMEA2000 in details</span>
<input type="checkbox" class="showMsgDetails" data-key="count2Kin.ok"></span>
</div>
<div class="row even msgDetails hidden" id="count2Kin.ok" >
</div>
<div class="row">
<span class="label"># NMEA2000 out</span>
<span class="value" id="count2Kout.sumOk">---</span>
</div>
<div class="row even">
<span class="label">NMEA2000 out details</span>
<input type="checkbox" class="showMsgDetails" data-key="count2Kout.ok"></span>
</div>
<div class="row even msgDetails hidden" id="count2Kout.ok" >
</div>
<div class="row">
<span class="label"># TCP clients</span>
<span class="value" id="numClients">---</span>
</div>
<div class="row even">
<span class="label"># TCP in</span>
<span class="value" id="countTCPin.sumOk">---</span>
</div>
<div class="row ">
<span class="label">TCP in details</span>
<input type="checkbox" class="showMsgDetails" data-key="countTCPin.ok"></span>
</div>
<div class="row msgDetails hidden" id="countTCPin.ok" >
</div>
<div class="row even">
<span class="label"># TCP out</span>
<span class="value" id="countTCPout.sumOk">---</span>
</div>
<div class="row ">
<span class="label">TCP out details</span>
<input type="checkbox" class="showMsgDetails" data-key="countTCPout.ok"></span>
</div>
<div class="row msgDetails hidden" id="countTCPout.ok" >
</div>
<div class="row even">
<span class="label"># USB in</span>
<span class="value" id="countUSBin.sumOk">---</span>
</div>
<div class="row ">
<span class="label">USB in details</span>
<input type="checkbox" class="showMsgDetails" data-key="countUSBin.ok"></span>
</div>
<div class="row msgDetails hidden" id="countUSBin.ok" >
</div>
<div class="row even">
<span class="label"># USB out</span>
<span class="value" id="countUSBout.sumOk">---</span>
</div>
<div class="row ">
<span class="label">USB out details</span>
<input type="checkbox" class="showMsgDetails" data-key="countUSBout.ok"></span>
</div>
<div class="row msgDetails hidden" id="countUSBout.ok" >
</div>
<div class="row even">
<span class="label"># Serial in</span>
<span class="value" id="countSerialin.sumOk">---</span>
</div>
<div class="row ">
<span class="label">Serial in details</span>
<input type="checkbox" class="showMsgDetails" data-key="countSerialin.ok"></span>
</div>
<div class="row msgDetails hidden" id="countSerialin.ok" >
</div>
<div class="row even">
<span class="label"># Serial out</span>
<span class="value" id="countSerialout.sumOk">---</span>
</div>
<div class="row ">
<span class="label">Serial out details</span>
<input type="checkbox" class="showMsgDetails" data-key="countSerialout.ok"></span>
</div>
<div class="row msgDetails hidden" id="countSerialout.ok" >
</div>
<button id="reset" >Reset</button>
</div> </div>
<div class="configForm tabPage hidden" id="configPage" > <div class="configForm tabPage hidden" id="configPage" >
<div class="configFormRows"> <div class="configFormRows">

51
web/index.js
View File

@ -13,8 +13,9 @@ function addEl(type, clazz, parent, text) {
if (parent) parent.appendChild(el); if (parent) parent.appendChild(el);
return el; return el;
} }
function forEl(query, callback) { function forEl(query, callback,base) {
let all = document.querySelectorAll(query); if (! base) base=document;
let all = base.querySelectorAll(query);
for (let i = 0; i < all.length; i++) { for (let i = 0; i < all.length; i++) {
callback(all[i]); callback(all[i]);
} }
@ -145,6 +146,28 @@ function factoryReset() {
alertRestart(); alertRestart();
}) })
} }
function createCounterDisplay(parent,label,key,isEven){
let clazz="row icon-row counter-row";
if (isEven) clazz+=" even";
let row=addEl('div',clazz,parent);
let icon=addEl('span','icon icon-more',row);
addEl('span','label',row,label);
let value=addEl('span','value',row,'---');
value.setAttribute('id',key+".sumOk");
let display=addEl('div',clazz+" msgDetails hidden",parent);
display.setAttribute('id',key+".ok");
row.addEventListener('click',function(ev){
let rs=display.classList.toggle('hidden');
if (rs){
icon.classList.add('icon-more');
icon.classList.remove('icon-less');
}
else{
icon.classList.remove('icon-more');
icon.classList.add('icon-less');
}
});
}
function updateMsgDetails(key, details) { function updateMsgDetails(key, details) {
forEl('.msgDetails', function (frame) { forEl('.msgDetails', function (frame) {
@ -161,8 +184,24 @@ function updateMsgDetails(key, details) {
el.textContent = details[k]; el.textContent = details[k];
} }
} }
forEl('.value',function(el){
let k=el.getAttribute('data-id');
if (k && ! details[k]){
el.parentElement.remove();
}
},frame);
}); });
} }
let counters={
count2Kin: 'NMEA2000 in',
count2Kout: 'NMEA2000 out',
countTCPin: 'TCP in',
countTCPout: 'TCP out',
countUSBin: 'USB in',
countUSBout: 'USB out',
countSerialIn: 'Serial in',
countSerialOut: 'Serial out'
}
function showOverlay(text, isHtml) { function showOverlay(text, isHtml) {
let el = document.getElementById('overlayContent'); let el = document.getElementById('overlayContent');
if (isHtml) { if (isHtml) {
@ -477,4 +516,12 @@ window.addEventListener('load', function () {
} }
loadConfigDefinitions(); loadConfigDefinitions();
createDashboard(); createDashboard();
let statusPage=document.getElementById('statusPageContent');
if (statusPage){
let even=false;
for (let c in counters){
createCounterDisplay(statusPage,counters[c],c,even);
even=!even;
}
}
}); });