add edit and save layout

web/skins/classic/views/js/montage.js

@@ -13,6 +13,7 @@ function Monitor( monitorData ) {
   this.streamCmdTimer = null;
 
   this.start = function( delay ) {
+    console.log(delay);
     this.streamCmdTimer = this.streamCmdQuery.delay( delay, this );
   };
 
@@ -32,7 +33,7 @@ function Monitor( monitorData ) {
     if ( this.streamCmdTimer )
       this.streamCmdTimer = clearTimeout( this.streamCmdTimer );
 
-    var stream = $j('#liveStream'+this.id )[0];
+    var stream = $j('#liveStream'+this.id)[0];
     if ( respObj.result == 'Ok' ) {
       this.status = respObj.status;
       this.alarmState = this.status.state;
@@ -81,9 +82,10 @@ function Monitor( monitorData ) {
           // Try to reload the image stream.
           if ( stream )
             stream.src = stream.src.replace( /auth=\w+/i, 'auth='+this.status.auth );
-          console.log("Changed auth to " + this.status.auth );
+          console.log("Changed auth from " + auth_hash + " to " + this.status.auth );
+          auth_hash = this.status.auth;
         }
-      } // end if haev a new auth hash
+      } // end if have a new auth hash
     } else {
       console.error( respObj.message );
       // Try to reload the image stream.
@@ -93,7 +95,7 @@ function Monitor( monitorData ) {
       } else {
         console.log( 'No stream to reload?' );
       }
-    }
+    } // end if Ok or not
     var streamCmdTimeout = statusRefreshTimeout;
     if ( this.alarmState == STATE_ALARM || this.alarmState == STATE_ALERT )
       streamCmdTimeout = streamCmdTimeout/5;
