From d76e9e5f5d81ef34ad41ea171a19ee32027cf3bd Mon Sep 17 00:00:00 2001
From: Kyle Johnson <kjohnson@gnulnx.net>
Date: Sat, 13 Dec 2014 23:15:31 -0500
Subject: [PATCH] Initial work on cleaning up monitor view.

Starting by splitting each 'tab' out into their own php
file, and then including it.  Easier to manage.  Following up by
removing tables and replacing with a responsive form layout.
Also working on removing PHP dependencies and using the UI instead.
---
 web/skins/bootstrap/views/monitor.php         | 479 +-----------------
 .../bootstrap/views/tab-monitor-buffers.php   |  26 +
 .../bootstrap/views/tab-monitor-control.php   |  21 +
 .../bootstrap/views/tab-monitor-general.php   |  65 +++
 .../bootstrap/views/tab-monitor-misc.php      |  84 +++
 .../bootstrap/views/tab-monitor-source.php    | 101 ++++
 .../bootstrap/views/tab-monitor-timestamp.php |  14 +
 web/skins/bootstrap/views/tab-monitor-x10.php |   8 +
 8 files changed, 340 insertions(+), 458 deletions(-)
 create mode 100644 web/skins/bootstrap/views/tab-monitor-buffers.php
 create mode 100644 web/skins/bootstrap/views/tab-monitor-control.php
 create mode 100644 web/skins/bootstrap/views/tab-monitor-general.php
 create mode 100644 web/skins/bootstrap/views/tab-monitor-misc.php
 create mode 100644 web/skins/bootstrap/views/tab-monitor-source.php
 create mode 100644 web/skins/bootstrap/views/tab-monitor-timestamp.php
 create mode 100644 web/skins/bootstrap/views/tab-monitor-x10.php

diff --git a/web/skins/bootstrap/views/monitor.php b/web/skins/bootstrap/views/monitor.php
index 8a35d3b7b..cb63c8966 100644
--- a/web/skins/bootstrap/views/monitor.php
+++ b/web/skins/bootstrap/views/monitor.php
@@ -421,468 +421,31 @@ xhtmlHeaders(__FILE__, $SLANG['Monitor']." - ".validHtmlStr($monitor['Name']) );
 
 	<?php include("header.php"); ?>
 
-  <div class="container-fluid">
-    <div id="header">
-<?php
-if ( canEdit( 'Monitors' ) )
-{
-?>
       <div id="headerButtons">
         <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>
       </div>
-<?php
-}
-?>
       <h2><?= $SLANG['Monitor'] ?> - <?= validHtmlStr($monitor['Name']) ?><?php if ( !empty($monitor['Id']) ) { ?> (<?= $monitor['Id'] ?>)<?php } ?></h2>
