<!DOCTYPE html> <html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <title>NMEA 2000 Gateway</title> <script type="text/javascript"> let lastUpdate=(new Date()).getTime(); function alertRestart(){ alert("Board reset triggered, reconnect WLAN if necessary"); } function getJson(url){ return fetch(url) .then(function(r){return r.json()}); } function reset(){ fetch('/api/reset'); alertRestart(); } function update(){ let now=(new Date()).getTime(); let ce=document.getElementById('connected'); if (ce){ if ((lastUpdate+3000) > now){ ce.classList.add('ok'); } else{ ce.classList.remove('ok'); } } getJson('/api/status') .then(function(jsonData){ for (let k in jsonData){ if (k == 'cnv'){ updateCanDetails(jsonData[k]); } else{ let el=document.getElementById(k); if (el) el.textContent=jsonData[k]; } } lastUpdate=(new Date()).getTime(); }) } function resetForm(ev){ getJson("/api/config") .then(function(jsonData){ for (let k in jsonData){ let el=document.querySelector("[name='"+k+"']"); if (el){ let v=jsonData[k]; el.value=v; } } }); } function changeConfig(){ let url="/api/setConfig?"; let values=document.querySelectorAll('.configForm select , .configForm input'); for (let i=0;i<values.length;i++){ let v=values[i]; url+=v.getAttribute('name')+"="+encodeURIComponent(v.value)+"&"; } getJson(url) .then(function(status){ if(status.status == 'OK'){ alertRestart(); } else{ alert("unable to set config: "+status.status); } }) } function factoryReset(){ getJson("/api/resetConfig") .then(function(status){ alertRestart(); }) } function showCanDetails(on){ let el=document.getElementById('canDetails'); if (!el) return; if (on) el.classList.add('visible'); else(el.classList).remove('visible'); } function updateCanDetails(details){ let frame=document.getElementById('canDetails'); if (! frame) return; for (let k in details){ let el=frame.querySelector("[data-id=\""+k+"\"] "); if (!el){ el=document.createElement('div'); el.classList.add('row'); let cv=document.createElement('span'); cv.classList.add('label'); cv.textContent="PGN"+k; el.appendChild(cv); cv=document.createElement('span'); cv.classList.add('value'); cv.setAttribute('data-id',k); cv.textContent=details[k]; el.appendChild(cv); frame.appendChild(el); } else{ el.textContent=details[k]; } } } window.setInterval(update,1000); window.addEventListener('load',function(){ let buttons=document.querySelectorAll('button'); for (let i=0;i<buttons.length;i++){ let be=buttons[i]; be.onclick=window[be.id]; //assume a function with the button id } let cd=document.getElementById("showCanDetails"); cd.addEventListener('change',function(ev){ showCanDetails(ev.target.checked); }); resetForm(); }); </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; } span.label { width: 10em; display: inline-block; opacity: 0.6; } span#connected { display: inline-block; background-color: red; width: 1em; height: 1em; border-radius: 50%; } span#connected.ok{ background-color: #13ac13; } .row { margin: 0.5em; } .buttons { padding-left: 1em; } #canDetails{ display:none; } #canDetails.visible{ display: block; } </style> </head> <body> <div class="main"> <h1>NMEA 2000 Gateway </h1> <div class="row"> <span class="label">VERSION</span> <span class="value" id="version">---</span> </div> <div class="row"> <span class="label">connected</span> <span class="value" id="connected"></span> </div> <div class="row"> <span class="label">Access Point IP</span> <span class="value" id="apIp">---</span> </div> <div class="row"> <span class="label"># NMEA2000 messages</span> <span class="value" id="numcan">---</span> </div> <div class="row"> <span class="label">NMEA2000 details</span> <input type="checkbox" id="showCanDetails"></span> </div> <div class="row" id="canDetails"> </div> <div class="row"> <span class="label"># TCP clients</span> <span class="value" id="numClients">---</span> </div> <div class="row"> <span class="label">wifi client connected</span> <span class="value" id="wifiConnected">---</span> </div> <div class="row"> <span class="label">wifi client IP</span> <span class="value" id="clientIP">---</span> </div> <button id="reset" >Reset</button> <div class="configForm"> <div class="row"> <span class="label">system name</span> <input name="systemName" type="text"> </div> <div class="row"> <span class="label">NMEAtoUSB</span> <select name="sendUsb"> <option value="true">On</option> <option value="false" selected="selected">Off</option> </select> </div> <!--"1200","2400","4800","9600","14400","19200","28800","38400","57600","115200","230400","460800"--> <div class="row"> <span class="label">USB baud rate</span> <select name="usbBaud"> <option value="1200">1200</option> <option value="2400">2400</option> <option value="4800">4800</option> <option value="9600">9600</option> <option value="14400">14400</option> <option value="19200">19200</option> <option value="28800">28800</option> <option value="38400">38400</option> <option value="57600">57600</option> <option value="115200">115200</option> <option value="230400">230400</option> <option value="460800">460800</option> </select> </div> <div class="row"> <span class="label">TCP Port</span> <input name="serverPort" type="number"> </div> <div class="row"> <span class="label">maxTCPClients</span> <input name="maxClients" type="number"> </div> <div class="row"> <span class="label">NMEAtoTCP</span> <select name="sendTCP"> <option value="true">On</option> <option value="false" selected="selected">Off</option> </select> </div> <div class="row"> <span class="label">SeasmartToTCP</span> <select name="sendSeasmart"> <option value="true">On</option> <option value="false" selected="selected">Off</option> </select> </div> <div class="row"> <span class="label">shutdown AP after (min)</span> <input name="stopApTime" type="number"> </div> <div class="row"> <span class="label">wifiClient</span> <select name="wifiClient"> <option value="true">On</option> <option value="false" selected="selected">Off</option> </select> </div> <div class="row"> <span class="label">wifiClientPass</span> <input name="wifiPass" type="text"> </div> <div class="row"> <span class="label">wifiClientSSID</span> <input name="wifiSSID" type="text"> </div> <div class="buttons"> <button id="resetForm">ReloadConfig</button> <button id="changeConfig">Save&Restart</button> <button id="factoryReset">FactoryReset</button> </div> </div> </div> </body> </html>