104 lines
3.9 KiB
Django/Jinja
104 lines
3.9 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{{motion_web_title}}</title>
|
|
<script type="text/javascript">
|
|
var motionControl = {
|
|
Camera: function(section) {
|
|
this.number = section.dataset.number;
|
|
|
|
section.innerHTML = document.getElementById('camera-template').innerHTML;
|
|
|
|
this.statusFrame = section.getElementsByClassName('status-iframe')[0];
|
|
this.offLink = section.getElementsByClassName('status-off')[0];
|
|
this.onLink = section.getElementsByClassName('status-on')[0];
|
|
this.motionImg = section.getElementsByClassName('camera-motion')[0];
|
|
this.statusFrame.src = 'control/' + this.number + '/detection/status';
|
|
this.offLink['data-href'] = 'control/' + this.number + '/detection/pause';
|
|
this.onLink['data-href'] = 'control/' + this.number + '/detection/start';
|
|
this.motionImgEventListener = () => { this.resizeMotion(); };
|
|
this.motionImg.addEventListener('load', this.motionImgEventListener);
|
|
this.motionImg.src = 'camera/' + this.number + '/motion';
|
|
section.getElementsByClassName('camera-stream')[0].src = 'camera/' + this.number + '/stream';
|
|
section.getElementsByTagName('h1')[0].innerHTML = section.dataset.title;
|
|
|
|
this.offLink.addEventListener('click', event => { this.handleStatusControl(event); });
|
|
this.onLink.addEventListener('click', event => { this.handleStatusControl(event); });
|
|
},
|
|
init: function() {
|
|
const cameras = document.getElementsByClassName('camera');
|
|
for (let i = 0; i < cameras.length; i++) {
|
|
new motionControl.Camera(cameras[i]);
|
|
}
|
|
}
|
|
};
|
|
motionControl.Camera.prototype.handleStatusControl = function(event) {
|
|
event.preventDefault();
|
|
let url = event.target['data-href'];
|
|
let request = new XMLHttpRequest();
|
|
request.addEventListener('load', () => { this.reloadStatus(); }, false);
|
|
request.addEventListener('error', () => { this.showError(); }, false);
|
|
request.open('GET', url);
|
|
request.send();
|
|
};
|
|
motionControl.Camera.prototype.reloadStatus = function() {
|
|
this.statusFrame.contentWindow.location.reload(true);
|
|
};
|
|
motionControl.Camera.prototype.showError = function(event) {
|
|
console.log(event);
|
|
alert('ERROR (type ' + event.type + '); see the browser console for details.');
|
|
};
|
|
motionControl.Camera.prototype.resizeMotion = function() {
|
|
this.motionImg.removeEventListener('load', this.motionImgEventListener);
|
|
this.motionImg.width /= 2; // height automatic
|
|
}
|
|
|
|
window.addEventListener('load', motionControl.init);
|
|
</script>
|
|
<style type="text/css">
|
|
#camera-template {
|
|
display: none;
|
|
}
|
|
.status-control {
|
|
float: left;
|
|
clear: left;
|
|
margin: 0.1em 0.5em;
|
|
padding: 0.25em;
|
|
width: 3em;
|
|
height: 1em;
|
|
box-sizing: content-box;
|
|
/* border-width: 0.5em 1em; assumed for native look */
|
|
}
|
|
.status-iframe {
|
|
box-sizing: border-box;
|
|
width: calc(100% - 6.5em);
|
|
min-width: 30ex;
|
|
height: 4.3em;
|
|
}
|
|
.camera-output {
|
|
clear: both;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>{{motion_web_title}}</h1>
|
|
{% for camera in (motion_cameras | from_json) %}
|
|
<section class="camera" data-number={{camera.id}} data-title="{{camera.name}}"></section>
|
|
{% endfor %}
|
|
|
|
<div id="camera-template">
|
|
<h1></h1>
|
|
<section class="camera-control">
|
|
<button class="status-control status-off">OFF</button>
|
|
<button class="status-control status-on">ON</button>
|
|
<iframe class="status-iframe" type="text/plain; charset=UTF-8" src=""></iframe>
|
|
</section>
|
|
<section class="camera-output">
|
|
<img class="camera-stream" src="">
|
|
<img class="camera-motion" src="">
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|