mirror of
https://github.com/ZoneMinder/zoneminder.git
synced 2026-01-01 18:57:59 -05:00
84 lines
2.8 KiB
JavaScript
84 lines
2.8 KiB
JavaScript
// 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;
|
||
}
|