From 5ec4dbcecf2d6e5dc74aa8119bde5410e3097314 Mon Sep 17 00:00:00 2001 From: andreas Date: Sat, 6 Nov 2021 17:56:57 +0100 Subject: [PATCH] tabbed view in UI, config categories --- web/config.json | 93 ++++++++++++++++---------- web/index.html | 172 ++++++++++++++++++++++++++++++++++++------------ 2 files changed, 191 insertions(+), 74 deletions(-) diff --git a/web/config.json b/web/config.json index 588c62f..f772808 100644 --- a/web/config.json +++ b/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" - }, - { - "name": "stopApTime", - "type": "number", - "default": "0", - "check": "checkStopApTime", - "description": "stop the access point after that many minutes if not used" + "description": "the SSID for an external WIFI network", + "category":"wifi client" } diff --git a/web/index.html b/web/index.html index 4ab47bd..8a7915f 100644 --- a/web/index.html +++ b/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'); - row.classList.add('row'); + let row = addEl('div','row',categoryEl); let label = item.label || item.name; - let labelEl = document.createElement('span'); - labelEl.classList.add('label'); - labelEl.textContent = label; - row.appendChild(labelEl); - let valueFrame=document.createElement("div"); - valueFrame.classList.add("value"); - row.appendChild(valueFrame); + addEl('span','label',row,label); + let valueFrame=addEl('div','value',row); 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"); - btContainer.classList.add("buttonContainer"); - row.appendChild(btContainer); - let bt = document.createElement('button'); - bt.classList.add('defaultButton'); + let btContainer=addEl('div','buttonContainer',row); + let bt = addEl('button','defaultButton',btContainer,'X'); 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"; - btContainer.appendChild(bt); - bt = document.createElement('button'); - bt.classList.add('infoButton'); + bt = addEl('button','infoButton',btContainer,'?'); bt.addEventListener('click', function (ev) { showOverlay(item.description); }); - bt.textContent = "?"; - btContainer.appendChild(bt); - frame.appendChild(row); }) resetForm(); }) @@ -338,6 +347,22 @@ text+="

"; 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

NMEA 2000 Gateway

+
+ connected + +
+
+
Status
+
Config
+
+
VERSION ---
-
- connected - -
-
+ +
Access Point IP ---
@@ -465,19 +554,19 @@ div#overlayContent.text{ # NMEA2000 messages ---
-
+
NMEA2000 details
-
+
# TCP clients ---
-
+
wifi client connected ---
@@ -486,7 +575,8 @@ div#overlayContent.text{ ---
-
+
+