196 lines
3.7 KiB
C++
196 lines
3.7 KiB
C++
#include "web_service.h"
|
|
|
|
WebService::WebService(DashboardState& state)
|
|
:
|
|
Service("Web", 10),
|
|
dashboardState(state),
|
|
server(80),
|
|
webSocket(81)
|
|
{
|
|
}
|
|
|
|
|
|
String formatUptime() {
|
|
unsigned long seconds = millis() / 1000;
|
|
|
|
unsigned long days = seconds / 86400;
|
|
seconds %= 86400;
|
|
|
|
unsigned long hours = seconds / 3600;
|
|
seconds %= 3600;
|
|
|
|
unsigned long minutes = seconds / 60;
|
|
seconds %= 60;
|
|
|
|
char buffer[64];
|
|
snprintf(buffer, sizeof(buffer),
|
|
"%lu days %02lu:%02lu:%02lu",
|
|
days, hours, minutes, seconds);
|
|
|
|
return String(buffer);
|
|
}
|
|
|
|
String ROOT_HTML = R"rawliteral(
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ESP32 Dashboard</title>
|
|
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
text-align: center;
|
|
margin-top: 50px;
|
|
background: #111;
|
|
color: white;
|
|
}
|
|
|
|
.card {
|
|
background: #222;
|
|
padding: 25px;
|
|
margin: auto;
|
|
width: 80%;
|
|
max-width: 400px;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
h1 {
|
|
color: #00ff99;
|
|
}
|
|
|
|
#uptime {
|
|
font-size: 28px;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
|
|
let socket;
|
|
|
|
function connectWebSocket() {
|
|
socket = new WebSocket(
|
|
"ws://" + window.location.hostname + ":81/"
|
|
);
|
|
|
|
socket.onopen = function() {
|
|
console.log("WebSocket connected");
|
|
};
|
|
|
|
socket.onmessage = function(event) {
|
|
const data = JSON.parse(event.data);
|
|
|
|
document.getElementById("uptime").innerHTML = data.uptime;
|
|
document.getElementById("firmware_version").innerHTML = data.version;
|
|
};
|
|
|
|
socket.onclose = function() {
|
|
console.log("WebSocket disconnected");
|
|
setTimeout(connectWebSocket, 2000);
|
|
};
|
|
}
|
|
|
|
window.onload = connectWebSocket;
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="card">
|
|
<h1>ESP32 Dashboard OTA</h1>
|
|
<p>Device uptime:</p>
|
|
<div id="uptime">Loading...</div>
|
|
</div>
|
|
<footer>
|
|
Firmware Version: <div id="firmware_version">Loading...</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
)rawliteral";
|
|
|
|
void WebService::broadcastState()
|
|
{
|
|
String json = "{";
|
|
|
|
json += "\"uptime\":\"";
|
|
json += dashboardState.uptime;
|
|
json += "\",";
|
|
|
|
json += "\"version\":\"";
|
|
json += dashboardState.firmwareVersion;
|
|
json += "\"";
|
|
|
|
json += "}";
|
|
|
|
webSocket.broadcastTXT(json);
|
|
}
|
|
|
|
void WebService::begin() {
|
|
// Root path
|
|
server.on("/", [this](){
|
|
server.send(
|
|
200,
|
|
"text/html",
|
|
ROOT_HTML
|
|
);
|
|
});
|
|
|
|
server.begin();
|
|
|
|
webSocket.begin();
|
|
|
|
// Manage web socket connections
|
|
webSocket.onEvent(
|
|
[this](uint8_t clientNum,
|
|
WStype_t type,
|
|
uint8_t *payload,
|
|
size_t length)
|
|
{
|
|
if (type == WStype_TEXT) {
|
|
handleWebSocketMessage(
|
|
clientNum,
|
|
payload,
|
|
length
|
|
);
|
|
}
|
|
|
|
if (type == WStype_CONNECTED) {
|
|
Serial.println("WebSocket client connected");
|
|
broadcastState();
|
|
}
|
|
}
|
|
);
|
|
|
|
Serial.println("Web server started");
|
|
}
|
|
|
|
void WebService::handleWebSocketMessage(uint8_t clientNum, uint8_t *payload, size_t length) {
|
|
Serial.println("Client number: " + clientNum);
|
|
Serial.println("Sent a message of length: " + length);
|
|
Serial.print("Saying: ");
|
|
for (int ii = 0; ii < length; ii ++) {
|
|
Serial.print(payload[ii]);
|
|
}
|
|
Serial.print("\n\n\n");
|
|
}
|
|
|
|
|
|
void WebService::update()
|
|
{
|
|
dashboardState.update();
|
|
|
|
server.handleClient();
|
|
webSocket.loop();
|
|
|
|
// Brodcase updates once per second
|
|
static unsigned long lastUpdate = 0;
|
|
|
|
if (millis() - lastUpdate >= 1000)
|
|
{
|
|
lastUpdate = millis();
|
|
broadcastState();
|
|
}
|
|
}
|