tabbed view in UI, config categories

web/config.json

@@ -5,7 +5,8 @@
         "type": "string",
         "default": "ESP32NMEA2K",
         "check": "checkSystemName",
-        "description": "system name, used for the access point and for services"
+        "description": "system name, used for the access point and for services",
+        "category":"system"
     },
     {
         "name":"talkerId",
@@ -13,7 +14,16 @@
         "type":"list",
         "default":"GP",
         "list":["AB","AD","AG","AP","AI","AN","AR","AS","AT","AX","BI","BN","CA","CD","CR","CS","CT","CV","CX","DF","DU","DP","EC","EI","EP","ER","FD","FE","FR","FS","GA","GB","GI","GL","GN","GP","GQ","HC","HE","HF","HN","HD","HS","II","IN","JA","JB","JC","JD","JE","JF","JG","JH","LC","NL","NV","RA","RB","RC","RI","SA","SC","SD","SG","SN","SS","TC","TI","UP","VD","VM","VW","VA","VS","VT","VR","WD","WI","WL","YX","ZA","ZC","ZQ","ZV"],
-        "description":"the talkerId used in generated NMEA0183 records"
+        "description":"the talkerId used in generated NMEA0183 records",
+        "category":"system"
+    },
+    {
+        "name": "stopApTime",
+        "type": "number",
+        "default": "0",
+        "check": "checkStopApTime",
+        "description": "stop the access point after that many minutes if not used",
+        "category":"system"
     },
     {
         "name": "usbBaud",
@@ -21,42 +31,48 @@
         "type": "list",
         "default": "115200",
         "description": "baud rate for the USB port",
-        "list": [1200,2400,4800,9600,14400,19200,28800,38400,57600,115200,230400,460800]
+        "list": [1200,2400,4800,9600,14400,19200,28800,38400,57600,115200,230400,460800],
+        "category":"usb port"
     },
     {
         "name": "sendUsb",
         "label": "NMEA to USB",
         "type": "boolean",
         "default": "true",
-        "description": "send out NMEA data on the USB port"
+        "description": "send out NMEA data on the USB port",
+        "category":"usb port"
     },
     {
         "name": "receiveUsb",
         "label": "NMEA from USB",
         "type": "boolean",
         "default": "true",
-        "description": "receive NMEA data on the USB port"
+        "description": "receive NMEA data on the USB port",
+        "category":"usb port"
     },
     {
         "name": "usbToN2k",
         "label": "USB to NMEA2000",
         "type": "boolean",
         "default": "true",
-        "description": "convert NMEA0183 from the USB port to NMEA2000"
+        "description": "convert NMEA0183 from the USB port to NMEA2000",
+        "category":"usb port"
     },
     {
         "name": "usbReadFilter",
         "label": "USB read Filter",
         "type": "filter",
         "default": "",
-        "description": "filter for NMEA0183 data when reading from USB\nselect aison|aisoff, set a whitelist or a blacklist with NMEA sentences like RMC,RMB"
+        "description": "filter for NMEA0183 data when reading from USB\nselect aison|aisoff, set a whitelist or a blacklist with NMEA sentences like RMC,RMB",
+        "category":"usb port"
     },
     {
         "name": "usbWriteFilter",
         "label": "USB write Filter",
         "type": "filter",
         "default": "",
-        "description": "filter for NMEA0183 data when writing to USB\nselect aison|aisoff, set a whitelist or a blacklist with NMEA sentences like RMC,RMB"
+        "description": "filter for NMEA0183 data when writing to USB\nselect aison|aisoff, set a whitelist or a blacklist with NMEA sentences like RMC,RMB",
+        "category":"usb port"
     },
     {
         "name": "serialDirection",
@@ -65,7 +81,8 @@
         "default": "receive",
         "list": ["send","receive","off"],
         "description": "use the serial port to send or receive data",
-        "capabilities":{"serialmode":["UNI"]}
+        "capabilities":{"serialmode":["UNI"]},
+        "category":"serial port"
     },
     {
         "name": "serialBaud",
@@ -74,7 +91,8 @@
         "default": "115200",
         "description": "baud rate for the serial port",
         "list": [1200,2400,4800,9600,14400,19200,28800,38400,57600,115200,230400,460800],
-        "capabilities":{"serialmode":["RX","TX","UNI","BI"]}
+        "capabilities":{"serialmode":["RX","TX","UNI","BI"]},
+        "category":"serial port"
     },
     {
         "name": "sendSerial",
@@ -82,7 +100,8 @@
         "type": "boolean",
         "default": "true",
         "description": "send out NMEA data on the serial port",
-        "capabilities":{"serialmode":["TX","BI"]}
+        "capabilities":{"serialmode":["TX","BI"]},
+        "category":"serial port"
     },
     {
         "name": "receiveSerial",
@@ -90,7 +109,8 @@
         "type": "boolean",
         "default": "true",
         "description": "receive NMEA data on the serial port",
-        "capabilities":{"serialmode":["RX","BI"]}
+        "capabilities":{"serialmode":["RX","BI"]},
+        "category":"serial port"
     },
     {
         "name": "serialToN2k",
@@ -98,7 +118,8 @@
         "type": "boolean",
         "default": "true",
         "description": "convert NMEA0183 from the serial port to NMEA2000",
-        "capabilities":{"serialmode":["RX","BI","UNI"]}
+        "capabilities":{"serialmode":["RX","BI","UNI"]},
+        "category":"serial port"
     },
     {
         "name": "serialReadFilter",
@@ -106,7 +127,8 @@
         "type": "filter",
         "default": "",
         "description": "filter for NMEA0183 data when reading from serial\nselect aison|aisoff, set a whitelist or a blacklist with NMEA sentences like RMC,RMB",
-        "capabilities":{"serialmode":["RX","BI","UNI"]}
+        "capabilities":{"serialmode":["RX","BI","UNI"]},
+        "category":"serial port"
     },
     {
         "name": "serialWriteFilter",
@@ -114,14 +136,16 @@
         "type": "filter",
         "default": "",
         "description": "filter for NMEA0183 data when writing to serial\nselect aison|aisoff, set a whitelist or a blacklist with NMEA sentences like RMC,RMB",
-        "capabilities":{"serialmode":["TX","BI","UNI"]}
+        "capabilities":{"serialmode":["TX","BI","UNI"]},
+        "category":"serial port"
     },
     {
         "name": "serverPort",
         "label": "TCP port",
         "type": "number",
         "default": "2222",
-        "description": "the TCP port we listen on"
+        "description": "the TCP port we listen on",
+        "category":"TCP port"
     },
     {
         "name": "maxClients",
@@ -129,63 +153,72 @@
         "type": "number",
         "default": "10",
         "check":"checkMaxClients",
-        "description": "the number of clients we allow to connect to us"
+        "description": "the number of clients we allow to connect to us",
+        "category":"TCP port"
     },
     {
         "name": "sendTCP",
         "label": "NMEA to TCP",
         "type": "boolean",
         "default": "true",
-        "description": "send out NMEA data to connected TCP clients"
+        "description": "send out NMEA data to connected TCP clients",
+        "category":"TCP port"
     },
     {
         "name": "readTCP",
         "label": "NMEA from TCP",
         "type": "boolean",
         "default": "true",
-        "description": "receive NMEA data from connected TCP clients"
+        "description": "receive NMEA data from connected TCP clients",
+        "category":"TCP port"
     },
     {
         "name": "tcpToN2k",
         "label": "TCP to NMEA2000",
         "type": "boolean",
         "default": "true",
-        "description": "convert NMEA0183 from TCP clients to NMEA2000"
+        "description": "convert NMEA0183 from TCP clients to NMEA2000",
+        "category":"TCP port"
     },
     {
         "name": "tcpReadFilter",
         "label": "TCP read Filter",
         "type": "filter",
         "default": "",
-        "description": "filter for NMEA0183 data when reading from TCP\nselect aison|aisoff, set a whitelist or a blacklist with NMEA sentences like RMC,RMB"
+        "description": "filter for NMEA0183 data when reading from TCP\nselect aison|aisoff, set a whitelist or a blacklist with NMEA sentences like RMC,RMB",
+        "category":"TCP port"
     },
     {
         "name": "tcpWriteFilter",
         "label": "TCP write Filter",
         "type": "filter",
         "default": "",
-        "description": "filter for NMEA0183 data when writing to TCP\nselect aison|aisoff, set a whitelist or a blacklist with NMEA sentences like RMC,RMB"
+        "description": "filter for NMEA0183 data when writing to TCP\nselect aison|aisoff, set a whitelist or a blacklist with NMEA sentences like RMC,RMB",
+        "category":"TCP port"
     },
     {
         "name": "sendSeasmart",
         "label": "Seasmart to TCP",
         "type": "boolean",
         "default": "false",
-        "description": "send NMEA2000 as seasmart to connected TCP clients"
+        "description": "send NMEA2000 as seasmart to connected TCP clients",
+        "category":"TCP port"
     },
     {
         "name": "wifiClient",
         "label": "wifi client",
         "type": "boolean",
         "default": "false",
-        "description": "connect to an external WIFI network"
+        "description": "connect to an external WIFI network",
+        "category":"wifi client"
     },
     {
         "name": "wifiPass",
         "label": "wifi client password",
         "type": "password",
         "default": "",
-        "description": "the password for an external WIFI network"
+        "description": "the password for an external WIFI network",
+        "category":"wifi client"
     },
     {
         "name": "wifiSSID",
@@ -193,14 +226,8 @@
         "type": "string",
         "default": "",
         "check": "checkSSID",
-        "description": "the SSID for an external WIFI network"
+        "description": "the SSID for an external WIFI network",
-    },
+        "category":"wifi client"
-    {
-        "name": "stopApTime",
-        "type": "number",
-        "default": "0",
-        "check": "checkStopApTime",
-        "description": "stop the access point after that many minutes if not used"
     }
     
 

