extending gui functionality

public/job.js

@@ -25,12 +25,22 @@ function Job(data)
 
 function job_import(data)
 {
+    var guiscaleStr = getUrlVars()["guiscale"] ;
+    var minplayerwidthStr = getUrlVars()["minplayerwidth"];
+    var minplayerwidth = minplayerwidthStr != null ? parseFloat(minplayerwidthStr) : 720.0;
+    if (guiscaleStr == null)
+        var guiscale = 1.0;
+    else if (guiscaleStr === 'auto')
+        var guiscale = minplayerwidth/parseInt(data["width"]);
+    else
+        var guiscale = parseFloat(guiscaleStr);
+    console.log("Using guiscale " + guiscale)
     var job = new Job();
     job.slug = data["slug"];
     job.start = parseInt(data["start"]);
     job.stop = parseInt(data["stop"]);
-    job.width = parseInt(data["width"]);
-    job.height = parseInt(data["height"]);
+    job.width = guiscale*parseInt(data["width"]); // ME: add video scale in gui
+    job.height = guiscale*parseInt(data["height"]); // ME: add video scale in gui
     job.skip = parseInt(data["skip"]);
     job.perobject = parseFloat(data["perobject"]);
     job.completion = parseFloat(data["completion"]);
@@ -39,6 +49,7 @@ function job_import(data)
     job.labels = data["labels"];
     job.attributes = data["attributes"];
     job.training = parseInt(data["training"]);
+    job.minplayerwidth = minplayerwidth;
 
     console.log("Job configured!");
     console.log("  Slug: " + job.slug);
@@ -51,6 +62,7 @@ function job_import(data)
     console.log("  Blow Radius: " + job.blowradius);
     console.log("  Training: " + job.training);
     console.log("  Job ID: " + job.jobid);
+    console.log("  Min Player Width: " + job.minplayerwidth)
     console.log("  Labels: ");
     for (var i in job.labels)
     {

public/stylesheet.css

@@ -314,8 +314,12 @@ code
     border-style : solid;
     border-width : 2px;
     z-index : 5;
+    /*background-image: url("diagonals.png");*/
+    background-size: 100% 100%;
 }
 
+
+
 .boundingbox .boundingboxtext
 {
     font-size : 14px;

public/tracks.js

@@ -135,10 +135,38 @@ function BoxDrawer(container)
      */
     this.calculateposition = function(xc, yc)
     {
-        var xtl = Math.min(xc, this.startx);
-        var ytl = Math.min(yc, this.starty);
-        var xbr = Math.max(xc, this.startx);
-        var ybr = Math.max(yc, this.starty);
+	var xside = Math.abs(this.startx - xc);
+	var yside = Math.abs(this.starty-yc);
+	if (window.event.shiftKey)
+	{
+	    var squareside = Math.min(xside,yside);
+	    if (xc > this.startx)
+		xc = this.startx + squareside;
+  	    else
+		xc = this.startx - squareside;
+	    if (yc > this.starty)
+		yc = this.starty + squareside;
+	    else
+		yc = this.starty - squareside;
+	    xside = squareside;
+  	    yside = squareside;
+	}
+
+	var xtl, ytl, xbr, ybr;
+	if (window.event.ctrlKey)
+	{
+            xtl = this.startx - xside/2.0;
+            ytl = this.starty - yside/2.0;
+            xbr = this.startx + xside/2.0;
+            ybr = this.starty + yside/2.0;
+	}
+	else
+	{
+            xtl = Math.min(xc, this.startx);
+            ytl = Math.min(yc, this.starty);
+            xbr = Math.max(xc, this.startx);
+            ybr = Math.max(yc, this.starty);
+	}
         return new Position(xtl, ytl, xbr, ybr)
     }
 
@@ -412,12 +440,26 @@ function TrackCollection(player, job)
     };
 }
 
+function getUrlVars()
+{
+    var vars = [], hash;
+    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+    for(var i = 0; i < hashes.length; i++)
+    {
+        hash = hashes[i].split('=');
+	vars.push(hash[0]);
+	vars[hash[0]] = hash[1];
+    }
+    return vars;
+}
+
 /*
  * A track class.
  */
 function Track(player, color, position)
 {
     var me = this;
+    this.wasannot = true;
 
     this.journal = new Journal(player.job.start, player.job.blowradius);
     this.attributejournals = {};
@@ -450,6 +492,20 @@ function Track(player, color, position)
     this.journal.artificialrightframe = this.player.job.stop;
     this.journal.artificialright = position;
 
+    this.getClippingFlag = function()
+    {
+    	var clipping =  getUrlVars()["clipping"];
+	if (clipping === 'true' || clipping === '1')
+		return true;
+	else if (clipping === 'false' || clipping === '0')
+		return false;
+	else
+		console.warn("incorrect value of clipping GET variable");
+	return true; // in case clipping == null or is different from {true,1,false,0}
+     }
+    this.clipping = this.getClippingFlag();
+
+
     /*
      * Polls the on screen position of the box and returns it.
      */
@@ -504,6 +560,10 @@ function Track(player, color, position)
      */
     this.fixposition = function()
     {
+	if (!this.clipping)
+	    return;
+	if (window.event.ctrlKey)
+	    return;
         var width = this.player.job.width;
         var height = this.player.job.height;
         var pos = this.pollposition();
@@ -698,8 +758,9 @@ function Track(player, color, position)
     {
         if (this.handle == null)
         {
-            this.handle = $('<div class="boundingbox"><div class="boundingboxtext"></div></div>');
+  	    this.handle = $('<div class="boundingbox"><div class="boundingboxtext"></div></div>');
             this.handle.css("border-color", this.color);
+
             var fill = $('<div class="fill"></div>').appendTo(this.handle);
             fill.css("background-color", this.color);
             this.player.handle.append(this.handle);
@@ -778,6 +839,10 @@ function Track(player, color, position)
         {
             position = this.estimate(frame);
         }
+	if (this.wasannot == false )
+	    this.handle.css("background-image", "");
+	else 
+	    this.handle.css("background-image", 'url("diagonals.png")');
 
         if (position.outside)
         {
@@ -939,9 +1004,11 @@ function Track(player, color, position)
      */
     this.estimate = function(frame)
     {
+	this.wasannot = false;
         var bounds = this.journal.bounds(frame);
         if (bounds['leftframe'] == bounds['rightframe'])
         {
+	    this.wasannot = true;
             return bounds['left'];
         }
 

public/ui.js

@@ -45,9 +45,7 @@ function ui_setup(job)
           "</tr>" +
       "</table>").appendTo(screen).css("width", "100%");
 
-
-    var playerwidth = Math.max(720, job.width);
-
+    var playerwidth = Math.max(job.minplayerwidth , job.width);
 
     $("#videoframe").css({"width": job.width + "px",
                           "height": job.height + "px",

public/videoplayer.js

@@ -101,7 +101,7 @@ function VideoPlayer(handle, job)
 
         var url = this.job.frameurl(this.frame);
         this.handle.css("background-image", "url('" + url + "')");
-
+	this.handle.css("background-size", "contain"); // ME: make sure bg fills entirely the element (used together with guiscale)
         this._callback(this.onupdate);
     }