Testing door sensor graphing

2021-10-11 16:23:18 +02:00 · 2021-10-11 16:23:18 +02:00 · a4ce890a36
commit a4ce890a36
parent 2ba0266fca
3 changed files with 125 additions and 1 deletions
--- a/www/door/graph.html
+++ b/www/door/graph.html
@ -0,0 +1,101 @@
+<!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>Inngangsverkstedet</title>
+</head>
+<body>
+    <!-- Felixalb 2021 -->
+    <h2>En kort analyse av nerders døgnrytme i deres naturlige habitat, PVV</h2>
+    <h3 id="infoText"></h3>
+    <canvas id="doorGraph1"></canvas>
+    <script src="./p5.min.js"></script>
+    <script>
+    
+    const infoEl = document.getElementById("infoText");
+    const graphEl1 = document.getElementById("doorGraph1");
+
+    const XHR = new XMLHttpRequest();
+    const url="/door/?period=day&edgeonly=true";
+    XHR.open("GET", url);
+    XHR.send();
+
+
+    XHR.onreadystatechange = ()=>{
+        if (XHR.readyState == 4 && XHR.status == 200) {
+            console.log("Response 200 from API")
+            response = JSON.parse(XHR.responseText);
+            if (response.status != "OK") {
+                infoEl.innerHTML = "Error when connecting to API.";
+                return
+            } else {
+                let datapoints = response.entries;
+                console.log("Success, " + datapoints.length + " datapoints received.");
+                // displayLineDiagram(graphEl1, datapoints);
+                displayBar(datapoints);
+            }
+        }
+    }
+
+    // function getDateString(time) {
+    //     let dateObj = new Date(time*1e3);
+    //     return dateObj.toLocaleString();
+    // }
+
+    // function displayLineDiagram(canv, data) {
+    //     let ctx = canv.getContext("2d");
+    //     let chart = new Chart(ctx, {
+    //         type: 'line',
+    //         data: {
+    //             labels: data.map(entry=> getDateString(entry.time)),
+    //             // labels: data.map(entry=> 1e3 * entry.time),
+    //             datasets: [{
+    //                 data: data.map(entry => entry.open)
+    //             }],
+    //         }
+    //     });
+    // }
+
+    function setup() {
+        createCanvas(800, 200);
+        noLoop();
+        background(50);
+    }
+    function draw() {}
+    function displayBar(data) {
+        const fullLength = 60*60*24;
+        // const dateObj = new Date();
+        const curTime = Math.floor(Date.now() / 1000)
+        let borderPositions = [0];
+        
+        //Convert timestamps to a position on the graph
+        for(let i = data.length-1; i > 0; i--) {
+            const ts = data[i]["time"];
+            const pixelPos = width - (((curTime - ts) / fullLength) * width);
+            borderPositions.push(pixelPos);
+        }
+
+        console.log(borderPositions);
+
+        let sectionColors = ["gray"];
+        //Define list of colors, gray=?, green=open, red=closed
+        for(let i = 0; i < data.length; i++) {
+            sectionColors.push((data[i]["open"]) ? "green" : "red");
+        }
+        console.log(sectionColors);
+        for(let i = 0; i < borderPositions.length-1; i++) {
+            fill(sectionColors[i]);
+            rect(borderPositions[i], 0, borderPositions[i+1], height);
+            console.log(`${sectionColors[i]} from ${borderPositions[i]}px to ${borderPositions[i+1]}px`)
+        }
+    }
+
+    
+
+    </script>
+    
+    <!-- <script src="./chart.min.js"></script> -->
+</body>
+</html>
--- a/www/door/index.php
+++ b/www/door/index.php
@ -27,6 +27,7 @@ if($_SERVER['REQUEST_METHOD'] === 'POST') {

    if (isset($_GET["period"])) {
        $period = (string)htmlspecialchars($_GET["period"]);
+        
        if ($period == "day") {
            $startTime = time() - (60*60*24);
        } else if ($period == "week") {
@ -37,6 +38,11 @@ if($_SERVER['REQUEST_METHOD'] === 'POST') {
        }

        $lines = $door->getEntriesAfter($startTime);
+        if (isset($_GET["period"]) && (bool)htmlspecialchars($_GET["edgeonly"])) {
+            //Ignore repeats
+            $lines = getChanges($lines);
+        }
+        
        echo json_encode([
            'status'        => "OK",
            'entries'       => $lines
@ -70,4 +76,18 @@ function handleSetState() {

    $door->createEvent((int)($event->time), (bool)($event->isDoorOpen));
    echo '{"status": "OK"}';
-} 
+} 
+
+function getChanges($items) {
+    $prevState = 2;
+    $res = [];
+
+    foreach($items as $item) {
+        if ($item["open"] !== $prevState) {
+            array_push($res, $item);
+            $prevState = $item["open"];
+        }
+    }
+
+    return $res;
+}
--- a/www/door/p5.min.js
+++ b/www/door/p5.min.js