add js method to track liveStream img size for zones

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

@@ -204,6 +204,11 @@ function Monitor(monitorData) {
   }
 } // end function Monitor
 
+/**
+ * called when the layoutControl select element is changed, or the page
+ * is rendered??
+ * @return null
+ */
 function selectLayout(element) {
   layout = $j(element).val();
 
@@ -265,15 +270,18 @@ function selectLayout(element) {
           // APPLET's and OBJECTS need to be re-initialized
         }
         streamImg.style.width = '100%';
+
+        updateZoneSvg(monitor, streamImg.getSize().x, streamImg.getSize().y);
       }
-      var zonesSVG = $('zones'+monitor.id);
+
-      if ( zonesSVG ) {
-        zonesSVG.style.width = '';
-      }
     } // end foreach monitor
   }
 } // end function selectLayout(element)
 
+/**
+ * called when the widthControl|heightControl select elements are changed
+ * @return null
+ */
 function changeSize() {
   var width = $('width').get('value');
   var height = $('height').get('value');
@@ -308,12 +316,12 @@ function changeSize() {
       streamImg.style.width = width ? width : null;
       streamImg.style.height = height ? height : null;
       //streamImg.style.height = '';
+
+      // not sure how the above block works... so rescale zone if img changed??
+      updateZoneSvg(monitor, streamImg.getSize().x, streamImg.getSize().y);
     }
-    var zonesSVG = $('zones'+monitor.id);
+
-    if ( zonesSVG ) {
+
-      zonesSVG.style.width = width ? width : '100%';
-      zonesSVG.style.height = height;
-    }
   }
   $('scale').set('value', '');
   Cookie.write('zmMontageScale', '', {duration: 10*365});
@@ -322,9 +330,14 @@ function changeSize() {
   selectLayout('#zmMontageLayout');
 } // end function changeSize()
 
