Change text output content (#194)
* make output less verbose * fix bug in setup * remove log; fix area * fix type casting
This commit is contained in:
Mathura MG
Cassie Tarakajian
parent
e86e9a0ae0
commit
b3ac90a4c6
4 changed files with 221 additions and 101 deletions
|
|
@ -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>';
|
||||
|
|
|
|||
47
static/intercept-helper-functions.js
Normal file
47
static/intercept-helper-functions.js
Normal file
|
|
@ -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});
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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){
|
||||
var x,y;
|
||||
var isNum1 = false;
|
||||
var isNum2 = false;
|
||||
/* return which part of the canvas an object os present */
|
||||
canvasAreaLocation : function(x,arguments,canvasX,canvasY){
|
||||
|
||||
var x_loc,y_loc;
|
||||
|
||||
for(var i=0;i<arguments.length;i++) {
|
||||
a = arguments[i];
|
||||
if(!isNum1 && !isNum2 && !(typeof(a)).localeCompare('number')) {
|
||||
x = a;
|
||||
isNum1 = true;
|
||||
} else if (isNum1 && !isNum2 && !(typeof(a)).localeCompare('number')) {
|
||||
y = a;
|
||||
isNum2 = true;
|
||||
if(x.params[i].description.indexOf("x-coordinate")>-1) {
|
||||
x_loc = a;
|
||||
}
|
||||
else if(x.params[i].description.indexOf("y-coordinate")>-1) {
|
||||
y_loc = a;
|
||||
}
|
||||
}
|
||||
|
||||
if(x<0.4*canvasX) {
|
||||
if(y<0.4*canvasY) {
|
||||
if(x_loc<0.4*canvasX) {
|
||||
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) {
|
||||
if(y<0.4*canvasY) {
|
||||
else if(x_loc>0.6*canvasX) {
|
||||
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] = {
|
||||
'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
|
||||
for(var i =0;i<tempCol;i++) {
|
||||
row.children[i].innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
|
||||
if(tempCol<properties.length){ //ie - there are more cols now
|
||||
|
||||
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 += ' and has a background colour of ' + this.bgColor + '. ';
|
||||
element.innerHTML += 'This canvas contains ' + this.totalCount;
|
||||
element.innerHTML += this.bgColor + ' coloured canvas is ' + this.canvasDetails.width + ' by ' + this.canvasDetails.height + ' of area ' + this.canvasDetails.width*this.canvasDetails.height;
|
||||
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>";
|
||||
if(this.totalCount<20){
|
||||
var objectList = document.createElement('ul');
|
||||
|
||||
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++) {
|
||||
element.innerHTML += objKeys[j] + ' is ' + object1.objectArray[i][objKeys[j]] + ' ';
|
||||
}
|
||||
var objLink = document.createElement('a');
|
||||
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++) {
|
||||
element.innerHTML += objKeys[j] + ' is ' + object2.objectArray[i][objKeys[j]] + ' ';
|
||||
}
|
||||
var objLink = document.createElement('a');
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue