ZaneYork
/
zoneminder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Major rehaul of Monitor view in Angular JS 

You can now add monitors via angularjs, with the api as the
backend.
This commit is contained in:
Kyle Johnson 2014-12-17 16:08:35 -05:00
parent d5c8de6cb7
commit 2e96b141e5
11 changed files with 152 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
web/skins/bootstrap/js/controllers.js
View File

@ -46,11 +46,50 @@ ZoneMinder.controller('EventController', function($scope, $location, Event) {
}); });
}); });
ZoneMinder.controller('MonitorController', function($scope) { ZoneMinder.controller('MonitorController', function($scope, $http) {
$scope.sourceType = 'Local'; $scope.monitor = {};
$scope.RefBlendPerc = 6; $scope.monitor.sourceType = 'Remote';
$scope.AlarmRefBlendPerc = 6; $scope.monitor.RefBlendPerc = 6;
$scope.Function = 'Monitor'; $scope.monitor.AlarmRefBlendPerc = 6;
$scope.monitor.Function = 'Monitor';
$scope.monitor.ImageBufferCount = 100;
$scope.monitor.WarmupCount = 25;
$scope.monitor.PreEventCount = 50;
$scope.monitor.PostEventCount = 50;
$scope.monitor.StreamReplayBuffer = 1000;
$scope.monitor.AlarmFrameCount = 1;
$scope.monitor.LabelFormat = '%N - %d/%m/%y %H:%M:%S';
$scope.monitor.LabelX = 0;
$scope.monitor.LabelY = 0;
$scope.monitor.Colours = 3;
$scope.monitor.Orientation = 0;
$scope.monitor.Enabled = true;
$scope.monitor.Protocol = 'http';
$scope.monitor.SectionLength = 600;
$scope.monitor.EventPrefix = 'Event-';
$scope.monitor.FrameSkip = 0;
$scope.monitor.MotionFrameSkip = 0;
$scope.monitor.FPSReportInterval = 1000;
$scope.monitor.DefaultView = 'Events';
$scope.monitor.DefaultRate = 100;
$scope.monitor.DefaultScale = 100;
$scope.monitor.SignalCheckColour = '#0000c0';
var color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
$scope.monitor.WebColour = color;
$scope.submitMonitor = function() {
$http({
method : 'POST',
url : '/api/monitors.json',
data : $.param($scope.monitor),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
console.log(data);
window.location = "/index.php?view=console";
});
};
}); });
ZoneMinder.controller('ConsoleController', function($scope, Console) { ZoneMinder.controller('ConsoleController', function($scope, Console) {

9
web/skins/bootstrap/views/monitor.php
View File

@ -426,12 +426,10 @@ xhtmlHeaders(__FILE__, $SLANG['Monitor']." - ".validHtmlStr($monitor['Name']) );
<a href="#" onclick="createPopup( '?view=monitorprobe&amp;mid=<?= $monitor['Id'] ?>', 'zmMonitorProbe<?= $monitor['Id'] ?>', 'monitorprobe' ); return( false );"><?= $SLANG['Probe'] ?></a> <a href="#" onclick="createPopup( '?view=monitorprobe&amp;mid=<?= $monitor['Id'] ?>', 'zmMonitorProbe<?= $monitor['Id'] ?>', 'monitorprobe' ); return( false );"><?= $SLANG['Probe'] ?></a>
<a href="#" onclick="createPopup( '?view=monitorpreset&amp;mid=<?= $monitor['Id'] ?>', 'zmMonitorPreset<?= $monitor['Id'] ?>', 'monitorpreset' ); return( false );"><?= $SLANG['Presets'] ?></a> <a href="#" onclick="createPopup( '?view=monitorpreset&amp;mid=<?= $monitor['Id'] ?>', 'zmMonitorPreset<?= $monitor['Id'] ?>', 'monitorpreset' ); return( false );"><?= $SLANG['Presets'] ?></a>
</div> </div>
<h2><?= $SLANG['Monitor'] ?> - <?= validHtmlStr($monitor['Name']) ?><?php if ( !empty($monitor['Id']) ) { ?> (<?= $monitor['Id'] ?>)<?php } ?></h2>
</div> </div>
<div class="container-fluid"> <div class="container-fluid" ng-controller="MonitorController">
<form ng-submit="submitMonitor(formMonitor.$valid)" name="formMonitor" novalidate>
<div class="container" ng-controller="MonitorController">
<ul class="nav nav-tabs" role="tablist" id="tabMonitorAdd"> <ul class="nav nav-tabs" role="tablist" id="tabMonitorAdd">
<li class="active" role="presentation"><a href="#general" aria-expanded="true" aria-controls="general" role="tab" data-toggle="tab">General</a></li> <li class="active" role="presentation"><a href="#general" aria-expanded="true" aria-controls="general" role="tab" data-toggle="tab">General</a></li>
<li role="presentation"><a href="#source" aria-controls="source" role="tab" data-toggle="tab">Source</a></li> <li role="presentation"><a href="#source" aria-controls="source" role="tab" data-toggle="tab">Source</a></li>
@ -447,8 +445,9 @@ xhtmlHeaders(__FILE__, $SLANG['Monitor']." - ".validHtmlStr($monitor['Name']) );
<?php include("tab-monitor-buffers.php"); ?> <?php include("tab-monitor-buffers.php"); ?>
<?php include("tab-monitor-misc.php"); ?> <?php include("tab-monitor-misc.php"); ?>
</div> <!-- End .tab-content --> </div> <!-- End .tab-content -->
</div>
<button type="submit" class="btn btn-success btn-block" ng-disabled="formMonitor.$invalid">Save</button>
</form>
</div> <!-- End .container-fluid --> </div> <!-- End .container-fluid -->
<?php include("footer.php"); ?> <?php include("footer.php"); ?>
</body> </body>

12
web/skins/bootstrap/views/tab-monitor-buffers.php
View File

@ -1,26 +1,26 @@
<div role="tabpanel" class="tab-pane" id="buffers"> <div role="tabpanel" class="tab-pane" id="buffers">
<div class="form-group"> <div class="form-group">
<label for="ImageBufferCount"><?= $SLANG['ImageBufferSize'] ?></label> <label for="ImageBufferCount"><?= $SLANG['ImageBufferSize'] ?></label>
<input id="ImageBufferCount" type="number" class="form-control" name="newMonitor[ImageBufferCount]" value="100" /> <input id="ImageBufferCount" type="number" class="form-control" ng-model="monitor.ImageBufferCount" required />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="WarmupCount"><?= $SLANG['WarmupFrames'] ?></label> <label for="WarmupCount"><?= $SLANG['WarmupFrames'] ?></label>
<input id="WarmupCount" type="number" class="form-control" name="newMonitor[WarmupCount]" value="25" /> <input id="WarmupCount" type="number" class="form-control" ng-model="monitor.WarmupCount" required />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="PreEventCount"><?= $SLANG['PreEventImageBuffer'] ?></label> <label for="PreEventCount"><?= $SLANG['PreEventImageBuffer'] ?></label>
<input id="PreEventCount" type="number" class="form-control" name="newMonitor[PreEventCount]" value="50" /> <input id="PreEventCount" type="number" class="form-control" ng-model="monitor.PreEventCount" required />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="PostEventCount"><?= $SLANG['PostEventImageBuffer'] ?></label> <label for="PostEventCount"><?= $SLANG['PostEventImageBuffer'] ?></label>
<input id="PostEventCount" type="number" class="form-control" name="newMonitor[PostEventCount]" value="50" /> <input id="PostEventCount" type="number" class="form-control" ng-model="monitor.PostEventCount" required />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="StreamReplayBuffer"><?= $SLANG['StreamReplayBuffer'] ?></label> <label for="StreamReplayBuffer"><?= $SLANG['StreamReplayBuffer'] ?></label>
<input id="StreamReplayBuffer" type="number" class="form-control" name="newMonitor[StreamReplayBuffer]" value="1000" /> <input id="StreamReplayBuffer" type="number" class="form-control" ng-model="monitor.StreamReplayBuffer" required />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="AlarmFrameCount"><?= $SLANG['AlarmFrameCount'] ?></label> <label for="AlarmFrameCount"><?= $SLANG['AlarmFrameCount'] ?></label>
<input id="AlarmFrameCount" type="number" class="form-control" name="newMonitor[AlarmFrameCount]" value="1" /> <input id="AlarmFrameCount" type="number" class="form-control" ng-model="monitor.AlarmFrameCount" required />
</div> </div>
</div> </div>

18
web/skins/bootstrap/views/tab-monitor-curl.php
View File

@ -1,4 +1,14 @@
<div ng-show="monitor.sourceType == 'cURL'">
<tr><td><?= "URL" ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr> <div class="form-group">
<tr><td><?= "Username" ?></td><td><input type="text" name="newMonitor[User]" value="<?= validHtmlStr($newMonitor['User']) ?>" size="12"/></td></tr> <label><?= "URL" ?></label>
<tr><td><?= "Password" ?></td><td><input type="text" name="newMonitor[Pass]" value="<?= validHtmlStr($newMonitor['Pass']) ?>" size="12"/></td></tr> <input class="form-control" type="text" ng-model="monitor.Path" />
</div>
<div class="form-group">
<label><?= "Username" ?></label>
<input class="form-control" type="text" ng-model="monitor.User" />
</div>
<div class="form-group">
<label><?= "Password" ?></label>
<input class="form-control" type="text" ng-model="monitor.Pass" />
</div>
</div>

19
web/skins/bootstrap/views/tab-monitor-ffmpeg-vlc.php
View File

@ -1,4 +1,17 @@
<div ng-show="monitor.sourceType == 'Libvlc' || sourceType == 'Ffmpeg'">
<div class="form-group">
<label><?= $SLANG['SourcePath'] ?></label>
<input class="form-control" type="text" ng-model="monitor.Path" />
</div>
<tr><td><?= $SLANG['SourcePath'] ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr> <div class="form-group">
<tr><td><?= $SLANG['RemoteMethod'] ?></td><td><?= buildSelect( "newMonitor[Method]", $rtspMethods ); ?></td></tr> <label><?= $SLANG['RemoteMethod'] ?></label>
<tr><td><?= $SLANG['Options'] ?>&nbsp;(<?= makePopupLink( '?view=optionhelp&amp;option=OPTIONS_'.strtoupper($newMonitor['Type']), 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td><td><input type="text" name="newMonitor[Options]" value="<?= validHtmlStr($newMonitor['Options']) ?>" size="36"/></td></tr> <?= buildSelect( "newMonitor[Method]", $rtspMethods ); ?>
</div>
<div class="form-group">
<label><?= $SLANG['Options'] ?>&nbsp;(<?= makePopupLink( '?view=optionhelp&amp;option=OPTIONS_'.strtoupper($newMonitor['Type']), 'zmOptionHelp', 'optionhelp', '?' ) ?>)</label>
<input class="form-control" type="text" ng-model="monitor.Options" />
</div>
</div>

8
web/skins/bootstrap/views/tab-monitor-file.php
View File

@ -1,2 +1,6 @@
<div ng-show="monitor.sourceType == 'file'">
<tr><td><?= $SLANG['SourcePath'] ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr> <div class="form-group">
<label><?= $SLANG['SourcePath'] ?></label>
<input type="text" ng-model="monitor.Path" />
</div>
</div>

40
web/skins/bootstrap/views/tab-monitor-general.php
View File

@ -6,11 +6,11 @@
<div class="form-group"> <div class="form-group">
<label for="Name"><?= $SLANG['Name'] ?></label> <label for="Name"><?= $SLANG['Name'] ?></label>
<input type="text" id="Name" class="form-control" ng-model="Name" placeholder="Monitor-Name" /> <input type="text" id="Name" class="form-control" ng-model="monitor.Name" placeholder="Monitor-Name" required />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="SourceType"><?= $SLANG['SourceType'] ?></label> <label for="SourceType"><?= $SLANG['SourceType'] ?></label>
<select ng-model="sourceType" id="SourceType" class="form-control"> <select ng-model="monitor.sourceType" id="SourceType" class="form-control" required>
<option value="Local">Local</option> <option value="Local">Local</option>
<option value="Remote">Remote</option> <option value="Remote">Remote</option>
<option value="File">File</option> <option value="File">File</option>
@ -21,7 +21,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="Function"><?= $SLANG['Function'] ?></label> <label for="Function"><?= $SLANG['Function'] ?></label>
<select class="form-control" id="Function" ng-model="Function"> <select class="form-control" id="Function" ng-model="monitor.Function" required>
<option value="None">None</option> <option value="None">None</option>
<option value="Monitor" selected="selected">Monitor</option> <option value="Monitor" selected="selected">Monitor</option>
<option value="Modect">Modect</option> <option value="Modect">Modect</option>
@ -32,7 +32,7 @@
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" id="Enabled" ng-model="Enabled" value="1"<?php if ( !empty($newMonitor['Enabled']) ) { ?> checked="checked"<?php } ?>/> <input type="checkbox" id="Enabled" ng-model="monitor.Enabled" value="1"<?php if ( !empty($newMonitor['Enabled']) ) { ?> checked="checked"<?php } ?>/>
Enabled Enabled
</label> </label>
</div> </div>
@ -42,60 +42,64 @@
?> ?>
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['RefImageBlendPct'] ?></label> <label for=""><?= $SLANG['RefImageBlendPct'] ?></label>
<select class="form-control" ng-model="RefBlendPerc"><?php foreach ( $fastblendopts as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['RefBlendPerc'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></div> <select class="form-control" ng-model="monitor.RefBlendPerc"><?php foreach ( $fastblendopts as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['RefBlendPerc'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></div>
<div class="form-group"> <div class="form-group">
<label for=""><?= "Alarm " . $SLANG['RefImageBlendPct'] ?></label> <label for=""><?= "Alarm " . $SLANG['RefImageBlendPct'] ?></label>
<select class="form-control" ng-model="AlarmRefBlendPerc"><?php foreach ( $fastblendopts_alarm as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['AlarmRefBlendPerc'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></div> <select class="form-control" ng-model="monitor.AlarmRefBlendPerc"><?php foreach ( $fastblendopts_alarm as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['AlarmRefBlendPerc'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></div>
<?php <?php
} else { } else {
?> ?>
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['RefImageBlendPct'] ?></label> <label for=""><?= $SLANG['RefImageBlendPct'] ?></label>
<input type="text" class="form-control" ng-model="RefBlendPerc" value="6" /> <input type="text" class="form-control" ng-model="monitor.RefBlendPerc" value="6" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for=""><?= "Alarm " . $SLANG['RefImageBlendPct'] ?></label> <label for=""><?= "Alarm " . $SLANG['RefImageBlendPct'] ?></label>
<input type="text" class="form-control" ng-model="AlarmRefBlendPerc" value="6" /> <input type="text" class="form-control" ng-model="monitor.AlarmRefBlendPerc" value="6" />
</div> </div>
<?php <?php
} }
?> ?>
<div class="form-group" ng-show="sourceType == 'Local'"> <div class="form-group" ng-show="monitor.sourceType == 'Local'">
<label for="MaxFPS"><?= $SLANG['MaximumFPS'] ?></label> <label for="MaxFPS"><?= $SLANG['MaximumFPS'] ?></label>
<input type="number" id="MaxFPS" class="form-control" ng-model="MaxFPS" /> <input type="number" id="MaxFPS" class="form-control" ng-model="monitor.MaxFPS" />
</div> </div>
<div class="form-group" ng-show="sourceType == 'Local'"> <div class="form-group" ng-show="monitor.sourceType == 'Local'">
<label for="AlarmMaxFPS"><?= $SLANG['AlarmMaximumFPS'] ?></label> <label for="AlarmMaxFPS"><?= $SLANG['AlarmMaximumFPS'] ?></label>
<input type="number" id="AlarmMaxFPS" class="form-control" ng-model="AlarmMaxFPS" /> <input type="number" id="AlarmMaxFPS" class="form-control" ng-model="monitor.AlarmMaxFPS" />
</div> </div>
</div> <!-- End .col-md-6 --> </div> <!-- End .col-md-6 -->
<div class="col-md-4"> <div class="col-md-4">
<div class="form-group"> <div class="form-group">
<label for=""><?= "Target Colorspace" ?></label> <label for=""><?= "Target Colorspace" ?></label>
<select class="form-control" name="newMonitor[Colours]"><?php foreach ( $Colours as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Colours'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select> <select required class="form-control" ng-model="monitor.Colours">
<?php foreach ( $Colours as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Colours'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?>
</select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['CaptureWidth'] ?> (<?= $SLANG['Pixels'] ?>)</label> <label for=""><?= $SLANG['CaptureWidth'] ?> (<?= $SLANG['Pixels'] ?>)</label>
<input class="form-control" type="number" name="newMonitor[Width]" value="<?= validHtmlStr($newMonitor['Width']) ?>" size="4" onkeyup="updateMonitorDimensions(this);"/> <input class="form-control" type="number" ng-model="monitor.Width" ng-maxlength="4" placeholder="704" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['CaptureHeight'] ?> (<?= $SLANG['Pixels'] ?>)</label> <label for=""><?= $SLANG['CaptureHeight'] ?> (<?= $SLANG['Pixels'] ?>)</label>
<input class="form-control" type="number" name="newMonitor[Height]" value="<?= validHtmlStr($newMonitor['Height']) ?>" size="4" onkeyup="updateMonitorDimensions(this);"/> <input class="form-control" type="number" ng-model="monitor.Height" ng-maxlength="4" placeholder="480" />
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" name="preserveAspectRatio" value="1"/> <input type="checkbox" ng-model="monitor.preserveAspectRatio" value="1"/>
<?= $SLANG['PreserveAspect'] ?> <?= $SLANG['PreserveAspect'] ?>
</label> </label>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['Orientation'] ?></label> <label for=""><?= $SLANG['Orientation'] ?></label>
<select class="form-control" name="newMonitor[Orientation]"><?php foreach ( $orientations as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Orientation'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select> <select class="form-control" ng-model="monitor.Orientation" required>
<?php foreach ( $orientations as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Orientation'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?>
</select>
</div> </div>
</div> <!-- End .col-md-6 --> </div> <!-- End .col-md-6 -->
@ -103,6 +107,8 @@
<?php include("tab-monitor-local.php"); ?> <?php include("tab-monitor-local.php"); ?>
<?php include("tab-monitor-curl.php"); ?>
<?php include("tab-monitor-ffmpeg-vlc.php"); ?>
<?php include("tab-monitor-remote.php"); ?> <?php include("tab-monitor-remote.php"); ?>
</div> <!-- End .col-md-4 --> </div> <!-- End .col-md-4 -->

24
web/skins/bootstrap/views/tab-monitor-local.php
View File

@ -1,8 +1,8 @@
<div ng-show="sourceType == 'Local'"> <div ng-show="monitor.sourceType == 'Local'">
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['DevicePath'] ?></label> <label for=""><?= $SLANG['DevicePath'] ?></label>
<input type="text" class="form-control" name="newMonitor[Device]" value="<?= validHtmlStr($newMonitor['Device']) ?>" size="24"/> <input type="text" class="form-control" ng-model="monitor.Device" ng-required="monitor.sourceType == 'Local'"/>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -16,17 +16,17 @@
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['DeviceChannel'] ?></label> <label for=""><?= $SLANG['DeviceChannel'] ?></label>
<select name="newMonitor[Channel]"><?php foreach ( $v4l1DeviceChannels as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Channel'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select> <select ng-model="monitor.Channel"><?php foreach ( $v4l1DeviceChannels as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Channel'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['DeviceFormat'] ?></label> <label for=""><?= $SLANG['DeviceFormat'] ?></label>
<select name="newMonitor[Format]"><?php foreach ( $v4l1DeviceFormats as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Format'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select> <select ng-model="monitor.Format"><?php foreach ( $v4l1DeviceFormats as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Format'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['CapturePalette'] ?></label> <label for=""><?= $SLANG['CapturePalette'] ?></label>
<select name="newMonitor[Palette]"><?php foreach ( $v4l1LocalPalettes as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Palette'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select> <select ng-model="monitor.Palette"><?php foreach ( $v4l1LocalPalettes as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Palette'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
</div> </div>
<?php <?php
} }
@ -36,17 +36,17 @@
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['DeviceChannel'] ?></label> <label for=""><?= $SLANG['DeviceChannel'] ?></label>
<select name="newMonitor[Channel]"><?php foreach ( $v4l2DeviceChannels as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Channel'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select> <select ng-model="monitor.Channel"><?php foreach ( $v4l2DeviceChannels as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Channel'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['DeviceFormat'] ?></label> <label for=""><?= $SLANG['DeviceFormat'] ?></label>
<select name="newMonitor[Format]"><?php foreach ( $v4l2DeviceFormats as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Format'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select> <select ng-model="monitor.Format"><?php foreach ( $v4l2DeviceFormats as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Format'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['CapturePalette'] ?></label> <label for=""><?= $SLANG['CapturePalette'] ?></label>
<select name="newMonitor[Palette]"><?php foreach ( $v4l2LocalPalettes as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Palette'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select> <select ng-model="monitor.Palette"><?php foreach ( $v4l2LocalPalettes as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Palette'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
</div> </div>
<?php <?php
} }
@ -55,15 +55,15 @@
<?= $SLANG['V4LMultiBuffer'] ?> <?= $SLANG['V4LMultiBuffer'] ?>
<label> <label>
<input type="radio" name="newMonitor[V4LMultiBuffer]" id="newMonitor[V4LMultiBuffer]1" value="1" <?php echo ( $newMonitor['V4LMultiBuffer'] == 1 ? 'checked="checked"' : '' ) ?>/> <input type="radio" ng-model="monitor.V4LMultiBuffer" id="newMonitor[V4LMultiBuffer]1" value="1" <?php echo ( $newMonitor['V4LMultiBuffer'] == 1 ? 'checked="checked"' : '' ) ?>/>
Yes Yes
</label> </label>
<label> <label>
<input type="radio" name="newMonitor[V4LMultiBuffer]" id="newMonitor[V4LMultiBuffer]0" value="0" <?php echo ( $newMonitor['V4LMultiBuffer'] == 0 ? 'checked="checked"' : '' ) ?>/> <input type="radio" ng-model="monitor.V4LMultiBuffer" id="newMonitor[V4LMultiBuffer]0" value="0" <?php echo ( $newMonitor['V4LMultiBuffer'] == 0 ? 'checked="checked"' : '' ) ?>/>
No No
</label> </label>
<label> <label>
<input type="radio" name="newMonitor[V4LMultiBuffer]" id="newMonitor[V4LMultiBuffer]" value="" <?php echo ( empty($newMonitor['V4LMultiBuffer']) ? 'checked="checked"' : '' ) ?>/> <input type="radio" ng-model="monitor.V4LMultiBuffer" id="newMonitor[V4LMultiBuffer]" value="" <?php echo ( empty($newMonitor['V4LMultiBuffer']) ? 'checked="checked"' : '' ) ?>/>
Use Config Value Use Config Value
</label> </label>
</div> </div>
@ -71,6 +71,6 @@
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['V4LCapturesPerFrame'] ?></label> <label for=""><?= $SLANG['V4LCapturesPerFrame'] ?></label>
<input type="number" name="newMonitor[V4LCapturesPerFrame]" value="<?php echo $newMonitor['V4LCapturesPerFrame'] ?>"/> <input type="number" ng-model="monitor.V4LCapturesPerFrame" value="<?php echo $newMonitor['V4LCapturesPerFrame'] ?>"/>
</div> </div>
</div> <!-- End local --> </div> <!-- End local -->

38
web/skins/bootstrap/views/tab-monitor-misc.php
View File

@ -1,12 +1,12 @@
<div role="tabpanel" class="form-horizontal tab-pane" id="misc"> <div role="tabpanel" class="tab-pane" id="misc">
<div class="form-group"><label><?= $SLANG['EventPrefix'] ?></label><input type="text" name="newMonitor[EventPrefix]" value="<?= validHtmlStr($newMonitor['EventPrefix']) ?>" size="24"/></div> <div class="form-group"><label><?= $SLANG['EventPrefix'] ?></label><input class="form-control" type="text" ng-model="monitor.EventPrefix" /></div>
<div class="form-group"><label><?= $SLANG['Sectionlength'] ?></label><input type="text" name="newMonitor[SectionLength]" value="<?= validHtmlStr($newMonitor['SectionLength']) ?>" size="6"/></div> <div class="form-group"><label><?= $SLANG['Sectionlength'] ?></label><input class="form-control" type="text" ng-model="monitor.SectionLength" /></div>
<div class="form-group"><label><?= $SLANG['FrameSkip'] ?></label><input type="text" name="newMonitor[FrameSkip]" value="<?= validHtmlStr($newMonitor['FrameSkip']) ?>" size="6"/></div> <div class="form-group"><label><?= $SLANG['FrameSkip'] ?></label><input class="form-control" type="text" ng-model="monitor.FrameSkip" /></div>
<div class="form-group"><label><?= $SLANG['MotionFrameSkip'] ?></label><input type="text" name="newMonitor[MotionFrameSkip]" value="<?= validHtmlStr($newMonitor['MotionFrameSkip']) ?>" size="6"/></div> <div class="form-group"><label><?= $SLANG['MotionFrameSkip'] ?></label><input class="form-control" type="text" ng-model="monitor.MotionFrameSkip" /></div>
<div class="form-group"><label><?= $SLANG['FPSReportInterval'] ?></label><input type="text" name="newMonitor[FPSReportInterval]" value="<?= validHtmlStr($newMonitor['FPSReportInterval']) ?>" size="6"/></div> <div class="form-group"><label><?= $SLANG['FPSReportInterval'] ?></label><input class="form-control" type="text" ng-model="monitor.FPSReportInterval" /></div>
<div class="form-group"><label><?= $SLANG['DefaultView'] ?></label><select name="newMonitor[DefaultView]"> <div class="form-group"><label><?= $SLANG['DefaultView'] ?></label><select class="form-control" ng-model="monitor.DefaultView">
<?php <?php
foreach ( getEnumValues( 'Monitors', 'DefaultView' ) as $opt_view ) foreach ( getEnumValues( 'Monitors', 'DefaultView' ) as $opt_view )
{ {
@ -18,23 +18,19 @@
} }
?> ?>
</select></div> </select></div>
<div class="form-group"><label><?= $SLANG['DefaultRate'] ?></label><?= buildSelect( "newMonitor[DefaultRate]", $rates ); ?></div> <div class="form-group"><label><?= $SLANG['DefaultRate'] ?></label><?= buildSelect( "newMonitor[DefaultRate", $rates ); ?></div>
<div class="form-group"><label><?= $SLANG['DefaultScale'] ?></label><?= buildSelect( "newMonitor[DefaultScale]", $scales ); ?></div> <div class="form-group"><label><?= $SLANG['DefaultScale'] ?></label><?= buildSelect( "newMonitor[DefaultScale", $scales ); ?></div>
<?php <div ng-show="monitor.sourceType == 'Local'" class="form-group"><label><?= $SLANG['SignalCheckColour'] ?></label><input class="form-control" type="text" ng-model="monitor.SignalCheckColour" onchange="$('SignalCheckSwatch').setStyle( 'backgroundColor', this.value )"/><span id="SignalCheckSwatch" class="swatch" style="background-color: <?= $newMonitor['SignalCheckColour'] ?>;">&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
if ( ZM_HAS_V4L && $newMonitor['Type'] == "Local" ) <div class="form-group">
{ <label><?= $SLANG['WebColour'] ?></label>
?> <input class="form-control" type="text" ng-model="monitor.WebColour" style="color: {{ monitor.WebColour}};" required />
<div class="form-group"><label><?= $SLANG['SignalCheckColour'] ?></label><input type="text" name="newMonitor[SignalCheckColour]" value="<?= validHtmlStr($newMonitor['SignalCheckColour']) ?>" size="10" onchange="$('SignalCheckSwatch').setStyle( 'backgroundColor', this.value )"/><span id="SignalCheckSwatch" class="swatch" style="background-color: <?= $newMonitor['SignalCheckColour'] ?>;">&nbsp;&nbsp;&nbsp;&nbsp;</span></div> </div>
<?php
}
?>
<div class="form-group"><label><?= $SLANG['WebColour'] ?></label><input type="text" name="newMonitor[WebColour]" value="<?= validHtmlStr($newMonitor['WebColour']) ?>" size="10" onchange="$('WebSwatch').setStyle( 'backgroundColor', this.value )"/><span id="WebSwatch" class="swatch" style="background-color: <?= validHtmlStr($newMonitor['WebColour']) ?>;">&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
<div class="form-group"> <div class="form-group">
<label><?= $SLANG['LinkedMonitors'] ?></label> <label><?= $SLANG['LinkedMonitors'] ?></label>
<select name="monitorIds" size="4" multiple="multiple" onchange="updateLinkedMonitors( this )"> <select class="form-control" ng-model="monitor.monitorIds" multiple="multiple" onchange="updateLinkedMonitors( this )">
<?php <?php
$monitors = dbFetchAll( "select Id,Name from Monitors order by Sequence asc" ); $monitors = dbFetchAll( "select Id,Name from Monitors order by Sequence asc" );
if ( !empty($newMonitor['LinkedMonitors']) ) if ( !empty($newMonitor['LinkedMonitors']) )
@ -52,7 +48,7 @@
} }
?> ?>
</select> </select>
</div>> </div>
<div class="form-group"><label><?= $SLANG['Triggers'] ?></label> <div class="form-group"><label><?= $SLANG['Triggers'] ?></label>
<?php <?php
$optTriggers = getSetValues( 'Monitors', 'Triggers' ); $optTriggers = getSetValues( 'Monitors', 'Triggers' );
@ -66,7 +62,7 @@
if ( $optCount && ($optCount%$breakCount == 0) ) if ( $optCount && ($optCount%$breakCount == 0) )
echo "</br>"; echo "</br>";
?> ?>
<input type="checkbox" name="newMonitor[Triggers][]" value="<?= $optTrigger ?>"<?php if ( isset($newMonitor['Triggers']) && in_array( $optTrigger, $newMonitor['Triggers'] ) ) { ?> checked="checked"<?php } ?>/>&nbsp;<?= $optTrigger ?> <input class="form-control" type="checkbox" ng-model="monitor.Triggers" value="<?= $optTrigger ?>"<?php if ( isset($newMonitor['Triggers']) && in_array( $optTrigger, $newMonitor['Triggers'] ) ) { ?> checked="checked"<?php } ?>/>&nbsp;<?= $optTrigger ?>
<?php <?php
$optCount ++; $optCount ++;
} }

17
web/skins/bootstrap/views/tab-monitor-remote.php
View File

@ -1,37 +1,34 @@
<div ng-show="sourceType == 'Remote'"> <div ng-show="monitor.sourceType == 'Remote'">
<div class="form-group"> <div class="form-group">
<label for="newMonitor[Protocol]"><?= $SLANG['RemoteProtocol'] ?></label> <label for="newMonitor[Protocol]"><?= $SLANG['RemoteProtocol'] ?></label>
<select ng-model="Protocol" id="newMonitor[Protocol]" onchange="updateMethods( this )"> <select class="form-control" ng-model="monitor.Protocol" id="newMonitor[Protocol]" ng-required="monitor.sourceType == 'Remote'">
<option value="http">HTTP</option> <option value="http">HTTP</option>
<option value="rtsp">RTSP</option> <option value="rtsp">RTSP</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="newMonitor[Method]"><?= $SLANG['RemoteMethod'] ?></label> <label for="newMonitor[Method]"><?= $SLANG['RemoteMethod'] ?></label>
<?php if ( empty($newMonitor['Protocol']) || $newMonitor['Protocol'] == "http" ) { ?> <select class="form-control" ng-model="monitor.Method" id="newMonitor[Method]" ng-required="monitor.sourceType == 'Remote'" ng-show="monitor.Protocol == 'http'">
<select ng-model="Method" id="newMonitor[Method]">
<option value="simple">Simple</option> <option value="simple">Simple</option>
<option value="regexp">Regexp</option> <option value="regexp">Regexp</option>
</select> </select>
<?php } else { ?> <select class="form-control" ng-model="monitor.Method" id="newMonitor[Method]" ng-required="monitor.sourceType == 'Remote'" ng-show="monitor.Protocol == 'rtsp'">
<select ng-model="Method" id="newMonitor[Method]">
<option value="rtpUni">RTP/Unicast</option> <option value="rtpUni">RTP/Unicast</option>
<option value="rtpMulti">RTP/Multicast</option> <option value="rtpMulti">RTP/Multicast</option>
<option value="rtpRtsp">RTP/RTSP</option> <option value="rtpRtsp">RTP/RTSP</option>
<option value="rtpRtspHttp">RTP/RTSP/HTTP</option> <option value="rtpRtspHttp">RTP/RTSP/HTTP</option>
</select> </select>
<?php } ?>
</div> </div>
<div class="form-group"> <div class="form-group">
<label><?= $SLANG['RemoteHostName'] ?></label> <label><?= $SLANG['RemoteHostName'] ?></label>
<input type="text" class="form-control" ng-model="Host" placeholder="HostName or ip.add.re.ss" /> <input type="text" class="form-control" ng-model="monitor.Host" placeholder="HostName or ip.add.re.ss" ng-required="monitor.sourceType == 'Remote'" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for=""><?= $SLANG['RemoteHostPort'] ?></label> <label for=""><?= $SLANG['RemoteHostPort'] ?></label>
<input type="number" class="form-control" ng-model="Port" placeholder="Usually 80 for http, 554 for rtsp" /> <input type="number" class="form-control" ng-model="monitor.Port" placeholder="Usually 80 for http, 554 for rtsp" ng-required="monitor.sourceType == 'Remote'" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label><?= $SLANG['RemoteHostPath'] ?></label> <label><?= $SLANG['RemoteHostPath'] ?></label>
<input type="text" class="form-control" ng-model="Path" placeholder="/path/to/stream.mpg" /> <input type="text" class="form-control" ng-model="monitor.Path" placeholder="/path/to/stream.mpg" ng-required="monitor.sourceType == 'Remote'" />
</div> </div>
</div> <!-- End Remote --> </div> <!-- End Remote -->

6
web/skins/bootstrap/views/tab-monitor-timestamp.php
View File

@ -1,14 +1,14 @@
<div role="tabpanel" class="tab-pane" id="timestamp"> <div role="tabpanel" class="tab-pane" id="timestamp">
<div class="form-group"> <div class="form-group">
<label for="labelFormat"><?= $SLANG['TimestampLabelFormat'] ?></label> <label for="labelFormat"><?= $SLANG['TimestampLabelFormat'] ?></label>
<input type="text" id="labelFormat" class="form-control" name="newMonitor[LabelFormat]" value="%N - %d/%m/%y %H:%M:%S" /> <input type="text" id="labelFormat" class="form-control" ng-model="monitor.LabelFormat" required />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="labelX"><?= $SLANG['TimestampLabelX'] ?></label> <label for="labelX"><?= $SLANG['TimestampLabelX'] ?></label>
<input type="text" id="labelX" class="form-control" name="newMonitor[LabelX]" value="0" /> <input type="number" id="labelX" class="form-control" ng-model="monitor.LabelX" required />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="labelY"><?= $SLANG['TimestampLabelY'] ?></label> <label for="labelY"><?= $SLANG['TimestampLabelY'] ?></label>
<input type="text" id="labelY" class="form-control" name="newMonitor[LabelY]" value="0" /> <input type="number" id="labelY" class="form-control" ng-model="monitor.LabelY" required />
</div> </div>
</div> </div>