+/**
+ * called when the scaleControl select element is changed
+ * @return null
+ */
 function changeScale() {
   var scale = $('scale').get('value');
   $('width').set('value', 'auto');
+  // console.dir($('width'));
   $('height').set('value', 'auto');
   Cookie.write('zmMontageScale', scale, {duration: 10*365});
   Cookie.write('zmMontageWidth', '', {duration: 10*365});
@@ -335,6 +348,10 @@ function changeScale() {
   }
   for ( var i = 0, length = monitors.length; i < length; i++ ) {
     var monitor = monitors[i];
+
+    // console.log("scale = "+scale);
+    // console.log("SCALE_BASE = " + SCALE_BASE);
+
     var newWidth = ( monitorData[i].width * scale ) / SCALE_BASE;
     var newHeight = ( monitorData[i].height * scale ) / SCALE_BASE;
 
@@ -367,14 +384,126 @@ function changeScale() {
       streamImg.style.width = newWidth + "px";
       streamImg.style.height = newHeight + "px";
     }
-    var zonesSVG = $('zones'+monitor.id);
+
-    if ( zonesSVG ) {
+    // console.log("monitor_frame.height = " + monitor_frame.height());
-      zonesSVG.style.width = newWidth + "px";
+    // console.log("newHeight = " + newHeight);
-      zonesSVG.style.height = newHeight + "px";
+
+    updateZoneSvg(monitor, newWidth, newHeight);
+  }
+}
+
+
+// 
+// function updateZoneSvg(monitor, monitor_frame) {
+
+/**
+ * cause the zone overlay Svg to track dims of associated monitor frame
+ * @arg monitor_frame is a jQuery element object
+ */
+function updateZoneSvg(monitor, newWidth, newHeight) {
+  console.log("calling updateZoneSvg");
+  // console.dir(monitor_frame);
+
+  // newWidth = monitor_frame.width();
+  // newHeight = monitor_frame.height();
+
+  if (!newWidth)
+    debugger;
+  if (!newHeight || newHeight < 10)
+    debugger;
+  if (!monitor)
+    monitor;
+
+  // zonesSVG is a mootools object
+  var zonesSVG = $('zones' + monitor.id);
+  if (zonesSVG) {
+
+    console.log("newWidth = " + newWidth);
+    console.log("newHeight = " + newHeight);
+    orig_scale = zonesSVG.getProperty('data-scale-orig');
+
+    //debugger;
+    //console.log("zonesSVG.style.width =" + zonesSVG.style.width);
+    zonesSVG.style.width = newWidth + "px";
+    //console.log("newWidth = " + newWidth + "px");
+    //console.log("zonesSVG.style.width = " + zonesSVG.style.width);
+    zonesSVG.style.height = newHeight + "px";
+
+    polygons = zonesSVG.getElements("polygon");
+
+    for (let index = 0; index < polygons.length; index++) {
+      const polygon = polygons[index];
+      //console.dir(polygon);
+
+      points = coordsToPoints(polygon.getProperty("data-coords-orig"));
+      //console.dir(points);
+
+      newPoints = scaleZonePoints(points,
+        newWidth / monitorData[index].width,
+        newHeight / monitorData[index].height);
+
+      //console.dir(newPoints);
+
+      //console.dir(newPoints);
+      //console.dir();
+      //console.dir(pointsToCoords(newPoints));
+
+      polygon.setProperty("points", pointsToCoords(newPoints));
+      
     }
   }
 }
 
+/**
+ * 
+ * @param {*} points 
+ * @param {*} scale 
+ */
+function scaleZonePoints(points, scalex, scaley) {
+  if (!points)
+    debugger;
+  if (!scalex)
+    debugger;
+  if (!scaley)
+    debugger;
+  // console.dir(points);
+  //debugger;
+  var newPoints = [];
+  for (let index = 0; index < points.length; index++) {
+    const point = points[index];
+    newPoints.push([point[0] * scalex, point[1] * scaley ]);
+  }
+  // console.dir(newPoints);
+  return newPoints;
+}
+
+/**
+ * convery coords string - "37,411 1246,542 1263,694 ..." to js array
+ * @param {*} coords
+ */
+function coordsToPoints(coords) {
+  var points = [];
+  points = coords.split(" ").map(function (item) {
+    return item.split(",").map(Math.round);
+  });
+  // console.dir(points);
+  return points;
+}
+
+/**
+ * convery points array to string - "37,411 1246,542 1263,694 ..."
+ * @param {*} coords
+ */
+function pointsToCoords(points) {
+  // console.dir(points);
+  var coords = [];
+  coords = points.map(function (item) {
+    return item.map(Math.round).join(",");
+  }).join(",");
+  // console.dir(coords);
+  return coords;
+}
+
 function toGrid(value) {
   return Math.round(value / 80) * 80;
 }

web/skins/classic/views/montage.php

@@ -43,6 +43,7 @@ $widths = array(
 $heights = array( 
   'auto'  => 'auto',
   '240px' => '240px',
+  '320px' => '320px',
   '480px' => '480px',
   '720px' => '720px',
   '1080px' => '1080px',
@@ -253,6 +254,9 @@ foreach ( $monitors as $monitor ) {
     $zones = array();
     foreach( dbFetchAll('SELECT * FROM Zones WHERE MonitorId=? ORDER BY Area DESC', NULL, array($monitor->Id()) ) as $row ) {
       $row['Points'] = coordsToPoints($row['Coords']);
+      $row['Points_orig'] = $row['Points'];
+      $row['Coords_orig'] = $row['Coords'];
+      // $monitor.orig_points = $row['Points'];
 
       if ( $scale ) {
         limitPoints($row['Points'], 0, 0, $monitor->Width(), $monitor->Height());
@@ -269,10 +273,11 @@ foreach ( $monitors as $monitor ) {
     } // 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 ?>; height: <?php echo $height ?>;">
+<!-- track original values from when page is loaded with data-x-orig -->
+<svg class="zones" id="zones<?php echo $monitor->Id() ?>" style="position:absolute; top: 0; left: 0; background: none; width: <?php echo $width ?>; height: <?php echo $height ?>;" data-width-orig="<?php echo $width ?>" data-height-orig="<?php echo $height ?>" data-scale-orig="<?php echo $scale ? $scale : 100 ?>">
 <?php
 foreach( array_reverse($zones) as $zone ) {
-  echo '<polygon points="'. $zone['AreaCoords'] .'" class="'. $zone['Type'].'" />';
+  echo '<polygon points="'. $zone['AreaCoords'] .'" data-areacoords-orig="'. $zone['AreaCoords'] .'" data-coords-orig="'. $zone['Coords_orig'] .'" class="'. $zone['Type'].'" />';
 } // end foreach zone
 ?>
   Sorry, your browser does not support inline SVG