From ef6c675c6a7caa9f70c3dcb578d447b986c42fd5 Mon Sep 17 00:00:00 2001 From: Isaac Connor Date: Mon, 24 Apr 2017 11:11:44 -0400 Subject: [PATCH 1/3] work in progress, rough in adding the svg zones to montage --- web/includes/functions.php | 7 ++ web/skins/classic/css/flat/views/montage.css | 24 +++++++ web/skins/classic/views/montage.php | 72 ++++++++++++++++---- 3 files changed, 90 insertions(+), 13 deletions(-) diff --git a/web/includes/functions.php b/web/includes/functions.php index ccf87e8e2..d3d266ce7 100644 --- a/web/includes/functions.php +++ b/web/includes/functions.php @@ -1774,6 +1774,13 @@ function limitPoints( &$points, $min_x, $min_y, $max_x, $max_y ) { } // end foreach point } // end function limitPoints( $points, $min_x, $min_y, $max_x, $max_y ) +function scalePoints( &$points, $scale ) { + foreach ( $points as &$point ) { + $point['x'] = reScale( $point['x'], $scale ); + $point['y'] = reScale( $point['y'], $scale ); + } +} + function getLanguages() { $langs = array(); foreach ( glob("lang/*_*.php") as $file ) { diff --git a/web/skins/classic/css/flat/views/montage.css b/web/skins/classic/css/flat/views/montage.css index ae8e4bee7..a9f6f2723 100644 --- a/web/skins/classic/css/flat/views/montage.css +++ b/web/skins/classic/css/flat/views/montage.css @@ -28,6 +28,7 @@ #monitors .imageFeed { text-align: center; vertical-align: middle; + position: relative; } #monitors .imageFeed img { @@ -53,7 +54,30 @@ margin: 2px auto; text-align: center; border: 0; + min-height: 16px; } #monitors .alert .monitorState { border: 0; } + +.zones polygon { + fill-opacity: 0.25; + stroke-width: 2px; +} +.Active { + stroke: #ff0000; + fill: #ff0000; +} +.Inclusive { + stroke: #FFA500; + fill: #FFA500; +} +.Exclusive { + stroke: #800080; + fill: #800080; +} +.Preclusive { + stroke: #0000FF; + fill: #0000FF; +} + diff --git a/web/skins/classic/views/montage.php b/web/skins/classic/views/montage.php index 32c8e0f93..b7ef8c6f3 100644 --- a/web/skins/classic/views/montage.php +++ b/web/skins/classic/views/montage.php @@ -19,8 +19,8 @@ // if ( !canView( 'Stream' ) ) { - $view = 'error'; - return; + $view = 'error'; + return; } require_once( 'includes/Monitor.php' ); @@ -34,6 +34,7 @@ if ( !empty($_REQUEST['group']) ) { } $showControl = false; +$showZones = true; $monitors = array(); $widths = array( '' => 'auto', @@ -42,20 +43,20 @@ $widths = array( 352 => 352, 640 => 640, 1280 => 1280 ); + $heights = array( '' => 'auto', 240 => 240, 480 => 480, ); - - foreach( dbFetchAll( $sql ) as $row ) { if ( !visibleMonitor( $row['Id'] ) ) { continue; } - $scale = null; + $width_scale = $height_scale = $scale = null; + if ( isset( $_REQUEST['scale'] ) ) $scale = validInt($_REQUEST['scale']); else if ( isset( $_COOKIE['zmMontageScale'] ) ) @@ -76,20 +77,20 @@ foreach( dbFetchAll( $sql ) as $row ) { if ( ! isset( $heights[$row['Height']] ) ) { $heights[$row['Height']] = $row['Height']; } -} +} # end foreach Monitor $focusWindow = true; $layouts = array( - 'montage_freeform.css' => translate('MtgDefault'), - 'montage_2wide.css' => translate('Mtg2widgrd'), - 'montage_3wide.css' => translate('Mtg3widgrd'), - 'montage_4wide.css' => translate('Mtg4widgrd'), - 'montage_3wide50enlarge.css' => translate('Mtg3widgrx'), + 'montage_freeform.css' => translate('MtgDefault'), + 'montage_2wide.css' => translate('Mtg2widgrd'), + 'montage_3wide.css' => translate('Mtg3widgrd'), + 'montage_4wide.css' => translate('Mtg4widgrd'), + 'montage_3wide50enlarge.css' => translate('Mtg3widgrx'), ); if ( isset($_COOKIE['zmMontageLayout']) ) - $layout = $_COOKIE['zmMontageLayout']; + $layout = $_COOKIE['zmMontageLayout']; $options = array(); if ( isset($_COOKIE['zmMontageWidth']) and $_COOKIE['zmMontageWidth'] ) @@ -135,7 +136,52 @@ foreach ( $monitors as $monitor ) {
- + Width(); + $height = $monitor->Height() * $scale; + } else if ( $options['height'] and ! $options['width'] ) { + + $scale = $options['height'] / $monitor->Height(); + $width = $monitor->Width() * $scale; + } + + $zones = array(); + foreach( dbFetchAll( 'SELECT * FROM Zones WHERE MonitorId=? ORDER BY Area DESC', NULL, array($monitor->Id()) ) as $row ) { + $row['Points'] = coordsToPoints( $row['Coords'] ); + + if ( $scale ) { +Debug(" Scale: $scale" ); + limitPoints( $row['Points'], 0, 0, $monitor->Width(), $monitor->Height() ); + scalePoints( $row['Points'], $scale ); + } else { + limitPoints( $row['Points'], 0, 0, + ( $width ? $width-1 : $monitor->Width()-1 ), + ( $height ? $height-1 : $monitor->Height()-1 ) + ); + } + $row['Coords'] = pointsToCoords( $row['Points'] ); + $row['AreaCoords'] = preg_replace( '/\s+/', ',', $row['Coords'] ); + $zones[] = $row; + } + +?> + + + + + + Sorry, your browser does not support inline SVG + +
Date: Mon, 24 Apr 2017 11:11:54 -0400 Subject: [PATCH 2/3] work in progress, rough in adding the svg zones to montage --- web/skins/classic/includes/functions.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/skins/classic/includes/functions.php b/web/skins/classic/includes/functions.php index 565f6ed6e..a4ebbb176 100644 --- a/web/skins/classic/includes/functions.php +++ b/web/skins/classic/includes/functions.php @@ -98,10 +98,10 @@ var $j = jQuery.noConflict(); - - + + - + Date: Mon, 24 Apr 2017 14:47:30 -0400 Subject: [PATCH 3/3] fix scaling, zones now work. Add a Show/Hide Zones at the top --- .../classic/css/classic/views/montage.css | 23 +++++++- web/skins/classic/css/dark/views/montage.css | 23 +++++++- web/skins/classic/css/flat/views/montage.css | 4 +- web/skins/classic/views/montage.php | 55 +++++++++++++------ 4 files changed, 83 insertions(+), 22 deletions(-) diff --git a/web/skins/classic/css/classic/views/montage.css b/web/skins/classic/css/classic/views/montage.css index a59f75d09..55d4da861 100644 --- a/web/skins/classic/css/classic/views/montage.css +++ b/web/skins/classic/css/classic/views/montage.css @@ -26,7 +26,8 @@ vertical-align: middle; } -#monitors .imageFeed img { +#monitors .imageFeed img , +#monitors .imageFeed svg { border: 2px solid #ffffff; } @@ -50,3 +51,23 @@ #monitors .alert .monitorState { border: 0; } +.zones polygon { + fill-opacity: 0.25; +} +.Active { + stroke: #ff0000; + fill: #ff0000; +} +.Inclusive { + stroke: #FFA500; + fill: #FFA500; +} +.Exclusive { + stroke: #800080; + fill: #800080; +} +.Preclusive { + stroke: #0000FF; + fill: #0000FF; +} + diff --git a/web/skins/classic/css/dark/views/montage.css b/web/skins/classic/css/dark/views/montage.css index 0fb50770d..db607522d 100644 --- a/web/skins/classic/css/dark/views/montage.css +++ b/web/skins/classic/css/dark/views/montage.css @@ -27,7 +27,8 @@ vertical-align: middle; } -#monitors .imageFeed img { +#monitors .imageFeed img , +#monitors .imageFeed svg { border: 2px solid #999999; } @@ -52,3 +53,23 @@ border: 0; } +.zones polygon { + fill-opacity: 0.25; +} +.Active { + stroke: #ff0000; + fill: #ff0000; +} +.Inclusive { + stroke: #FFA500; + fill: #FFA500; +} +.Exclusive { + stroke: #800080; + fill: #800080; +} +.Preclusive { + stroke: #0000FF; + fill: #0000FF; +} + diff --git a/web/skins/classic/css/flat/views/montage.css b/web/skins/classic/css/flat/views/montage.css index a9f6f2723..627c535d1 100644 --- a/web/skins/classic/css/flat/views/montage.css +++ b/web/skins/classic/css/flat/views/montage.css @@ -31,7 +31,8 @@ position: relative; } -#monitors .imageFeed img { +#monitors .imageFeed img, +#monitors .imageFeed svg { border: 2px solid #ffffff; margin: 0; padding: 0; @@ -62,7 +63,6 @@ .zones polygon { fill-opacity: 0.25; - stroke-width: 2px; } .Active { stroke: #ff0000; diff --git a/web/skins/classic/views/montage.php b/web/skins/classic/views/montage.php index b7ef8c6f3..8ce638d81 100644 --- a/web/skins/classic/views/montage.php +++ b/web/skins/classic/views/montage.php @@ -34,7 +34,12 @@ if ( !empty($_REQUEST['group']) ) { } $showControl = false; -$showZones = true; +$showZones = false; +if ( isset( $_REQUEST['showZones'] ) ) { + if ( $_REQUEST['showZones'] == 1 ) { + $showZones = true; + } +} $monitors = array(); $widths = array( '' => 'auto', @@ -50,20 +55,18 @@ $heights = array( 480 => 480, ); +$width_scale = $height_scale = $scale = null; + +if ( isset( $_REQUEST['scale'] ) ) + $scale = validInt($_REQUEST['scale']); +else if ( isset( $_COOKIE['zmMontageScale'] ) ) + $scale = $_COOKIE['zmMontageScale']; + foreach( dbFetchAll( $sql ) as $row ) { if ( !visibleMonitor( $row['Id'] ) ) { continue; } - $width_scale = $height_scale = $scale = null; - - if ( isset( $_REQUEST['scale'] ) ) - $scale = validInt($_REQUEST['scale']); - else if ( isset( $_COOKIE['zmMontageScale'] ) ) - $scale = $_COOKIE['zmMontageScale']; - #else - #$scale = reScale( SCALE_BASE, $row['DefaultScale'], ZM_WEB_DEFAULT_SCALE ); - $row['Scale'] = $scale; $row['PopupScale'] = reScale( SCALE_BASE, $row['DefaultScale'], ZM_WEB_DEFAULT_SCALE ); @@ -116,6 +119,15 @@ if ( $showControl ) { + Hide Zones + + Show Zones +
@@ -141,13 +153,21 @@ foreach ( $monitors as $monitor ) { if ( $showZones ) { $height = null; $width = null; - if ( $options['width'] and ! $options['height'] ) { - $scale = $options['width'] / $monitor->Width(); - $height = $monitor->Height() * $scale; - } else if ( $options['height'] and ! $options['width'] ) { - - $scale = $options['height'] / $monitor->Height(); + if ( $options['width'] ) { + $width = $options['width']; + if ( ! $options['height'] ) { + $scale = (int)( 100 * $options['width'] / $monitor->Width() ); + $height = reScale( $monitor->Height(), $scale ); + } + } else if ( $options['height'] ) { + $height = $options['height']; + if ( ! $options['width'] ) { + $scale = (int)( 100 * $options['height'] / $monitor->Height() ); + $width = reScale( $monitor->Width(), $scale ); + } + } else if ( $scale ) { $width = $monitor->Width() * $scale; + $height = $monitor->Height() * $scale; } $zones = array(); @@ -155,7 +175,6 @@ foreach ( $monitors as $monitor ) { $row['Points'] = coordsToPoints( $row['Coords'] ); if ( $scale ) { -Debug(" Scale: $scale" ); limitPoints( $row['Points'], 0, 0, $monitor->Width(), $monitor->Height() ); scalePoints( $row['Points'], $scale ); } else { @@ -171,7 +190,7 @@ Debug(" Scale: $scale" ); ?> - +