-    </div>
-    <div id="content">
-      <ul class="tabList">
-<?php
-foreach ( $tabs as $name=>$value )
-{
-    if ( $tab == $name )
-    {
-?>
-        <li class="active"><?= $value ?></li>
-<?php
-    }
-    else
-    {
-?>
-        <li><a href="#" onclick="submitTab( '<?= $name ?>' ); return( false );"><?= $value ?></a></li>
-<?php
-    }
-}
-?>
-      </ul>
-      <div class="clear"></div>
-      <form name="contentForm" id="contentForm" method="post" action="<?= $_SERVER['PHP_SELF'] ?>" onsubmit="return validateForm( this )">
-        <input type="hidden" name="view" value="<?= $view ?>"/>
-        <input type="hidden" name="tab" value="<?= $tab ?>"/>
-        <input type="hidden" name="action" value="monitor"/>
-        <input type="hidden" name="mid" value="<?= $monitor['Id'] ?>"/>
-        <input type="hidden" name="newMonitor[LinkedMonitors]" value="<?= isset($newMonitor['LinkedMonitors'])?$newMonitor['LinkedMonitors']:'' ?>"/>
-        <input type="hidden" name="origMethod" value="<?= isset($newMonitor['Method'])?$newMonitor['Method']:'' ?>"/>
-<?php
-if ( $tab != 'general' )
-{
-?>
-        <input type="hidden" name="newMonitor[Name]" value="<?= validHtmlStr($newMonitor['Name']) ?>"/>
-        <input type="hidden" name="newMonitor[Type]" value="<?= validHtmlStr($newMonitor['Type']) ?>"/>
-        <input type="hidden" name="newMonitor[Function]" value="<?= validHtmlStr($newMonitor['Function']) ?>"/>
-        <input type="hidden" name="newMonitor[Enabled]" value="<?= validHtmlStr($newMonitor['Enabled']) ?>"/>
-        <input type="hidden" name="newMonitor[RefBlendPerc]" value="<?= validHtmlStr($newMonitor['RefBlendPerc']) ?>"/>
-        <input type="hidden" name="newMonitor[AlarmRefBlendPerc]" value="<?= validHtmlStr($newMonitor['AlarmRefBlendPerc']) ?>"/>
-        <input type="hidden" name="newMonitor[MaxFPS]" value="<?= validHtmlStr($newMonitor['MaxFPS']) ?>"/>
-        <input type="hidden" name="newMonitor[AlarmMaxFPS]" value="<?= validHtmlStr($newMonitor['AlarmMaxFPS']) ?>"/>
-<?php
-    if ( isset($newMonitor['Triggers']) )
-    {
-        foreach( $newMonitor['Triggers'] as $newTrigger )
-        {
-?>
-        <input type="hidden" name="newMonitor[Triggers][]" value="<?= validHtmlStr($newTrigger) ?>"/>
-<?php
-        }
-    }
-}
-if ( ZM_HAS_V4L && ($tab != 'source' || $newMonitor['Type'] != 'Local') )
-{
-?>
-    <input type="hidden" name="newMonitor[Device]" value="<?= validHtmlStr($newMonitor['Device']) ?>"/>
-    <input type="hidden" name="newMonitor[Channel]" value="<?= validHtmlStr($newMonitor['Channel']) ?>"/>
-    <input type="hidden" name="newMonitor[Format]" value="<?= validHtmlStr($newMonitor['Format']) ?>"/>
-    <input type="hidden" name="newMonitor[Palette]" value="<?= validHtmlStr($newMonitor['Palette']) ?>"/>
-    <input type="hidden" name="newMonitor[V4LMultiBuffer]" value="<?= validHtmlStr($newMonitor['V4LMultiBuffer']) ?>"/>
-    <input type="hidden" name="newMonitor[V4LCapturesPerFrame]" value="<?= validHtmlStr($newMonitor['V4LCapturesPerFrame']) ?>"/>
-<?php
-}
-if ( $tab != 'source' || $newMonitor['Type'] != 'Remote' )
-{
-?>
-    <input type="hidden" name="newMonitor[Protocol]" value="<?= validHtmlStr($newMonitor['Protocol']) ?>"/>
-    <input type="hidden" name="newMonitor[Host]" value="<?= validHtmlStr($newMonitor['Host']) ?>"/>
-    <input type="hidden" name="newMonitor[Port]" value="<?= validHtmlStr($newMonitor['Port']) ?>"/>
-<?php
-}
-if ( $tab != 'source' || ($newMonitor['Type'] != 'Local' && $newMonitor['Type'] != 'Remote' && $newMonitor['Type'] != 'Ffmpeg' && $newMonitor['Type'] != 'Libvlc') )
-{
-?>
-    <input type="hidden" name="newMonitor[Method]" value="<?= validHtmlStr($newMonitor['Method']) ?>"/>
-<?php
-}
-if ( $tab != 'source' || ($newMonitor['Type'] != 'Ffmpeg' && $newMonitor['Type'] != 'Libvlc' ))
-{
-?>
-    <input type="hidden" name="newMonitor[Options]" value="<?= validHtmlStr($newMonitor['Options']) ?>"/>
-<?php
-}
-if ( $tab != 'source' || ($newMonitor['Type'] != 'Remote' && $newMonitor['Type'] != 'File' && $newMonitor['Type'] != 'Ffmpeg' && $newMonitor['Type'] != 'Libvlc' && $newMonitor['Type'] != 'cURL') )
-{
-?>
-    <input type="hidden" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>"/>
-    <input type="hidden" name="newMonitor[User]" value="<?= validHtmlStr($newMonitor['User']) ?>"/>
-    <input type="hidden" name="newMonitor[Pass]" value="<?= validHtmlStr($newMonitor['Pass']) ?>"/>
-<?php
-}
-if ( $tab != 'source' )
-{
-?>
-    <input type="hidden" name="newMonitor[Colours]" value="<?= validHtmlStr($newMonitor['Colours']) ?>"/>
-    <input type="hidden" name="newMonitor[Width]" value="<?= validHtmlStr($newMonitor['Width']) ?>"/>
-    <input type="hidden" name="newMonitor[Height]" value="<?= validHtmlStr($newMonitor['Height']) ?>"/>
-    <input type="hidden" name="newMonitor[Orientation]" value="<?= validHtmlStr($newMonitor['Orientation']) ?>"/>
-    <input type="hidden" name="newMonitor[Deinterlacing]" value="<?= validHtmlStr($newMonitor['Deinterlacing']) ?>"/>
-<?php
-}
-if ( $tab != 'timestamp' )
-{
-?>
-    <input type="hidden" name="newMonitor[LabelFormat]" value="<?= validHtmlStr($newMonitor['LabelFormat']) ?>"/>
-    <input type="hidden" name="newMonitor[LabelX]" value="<?= validHtmlStr($newMonitor['LabelX']) ?>"/>
-    <input type="hidden" name="newMonitor[LabelY]" value="<?= validHtmlStr($newMonitor['LabelY']) ?>"/>
-<?php
-}
-if ( $tab != 'buffers' )
-{
-?>
-    <input type="hidden" name="newMonitor[ImageBufferCount]" value="<?= validHtmlStr($newMonitor['ImageBufferCount']) ?>"/>
-    <input type="hidden" name="newMonitor[WarmupCount]" value="<?= validHtmlStr($newMonitor['WarmupCount']) ?>"/>
-    <input type="hidden" name="newMonitor[PreEventCount]" value="<?= validHtmlStr($newMonitor['PreEventCount']) ?>"/>
-    <input type="hidden" name="newMonitor[PostEventCount]" value="<?= validHtmlStr($newMonitor['PostEventCount']) ?>"/>
-    <input type="hidden" name="newMonitor[StreamReplayBuffer]" value="<?= validHtmlStr($newMonitor['StreamReplayBuffer']) ?>"/>
-    <input type="hidden" name="newMonitor[AlarmFrameCount]" value="<?= validHtmlStr($newMonitor['AlarmFrameCount']) ?>"/>
-<?php
-}
-if ( ZM_OPT_CONTROL && $tab != 'control' )
-{
-?>
-    <input type="hidden" name="newMonitor[Controllable]" value="<?= validHtmlStr($newMonitor['Controllable']) ?>"/>
-    <input type="hidden" name="newMonitor[ControlId]" value="<?= validHtmlStr($newMonitor['ControlId']) ?>"/>
-    <input type="hidden" name="newMonitor[ControlDevice]" value="<?= validHtmlStr($newMonitor['ControlDevice']) ?>"/>
-    <input type="hidden" name="newMonitor[ControlAddress]" value="<?= validHtmlStr($newMonitor['ControlAddress']) ?>"/>
-    <input type="hidden" name="newMonitor[AutoStopTimeout]" value="<?= validHtmlStr($newMonitor['AutoStopTimeout']) ?>"/>
-    <input type="hidden" name="newMonitor[TrackMotion]" value="<?= validHtmlStr($newMonitor['TrackMotion']) ?>"/>
-    <input type="hidden" name="newMonitor[TrackDelay]" value="<?= validHtmlStr($newMonitor['TrackDelay']) ?>"/>
-    <input type="hidden" name="newMonitor[ReturnLocation]" value="<?= validHtmlStr($newMonitor['ReturnLocation']) ?>"/>
-    <input type="hidden" name="newMonitor[ReturnDelay]" value="<?= validHtmlStr($newMonitor['ReturnDelay']) ?>"/>
-<?php
-}
-if ( ZM_OPT_X10 && $tab != 'x10' )
-{
-?>
-    <input type="hidden" name="newX10Monitor[Activation]" value="<?= validHtmlStr($newX10Monitor['Activation']) ?>"/>
-    <input type="hidden" name="newX10Monitor[AlarmInput]" value="<?= validHtmlStr($newX10Monitor['AlarmInput']) ?>"/>
-    <input type="hidden" name="newX10Monitor[AlarmOutput]" value="<?= validHtmlStr($newX10Monitor['AlarmOutput']) ?>"/>
-<?php
-}
-if ( $tab != 'misc' )
-{
-?>
-    <input type="hidden" name="newMonitor[EventPrefix]" value="<?= validHtmlStr($newMonitor['EventPrefix']) ?>"/>
-    <input type="hidden" name="newMonitor[SectionLength]" value="<?= validHtmlStr($newMonitor['SectionLength']) ?>"/>
-    <input type="hidden" name="newMonitor[FrameSkip]" value="<?= validHtmlStr($newMonitor['FrameSkip']) ?>"/>
-    <input type="hidden" name="newMonitor[MotionFrameSkip]" value="<?= validHtmlStr($newMonitor['MotionFrameSkip']) ?>"/>
-    <input type="hidden" name="newMonitor[FPSReportInterval]" value="<?= validHtmlStr($newMonitor['FPSReportInterval']) ?>"/>
-    <input type="hidden" name="newMonitor[DefaultView]" value="<?= validHtmlStr($newMonitor['DefaultView']) ?>"/>
-    <input type="hidden" name="newMonitor[DefaultRate]" value="<?= validHtmlStr($newMonitor['DefaultRate']) ?>"/>
-    <input type="hidden" name="newMonitor[DefaultScale]" value="<?= validHtmlStr($newMonitor['DefaultScale']) ?>"/>
-    <input type="hidden" name="newMonitor[WebColour]" value="<?= validHtmlStr($newMonitor['WebColour']) ?>"/>
-<?php
-}
-if ( ZM_HAS_V4L && ($tab != 'misc' || $newMonitor['Type'] != 'Local') )
-{
-?>
-    <input type="hidden" name="newMonitor[SignalCheckColour]" value="<?= validHtmlStr($newMonitor['SignalCheckColour']) ?>"/>
-<?php
-}
-?>
-        <table id="contentTable" class="major" cellspacing="0">
-          <tbody>
-<?php
-switch ( $tab )
-{
-    case 'general' :
-    {
-?>
-            <tr><td><?= $SLANG['Name'] ?></td><td><input type="text" name="newMonitor[Name]" value="<?= validHtmlStr($newMonitor['Name']) ?>" size="16"/></td></tr>
-            <tr><td><?= $SLANG['SourceType'] ?></td><td><?= buildSelect( "newMonitor[Type]", $sourceTypes ); ?></td></tr>
-            <tr><td><?= $SLANG['Function'] ?></td><td><select name="newMonitor[Function]">
-<?php
-        foreach ( getEnumValues( 'Monitors', 'Function' ) as $optFunction )
-        {
-?>
-              <option value="<?= $optFunction ?>"<?php if ( $optFunction == $newMonitor['Function'] ) { ?> selected="selected"<?php } ?>><?= $optFunction ?></option>
-<?php
-        }
-?>
-            </select></td></tr>
-            <tr><td><?= $SLANG['Enabled'] ?></td><td><input type="checkbox" name="newMonitor[Enabled]" value="1"<?php if ( !empty($newMonitor['Enabled']) ) { ?> checked="checked"<?php } ?>/></td></tr>
-            <tr>
-              <td><?= $SLANG['LinkedMonitors'] ?></td>
-              <td>
-                <select name="monitorIds" size="4" multiple="multiple" onchange="updateLinkedMonitors( this )">
-<?php
-    $monitors = dbFetchAll( "select Id,Name from Monitors order by Sequence asc" );
-    if ( !empty($newMonitor['LinkedMonitors']) )
-        $monitorIds = array_flip( explode( ',', $newMonitor['LinkedMonitors'] ) );
-    else
-        $monitorIds = array();
-    foreach ( $monitors as $monitor )
-    {
-        if ( (empty($newMonitor['Id']) || ($monitor['Id'] != $newMonitor['Id'])) && visibleMonitor( $monitor['Id'] ) )
-        {
-?>
-                  <option value="<?= $monitor['Id'] ?>"<?php if ( array_key_exists( $monitor['Id'], $monitorIds ) ) { ?> selected="selected"<?php } ?>><?= validHtmlStr($monitor['Name']) ?></option>
-<?php
-        }
-    }
-?>
-                </select>
-              </td>
-            </tr>
-            <tr><td><?= $SLANG['MaximumFPS'] ?></td><td><input type="text" name="newMonitor[MaxFPS]" value="<?= validHtmlStr($newMonitor['MaxFPS']) ?>" size="6"/></td></tr>
-            <tr><td><?= $SLANG['AlarmMaximumFPS'] ?></td><td><input type="text" name="newMonitor[AlarmMaxFPS]" value="<?= validHtmlStr($newMonitor['AlarmMaxFPS']) ?>" size="6"/></td></tr>
-<?php
-	if ( ZM_FAST_IMAGE_BLENDS )
-        {
-?>
-            <tr><td><?= $SLANG['RefImageBlendPct'] ?></td><td><select name="newMonitor[RefBlendPerc]"><?php foreach ( $fastblendopts as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['RefBlendPerc'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></td></tr>
-            <tr><td><?= "Alarm " . $SLANG['RefImageBlendPct'] ?></td><td><select name="newMonitor[AlarmRefBlendPerc]"><?php foreach ( $fastblendopts_alarm as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['AlarmRefBlendPerc'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></td></tr>
-<?php
-	} else {
-?>
-            <tr><td><?= $SLANG['RefImageBlendPct'] ?></td><td><input type="text" name="newMonitor[RefBlendPerc]" value="<?= validHtmlStr($newMonitor['RefBlendPerc']) ?>" size="4"/></td></tr>
-            <tr><td><?= "Alarm " . $SLANG['RefImageBlendPct'] ?></td><td><input type="text" name="newMonitor[AlarmRefBlendPerc]" value="<?= validHtmlStr($newMonitor['AlarmRefBlendPerc']) ?>" size="4"/></td></tr>
-<?php
-        }
-?>
-            <tr><td><?= $SLANG['Triggers'] ?></td><td>
-<?php
-        $optTriggers = getSetValues( 'Monitors', 'Triggers' );
-        $breakCount = (int)(ceil(count($optTriggers)));
-        $breakCount = min( 3, $breakCount );
-        $optCount = 0;
-        foreach( $optTriggers as $optTrigger )
-        {
-            if ( !ZM_OPT_X10 && $optTrigger == 'X10' )
-                continue;
-            if ( $optCount && ($optCount%$breakCount == 0) )
-                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 ?>
-<?php
-            $optCount ++;
-        }
-        if ( !$optCount )
-        {
-?>
-              <em><?= $SLANG['NoneAvailable'] ?></em>
-<?php
-        }
-?>
-            </td></tr>
-<?php
-        break;
-    }
-    case 'source' :
-    {
-        if ( ZM_HAS_V4L && $newMonitor['Type'] == "Local" )
-        {
-?>
-            <tr><td><?= $SLANG['DevicePath'] ?></td><td><input type="text" name="newMonitor[Device]" value="<?= validHtmlStr($newMonitor['Device']) ?>" size="24"/></td></tr>
-            <tr><td><?= $SLANG['CaptureMethod'] ?></td><td><?= buildSelect( "newMonitor[Method]", $localMethods, "submitTab( '$tab' )" ); ?></td></tr>
-<?php
-            if ( ZM_HAS_V4L1 && $newMonitor['Method'] == 'v4l1' )
-            {
-?>
-            <tr><td><?= $SLANG['DeviceChannel'] ?></td><td><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></td></tr>
-            <tr><td><?= $SLANG['DeviceFormat'] ?></td><td><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></td></tr>
-            <tr><td><?= $SLANG['CapturePalette'] ?></td><td><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></td></tr>
-<?php
-            }
-            else
-            {
-?>
-            <tr><td><?= $SLANG['DeviceChannel'] ?></td><td><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></td></tr>
-            <tr><td><?= $SLANG['DeviceFormat'] ?></td><td><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></td></tr>
-            <tr><td><?= $SLANG['CapturePalette'] ?></td><td><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></td></tr>
-<?php
-            }
-?>
-			<tr><td><?= $SLANG['V4LMultiBuffer'] ?></td><td>
-				<input type="radio" name="newMonitor[V4LMultiBuffer]" id="newMonitor[V4LMultiBuffer]1" value="1" <?php echo ( $newMonitor['V4LMultiBuffer'] == 1 ? 'checked="checked"' : '' ) ?>/>
-				<label for="newMonitor[V4LMultiBuffer]1">Yes</label>
-				<input type="radio" name="newMonitor[V4LMultiBuffer]" id="newMonitor[V4LMultiBuffer]0" value="0" <?php echo ( $newMonitor['V4LMultiBuffer'] == 0 ? 'checked="checked"' : '' ) ?>/>
-				<label for="newMonitor[V4LMultiBuffer]0">No</label>
-				<input type="radio" name="newMonitor[V4LMultiBuffer]" id="newMonitor[V4LMultiBuffer]" value="" <?php echo ( empty($newMonitor['V4LMultiBuffer']) ? 'checked="checked"' : '' ) ?>/>
-				<label for="newMonitor[V4LMultiBuffer]">Use Config Value</label>
-			</td></tr>
-			<tr><td><?= $SLANG['V4LCapturesPerFrame'] ?></td><td><input type="number" name="newMonitor[V4LCapturesPerFrame]" value="<?php echo $newMonitor['V4LCapturesPerFrame'] ?>"/></td></tr>
-<?php
-        }
-        elseif ( $newMonitor['Type'] == "Remote" )
-        {
-?>
-            <tr><td><?= $SLANG['RemoteProtocol'] ?></td><td><?= buildSelect( "newMonitor[Protocol]", $remoteProtocols, "updateMethods( this )" ); ?></td></tr>
-<?php
-            if ( empty($newMonitor['Protocol']) || $newMonitor['Protocol'] == "http" )
-            {
-?>
-            <tr><td><?= $SLANG['RemoteMethod'] ?></td><td><?= buildSelect( "newMonitor[Method]", $httpMethods ); ?></td></tr>
-<?php
-            }
-            else
-            {
-?>
-            <tr><td><?= $SLANG['RemoteMethod'] ?></td><td><?= buildSelect( "newMonitor[Method]", $rtspMethods ); ?></td></tr>
-<?php
-            }
-?>
-            <tr><td><?= $SLANG['RemoteHostName'] ?></td><td><input type="text" name="newMonitor[Host]" value="<?= validHtmlStr($newMonitor['Host']) ?>" size="36"/></td></tr>
-            <tr><td><?= $SLANG['RemoteHostPort'] ?></td><td><input type="text" name="newMonitor[Port]" value="<?= validHtmlStr($newMonitor['Port']) ?>" size="6"/></td></tr>
-            <tr><td><?= $SLANG['RemoteHostPath'] ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr>
-<?php
-        }
-        elseif ( $newMonitor['Type'] == "File" )
-        {
-?>
-            <tr><td><?= $SLANG['SourcePath'] ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr>
-<?php
-        }
-        elseif ( $newMonitor['Type'] == "cURL" )
-        {
-?>
-            <tr><td><?= "URL" ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr>
-            <tr><td><?= "Username" ?></td><td><input type="text" name="newMonitor[User]" value="<?= validHtmlStr($newMonitor['User']) ?>" size="12"/></td></tr>
-            <tr><td><?= "Password" ?></td><td><input type="text" name="newMonitor[Pass]" value="<?= validHtmlStr($newMonitor['Pass']) ?>" size="12"/></td></tr>
-<?php
-        }
-        elseif ( $newMonitor['Type'] == "Ffmpeg" || $newMonitor['Type'] == "Libvlc")
-        {
-?>
-			<tr><td><?= $SLANG['SourcePath'] ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr>
-            <tr><td><?= $SLANG['RemoteMethod'] ?></td><td><?= buildSelect( "newMonitor[Method]", $rtspMethods ); ?></td></tr>
-			<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>
-<?php
-        }
-?>
-            <tr><td><?= "Target Colorspace" ?></td><td><select name="newMonitor[Colours]"><?php foreach ( $Colours as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Colours'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></td></tr>
-            <tr><td><?= $SLANG['CaptureWidth'] ?> (<?= $SLANG['Pixels'] ?>)</td><td><input type="text" name="newMonitor[Width]" value="<?= validHtmlStr($newMonitor['Width']) ?>" size="4" onkeyup="updateMonitorDimensions(this);"/></td></tr>
-            <tr><td><?= $SLANG['CaptureHeight'] ?> (<?= $SLANG['Pixels'] ?>)</td><td><input type="text" name="newMonitor[Height]" value="<?= validHtmlStr($newMonitor['Height']) ?>" size="4" onkeyup="updateMonitorDimensions(this);"/></td></tr>
-            <tr><td><?= $SLANG['PreserveAspect'] ?></td><td><input type="checkbox" name="preserveAspectRatio" value="1"/></td></tr> 
-            <tr><td><?= $SLANG['Orientation'] ?></td><td><select name="newMonitor[Orientation]"><?php foreach ( $orientations as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Orientation'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></td></tr>
-<?php
-        if ( $newMonitor['Type'] == "Local" )
-        {
-?>
-            <tr><td><?= "Deinterlacing" ?></td><td><select name="newMonitor[Deinterlacing]"><?php foreach ( $deinterlaceopts_v4l2 as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Deinterlacing'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></td></tr>
-<?php
-        } else {
-?>
-            <tr><td><?= "Deinterlacing" ?></td><td><select name="newMonitor[Deinterlacing]"><?php foreach ( $deinterlaceopts as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Deinterlacing'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></td></tr>
-<?php
-        }
-?>
-<?php
-        break;
-    }
-    case 'timestamp' :
-    {
-?>
-            <tr><td><?= $SLANG['TimestampLabelFormat'] ?></td><td><input type="text" name="newMonitor[LabelFormat]" value="<?= validHtmlStr($newMonitor['LabelFormat']) ?>" size="32"/></td></tr>
-            <tr><td><?= $SLANG['TimestampLabelX'] ?></td><td><input type="text" name="newMonitor[LabelX]" value="<?= validHtmlStr($newMonitor['LabelX']) ?>" size="4"/></td></tr>
-            <tr><td><?= $SLANG['TimestampLabelY'] ?></td><td><input type="text" name="newMonitor[LabelY]" value="<?= validHtmlStr($newMonitor['LabelY']) ?>" size="4"/></td></tr>
-<?php
-        break;
-    }
-    case 'buffers' :
-    {
-?>
-            <tr><td><?= $SLANG['ImageBufferSize'] ?></td><td><input type="text" name="newMonitor[ImageBufferCount]" value="<?= validHtmlStr($newMonitor['ImageBufferCount']) ?>" size="6"/></td></tr>
-            <tr><td><?= $SLANG['WarmupFrames'] ?></td><td><input type="text" name="newMonitor[WarmupCount]" value="<?= validHtmlStr($newMonitor['WarmupCount']) ?>" size="4"/></td></tr>
-            <tr><td><?= $SLANG['PreEventImageBuffer'] ?></td><td><input type="text" name="newMonitor[PreEventCount]" value="<?= validHtmlStr($newMonitor['PreEventCount']) ?>" size="4"/></td></tr>
-            <tr><td><?= $SLANG['PostEventImageBuffer'] ?></td><td><input type="text" name="newMonitor[PostEventCount]" value="<?= validHtmlStr($newMonitor['PostEventCount']) ?>" size="4"/></td></tr>
-            <tr><td><?= $SLANG['StreamReplayBuffer'] ?></td><td><input type="text" name="newMonitor[StreamReplayBuffer]" value="<?= validHtmlStr($newMonitor['StreamReplayBuffer']) ?>" size="6"/></td></tr>
-<tr><td><?= $SLANG['AlarmFrameCount'] ?></td><td><input type="text" name="newMonitor[AlarmFrameCount]" value="<?= validHtmlStr($newMonitor['AlarmFrameCount']) ?>" size="4"/></td></tr>
-<?php
-        break;
-    }
-    case 'control' :
-    {
-?>
-            <tr><td><?= $SLANG['Controllable'] ?></td><td><input type="checkbox" name="newMonitor[Controllable]" value="1"<?php if ( !empty($newMonitor['Controllable']) ) { ?> checked="checked"<?php } ?>/></td></tr>
-            <tr><td><?= $SLANG['ControlType'] ?></td><td><?= buildSelect( "newMonitor[ControlId]", $controlTypes, 'loadLocations( this )' ); ?><?php if ( canEdit( 'Control' ) ) { ?>&nbsp;<a href="#" onclick="createPopup( '?view=controlcaps', 'zmControlCaps', 'controlcaps' );"><?= $SLANG['Edit'] ?></a><?php } ?></td></tr>
-            <tr><td><?= $SLANG['ControlDevice'] ?></td><td><input type="text" name="newMonitor[ControlDevice]" value="<?= validHtmlStr($newMonitor['ControlDevice']) ?>" size="32"/></td></tr>
-            <tr><td><?= $SLANG['ControlAddress'] ?></td><td><input type="text" name="newMonitor[ControlAddress]" value="<?= validHtmlStr($newMonitor['ControlAddress']) ?>" size="32"/></td></tr>
-            <tr><td><?= $SLANG['AutoStopTimeout'] ?></td><td><input type="text" name="newMonitor[AutoStopTimeout]" value="<?= validHtmlStr($newMonitor['AutoStopTimeout']) ?>" size="4"/></td></tr>
-            <tr><td><?= $SLANG['TrackMotion'] ?></td><td><input type="checkbox" name="newMonitor[TrackMotion]" value="1"<?php if ( !empty($newMonitor['TrackMotion']) ) { ?> checked="checked"<?php } ?>/></td></tr>
-<?php
-        $return_options = array(
-            '-1' => $SLANG['None'],
-            '0' => $SLANG['Home'],
-            '1' => $SLANG['Preset']." 1",
-        );
-?>
-            <tr><td><?= $SLANG['TrackDelay'] ?></td><td><input type="text" name="newMonitor[TrackDelay]" value="<?= validHtmlStr($newMonitor['TrackDelay']) ?>" size="4"/></td></tr>
-            <tr><td><?= $SLANG['ReturnLocation'] ?></td><td><?= buildSelect( "newMonitor[ReturnLocation]", $return_options ); ?></td></tr>
-            <tr><td><?= $SLANG['ReturnDelay'] ?></td><td><input type="text" name="newMonitor[ReturnDelay]" value="<?= validHtmlStr($newMonitor['ReturnDelay']) ?>" size="4"/></td></tr>
-<?php
-        break;
-    }
-    case 'x10' :
-    {
-?>
-            <tr><td><?= $SLANG['X10ActivationString'] ?></td><td><input type="text" name="newX10Monitor[Activation]" value="<?= validHtmlStr($newX10Monitor['Activation']) ?>" size="20"/></td></tr>
-            <tr><td><?= $SLANG['X10InputAlarmString'] ?></td><td><input type="text" name="newX10Monitor[AlarmInput]" value="<?= validHtmlStr($newX10Monitor['AlarmInput']) ?>" size="20"/></td></tr>
-            <tr><td><?= $SLANG['X10OutputAlarmString'] ?></td><td><input type="text" name="newX10Monitor[AlarmOutput]" value="<?= validHtmlStr($newX10Monitor['AlarmOutput']) ?>" size="20"/></td></tr>
-<?php
-        break;
-    }
-    case 'misc' :
-    {
-?>
-            <tr><td><?= $SLANG['EventPrefix'] ?></td><td><input type="text" name="newMonitor[EventPrefix]" value="<?= validHtmlStr($newMonitor['EventPrefix']) ?>" size="24"/></td></tr>
-            <tr><td><?= $SLANG['Sectionlength'] ?></td><td><input type="text" name="newMonitor[SectionLength]" value="<?= validHtmlStr($newMonitor['SectionLength']) ?>" size="6"/></td></tr>
-            <tr><td><?= $SLANG['FrameSkip'] ?></td><td><input type="text" name="newMonitor[FrameSkip]" value="<?= validHtmlStr($newMonitor['FrameSkip']) ?>" size="6"/></td></tr>
-            <tr><td><?= $SLANG['MotionFrameSkip'] ?></td><td><input type="text" name="newMonitor[MotionFrameSkip]" value="<?= validHtmlStr($newMonitor['MotionFrameSkip']) ?>" size="6"/></td></tr>
-            <tr><td><?= $SLANG['FPSReportInterval'] ?></td><td><input type="text" name="newMonitor[FPSReportInterval]" value="<?= validHtmlStr($newMonitor['FPSReportInterval']) ?>" size="6"/></td></tr>
-            <tr><td><?= $SLANG['DefaultView'] ?></td><td><select name="newMonitor[DefaultView]">
-<?php
-        foreach ( getEnumValues( 'Monitors', 'DefaultView' ) as $opt_view )
-        {
-          if ( $opt_view == 'Control' && ( !ZM_OPT_CONTROL || !$monitor['Controllable'] ) )
-            continue;
-?>
-              <option value="<?= $opt_view ?>"<?php if ( $opt_view == $newMonitor['DefaultView'] ) { ?> selected="selected"<?php } ?>><?= $opt_view ?></option>
-<?php
-        }
-?>
-            </select></td></tr>
-            <tr><td><?= $SLANG['DefaultRate'] ?></td><td><?= buildSelect( "newMonitor[DefaultRate]", $rates ); ?></td></tr>
-            <tr><td><?= $SLANG['DefaultScale'] ?></td><td><?= buildSelect( "newMonitor[DefaultScale]", $scales ); ?></td></tr>
-<?php
-        if ( ZM_HAS_V4L && $newMonitor['Type'] == "Local" )
-        {
-?>
-            <tr><td><?= $SLANG['SignalCheckColour'] ?></td><td><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></td></tr>
-<?php
-        }
-?>
-            <tr><td><?= $SLANG['WebColour'] ?></td><td><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></td></tr>
-<?php
-        break;
-    }
-}
-?>
-          </tbody>
-        </table>
-        <div id="contentButtons">
-          <input type="submit" value="<?= $SLANG['Save'] ?>"<?php if ( !canEdit( 'Monitors' ) ) { ?> disabled="disabled"<?php } ?>/><input type="button" value="<?= $SLANG['Cancel'] ?>" onclick="closeWindow()"/>
-        </div>
-      </form>
-    </div>
-  </div>
+  <div class="container-fluid">
+
+	<div class="container" ng-controller="MonitorController">
+		<ul class="nav nav-tabs" role="tablist" id="tabMonitorAdd">
+			<li role="presentation"><a href="#general" 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="#timestamp" aria-controls="timestamp" role="tab" data-toggle="tab">Timestamps</a></li>
+			<li role="presentation"><a href="#buffers" aria-controls="buffers" role="tab" data-toggle="tab">Buffers</a></li>
+			<li role="presentation"><a href="#misc" aria-controls="misc" role="tab" data-toggle="tab">Misc</a></li>
+		</ul> <!-- End tabs -->
+
+		<div class="tab-content">
+			<?php include("tab-monitor-general.php"); ?>
+			<?php include("tab-monitor-source.php"); ?>
+			<?php include("tab-monitor-timestamp.php"); ?>
+			<?php include("tab-monitor-buffers.php"); ?>
+			<?php include("tab-monitor-misc.php"); ?>
+		</div> <!-- End .tab-content -->
+	</div>
+
+    <div> <! -- End .container-fluid -->
 </body>
 </html>
diff --git a/web/skins/bootstrap/views/tab-monitor-buffers.php b/web/skins/bootstrap/views/tab-monitor-buffers.php
new file mode 100644
index 000000000..eb72ae8d5
--- /dev/null
+++ b/web/skins/bootstrap/views/tab-monitor-buffers.php
@@ -0,0 +1,26 @@
+<div role="tabpanel" class="tab-pane" id="buffers">
+	<div class="form-group">
+		<label for="ImageBufferCount"><?= $SLANG['ImageBufferSize'] ?></label>
+		<input id="ImageBufferCount" type="number" class="form-control" name="newMonitor[ImageBufferCount]" value="100" />
+	</div>
+	<div class="form-group">
+		<label for="WarmupCount"><?= $SLANG['WarmupFrames'] ?></label>
+		<input id="WarmupCount" type="number" class="form-control" name="newMonitor[WarmupCount]" value="25" />
+	</div>
+	<div class="form-group">
+		<label for="PreEventCount"><?= $SLANG['PreEventImageBuffer'] ?></label>
+		<input id="PreEventCount" type="number" class="form-control" name="newMonitor[PreEventCount]" value="50" />
+	</div>
+	<div class="form-group">
+		<label for="PostEventCount"><?= $SLANG['PostEventImageBuffer'] ?></label>
+		<input id="PostEventCount" type="number" class="form-control" name="newMonitor[PostEventCount]" value="50" />
+	</div>
+	<div class="form-group">
+		<label for="StreamReplayBuffer"><?= $SLANG['StreamReplayBuffer'] ?></label>
+		<input id="StreamReplayBuffer" type="number" class="form-control" name="newMonitor[StreamReplayBuffer]" value="1000" />
+	</div>
+	<div class="form-group">
+		<label for="AlarmFrameCount"><?= $SLANG['AlarmFrameCount'] ?></label>
+		<input id="AlarmFrameCount" type="number" class="form-control" name="newMonitor[AlarmFrameCount]" value="1" />
+	</div>
+</div>
diff --git a/web/skins/bootstrap/views/tab-monitor-control.php b/web/skins/bootstrap/views/tab-monitor-control.php
new file mode 100644
index 000000000..c392dd41a
--- /dev/null
+++ b/web/skins/bootstrap/views/tab-monitor-control.php
@@ -0,0 +1,21 @@
+<div role="tabpanel" class="form-horizontal tab-pane" id="control">
+
+
+            <tr><td><?= $SLANG['Controllable'] ?></td><td><input type="checkbox" name="newMonitor[Controllable]" value="1"<?php if ( !empty($newMonitor['Controllable']) ) { ?> checked="checked"<?php } ?>/></td></tr>
+            <tr><td><?= $SLANG['ControlType'] ?></td><td><?= buildSelect( "newMonitor[ControlId]", $controlTypes, 'loadLocations( this )' ); ?><?php if ( canEdit( 'Control' ) ) { ?>&nbsp;<a href="#" onclick="createPopup( '?view=controlcaps', 'zmControlCaps', 'controlcaps' );"><?= $SLANG['Edit'] ?></a><?php } ?></td></tr>
+            <tr><td><?= $SLANG['ControlDevice'] ?></td><td><input type="text" name="newMonitor[ControlDevice]" value="<?= validHtmlStr($newMonitor['ControlDevice']) ?>" size="32"/></td></tr>
+            <tr><td><?= $SLANG['ControlAddress'] ?></td><td><input type="text" name="newMonitor[ControlAddress]" value="<?= validHtmlStr($newMonitor['ControlAddress']) ?>" size="32"/></td></tr>
+            <tr><td><?= $SLANG['AutoStopTimeout'] ?></td><td><input type="text" name="newMonitor[AutoStopTimeout]" value="<?= validHtmlStr($newMonitor['AutoStopTimeout']) ?>" size="4"/></td></tr>
+            <tr><td><?= $SLANG['TrackMotion'] ?></td><td><input type="checkbox" name="newMonitor[TrackMotion]" value="1"<?php if ( !empty($newMonitor['TrackMotion']) ) { ?> checked="checked"<?php } ?>/></td></tr>
+<?php
+        $return_options = array(
+            '-1' => $SLANG['None'],
+            '0' => $SLANG['Home'],
+            '1' => $SLANG['Preset']." 1",
+        );
+?>
+            <tr><td><?= $SLANG['TrackDelay'] ?></td><td><input type="text" name="newMonitor[TrackDelay]" value="<?= validHtmlStr($newMonitor['TrackDelay']) ?>" size="4"/></td></tr>
+            <tr><td><?= $SLANG['ReturnLocation'] ?></td><td><?= buildSelect( "newMonitor[ReturnLocation]", $return_options ); ?></td></tr>
+            <tr><td><?= $SLANG['ReturnDelay'] ?></td><td><input type="text" name="newMonitor[ReturnDelay]" value="<?= validHtmlStr($newMonitor['ReturnDelay']) ?>" size="4"/></td></tr>
+
+</div>
diff --git a/web/skins/bootstrap/views/tab-monitor-general.php b/web/skins/bootstrap/views/tab-monitor-general.php
new file mode 100644
index 000000000..1f7dc4825
--- /dev/null
+++ b/web/skins/bootstrap/views/tab-monitor-general.php
@@ -0,0 +1,65 @@
+<div role="tabpanel" class="tab-pane" id="general">
+
+	<div class="form-group">
+		<label for="Name"><?= $SLANG['Name'] ?></label>
+		<input type="text" id="Name" class="form-control" name="newMonitor[Name]" placeholder="Monitor-Name" />
+	</div>
+	<div class="form-group">
+		<label for="SourceType"><?= $SLANG['SourceType'] ?></label>
+		<select name="newMonitor[Type]" id="SourceType" class="form-control">
+			<option value="Local">Local</option>
+			<option value="Remote">Remote</option>
+			<option value="File">File</option>
+			<option value="Ffmpeg">Ffmpeg</option>
+			<option value="Libvlc">Libvlc</option>
+			<option value="cURL">cURL (HTTP(S) only)</option>
+		</select>
+	</div>
+	<div class="form-group">
+		<label for="Function"><?= $SLANG['Function'] ?></label>
+		<select class="form-control" id="Function" name="newMonitor[Function]">
+			<option value="None">None</option>
+			<option value="Monitor" selected="selected">Monitor</option>
+			<option value="Modect">Modect</option>
+			<option value="Record">Record</option>
+			<option value="Mocord">Mocord</option>
+			<option value="Nodect">Nodect</option>
+		</select>
+	</div>
+	<div class="checkbox">
+		<label>
+			<input type="checkbox" id="Enabled" class="form-control" name="newMonitor[Enabled]" value="1"<?php if ( !empty($newMonitor['Enabled']) ) { ?> checked="checked"<?php } ?>/>
+			Enabled
+		</label>
+	</div>
+	<div class="form-group">
+		<label for="MaxFPS"><?= $SLANG['MaximumFPS'] ?></label>
+		<input type="number" id="MaxFPS" class="form-control" name="newMonitor[MaxFPS]" value="<?= validHtmlStr($newMonitor['MaxFPS']) ?>" />
+	</div>
+	<div class="form-group">
+		<label for="AlarmMaxFPS"><?= $SLANG['AlarmMaximumFPS'] ?></label>
+		<input type="number" id="AlarmMaxFPS" class="form-control" name="newMonitor[AlarmMaxFPS]" value="<?= validHtmlStr($newMonitor['AlarmMaxFPS']) ?>" />
+	</div>
+<?php
+	if ( ZM_FAST_IMAGE_BLENDS )
+        {
+?>
+	<div class="form-group">
+		<label for=""><?= $SLANG['RefImageBlendPct'] ?></label>
+<select class="form-control" name="newMonitor[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"><?= "Alarm " . $SLANG['RefImageBlendPct'] ?></label>
+<select class="form-control" name="newMonitor[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
+	} else {
+?>
+	<div class="form-group">
+		<label for=""><?= $SLANG['RefImageBlendPct'] ?></label>
+		<input type="text" class="form-control" name="newMonitor[RefBlendPerc]" value="<?= validHtmlStr($newMonitor['RefBlendPerc']) ?>" />
+	</div>
+	<div class="form-group"><?= "Alarm " . $SLANG['RefImageBlendPct'] ?></label>
+		<input type="text" class="form-control" name="newMonitor[AlarmRefBlendPerc]" value="<?= validHtmlStr($newMonitor['AlarmRefBlendPerc']) ?>" />
+	</div>
+<?php
+        }
+?>
+</div>
diff --git a/web/skins/bootstrap/views/tab-monitor-misc.php b/web/skins/bootstrap/views/tab-monitor-misc.php
new file mode 100644
index 000000000..258c5f2d2
--- /dev/null
+++ b/web/skins/bootstrap/views/tab-monitor-misc.php
@@ -0,0 +1,84 @@
+<div role="tabpanel" class="form-horizontal tab-pane" id="misc">
+
+
+            <tr><td><?= $SLANG['EventPrefix'] ?></td><td><input type="text" name="newMonitor[EventPrefix]" value="<?= validHtmlStr($newMonitor['EventPrefix']) ?>" size="24"/></td></tr>
+            <tr><td><?= $SLANG['Sectionlength'] ?></td><td><input type="text" name="newMonitor[SectionLength]" value="<?= validHtmlStr($newMonitor['SectionLength']) ?>" size="6"/></td></tr>
+            <tr><td><?= $SLANG['FrameSkip'] ?></td><td><input type="text" name="newMonitor[FrameSkip]" value="<?= validHtmlStr($newMonitor['FrameSkip']) ?>" size="6"/></td></tr>
+            <tr><td><?= $SLANG['MotionFrameSkip'] ?></td><td><input type="text" name="newMonitor[MotionFrameSkip]" value="<?= validHtmlStr($newMonitor['MotionFrameSkip']) ?>" size="6"/></td></tr>
+            <tr><td><?= $SLANG['FPSReportInterval'] ?></td><td><input type="text" name="newMonitor[FPSReportInterval]" value="<?= validHtmlStr($newMonitor['FPSReportInterval']) ?>" size="6"/></td></tr>
+            <tr><td><?= $SLANG['DefaultView'] ?></td><td><select name="newMonitor[DefaultView]">
+<?php
+        foreach ( getEnumValues( 'Monitors', 'DefaultView' ) as $opt_view )
+        {
+          if ( $opt_view == 'Control' && ( !ZM_OPT_CONTROL || !$monitor['Controllable'] ) )
+            continue;
+?>
+              <option value="<?= $opt_view ?>"<?php if ( $opt_view == $newMonitor['DefaultView'] ) { ?> selected="selected"<?php } ?>><?= $opt_view ?></option>
+<?php
+        }
+?>
+            </select></td></tr>
+            <tr><td><?= $SLANG['DefaultRate'] ?></td><td><?= buildSelect( "newMonitor[DefaultRate]", $rates ); ?></td></tr>
+            <tr><td><?= $SLANG['DefaultScale'] ?></td><td><?= buildSelect( "newMonitor[DefaultScale]", $scales ); ?></td></tr>
+<?php
+        if ( ZM_HAS_V4L && $newMonitor['Type'] == "Local" )
+        {
+?>
+            <tr><td><?= $SLANG['SignalCheckColour'] ?></td><td><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></td></tr>
+<?php
+        }
+?>
+            <tr><td><?= $SLANG['WebColour'] ?></td><td><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></td></tr>
+
+
+
+            <tr>
+              <td><?= $SLANG['LinkedMonitors'] ?></td>
+              <td>
+                <select name="monitorIds" size="4" multiple="multiple" onchange="updateLinkedMonitors( this )">
+<?php
+    $monitors = dbFetchAll( "select Id,Name from Monitors order by Sequence asc" );
+    if ( !empty($newMonitor['LinkedMonitors']) )
+        $monitorIds = array_flip( explode( ',', $newMonitor['LinkedMonitors'] ) );
+    else
+        $monitorIds = array();
+    foreach ( $monitors as $monitor )
+    {
+        if ( (empty($newMonitor['Id']) || ($monitor['Id'] != $newMonitor['Id'])) && visibleMonitor( $monitor['Id'] ) )
+        {
+?>
+                  <option value="<?= $monitor['Id'] ?>"<?php if ( array_key_exists( $monitor['Id'], $monitorIds ) ) { ?> selected="selected"<?php } ?>><?= validHtmlStr($monitor['Name']) ?></option>
+<?php
+        }
+    }
+?>
+                </select>
+              </td>
+            </tr>
+            <tr><td><?= $SLANG['Triggers'] ?></td><td>
+<?php
+        $optTriggers = getSetValues( 'Monitors', 'Triggers' );
+        $breakCount = (int)(ceil(count($optTriggers)));
+        $breakCount = min( 3, $breakCount );
+        $optCount = 0;
+        foreach( $optTriggers as $optTrigger )
+        {
+            if ( !ZM_OPT_X10 && $optTrigger == 'X10' )
+                continue;
+            if ( $optCount && ($optCount%$breakCount == 0) )
+                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 ?>
+<?php
+            $optCount ++;
+        }
+        if ( !$optCount )
+        {
+?>
+              <em><?= $SLANG['NoneAvailable'] ?></em>
+<?php
+        }
+?>
+            </td></tr>
+
+</div>
diff --git a/web/skins/bootstrap/views/tab-monitor-source.php b/web/skins/bootstrap/views/tab-monitor-source.php
new file mode 100644
index 000000000..3913b96fc
--- /dev/null
+++ b/web/skins/bootstrap/views/tab-monitor-source.php
@@ -0,0 +1,101 @@
+<div role="tabpanel" class="form-horizontal tab-pane" id="source">
+
+<?php
+        if ( ZM_HAS_V4L && $newMonitor['Type'] == "Local" )
+        {
+?>
+            <tr><td><?= $SLANG['DevicePath'] ?></td><td><input type="text" name="newMonitor[Device]" value="<?= validHtmlStr($newMonitor['Device']) ?>" size="24"/></td></tr>
+            <tr><td><?= $SLANG['CaptureMethod'] ?></td><td><?= buildSelect( "newMonitor[Method]", $localMethods, "submitTab( '$tab' )" ); ?></td></tr>
+<?php
+            if ( ZM_HAS_V4L1 && $newMonitor['Method'] == 'v4l1' )
+            {
+?>
+            <tr><td><?= $SLANG['DeviceChannel'] ?></td><td><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></td></tr>
+            <tr><td><?= $SLANG['DeviceFormat'] ?></td><td><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></td></tr>
+            <tr><td><?= $SLANG['CapturePalette'] ?></td><td><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></td></tr>
+<?php
+            }
+            else
+            {
+?>
+            <tr><td><?= $SLANG['DeviceChannel'] ?></td><td><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></td></tr>
+            <tr><td><?= $SLANG['DeviceFormat'] ?></td><td><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></td></tr>
+            <tr><td><?= $SLANG['CapturePalette'] ?></td><td><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></td></tr>
+<?php
+            }
+?>
+			<tr><td><?= $SLANG['V4LMultiBuffer'] ?></td><td>
+				<input type="radio" name="newMonitor[V4LMultiBuffer]" id="newMonitor[V4LMultiBuffer]1" value="1" <?php echo ( $newMonitor['V4LMultiBuffer'] == 1 ? 'checked="checked"' : '' ) ?>/>
+				<label for="newMonitor[V4LMultiBuffer]1">Yes</label>
+				<input type="radio" name="newMonitor[V4LMultiBuffer]" id="newMonitor[V4LMultiBuffer]0" value="0" <?php echo ( $newMonitor['V4LMultiBuffer'] == 0 ? 'checked="checked"' : '' ) ?>/>
+				<label for="newMonitor[V4LMultiBuffer]0">No</label>
+				<input type="radio" name="newMonitor[V4LMultiBuffer]" id="newMonitor[V4LMultiBuffer]" value="" <?php echo ( empty($newMonitor['V4LMultiBuffer']) ? 'checked="checked"' : '' ) ?>/>
+				<label for="newMonitor[V4LMultiBuffer]">Use Config Value</label>
+			</td></tr>
+			<tr><td><?= $SLANG['V4LCapturesPerFrame'] ?></td><td><input type="number" name="newMonitor[V4LCapturesPerFrame]" value="<?php echo $newMonitor['V4LCapturesPerFrame'] ?>"/></td></tr>
+<?php
+        }
+        elseif ( $newMonitor['Type'] == "Remote" )
+        {
+?>
+            <tr><td><?= $SLANG['RemoteProtocol'] ?></td><td><?= buildSelect( "newMonitor[Protocol]", $remoteProtocols, "updateMethods( this )" ); ?></td></tr>
+<?php
+            if ( empty($newMonitor['Protocol']) || $newMonitor['Protocol'] == "http" )
+            {
+?>
+            <tr><td><?= $SLANG['RemoteMethod'] ?></td><td><?= buildSelect( "newMonitor[Method]", $httpMethods ); ?></td></tr>
+<?php
+            }
+            else
+            {
+?>
+            <tr><td><?= $SLANG['RemoteMethod'] ?></td><td><?= buildSelect( "newMonitor[Method]", $rtspMethods ); ?></td></tr>
+<?php
+            }
+?>
+            <tr><td><?= $SLANG['RemoteHostName'] ?></td><td><input type="text" name="newMonitor[Host]" value="<?= validHtmlStr($newMonitor['Host']) ?>" size="36"/></td></tr>
+            <tr><td><?= $SLANG['RemoteHostPort'] ?></td><td><input type="text" name="newMonitor[Port]" value="<?= validHtmlStr($newMonitor['Port']) ?>" size="6"/></td></tr>
+            <tr><td><?= $SLANG['RemoteHostPath'] ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr>
+<?php
+        }
+        elseif ( $newMonitor['Type'] == "File" )
+        {
+?>
+            <tr><td><?= $SLANG['SourcePath'] ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr>
+<?php
+        }
+        elseif ( $newMonitor['Type'] == "cURL" )
+        {
+?>
+            <tr><td><?= "URL" ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr>
+            <tr><td><?= "Username" ?></td><td><input type="text" name="newMonitor[User]" value="<?= validHtmlStr($newMonitor['User']) ?>" size="12"/></td></tr>
+            <tr><td><?= "Password" ?></td><td><input type="text" name="newMonitor[Pass]" value="<?= validHtmlStr($newMonitor['Pass']) ?>" size="12"/></td></tr>
+<?php
+        }
+        elseif ( $newMonitor['Type'] == "Ffmpeg" || $newMonitor['Type'] == "Libvlc")
+        {
+?>
+			<tr><td><?= $SLANG['SourcePath'] ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr>
+            <tr><td><?= $SLANG['RemoteMethod'] ?></td><td><?= buildSelect( "newMonitor[Method]", $rtspMethods ); ?></td></tr>
+			<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>
+<?php
+        }
+?>
+            <tr><td><?= "Target Colorspace" ?></td><td><select name="newMonitor[Colours]"><?php foreach ( $Colours as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Colours'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></td></tr>
+            <tr><td><?= $SLANG['CaptureWidth'] ?> (<?= $SLANG['Pixels'] ?>)</td><td><input type="text" name="newMonitor[Width]" value="<?= validHtmlStr($newMonitor['Width']) ?>" size="4" onkeyup="updateMonitorDimensions(this);"/></td></tr>
+            <tr><td><?= $SLANG['CaptureHeight'] ?> (<?= $SLANG['Pixels'] ?>)</td><td><input type="text" name="newMonitor[Height]" value="<?= validHtmlStr($newMonitor['Height']) ?>" size="4" onkeyup="updateMonitorDimensions(this);"/></td></tr>
+            <tr><td><?= $SLANG['PreserveAspect'] ?></td><td><input type="checkbox" name="preserveAspectRatio" value="1"/></td></tr> 
+            <tr><td><?= $SLANG['Orientation'] ?></td><td><select name="newMonitor[Orientation]"><?php foreach ( $orientations as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Orientation'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></td></tr>
+<?php
+        if ( $newMonitor['Type'] == "Local" )
+        {
+?>
+            <tr><td><?= "Deinterlacing" ?></td><td><select name="newMonitor[Deinterlacing]"><?php foreach ( $deinterlaceopts_v4l2 as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Deinterlacing'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></td></tr>
+<?php
+        } else {
+?>
+            <tr><td><?= "Deinterlacing" ?></td><td><select name="newMonitor[Deinterlacing]"><?php foreach ( $deinterlaceopts as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Deinterlacing'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></td></tr>
+<?php
+        }
+?>
+</div>
diff --git a/web/skins/bootstrap/views/tab-monitor-timestamp.php b/web/skins/bootstrap/views/tab-monitor-timestamp.php
new file mode 100644
index 000000000..9b76a4f80
--- /dev/null
+++ b/web/skins/bootstrap/views/tab-monitor-timestamp.php
@@ -0,0 +1,14 @@
+<div role="tabpanel" class="tab-pane" id="timestamp">
+	<div class="form-group">
+		<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" />
+	</div>
+	<div class="form-group">
+		<label for="labelX"><?= $SLANG['TimestampLabelX'] ?></label>
+		<input type="text" id="labelX" class="form-control" name="newMonitor[LabelX]" value="0" />
+	</div>
+	<div class="form-group">
+		<label for="labelY"><?= $SLANG['TimestampLabelY'] ?></label>
+		<input type="text" id="labelY" class="form-control" name="newMonitor[LabelY]" value="0" />
+	</div>
+</div>
diff --git a/web/skins/bootstrap/views/tab-monitor-x10.php b/web/skins/bootstrap/views/tab-monitor-x10.php
new file mode 100644
index 000000000..8d633bd20
--- /dev/null
+++ b/web/skins/bootstrap/views/tab-monitor-x10.php
@@ -0,0 +1,8 @@
+<div role="tabpanel" class="form-horizontal tab-pane" id="x10">
+
+
+            <tr><td><?= $SLANG['X10ActivationString'] ?></td><td><input type="text" name="newX10Monitor[Activation]" value="<?= validHtmlStr($newX10Monitor['Activation']) ?>" size="20"/></td></tr>
+            <tr><td><?= $SLANG['X10InputAlarmString'] ?></td><td><input type="text" name="newX10Monitor[AlarmInput]" value="<?= validHtmlStr($newX10Monitor['AlarmInput']) ?>" size="20"/></td></tr>
+            <tr><td><?= $SLANG['X10OutputAlarmString'] ?></td><td><input type="text" name="newX10Monitor[AlarmOutput]" value="<?= validHtmlStr($newX10Monitor['AlarmOutput']) ?>" size="20"/></td></tr>
+
+</div>