Testing door sensor graphing
This commit is contained in:
parent
2ba0266fca
commit
a4ce890a36
|
|
@ -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>
|
||||||
|
|
@ -27,6 +27,7 @@ if($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
|
|
||||||
if (isset($_GET["period"])) {
|
if (isset($_GET["period"])) {
|
||||||
$period = (string)htmlspecialchars($_GET["period"]);
|
$period = (string)htmlspecialchars($_GET["period"]);
|
||||||
|
|
||||||
if ($period == "day") {
|
if ($period == "day") {
|
||||||
$startTime = time() - (60*60*24);
|
$startTime = time() - (60*60*24);
|
||||||
} else if ($period == "week") {
|
} else if ($period == "week") {
|
||||||
|
|
@ -37,6 +38,11 @@ if($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
}
|
}
|
||||||
|
|
||||||
$lines = $door->getEntriesAfter($startTime);
|
$lines = $door->getEntriesAfter($startTime);
|
||||||
|
if (isset($_GET["period"]) && (bool)htmlspecialchars($_GET["edgeonly"])) {
|
||||||
|
//Ignore repeats
|
||||||
|
$lines = getChanges($lines);
|
||||||
|
}
|
||||||
|
|
||||||
echo json_encode([
|
echo json_encode([
|
||||||
'status' => "OK",
|
'status' => "OK",
|
||||||
'entries' => $lines
|
'entries' => $lines
|
||||||
|
|
@ -70,4 +76,18 @@ function handleSetState() {
|
||||||
|
|
||||||
$door->createEvent((int)($event->time), (bool)($event->isDoorOpen));
|
$door->createEvent((int)($event->time), (bool)($event->isDoorOpen));
|
||||||
echo '{"status": "OK"}';
|
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;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue