r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

update interceptor

Browse source
This commit is contained in:
MathuraMG 2016-08-15 20:28:18 -04:00
parent 9c03efcef2
commit c0407dec65
7 changed files with 106 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/modules/IDE/components/TextOutput.js
View file

@ -7,7 +7,7 @@ class TextOutput extends React.Component {
render() { render() {
return ( return (
<section <section
className="textoutput" className="text-output"
id="canvas-sub" id="canvas-sub"
tabIndex="0" tabIndex="0"
role="main" role="main"

2
client/modules/IDE/components/Toolbar.js
View file

@ -27,7 +27,7 @@ function Toolbar(props) {
<InlineSVG src={playUrl} alt="Play Sketch" /> <InlineSVG src={playUrl} alt="Play Sketch" />
</button> </button>
<button <button
className={playButtonClass} className="toolbar__play-sketch-button"
onClick={() => { props.startTextOutput(); props.startSketch(); }} onClick={() => { props.startTextOutput(); props.startSketch(); }}
aria-label="play sketch with output text" aria-label="play sketch with output text"
> >

4
client/styles/components/_toolbar.scss
View file

@ -9,6 +9,10 @@
} }
} }
.toolbar__play-sketch-button {
@extend %hidden-element;
}
.toolbar__stop-button { .toolbar__stop-button {
@extend %toolbar-button; @extend %toolbar-button;
&--selected { &--selected {

4
client/styles/layout/_ide.scss
View file

@ -33,6 +33,10 @@
@extend %hidden-element; @extend %hidden-element;
} }
.text-output {
@extend %hidden-element;
}
.preview-frame { .preview-frame {
height: 100%; height: 100%;
width: 100%; width: 100%;

8
static/intercept-p5.js
View file

@ -31,21 +31,19 @@ funcNames.forEach(function(x){
Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary')); Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'));
var table = document.getElementById('textOutput-content-details'); var table = document.getElementById('textOutput-content-details');
table.innerHTML = ''; table.innerHTML = '';
Interceptor.populateTable(table,Interceptor.setupObject); Interceptor.populateTable(table,Interceptor.setupObject.objectArray);
} }
else if(frameCount%100 == 0 ) { else if(frameCount%100 == 0 ) {
Interceptor.drawObject = Interceptor.populateObject(x,arguments, Interceptor.drawObject, document.getElementById('textOutput-content-details'),true); Interceptor.drawObject = Interceptor.populateObject(x,arguments, Interceptor.drawObject, document.getElementById('textOutput-content-details'),true);
Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'));
Interceptor.isCleared = false; Interceptor.isCleared = false;
} }
//reset some of the variables //reset some of the variables
else if(frameCount%100 == 1 ) { else if(frameCount%100 == 1 ) {
if(!Interceptor.isCleared){ if(!Interceptor.isCleared){
var table = document.getElementById('textOutput-content-details'); var table = document.getElementById('textOutput-content-details');
table.innerHTML = ''; Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'));
Interceptor.populateTable(table,Interceptor.setupObject); Interceptor.populateTable(table,Interceptor.setupObject.objectArray.concat(Interceptor.drawObject.objectArray));
Interceptor.populateTable(table,Interceptor.drawObject);
} }
Interceptor.drawObject = Interceptor.clearVariables(Interceptor.drawObject); Interceptor.drawObject = Interceptor.clearVariables(Interceptor.drawObject);
} }

114
static/interceptor-functions.js
View file

@ -48,6 +48,8 @@ Object.defineProperty(Array.prototype, "equals", {enumerable: false});
var Interceptor = { var Interceptor = {
prevTotalCount :0,
totalCount : 0,
currentColor : 'white', currentColor : 'white',
bgColor : 'white', bgColor : 'white',
canvasDetails : { canvasDetails : {
@ -205,26 +207,90 @@ var Interceptor = {
}); });
}, },
populateTable : function(table, object) { populateTable : function(table, objectArray) {
for(var j =0;j<object.objectArray.length;j++) { if(this.totalCount<20) {
var row = document.createElement('tr'); if(this.prevTotalCount > this.totalCount) {
var properties = Object.keys(object.objectArray[j]); for(var j =0;j<this.totalCount;j++) {
for(var i =0;i<properties.length;i++) { var row = table.children[j];
var col = document.createElement('td'); var tempCol = row.children.length;
col.innerHTML = properties[i] + ' : ' + object.objectArray[j][properties[i]]; var properties = Object.keys(objectArray[j]);
row.appendChild(col);
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=tempCol;i < properties.length;i++) {
var col = document.createElement('td');
col.innerHTML = properties[i] + ' : ' + 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]];
}
for(var i=properties.length;i<tempCol;i++) {
var tempCol = row.children[i];
row.removeChild(tempCol);
}
}
}
for(var j = this.totalCount;j<this.prevTotalCount;j++) {
var tempRow = table.children[j];
table.removeChild(tempRow);
}
} else if(this.prevTotalCount <= this.totalCount) {
for(var j =0;j<this.prevTotalCount;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
for(var i =0;i<=tempCol;i++) {
row.children[i].innerHTML = properties[i] + ' : ' + 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]];
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]];
}
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');
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]];
row.appendChild(col);
}
table.appendChild(row);
}
} }
table.appendChild(row);
} }
}, },
getSummary : function(object1, object2, element) { getSummary : function(object1, object2, element) {
var totalCount = object1.objectCount + object2.objectCount; this.prevTotalCount = this.totalCount;
this.totalCount = object1.objectCount + object2.objectCount;
element.innerHTML = ''; element.innerHTML = '';
element.innerHTML += 'Canvas size is ' + this.canvasDetails.width + ' by ' + this.canvasDetails.height + ' pixels '; 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 += ' and has a background colour of ' + this.bgColor + '. ';
element.innerHTML += 'This canvas contains ' + totalCount; element.innerHTML += 'This canvas contains ' + this.totalCount;
if(totalCount > 1 ) { if(this.totalCount > 1 ) {
element.innerHTML += ' objects. The objects are '; element.innerHTML += ' objects. The objects are ';
} }
else { else {
@ -238,19 +304,23 @@ var Interceptor = {
for(var i=0;i<keys.length;i++) { for(var i=0;i<keys.length;i++) {
element.innerHTML += totObjectTypeCount[keys[i]] + ' ' + keys[i] + ' '; element.innerHTML += totObjectTypeCount[keys[i]] + ' ' + keys[i] + ' ';
} }
element.innerHTML += "<br>"; element.innerHTML += "<br>";
for(var i=0; i <object1.objectArray.length; i++) { if(this.totalCount<20){
var objKeys = Object.keys(object1.objectArray[i]); for(var i=0; i <object1.objectArray.length; i++) {
for(var j=0;j<objKeys.length;j++) { var objKeys = Object.keys(object1.objectArray[i]);
element.innerHTML += objKeys[j] + ' is ' + object1.objectArray[i][objKeys[j]] + ' '; for(var j=0;j<objKeys.length;j++) {
} element.innerHTML += objKeys[j] + ' is ' + object1.objectArray[i][objKeys[j]] + ' ';
} }
for(var i=0; i <object2.objectArray.length; i++) { }
var objKeys = Object.keys(object2.objectArray[i]); for(var i=0; i <object2.objectArray.length; i++) {
for(var j=0;j<objKeys.length;j++) { var objKeys = Object.keys(object2.objectArray[i]);
element.innerHTML += objKeys[j] + ' is ' + object2.objectArray[i][objKeys[j]] + ' '; for(var j=0;j<objKeys.length;j++) {
element.innerHTML += objKeys[j] + ' is ' + object2.objectArray[i][objKeys[j]] + ' ';
}
} }
} }
} }
} }

2
static/loadData.js
View file

@ -12,6 +12,6 @@ function fetchJSONFile(path, callback) {
httpRequest.open('GET', path,false); httpRequest.open('GET', path,false);
httpRequest.send(); httpRequest.send();
} }
fetchJSONFile('https://rawgit.com/processing/p5.js-website/master/reference/data.json', function(data){ fetchJSONFile('https://raw.githubusercontent.com/processing/p5.js-website/9f1a4cd299c1330b046373407d42894e274d20e7/reference/data.min.json', function(data){
allData = data; allData = data;
}); });