Visual improvements

CloudCity/Recorder/node-api/public/index.html

@@ -29,7 +29,7 @@ <h1>Reflections Recorder</h1>
       <div id="wrapper">
 
        <video id="videoshare" controls autoplay></video><br> 
-       <canvas id="canvas" width=100% height=100% ></canvas> 
+       <canvas id="canvas" width=800 height=800 ></canvas> 
        <div id="loading"></div>
       </div>
 
@@ -49,7 +49,7 @@ <h1>Reflections Recorder</h1>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <script src="https://webrtchacks.github.io/adapter/adapter-latest.js"></script>
 	<script src="js/main.js"></script>
-  <script src="js/cropv2.js"></script>
+  <script src="js/cropv3.js"></script>
   <script>
     $(document).ready(function () {
       // Your code here

CloudCity/Recorder/node-api/public/js/crop.js

@@ -1,85 +1,84 @@
-var stage = new createjs.Stage("canvas");
-createjs.Ticker.on("tick", tick);
-var coordinates={
-  xStart:0,
-  xEnd:0,
-  yStart:0,
-  yEnd:0
+var stage = new createjs.Stage('canvas')
+createjs.Ticker.on('tick', tick)
+var coordinates = {
+  xStart: 0,
+  xEnd: 0,
+  yStart: 0,
+  yEnd: 0
 }
-var maxX = 800;
-var maxY = 600;
+var maxX = 800
+var maxY = 600
 
-var canvas = document.getElementById("canvas#canvas");
-var video = document.querySelector("video#videoshare");
+var canvas = document.getElementById('canvas#canvas')
+var video = document.querySelector('video#videoshare')
 
 var selection = new createjs.Shape(),
-  g = selection.graphics.setStrokeStyle(1).beginStroke("#f20").beginFill("rgba(0,3,4,0.3)"),
+  g = selection.graphics
+    .setStrokeStyle(1)
+    .beginStroke('#f20')
+    .beginFill('rgba(0,3,4,0.3)'),
   //sd = g.setStrokeDash([20, 5], 0).command,
-  r = g.drawRect(0, 0, 100, 100).command,
-  moveListener;
+  r = g.drawRect(0, 0, 20, 20).command,
+  moveListener
 
-
-stage.on("stagemousedown", dragStart);
-stage.on("stagemouseup", dragEnd);
+stage.on('stagemousedown', dragStart)
+stage.on('stagemouseup', dragEnd)
 
 function dragStart(event) {
   stage.addChild(selection).set({
     x: event.stageX,
     y: event.stageY
-
-  });
-  r.w = 30;
-  r.h = 30;
+  })
+  r.w = 30
+  r.h = 30
   //console.log("x"+event.stageX)
   //console.log("y"+event.stageY)
- console.log("start"+event  )
- coordinates.xStart=event.stageX;
- coordinates.yStart=event.stageY;
-moveListener = stage.on("stagemousemove", drag);
-};
+  console.log('start' + event)
+  coordinates.xStart = event.stageX
+  coordinates.yStart = event.stageY
+  moveListener = stage.on('stagemousemove', drag)
+}
 
 function drag(event) {
-  r.w = event.stageX - selection.x;
-  r.h = event.stageY - selection.y;
-  console.log(`adjusted height: ${r.h}, ${aspectRatio}`);
-  if (r.w > r.h){
-	  r.h = r.w * aspectRatio;
+  r.w = event.stageX - selection.x
+  r.h = event.stageY - selection.y
+  console.log(`adjusted height: ${r.h}, ${aspectRatio}`)
+  if (r.w > r.h) {
+    r.h = r.w * aspectRatio
   } else {
-	  r.w=r.h / aspectRatio;
-	  console.log(`adjusted width: ${r.w}, ${aspectRatio}`);
+    r.w = r.h / aspectRatio
+    console.log(`adjusted width: ${r.w}, ${aspectRatio}`)
   }
   //console.log("r.w"+r.w  )
   //console.log("r.h"+event  )
 }
 
 function dragEnd(event) {
-  stage.off("stagemousemove", moveListener);
-  console.log("end"+event)
-  maxX = localStream.getVideoTracks()[0].getSettings().width;
-  maxY = localStream.getVideoTracks()[0].getSettings().height;
-  coordinates.xStart = maxX * (coordinates.xStart/100);
-  coordinates.yStart = maxY * (coordinates.yStart/100);
-
-  coordinates.xEnd=maxX * (event.stageX/100);
-  coordinates.yEnd=maxY * (event.stageY/100);
+  stage.off('stagemousemove', moveListener)
+  console.log('end' + event)
+  maxX = localStream.getVideoTracks()[0].getSettings().width
+  maxY = localStream.getVideoTracks()[0].getSettings().height
+  coordinates.xStart = maxX * (coordinates.xStart / 100)
+  coordinates.yStart = maxY * (coordinates.yStart / 100)
 
+  coordinates.xEnd = maxX * (event.stageX / 100)
+  coordinates.yEnd = maxY * (event.stageY / 100)
 
-
   // canvas.width=s
   // canvas.height=s
   // video.height=s
   // video.width=ss
-
-
-  console.log(`coordinates: ${JSON.stringify(coordinates,0,1)}, maxX:${maxX}, maxY:${maxY}`);
-
-
 
+  console.log(
+    `coordinates: ${JSON.stringify(
+      coordinates,
+      0,
+      1
+    )}, maxX:${maxX}, maxY:${maxY}`
+  )
 }
 
-
-
 function tick(event) {
-  stage.update(event);
+  stage.update(event)
   //sd.offset--;
 }

CloudCity/Recorder/node-api/public/js/cropv2.js

@@ -1,123 +1,135 @@
-var SIZE = 50;
-var stage = new createjs.Stage("canvas");
+var SIZE = 50
+var stage = new createjs.Stage('canvas')
 
-createjs.Touch.enable(stage);
-stage.mouseMoveOutside = true;
+createjs.Touch.enable(stage)
+stage.mouseMoveOutside = true
 
-createjs.Ticker.on("tick", tick);
+createjs.Ticker.on('tick', tick)
 var coordinates = {
-    xStart: 0,
-    xEnd: 0,
-    yStart: 0,
-    yEnd: 0
+  xStart: 0,
+  xEnd: 0,
+  yStart: 0,
+  yEnd: 0
 }
 
 var selection,
-    g,
-    r,
-    moveListener,
-    resizeHandle,
-    resizing = false;
-
-    var maxX = 800;
-    var maxY = 800;
-
-function init_canvas() {        
-    selection = new createjs.Shape();
-    g = selection.graphics.setStrokeStyle(3).beginStroke("#FEFACD").beginFill("rgba(255,255,255,0.25)");
-    r = g.drawRect(0, 0, 40, 40).command;
-
-    resizeHandle = new createjs.Shape();
-    resizeHandle.graphics.beginFill("#B6B6B6").drawRect(0, 0, 10, 10);
-
-    const getLocalStorage = JSON.parse(localStorage.getItem("coordinates"));
-
-    if(!getLocalStorage){
-        coordinates = {
-            xStart: 0,
-            xEnd: 40,
-            yStart: 0,
-            yEnd: 40
-        }
-
-        localStorage.setItem("coordinates", JSON.stringify(coordinates));
-    } else{
-        coordinates = getLocalStorage;
+  g,
+  r,
+  moveListener,
+  resizeHandle,
+  resizing = false
+
+var maxX = 800
+var maxY = 800
+
+function init_canvas() {
+  selection = new createjs.Shape()
+  g = selection.graphics
+    .setStrokeStyle(3)
+    .beginStroke('#FEFACD')
+    .beginFill('rgba(255,255,255,0.25)')
+  r = g.drawRect(0, 0, 40, 40).command
+
+  resizeHandle = new createjs.Shape()
+  resizeHandle.graphics.beginFill('#B6B6B6').drawRect(0, 0, 10, 10)
+
+  const getLocalStorage = JSON.parse(localStorage.getItem('coordinates'))
+
+  if (!getLocalStorage) {
+    coordinates = {
+      xStart: 0,
+      xEnd: 40,
+      yStart: 0,
+      yEnd: 40
     }
 
-    r.w = coordinates.xEnd - coordinates.xStart;
-    r.h = coordinates.yEnd - coordinates.yStart;
-    stage.addChild(selection).set({
-        x: coordinates.xStart,
-        y: coordinates.yStart
-    });
-
-    stage.addChild(resizeHandle).set({
-        x: coordinates.xEnd - 10,
-        y: coordinates.yEnd - 10
-    });
-
-    resizeHandle.on("mousedown", function(evt) {
-        resizing = true;
-        stage.on("stagemousemove", drag);
-    });
-
-    stage.on("stagemousedown", function(evt) {
-        if (!selection.hitTest(evt.stageX - selection.x, evt.stageY - selection.y)) {
-            if (!resizing) {
-                return;
-            }
-        }
-        else {
-            moveListener = stage.on("stagemousemove", function(evt) {
-                if (!resizing) {
-                    selection.x = evt.stageX - r.w / 2;
-                    selection.y = evt.stageY - r.h / 2;
-                    resizeHandle.x = selection.x + r.w - 10;
-                    resizeHandle.y = selection.y + r.h - 10;
-
-                    coordinates.xStart = selection.x;
-                    coordinates.yStart = selection.y;
-                }
-            });
+    localStorage.setItem('coordinates', JSON.stringify(coordinates))
+  } else {
+    coordinates = getLocalStorage
+  }
+
+  r.w = coordinates.xEnd - coordinates.xStart
+  r.h = coordinates.yEnd - coordinates.yStart
+  stage.addChild(selection).set({
+    x: coordinates.xStart,
+    y: coordinates.yStart
+  })
+
+  stage.addChild(resizeHandle).set({
+    x: coordinates.xEnd - 10,
+    y: coordinates.yEnd - 10
+  })
+
+  resizeHandle.on('mousedown', function (evt) {
+    resizing = true
+    stage.on('stagemousemove', drag)
+  })
+
+  stage.on('stagemousedown', function (evt) {
+    if (
+      !selection.hitTest(evt.stageX - selection.x, evt.stageY - selection.y)
+    ) {
+      if (!resizing) {
+        return
+      }
+    } else {
+      moveListener = stage.on('stagemousemove', function (evt) {
+        if (!resizing) {
+          selection.x = evt.stageX - r.w / 2
+          selection.y = evt.stageY - r.h / 2
+          resizeHandle.x = selection.x + r.w - 10
+          resizeHandle.y = selection.y + r.h - 10
+
+          coordinates.xStart = selection.x
+          coordinates.yStart = selection.y
         }
-    });
-
-    stage.on("stagemouseup", function(evt) {
-        stage.off("stagemousemove", moveListener);
-        resizing = false;
-
-        coordinates.xEnd = selection.x + r.w;
-        coordinates.yEnd = selection.y + r.h;
-
-        console.log(maxX, maxY, coordinates.xEnd - coordinates.xStart, coordinates.yEnd - coordinates.yStart);
-
-        // Saving to localStorage after resizing or dragging ends
-        localStorage.setItem("coordinates", JSON.stringify({
-            xStart: coordinates.xStart.toString(),
-            yStart: coordinates.yStart.toString(),
-            xEnd: coordinates.xEnd.toString(),
-            yEnd: coordinates.yEnd.toString(),
-        }));
-    });
-
-    stage.update();
+      })
+    }
+  })
+
+  stage.on('stagemouseup', function (evt) {
+    stage.off('stagemousemove', moveListener)
+    resizing = false
+
+    coordinates.xEnd = selection.x + r.w
+    coordinates.yEnd = selection.y + r.h
+
+    console.log(
+      maxX,
+      maxY,
+      coordinates.xEnd - coordinates.xStart,
+      coordinates.yEnd - coordinates.yStart
+    )
+
+    // Saving to localStorage after resizing or dragging ends
+    localStorage.setItem(
+      'coordinates',
+      JSON.stringify({
+        xStart: coordinates.xStart.toString(),
+        yStart: coordinates.yStart.toString(),
+        xEnd: coordinates.xEnd.toString(),
+        yEnd: coordinates.yEnd.toString()
+      })
+    )
+  })
+
+  stage.update()
 }
 
 function drag(event) {
-    if (resizing) {
-        var width = Math.max(event.stageX - selection.x, 20);
-        var height = Math.max(event.stageY - selection.y, 20);
-    
-        var size = Math.max(width, height); // always maintain a square shape
-
-        r.w = size;
-        r.h = size;
-        resizeHandle.x = selection.x + r.w - 5;
-        resizeHandle.y = selection.y + r.h - 5;
-    }
+  if (resizing) {
+    var width = Math.max(event.stageX - selection.x, 20)
+    var height = Math.max(event.stageY - selection.y, 20)
+
+    var size = Math.max(width, height) // always maintain a square shape
+
+    r.w = size
+    r.h = size
+    resizeHandle.x = selection.x + r.w - 5
+    resizeHandle.y = selection.y + r.h - 5
+  }
 }
 
 function tick(event) {
-    stage.update(event);
+  stage.update(event)
 }