diff options
| author | Clemens Fries <git-iot@xenoworld.de> | 2018-09-22 16:19:30 +0200 |
|---|---|---|
| committer | Clemens Fries <git-iot@xenoworld.de> | 2018-09-22 16:19:30 +0200 |
| commit | aa72712b30e43bd36968b7a52749f80963f66342 (patch) | |
| tree | af959bfeaf26106f3a1bd02d8a3f42740dbb7408 | |
| parent | c7c63ab77969e3b532079f0977495c7fc31334ba (diff) | |
Add a simple web site that displays the sensor data
This also adds an overly broad CORS policy, complying with best
industry practices for IoT.
| -rw-r--r-- | application.lua | 1 | ||||
| -rw-r--r-- | monitor-screenshot.png | bin | 0 -> 56701 bytes | |||
| -rw-r--r-- | monitor.html | 104 |
3 files changed, 105 insertions, 0 deletions
diff --git a/application.lua b/application.lua index ad90814..2474822 100644 --- a/application.lua +++ b/application.lua @@ -15,6 +15,7 @@ srv:listen(80,function(conn) -- local Tsgn = (T < 0 and -1 or 1); T = Tsgn*T conn:send(string.format([[HTTP/1.1 200 OK Content-Type: application/json +Access-Control-Allow-Origin: * Connection: close {"temperature": %s, "pressure": %s, "humidity": %s, diff --git a/monitor-screenshot.png b/monitor-screenshot.png Binary files differnew file mode 100644 index 0000000..38a6e80 --- /dev/null +++ b/monitor-screenshot.png diff --git a/monitor.html b/monitor.html new file mode 100644 index 0000000..c800543 --- /dev/null +++ b/monitor.html @@ -0,0 +1,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> |
