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() {
return (
<section
className="textoutput"
className="text-output"
id="canvas-sub"
tabIndex="0"
role="main"

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

@ -27,7 +27,7 @@ function Toolbar(props) {
<InlineSVG src={playUrl} alt="Play Sketch" />
</button>
<button
className={playButtonClass}
className="toolbar__play-sketch-button"
onClick={() => { props.startTextOutput(); props.startSketch(); }}
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 {
@extend %toolbar-button;
&--selected {

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

@ -33,6 +33,10 @@
@extend %hidden-element;
}
.text-output {
@extend %hidden-element;
}
.preview-frame {
height: 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'));
var table = document.getElementById('textOutput-content-details');
table.innerHTML = '';
Interceptor.populateTable(table,Interceptor.setupObject);
Interceptor.populateTable(table,Interceptor.setupObject.objectArray);
}
else if(frameCount%100 == 0 ) {
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;
}
//reset some of the variables
else if(frameCount%100 == 1 ) {
if(!Interceptor.isCleared){
var table = document.getElementById('textOutput-content-details');
table.innerHTML = '';
Interceptor.populateTable(table,Interceptor.setupObject);
Interceptor.populateTable(table,Interceptor.drawObject);
Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'));
Interceptor.populateTable(table,Interceptor.setupObject.objectArray.concat(Interceptor.drawObject.objectArray));
}
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 = {
prevTotalCount :0,
totalCount : 0,
currentColor : 'white',
bgColor : 'white',
canvasDetails : {
@ -205,26 +207,90 @@ var Interceptor = {
});
},
populateTable : function(table, object) {
for(var j =0;j<object.objectArray.length;j++) {
var row = document.createElement('tr');
var properties = Object.keys(object.objectArray[j]);
for(var i =0;i<properties.length;i++) {
var col = document.createElement('td');
col.innerHTML = properties[i] + ' : ' + object.objectArray[j][properties[i]];
row.appendChild(col);
populateTable : function(table, objectArray) {
if(this.totalCount<20) {
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
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) {
var totalCount = object1.objectCount + object2.objectCount;
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 ' + totalCount;
if(totalCount > 1 ) {
element.innerHTML += 'This canvas contains ' + this.totalCount;
if(this.totalCount > 1 ) {
element.innerHTML += ' objects. The objects are ';
}
else {
@ -238,19 +304,23 @@ var Interceptor = {
for(var i=0;i<keys.length;i++) {
element.innerHTML += totObjectTypeCount[keys[i]] + ' ' + keys[i] + ' ';
}
element.innerHTML += "<br>";
for(var i=0; i <object1.objectArray.length; i++) {
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]] + ' ';
}
}
for(var i=0; i <object2.objectArray.length; i++) {
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]] + ' ';
if(this.totalCount<20){
for(var i=0; i <object1.objectArray.length; i++) {
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]] + ' ';
}
}
for(var i=0; i <object2.objectArray.length; i++) {
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]] + ' ';
}
}
}
}
}

2
static/loadData.js
View file

@ -12,6 +12,6 @@ function fetchJSONFile(path, callback) {
httpRequest.open('GET', path,false);
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;
});