mirror of
https://github.com/Motion-Project/motion.git
synced 2026-01-29 00:51:44 -05:00
1092 lines
32 KiB
HTML
1092 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"><head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta charset="UTF-8">
|
|
<title>MotionPlusSamplePage</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
color: #606c71;
|
|
background-color: #159957;
|
|
background-image: linear-gradient(120deg, #155799, #159957);
|
|
margin-left:0.5% ;
|
|
margin-right:0.5% ;
|
|
width: device-width ;
|
|
}
|
|
.page-header {
|
|
color: #fff;
|
|
text-align: center;
|
|
margin-top: 0rem;
|
|
margin-bottom: 0rem;
|
|
font-weight: normal;
|
|
}
|
|
.page-header h3 {
|
|
height: 2rem;
|
|
padding: 0;
|
|
margin: 1rem;
|
|
border: 0;
|
|
}
|
|
h3 {
|
|
margin-left: 10rem;
|
|
}
|
|
.header-right{
|
|
float: right;
|
|
color: white;
|
|
}
|
|
.header-center {
|
|
text-align: center;
|
|
color: white;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.border {
|
|
border-width: 1rem;
|
|
border-color: white;
|
|
border-style: solid;
|
|
}
|
|
.sidenav {
|
|
height: 100%;
|
|
width: 10rem;
|
|
position: fixed;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: lightgrey;
|
|
overflow-x: hidden;
|
|
overflow: auto;
|
|
}
|
|
.sidenav a, .dropbtn {
|
|
padding: 0.5rem 0rem 0.5em 1rem;
|
|
text-decoration: none;
|
|
font-size: 1rem;
|
|
display: block;
|
|
border: none;
|
|
background: none;
|
|
width:90%;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
outline: none;
|
|
color: black;
|
|
background-color: lightgray;
|
|
}
|
|
.sidenav a:hover, .dropbtn:hover {
|
|
background-color: #555;
|
|
color: white;
|
|
}
|
|
.sidenav .closebtn {
|
|
color: black;
|
|
top: 0;
|
|
margin-left: 80%;
|
|
width: 1rem;
|
|
font-size: 1rem;
|
|
background-color: lightgray;
|
|
}
|
|
.sidenav .closebtn:hover {
|
|
background-color: lightgray;
|
|
color: white;
|
|
}
|
|
.menubtn {
|
|
top: 0;
|
|
width: 1rem;
|
|
margin-left: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
font-size: 1.5rem;
|
|
color:black;
|
|
transform: rotate(90deg);
|
|
-webkit-transform: rotate(90deg);
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
.menubtn:hover {
|
|
color: white;
|
|
}
|
|
.dropdown-content {
|
|
display: none;
|
|
background-color:lightgray;
|
|
padding-left: 1rem;
|
|
}
|
|
.actionbtn {
|
|
padding: 0.25rem;
|
|
text-decoration: none;
|
|
font-size: 0.5rem;
|
|
display: block;
|
|
border: none;
|
|
background: none;
|
|
width: 3rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
outline: none;
|
|
color: black;
|
|
background-color: lightgray;
|
|
}
|
|
.cls_config {
|
|
background-color: #000000;
|
|
color: #fff;
|
|
text-align: center;
|
|
margin-top: 0rem;
|
|
margin-bottom: 0rem;
|
|
font-weight: normal;
|
|
font-size: 0.90rem;
|
|
}
|
|
.cls_config table {
|
|
display: table;
|
|
border-spacing: 1rem;
|
|
margin: auto;
|
|
}
|
|
.cls_config label {
|
|
padding: 0rem;
|
|
text-align: right;
|
|
width: 10rem;
|
|
height: 2.5rem;
|
|
}
|
|
.cls_config textarea {
|
|
margin: auto;
|
|
text-align: center;
|
|
width: 15.5rem;
|
|
height: 2.5rem;
|
|
}
|
|
.cls_button {
|
|
width: 10rem;
|
|
height: 2rem;
|
|
padding: 0rem;
|
|
}
|
|
.cls_drop {
|
|
padding: 0rem;
|
|
text-align: right;
|
|
width: 10rem;
|
|
height: 2.25rem;
|
|
}
|
|
.cls_text {
|
|
padding: 0rem;
|
|
width: 10em;
|
|
text-align: right;
|
|
}
|
|
.cls_text_nbr {
|
|
padding: 0rem;
|
|
width: 10rem;
|
|
text-align: right;
|
|
}
|
|
.cls_text_wide {
|
|
padding: 0rem;
|
|
height: 3rem;
|
|
width: 20rem;
|
|
text-align: right;
|
|
}
|
|
.cls_camdrop {
|
|
/* Only used to identify all the cam drops on page */
|
|
}
|
|
.arrow {
|
|
border: solid black;
|
|
border-width: 0 1rem 1rem 0;
|
|
border: double black;
|
|
border-width: 0 0.75rem 0.75rem 0;
|
|
display: inline-block;
|
|
padding: 1rem;
|
|
font-size: 0.5rem;
|
|
}
|
|
.right {
|
|
transform: rotate(-45deg);
|
|
-webkit-transform: rotate(-45deg);
|
|
}
|
|
.left {
|
|
transform: rotate(135deg);
|
|
-webkit-transform: rotate(135deg);
|
|
}
|
|
.up {
|
|
transform: rotate(-135deg);
|
|
-webkit-transform: rotate(-135deg);
|
|
}
|
|
.down {
|
|
transform: rotate(45deg);
|
|
-webkit-transform: rotate(45deg);
|
|
}
|
|
.zoombtn {
|
|
font-size:1.25rem;
|
|
width: 3rem;
|
|
height: 1.5rem;
|
|
margin: 0;
|
|
}
|
|
.cls_movies {
|
|
background-color: transparent;
|
|
color: white;
|
|
text-align: center;
|
|
margin-top: 0rem;
|
|
margin-bottom: 0rem;
|
|
font-weight: normal;
|
|
font-size: 0.90rem;
|
|
}
|
|
a:link {
|
|
color: white;
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
a:visited {
|
|
color: black;
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="body" onload="initform()">
|
|
<div id="divnav_main" class="sidenav" style="width: 10rem;">
|
|
<a class="closebtn" onclick="nav_close()">X</a>
|
|
<div id="divnav_version">
|
|
<!-- Filled in by script -->
|
|
</div>
|
|
<button onclick="display_cameras()" id="cam_btn" class="dropbtn">Cameras</button>
|
|
<div id="divnav_cam" class="dropdown-content" style="display: none;">
|
|
<!-- Filled in by script -->
|
|
</div>
|
|
<button onclick="display_actions()" id="actions_btn" class="dropbtn">Actions</button>
|
|
<div id="divnav_actions" class="dropdown-content" style="display: none;">
|
|
<!-- Filled in by script -->
|
|
</div>
|
|
<button onclick="display_config()" id="cfg_btn" class="dropbtn">
|
|
Configuration
|
|
</button>
|
|
<div id="divnav_config" class="dropdown-content" style="display: block;">
|
|
<!-- Filled in by script -->
|
|
</div>
|
|
<button onclick="display_movies()" id="mov_btn" class="dropbtn">
|
|
Recordings
|
|
</button>
|
|
<div id="divnav_movies" class="dropdown-content" style="display: none;">
|
|
<!-- Filled in by script -->
|
|
</div>
|
|
</div>
|
|
<div id="divmain" style="margin-left: 10rem;">
|
|
<button id="menu_btn" onclick="nav_open();" style="display: none;" class="menubtn">|||</button>
|
|
<p></p>
|
|
<div id="div_cam" style="display: none;">
|
|
<!-- Filled in by script -->
|
|
</div>
|
|
|
|
<div id="div_config" style="display: inline;">
|
|
<!-- Filled in by script -->
|
|
</div>
|
|
|
|
<div id="div_movies" class="cls_movies" style="display: none;">
|
|
<!-- Filled in by script -->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
var pData, pMovies, pHostFull;
|
|
var gIndxScan, gIndxCam, gGetImgs;
|
|
var pic_url = Array(4);
|
|
var cams_scan_timer, cams_all_timer, cams_one_timer;
|
|
|
|
function nav_open() {
|
|
document.getElementById('divnav_main').style.width = '10rem';
|
|
document.getElementById('divmain').style.marginLeft = '10rem';
|
|
document.getElementById('menu_btn').style.display= 'none';
|
|
}
|
|
|
|
function nav_close() {
|
|
document.getElementById('divnav_main').style.width = '0rem';
|
|
document.getElementById('divmain').style.marginLeft = '0rem';
|
|
document.getElementById('menu_btn').style.display= 'inline';
|
|
}
|
|
|
|
function send_config(category) {
|
|
var formData = new FormData();
|
|
var request = new XMLHttpRequest();
|
|
var xmlhttp = new XMLHttpRequest();
|
|
var camid = document.getElementsByName('camdrop')[0].value;
|
|
var pCfg = pData['configuration']['cam'+camid];
|
|
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
pData = JSON.parse(this.responseText);
|
|
}
|
|
};
|
|
request.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
xmlhttp.open('GET', pHostFull+'/0/config.json');
|
|
xmlhttp.send();
|
|
|
|
}
|
|
};
|
|
formData.append('command', 'config');
|
|
formData.append('camid', camid);
|
|
|
|
for (jkey in pCfg) {
|
|
if (document.getElementsByName(jkey)[0] != null) {
|
|
if (pCfg[jkey].category == category) {
|
|
if (document.getElementsByName(jkey)[0].type == 'checkbox') {
|
|
formData.append(jkey, document.getElementsByName(jkey)[0].checked);
|
|
} else {
|
|
formData.append(jkey, document.getElementsByName(jkey)[0].value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
request.open('POST', pHostFull);
|
|
request.send(formData);
|
|
|
|
}
|
|
|
|
function send_action(actval) {
|
|
|
|
var dsp_cam = document.getElementById('div_cam').style.display;
|
|
if ((dsp_cam == 'none' || dsp_cam == '') && (actval != 'config_write')) {
|
|
return;
|
|
}
|
|
|
|
var formData = new FormData();
|
|
var camid;
|
|
var ans;
|
|
|
|
camid = assign_camid();
|
|
|
|
if (actval == 'action_user') {
|
|
ans = prompt('Enter user parameter');
|
|
} else {
|
|
ans = '';
|
|
}
|
|
|
|
formData.append('command', actval);
|
|
formData.append('camid', camid);
|
|
formData.append('user', ans);
|
|
|
|
var request = new XMLHttpRequest();
|
|
request.open('POST', pHostFull);
|
|
request.send(formData);
|
|
|
|
return;
|
|
}
|
|
|
|
function send_reload(actval) {
|
|
|
|
var formData = new FormData();
|
|
var request = new XMLHttpRequest();
|
|
var xmlhttp = new XMLHttpRequest();
|
|
var camid;
|
|
var ans;
|
|
|
|
camid = assign_camid();
|
|
|
|
if (actval == 'camera_delete') {
|
|
ans = confirm('Delete camera ' + camid);
|
|
if (ans == false) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
pData = JSON.parse(this.responseText);
|
|
gIndxCam = -1;
|
|
assign_config_nav();
|
|
assign_vals(0);
|
|
assign_cams();
|
|
}
|
|
};
|
|
request.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
xmlhttp.open('GET', pHostFull+'/0/config.json');
|
|
xmlhttp.send();
|
|
|
|
}
|
|
};
|
|
formData.append('command', actval);
|
|
formData.append('camid', camid);
|
|
|
|
request.open('POST', pHostFull);
|
|
request.send(formData);
|
|
|
|
}
|
|
|
|
function dropchange_cam(camobj) {
|
|
var indx;
|
|
|
|
assign_vals(camobj.value);
|
|
|
|
var sect = document.getElementsByName('camdrop');
|
|
for (indx = 0; indx < sect.length; indx++) {
|
|
sect.item(indx).selectedIndex =camobj.selectedIndex;
|
|
}
|
|
|
|
gIndxCam = -1;
|
|
for (indx = 0; indx < pData['cameras']['count']; indx++) {
|
|
if (pData['cameras'][indx]['id'] == camobj.value) {
|
|
gIndxCam = indx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function config_hideall() {
|
|
var sect = document.getElementsByClassName('cls_config');
|
|
for (var i = 0; i < sect.length; i++) {
|
|
sect.item(i).style.display='none';
|
|
}
|
|
return;
|
|
}
|
|
|
|
function config_click(actval) {
|
|
config_hideall();
|
|
document.getElementById('div_cam').style.display='none';
|
|
document.getElementById('div_movies').style.display='none';
|
|
document.getElementById('div_config').style.display='inline';
|
|
document.getElementById('div_' + actval).style.display='inline';
|
|
cams_reset();
|
|
}
|
|
|
|
function assign_camid() {
|
|
if (gIndxCam == -1 ) {
|
|
camid = 0;
|
|
} else {
|
|
camid = pData['cameras'][gIndxCam]['id'];
|
|
}
|
|
|
|
return camid;
|
|
}
|
|
|
|
function assign_version() {
|
|
var verstr ='<a>MotionPlus \n'+pData['version'] +'</a>';
|
|
document.getElementById('divnav_version').innerHTML = verstr;
|
|
}
|
|
|
|
function assign_cams() {
|
|
var camcnt = pData['cameras']['count'];
|
|
var indx = 0;
|
|
var html_drop = "\n";
|
|
var html_nav = "\n";
|
|
var html_mov = "\n";
|
|
|
|
html_drop += " <select class='cls_drop' ";
|
|
html_drop += " onchange='dropchange_cam(this)' ";
|
|
html_drop += " name='camdrop'>\n";
|
|
|
|
for (indx=0; indx<camcnt; indx++) {
|
|
if (indx == 0) {
|
|
html_nav += "<a onclick='cams_all_click();'>";
|
|
html_nav += "All Cameras</a>\n";
|
|
html_nav += "<a onclick='cams_scan_click();'>";
|
|
html_nav += "Scan Cameras</a>\n";
|
|
|
|
html_drop += "<option ";
|
|
html_drop += " value='0'>default";
|
|
html_drop += "</option>\n";
|
|
}
|
|
|
|
html_nav += "<a onclick='cams_one_click(" + indx + ");'>";
|
|
html_nav += pData["cameras"][indx]["name"] + "</a>\n";
|
|
html_mov += "<a onclick='movies_click(" + indx + ");'>";
|
|
html_mov += pData["cameras"][indx]["name"] + "</a>";
|
|
html_drop += "<option ";
|
|
html_drop += " value='"+pData["cameras"][indx]["id"]+"'>";
|
|
html_drop += pData["cameras"][indx]["name"];
|
|
html_drop += "</option>\n";
|
|
}
|
|
html_drop += " </select>\n";
|
|
|
|
var sect = document.getElementsByClassName("cls_camdrop");
|
|
for (indx = 0; indx < sect.length; indx++) {
|
|
sect.item(indx).innerHTML = html_drop;
|
|
}
|
|
|
|
document.getElementById("divnav_cam").innerHTML = html_nav;
|
|
|
|
document.getElementById("divnav_movies").innerHTML = html_mov;
|
|
|
|
return;
|
|
}
|
|
|
|
function assign_actions() {
|
|
var html_actions = "\n";
|
|
html_actions += " ";
|
|
document.getElementById("divnav_actions").innerHTML = html_actions;
|
|
|
|
return;
|
|
}
|
|
|
|
function assign_vals(camid) {
|
|
var pCfg;
|
|
|
|
if (camid == 0) {
|
|
pCfg = pData["configuration"]["default"];
|
|
} else {
|
|
pCfg = pData["configuration"]["cam"+camid];
|
|
}
|
|
|
|
for (jkey in pCfg) {
|
|
if (document.getElementsByName(jkey)[0] != null) {
|
|
if (pCfg[jkey].enabled) {
|
|
document.getElementsByName(jkey)[0].disabled = false;
|
|
if (document.getElementsByName(jkey)[0].type == "checkbox") {
|
|
document.getElementsByName(jkey)[0].checked = pCfg[jkey].value;
|
|
} else {
|
|
document.getElementsByName(jkey)[0].value = pCfg[jkey].value;
|
|
}
|
|
} else {
|
|
document.getElementsByName(jkey)[0].disabled = true;
|
|
document.getElementsByName(jkey)[0].value = '';
|
|
}
|
|
} else {
|
|
console.log('Uncoded ' + jkey + ' : ' + pCfg[jkey].value);
|
|
}
|
|
}
|
|
}
|
|
|
|
function assign_config_nav() {
|
|
var pCfg = pData['configuration']['default'];
|
|
var pCat = pData['categories'];
|
|
var html_nav = "\n";
|
|
|
|
for (jcat in pCat) {
|
|
html_nav += "<a onclick=\"config_click('";
|
|
html_nav += pCat[jcat]["name"]+"');\">";
|
|
html_nav += pCat[jcat]["display"]+"</a>\n";
|
|
|
|
}
|
|
|
|
document.getElementById("divnav_config").innerHTML = html_nav;
|
|
|
|
}
|
|
|
|
function assign_config_item(jkey) {
|
|
var pCfg = pData['configuration']['default'];
|
|
var html_cfg = "";
|
|
var indx_lst = 0;
|
|
|
|
html_cfg += "<tr><td><label for='";
|
|
html_cfg += jkey + "'>"+jkey+"</label></td>\n";
|
|
|
|
if (pCfg[jkey]["type"] == "string") {
|
|
html_cfg += "<td><textarea name='";
|
|
html_cfg += jkey+"'></textarea></td>";
|
|
|
|
} else if (pCfg[jkey]["type"] == "bool") {
|
|
html_cfg += "<td><input class='cfg_check' ";
|
|
html_cfg += " type='checkbox' name='";
|
|
html_cfg += jkey+"'></td>";
|
|
|
|
} else if (pCfg[jkey]["type"] == "int") {
|
|
html_cfg += "<td><input class='cls_text_nbr' ";
|
|
html_cfg += "type='text' name='";
|
|
html_cfg += jkey+"'></td>";
|
|
|
|
} else if (pCfg[jkey]["type"] == "list") {
|
|
html_cfg += "<td><select class='cls_drop' ";
|
|
html_cfg += " name='"+jkey+"' autocomplete='off'>";
|
|
|
|
for (indx_lst=0; indx_lst < pCfg[jkey]["list"].length; indx_lst++) {
|
|
html_cfg += "<option value='";
|
|
html_cfg += pCfg[jkey]["list"][indx_lst] + "'>";
|
|
html_cfg += pCfg[jkey]["list"][indx_lst] + "</option>\n";
|
|
}
|
|
html_cfg += "</select></td>";
|
|
}
|
|
html_cfg += "</tr>\n";
|
|
|
|
return html_cfg;
|
|
|
|
}
|
|
|
|
function assign_config_cat(jcat) {
|
|
var pCfg = pData['configuration']['default'];
|
|
var pCat = pData['categories'];
|
|
var html_cfg = "";
|
|
|
|
html_cfg += "<div id='div_";
|
|
html_cfg += pCat[jcat]["name"];
|
|
html_cfg += "' style='display:none' class='cls_config'>\n";
|
|
html_cfg += "<h3>";
|
|
html_cfg += pCat[jcat]["display"];
|
|
html_cfg += " Parameters</h3>\n";
|
|
html_cfg += "<table><tr> <td><label for 'camdrop'>camera</label></td>\n";
|
|
html_cfg += "<td class='cls_camdrop'>";
|
|
html_cfg += "<select class='cls_drop' ";
|
|
html_cfg += "onchange='dropchange_cam.call(this)' ";
|
|
html_cfg += "name='camdrop'>\n";
|
|
html_cfg += "<option value='0000'>default</option>\n";
|
|
html_cfg += "</select></td></tr>\n";
|
|
|
|
for (jkey in pCfg) {
|
|
if (pCfg[jkey]["category"] == jcat) {
|
|
html_cfg += assign_config_item(jkey);
|
|
}
|
|
}
|
|
html_cfg += "<tr><td><input type='hidden' name='trailer' value='null'></td>\n";
|
|
html_cfg += "<td> <button onclick='send_config(";
|
|
html_cfg += jcat + ")'>Submit</button></td></tr>\n";
|
|
html_cfg += "</table></div>\n";
|
|
|
|
return html_cfg;
|
|
|
|
}
|
|
|
|
function assign_config() {
|
|
var pCat = pData['categories'];
|
|
var html_cfg = "";
|
|
|
|
assign_config_nav();
|
|
|
|
for (jcat in pCat) {
|
|
html_cfg += assign_config_cat(jcat);
|
|
}
|
|
|
|
document.getElementById("div_config").innerHTML = html_cfg;
|
|
|
|
}
|
|
|
|
function initform() {
|
|
var xmlhttp = new XMLHttpRequest();
|
|
|
|
pHostFull = '//' + window.location.hostname;
|
|
pHostFull = pHostFull + ':' + window.location.port;
|
|
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
pData = JSON.parse(this.responseText);
|
|
gIndxCam = -1;
|
|
gGetImgs = 1;
|
|
gIndxScan = -1;
|
|
|
|
assign_config();
|
|
assign_version();
|
|
assign_vals(0);
|
|
assign_cams();
|
|
assign_actions();
|
|
cams_all_click();
|
|
nav_close();
|
|
}
|
|
};
|
|
xmlhttp.open('GET', pHostFull+'/0/config.json');
|
|
xmlhttp.send();
|
|
}
|
|
|
|
function display_cameras() {
|
|
document.getElementById('divnav_config').style.display = 'none';
|
|
document.getElementById('divnav_actions').style.display = 'none';
|
|
document.getElementById('divnav_movies').style.display = 'none';
|
|
if (document.getElementById('divnav_cam').style.display == 'block'){
|
|
document.getElementById('divnav_cam').style.display = 'none';
|
|
} else {
|
|
document.getElementById('divnav_cam').style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function display_config() {
|
|
document.getElementById('divnav_cam').style.display = 'none';
|
|
document.getElementById('divnav_actions').style.display = 'none';
|
|
document.getElementById('divnav_movies').style.display = 'none';
|
|
if (document.getElementById('divnav_config').style.display == 'block') {
|
|
document.getElementById('divnav_config').style.display = 'none';
|
|
} else {
|
|
document.getElementById('divnav_config').style.display = 'block';
|
|
}
|
|
gIndxScan = -1;
|
|
cams_timer_stop();
|
|
}
|
|
|
|
function display_movies() {
|
|
document.getElementById('divnav_cam').style.display = 'none';
|
|
document.getElementById('divnav_actions').style.display = 'none';
|
|
document.getElementById('divnav_config').style.display = 'none';
|
|
if (document.getElementById('divnav_movies').style.display == 'block') {
|
|
document.getElementById('divnav_movies').style.display = 'none';
|
|
} else {
|
|
document.getElementById('divnav_movies').style.display = 'block';
|
|
}
|
|
gIndxScan = -1;
|
|
cams_timer_stop();
|
|
}
|
|
|
|
function display_actions() {
|
|
document.getElementById('divnav_cam').style.display = 'none';
|
|
document.getElementById('divnav_config').style.display = 'none';
|
|
if (document.getElementById('divnav_actions').style.display == 'block') {
|
|
document.getElementById('divnav_actions').style.display = 'none';
|
|
} else {
|
|
document.getElementById('divnav_actions').style.display = 'block';
|
|
}
|
|
gIndxScan = -1;
|
|
}
|
|
|
|
function camera_buttons_ptz() {
|
|
|
|
var html_preview = "";
|
|
html_preview += "<table style='float: left' >";
|
|
html_preview += "<tr><td>  </td><td>  </td></tr>\n";
|
|
html_preview += "<tr><td></td><td><button \n";
|
|
html_preview += "onclick=\"send_action('tilt_up');\" \n";
|
|
html_preview += "class=\"arrow up\" \n";
|
|
html_preview += "></button></td></tr> \n";
|
|
html_preview += "<tr><td><button \n";
|
|
html_preview += "onclick=\"send_action('pan_left');\" \n";
|
|
html_preview += "class=\"arrow left\" \n";
|
|
html_preview += "></button></td><td></td> \n";
|
|
html_preview += "<td><button \n";
|
|
html_preview += "onclick=\"send_action('pan_right');\" \n";
|
|
html_preview += "class=\"arrow right\" \n";
|
|
html_preview += "></button></td><td>  </td> \n";
|
|
html_preview += "<td> </td><td><button \n";
|
|
html_preview += "onclick=\"send_action('zoom_in');\" \n";
|
|
html_preview += "class=\"zoombtn\" \n";
|
|
html_preview += ">+</button></td> \n";
|
|
html_preview += "<td> </td><td><button \n";
|
|
html_preview += "onclick=\"send_action('zoom_out');\" \n";
|
|
html_preview += "class=\"zoombtn\" \n";
|
|
html_preview += ">-</button></td></tr> \n";
|
|
html_preview += "<tr><td></td><td><button \n";
|
|
html_preview += "onclick=\"send_action('tilt_down');\" \n";
|
|
html_preview += "class=\"arrow down\" \n";
|
|
html_preview += "></button></td></tr> \n";
|
|
html_preview += "<tr><td>  </td><td>  </td></tr>\n";
|
|
html_preview += "</table><p></p>";
|
|
return html_preview;
|
|
|
|
}
|
|
|
|
function image_pantilt() {
|
|
|
|
if (gIndxCam == -1 ) {
|
|
return;
|
|
}
|
|
|
|
document.getElementById('pic'+ gIndxCam).addEventListener('click',function(event){
|
|
bounds=this.getBoundingClientRect();
|
|
var x = Math.floor(event.pageX - bounds.left - window.scrollX);
|
|
var y = Math.floor(event.pageY - bounds.top - window.scrollY);
|
|
var w = Math.floor(bounds.width);
|
|
var h = Math.floor(bounds.height);
|
|
var qtr_x = Math.floor(bounds.width/4);
|
|
var qtr_y = Math.floor(bounds.height/4);
|
|
if ((x > qtr_x) && (x < (w - qtr_x)) && (y < qtr_y)) {
|
|
send_action('tilt_up');
|
|
} else if ((x > qtr_x) && (x < (w - qtr_x)) && (y >(h - qtr_y))) {
|
|
send_action('tilt_down');
|
|
} else if ((x < qtr_x) && (y > qtr_y) && (y < (h - qtr_y))) {
|
|
send_action('pan_left');
|
|
} else if ((x >(w - qtr_x)) && (y > qtr_y) && (y < (h - qtr_y))) {
|
|
send_action('pan_right');
|
|
}
|
|
});
|
|
}
|
|
|
|
function cams_timer_stop() {
|
|
clearInterval(cams_one_timer);
|
|
clearInterval(cams_all_timer);
|
|
clearInterval(cams_scan_timer);
|
|
}
|
|
|
|
function cams_reset() {
|
|
var indx, camcnt;
|
|
camcnt = pData['cameras']['count'];
|
|
for (indx=0; indx<camcnt; indx++) {
|
|
if (document.getElementById('pic'+indx) != null) {
|
|
document.getElementById('pic'+indx).src = '';
|
|
}
|
|
}
|
|
}
|
|
|
|
function cams_all_click() {
|
|
|
|
var html_preview = "";
|
|
var indx;
|
|
var camid;
|
|
|
|
config_hideall();
|
|
cams_timer_stop();
|
|
gIndxCam = -1;
|
|
gIndxScan = -1;
|
|
|
|
var camcnt = pData['cameras']['count'];
|
|
html_preview += "</table>";
|
|
for (indx=0; indx<camcnt; indx++) {
|
|
camid = pData['cameras'][indx].id;
|
|
if (pData['configuration']['cam'+camid].stream_preview_method.value == 'static') {
|
|
html_preview += "<a><img id='pic" + indx + "' src="
|
|
html_preview += pData['cameras'][indx]['url'];
|
|
html_preview += "static/stream/t" + new Date().getTime();
|
|
html_preview += " onclick='cams_one_click(" + indx + ")' ";
|
|
html_preview += " border=0 width=";
|
|
html_preview += pData['configuration']['cam'+camid].stream_preview_scale.value;
|
|
html_preview += "%></a>\n";
|
|
if (pData['configuration']['cam'+camid].stream_preview_newline.value == true) {
|
|
html_preview += "<br>\n";
|
|
}
|
|
} else {
|
|
html_preview += "<a><img id='pic" + indx + "' src="
|
|
html_preview += pData['cameras'][indx]['url'];
|
|
html_preview += "mjpg/stream" ;
|
|
html_preview += " onclick='cams_one_click(" + indx + ")' ";
|
|
html_preview += " border=0 width=";
|
|
html_preview += pData['configuration']['cam'+camid].stream_preview_scale.value;
|
|
html_preview += "%></a>\n";
|
|
if (pData['configuration']['cam'+camid].stream_preview_newline.value == true) {
|
|
html_preview += "<br>\n";
|
|
}
|
|
}
|
|
}
|
|
document.getElementById('div_config').style.display='none';
|
|
document.getElementById('div_movies').style.display = 'none';
|
|
cams_reset();
|
|
document.getElementById('div_cam').style.display='block';
|
|
document.getElementById('div_cam').innerHTML = html_preview;
|
|
cams_all_timer = setInterval(cams_all_fnc, 2000);
|
|
|
|
}
|
|
|
|
function cams_one_click(index_cam) {
|
|
|
|
var html_preview = "";
|
|
var camid;
|
|
|
|
config_hideall();
|
|
cams_timer_stop();
|
|
gIndxCam = index_cam;
|
|
|
|
gIndxScan = -1;
|
|
|
|
if (gIndxCam == -1 ) {
|
|
return;
|
|
}
|
|
|
|
camid = pData['cameras'][index_cam].id;
|
|
if ((pData['configuration']['cam'+camid].stream_preview_ptz.value == true)) {
|
|
html_preview += camera_buttons_ptz();
|
|
}
|
|
|
|
if (pData['configuration']['cam'+camid].stream_preview_method.value == 'static') {
|
|
html_preview += "<a><img id='pic" + gIndxCam + "' src=";
|
|
html_preview += pData['cameras'][gIndxCam]['url'];
|
|
html_preview += "static/stream/t" + new Date().getTime();
|
|
html_preview += " border=0 width=95%></a>\n";
|
|
} else {
|
|
html_preview += "<a><img id='pic" + gIndxCam + "' src=";
|
|
html_preview += pData['cameras'][gIndxCam]['url'];
|
|
html_preview += "mjpg/stream" ;
|
|
html_preview += " border=0 width=95%></a>\n";
|
|
}
|
|
document.getElementById('div_config').style.display='none';
|
|
document.getElementById('div_movies').style.display = 'none';
|
|
cams_reset();
|
|
document.getElementById('div_cam').style.display='block';
|
|
document.getElementById('div_cam').innerHTML = html_preview;
|
|
|
|
image_pantilt();
|
|
|
|
cams_one_timer = setInterval(cams_one_fnc, 1000);
|
|
|
|
}
|
|
|
|
function cams_scan_click() {
|
|
|
|
cams_timer_stop();
|
|
|
|
gIndxCam = -1;
|
|
gIndxScan = 0;
|
|
|
|
cams_scan_timer = setInterval(cams_scan_fnc, 5);
|
|
}
|
|
|
|
function cams_one_fnc () {
|
|
var img = new Image();
|
|
var camid;
|
|
|
|
if (gIndxCam == -1 ) {
|
|
return;
|
|
}
|
|
|
|
camid = pData['cameras'][gIndxCam]['id'];
|
|
|
|
if (pData['configuration']['cam'+camid].stream_preview_method.value == 'static') {
|
|
pic_url[0] = pData['cameras'][gIndxCam]['url'] + "static/stream/t" + new Date().getTime();
|
|
img.src = pic_url[0];
|
|
document.getElementById('pic'+gIndxCam).src = pic_url[0];
|
|
}
|
|
}
|
|
|
|
function cams_img_onload(camindx, indx) {
|
|
document.getElementById('pic'+camindx).src = pic_url[indx];
|
|
pic_url[indx] = '';
|
|
}
|
|
|
|
function cams_all_fnc () {
|
|
if (gGetImgs == 1) {
|
|
gGetImgs = 0;
|
|
var camcnt = pData['cameras']['count'];
|
|
var camindx = 0;
|
|
var indx;
|
|
var img = new Array(4);
|
|
var maxchk = 1;
|
|
for (indx = 0; indx <= 3; indx++) {
|
|
pic_url[indx] = '';
|
|
img[indx] = new Image();
|
|
}
|
|
while ((camindx < camcnt) && (maxchk < 10)) {
|
|
maxchk++;
|
|
camid = pData['cameras'][camindx]['id'];
|
|
if (pData['configuration']['cam'+camid].stream_preview_method.value == 'static') {
|
|
for (indx = 0; indx <= 3; indx++) {
|
|
if ((pic_url[indx] == '') && (camindx < camcnt)) {
|
|
pic_url[indx] = pData['cameras'][camindx]['url'] + "static/stream/t" + new Date().getTime();
|
|
img[indx].onload = cams_img_onload(camindx, indx);
|
|
img[indx].src = pic_url[indx];
|
|
camindx++;
|
|
}
|
|
}
|
|
} else {
|
|
camindx++;
|
|
}
|
|
}
|
|
gGetImgs = 1;
|
|
}
|
|
}
|
|
|
|
function cams_scan_fnc() {
|
|
var html_preview = "";
|
|
var camid;
|
|
var camcnt = pData['cameras']['count'];
|
|
|
|
cams_reset();
|
|
if(gIndxScan == -1) {
|
|
clearInterval(cams_scan_timer);
|
|
return;
|
|
}
|
|
|
|
if(gIndxScan == (camcnt-1)) {
|
|
gIndxScan = 0;
|
|
} else {
|
|
gIndxScan++;
|
|
}
|
|
|
|
camid = pData['cameras'][gIndxScan]['id'];
|
|
clearInterval(cams_scan_timer);
|
|
cams_scan_timer = setInterval(cams_scan_fnc,
|
|
pData['configuration']['cam'+camid].stream_scan_time.value * 1000
|
|
);
|
|
html_preview += "<a><img id='pic0' src="
|
|
html_preview += pData['cameras'][gIndxScan]['url'];
|
|
html_preview += "mjpg/stream" ;
|
|
html_preview += " onclick='cams_one_click(" + gIndxScan + ")' ";
|
|
html_preview += " border=0 width=";
|
|
html_preview += pData['configuration']['cam'+camid].stream_scan_scale.value;
|
|
html_preview += "%></a>\n";
|
|
document.getElementById('div_config').style.display='none';
|
|
document.getElementById('div_movies').style.display='none';
|
|
cams_reset();
|
|
document.getElementById('div_cam').style.display='block';
|
|
document.getElementById('div_cam').innerHTML = html_preview;
|
|
};
|
|
|
|
function movies_page() {
|
|
|
|
var html_tab = "<div>";
|
|
var indx, movcnt, camid, uri;
|
|
var fname,fsize,fdate;
|
|
|
|
if (gIndxCam == -1 ) {
|
|
return;
|
|
}
|
|
|
|
camid = assign_camid();
|
|
uri = pHostFull+'/'+camid+'/movies/';
|
|
|
|
movcnt = pMovies['movies'][gIndxCam].count;
|
|
html_tab +="<table style='color:white;' >";
|
|
html_tab +=" <colgroup width='20%'></colgroup>";
|
|
html_tab +=" <colgroup width='2%'></colgroup>";
|
|
html_tab +=" <colgroup width='2%'></colgroup>";
|
|
html_tab +=" <colgroup width='2%'></colgroup>";
|
|
html_tab +=" <colgroup width='2%'></colgroup>";
|
|
html_tab +=" <colgroup width='2%'></colgroup>";
|
|
html_tab +=" <colgroup width='2%'></colgroup>";
|
|
html_tab +=" <colgroup width='2%'></colgroup>";
|
|
html_tab +=" <colgroup width='2%'></colgroup>";
|
|
html_tab +=" <tr>";
|
|
html_tab +=" <td align='left'><b>Name</b></td>";
|
|
html_tab +=" <td align='left'><b>Size</b></td>";
|
|
html_tab +=" <td align='left'><b>Date</b></td>";
|
|
html_tab +=" <td align='left'><b>time</b></td>";
|
|
html_tab +=" <td align='left'><b>diff_avg</b></td>";
|
|
html_tab +=" <td align='left'><b>sdev_min</b></td>";
|
|
html_tab +=" <td align='left'><b>sdev_max</b></td>";
|
|
html_tab +=" <td align='left'><b>sdev_avg</b></td>";
|
|
html_tab +=" <td align='left'><b></b></td>";
|
|
html_tab +=" </tr>";
|
|
|
|
for (indx = 0; indx < movcnt; indx++) {
|
|
fname = pMovies['movies'][gIndxCam][indx]['name'];
|
|
fsize = pMovies['movies'][gIndxCam][indx]['size'];
|
|
fdate = pMovies['movies'][gIndxCam][indx]['date'];
|
|
|
|
ftime = pMovies['movies'][gIndxCam][indx]['time'];
|
|
|
|
fdavg = pMovies['movies'][gIndxCam][indx]['diff_avg'];
|
|
|
|
fsmin = pMovies['movies'][gIndxCam][indx]['sdev_min'];
|
|
|
|
fsmax = pMovies['movies'][gIndxCam][indx]['sdev_max'];
|
|
|
|
fsavg = pMovies['movies'][gIndxCam][indx]['sdev_avg'];
|
|
|
|
html_tab +="<tr>";
|
|
html_tab +=" <td align='left'><a href='"
|
|
html_tab += uri + fname + "'>" + fname + "</a></td>";
|
|
html_tab +=" <td align='center'>"+fsize+"</td>";
|
|
html_tab +=" <td align='center'>"+fdate+"</td>";
|
|
html_tab +=" <td align='center'>"+ftime+"</td>";
|
|
html_tab +=" <td align='center'>"+fdavg+"</td>";
|
|
html_tab +=" <td align='center'>"+fsmin+"</td>";
|
|
html_tab +=" <td align='center'>"+fsmax+"</td>";
|
|
html_tab +=" <td align='center'>"+fsavg+"</td>";
|
|
html_tab +=" <td align='center'> </td>";
|
|
html_tab +="</tr>";
|
|
}
|
|
html_tab +="</table>";
|
|
html_tab +="</div>";
|
|
|
|
document.getElementById('div_config').style.display='none';
|
|
document.getElementById('div_cam').style.display='none';
|
|
cams_reset();
|
|
document.getElementById('div_movies').style.display='block';
|
|
document.getElementById('div_movies').innerHTML = html_tab;
|
|
|
|
}
|
|
|
|
function movies_click(index_cam) {
|
|
var camid, indx, camcnt, uri;
|
|
|
|
if (gIndxCam == -1 ) {
|
|
return;
|
|
}
|
|
|
|
gIndxCam = index_cam;
|
|
gIndxScan = -1;
|
|
camid = assign_camid();
|
|
uri = pHostFull+'/'+camid+'/movies.json';
|
|
|
|
config_hideall();
|
|
cams_reset();
|
|
var xmlhttp = new XMLHttpRequest();
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
pMovies = JSON.parse(this.responseText);
|
|
movies_page();
|
|
}
|
|
};
|
|
xmlhttp.open('GET', uri);
|
|
xmlhttp.send();
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body></html> |