-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (79 loc) · 2.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Weather Station</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
</head>
<body>
<h1>Weather Station</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [{{ range .Times }} {{ . }}, {{ end }}],
datasets: [{
label: 'Temperature',
data: [{{range .Temperatures}} {{.}}, {{end}}],
borderColor: '#D21404',
yAxisID: 'yTemp',
cubicInterpolationMode: 'monotone',
tension: 0.4
},
{
label: 'Humidity',
data: [{{range .Humidities}} {{.}}, {{end}}],
borderColor: '#33CCCC',
yAxisID: 'yHumidity',
cubicInterpolationMode: 'monotone',
tension: 0.4
}]
},
options: {
scales: {
yTemp: {
display: true,
suggestedMin: 0,
suggestedMax: 50,
title: {
display: true,
text: 'Temperature (°C)'
}
},
yHumidity: {
display: true,
suggestedMin: 0,
suggestedMax: 100,
title: {
display: true,
text: 'Humidity (%)'
}
}
}
}
});
</script>
<form method="post">
<div>
<label>Min temperature °C:</label>
<input type="number" name="mintemperature" value="{{.MinTemperature}}">
</div>
<div>
<label>Max temperature °C:</label>
<input type="number" name="maxtemperature" value="{{.MaxTemperature}}">
</div>
<div>
<label>Min humidity %:</label>
<input type="number" name="minhumidity" value="{{.MinHumidity}}">
</div>
<div>
<label>Max humidity %:</label>
<input type="number" name="maxhumidity" value="{{.MaxHumidity}}">
</div>
<button>Change safe boundries</button>
</form>
</body>
</html>