Merge branch 'master' into improve_zone_editing

2026-04-24 15:58:43 -04:00 · 2020-08-28 17:43:07 -04:00
parent 04b3f5d294 990b5bd9dc
commit 3e09840995
17 changed files with 241 additions and 160 deletions
--- a/.travis.yml
+++ b/.travis.yml
@@ -64,4 +64,3 @@ deploy:
  script: utils/packpack/rsync_xfer.sh
  on:
    branch: master
-    condition: fork = false
--- a/scripts/ZoneMinder/lib/ZoneMinder/Filter.pm
+++ b/scripts/ZoneMinder/lib/ZoneMinder/Filter.pm
@@ -203,11 +203,10 @@ sub Sql {
            $self->{Sql} .= "weekday( E.EndTime )";

 # 
-          } elsif ( $term->{attr} eq 'EventExists' ) {
-            push @{$self->{PreConditions}}, $term;
+          } elsif ( $term->{attr} eq 'ExistsInFileSystem' ) {
+            push @{$self->{PostSQLConditions}}, $term;
          } elsif ( $term->{attr} eq 'DiskSpace' ) {
            $self->{Sql} .= 'E.DiskSpace';
-            push @{$self->{PostConditions}}, $term;
          } elsif ( $term->{attr} eq 'DiskPercent' ) {
            $self->{Sql} .= 'zmDiskPercent';
            $self->{HasDiskPercent} = !undef;
--- a/web/includes/Event.php
+++ b/web/includes/Event.php
@@ -50,6 +50,9 @@ class Event extends ZM_Object {
  public static function clear_cache() {
    return ZM_Object::_clear_cache(get_class());
  }
+  public function remove_from_cache() {
+    return ZM_Object::_remove_from_cache(get_class(), $this);
+  }

  public function Storage( $new = null ) {
    if ( $new ) {
--- a/web/includes/Filter.php
+++ b/web/includes/Filter.php
@@ -40,8 +40,11 @@ class Filter extends ZM_Object {
  public function sql() {
    if ( ! isset($this->_sql) ) {
      foreach ( $this->FilterTerms() as $term ) {
-        if ( ! ($term->is_pre_sql() or $term->is_post_sql()) )
+        if ( ! ($term->is_pre_sql() or $term->is_post_sql()) ) {
          $this->_sql .= $term->sql();
+        } else {
+          $this->_sql .= '1';
+        }
      } # end foreach term
    }
    return $this->_sql;
--- a/web/includes/FilterTerm.php
+++ b/web/includes/FilterTerm.php
@@ -164,13 +164,13 @@ class FilterTerm {
    case 'IS' :
      # Odd will be replaced with 1
      # Even will be replaced with 0
-      if ( $this->value == 'Odd' or $this->value == 'Even' )  {
+      if ( $this->val == 'Odd' or $this->val == 'Even' )  {
        return ' % 2 = ';
      } else {
        return ' IS ';
      }
    case 'IS NOT' :
-      if ( $this->value == 'Odd' or $this->value == 'Even' )  {
+      if ( $this->val == 'Odd' or $this->val == 'Even' )  {
        return ' % 2 = ';
      }
      return ' IS NOT ';
@@ -182,7 +182,7 @@ class FilterTerm {
  /* Some terms don't have related SQL */
  public function sql() {
    if ( $this->attr == 'ExistsInFileSystem' ) {
-      return '';
+      return '1';
    }

    $sql = '';
--- a/web/includes/Object.php
+++ b/web/includes/Object.php
@@ -141,6 +141,11 @@ class ZM_Object {
    global $object_cache;
    $object_cache[$class] = array();
  }
+  public function _remove_from_cache($class, $object) {
+    global $object_cache;
+    unset($object_cache[$class][$object->Id()]);
+    Logger::Debug("Unsset $class " . $object->Id() . " " . count($object_cache[$class]));
+  }

  public static function Objects_Indexed_By_Id($class) {
    $results = array();
--- a/web/includes/actions/filter.php
+++ b/web/includes/actions/filter.php
@@ -95,6 +95,7 @@ if ( isset($_REQUEST['object']) and ( $_REQUEST['object'] == 'filter' ) ) {
      } else if ( $filter->Background() ) {
        $filter->control('start');
      }
+      $redirect = '?view=filter&Id='.$filter->Id();

    } else if ( $action == 'control' ) {
      if ( $_REQUEST['command'] == 'start'
--- a/web/includes/actions/monitor.php
+++ b/web/includes/actions/monitor.php
@@ -272,9 +272,8 @@ if ( $action == 'monitor' ) {
    }
    // really should thump zmwatch and maybe zmtrigger too.
    //daemonControl( 'restart', 'zmwatch.pl' );
-    $refreshParent = true;
  } // end if restart
-  $view = 'none';
+  $view = 'console';
 } else {
  ZM\Warning("Unknown action $action in Monitor");
 } // end if action == Delete
--- a/web/skins/classic/js/skin.js
+++ b/web/skins/classic/js/skin.js
@@ -159,7 +159,7 @@ window.addEventListener("DOMContentLoaded", function onSkinDCL() {
    });
  });

-  document.querySelectorAll(".tabList a").forEach(function addOnClick(el) {
+  document.querySelectorAll(".pillList a").forEach(function addOnClick(el) {
    el.addEventListener("click", submitTab);
  });

--- a/web/skins/classic/views/console.php
+++ b/web/skins/classic/views/console.php
@@ -286,10 +286,10 @@ for( $monitor_i = 0; $monitor_i < count($displayMonitors); $monitor_i += 1 ) {
  $imgHTML='';
  if ( ZM_WEB_LIST_THUMBS && ($monitor['Status'] == 'Connected') && $running ) {
    $options = array();
-    $ratio_factor = $Monitor->Height() / $Monitor->Width();
+    $ratio_factor = $Monitor->ViewHeight() / $Monitor->ViewWidth();
    $options['width'] = ZM_WEB_LIST_THUMB_WIDTH;
    $options['height'] = ZM_WEB_LIST_THUMB_HEIGHT ? ZM_WEB_LIST_THUMB_HEIGHT : ZM_WEB_LIST_THUMB_WIDTH*$ratio_factor;
-    $options['scale'] = intval(100*ZM_WEB_LIST_THUMB_WIDTH / $Monitor->Width());
+    $options['scale'] = intval(100*ZM_WEB_LIST_THUMB_WIDTH / $Monitor->ViewWidth());
    $options['mode'] = 'single';

    $stillSrc = $Monitor->getStreamSrc($options);
--- a/web/skins/classic/views/events.php
+++ b/web/skins/classic/views/events.php
@@ -58,7 +58,7 @@ if ( $_POST ) {

 $failed = !$filter->test_pre_sql_conditions();
 if ( $failed ) {
-  ZM\Logger::Debug("Pre conditions failed, not doing sql");
+  ZM\Logger::Debug('Pre conditions failed, not doing sql');
 }

 $results = $failed ? null : dbQuery($eventsSql);
@@ -189,14 +189,22 @@ xhtmlHeaders(__FILE__, translate('Events'));
 $count = 0;
 $disk_space_total = 0;
 if ( $results ) {
+  $events = array();

  while ( $event_row = dbFetchNext($results) ) {
    $event = new ZM\Event($event_row);

    if ( !$filter->test_post_sql_conditions($event) ) {
-      ZM\Logger::Debug("Failed post conditions");
+      $event->remove_from_cache();
      continue;
    }
+    $events[] = $event;
+    if ( $limit and (count($events) > $limit) ) {
+      break;
+    }
+    ZM\Logger::Debug("Have " . count($events) . " events, limit $limit");
+  }
+  foreach ( $events as $event ) {

    $scale = max(reScale(SCALE_BASE, $event->DefaultScale(), ZM_WEB_DEFAULT_SCALE), SCALE_BASE);
 ?>
@@ -280,7 +288,7 @@ if ( $results ) {
 ?>
            </tr>
 <?php
-}
+} # end foreach row
 ?>
          </tbody>
 <?php
--- a/web/skins/classic/views/frames.php
+++ b/web/skins/classic/views/frames.php
@@ -142,6 +142,7 @@ xhtmlHeaders(__FILE__, translate('Frames').' - '.$Event->Id());
        data-detail-view="true"
        data-detail-formatter="detailFormatter"
        data-show-toggle="true"
+        data-show-jump-to="true"
        class="table-sm table-borderless">

        <thead>
--- a/web/skins/classic/views/js/console.js
+++ b/web/skins/classic/views/js/console.js
@@ -53,7 +53,7 @@ function setButtonStates( element ) {
 }

 function addMonitor(element) {
-  createPopup( '?view=monitor', 'zmMonitor0', 'monitor' );
+  window.location.assign('?view=monitor');
 }

 function cloneMonitor(element) {
@@ -73,7 +73,7 @@ function cloneMonitor(element) {
    }
  } // end foreach element
  if ( monitorId != -1 ) {
-    createPopup( '?view=monitor&dupId='+monitorId, 'zmMonitor0', 'monitor' );
+    window.location.assign('?view=monitor&dupId='+monitorId);
  }
 }

@@ -97,11 +97,11 @@ function editMonitor( element ) {
    }
  } // end foreach checkboxes
  if ( monitorIds.length == 1 ) {
-    createPopup( '?view=monitor&mid='+monitorIds[0], 'zmMonitor'+monitorIds[0], 'monitor' );
+    window.location.assign('?view=monitor&mid='+monitorIds[0]);
  } else if ( monitorIds.length > 1 ) {
-    createPopup( '?view=monitors&'+(monitorIds.map(function(mid) {
+    window.location.assign( '?view=monitors&'+(monitorIds.map(function(mid) {
      return 'mids[]='+mid;
-    }).join('&')), 'zmMonitors', 'monitors' );
+    }).join('&')));
  }
 }

@@ -147,7 +147,7 @@ function initPage() {

  reloadWindow.periodical(consoleRefreshTimeout);
  if ( showVersionPopup ) {
-    createPopup('?view=version', 'zmVersion', 'version');
+    window.location.assign('?view=version');
  }
  if ( showDonatePopup ) {
    $j('#donate').modal('show');
--- a/web/skins/classic/views/js/monitor.js
+++ b/web/skins/classic/views/js/monitor.js
@@ -68,6 +68,9 @@ function loadLocations( element ) {
 }

 function initPage() {
+  var backBtn = $j('#backBtn');
+  var onvifBtn = $j('#onvifBtn');
+
  //var protocolSelector = $('contentForm').elements['newMonitor[Protocol]'];
  //if ( $(protocolSelector).getTag() == 'select' )
  //updateMethods( $(protocolSelector) );
@@ -135,8 +138,61 @@ function initPage() {
    el.onchange = window['change_WebColour'].bind(el);
  });

-
  $j('.chosen').chosen();
+
+  // Don't enable the back button if there is no previous zm page to go back to
+  backBtn.prop('disabled', !document.referrer.length);
+
+  // Manage the BACK button
+  document.getElementById("backBtn").addEventListener("click", function onBackClick(evt) {
+    evt.preventDefault();
+    window.history.back();
+  });
+
+  // Manage the REFRESH Button
+  document.getElementById("refreshBtn").addEventListener("click", function onRefreshClick(evt) {
+    evt.preventDefault();
+    window.location.reload(true);
+  });
+
+  // Manage the PROBE button
+  $j('#probeBtn').click(function(evt) {
+    var mid = evt.currentTarget.getAttribute("data-mid");
+    evt.preventDefault();
+
+    //FIX-ME: MAKE THIS A MODAL
+    //$j('#modalFunction-'+mid).modal('show');
+    window.location.assign('?view=monitorprobe&mid='+mid);
+  });
+
+  // Manage the ONVIF button
+  $j('#onvifBtn').click(function(evt) {
+    var mid = evt.currentTarget.getAttribute("data-mid");
+    evt.preventDefault();
+
+    //FIX-ME: MAKE THIS A MODAL
+    //$j('#modalFunction-'+mid).modal('show');
+    window.location.assign('?view=onvifprobe&mid='+mid);
+  });
+
+  // Don't enable the onvif button if there is no previous zm page to go back to
+  onvifBtn.prop('disabled', !hasOnvif);
+
+  // Manage the PRESET button
+  $j('#presetBtn').click(function(evt) {
+    var mid = evt.currentTarget.getAttribute("data-mid");
+    evt.preventDefault();
+
+    //FIX-ME: MAKE THIS A MODAL
+    //$j('#modalFunction-'+mid).modal('show');
+    window.location.assign('?view=monitorpreset&mid='+mid);
+  });
+
+  // Manage the CANCEL Button
+  document.getElementById("cancelBtn").addEventListener("click", function onCancelClick(evt) {
+    evt.preventDefault();
+    window.location.assign('?view=console');
+  });
 } // end function initPage()

 function change_WebColour() {
--- a/web/skins/classic/views/js/monitor.js.php
+++ b/web/skins/classic/views/js/monitor.js.php
@@ -1,4 +1,5 @@
 var optControl = <?php echo ZM_OPT_CONTROL ?>;
+var hasOnvif = <?php echo ZM_HAS_ONVIF ?>;
 var defaultAspectRatio = '<?php echo ZM_DEFAULT_ASPECT_RATIO ?>';

 <?php
--- a/web/skins/classic/views/logout.php
+++ b/web/skins/classic/views/logout.php
@@ -32,7 +32,7 @@ global $CLANG;
        <p><?php echo sprintf( $CLANG['CurrentLogin'], $user['Username'] ) ?></p>
      </div>
      <div class="modal-footer">
-        <form name="contentForm" id="contentForm" method="post" action="?">
+        <form name="logoutForm" id="logoutForm" method="post" action="?">
          <input type="hidden" name="view" value="logout"/>
          <button type="submit" name="action" value="logout"><?php echo translate('Logout') ?></button>
          <?php if ( ZM_USER_SELF_EDIT ) echo '<button type="submit" name="action" value="config">'.translate('Config').'</button>'.PHP_EOL; ?>
--- a/web/skins/classic/views/monitor.php
+++ b/web/skins/classic/views/monitor.php
@@ -381,35 +381,13 @@ $codecs = array(

 xhtmlHeaders(__FILE__, translate('Monitor').' - '.validHtmlStr($monitor->Name()));
 getBodyTopHTML();
+echo getNavBarHTML();
 ?>
-  <div id="page">
-    <div id="header">
-<?php
-if ( canEdit('Monitors') ) {
-  if ( isset($_REQUEST['dupId']) ) {
-?>
-    <div class="alert alert-info">
-      Configuration cloned from Monitor: <?php echo validHtmlStr($clonedName) ?>
-    </div>
-<?php
-  }
-?>
-    <div id="headerButtons">
-      <?php echo makePopupLink('?view=monitorprobe&mid='.$monitor->Id(), 'zmMonitorProbe'.$monitor->Id(), 'monitorprobe', translate('Probe')); ?>
-<?php
-  if ( ZM_HAS_ONVIF ) {
-       echo makePopupLink('?view=onvifprobe&mid='.$monitor->Id(), 'zmOnvifProbe'.$monitor->Id(), 'onvifprobe', translate('OnvifProbe'));
-  }
-?>
-      <?php echo makePopupLink('?view=monitorpreset&mid=' . $monitor->Id(), 'zmMonitorPreset' . $monitor->Id(), 'monitorpreset', translate('Presets')); ?>
-    </div>
-<?php
-} // end if canEdit('Monitors')
-?>
-    <h2><?php echo translate('Monitor') ?> - <?php echo validHtmlStr($monitor->Name()) ?><?php if ( $monitor->Id() ) { ?> (<?php echo $monitor->Id()?>)<?php } ?></h2>
-  </div>
-  <div id="content">
-    <ul class="tabList">
+  <div id="page" class="container-fluid">
+
+  <div id="" class="row flex-nowrap">
+    <nav id="">  <!-- BEGIN PILL LIST -->
+    <ul class="pillList nav nav-pills flex-column h-100">
 <?php
 $tabs = array();
 $tabs['general'] = translate('General');
@@ -432,19 +410,45 @@ else
  $tab = 'general';

 foreach ( $tabs as $name=>$value ) {
-  if ( $tab == $name ) {
 ?>
-      <li class="active"><?php echo $value ?></li>
+    <li class="nav-item form-control-sm my-1"><a data-toggle="pill" data-tab-name="<?php echo $name ?>" class="nav-link<?php echo $tab == $name ? ' active' : '' ?>" href="#"><?php echo $value ?></a></li>
 <?php
-  } else {
-?>
-      <li><a href="#" data-tab-name="<?php echo $name ?>"><?php echo $value ?></a></li>
-<?php
-  }
 }
  ?>
    </ul>
-    <div class="clear"></div>
+    </nav> <!-- END PILL LIST -->
+
+<div class="d-flex flex-column col-sm-offset-2 container-fluid">
+    <!-- BEGIN MINI HEADER -->
+    <div class="d-flex flex-row justify-content-between px-3 py-1">
+      <div class="" id="toolbar" >
+        <button id="backBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Back') ?>" disabled><i class="fa fa-arrow-left"></i></button>
+        <button id="refreshBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Refresh') ?>" ><i class="fa fa-refresh"></i></button>
+      </div>
+      
+    <h2><?php echo translate('Monitor') ?> - <?php echo validHtmlStr($monitor->Name()) ?><?php if ( $monitor->Id() ) { ?> (<?php echo $monitor->Id()?>)<?php } ?></h2>
+<?php
+if ( canEdit('Monitors') ) {
+  if ( isset($_REQUEST['dupId']) ) {
+?>
+    <div class="alert alert-info">
+      Configuration cloned from Monitor: <?php echo validHtmlStr($clonedName) ?>
+    </div>
+<?php
+  }
+?>
+    <div id="">
+      <button id="probeBtn" class="btn btn-normal" data-mid="<?php echo $monitor->Id() ?>" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Probe') ?>" ><i class="fa fa-rss-square"></i></button>
+      <button id="onvifBtn" class="btn btn-normal" data-mid="<?php echo $monitor->Id() ?>" data-toggle="tooltip" data-placement="top" title="<?php echo translate('OnvifProbe') ?>" ><i class="fa fa-rss"></i></button>
+      <button id="presetBtn" class="btn btn-normal" data-mid="<?php echo $monitor->Id() ?>" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Presets') ?>" ><i class="fa fa-list-ol"></i></button>
+    </div>
+<?php
+} // end if canEdit('Monitors')
+?>
+  </div>
+
+    <!-- BEGIN ITEM LIST -->
+    <div class="d-flex flex-row container-fluid pr-0">
    <form name="contentForm" id="contentForm" method="post" action="?">
      <input type="hidden" name="view" value="<?php echo $view ?>"/>
      <input type="hidden" name="tab" value="<?php echo $tab ?>"/>
@@ -614,15 +618,15 @@ switch ( $tab ) {
    {
 ?>
          <tr class="Name">
-            <td><?php echo translate('Name') ?></td>
+            <td class="text-right pr-3"><?php echo translate('Name') ?></td>
            <td><input type="text" name="newMonitor[Name]" value="<?php echo validHtmlStr($monitor->Name()) ?>"/></td>
          </tr>
          <tr class="Notes">
-            <td><?php echo translate('Notes') ?></td>
+            <td class="text-right pr-3"><?php echo translate('Notes') ?></td>
            <td><textarea name="newMonitor[Notes]" rows="4"><?php echo validHtmlStr($monitor->Notes()) ?></textarea></td>
          </tr>
          <tr>
-            <td><?php echo translate('Server') ?></td><td>
+            <td class="text-right pr-3"><?php echo translate('Server') ?></td><td>
 <?php
      $servers = array(''=>'None','auto'=>'Auto');
      foreach ( ZM\Server::find(NULL, array('order'=>'lower(Name)')) as $Server ) {
@@ -633,11 +637,11 @@ switch ( $tab ) {
            </td>
          </tr>
          <tr>
-            <td><?php echo translate('SourceType') ?></td>
+            <td class="text-right pr-3"><?php echo translate('SourceType') ?></td>
            <td><?php echo htmlSelect('newMonitor[Type]', $sourceTypes, $monitor->Type()); ?></td>
          </tr>
          <tr>
-            <td><?php echo translate('Function') ?></td>
+            <td class="text-right pr-3"><?php echo translate('Function') ?></td>
            <td>
 <?php
      $function_options = array();
@@ -649,14 +653,14 @@ switch ( $tab ) {
          </td>
        </tr>
        <tr>
-          <td><?php echo translate('Enabled') ?></td>
+          <td class="text-right pr-3"><?php echo translate('Enabled') ?></td>
          <td><input type="checkbox" name="newMonitor[Enabled]" value="1"<?php echo $monitor->Enabled() ? ' checked="checked"' : '' ?>/></td>
        </tr>
 <?php
      if ( $monitor->Type() != 'WebSite' ) {
 ?>
        <tr>
-          <td><?php echo translate('LinkedMonitors') ?>&nbsp;(<?php echo makePopupLink('?view=optionhelp&amp;option=OPTIONS_LINKED_MONITORS', 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
+          <td class="text-right pr-3"><?php echo translate('LinkedMonitors') ?>&nbsp;(<?php echo makePopupLink('?view=optionhelp&amp;option=OPTIONS_LINKED_MONITORS', 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
          <td>
 <?php
      $monitors = dbFetchAll('SELECT Id, Name FROM Monitors ORDER BY Sequence ASC');
@@ -677,27 +681,27 @@ switch ( $tab ) {
          </td>
        </tr>
        <tr>
-          <td><?php echo translate('Groups'); ?></td>
+          <td class="text-right pr-3"><?php echo translate('Groups'); ?></td>
          <td><select name="newMonitor[GroupIds][]" multiple="multiple" class="chosen"><?php
            echo htmlOptions(ZM\Group::get_dropdown_options(), $monitor->GroupIds());
            ?></select></td>
        </tr>
        <tr>
-          <td><?php echo translate('AnalysisFPS') ?></td>
+          <td class="text-right pr-3"><?php echo translate('AnalysisFPS') ?></td>
          <td><input type="number" name="newMonitor[AnalysisFPSLimit]" value="<?php echo validHtmlStr($monitor->AnalysisFPSLimit()) ?>" min="0" step="any"/></td>
        </tr>
 <?php
      if ( $monitor->Type() != 'Local' && $monitor->Type() != 'File' && $monitor->Type() != 'NVSocket' ) {
 ?>
            <tr>
-              <td><?php echo translate('MaximumFPS') ?>&nbsp;(<?php echo makePopupLink('?view=optionhelp&amp;option=OPTIONS_MAXFPS', 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
+              <td class="text-right pr-3"><?php echo translate('MaximumFPS') ?>&nbsp;(<?php echo makePopupLink('?view=optionhelp&amp;option=OPTIONS_MAXFPS', 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
              <td>
                <input type="number" name="newMonitor[MaxFPS]" value="<?php echo validHtmlStr($monitor->MaxFPS()) ?>" min="0" step="any"/>
                <span id="newMonitor[MaxFPS]" style="color:red;<?php echo $monitor->MaxFPS() ? '' : 'display:none;' ?>">CAUTION: See the help text</span>
              </td>
            </tr>
            <tr>
-              <td><?php echo translate('AlarmMaximumFPS') ?>&nbsp;(<?php echo makePopupLink('?view=optionhelp&amp;option=OPTIONS_MAXFPS', 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
+              <td class="text-right pr-3"><?php echo translate('AlarmMaximumFPS') ?>&nbsp;(<?php echo makePopupLink('?view=optionhelp&amp;option=OPTIONS_MAXFPS', 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
              <td>
                <input type="number" name="newMonitor[AlarmMaxFPS]" value="<?php echo validHtmlStr($monitor->AlarmMaxFPS()) ?>" min="0" step="any"/>
                <span id="newMonitor[AlarmMaxFPS]" style="color:red;<?php echo $monitor->AlarmMaxFPS() ? '' : 'display:none;' ?>">CAUTION: See the help text</span>
@@ -707,11 +711,11 @@ switch ( $tab ) {
      } else {
 ?>
            <tr>
-              <td><?php echo translate('MaximumFPS') ?></td>
+              <td class="text-right pr-3"><?php echo translate('MaximumFPS') ?></td>
              <td><input type="number" name="newMonitor[MaxFPS]" value="<?php echo validHtmlStr($monitor->MaxFPS()) ?>" min="0" step="any"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('AlarmMaximumFPS') ?></td>
+              <td class="text-right pr-3"><?php echo translate('AlarmMaximumFPS') ?></td>
              <td><input type="number" name="newMonitor[AlarmMaxFPS]" value="<?php echo validHtmlStr($monitor->AlarmMaxFPS()) ?>" min="0" step="any"/></td>
            </tr>
 <?php
@@ -719,22 +723,22 @@ switch ( $tab ) {
      if ( ZM_FAST_IMAGE_BLENDS ) {
 ?>
          <tr>
-            <td><?php echo translate('RefImageBlendPct') ?></td>
+            <td class="text-right pr-3"><?php echo translate('RefImageBlendPct') ?></td>
            <td><?php echo htmlSelect('newMonitor[RefBlendPerc]', $fastblendopts, $monitor->RefBlendPerc()); ?></td>
          </tr>
          <tr>
-            <td><?php echo translate('AlarmRefImageBlendPct') ?></td>
+            <td class="text-right pr-3"><?php echo translate('AlarmRefImageBlendPct') ?></td>
            <td><?php echo htmlSelect('newMonitor[AlarmRefBlendPerc]', $fastblendopts_alarm, $monitor->AlarmRefBlendPerc()); ?></td>
          </tr>
          <?php
      } else {
 ?>
-            <tr><td><?php echo translate('RefImageBlendPct') ?></td><td><input type="text" name="newMonitor[RefBlendPerc]" value="<?php echo validHtmlStr($monitor->RefBlendPerc()) ?>" size="4"/></td></tr>
-            <tr><td><?php echo translate('AlarmRefImageBlendPct') ?></td><td><input type="text" name="newMonitor[AlarmRefBlendPerc]" value="<?php echo validHtmlStr($monitor->AlarmRefBlendPerc()) ?>" size="4"/></td></tr>
+            <tr><td class="text-right pr-3"><?php echo translate('RefImageBlendPct') ?></td><td><input type="text" name="newMonitor[RefBlendPerc]" value="<?php echo validHtmlStr($monitor->RefBlendPerc()) ?>" size="4"/></td></tr>
+            <tr><td class="text-right pr-3"><?php echo translate('AlarmRefImageBlendPct') ?></td><td><input type="text" name="newMonitor[AlarmRefBlendPerc]" value="<?php echo validHtmlStr($monitor->AlarmRefBlendPerc()) ?>" size="4"/></td></tr>
 <?php
      }
 ?>
-            <tr><td><?php echo translate('Triggers') ?></td><td>
+            <tr><td class="text-right pr-3"><?php echo translate('Triggers') ?></td><td>
 <?php
      $optTriggers = getSetValues('Monitors', 'Triggers');
      $breakCount = (int)(ceil(count($optTriggers)));
@@ -762,19 +766,19 @@ switch ( $tab ) {
    {
 ?>
            <tr>
-              <td><?php echo translate('ONVIF_URL') ?></td>
+              <td class="text-right pr-3"><?php echo translate('ONVIF_URL') ?></td>
              <td><input type="text" name="newMonitor[ONVIF_URL]" value="<?php echo validHtmlStr($monitor->ONVIF_URL()) ?>"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('Username') ?></td>
+              <td class="text-right pr-3"><?php echo translate('Username') ?></td>
              <td><input type="text" name="newMonitor[ONVIF_Username]" value="<?php echo validHtmlStr($monitor->ONVIF_Username()) ?>"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('Password') ?></td>
+              <td class="text-right pr-3"><?php echo translate('Password') ?></td>
              <td><input type="text" name="newMonitor[ONVIF_Password]" value="<?php echo validHtmlStr($monitor->ONVIF_Password()) ?>"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('ONVIF_Options') ?></td>
+              <td class="text-right pr-3"><?php echo translate('ONVIF_Options') ?></td>
              <td><input type="text" name="newMonitor[ONVIF_Options]" value="<?php echo validHtmlStr($monitor->ONVIF_Options()) ?>"/></td>
            </tr>
 <?php
@@ -784,7 +788,7 @@ switch ( $tab ) {
    {
      if ( ZM_HAS_V4L && $monitor->Type() == 'Local' ) {
 ?>
-          <tr><td><?php echo translate('DevicePath') ?></td><td><input type="text" name="newMonitor[Device]" value="<?php echo validHtmlStr($monitor->Device()) ?>"/></td></tr>
+          <tr><td class="text-right pr-3"><?php echo translate('DevicePath') ?></td><td><input type="text" name="newMonitor[Device]" value="<?php echo validHtmlStr($monitor->Device()) ?>"/></td></tr>
          <tr>
            <td><?php echo translate('CaptureMethod') ?></td>
            <td><?php echo htmlSelect('newMonitor[Method]', $localMethods, $monitor->Method(), array('onchange'=>'submitTab', 'data-tab-name'=>$tab) ); ?></td>
@@ -793,36 +797,36 @@ switch ( $tab ) {
        if ( ZM_HAS_V4L1 && $monitor->Method() == 'v4l1' ) {
 ?>
          <tr>
-            <td><?php echo translate('DeviceChannel') ?></td>
+            <td class="text-right pr-3"><?php echo translate('DeviceChannel') ?></td>
            <td><?php echo htmlSelect('newMonitor[Channel]', $v4l1DeviceChannels, $monitor->Channel()); ?></td>
          </tr>
          <tr>
-            <td><?php echo translate('DeviceFormat') ?></td>
+            <td class="text-right pr-3"><?php echo translate('DeviceFormat') ?></td>
            <td><?php echo htmlSelect('newMonitor[Format]', $v4l1DeviceFormats, $monitor->Format()); ?></td>
          </tr>
          <tr>
-            <td><?php echo translate('CapturePalette') ?></td>
+            <td class="text-right pr-3"><?php echo translate('CapturePalette') ?></td>
            <td><?php echo htmlSelect('newMonitor[Palette]', $v4l1LocalPalettes, $monitor->Palette()); ?></td>
          </tr>
 <?php
        } else {
 ?>
          <tr>
-            <td><?php echo translate('DeviceChannel') ?></td>
+            <td class="text-right pr-3"><?php echo translate('DeviceChannel') ?></td>
            <td><?php echo htmlSelect('newMonitor[Channel]', $v4l2DeviceChannels, $monitor->Channel()); ?></td>
          </tr>
          <tr>
-            <td><?php echo translate('DeviceFormat') ?></td>
+            <td class="text-right pr-3"><?php echo translate('DeviceFormat') ?></td>
            <td><?php echo htmlSelect('newMonitor[Format]', $v4l2DeviceFormats, $monitor->Format()); ?></td>
          </tr>
         <tr>
-            <td><?php echo translate('CapturePalette') ?></td>
+            <td class="text-right pr-3"><?php echo translate('CapturePalette') ?></td>
            <td><?php echo htmlSelect('newMonitor[Palette]', $v4l2LocalPalettes, $monitor->Palette()); ?></td>
          </tr>
 <?php
        }
 ?>
-          <tr><td><?php echo translate('V4LMultiBuffer') ?></td><td>
+          <tr><td class="text-right pr-3"><?php echo translate('V4LMultiBuffer') ?></td><td>
            <input type="radio" name="newMonitor[V4LMultiBuffer]" id="newMonitor[V4LMultiBuffer]1" value="1" <?php echo ( $monitor->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 ( $monitor->V4LMultiBuffer() == '0' ? 'checked="checked"' : '' ) ?>/>
@@ -831,7 +835,7 @@ switch ( $tab ) {
            <label for="newMonitor[V4LMultiBuffer]">Use Config Value</label>
          </td></tr>
          <tr>
-            <td><?php echo translate('V4LCapturesPerFrame') ?></td>
+            <td class="text-right pr-3"><?php echo translate('V4LCapturesPerFrame') ?></td>
            <td><input type="number" name="newMonitor[V4LCapturesPerFrame]" value="<?php echo validHtmlStr($monitor->V4LCapturesPerFrame()); ?>" min="1"/></td>
          </tr>
 <?php
@@ -841,30 +845,30 @@ include('_monitor_source_nvsocket.php');
      } else if ( $monitor->Type() == 'VNC' ) {
 ?>
        <tr>
-          <td><?php echo translate('RemoteHostName') ?></td>
+          <td class="text-right pr-3"><?php echo translate('RemoteHostName') ?></td>
          <td><input type="text" name="newMonitor[Host]" value="<?php echo validHtmlStr($monitor->Host()) ?>"/></td>
        </tr>
        <tr>
-          <td><?php echo translate('RemoteHostPort') ?></td>
+          <td class="text-right pr-3"><?php echo translate('RemoteHostPort') ?></td>
          <td><input type="number" name="newMonitor[Port]" value="<?php echo validHtmlStr($monitor->Port()) ?>" size="6"/></td>
        </tr>
        <tr>
-          <td><?php echo translate('Username') ?></td>
+          <td class="text-right pr-3"><?php echo translate('Username') ?></td>
          <td><input type="text" name="newMonitor[User]" value="<?php echo validHtmlStr($monitor->User()) ?>"/></td>
        </tr>
        <tr>
-          <td><?php echo translate('Password') ?></td>
+          <td class="text-right pr-3"><?php echo translate('Password') ?></td>
          <td><input type="text" name="newMonitor[Pass]" value="<?php echo validHtmlStr($monitor->Pass()) ?>"/></td>
        </tr>
 <?php
      } else if ( $monitor->Type() == 'Remote' ) {
 ?>
          <tr>
-            <td><?php echo translate('RemoteProtocol') ?></td>
+            <td class="text-right pr-3"><?php echo translate('RemoteProtocol') ?></td>
            <td><?php echo htmlSelect('newMonitor[Protocol]', $remoteProtocols, $monitor->Protocol(), "updateMethods( this );if(this.value=='rtsp'){\$('RTSPDescribe').setStyle('display','table-row');}else{\$('RTSPDescribe').hide();}" ); ?></td>
          </tr>
          <tr>
-            <td><?php echo translate('RemoteMethod') ?></td>
+            <td class="text-right pr-3"><?php echo translate('RemoteMethod') ?></td>
            <td>
 <?php
        if ( !$monitor->Protocol() || $monitor->Protocol() == 'http' ) {
@@ -875,24 +879,24 @@ include('_monitor_source_nvsocket.php');
 ?>
            </td>
          </tr>
-          <tr><td><?php echo translate('RemoteHostName') ?></td><td><input type="text" name="newMonitor[Host]" value="<?php echo validHtmlStr($monitor->Host()) ?>"/></td></tr>
+          <tr><td class="text-right pr-3"><?php echo translate('RemoteHostName') ?></td><td><input type="text" name="newMonitor[Host]" value="<?php echo validHtmlStr($monitor->Host()) ?>"/></td></tr>
          <tr><td><?php echo translate('RemoteHostPort') ?></td><td><input type="number" name="newMonitor[Port]" value="<?php echo validHtmlStr($monitor->Port()) ?>" min="0" max="65535"/></td></tr>
          <tr><td><?php echo translate('RemoteHostPath') ?></td><td><input type="text" name="newMonitor[Path]" value="<?php echo validHtmlStr($monitor->Path()) ?>"/></td></tr>
 <?php
      } else if ( $monitor->Type() == 'File' ) {
 ?>
-          <tr><td><?php echo translate('SourcePath') ?></td><td><input type="text" name="newMonitor[Path]" value="<?php echo validHtmlStr($monitor->Path()) ?>"/></td></tr>
+          <tr><td class="text-right pr-3"><?php echo translate('SourcePath') ?></td><td><input type="text" name="newMonitor[Path]" value="<?php echo validHtmlStr($monitor->Path()) ?>"/></td></tr>
 <?php
      } elseif ( $monitor->Type() == 'cURL' ) {
 ?>
-          <tr><td><?php echo 'URL' ?></td><td><input type="text" name="newMonitor[Path]" value="<?php echo validHtmlStr($monitor->Path()) ?>"/></td></tr>
-          <tr><td><?php echo 'Username' ?></td><td><input type="text" name="newMonitor[User]" value="<?php echo validHtmlStr($monitor->User()) ?>"/></td></tr>
-          <tr><td><?php echo 'Password' ?></td><td><input type="text" name="newMonitor[Pass]" value="<?php echo validHtmlStr($monitor->Pass()) ?>"/></td></tr>
+          <tr><td class="text-right pr-3"><?php echo 'URL' ?></td><td><input type="text" name="newMonitor[Path]" value="<?php echo validHtmlStr($monitor->Path()) ?>"/></td></tr>
+          <tr><td class="text-right pr-3"><?php echo 'Username' ?></td><td><input type="text" name="newMonitor[User]" value="<?php echo validHtmlStr($monitor->User()) ?>"/></td></tr>
+          <tr><td class="text-right pr-3"><?php echo 'Password' ?></td><td><input type="text" name="newMonitor[Pass]" value="<?php echo validHtmlStr($monitor->Pass()) ?>"/></td></tr>
 <?php
      } elseif ( $monitor->Type() == 'WebSite' ) {
 ?>
          <tr>
-            <td><?php echo translate('WebSiteUrl') ?></td>
+            <td class="text-right pr-3"><?php echo translate('WebSiteUrl') ?></td>
            <td><input type="text" name="newMonitor[Path]" value="<?php echo validHtmlStr($monitor->Path()) ?>"/></td>
          </tr>
          <tr>
@@ -900,29 +904,29 @@ include('_monitor_source_nvsocket.php');
            <td><input type="number" name="newMonitor[Width]" value="<?php echo validHtmlStr($monitor->Width()) ?>" min="1"/></td>
          </tr>
          <tr>
-            <td><?php echo translate('Height') ?> (<?php echo translate('Pixels') ?>)</td>
+            <td class="text-right pr-3"><?php echo translate('Height') ?> (<?php echo translate('Pixels') ?>)</td>
            <td><input type="number" name="newMonitor[Height]" value="<?php echo validHtmlStr($monitor->Height()) ?>" min="1"/></td>
          </tr>
          <tr>
-            <td><?php echo 'Web Site Refresh (Optional)' ?></td>
+            <td class="text-right pr-3"<?php echo 'Web Site Refresh (Optional)' ?></td>
            <td><input type="number" name="newMonitor[Refresh]" value="<?php echo validHtmlStr($monitor->Refresh()) ?>" min="1"/></td>
          </tr>
 <?php
      } else if ( $monitor->Type() == 'Ffmpeg' || $monitor->Type() == 'Libvlc' ) {
 ?>
          <tr class="SourcePath">
-            <td><?php echo translate('SourcePath') ?></td>
+            <td class="text-right pr-3"><?php echo translate('SourcePath') ?></td>
            <td><input type="text" name="newMonitor[Path]" value="<?php echo validHtmlStr($monitor->Path()) ?>" /></td>
          </tr>
          <tr>
-            <td><?php
+            <td class="text-right pr-3"><?php
 echo translate('RemoteMethod');
 echo makePopupLink('?view=optionhelp&amp;option=OPTIONS_RTSPTrans', 'zmOptionHelp', 'optionhelp', '?' );
 ?>)</td>
            <td><?php echo htmlSelect('newMonitor[Method]', $rtspFFMpegMethods, $monitor->Method()) ?></td>
          </tr>
          <tr class="SourceOptions">
-            <td><?php echo translate('Options') ?>&nbsp;(<?php echo makePopupLink('?view=optionhelp&amp;option=OPTIONS_'.strtoupper($monitor->Type()), 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
+            <td class="text-right pr-3"><?php echo translate('Options') ?>&nbsp;(<?php echo makePopupLink('?view=optionhelp&amp;option=OPTIONS_'.strtoupper($monitor->Type()), 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
            <td><input type="text" name="newMonitor[Options]" value="<?php echo validHtmlStr($monitor->Options()) ?>"/></td>
          </tr>
 <?php
@@ -930,13 +934,13 @@ include('_monitor_source_nvsocket.php');
      if ( $monitor->Type() == 'Ffmpeg' ) {
 ?>
          <tr class="DecoderHWAccelName">
-            <td><?php echo translate('DecoderHWAccelName') ?>
+            <td class="text-right pr-3"><?php echo translate('DecoderHWAccelName') ?>
                (<?php echo makePopupLink('?view=optionhelp&amp;option=OPTIONS_DECODERHWACCELNAME', 'zmOptionHelp', 'optionhelp', '?') ?>)
            </td>
            <td><input type="text" name="newMonitor[DecoderHWAccelName]" value="<?php echo validHtmlStr($monitor->DecoderHWAccelName()) ?>"/></td>
          </tr>
          <tr class="DecoderHWAccelDevice">
-            <td><?php echo translate('DecoderHWAccelDevice') ?>
+            <td class="text-right pr-3"><?php echo translate('DecoderHWAccelDevice') ?>
                (<?php echo makePopupLink('?view=optionhelp&amp;option=OPTIONS_DECODERHWACCELDEVICE', 'zmOptionHelp', 'optionhelp', '?') ?>)
            </td>
            <td><input type="text" name="newMonitor[DecoderHWAccelDevice]" value="<?php echo validHtmlStr($monitor->DecoderHWAccelDevice()) ?>"/></td>
@@ -946,11 +950,11 @@ include('_monitor_source_nvsocket.php');
      if ( $monitor->Type() != 'NVSocket' && $monitor->Type() != 'WebSite' ) {
 ?>
        <tr>
-          <td><?php echo translate('TargetColorspace') ?></td>
+          <td class="text-right pr-3"><?php echo translate('TargetColorspace') ?></td>
          <td><?php echo htmlSelect('newMonitor[Colours]', $Colours, $monitor->Colours()) ?></td>
        </tr>
        <tr>
-          <td><?php echo translate('CaptureResolution') ?> (<?php echo translate('Pixels') ?>)</td>
+          <td class="text-right pr-3"><?php echo translate('CaptureResolution') ?> (<?php echo translate('Pixels') ?>)</td>
          <td>
            <input type="number" name="newMonitor[Width]" value="<?php echo validHtmlStr($monitor->Width()) ?>" min="1"/>
            <input type="number" name="newMonitor[Height]" value="<?php echo validHtmlStr($monitor->Height()) ?>" min="1"/>
@@ -981,11 +985,11 @@ include('_monitor_source_nvsocket.php');
          </td>
        </tr>
        <tr>
-          <td><?php echo translate('PreserveAspect') ?></td>
+          <td class="text-right pr-3"><?php echo translate('PreserveAspect') ?></td>
          <td><input type="checkbox" name="preserveAspectRatio" value="1"/></td>
        </tr>
        <tr>
-          <td><?php echo translate('Orientation') ?></td>
+          <td class="text-right pr-3"><?php echo translate('Orientation') ?></td>
          <td><?php echo htmlselect('newMonitor[Orientation]', $orientations, $monitor->Orientation());?></td>
        </tr>
 <?php
@@ -993,14 +997,14 @@ include('_monitor_source_nvsocket.php');
      if ( $monitor->Type() == 'Local' ) {
 ?>
            <tr>
-              <td><?php echo translate('Deinterlacing') ?></td>
+              <td class="text-right pr-3"><?php echo translate('Deinterlacing') ?></td>
              <td><?php echo htmlselect('newMonitor[Deinterlacing]', $deinterlaceopts_v4l2, $monitor->Deinterlacing())?></td>
            </tr>
 <?php
        } else if ( $monitor->Type() != 'WebSite' ) {
 ?>
            <tr>
-              <td><?php echo translate('Deinterlacing') ?></td>
+              <td class="text-right pr-3"><?php echo translate('Deinterlacing') ?></td>
              <td><?php echo htmlselect('newMonitor[Deinterlacing]', $deinterlaceopts, $monitor->Deinterlacing())?></td>
            </tr>
 <?php
@@ -1008,7 +1012,7 @@ include('_monitor_source_nvsocket.php');
        if ( $monitor->Type() == 'Remote' ) {
          ?>
            <tr id="RTSPDescribe"<?php if ( $monitor->Protocol()!= 'rtsp' ) { echo ' style="display:none;"'; } ?>>
-              <td><?php echo translate('RTSPDescribe') ?>&nbsp;(<?php echo makePopupLink( '?view=optionhelp&amp;option=OPTIONS_RTSPDESCRIBE', 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
+              <td class="text-right pr-3"><?php echo translate('RTSPDescribe') ?>&nbsp;(<?php echo makePopupLink( '?view=optionhelp&amp;option=OPTIONS_RTSPDESCRIBE', 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
              <td><input type="checkbox" name="newMonitor[RTSPDescribe]" value="1"<?php if ( $monitor->RTSPDescribe() ) { ?> checked="checked"<?php } ?>/></td>
            </tr>
 <?php
@@ -1018,7 +1022,7 @@ include('_monitor_source_nvsocket.php');
  case 'storage' :
 ?>
          <tr>
-            <td><?php echo translate('StorageArea') ?></td>
+            <td class="text-right pr-3"><?php echo translate('StorageArea') ?></td>
            <td>
 <?php
      $storage_areas = array(0=>'Default');
@@ -1030,7 +1034,7 @@ include('_monitor_source_nvsocket.php');
            </td>
          </tr>
          <tr>
-            <td><?php echo translate('SaveJPEGs') ?></td>
+            <td class="text-right pr-3"><?php echo translate('SaveJPEGs') ?></td>
            <td>
 <?php
      $savejpegopts = array(
@@ -1043,7 +1047,7 @@ include('_monitor_source_nvsocket.php');
 ?>
             </td>
            </tr>
-            <tr><td><?php echo translate('VideoWriter') ?></td><td>
+            <tr><td class="text-right pr-3"><?php echo translate('VideoWriter') ?></td><td>
 <?php
 	$videowriteropts = array(
 			0 => 'Disabled',
@@ -1060,12 +1064,12 @@ include('_monitor_source_nvsocket.php');
 ?>
            </td></tr>
            <tr>
-              <td><?php echo translate('OptionalEncoderParam') ?>&nbsp;(<?php echo makePopupLink('?view=optionhelp&amp;option=OPTIONS_ENCODER_PARAMETERS', 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
+              <td class="text-right pr-3"><?php echo translate('OptionalEncoderParam') ?>&nbsp;(<?php echo makePopupLink('?view=optionhelp&amp;option=OPTIONS_ENCODER_PARAMETERS', 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
              <td>
              <textarea name="newMonitor[EncoderParameters]" rows="<?php echo count(explode("\n", $monitor->EncoderParameters())); ?>"><?php echo validHtmlStr($monitor->EncoderParameters()) ?></textarea>
              </td>
            </tr>
-            <tr><td><?php echo translate('RecordAudio') ?></td><td>
+            <tr><td class="text-right pr-3"><?php echo translate('RecordAudio') ?></td><td>
 <?php if ( $monitor->Type() == 'Ffmpeg' ) { ?>
              <input type="checkbox" name="newMonitor[RecordAudio]" value="1"<?php if ( $monitor->RecordAudio() ) { ?> checked="checked"<?php } ?>/>
 <?php } else { ?>
@@ -1080,19 +1084,19 @@ include('_monitor_source_nvsocket.php');
    {
 ?>
            <tr>
-              <td><?php echo translate('TimestampLabelFormat') ?></td>
+              <td class="text-right pr-3"><?php echo translate('TimestampLabelFormat') ?></td>
              <td><input type="text" name="newMonitor[LabelFormat]" value="<?php echo validHtmlStr($monitor->LabelFormat()) ?>"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('TimestampLabelX') ?></td>
+              <td class="text-right pr-3"><?php echo translate('TimestampLabelX') ?></td>
              <td><input type="number" name="newMonitor[LabelX]" value="<?php echo validHtmlStr($monitor->LabelX()) ?>" min="1"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('TimestampLabelY') ?></td>
+              <td class="text-right pr-3"><?php echo translate('TimestampLabelY') ?></td>
              <td><input type="number" name="newMonitor[LabelY]" value="<?php echo validHtmlStr($monitor->LabelY()) ?>" min="1"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('TimestampLabelSize') ?></td>
+              <td class="text-right pr-3"><?php echo translate('TimestampLabelSize') ?></td>
              <td><?php echo htmlselect('newMonitor[LabelSize]', $label_size, $monitor->LabelSize()) ?></td>
            </tr>
 <?php
@@ -1102,27 +1106,27 @@ include('_monitor_source_nvsocket.php');
    {
 ?>
            <tr>
-              <td><?php echo translate('ImageBufferSize') ?></td>
+              <td class="text-right pr-3"><?php echo translate('ImageBufferSize') ?></td>
              <td><input type="number" name="newMonitor[ImageBufferCount]" value="<?php echo validHtmlStr($monitor->ImageBufferCount()) ?>" min="1"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('WarmupFrames') ?></td>
+              <td class="text-right pr-3"><?php echo translate('WarmupFrames') ?></td>
              <td><input type="number" name="newMonitor[WarmupCount]" value="<?php echo validHtmlStr($monitor->WarmupCount()) ?>" min="0"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('PreEventImageBuffer') ?></td>
+              <td class="text-right pr-3"><?php echo translate('PreEventImageBuffer') ?></td>
              <td><input type="number" name="newMonitor[PreEventCount]" value="<?php echo validHtmlStr($monitor->PreEventCount()) ?>" min="0"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('PostEventImageBuffer') ?></td>
+              <td class="text-right pr-3"><?php echo translate('PostEventImageBuffer') ?></td>
              <td><input type="number" name="newMonitor[PostEventCount]" value="<?php echo validHtmlStr($monitor->PostEventCount()) ?>" min="0"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('StreamReplayBuffer') ?></td>
+              <td class="text-right pr-3"><?php echo translate('StreamReplayBuffer') ?></td>
              <td><input type="number" name="newMonitor[StreamReplayBuffer]" value="<?php echo validHtmlStr($monitor->StreamReplayBuffer()) ?>" min="0"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('AlarmFrameCount') ?></td>
+              <td class="text-right pr-3"><?php echo translate('AlarmFrameCount') ?></td>
              <td><input type="number" name="newMonitor[AlarmFrameCount]" value="<?php echo validHtmlStr($monitor->AlarmFrameCount()) ?>" min="1"/></td>
            </tr>
 <?php
@@ -1132,11 +1136,11 @@ include('_monitor_source_nvsocket.php');
    {
 ?>
            <tr>
-              <td><?php echo translate('Controllable') ?></td>
+              <td class="text-right pr-3"><?php echo translate('Controllable') ?></td>
              <td><input type="checkbox" name="newMonitor[Controllable]" value="1"<?php if ( $monitor->Controllable() ) { ?> checked="checked"<?php } ?>/></td>
            </tr>
            <tr>
-              <td><?php echo translate('ControlType') ?></td>
+              <td class="text-right pr-3"><?php echo translate('ControlType') ?></td>
              <td><?php echo htmlSelect('newMonitor[ControlId]', $controlTypes, $monitor->ControlId());
 if ( canEdit('Control') ) {
  echo '&nbsp;'.makePopupLink('?view=controlcaps', 'zmControlCaps', 'controlcaps', translate('Edit'));
@@ -1144,27 +1148,27 @@ if ( canEdit('Control') ) {
 ?></td>
            </tr>
            <tr>
-              <td><?php echo translate('ControlDevice') ?></td>
+              <td class="text-right pr-3"><?php echo translate('ControlDevice') ?></td>
              <td><input type="text" name="newMonitor[ControlDevice]" value="<?php echo validHtmlStr($monitor->ControlDevice()) ?>"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('ControlAddress') ?></td>
+              <td class="text-right pr-3"><?php echo translate('ControlAddress') ?></td>
              <td><input type="text" name="newMonitor[ControlAddress]" value="<?php echo validHtmlStr($monitor->ControlAddress()) ? : 'user:port@ip' ?>"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('AutoStopTimeout') ?></td>
+              <td class="text-right pr-3"><?php echo translate('AutoStopTimeout') ?></td>
              <td><input type="number" name="newMonitor[AutoStopTimeout]" value="<?php echo validHtmlStr($monitor->AutoStopTimeout()) ?>" min="0" step="any"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('TrackMotion') ?></td>
+              <td class="text-right pr-3"><?php echo translate('TrackMotion') ?></td>
              <td><input type="checkbox" name="newMonitor[TrackMotion]" value="1"<?php if ( $monitor->TrackMotion() ) { ?> checked="checked"<?php } ?>/></td>
            </tr>
            <tr>
-              <td><?php echo translate('TrackDelay') ?></td>
+              <td class="text-right pr-3"><?php echo translate('TrackDelay') ?></td>
              <td><input type="number" name="newMonitor[TrackDelay]" value="<?php echo validHtmlStr($monitor->TrackDelay()) ?>" min="0" step="any"/></td>
            </tr>
            <tr>
-              <td><?php echo translate('ReturnLocation') ?></td>
+              <td class="text-right pr-3"><?php echo translate('ReturnLocation') ?></td>
              <td><?php
      $return_options = array(
          '-1' => translate('None'),
@@ -1174,7 +1178,7 @@ if ( canEdit('Control') ) {
 echo htmlSelect('newMonitor[ReturnLocation]', $return_options, $monitor->ReturnLocation()); ?></td>
            </tr>
            <tr>
-              <td><?php echo translate('ReturnDelay') ?></td>
+              <td class="text-right pr-3"><?php echo translate('ReturnDelay') ?></td>
              <td><input type="number" name="newMonitor[ReturnDelay]" value="<?php echo validHtmlStr($monitor->ReturnDelay()) ?>" min="0" step="any"/></td>
            </tr>
 <?php
@@ -1183,9 +1187,9 @@ echo htmlSelect('newMonitor[ReturnLocation]', $return_options, $monitor->ReturnL
  case 'x10' :
    {
 ?>
-            <tr><td><?php echo translate('X10ActivationString') ?></td><td><input type="text" name="newX10Monitor[Activation]" value="<?php echo validHtmlStr($newX10Monitor['Activation']) ?>" size="20"/></td></tr>
-            <tr><td><?php echo translate('X10InputAlarmString') ?></td><td><input type="text" name="newX10Monitor[AlarmInput]" value="<?php echo validHtmlStr($newX10Monitor['AlarmInput']) ?>" size="20"/></td></tr>
-            <tr><td><?php echo translate('X10OutputAlarmString') ?></td><td><input type="text" name="newX10Monitor[AlarmOutput]" value="<?php echo validHtmlStr($newX10Monitor['AlarmOutput']) ?>" size="20"/></td></tr>
+            <tr><td class="text-right pr-3"><?php echo translate('X10ActivationString') ?></td><td><input type="text" name="newX10Monitor[Activation]" value="<?php echo validHtmlStr($newX10Monitor['Activation']) ?>" size="20"/></td></tr>
+            <tr><td class="text-right pr-3"><?php echo translate('X10InputAlarmString') ?></td><td><input type="text" name="newX10Monitor[AlarmInput]" value="<?php echo validHtmlStr($newX10Monitor['AlarmInput']) ?>" size="20"/></td></tr>
+            <tr><td class="text-right pr-3"><?php echo translate('X10OutputAlarmString') ?></td><td><input type="text" name="newX10Monitor[AlarmOutput]" value="<?php echo validHtmlStr($newX10Monitor['AlarmOutput']) ?>" size="20"/></td></tr>
 <?php
      break;
    }
@@ -1193,77 +1197,77 @@ echo htmlSelect('newMonitor[ReturnLocation]', $return_options, $monitor->ReturnL
    {
 ?>
        <tr>
-          <td><?php echo translate('EventPrefix') ?></td>
+          <td class="text-right pr-3"><?php echo translate('EventPrefix') ?></td>
          <td><input type="text" name="newMonitor[EventPrefix]" value="<?php echo validHtmlStr($monitor->EventPrefix()) ?>"/></td>
        </tr>
        <tr>
-          <td><?php echo translate('Sectionlength') ?></td>
+          <td class="text-right pr-3"><?php echo translate('Sectionlength') ?></td>
          <td>
            <input type="number" name="newMonitor[SectionLength]" value="<?php echo validHtmlStr($monitor->SectionLength()) ?>" min="0"/>
            <?php echo translate('seconds')?>
          </td>
        </tr>
        <tr>
-          <td><?php echo translate('MinSectionlength') ?></td>
+          <td class="text-right pr-3"><?php echo translate('MinSectionlength') ?></td>
          <td>
            <input type="number" name="newMonitor[MinSectionLength]" value="<?php echo validHtmlStr($monitor->MinSectionLength()) ?>" min="0"/>
            <?php echo translate('seconds')?>
          </td>
        </tr>
        <tr>
-          <td><?php echo translate('FrameSkip') ?></td>
+          <td class="text-right pr-3"><?php echo translate('FrameSkip') ?></td>
          <td>
            <input type="number" name="newMonitor[FrameSkip]" value="<?php echo validHtmlStr($monitor->FrameSkip()) ?>" min="0"/>
            <?php echo translate('frames')?>
          </td>
        </tr>
        <tr>
-          <td><?php echo translate('MotionFrameSkip') ?></td>
+          <td class="text-right pr-3"><?php echo translate('MotionFrameSkip') ?></td>
          <td>
            <input type="number" name="newMonitor[MotionFrameSkip]" value="<?php echo validHtmlStr($monitor->MotionFrameSkip()) ?>" min="0"/>
            <?php echo translate('frames')?>
          </td>
        </tr>
        <tr>
-          <td><?php echo translate('AnalysisUpdateDelay') ?></td>
+          <td class="text-right pr-3"><?php echo translate('AnalysisUpdateDelay') ?></td>
          <td>
            <input type="number" name="newMonitor[AnalysisUpdateDelay]" value="<?php echo validHtmlStr($monitor->AnalysisUpdateDelay()) ?>" min="0"/>
            <?php echo translate('seconds')?>
          </td></tr>
        <tr>
-          <td><?php echo translate('FPSReportInterval') ?></td>
+          <td class="text-right pr-3"<?php echo translate('FPSReportInterval') ?></td>
          <td>
            <input type="number" name="newMonitor[FPSReportInterval]" value="<?php echo validHtmlStr($monitor->FPSReportInterval()) ?>" min="0"/>
            <?php echo translate('frames')?>
          </td>
        </tr>
        <tr>
-          <td><?php echo translate('DefaultRate') ?></td>
+          <td class="text-right pr-3"><?php echo translate('DefaultRate') ?></td>
          <td><?php echo htmlSelect('newMonitor[DefaultRate]', $rates, $monitor->DefaultRate()); ?></td>
        </tr>
        <tr>
-          <td><?php echo translate('DefaultScale') ?></td>
+          <td class="text-right pr-3"><?php echo translate('DefaultScale') ?></td>
          <td><?php echo htmlSelect('newMonitor[DefaultScale]', $scales, $monitor->DefaultScale()); ?></td>
        </tr>
        <tr>
-          <td><?php echo translate('DefaultCodec') ?></td>
+          <td class="text-right pr-3"><?php echo translate('DefaultCodec') ?></td>
          <td><?php echo htmlSelect('newMonitor[DefaultCodec]', $codecs, $monitor->DefaultCodec()); ?></td>
        </tr>
        <tr>
-          <td><?php echo translate('SignalCheckPoints') ?></td>
+          <td class="text-right pr-3"><?php echo translate('SignalCheckPoints') ?></td>
          <td>
            <input type="number" name="newMonitor[SignalCheckPoints]" value="<?php echo validInt($monitor->SignalCheckPoints()) ?>" min="0"/>
          </td>
        </tr>
        <tr>
-          <td><?php echo translate('SignalCheckColour') ?></td>
+          <td class="text-right pr-3"><?php echo translate('SignalCheckColour') ?></td>
          <td>
            <input type="color" name="newMonitor[SignalCheckColour]" value="<?php echo validHtmlStr($monitor->SignalCheckColour()) ?>"/>
            <span id="SignalCheckSwatch" class="swatch" style="background-color: <?php echo validHtmlStr($monitor->SignalCheckColour()); ?>;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
          </td>
        </tr>
        <tr>
-          <td><?php echo translate('WebColour') ?></td>
+          <td class="text-right pr-3"><?php echo translate('WebColour') ?></td>
          <td>
            <input type="color" name="newMonitor[WebColour]" value="<?php echo validHtmlStr($monitor->WebColour()) ?>"/>
            <span id="WebSwatch" class="swatch" style="background-color: <?php echo validHtmlStr($monitor->WebColour()) ?>;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
@@ -1272,7 +1276,7 @@ echo htmlSelect('newMonitor[ReturnLocation]', $return_options, $monitor->ReturnL
          </td>
        </tr>
        <tr>
-          <td><?php echo translate('Exif') ?>&nbsp;(<?php echo makePopupLink( '?view=optionhelp&amp;option=OPTIONS_EXIF', 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
+          <td class="text-right pr-3"><?php echo translate('Exif') ?>&nbsp;(<?php echo makePopupLink( '?view=optionhelp&amp;option=OPTIONS_EXIF', 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
          <td><input type="checkbox" name="newMonitor[Exif]" value="1"<?php if ( $monitor->Exif() ) { ?> checked="checked"<?php } ?>/></td>
        </tr>
 <?php
@@ -1282,12 +1286,14 @@ echo htmlSelect('newMonitor[ReturnLocation]', $return_options, $monitor->ReturnL
 ?>
          </tbody>
        </table>
-        <div id="contentButtons">
+        <div id="contentButtons" class="pr-3">
          <button type="submit" value="Save"<?php echo canEdit('Monitors') ? '' : ' disabled="disabled"' ?>><?php echo translate('Save') ?></button>
-          <button type="button" data-on-click="closeWindow"><?php echo translate('Cancel') ?></button>
+          <button type="button" id="cancelBtn"><?php echo translate('Cancel') ?></button>
        </div>
      </form>
    </div>
    </div>
+    </div>
+    </div>
  </body>
 </html>