108 lines
4.3 KiB
HTML
108 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ESP-Ventilation</title>
|
|
<link rel="stylesheet" href="style.css" type="text/css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" defer></script>
|
|
<script src="main.js" defer></script>
|
|
<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript" defer></script>
|
|
</head>
|
|
<body onload="updateChart(), sendPressure()">
|
|
<header>
|
|
<h1>ESP-Ventilation</h1>
|
|
</header>
|
|
<main>
|
|
<div class="modes">
|
|
<br>
|
|
<div class="buttons">
|
|
<input type="radio" id="m_auto" name="mode" value="Automatic" checked="true">
|
|
<label for="auto">Automatic</label><br>
|
|
</div>
|
|
<div class="buttons">
|
|
<input type="radio" id="m_man" name="mode" value="Manual">
|
|
<label for="man">Manual</label><br>
|
|
</div>
|
|
</div>
|
|
<div class="set_values">
|
|
<div class="field">
|
|
<div class="ofield">
|
|
<h3>Set pressure value</h3>
|
|
<output class="set_output" id="set_press">10 Pa</output>
|
|
<input class="slider" id="pressure" type="range" value="10" max="120" oninput="set_press.value = this.value + ' Pa'">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ofield">
|
|
<h3>Set fan speed</h3>
|
|
<output class="set_output" id="set_speed">0 %</output>
|
|
<input class="slider" id="speed" type="range" value="0" max="100" oninput="set_speed.value = this.value + ' %'" disabled="true">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br><br>
|
|
|
|
<div class="get_values">
|
|
<div class="field">
|
|
<div class="ifield">
|
|
<h3>Pressure</h3>
|
|
<output class="get_output" id="get_press">0</output>
|
|
<h4>Pa</h4>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ifield">
|
|
<h3>Fan speed</h3>
|
|
<output class="get_output" id="get_speed">0</output>
|
|
<h4>%</h4>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ifield">
|
|
<h3>CO2</h3>
|
|
<output class="get_output" id="get_co">0</output>
|
|
<h4>ppm</h4>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ifield">
|
|
<h3>Temperature</h3>
|
|
<output class="get_output" id="get_temp">0</output>
|
|
<h4>℃</h4>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ifield">
|
|
<h3>Relative Humidity</h3>
|
|
<output class="get_output" id="get_rh">0</output>
|
|
<h4>%</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<aside>
|
|
<br>
|
|
<h2>Data history</h2>
|
|
<br>
|
|
<div class="chart-container">
|
|
<div class="dropdown">
|
|
<label for="data">Filter data:</label>
|
|
<select name="data" id="data">
|
|
<option value="all">All</option>
|
|
<option value="hour">Last hour</option>
|
|
<option value="day">Last 24 hours</option>
|
|
<option value="week">Last week</option>
|
|
</select>
|
|
</div>
|
|
<canvas id="dataChart" width="600px" height="300px"></canvas>
|
|
</div>
|
|
</aside>
|
|
|
|
|
|
</body>
|
|
</html> |