web/index.html

@@ -8,6 +8,13 @@
   let self=this;
   let lastUpdate=(new Date()).getTime();
   let reloadConfig=false;
+  function addEl(type,clazz,parent,text){
+    let el=document.createElement(type);
+    el.classList.add(clazz);
+    if (text) el.textContent=text;
+    if (parent)parent.appendChild(el);
+    return el;
+  }
   function alertRestart(){
     reloadConfig=true;
     alert("Board reset triggered, reconnect WLAN if necessary");
@@ -265,12 +272,29 @@
         .then(function (capabilities) {
           getJson("config.json")
             .then(function (defs) {
+              let category;
+              let categoryEl;
               let frame = document.querySelector('.configFormRows');
               if (!frame) throw Error("no config form");
               frame.innerHTML = '';
               configDefinitions = defs;
               defs.forEach(function (item) {
                 if (!item.type) return;
+                if (item.category != category || ! categoryEl){
+                  let categoryFrame=addEl('div','category',frame);
+                  let categoryTitle=addEl('div','title',categoryFrame);
+                  let categoryButton=addEl('button','categoryButton',categoryTitle,'v');
+                  addEl('span','label',categoryTitle,item.category);
+                  categoryEl=addEl('div','content',categoryFrame);
+                  categoryEl.classList.add('hidden');
+                  let currentEl=categoryEl;
+                  categoryTitle.addEventListener('click',function(ev){
+                    let rs=currentEl.classList.toggle('hidden');
+                    if (rs) categoryButton.textContent="v";
+                    else categoryButton.textContent="^";
+                  })
+                  category=item.category;
+                }
                 if (item.capabilities !== undefined){
                   for (let capability in item.capabilities){
                     let values=item.capabilities[capability];
@@ -282,16 +306,10 @@
                     if (! found) return;
                   }
                 }
-                let row = document.createElement('div');
+                let row = addEl('div','row',categoryEl);
-                row.classList.add('row');
                 let label = item.label || item.name;
-                let labelEl = document.createElement('span');
+                addEl('span','label',row,label);
-                labelEl.classList.add('label');
+                let valueFrame=addEl('div','value',row);
-                labelEl.textContent = label;
-                row.appendChild(labelEl);
-                let valueFrame=document.createElement("div");
-                valueFrame.classList.add("value");
-                row.appendChild(valueFrame);
                 let valueEl = createInput(item,valueFrame);
                 if (!valueEl) return;
                 valueEl.setAttribute('data-default', item.default);
@@ -300,27 +318,18 @@
                   checkChange(el,row);
                 })
                 if (item.check) valueEl.setAttribute('data-check', item.check);
-                let btContainer=document.createElement("div");
+                let btContainer=addEl('div','buttonContainer',row);
-                btContainer.classList.add("buttonContainer");
+                let bt = addEl('button','defaultButton',btContainer,'X');
-                row.appendChild(btContainer);
-                let bt = document.createElement('button');
-                bt.classList.add('defaultButton');
                 bt.setAttribute('data-default', item.default);
                 bt.addEventListener('click', function (ev) {
                   valueEl.value = valueEl.getAttribute('data-default');
                   let changeEvent=new Event('change');
                   valueEl.dispatchEvent(changeEvent);
                 })
-                bt.textContent = "X";
+                bt = addEl('button','infoButton',btContainer,'?');
-                btContainer.appendChild(bt);
-                bt = document.createElement('button');
-                bt.classList.add('infoButton');
                 bt.addEventListener('click', function (ev) {
                   showOverlay(item.description);
                 });
-                bt.textContent = "?";
-                btContainer.appendChild(bt);
-                frame.appendChild(row);
               })
               resetForm();
             })
@@ -338,6 +347,22 @@
       text+="</p>";
       showOverlay(text,true);
     });
