reorg to use ZM infrastructure

web/skins/classic/css/base/views/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;
+}

web/skins/classic/views/floorplan.php

@@ -0,0 +1,31 @@
+<?php     
+//        
+// ZoneMinder floorplan view
+// Copyright (C) 2022 ZoneMinder Inc
+//      
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//        
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+//
+xhtmlHeaders(__FILE__, translate('Floorplan'));
+getBodyTopHTML();
+echo getNavBarHTML();
+?>
+  <div id="content">
+    <div id="floorView" class="blueprint">
+    <!--  <div id="camera1" class="camera"> -->
+    </div>
+  </div>
+<?php
+xhtmlFooter()
+?>

web/skins/classic/views/js/floorplan.js

@@ -0,0 +1,76 @@
+// initial setup
+const xmlns = "http://www.w3.org/2000/svg";
+
+const cameras = new Array();
+const 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;
+}