aboutsummaryrefslogtreecommitdiffstats
path: root/monitor.html
blob: c800543e704a1f2ce34b265f5ee82cc99112791f (plain)
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<html>
	<head>
		<title>Aktuelles Balkonwetter</title>
		<meta charset="UTF-8">

		<style type="text/css">
			.light {
				background: white;
				color: black;
			}

			.dark {
				background: black;
				color: white;
			}

			.grid {
				display: grid;
				grid-template-columns: auto auto auto;
				grid-template-rows: 5% 35%;
				gap: 3em;
				height: 70%;
				margin-top: 5%;
				margin-bottom: 5%;
			}

			.item {
				font-size: 2vw;
				text-align: center;
			}

			.item span:first-of-type {
				font-size: 5vw;
				font-weight: bold;
			}

			.item .unit {
				font-size: 3vw;
			}
		</style>
	</head>
	<body>
		<div class="grid">
			<div class="item">Temperatur</div>
			<div class="item">Luftfeuchte</div>
			<div class="item">Luftdruck</div>

			<div class="item">
				<span id="temperature"></span><br/> <span class="unit">°C</span>
			</div>
			<div class="item">
				<span id="humidity"></span><br/> <span class="unit">%</span>
			</div>
			<div class="item">
				<span id="pressure"></span><br/> <span class="unit">hPa</span>
			</div>

			<div class="item">Licht</div>
			<div class="item">Infrarot</div>
			<div class="item">Breitband</div>

			<div class="item">
				<span id="lux"></span><br/> <span class="unit">lux</span>
			</div>
			<div class="item">
				<span id="luxIr"></span><br/> <span class="unit">lux</span>
			</div>
			<div class="item">
				<span id="luxBs"></span><br/> <span class="unit">lux</span>
			</div>
		</div>

		<script>
			function dot(num) {
				return num.toString().replace('.', ',');
			}

			function p(data) {
				document.getElementById("temperature").innerHTML = dot(data.temperature / 100.0);
				document.getElementById("humidity").innerHTML = dot(data.humidity / 1000.0);
				document.getElementById("pressure").innerHTML = dot(data.pressure / 1000.0);
				document.getElementById("lux").innerHTML = data.lux;
				document.getElementById("luxIr").innerHTML = data.lux_ir;
				document.getElementById("luxBs").innerHTML = data.lux_bs;

				if (data.lux < 100) {
					document.body.className = "dark";
				} else {
					document.body.className = "light";
				}
			}

			function refresh() {
				fetch("http://sensor.example.net")
					.then(res => res.json())
					.then((json) => p(json))
					.catch(err => { throw err });
			}

			window.setInterval(refresh, 15000);
			window.setTimeout(refresh, 100);
		</script>
	</body>
</html>