/*
* Embeds a layout to the page
*
* Usage:
* myLayout = new CameraLayout(layout_type, number_of_rows, number_of_columns, display_method, layout_width, layout_height, camera_array);
* myLayout.write("target_element_id");
*
*
* Types of display technologies that can be used to support video
* smActiveX = 1;
* smServerPush = 2;
* smClientPull = 3;
* smThirdPartyActiveX = 4;
*/
//Supporting Variables
var VI_LIVE_CLASS_ID = 'CLSID:DEB50B04-2723-4e8b-8125-F336CEDA40F1';
var VI_LIVE_CODEBASE = 'utilities/VIClient4.CAB#Version=4,2,2,2';
var arrLayoutTypes = new Array(0, 1, 2, 3, 5, 6, 7, 102, 201, 4, 204);
var arrRows = new Array(0, 1, 2, 4, 4, 4, 4, 5, 3, 4, 6);
var arrCols = new Array(0, 1, 2, 4, 4, 4, 4, 5, 3, 4, 6);
var isIE = Number(navigator.appName.indexOf('Internet Explorer')) != -1;
CameraLayout = function(layout_type, num_rows, num_cols, display_method, layout_width, layout_height, camera_array) {
this.layout = layout_type;
this.rows = Math.min(5, num_rows); //limit to 5 rows of cameras
this.columns = num_cols;
this.display_method = display_method;
this.layout_width = layout_width;
this.layout_height = layout_height;
this.camera_array = camera_array;
this.layout_page_num = 1; //current page
this.layout_cam_cnt = 0; //number of cameras per layout
}
CameraLayout.prototype.getHTML = function() {
//Generate the layout based on what type of display technology we're going to use.
var html = "";
if (this.display_method == smActiveX) {
//Use activeX. We do not need a lot of underlying table structures to display the various cameras, as
//the ActiveX control will do it for us.
html += "
";
html += "
";
html += "";
html += "
";
//Get camera count for this layout
switch (Number(this.layout)) {
case 1: //1 x 1
this.layout_cam_cnt = 1;
break;
case 3: //1x7
this.layout_cam_cnt = 8;
break;
case 4: //2x8
this.layout_cam_cnt = 10;
break;
case 5: //1x12
this.layout_cam_cnt = 13;
break;
case 6: //1x12 Centered
this.layout_cam_cnt = 13;
break;
default:
this.layout_cam_cnt = this.rows * this.columns;
break;
}
} else {
//We're going to use Server Push or Client Pull, which requires more table structure to get the video
//windows aligned properly.
html = "
";
switch (Number(this.layout)) {
case 1: //1 x 1
this.layout_cam_cnt = 1;
html += "
";
break;
case 3: //1x7
this.layout_cam_cnt = 8;
html += "
";
html += "
";
html += "
";
html += "
";
break;
case 4: //2x8
this.layout_cam_cnt = 10;
html += "
";
html += "
";
html += "
";
break;
case 5: //1x12
this.layout_cam_cnt = 13;
html += "
";
html += "
";
html += "
";
html += "
";
break;
case 6: //1x12 Centered
this.layout_cam_cnt = 13;
html += "
";
html += "
";
html += "
";
html += "
";
break;
default: //Specified Layout
var grid_counter = 0;
for (var y = 1; y <= this.rows; y++) {
html += "
";
for (var x = 1; x <= this.columns; x++) {
grid_counter++;
var divID = "divCam" + grid_counter;
html += "
";
}
html += "
";
}
this.layout_cam_cnt = grid_counter;
break;
}
html += "
";
}
return html;
}
CameraLayout.prototype.stop = function() {
//Stop video streaming
if (this.display_method == smActiveX) {
var ax = document.getElementById('VILivefeed');
if (ax) {
try {
ax.Close();
} catch (e) {
//alert(e);
}
}
} else {
}
}
CameraLayout.prototype.write = function(elementId) {
if (elementId) {
document.getElementById(elementId).innerHTML = this.getHTML();
} else {
document.write(this.getHTML());
}
this.displayVideo(this.camera_array, this.layout, this.layout_width, this.layout_height);
}
CameraLayout.prototype.refresh = function(elementId) {
if (elementId) {
document.getElementById(elementId).innerHTML = this.getHTML();
} else {
document.write(this.getHTML());
}
this.displayVideo(this.camera_array, this.layout, this.layout_width, this.layout_height, true);
}
CameraLayout.prototype.displayVideo = function(node_array, layout_type, layout_width, layout_height, refresh) {
//Don't show any cameras if none are listed
if (node_array.length == 0) return -1;
switch (this.display_method) {
case smActiveX:
//Video-Insight ActiveX Control /////////////////////////////
var LivePlayer = document.getElementById("VILivefeed")
var arrNodes = formatActiveXLiveArray(node_array); //Delete duplicates
//Set up paging if necessary
var cam_idx = this.layout_cam_cnt * (this.layout_page_num - 1);
var cam_cnt = this.layout_cam_cnt;
var pag_idx = 0;
if (arrNodes.length > cam_cnt) {
//User looking at page n of n
var arrPage = new Array();
var cams_added = 0;
for (var i = cam_idx; i < arrNodes.length; i++) {
if (cams_added < cam_cnt) {
arrPage[pag_idx] = arrNodes[i];
pag_idx++;
cams_added++;
}
}
arrNodes = arrPage;
}
var control_string = formatVIControlString(arrNodes);
var grid_id = layout_type;
switch (layout_type) {
case 0: //Automatically select base grid type
if (arrNodes.length == 1) grid_id = 1;
if ((arrNodes.length > 1) && (arrNodes.length <= 4)) grid_id = 2;
if ((arrNodes.length > 4) && (arrNodes.length <= 9)) grid_id = 201;
if ((arrNodes.length > 9) && (arrNodes.length <= 12)) grid_id = 5;
if ((arrNodes.length > 12) && (arrNodes.length <= 16)) grid_id = 7;
if ((arrNodes.length > 16) && (arrNodes.length <= 25)) grid_id = 102;
if (arrNodes.length > 25) grid_id = 204;
break;
}
if (LivePlayer) {
try {
LivePlayer.SetGridID(grid_id);
LivePlayer.SetCamera(control_string);
LivePlayer.Start();
} catch (e) {
//error
}
//Video doesn't show on first play unless we call SetSize
resizeLayout();
} else {
//Not installed
}
break;
case smServerPush:
//Server Push //////////////////////////////////////////////
break;
case smClientPull:
//Client Pull //////////////////////////////////////////////
var arrCameraID;
if (refresh) {
arrCameraID = this.camera_array;
} else {
arrCameraID = formatCpLiveArray(node_array); //remove duplicate items from selected nodes
this.camera_array = arrCameraID;
}
var temp_layout = myLayout.layout;
if (layout_type == 0) {
//Choose the best layout for the number of cameras selected
if (arrCameraID.length == 1) temp_layout = 1;
if ((arrCameraID.length > 1) && (arrCameraID.length <= 4)) temp_layout = 2;
if ((arrCameraID.length > 4) && (arrCameraID.length <= 9)) temp_layout = 201;
if ((arrCameraID.length > 9) && (arrCameraID.length <= 16)) temp_layout = 7;
if ((arrCameraID.length > 16) && (arrCameraID.length <= 25)) temp_layout = 102;
if (arrCameraID.length > 25) temp_layout = 204;
}
var cam_idx = this.layout_cam_cnt * (this.layout_page_num - 1);
var win_idx = 0; //index of img window starts at 1
var arr_idx = cam_idx - 1;
for (var i = cam_idx; i < arrCameraID.length; i++) {
win_idx++; //Start looking at c_1 window, not c_0
arr_idx++;
var cam_dimensions = getWindowDimensions(temp_layout, arr_idx, myLayout.rows, myLayout.columns);
var camera_width = Math.floor(cam_dimensions.split(',')[0]);
var camera_height = Math.floor(cam_dimensions.split(',')[1]);
var my_div = document.getElementById("divCam" + win_idx);
if (my_div) {
my_div.innerHTML = formatClientPullControlString(win_idx, arrCameraID[arr_idx], camera_width, camera_height, smClientPull);
}
initLink(arrCameraID[arr_idx], win_idx);
}
break;
case smThirdPartyActiveX:
//Third Party ActiveX e.g. Axis SDK Control ////////////////
break;
}
}
CameraLayout.prototype.resizeVideo = function() {
var cam_elements;
if (this.display_method == smActiveX) {
resizeLayout();
} else {
var arrCameraID = this.camera_array;
var temp_layout = myLayout.layout;
if (temp_layout == 0) {
//Choose the best layout for the number of cameras selected
if (arrCameraID.length == 1) temp_layout = 1;
if ((arrCameraID.length > 1) && (arrCameraID.length <= 4)) temp_layout = 2;
if ((arrCameraID.length > 4) && (arrCameraID.length <= 9)) temp_layout = 201;
if ((arrCameraID.length > 9) && (arrCameraID.length <= 16)) temp_layout = 7;
if ((arrCameraID.length > 16) && (arrCameraID.length <= 25)) temp_layout = 102;
if (arrCameraID.length > 25) temp_layout = 204;
}
for (var i = 0; i < arrCameraID.length; i++) {
var index = i + 1;
var cam_dimensions = getWindowDimensions(temp_layout, index, myLayout.rows, myLayout.columns);
var camera_width = Math.floor(cam_dimensions.split(',')[0]);
var camera_height = Math.floor(cam_dimensions.split(',')[1]);
var my_camera = document.getElementById("c_" + index);
if (my_camera) {
my_camera.style.height = camera_height + 'px';
my_camera.style.width = camera_width + 'px';
}
}
}
}
function getWindowDimensions(layout_id, position, num_rows, num_cols) {
var x_padding = is_maximized ? 20 : 10;
var x_spacing = 10 * num_cols; //2 pixels for each colum
var header_h = (18 * num_rows); // pixels high
if ((!isIE) && (num_rows >= 4)) {
//need additional padding for cut off issue in Firefox
header_h = header_h + 40;
}
var aspect_ratio = 0.75; //.75 for live, 1.06 for playback
var width_ratio = 1.33;
var win_w = 0;
var win_h = 0;
if (is_maximized) {
if (window.innerWidth) {
win_w = window.innerWidth;
} else {
win_w = document.body.clientWidth;
}
if (window.innerHeight) {
win_h = window.innerHeight;
} else {
win_h = document.body.clientHeight;
}
win_w = win_w - x_padding;
win_h = win_h - header_h;
} else {
win_w = parseInt(divContent.style.width) - x_padding;
win_h = parseInt(divContent.style.height) - header_h;
}
var new_height;
var new_width;
//Determine window dimensions and size accordingly
var win_ratio = win_h / win_w;
if (win_ratio <= aspect_ratio) {
//Restrict to height and adjust height for playback controls if needed
new_height = Math.round(win_h / Math.max(num_rows, num_cols));
new_width = Math.round(new_height * width_ratio);
} else {
//Restrict to width
new_width = win_w - x_spacing;
new_width = Math.round(new_width / num_cols);
new_height = Math.round(new_width * aspect_ratio);
}
//At this point, new_height and new_width contain width and height of the display area. Now divide that
//by the number of rows or columns, while taking into account that some layouts have larger windows
//in some locations.
switch (Number(layout_id)) {
case 3:
if (position == 0) {
new_width = new_width * 3;
new_height = new_height * 3;
}
break;
case 4:
if ((position == 0) || (position == 1)) {
new_width = new_width * 2;
new_height = new_height * 2;
}
break;
case 5:
if (position == 0) {
new_width = new_width * 2;
new_height = new_height * 2;
}
break;
case 6:
if (position == 5) {
new_width = new_width * 2;
new_height = new_height * 2;
}
break;
default: //a non-custom layout where all windows are the same size.
break;
}
return new_width + ',' + new_height;
}
function resizeLayout(keep_aspect_ratio) {
var aspect_ratio = 0.75; //.75 for live, 1.06 for playback
var width_ratio = 1.33;
var x_padding = 10;
var win_w = 0;
var win_h = 0;
var new_height;
var new_width;
if (is_maximized) {
win_w = window.innerWidth ? window.innerWidth : document.body.clientWidth;
win_h = window.innerHeight ? window.innerHeight : document.body.clientHeight;
} else {
win_w = parseInt(divContent.style.width);
win_h = parseInt(divContent.style.height);
}
var my_viewer = document.getElementById("VILivefeed"); //get reference to activex object
//Determine window dimensions and size accordingly
if (keep_aspect_ratio) {
var win_ratio = win_h / win_w;
if (win_ratio <= aspect_ratio) {
//Restrict to height and adjust height for playback controls if needed
new_height = win_h;
new_width = Math.round(new_height * width_ratio);
} else {
//Restrict to width
new_width = win_w;
new_height = Math.round(new_width * aspect_ratio);
}
}
//Resize the object
win_w = win_w - x_padding;
if (my_viewer) {
//my_viewer.SetSize(new_width, new_height);
try {
my_viewer.SetSize(win_w, win_h);
} catch (e) {
}
}
}
function formatClientPullControlString(camera_index, camera_id, camera_width, camera_height, display_mode) {
//Return a formatted image control string for the specified camera
//var control_string = '';
var control_string;
if (myLayout.layout_cam_cnt == 1) {
control_string = '';
} else {
control_string = '';
//control_string = '';
}
return control_string;
}
function refreshImage(cam_object, camera_id) {
if (is_navigating) return;
if (myLayout.layout_cam_cnt == 1) {
cam_object.src = "c.cam?cid=" + camera_id + "&nocache=" + new Date().getTime();
} else {
//request smaller image
//cam_object.src = "c.cam?cid=" + camera_id + "&res=1&nocache=" + new Date().getTime();
cam_object.src = "c.cam?cid=" + camera_id + "&nocache=" + new Date().getTime();
}
}
function initLink(node_value, camera_index) {
var node = myTree.findNodeByValue(node_value);
var link = document.getElementById("lnk" + camera_index);
if (link) {
var camera_name = node.get_text();
link.innerHTML = camera_name;
link.href = "CameraFrame.aspx?cid=" + node_value + "&name=" + escape(camera_name) + '&dm=' + myLayout.display_method + '&pu=1';
link.onclick = function() {
viewCamera(node_value, camera_name);
return false;
}
}
}
var win_id = 0;
function viewCamera(camera_id, camera_name) {
var url = 'CameraFrame.aspx?cid=' + camera_id + '&name=' + escape(camera_name) + '&dm=' + myLayout.display_method + '&pu=1';
var win_w = 640;
var win_h = 480;
var win_x = 10 + (win_id * 30);
var win_y = 10 + (win_id * 30);
//Don't let the window go off of the screen.
if (win_x > (screen.height - 480)) {
win_id = 0;
win_x = 10;
win_y = 10;
}
win_id++;
var win_name = 'camera_' + win_id;
var other_args = 'location=no,menubar=no,status=yes,scroolbars=no,toolbar=no,resizable=yes,width=' + win_w + ',height=' + win_h + ',left=' + win_x + ',top=' + win_y;
window.open(url, win_name, other_args);
}
function formatVIControlString(camera_nodes) {
//Return a formatted string for the VI ActiveX control
var arrCameras = new Array();
var arrServers = new Array();
var arrPorts = new Array();
var control_string = '';
//extract camera ids
for (var i = 0; i < camera_nodes.length; i++) {
//Values are ServerIpAddress;ServerPort;CameraID;PTZ;LivePermission;PlaybackPermission;PTZPermission
var id = camera_nodes[i].get_value();
var server_ip = camera_nodes[i].get_attributes().getAttribute("IP");
var server_port = camera_nodes[i].get_attributes().getAttribute("Port");
//put them in their proper arrays
var array_index = arrServers.indexOf(server_ip);
if ((array_index == -1) && (String(server_ip) != "undefined")) {
array_index = arrServers.length;
arrServers[array_index] = server_ip;
arrPorts[array_index] = server_port;
arrCameras[array_index] = id;
} else {
arrCameras[array_index] += ',' + id;
}
}
//return a formatted string
for (var i = 0; i < arrServers.length; i++) {
if (i > 0) {
control_string += '|';
}
control_string += arrServers[i] + ';' + arrPorts[i] + ';' + arrCameras[i];
}
return control_string;
}
function mergeCameraList(cam_list_1, cam_list_2) {
var control_string = cam_list_1;
var arrCameras_2 = cam_list_2.split(',');
for (var i = 0; i < arrCameras_2.length; i++) {
var paddedCtrString = ',' + control_string + ',';
var paddedCamString = ',' + arrCameras_2[i] + ',';
if (paddedCtrString.indexOf(paddedCamString) < 0) {
control_string += ',' + arrCameras_2[i];
}
}
return control_string;
}
function formatActiveXLiveArray(nodes) {
//Build temp array
var arrLookup = new Array();
var lookup_index = 0;
//Return a formatted string for the Client Pull display
var arrResult = new Array();
for (var i = 0; i < nodes.length; i++) {
var node_category = nodes[i].get_category();
if (node_category == 'C') {
var node_value = nodes[i].get_value();
var value_check = arrLookup.indexOf(node_value);
if (value_check == -1) {
//Camera is not in the array
arrResult.push(nodes[i]);
arrLookup[lookup_index] = node_value;
lookup_index += 1;
}
}
}
return arrResult;
}
function formatCpLiveArray(nodes) {
//Return a formatted string for the Client Pull display
var arrResult = new Array();
var arrTempList = new Array();
for (var i = 0; i < nodes.length; i++) {
var arrCameraList = new Array();
var node_category = nodes[i].get_category();
if ((node_category == 'S') || (node_category == 'L')) {
var sCameraList = nodes[i].get_attributes().getAttribute("CameraList");
arrCameraList = sCameraList.split(',');
} else if (node_category == 'C') {
arrCameraList = new Array(nodes[i].get_value());
}
//concat temp array
arrTempList = arrTempList.concat(arrCameraList);
}
//Remove duplicate camera IDs from array
arrResult = unique(arrTempList);
//alert(arrResult.length);
return arrResult;
}
function checkPTZ(camera_id, camera_name) {
var myNode = myTree.findNodeByValue(camera_id);
if (myNode) {
var is_ptz_permitted = myNode.get_attributes().getAttribute("PTZ");
var server_id = myNode.get_attributes().getAttribute("ServerID");
if (Number(is_ptz_permitted) != 0) {
expandPTZ();
updatePtzPanel(myNode.get_value(), server_id, camera_name);
} else {
collapsePTZ();
}
}
}