initial commit for NVR plugin
This commit is contained in:
parent
65581f13d5
commit
da3ba116da
18 changed files with 964 additions and 0 deletions
123
plugins/hal-nvr/resource/resource/web/camera_config.tmpl
Normal file
123
plugins/hal-nvr/resource/resource/web/camera_config.tmpl
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<h1 class="page-header">Camera Configuration</h1>
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="panel panel-default drop-shadow">
|
||||
<div class="panel-heading">Cameras</div>
|
||||
<div class="panel-body">
|
||||
<p>This is a list of cameras connected to this node.</p>
|
||||
|
||||
<table class="table table-hover table-condensed">
|
||||
<thead>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Configuration</th>
|
||||
<th>
|
||||
<button class="btn btn-default btn-xs pull-right" data-toggle="modal"
|
||||
data-target="#cameraModal"
|
||||
data-action="create_camera">
|
||||
<span class="glyphicon glyphicon-plus"></span>
|
||||
</button>
|
||||
</th>
|
||||
</thead>
|
||||
{{#cameras}}
|
||||
<tr>
|
||||
<td>{{.getName()}}</td>
|
||||
<td>{{.getType()}}</td>
|
||||
<td>{{.getDeviceConfig()}}</td>
|
||||
<td>
|
||||
<form method="POST">
|
||||
<input type="hidden" name="id" value="{{.getId()}}">
|
||||
|
||||
<div class="btn-toolbar pull-right">
|
||||
<button type="button" class="btn btn-default btn-xs" data-toggle="modal"
|
||||
data-target="#cameraModal"
|
||||
data-action="modify_camera"
|
||||
data-id="{{.getId()}}"
|
||||
data-name="{{.getName()}}"
|
||||
data-type="{{.getType()}}"
|
||||
{{#.getDeviceConfigurator().getConfiguration()}}
|
||||
data-{{.getName()}}="{{.getString()}}"
|
||||
{{/.getDeviceConfigurator().getConfiguration()}}
|
||||
>
|
||||
<span class="glyphicon glyphicon-pencil"></span>
|
||||
</button>
|
||||
|
||||
<button type="submit" class="btn btn-danger btn-xs" name="action" value="remove_camera">
|
||||
<span class="glyphicon glyphicon-trash"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{{/cameras}}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!------------- MODALS --------------->
|
||||
<script>
|
||||
$(function(){
|
||||
initDynamicModalForm("cameraModal", "camera-data-conf", "camera-data-conf-template");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<div class="modal fade" id="cameraModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
|
||||
<h4 class="modal-title">Camera</h4>
|
||||
</div>
|
||||
<form method="POST">
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="action" name="action">
|
||||
<input type="hidden" id="id" name="id">
|
||||
<div class="form-group">
|
||||
<label class="control-label">Name:</label>
|
||||
<input type="text" class="form-control" name="name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">Type:</label>
|
||||
<select class="form-control" name="type">
|
||||
{{#availableCameras}}
|
||||
<option>{{.getName()}}</option>
|
||||
{{/availableCameras}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div id="camera-data-conf">
|
||||
<!-- Dynamic form -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="camera-data-conf-template" class="hidden">
|
||||
{{#cameraConf}}
|
||||
<div id="{{.clazz.getName()}}">
|
||||
{{#.params}}
|
||||
<div class="form-group">
|
||||
<label class="control-label">{{.getNiceName()}}:</label>
|
||||
{{#.isTypeString()}}<input type="text" class="form-control" name="{{.getName()}}">{{/#.isTypeString()}}
|
||||
{{#.isTypeInt()}}<input type="number" class="form-control" name="{{.getName()}}">{{/#.isTypeInt()}}
|
||||
{{#.isTypeBoolean()}}<input type="checkbox" name="{{.getName()}}" value="true">{{/#.isTypeBoolean()}}
|
||||
{{#.isTypeEnum()}}
|
||||
<select class="form-control" name="{{.getName()}}">
|
||||
{{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
|
||||
</select>
|
||||
{{/#.isTypeEnum()}}
|
||||
</div>
|
||||
{{/.params}}
|
||||
</div>
|
||||
{{/cameraConf}}
|
||||
</div>
|
||||
|
||||
42
plugins/hal-nvr/resource/resource/web/camera_detail.tmpl
Normal file
42
plugins/hal-nvr/resource/resource/web/camera_detail.tmpl
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<h1 class="page-header">Details for <a href="#">{{camera.getName()}}</a></h1>
|
||||
|
||||
<div class="col-md-12">
|
||||
<video width="100%" height="480" controls>
|
||||
<source src="rtsp://admin:xxxx@192.168.10.223:554/H.264">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="panel panel-default drop-shadow">
|
||||
<div class="panel-heading">Configuration</div>
|
||||
<div class="panel-body">
|
||||
<table class="table table-hover table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-right">Camera ID:</th>
|
||||
<th>{{camera.getId()}}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-right">Name:</th>
|
||||
<th>{{camera.getName()}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<th class="text-right">Type:</th>
|
||||
<td>{{camera.getDeviceData().getClass().getSimpleName()}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-right">Owner:</th>
|
||||
<td>{{camera.getUser().getUsername()}} <p></td>
|
||||
</tr>
|
||||
{{#camera.getDeviceConfigurator().getConfiguration()}}
|
||||
<tr>
|
||||
<th class="text-right">{{.getNiceName()}}:</th>
|
||||
<td>{{.getString()}}</td>
|
||||
</tr>
|
||||
{{/camera.getDeviceConfigurator().getConfiguration()}}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
39
plugins/hal-nvr/resource/resource/web/camera_monitor.tmpl
Normal file
39
plugins/hal-nvr/resource/resource/web/camera_monitor.tmpl
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<h1 class="page-header">Camera Monitor</h1>
|
||||
|
||||
<style>
|
||||
.monitor-view {
|
||||
padding: 0px;
|
||||
line-height: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="monitor-view col-md-6">
|
||||
<video width="100%" height="480" controls>
|
||||
<source src="rtsp://admin:xxxx@192.168.10.223:554/H.264">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<div class="monitor-view col-md-6">
|
||||
<video width="100%" height="480" controls>
|
||||
<source src="rtsp://admin:xxxx@192.168.10.223:554/H.264">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="monitor-view col-md-6">
|
||||
<video width="100%" height="480" controls>
|
||||
<source src="rtsp://admin:xxxx@192.168.10.223:554/H.264">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<div class="monitor-view col-md-6">
|
||||
<video width="100%" height="480" controls>
|
||||
<source src="rtsp://admin:xxx@192.168.10.223:554/H.264">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
26
plugins/hal-nvr/resource/resource/web/camera_overview.tmpl
Normal file
26
plugins/hal-nvr/resource/resource/web/camera_overview.tmpl
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<h1 class="page-header">Camera Overview</h1>
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="panel panel-default drop-shadow">
|
||||
<div class="panel-heading">Cameras</div>
|
||||
<div class="panel-body">
|
||||
|
||||
<table class="table table-hover table-condensed">
|
||||
<thead>
|
||||
<th class="col-md-4">Name</th>
|
||||
<th class="col-md-3">Type</th>
|
||||
<th class="col-md-2">Data</th>
|
||||
<th class="col-md-2">Last Update</th>
|
||||
</thead>
|
||||
{{#cameras}}
|
||||
<tr>
|
||||
<td><a href="?id={{.getId()}}">{{.getName()}}</a></td>
|
||||
<td>{{.getDeviceConfig().getClass().getSimpleName()}}</td>
|
||||
<td>{{.getDeviceData()}}</td>
|
||||
<td><span class="timestamp">{{.getDeviceData().getTimestamp()}}</span></td>
|
||||
</tr>
|
||||
{{/cameras}}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue