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

improved web page, some initial status

This commit is contained in:
andreas 2021-10-15 21:09:36 +02:00
parent 29cee9bae7
commit 7e1b9a6ce6
3 changed files with 46 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
platformio.ini
View File

@ -16,9 +16,12 @@ lib_deps =
ttlappalainen/NMEA2000_esp32 @ ^1.0.3
ttlappalainen/NMEA0183 @ ^1.7.1
bblanchon/ArduinoJson@^6.18.5
board_build.embed_txtfiles=
web/index.html
[env:m5stack-atom]
board = m5stack-atom
lib_deps =
${env.lib_deps}
build_flags= -D BOARD_M5ATOM
upload_port=/dev/esp32

20
src/main.cpp
View File

@ -35,7 +35,6 @@
#include "N2kDataToNMEA0183.h"
#include "List.h"
#include "index_html.h"
#include "BoatData.h"
@ -67,6 +66,9 @@ IPAddress CL_subnet(255, 255, 255, 0);
int wifiType = 0; // 0= Client 1= AP
//counter
int numCan=0;
const uint16_t ServerPort = 2222; // Define the port, where server sends data. Use this e.g. on OpenCPN. Use 39150 for Navionis AIS
// UPD broadcast for Navionics, OpenCPN, etc.
@ -149,9 +151,12 @@ void debug_log(char* str) {
#endif
}
//embedded files
extern const char indexFile[] asm("_binary_web_index_html_start");
void web_index() // Wenn "http://<ip address>/" aufgerufen wurde
{
webserver.send(200, "text/html", indexHTML); //dann Index Webseite senden
webserver.send(200, "text/html", indexFile); //dann Index Webseite senden
}
void js_reset() // Wenn "http://<ip address>/gauge.min.js" aufgerufen wurde
@ -161,6 +166,14 @@ void js_reset() // Wenn "http://<ip address>/gauge.min.js" aufgerufen wurde
}
void js_status(){
DynamicJsonDocument status(50);
status["numcan"]=numCan;
String buf;
serializeJson(status,buf);
webserver.send(200,F("application/json"),buf);
}
void handleNotFound()
{
webserver.send(404, "text/plain", "File Not Found\n\n");
@ -229,6 +242,7 @@ void setup() {
// Start Web Server
webserver.on("/", web_index);
webserver.on("/api/reset", js_reset);
webserver.on("/api/status", js_status);
webserver.onNotFound(handleNotFound);
webserver.begin();
@ -297,7 +311,7 @@ void SendBufToClients(const char *buf) {
//NMEA 2000 message handler
void HandleNMEA2000Msg(const tN2kMsg &N2kMsg) {
numCan++;
if ( !SendSeaSmart ) return;
char buf[MAX_NMEA2000_MESSAGE_SEASMART_SIZE];

29
src/index_html.h → web/index.html
View File

@ -1,5 +1,3 @@
const char indexHTML[] PROGMEM = R"=====(
<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -9,7 +7,21 @@ const char indexHTML[] PROGMEM = R"=====(
<script type="text/javascript">
function reset(){
fetch('/api/reset');
alert("Board reset triggered, reconnect WLAN if necessary");
}
function update(){
fetch('/api/status')
.then(function(resp){
return resp.json()
})
.then(function(jsonData){
for (let k in jsonData){
let el=document.getElementById(k);
if (el) el.textContent=jsonData[k];
}
})
}
window.setInterval(update,1000);
</script>
<style type="text/css">
#wrap
@ -23,16 +35,27 @@ border-radius: 10px;
padding:10px; /*innen*/
}
span.label {
width: 10em;
display: inline-block;
opacity: 0.6;
}
.row {
margin: 0.5em;
}
</style>
</head>
<body>
<div class="main">
<h1>NMEA 2000 Gateway </h1>
<div class="row">
<span class="label"># CAN messages</span>
<span class="value" id="numcan">---</span>
</div>
<button id="reset" onclick="reset();">Reset</button>
</div>
</body>
</html>
)=====" ;