ZoneMinder
/
zoneminder
mirror of https://github.com/ZoneMinder/zoneminder.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Move map generation into an Object so it can be reused.

pull/3669/merge
iconnor@connortechnology.com 2023-02-22 17:25:15 -05:00
parent 155502ee32
commit afcf55608e
2 changed files with 151 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
web/js/Map.js Executable file
View File

@ -0,0 +1,149 @@
'use strict';
var _createClass = function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
} return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Map = function() {
function Map(json) {
_classCallCheck(this, Map);
for (var k in json) {
this[k] = json[k];
}
this.map = L.map('map-template', {
center: L.latLng(44.30597010, -80.39925430),
zoom : 4
});
L.tileLayer(ZM_OPT_GEOLOCATION_TILE_PROVIDER, {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: ZM_OPT_GEOLOCATION_ACCESS_TOKEN,
detectRetina: true
}).addTo(this.map);
this.map.invalidateSize();
this.iconoDesconectada = L.icon({
iconUrl: 'skins/classic/graphics/icon-disconnected.png',
iconSize: [25, 41], // size of the icon
iconAnchor: [13, 41], // point of the icon which will correspond to marker's location
});
this.iconoConectada = L.icon({
iconUrl: 'skins/classic/graphics/icon-connected.png',
iconSize: [25, 41], // size of the icon
iconAnchor: [13, 41], // point of the icon which will correspond to marker's location
});
this.iconoError = L.icon({
iconUrl: 'skins/classic/graphics/icon-error.png',
iconSize: [25, 41], // size of the icon
iconAnchor: [13, 41], // point of the icon which will correspond to marker's location
});
}
_createClass(Map, [
{
key: 'addMonitors',
value: function addMonitors() {
const server = new Server(Servers[serverId]);
const get_monitors_promise = server.getFromApi('/monitors.json');
get_monitors_promise
.then(response=>{return response.json();})
.then(monitors => {
console.log(monitors);
var cant_connected = 0;
var cant_disconnected = 0;
var cant_error = 0;
let total_cameras = 0;
var div_connected = document.getElementById("progress-connected");
var div_disconnected = document.getElementById("progress-disconnected");
var div_error = document.getElementById("progress-error");
for (let i=0, len = monitors.monitors.length; i<len; i++) {
const monitor = monitors.monitors[i].Monitor;
console.log(monitor);
if (!(monitor.Latitude && monitor.Longitude)) {
console.log("Monitor", monitor.Name, "Has no latitude or longitude");
continue;
}
const monitor_status = monitors["monitors"][i]["Monitor_Status"];
const event_summary = monitors["monitors"][i]["Event_Summary"];
const server = new Server(Servers[monitor.ServerId]);
const id = monitor["Id"];
const fps = monitor_status["CaptureFPS"];
const res = monitor["Width"]+"x"+monitor["Height"];
const events = event_summary["TotalEvents"];
const url_to_zms = server.urlToZMS()+'?scale=60&mode=single&monitor='+id+(auth_relay?'&'+auth_relay:'');
const popup = '<a href="'+thisUrl+'?view=watch&mid='+monitor.Id+'">'+monitor.Name+'</a><br>Resolution: '+res+'<br>FPS: '+fps+'<br><a href="?view=watch&mid='+id+'"><img width="400" style="width: 200px;" src="'+url_to_zms+'"/></a><br/>Events: '+events;
if (event_summary.TotalEvents > 0) {
if (monitor_status.Status == 'Connected') {
L.marker([monitor.Latitude, monitor.Longitude], {icon: this.iconoConectada})
.addTo(this.map).bindPopup(popup);
//.addTo(map).bindTooltip(popup);
cant_connected += 1;
} else {
L.marker([monitor.Latitude, monitor.Longitude], {icon: this.iconoDesconectada})
.addTo(this.map).bindPopup(popup);
//.addTo(map).bindTooltip(popup);
cant_disconnected += 1;
}
} else {
L.marker([monitor.Latitude, monitor.Longitude], {icon: this.iconoError})
.addTo(this.map).bindPopup(popup);
cant_error += 1;
}
total_cameras += 1;
} // end foreach monitor
const percent_connected = Number.parseFloat(((cant_connected*100)/total_cameras)).toFixed(2);
const percent_disconnected = Number.parseFloat(((cant_disconnected*100)/total_cameras)).toFixed(2);
const percent_error = Number.parseFloat(((cant_error*100)/total_cameras)).toFixed(2);
div_connected.style.width = percent_connected+"%";
div_connected.innerHTML = percent_connected+"%";
document.getElementById("progress-connected-title").style.width = percent_connected+"%";
document.getElementById("progress-connected-title").innerHTML = 'Connected';
div_disconnected.style.width = percent_disconnected+"%";
div_disconnected.innerHTML = percent_disconnected+"%";
document.getElementById("progress-disconnected-title").style.width = percent_disconnected+"%";
document.getElementById("progress-disconnected-title").innerHTML = 'Disconnected';
div_error.style.width = percent_error+"%";
div_error.innerHTML = percent_error+"%";
document.getElementById("progress-error-title").style.width = percent_error+"%";
document.getElementById("progress-error-title").innerHTML = "ERROR";
}); // end promise
}
} // end addMonitors
]);
return Map;
}();

145
web/skins/classic/views/js/map.js
View File

