Adds Floorplan viewing page

ZoneMinder · Nov 23, 2023 · 77ff85a · 77ff85a
1 parent e2bf8e4
commit 77ff85a
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 0 deletions.
diff --git a/web/floorplan.css b/web/floorplan.css
@@ -0,0 +1,12 @@
+html, body {
+    height: 100%;
+    margin: 0;
+}
+
+.blueprint {
+    width: 90%;height: 600px;display: block;/*background-image: url("House-Blueprint2.png");*/background-size: contain;background-repeat: no-repeat;left: 100px;position: absolute;z-index: 1;
+}
+
+.camera {
+    display: block;background-image: url("camera-svgrepo-com.svg");width: 40px;height: 40px;background-size: auto;position: absolute;background-repeat: no-repeat;z-index: 3;background-size: contain;
+}
diff --git a/web/floorplan.html b/web/floorplan.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="floorplan.js"></script>
+<link rel="stylesheet" type="text/css" href="floorplan.css">
+  <title>Overlay</title>
+</head>
+<body>
+
+<div id="floorView" class="blueprint">
+<!--  <div id="camera1" class="camera"> -->
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/web/floorplan.js b/web/floorplan.js
@@ -0,0 +1,83 @@
+// initial setup
+var xmlns = "http://www.w3.org/2000/svg";
+
+var cameras = new Array();
+var floorplans = {};
+const urlParams = new URLSearchParams(window.location.search);
+
+if (urlParams.has('floorplanid')) {
+currentFloorplanID = urlParams.get('floorplanid');
+}
+init();
+
+async function init() {
+  response = await fetch("api/monitors.json");
+  responseJson = await response.json();
+  monitors = responseJson.monitors;
+
+  response = await fetch("api/floorplans.json");
+  responseJson = await response.json();
+  floorplansobject = responseJson.Floorplans;
+  for (flpln of floorplansobject) { // convert the API response into more sane object
+    floorplans[flpln.Floorplan.id] = flpln.Floorplan.url
+  }
+
+  document.getElementById('floorView').style.backgroundImage = "url('" + floorplans[currentFloorplanID] + "')";  //set map background
+
+  for (const cameranum in monitors) {
+    var camera = monitors[cameranum];
+    if (camera.Monitor.FloorplanID == currentFloorplanID) {
+      newCamera = drawCamera(camera.Monitor.FloorplanX, camera.Monitor.FloorplanY, camera.Monitor.FloorplanPoint);
+      newCamera.Id = camera.Monitor.Id;
+      document.getElementById("floorView").appendChild(newCamera);
+      cameras.push(newCamera);
+    }
+  }
+
+
+//loop through the known cameras checking state
+
+
+
+
+//<polygon points="5,5 5,10 10,5" style="fill:yellow;stroke:yellow;stroke-width:1;fill-rule:nonzero;"></polygon>
+//$0.appendChild(svg);
+
+updateCameras();
+
+setInterval(updateCameras, 5000);
+}
+
+// Run every 5 seconds
+async function updateCameras() {
+  for (cameraNum in cameras) {
+    camera = cameras[cameraNum];
+    cameraStateResponse = await fetch("api/monitors/alarm/id:" + camera.Id + "/command:status.json");
+    cameraState = await cameraStateResponse.json();
+    if (cameraState.status == "false") {
+      camera.polygon.setAttribute("style", "fill:black;");
+    } else if (cameraState.status == 0) {
+      camera.polygon.setAttribute("style", "fill:green;");
+    } else if (cameraState.status == 2) {
+      camera.polygon.setAttribute("style", "fill:red;");
+    } else if (cameraState.status == 3) {
+      camera.polygon.setAttribute("style", "fill:orange;");
+    }
+  }
+}
+
+function drawCamera(X, Y, Point) {
+    cameraDiv = document.createElement("div");
+    cameraDiv.classList.add("camera");
+    cameraDiv.style.left = X.toString() + "px";
+    cameraDiv.style.top = Y.toString() + "px";
+    cameraDiv.style.rotate = Point.toString() + "deg";
+    cameraDiv.svg = document.createElementNS(xmlns, "svg");
+    cameraDiv.polygon = document.createElementNS(xmlns, "polygon");
+    cameraDiv.polygon.setAttribute("points", "33,20 60,10 60,30")
+    cameraDiv.polygon.setAttribute("style","fill:yellow;stroke:yellow;stroke-width:1;fill-rule:nonzero;")
+    cameraDiv.svg.appendChild(cameraDiv.polygon);
+    cameraDiv.appendChild(cameraDiv.svg);
+
+    return cameraDiv;
+}