226 lines
5.2 KiB
HTML
226 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="UTF-8">
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="/chota.css">
|
|
|
|
<script src="/gauge.js"></script>
|
|
<script src="/logic.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<nav class="nav" style="margin-bottom: 50px;">
|
|
<div class="nav-left">
|
|
<a class="brand" href="#">Watermeter</a>
|
|
<div class="tabs">
|
|
<a class="active" href="/">Status</a>
|
|
<a href="/settings">Settings</a>
|
|
<a href="/export">Data export</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-3-lg">
|
|
<!--Sensor card-->
|
|
<div class="card">
|
|
<header>
|
|
<h4>Sensor information</h4>
|
|
</header>
|
|
<table class="tg">
|
|
<thead></thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Voltage: </td>
|
|
<td id="voltage">WAITING</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Current: </td>
|
|
<td id="current">WAITING</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Shunt Voltage: </td>
|
|
<td id="shunt_voltage">WAITING</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--Sensor card-->
|
|
<div class="card">
|
|
<header>
|
|
<h4>Water information</h4>
|
|
</header>
|
|
<table class="tg">
|
|
<thead></thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Waterlevel: </td>
|
|
<td id="level">WAITING</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Water volumen: </td>
|
|
<td id="liters">WAITING</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Percentage: </td>
|
|
<td id="percentage">WAITING</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--Update card-->
|
|
<div class="card">
|
|
<header>
|
|
<h4>Update Status</h4>
|
|
</header>
|
|
<table class="tg">
|
|
<thead></thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Current Version: </td>
|
|
<td id="current_fw">WAITING</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Newest Version: </td>
|
|
<td id="server_fw">WAITING</td>
|
|
</tr>
|
|
<tr>
|
|
<td><a class="button outline" href="/run_ota_update" id="update_button">UPDATE NOW</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-12 col-6-lg">
|
|
|
|
<canvas data-type="radial-gauge" id="main_gauge"></canvas>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12 col-3-lg">
|
|
<!--ESP Infor card-->
|
|
<div class="card">
|
|
<header>
|
|
<h4>ESP information</h4>
|
|
</header>
|
|
<table class="tg">
|
|
<thead></thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Uptime: </td>
|
|
<td id="uptime">XXX</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Heap usage: </td>
|
|
<td id="heap">XXX</td>
|
|
</tr>
|
|
<tr>
|
|
<td>CPU Temperature: </td>
|
|
<td id="temperature">XXX</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--WIFI card-->
|
|
<div class="card">
|
|
<header>
|
|
<h4>WiFi</h4>
|
|
</header>
|
|
<table class="tg">
|
|
<thead></thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Link: </td>
|
|
<td id="wifi_link">XX</td>
|
|
</tr>
|
|
<tr>
|
|
<td>SSID: </td>
|
|
<td id="wifi_ssid">XX</td>
|
|
</tr>
|
|
<tr>
|
|
<td>RSSI: </td>
|
|
<td id="wifi_rssi">XX</td>
|
|
</tr>
|
|
<tr>
|
|
<td>IP: </td>
|
|
<td id="wifi_ip">127.0.0.1</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--Ethernet card-->
|
|
<div class="card">
|
|
<header>
|
|
<h4>Ethernet</h4>
|
|
</header>
|
|
<table class="tg">
|
|
<thead></thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Link: </td>
|
|
<td id="eth_link">XX</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Speed: </td>
|
|
<td id="eth_speed">XX</td>
|
|
</tr>
|
|
<tr>
|
|
<td>IP: </td>
|
|
<td id="eth_ip">xxx</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
<style>
|
|
.outer-wrapper {
|
|
display: inline-block;
|
|
margin: 5px 15px;
|
|
padding: 25px 15px;
|
|
background: #eee;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.column-wrapper {
|
|
height: 400px;
|
|
width: 20px;
|
|
background: #CFD8DC;
|
|
transform: rotate(180deg);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.column {
|
|
width: 20px;
|
|
height: 25%;
|
|
background: #1900ff;
|
|
}
|
|
|
|
.percentage,
|
|
.value {
|
|
margin-top: 10px;
|
|
padding: 5px 10px;
|
|
color: #FFF;
|
|
background: #263238;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.value {
|
|
background: #7986CB;
|
|
}
|
|
|
|
.card {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style> |