@ -1,143 +1,2 @@
/*
* En la variable map esta inicialiando el mapa para ellos usamos la constante L que instancia leaflet para el manejo de mapas.
* el setView se usa para decirle a leaflet donde se centrar nuestro mapa y le pasamos lo valores de latitud y longitud, el valor de 10 indica el nivel de zoom por defecto.
*/
const map = L.map('map-template', {
center: L.latLng(44.30597010, -80.39925430),
zoom : 8 });
L.tileLayer(ZM_OPT_GEOLOCATION_TILE_PROVIDER, {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: ZM_OPT_GEOLOCATION_ACCESS_TOKEN,
detectRetina: true
}).addTo(map);
map.invalidateSize();
//L.Control.geocoder().addTo(map);
var iconoDesconectada = L.icon({
iconUrl: 'skins/classic/graphics/icon-disconnected.png',
iconSize: [25, 41], // size of the icon
iconAnchor: [13, 41], // point of the icon which will correspond to marker's location
});
var iconoConectada = L.icon({
iconUrl: 'skins/classic/graphics/icon-connected.png',
iconSize: [25, 41], // size of the icon
iconAnchor: [13, 41], // point of the icon which will correspond to marker's location
});
var iconoError = L.icon({
iconUrl: 'skins/classic/graphics/icon-error.png',
iconSize: [25, 41], // size of the icon
iconAnchor: [13, 41], // point of the icon which will correspond to marker's location
});
//-------------Agregado por Matias Figueroa ------------
//Funcion para obtener direccion del servidor
var wwwUrlPath = window.document.location.href;
// Obtengo el directorio después de la dirección del host,
var pathName = window.document.location.pathname;
var pos = wwwUrlPath.indexOf(pathName);
// Dirección del servidor
var localhostPath = wwwUrlPath.substring(0, pos);
//-------------------Fin agregado------------------
const server = new Server(Servers[serverId]);
//const requestURL = server.UrlToApi()+'/monitors.json'+(auth_hash ? '?auth=' + auth_hash : '');
const requestURL = 'https://zm.connortechnology.com/api/monitors.json'+(auth_hash ? '?auth=' + auth_hash : '');
const request = new XMLHttpRequest();
var monitors = {};
request.open('GET', requestURL, open);
request.responseType = 'json';
request.send();
request.onload = function() {
if (!request.response) {
alert("Error gettings monitor data");
return;
}
monitors = request.response;
console.log(monitors);
var cantidadMonitors = monitors.monitors.length;
var lat;
var long;
var nombre;
var estado;
var fps;
var res;
var id;
var events;
var cant_conectadas = 0;
var cant_desconectadas = 0;
var cant_error = 0;
let total_cameras = 0;
var div_conectadas = document.getElementById("progress-conectadas");
var div_desconectadas = document.getElementById("progress-desconectadas");
var div_error = document.getElementById("progress-error");
for (let i=0, len = monitors.monitors.length; i < len; i++) {
const monitor = monitors["monitors"][i]["Monitor"];
console.log(monitor);
const monitor_status = monitors["monitors"][i]["Monitor_Status"];
const event_summary = monitors["monitors"][i]["Event_Summary"];
const server = new Server(Servers[monitor.ServerId]);
id = monitor["Id"];
nombre = monitors["monitors"][i]["Monitor"]["Name"];
estado = monitors["monitors"][i]["Monitor_Status"]["Status"];
fps = monitors["monitors"][i]["Monitor_Status"]["CaptureFPS"];
res = monitors["monitors"][i]["Monitor"]["Width"]+"x"+monitors["monitors"][i]["Monitor"]["Height"];
events = monitors["monitors"][i]["Event_Summary"]["TotalEvents"];
if (!(monitor.Latitude && monitor.Longitude)) {
console.log("Monitor", monitor.Name, "Has no latitude or longitude");
continue;
}
const url_to_zms = server.UrlToZMS()+'?scale=60&mode=single&monitor='+id+(auth_relay?'&'+auth_relay:'');
const popup = monitor.Name+'<br>Resolution: '+res+'<br>FPS: '+fps+'<br><a href="?view=watch&mid='+id+'"><img style="width: 100%;" src="'+url_to_zms+'"/></a><br/>Events: '+events;
if (event_summary.TotalEvents > 0) {
if (monitor_status.Status == 'Connected') {
L.marker([monitor.Latitude, monitor.Longitude], {icon: iconoConectada})
.addTo(map).bindPopup(popup);
cant_conectadas += 1;
} else {
L.marker([monitor.Latitude, monitor.Longitude], {icon: iconoDesconectada})
.addTo(map).bindPopup(popup);
cant_desconectadas += 1;
}
} else {
L.marker([monitor.Latitude, monitor.Longitude], {icon: iconoError})
.addTo(map).bindPopup(popup);
cant_error += 1;
}
total_cameras += 1;
} // end foreach monitor
var percent_conectadas = Number.parseFloat(((cant_conectadas*100)/total_cameras)).toFixed(2);
var percent_desconectadas = Number.parseFloat(((cant_desconectadas*100)/total_cameras)).toFixed(2);
var percent_error = Number.parseFloat(((cant_error*100)/total_cameras)).toFixed(2);
div_conectadas.style.width = percent_conectadas+"%";
div_conectadas.innerHTML = percent_conectadas+"%";
document.getElementById("progress-conectadas-titulo").style.width = percent_conectadas+"%";
document.getElementById("progress-conectadas-titulo").innerHTML = "CONECTADAS";
div_desconectadas.style.width = percent_desconectadas+"%";
div_desconectadas.innerHTML = percent_desconectadas+"%";
document.getElementById("progress-desconectadas-titulo").style.width = percent_desconectadas+"%";
document.getElementById("progress-desconectadas-titulo").innerHTML = "DESCONECTADAS";
div_error.style.width = percent_error+"%";
div_error.innerHTML = percent_error+"%";
document.getElementById("progress-error-titulo").style.width = percent_error+"%";
document.getElementById("progress-error-titulo").innerHTML = "ERROR";
}
const map = new Map();
map.addMonitors();