Change text output content (#194)

* make output less verbose

* fix bug in setup

* remove log; fix area

* fix type casting

client/modules/IDE/components/PreviewFrame.jsx

@@ -142,6 +142,17 @@ class PreviewFrame extends React.Component {
       return;
     }
 
+    // if user switches textoutput preferences
+    if (this.props.isTextOutputPlaying !== prevProps.isTextOutputPlaying) {
+      this.renderSketch();
+      return;
+    }
+
+    if (this.props.textOutput !== prevProps.textOutput) {
+      this.renderSketch();
+      return;
+    }
+
     if (this.props.fullView && this.props.files[0].id !== prevProps.files[0].id) {
       this.renderSketch();
       return;
@@ -240,6 +251,7 @@ class PreviewFrame extends React.Component {
 
     if (this.props.textOutput || this.props.isTextOutputPlaying) {
       htmlHeadContents += '<script src="/loadData.js"></script>\n';
+      htmlHeadContents += '<script src="/intercept-helper-functions.js"></script>\n';
       htmlHeadContents += '<script src="/interceptor-functions.js"></script>\n';
       htmlHeadContents += '<script src="/intercept-p5.js"></script>\n';
       htmlHeadContents += '<script type="text/javascript" src="/ntc.min.js"></script>';

static/intercept-helper-functions.js

@@ -0,0 +1,47 @@
+String.prototype.paddingLeft = function (paddingValue) {
+   return String(paddingValue + this).slice(-paddingValue.length);
+};
+
+function MergeObjRecursive(obj1, obj2) {
+  var obj3 = {};
+  for(p in obj1) {
+    obj3[p] = obj1[p];
+  }
+  for(p in obj2) {
+    if(Object.keys(obj3).indexOf(p)<0){
+      obj3[p] = obj2[p];
+    }
+    else {
+      obj3[p] = obj3[p] + obj2[p];
+    }
+  }
+  return obj3;
+}
+
+if(Array.prototype.equals)
+// attach the .equals method to Array's prototype to call it on any array
+Array.prototype.equals = function (array) {
+    // if the other array is a falsy value, return
+    if (!array)
+        return false;
+
+    // compare lengths - can save a lot of time
+    if (this.length != array.length)
+        return false;
+
+    for (var i = 0, l=this.length; i < l; i++) {
+        // Check if we have nested arrays
+        if (this[i] instanceof Array && array[i] instanceof Array) {
+            // recurse into the nested arrays
+            if (!this[i].equals(array[i]))
+                return false;
+        }
+        else if (this[i] != array[i]) {
+            // Warning - two different object instances will never be equal: {x:20} != {x:20}
+            return false;
+        }
+    }
+    return true;
+}
+// Hide method from for-in loops
+Object.defineProperty(Array.prototype, "equals", {enumerable: false});

static/intercept-p5.js

@@ -7,7 +7,7 @@ funcNames = allData["classitems"].map(function(x){
   } else {
     tempParam = x["params"];
   }
-  return {
+   return {
     name: x["name"],
     params: tempParam,
     class: x["class"],
@@ -15,22 +15,23 @@ funcNames = allData["classitems"].map(function(x){
     submodule: x["submodule"]
   };
 });
+
 funcNames = funcNames.filter(function(x) {
   var className = x["class"];
   return (x["name"] && x["params"] && (className==='p5'));
 })
 
+
 funcNames.forEach(function(x){
   var document = parent.document;
   var originalFunc = p5.prototype[x.name];
   p5.prototype[x.name] = function(){
     orgArg = arguments;
-
     if(frameCount == 0) { //for setup
       Interceptor.setupObject = Interceptor.populateObject(x,arguments, Interceptor.setupObject,  document.getElementById('textOutput-content-details'),false);
       Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'));
       var table = document.getElementById('textOutput-content-details');
-      table.innerHTML = '';
+      // table.innerHTML = '';
       Interceptor.populateTable(table,Interceptor.setupObject.objectArray);
     }
 

static/interceptor-functions.js

@@ -1,57 +1,11 @@
-String.prototype.paddingLeft = function (paddingValue) {
-   return String(paddingValue + this).slice(-paddingValue.length);
-};
-
-function MergeObjRecursive(obj1, obj2) {
-  var obj3 = {};
-  for(p in obj1) {
-    obj3[p] = obj1[p];
-  }
-  for(p in obj2) {
-    if(Object.keys(obj3).indexOf(p)<0){
-      obj3[p] = obj2[p];
-    }
-    else {
-      obj3[p] = obj3[p] + obj2[p];
-    }
-  }
-  return obj3;
-}
-
-if(Array.prototype.equals)
-// attach the .equals method to Array's prototype to call it on any array
-Array.prototype.equals = function (array) {
-    // if the other array is a falsy value, return
-    if (!array)
-        return false;
-
-    // compare lengths - can save a lot of time
-    if (this.length != array.length)
-        return false;
-
-    for (var i = 0, l=this.length; i < l; i++) {
-        // Check if we have nested arrays
-        if (this[i] instanceof Array && array[i] instanceof Array) {
-            // recurse into the nested arrays
-            if (!this[i].equals(array[i]))
-                return false;
-        }
-        else if (this[i] != array[i]) {
-            // Warning - two different object instances will never be equal: {x:20} != {x:20}
-            return false;
-        }
-    }
-    return true;
-}
-// Hide method from for-in loops
-Object.defineProperty(Array.prototype, "equals", {enumerable: false});
-
-
 var Interceptor = {
   prevTotalCount :0,
   totalCount : 0,
   currentColor : 'white',
   bgColor : 'white',
+  objectArea : 0,
+  coordinates : [],
+  objectDescription : '',
   canvasDetails : {
     width : 0,
     height: 0
@@ -67,6 +21,7 @@ var Interceptor = {
     objectTypeCount : {}
   },
   isCleared : false,
+
   getColorName : function(arguments) {
     if(arguments.length==3) {
       //assuming that we are doing RGB - convert RGB values to a name
@@ -100,37 +55,37 @@ var Interceptor = {
     }
   },
 
-  canvasLocator : function(arguments,canvasX,canvasY){
+  /* return which part of the canvas an object os present */
-    var x,y;
+  canvasAreaLocation : function(x,arguments,canvasX,canvasY){
-    var isNum1 = false;
+
-    var isNum2 = false;
+    var x_loc,y_loc;
+
     for(var i=0;i<arguments.length;i++) {
       a = arguments[i];
-      if(!isNum1 && !isNum2 && !(typeof(a)).localeCompare('number')) {
+      if(x.params[i].description.indexOf("x-coordinate")>-1) {
-        x = a;
+        x_loc = a;
-        isNum1 = true;
+      }
-      } else if (isNum1 && !isNum2 && !(typeof(a)).localeCompare('number')) {
+      else if(x.params[i].description.indexOf("y-coordinate")>-1) {
-        y = a;
+        y_loc = a;
-        isNum2 = true;
       }
     }
 
-    if(x<0.4*canvasX) {
+    if(x_loc<0.4*canvasX) {
-      if(y<0.4*canvasY) {
+      if(y_loc<0.4*canvasY) {
         return 'top left';
       }
-      else if(y>0.6*canvasY) {
+      else if(y_loc>0.6*canvasY) {
         return 'bottom left';
       }
       else {
         return 'mid left';
       }
     }
-    else if(x>0.6*canvasX) {
+    else if(x_loc>0.6*canvasX) {
-      if(y<0.4*canvasY) {
+      if(y_loc<0.4*canvasY) {
         return 'top right';
       }
-      else if(y>0.6*canvasY) {
+      else if(y_loc>0.6*canvasY) {
         return 'bottom right';
       }
       else {
@@ -138,10 +93,10 @@ var Interceptor = {
       }
     }
     else {
-      if(y<0.4*canvasY) {
+      if(y_loc<0.4*canvasY) {
         return 'top middle';
       }
-      else if(y>0.6*canvasY) {
+      else if(y_loc>0.6*canvasY) {
         return 'bottom middle';
       }
       else {
@@ -149,6 +104,7 @@ var Interceptor = {
       }
     }
   },
+
   clearVariables : function(object) {
     object.objectTypeCount = {};
     object.objectCount = 0;
@@ -175,20 +131,44 @@ var Interceptor = {
       this.bgColor = this.getColorName(arguments);
     }
     else if(!x.module.localeCompare('Shape') || !x.module.localeCompare('Typography') &&((!x.submodule)||(x.submodule.localeCompare('Attributes')!=0)) ){
+      this.objectArea = this.getObjectArea(x.name, arguments);
+      var canvasLocation = this.canvasAreaLocation(x, arguments ,width,height);
+      if(x.name.localeCompare('text')){
+        this.objectDescription = x.name;
+      }
+      else {
+        this.objectDescription = String(arguments[0]).substring(0,20);
+      }
 
-    var canvasLocation = this.canvasLocator(arguments ,width,height);
+      this.coordinates = [];
 
-    objectArray[objectCount] = {
+      objectArray[objectCount] = {
-        'type' : x.name,
+        'type' : this.currentColor + ' colored ' + this.objectDescription ,
         'location': canvasLocation,
-        'colour': this.currentColor
+        'area': this.objectArea,
+        'co-ordinates': this.coordinates
       };
+
+      //make edits if it is a text object
+      if(!x.name.localeCompare('text')){
+        objectArray[objectCount]['type'] = this.objectDescription;
+        objectArray[objectCount]['color of text'] = this.currentColor;
+      }
+
       //add the object(shape/text) parameters in objectArray
       for(var i=0;i<arguments.length;i++) {
         if(!(typeof(arguments[i])).localeCompare('number')){
           arguments[i] = round(arguments[i]);
         }
-        objectArray[objectCount][x.params[i].description.slice(3,-5)]=arguments[i];
+        if(x.params[i].description.indexOf("x-coordinate")>-1) {
+          objectArray[objectCount]['co-ordinates'].push(arguments[i]+'x')
+        }
+        else if(x.params[i].description.indexOf("y-coordinate")>-1) {
+          objectArray[objectCount]['co-ordinates'].push(arguments[i]+'y')
+        }
+        else{
+          objectArray[objectCount][x.params[i].description]=arguments[i];
+        }
       }
       if(objectTypeCount[x.name]) {
         objectTypeCount[x.name]++;
@@ -208,27 +188,46 @@ var Interceptor = {
   },
 
   populateTable : function(table, objectArray) {
-    if(this.totalCount<20) {
+    if(this.totalCount<100) {
       if(this.prevTotalCount > this.totalCount) {
         for(var j =0;j<this.totalCount;j++) {
           var row = table.children[j];
           var tempCol = row.children.length;
           var properties =  Object.keys(objectArray[j]);
 
-          if(tempCol<=properties.length){ //ie - there are more cols now
+          if(tempCol<properties.length){ //ie - there are more cols now
             for(var i =0;i<tempCol;i++) {
-              row.children[i].innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
+              if(properties[i].localeCompare('type')) {
+                row.children[i].innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
+              }
+              else {
+                row.children[i].innerHTML = objectArray[j][properties[i]];
+              }
+
             }
             for(var i=tempCol;i < properties.length;i++) {
               var col = document.createElement('td');
-              col.innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
+              if(properties[i].localeCompare('type')) {
+                col.children[i].innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
+              }
+              else {
+                col.children[i].innerHTML = objectArray[j][properties[i]];
+              }
+
               row.appendChild(col);
             }
           }
 
           else{ // ie - there are fewer cols now
             for(var i =0;i<properties.length;i++) {
-              row.children[i].innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
+              // console.log(properties[i].localeCompare('type'));
+              if(properties[i].localeCompare('type')) {
+                row.children[i].innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
+              }
+              else {
+                row.children[i].innerHTML = objectArray[j][properties[i]];
+              }
+
             }
             for(var i=properties.length;i<tempCol;i++) {
               var tempCol = row.children[i];
@@ -247,54 +246,106 @@ var Interceptor = {
           var tempCol = row.children.length;
           var properties =  Object.keys(objectArray[j]);
 
-          if(tempCol<=properties.length){ //ie - there are more cols now
+          if(tempCol<properties.length){ //ie - there are more cols now
-              for(var i =0;i<tempCol;i++) {
+
-              row.children[i].innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
+            for(var i =0;i<=tempCol;i++) {
+              if(properties[i].localeCompare('type')) {
+                row.children[i].innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
+              }
+              else {
+                row.children[i].innerHTML = objectArray[j][properties[i]];
+              }
             }
             for(var i=tempCol;i < properties.length;i++) {
               var col = document.createElement('td');
-              col.innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
+
+              if(properties[i].localeCompare('type')) {
+                col.innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
+              }
+              else {
+                col.innerHTML = objectArray[j][properties[i]];
+              }
+
               row.appendChild(col);
             }
           }
 
           else{ // ie - there are fewer cols now
             for(var i =0;i<properties.length;i++) {
-              row.children[i].innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
+              if(properties[i].localeCompare('type')) {
+                row.children[i].innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
+              }
+              else {
+                row.children[i].innerHTML = objectArray[j][properties[i]];
+              }
+
             }
             for(var i=properties.length;i<tempCol;i++) {
               var tempCol = row.children[i];
               row.removeChild(tempCol);
             }
           }
+
         }
         for(var j = this.prevTotalCount;j<this.totalCount;j++) {
           var row = document.createElement('tr');
+          row.id = 'object' + j;
           var properties =  Object.keys(objectArray[j]);
           for(var i =0;i<properties.length;i++) {
             var col = document.createElement('td');
-            col.innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
+            if(properties[i].localeCompare('type')) {
+              col.innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
+            }
+            else {
+              col.innerHTML = objectArray[j][properties[i]];
+            }
+
             row.appendChild(col);
           }
           table.appendChild(row);
         }
       }
-
     }
   },
 
+  getObjectArea : function(objectType,arguments){
+    var objectArea = 0;
+    if(!objectType.localeCompare('arc')) {
+      objectArea = 0;
+    }
+    else if(!objectType.localeCompare('ellipse')) {
+      objectArea = 3.14 * arguments[2]*arguments[3]/4;
+    }
+    else if(!objectType.localeCompare('line')) {
+      objectArea = 0;
+    }
+    else if(!objectType.localeCompare('point')) {
+      objectArea = 0;
+    }
+    else if(!objectType.localeCompare('quad')) {
+      //x1y2+x2y3+x3y4+x4y1−x2y1−x3y2−x4y3−x1y4
+      objectArea = (arguments[0]*arguments[1]+arguments[2]*arguments[3]+arguments[4]*arguments[5]+arguments[6]*arguments[7]) - (arguments[2]*arguments[1]+arguments[4]*arguments[3]+arguments[6]*arguments[5]+arguments[0]*arguments[7]);
+    }
+    else if(!objectType.localeCompare('rect')) {
+      objectArea = arguments[2]*arguments[3];
+    }
+    else if(!objectType.localeCompare('triangle')) {
+      objectArea = abs( arguments[0]*(arguments[3] - arguments[5]) + arguments[2]*(arguments[5] - arguments[1]) + arguments[4]*(arguments[1] - arguments[3]));
+      //A	x 	 (	 B	y 	−	 C	y 	) 	+	 B	x 	 (	 C	y 	−	 A	y 	) 	+	 C	x 	 (	 A	y 	−	 B	y 	)
+    }
+    return objectArea;
+  },
+
   getSummary : function(object1, object2, element) {
     this.prevTotalCount = this.totalCount;
     this.totalCount = object1.objectCount + object2.objectCount;
     element.innerHTML = '';
-    element.innerHTML += 'Canvas size is ' + this.canvasDetails.width + ' by ' + this.canvasDetails.height + ' pixels ';
+    element.innerHTML +=  this.bgColor + ' coloured canvas is ' + this.canvasDetails.width + ' by ' + this.canvasDetails.height + ' of area ' + this.canvasDetails.width*this.canvasDetails.height;
-    element.innerHTML += ' and has a background colour of ' + this.bgColor + '. ';
-    element.innerHTML += 'This canvas contains ' + this.totalCount;
     if(this.totalCount > 1 ) {
-      element.innerHTML += ' objects. The objects are ';
+      element.innerHTML += ' Contains ' + this.totalCount + ' objects - ';
     }
     else {
-      element.innerHTML += ' object. The object is ';
+      element.innerHTML += ' Contains ' + this.totalCount + ' object - ';
     }
 
     if(object2.objectCount>0 || object1.objectCount>0 ) {
@@ -305,23 +356,32 @@ var Interceptor = {
         element.innerHTML += totObjectTypeCount[keys[i]] + ' ' + keys[i] + ' ';
       }
 
-      element.innerHTML += "<br>";
+      var objectList = document.createElement('ul');
-      if(this.totalCount<20){
+
+      if(this.totalCount<100){
         for(var i=0; i <object1.objectArray.length; i++) {
+          var objectListItem = document.createElement('li');
+          objectList.appendChild(objectListItem);
           var objKeys = Object.keys(object1.objectArray[i]);
-          for(var j=0;j<objKeys.length;j++) {
+          var objLink = document.createElement('a');
-            element.innerHTML += objKeys[j] + ' is ' + object1.objectArray[i][objKeys[j]] + ' ';
+          objLink.href = "#object" + i;
-          }
+          objLink.innerHTML = object1.objectArray[i]['type'];
+          objectListItem.appendChild(objLink);
+          objectListItem.innerHTML += '; area = ' + object1.objectArray[i]['area'] + '; location = ' + object1.objectArray[i]['location'];
         }
         for(var i=0; i <object2.objectArray.length; i++) {
+          var objectListItem = document.createElement('li');
+          objectList.appendChild(objectListItem);
           var objKeys = Object.keys(object2.objectArray[i]);
-          for(var j=0;j<objKeys.length;j++) {
+          var objLink = document.createElement('a');
-            element.innerHTML += objKeys[j] + ' is ' + object2.objectArray[i][objKeys[j]] + ' ';
+          objLink.href = "#object" + (i + object1.objectArray.length);;
-          }
+          objLink.innerHTML = object2.objectArray[i]['type'];
+          objectListItem.appendChild(objLink);
+          objectListItem.innerHTML +=  '; area = ' + object2.objectArray[i]['area'] + '; location = ' + object2.objectArray[i]['location'];
         }
+        element.appendChild(objectList);
       }
 
     }
   }
-
 };