@@ -114,11 +116,10 @@ function Monitor( monitorData ) {
 }
 
 function selectLayout( element ) {
-  layout = $(element).get('value');
+  layout = $j(element).val();
 
   if ( layout_id = parseInt(layout) ) {
     layout = layouts[layout];
-console.log("Have layout # " + layout_id);
 
     for ( var i = 0; i < monitors.length; i++ ) {
       monitor = monitors[i];
@@ -134,7 +135,6 @@ console.log("Have layout # " + layout_id);
       if ( layout.default ) {
         styles = layout.default; 
         for ( style in styles ) {
-console.log("applying " + style + ': ' + styles[style]);
           monitor_frame.css(style, styles[style]); 
         }
       } // end if default styles
@@ -142,7 +142,6 @@ console.log("applying " + style + ': ' + styles[style]);
       if ( layout[monitor.id] ) {
         styles = layout[monitor.id]; 
         for ( style in styles ) {
-console.log("applying " + style + ': ' + styles[style]);
           monitor_frame.css(style, styles[style]); 
         }
       } // end if specific monitor style
@@ -152,7 +151,7 @@ console.log("applying " + style + ': ' + styles[style]);
     return;
   }
   Cookie.write( 'zmMontageLayout', layout_id, { duration: 10*365 } );
-  if ( layout_id != 1 ) { // 'montage_freeform.css' ) {
+  if ( layouts[layout_id].Name != 'Freeform' ) { // 'montage_freeform.css' ) {
     Cookie.write( 'zmMontageScale', '', { duration: 10*365 } );
     $('scale').set('value', '' );
     $('width').set('value', '');
@@ -260,52 +259,15 @@ function changeScale() {
   Cookie.write( 'zmMontageHeight', '', { duration: 10*365 } );
 }
 
-var monitors = new Array();
+function toGrid(value) {
-function initPage() {
-  for ( var i = 0; i < monitorData.length; i++ ) {
-    monitors[i] = new Monitor( monitorData[i] );
-    var delay = Math.round( (Math.random()+0.5)*statusRefreshTimeout );
-    monitors[i].start( delay );
-  }
-  selectLayout($('layout'));
-
-    $j('#monitors .monitorFrame').draggable({
-        cursor: 'crosshair',
-        revert: 'invalid'
-    });
-    
-    function toGrid(value) {
   return Math.round(value / 80) * 80;
-    }
-    
-    $j('#monitors').droppable({
-        accept: '#monitors .monitorFrame',
-        drop: function(event, ui) {
-            //console.log(event);
-            $j(this).removeClass('border over');
-            $j(ui.draggable).detach().
-                appendTo($j(this).find('ul')).
-                draggable({
-                    containment: '.fw-content',
-                    cursor: 'help',
-                    grid: [ 80, 80 ]
-                }).
-                css({
-                    position: 'absolute', 
-                    left: toGrid(event.clientX - $j('#monitors').offset().left), 
-                    top: toGrid(event.clientY - $j('#monitors').offset().top)
-                });
-        },
-        over: function(event, elem) {
-            console.log('over');
-            $j(this).addClass('over');
-        },
-        out: function(event, elem) {
-            $j(this).removeClass('over');
-        }
-    });
 }
+
+
+// Makes monitorFrames draggable.
 function edit_layout(button) {
+  console.log("edit click");
+
   for ( var x = 0; x < monitors.length; x++ ) {
     var monitor = monitors[x];
   
@@ -318,7 +280,50 @@ function edit_layout(button) {
     monitor_frame.css('float','none');
     monitor_frame.css('position','absolute');
   } // end foreach monitor
+
+  $j('#monitors .monitorFrame').draggable({
+    cursor: 'crosshair',
+    //revert: 'invalid'
+  });
+  $j('#SaveLayout').show();
+  $j('#EditLayout').hide();
+} // end function edit_layout
+
+function save_layout(button) {
+  var form=button.form;
+  var Positions = new Array();
+  for ( var x = 0; x < monitors.length; x++ ) {
+    var monitor = monitors[x];
+    monitor_frame = $j('#monitorFrame'+monitor.id);
+
+    Positions[monitor.id] = { 
+      width: monitor_frame.css('width'),
+      height: monitor_frame.css('width'),
+      top: monitor_frame.css('top'),
+      bottom: monitor_frame.css('bottom'),
+      left: monitor_frame.css('left'),
+      right: monitor_frame.css('right'),
+      position: monitor_frame.css('position'),
+      float: monitor_frame.css('float'),
+    };
+  } // end foreach monitor
+  form.Positions.value = JSON.stringify( Positions );
+  form.submit();
+}
+function cancel_layout(button) {
+  $j('#SaveLayout').hide();
+  $j('#EditLayout').show();
 }
 
+var monitors = new Array();
+function initPage() {
+  for ( var i = 0; i < monitorData.length; i++ ) {
+    monitors[i] = new Monitor(monitorData[i]);
+    var delay = Math.round( (Math.random()+0.75)*statusRefreshTimeout );
+    console.log("delay: " + delay);
+    //monitors[i].start(delay);
+  }
+  selectLayout('#zmMontageLayout');
+}
 // Kick everything off
 window.addEvent( 'domready', initPage );

web/skins/classic/views/montage.php

@@ -59,20 +59,6 @@ if ( isset( $_REQUEST['scale'] ) ) {
 if ( ! $scale ) 
   $scale = 100;
 
-$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'),
-);
-foreach ( MontageLayout::find() as $Layout ) {
-  $layouts[$Layout->Id()] = $Layout->Name();
-}
-*/
 $layouts = MontageLayout::find(NULL, array('order'=>"lower('Name')"));
 $layoutsById = array();
 foreach ( $layouts as $l ) {
@@ -83,15 +69,23 @@ $layout = '';
 if ( isset($_COOKIE['zmMontageLayout']) )
   $layout = $_COOKIE['zmMontageLayout'];
 
+session_start();
 $options = array();
-if ( isset($_COOKIE['zmMontageWidth']) and $_COOKIE['zmMontageWidth'] )
+if ( isset($_COOKIE['zmMontageWidth']) and $_COOKIE['zmMontageWidth'] ) {
-  $options['width'] = $_COOKIE['zmMontageWidth'];
+  $_SESSION['zmMontageWidth'] = $options['width'] = $_COOKIE['zmMontageWidth'];
-else
+} elseif ( isset($_SESSION['zmMontageWidth']) and $_SESSION['zmMontageWidth'] ) {
+  $options['width'] = $_SESSION['zmMontageWidth'];
+} else
   $options['width'] = '';
+
 if ( isset($_COOKIE['zmMontageHeight']) and $_COOKIE['zmMontageHeight'] )
-  $options['height'] = $_COOKIE['zmMontageHeight'];
+  $_SESSION['zmMontageHeight'] = $options['height'] = $_COOKIE['zmMontageHeight'];
+else if ( isset($_SESSION['zmMontageHeight']) and $_SESSION['zmMontageHeight'] )
+  $options['height'] = $_SESSION['zmMontageHeight'];
 else
   $options['height'] = '';
+session_write_close();
+
 if ( $scale ) 
   $options['scale'] = $scale;
 
@@ -102,6 +96,9 @@ ob_end_clean();
 
 $monitors = array();
 foreach( $displayMonitors as &$row ) {
+  if ( $row['Function'] == 'None' )
+    continue;
+
   $row['Scale'] = $scale;
   $row['PopupScale'] = reScale( SCALE_BASE, $row['DefaultScale'], ZM_WEB_DEFAULT_SCALE );
 
@@ -143,15 +140,24 @@ if ( $showZones ) {
       </div>
       <?php echo $filterbar ?>
       <div id="sizeControl">
+        <form action="index.php?view=montage" method="post">
+          <input type="hidden" name="object" value="MontageLayout"/>
+
           <span id="widthControl"><label><?php echo translate('Width') ?>:</label><?php echo htmlSelect( 'width', $widths, $options['width'], 'changeSize(this);' ); ?></span>
           <span id="heightControl"><label><?php echo translate('Height') ?>:</label><?php echo htmlSelect( 'height', $heights, $options['height'], 'changeSize(this);' ); ?></span>
           <span id="scaleControl"><label><?php echo translate('Scale') ?>:</label><?php echo htmlSelect( 'scale', $scales, $scale, 'changeScale(this);' ); ?></span> 
           <span id="layoutControl">
             <label for="layout"><?php echo translate('Layout') ?>:</label>
-          <?php echo htmlSelect( 'layout', $layoutsById, $layout, 'selectLayout(this);' )?>
+            <?php echo htmlSelect( 'zmMontageLayout', $layoutsById, $layout, array( 'onchange'=>'selectLayout(this);', 'id'=>'zmMontageLayout') ); ?>
           </span>
-        <input type="button" value="<?php echo translate('EditLayout') ?>" onclick="edit_layout(this);"/>
+          <input type="hidden" name="Positions"/>
-        <input type="button" value="<?php echo translate('SaveLayout') ?>" onclick="save_layout(this);"/>
+          <input type="button" id="EditLayout" value="<?php echo translate('EditLayout') ?>" onclick="edit_layout(this);"/>
+          <span id="SaveLayout" style="display:none;">
+            <input type="text" name="Name" placeholder="Enter new name for layout if desired" />
+            <input type="button" name="action" value="<?php echo translate('Save') ?>" onclick="save_layout(this);"/>
+            <input type="button" value="Cancel" onclick="cancel_layout(this);"/>
+          </span>
+        </form>
       </div>
     </div>
     <div id="content">
@@ -160,7 +166,7 @@ if ( $showZones ) {
 foreach ( $monitors as $monitor ) {
   $connkey = $monitor->connKey(); // Minor hack
 ?>
-        <div id="monitorFrame<?php echo $monitor->Id() ?>" class="monitorFrame" title="<?php echo $monitor->Id() . ' ' .$monitor->Name() ?>">
+  <div id="monitorFrame<?php echo $monitor->Id() ?>" class="monitorFrame" title="<?php echo $monitor->Id() . ' ' .$monitor->Name() ?>" style="<?php echo $options['width'] ? 'width:'.$options['width'].'px;':''?>">
           <div id="monitor<?php echo $monitor->Id() ?>" class="monitor idle">
             <div id="imageFeed<?php echo $monitor->Id() ?>" class="imageFeed" onclick="createPopup( '?view=watch&amp;mid=<?php echo $monitor->Id() ?>', 'zmWatch<?php echo $monitor->Id() ?>', 'watch', <?php echo reScale( $monitor->Width(), $monitor->PopupScale() ); ?>, <?php echo reScale( $monitor->Height(), $monitor->PopupScale() ); ?> );">
             <?php 
@@ -201,16 +207,13 @@ foreach ( $monitors as $monitor ) {
                   $row['Coords'] = pointsToCoords( $row['Points'] );
                   $row['AreaCoords'] = preg_replace( '/\s+/', ',', $row['Coords'] );
                   $zones[] = $row;
-                }
+                } // end foreach Zone
-
 ?>
 
             <svg class="zones" id="zones<?php echo $monitor->Id() ?>" style="position:absolute; top: 0; left: 0; background: none; width: <?php echo $width ?>px; height: <?php echo $height ?>px;">
             <?php
             foreach( array_reverse($zones) as $zone ) {
-              ?>
+                echo '<polygon points="'. $zone['AreaCoords'] .'" class="'. $zone['Type'].'" />';
-                <polygon points="<?php echo $zone['AreaCoords'] ?>" class="<?php echo $zone['Type']?>" />
-                <?php
             } // end foreach zone
 ?>
   Sorry, your browser does not support inline SVG