mirror of
https://github.com/dustinbrun/ESP32_Modbus_RTU_Power_Meter.git
synced 2026-07-05 09:00:38 +00:00
dustinbrun
70 lines
2.0 KiB
HTML
70 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>Powermeter Dashboard</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
<link rel="icon" type="image/png" href="icon.png">
|
|
<script src="chart.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="topnav">
|
|
<h1>Powermeter Dashboard</h1>
|
|
</div>
|
|
<div class="content">
|
|
<div class="card-grid">
|
|
<div class="card">
|
|
<p class="card-title">Power</p>
|
|
<p class="reading"><span id="P_W"></span> W</p>
|
|
</div>
|
|
<div class="card">
|
|
<p class="card-title">Current</p>
|
|
<p class="reading"><span id="I_A"></span> A</p>
|
|
</div>
|
|
<div class="card">
|
|
<p class="card-title">Voltage</p>
|
|
<p class="reading"><span id="U_V"></span> V</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<p class="card-title">Configuration</p>
|
|
<p>Update Interval: <input type="number" id="interval" min="1" value="500"></p>
|
|
<p>Plot Diagrams?: <input type="checkbox" id="plot_diagrams" name="plot_diagrams" checked></p>
|
|
<p>Diagram max. Number of Values: <input type="number" id="num_values" min="1" value="100"></p>
|
|
<button onclick="button_export()">Export Data</button>
|
|
<button onclick="button_clear()">Clear Diagrams</button>
|
|
<button onclick="button_apply()">Apply</button>
|
|
<p id="output_last_update"></p>
|
|
<p id="output_online"></p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="card-grid_graph">
|
|
<div class="card">
|
|
<p class="card-title">Power Graph</p>
|
|
<canvas id="graph_P_W" width="8" height="6"></canvas>
|
|
</div>
|
|
<div class="card">
|
|
<p class="card-title">Current Graph</p>
|
|
<canvas id="graph_I_A" width="8" height="6"></canvas>
|
|
</div>
|
|
<div class="card">
|
|
<p class="card-title">Voltage Graph</p>
|
|
<canvas id="graph_U_V" width="8" height="6"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="updater_script.js"></script>
|
|
</body>
|
|
|
|
</html> |