+  }
+  function handleTab(el){
+    let activeName=el.getAttribute('data-page');
+    if (! activeName) return;
+    let activeTab=document.getElementById(activeName);
+    if (!activeTab) return;
+    let all=document.querySelectorAll('.tabPage');
+    for (let i=0;i<all.length;i++){
+      all[i].classList.add('hidden');
+    }
+    let tabs=document.querySelectorAll('.tab');
+    for (let i=0;i<all.length;i++){
+      tabs[i].classList.remove('active');
+    }
+    el.classList.add('active');
+    activeTab.classList.remove('hidden');
   }  
   window.setInterval(update,1000);
   window.addEventListener('load',function(){
@@ -350,17 +375,31 @@
     cd.addEventListener('change',function(ev){
       showCanDetails(ev.target.checked);
     });
+    let tabs=document.querySelectorAll('.tab');
+    for (let i=0;i<tabs.length;i++){
+      tabs[i].addEventListener('click',function(ev){
+        handleTab(ev.target);
+      });
+    }
     loadConfigDefinitions();
   });
 </script>  
 <style type="text/css">
 .configForm {
-    margin-top: 1em;
-    margin-bottom: 1em;
-    padding-top: 0.5em;
     padding-bottom: 0.5em;
-    border: 1px solid grey;
+}
-    max-width: 40em;
+.configForm .buttons {
+    margin-top: 0.5em;
+}
+.configForm .content>div:nth-child(even) {
+    background-color: rgb(211 211 211 / 43%);
+}
+#statusPage .even {
+    background-color: rgb(211 211 211 / 43%);
+}
+.category .title .label {
+    opacity: 1;
+    margin-left: 1em;
 }
 .changed input{
     color: green
@@ -373,11 +412,13 @@ span.label {
     display: inline-block;
     opacity: 0.6;
 }
-.value {
+.configForm .value {
-    width: 19em;
+    width: 21em;
     display: flex;
     flex-direction: row;
+    margin-bottom: 0.2em;
 }
+
 span#connected {
     display: inline-block;
     background-color: red;
@@ -389,11 +430,16 @@ span#connected.ok{
   background-color: #13ac13;
 }
 .row {
-    margin: 0.5em;
+    padding: 0.5em;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 }
+input,select {
+    border: 1px solid #808080a1;
+    font-size: 0.9em;
+    padding: 0.2em;
+}
 .filter {
     display: inline-block;
 }
@@ -404,6 +450,16 @@ button.infoButton {
     margin-left: 1em;
     vertical-align: bottom;
 }
+.category .title {
+    padding-left: 0.5em;
+    background-color: lightgray;
+    padding-top: 0.3em;
+    padding-bottom: 0.5em;
+    border-bottom: 1px solid darkgray;
+}
+.hidden{
+  display: none !important;
+}
 #canDetails{
   display:none;
 }
