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/NMEA2000_esp32 @ ^1.0.3
ttlappalainen/NMEA0183 @ ^1.7.1 ttlappalainen/NMEA0183 @ ^1.7.1
bblanchon/ArduinoJson@^6.18.5 bblanchon/ArduinoJson@^6.18.5
board_build.embed_txtfiles=
web/index.html
[env:m5stack-atom] [env:m5stack-atom]
board = m5stack-atom board = m5stack-atom
lib_deps = lib_deps =
${env.lib_deps} ${env.lib_deps}
build_flags= -D BOARD_M5ATOM build_flags= -D BOARD_M5ATOM
upload_port=/dev/esp32

20
src/main.cpp
View File

@ -35,7 +35,6 @@
#include "N2kDataToNMEA0183.h" #include "N2kDataToNMEA0183.h"
#include "List.h" #include "List.h"
#include "index_html.h"
#include "BoatData.h" #include "BoatData.h"
@ -67,6 +66,9 @@ IPAddress CL_subnet(255, 255, 255, 0);
int wifiType = 0; // 0= Client 1= AP 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 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. // UPD broadcast for Navionics, OpenCPN, etc.
@ -149,9 +151,12 @@ void debug_log(char* str) {
#endif #endif
} }
//embedded files
extern const char indexFile[] asm("_binary_web_index_html_start");
void web_index() // Wenn "http://<ip address>/" aufgerufen wurde 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 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() void handleNotFound()
{ {
webserver.send(404, "text/plain", "File Not Found\n\n"); webserver.send(404, "text/plain", "File Not Found\n\n");
@ -229,6 +242,7 @@ void setup() {
// Start Web Server // Start Web Server
webserver.on("/", web_index); webserver.on("/", web_index);
webserver.on("/api/reset", js_reset); webserver.on("/api/reset", js_reset);
webserver.on("/api/status", js_status);
webserver.onNotFound(handleNotFound); webserver.onNotFound(handleNotFound);
webserver.begin(); webserver.begin();
@ -297,7 +311,7 @@ void SendBufToClients(const char *buf) {
//NMEA 2000 message handler //NMEA 2000 message handler
void HandleNMEA2000Msg(const tN2kMsg &N2kMsg) { void HandleNMEA2000Msg(const tN2kMsg &N2kMsg) {
numCan++;
if ( !SendSeaSmart ) return; if ( !SendSeaSmart ) return;
char buf[MAX_NMEA2000_MESSAGE_SEASMART_SIZE]; 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> <!DOCTYPE html>
<html><head> <html><head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -9,7 +7,21 @@ const char indexHTML[] PROGMEM = R"=====(
<script type="text/javascript"> <script type="text/javascript">
function reset(){ function reset(){
fetch('/api/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> </script>
<style type="text/css"> <style type="text/css">
#wrap #wrap
@ -23,16 +35,27 @@ border-radius: 10px;
padding:10px; /*innen*/ padding:10px; /*innen*/
} }
span.label {
width: 10em;
display: inline-block;
opacity: 0.6;
}
.row {
margin: 0.5em;
}
</style> </style>
</head> </head>
<body> <body>
<div class="main"> <div class="main">
<h1>NMEA 2000 Gateway </h1> <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> <button id="reset" onclick="reset();">Reset</button>
</div> </div>
</body> </body>
</html> </html>
)=====" ;