@@ -420,9 +476,7 @@ button.infoButton {
     background-color: #80808070;
     display: flex;
 }
-.overlayContainer.hidden{
+
-  display: none;
-}
 div#overlay {
     margin: auto;
     background-color: white;
@@ -443,21 +497,56 @@ div#overlayContent.text{
     flex-direction: row;
     justify-content: end;
 }
+#tabs {
+    display: flex;
+    border-bottom: 1px solid grey;
+    margin-bottom: 0.5em;
+}
+#tabs .tab {
+    background-color: lightgray;
+    padding: 0.5em;
+    border-left: 1px;
+    border-right: 1px;
+    border-top: 1px;
+    border-bottom: 1px;
+    border-color: grey;
+    border-style: solid;
+    opacity: 0.6;
+}
+#tabs .tab.active{
+  opacity: 1;
+}
+.buttons button{
+  padding: 0.5em;
+}
+button#reset{
+  padding: 0.5em;
+}
+h1{
+  margin-bottom: 0;
+}
+
 </style>
 </head>
 <body>
 <div class="main">
 <h1>NMEA 2000 Gateway </h1>
+<div class="row">
+  <span class="label">connected</span>
+  <span class="value" id="connected"></span>
+</div>
+<div id="tabs">
+  <div class="tab active" data-page="statusPage">Status</div>
+  <div class="tab" data-page="configPage">Config</div>
+</div>
+<div id="statusPage" class="tabPage">
 <div class="row">
   <span class="label">VERSION</span>
   <span class="value" id="version">---</span>
   <button class="infoButton" id="converterInfo">?</button> 
 </div>
-<div class="row">
+
-  <span class="label">connected</span>
+<div class="row even">
-  <span class="value" id="connected"></span>
-</div>
-<div class="row">
   <span class="label">Access Point IP</span>
   <span class="value" id="apIp">---</span>
 </div>
@@ -465,19 +554,19 @@ div#overlayContent.text{
   <span class="label"># NMEA2000 messages</span>
   <span class="value" id="numcan">---</span>
 </div>
-<div class="row">
+<div class="row even">
   <span class="label">NMEA2000 details</span>
   <input type="checkbox" id="showCanDetails"></span>
 </div>
 
-<div class="row" id="canDetails">
+<div class="row even" id="canDetails">
 
 </div>
 <div class="row">
   <span class="label"># TCP clients</span>
   <span class="value" id="numClients">---</span>
 </div>
-<div class="row">
+<div class="row even">
   <span class="label">wifi client connected</span>
   <span class="value" id="wifiConnected">---</span>
 </div>
@@ -486,7 +575,8 @@ div#overlayContent.text{
   <span class="value" id="clientIP">---</span>
 </div>
 <button id="reset" >Reset</button>
-<div class="configForm">
+</div>
+<div class="configForm tabPage hidden" id="configPage" >
   <div class="configFormRows">
 
   </div>