diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index 1ae55a14..8c2a3cb7 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -127,6 +127,14 @@ class PreviewFrame extends React.Component {
htmlFile = htmlFile.replace(fileRegex, ``);
});
+ const htmlHead = htmlFile.match(/(?:
)([\s\S]*?)(?:<\/head>)/gmi);
+ const headRegex = new RegExp('head', 'i');
+ let htmlHeadContents = htmlHead[0].split(headRegex)[1];
+ htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2);
+ htmlHeadContents += '\n';
+ htmlHeadContents += '\n';
+ htmlFile = htmlFile.replace(/(?:)([\s\S]*?)(?:<\/head>)/gmi, `\n${htmlHeadContents}\n`);
+
// const htmlHead = htmlFile.match(/(?:)([\s\S]*?)(?:<\/head>)/gmi);
// const headRegex = new RegExp('head', 'i');
// let htmlHeadContents = htmlHead[0].split(headRegex)[1];
diff --git a/static/intercept-p5.js b/static/intercept-p5.js
new file mode 100644
index 00000000..0adc542b
--- /dev/null
+++ b/static/intercept-p5.js
@@ -0,0 +1,70 @@
+var shadowDOMElement;
+var canvasLocation ='';
+
+//for object in setpu (??)
+
+
+funcNames = refData["classitems"].map(function(x){
+ return {
+ name: x["name"],
+ params: x["params"],
+ class: x["class"],
+ module: x["module"],
+ submodule: x["submodule"]
+ };
+});
+
+funcNames = funcNames.filter(function(x) {
+ let className = x["class"];
+ return (x["name"] && x["params"] && (className==='p5'));
+})
+
+
+funcNames.forEach(function(x){
+ var originalFunc = p5.prototype[x.name];
+ p5.prototype[x.name] = function(){
+ orgArg = arguments;
+ if(!shadowDOMElement){
+ Interceptor.createShadowDOMElement();
+ }
+ if(frameCount == 0) { //for setup
+ Interceptor.setupObject = Interceptor.populateObject(x,arguments, Interceptor.setupObject, document.getElementById('shadowDOM-content-details'),false);
+ Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('shadowDOM-content-summary'));
+ var table = document.getElementById('shadowDOM-content-details');
+ table.innerHTML = '';
+ Interceptor.populateTable(table,Interceptor.setupObject);
+ }
+
+ else if(frameCount%100 == 0 ) {
+ Interceptor.drawObject = Interceptor.populateObject(x,arguments, Interceptor.drawObject, document.getElementById('shadowDOM-content-details'),true);
+ Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('shadowDOM-content-summary'));
+ Interceptor.isCleared = false;
+ }
+ //reset some of the variables
+ else if(frameCount%100 == 1 ) {
+ if(!Interceptor.isCleared){
+ var table = document.getElementById('shadowDOM-content-details');
+ table.innerHTML = '';
+ Interceptor.populateTable(table,Interceptor.setupObject);
+ Interceptor.populateTable(table,Interceptor.drawObject);
+ }
+ Interceptor.drawObject = Interceptor.clearVariables(Interceptor.drawObject);
+ }
+ return originalFunc.apply(this,arguments);
+ }
+});
+
+/*** PSUEDO CODE
+
+* Run @fc = 0
+* make a list of all the objects/shapes that are present - make a list of the objects using data.json
+* check if the same ones are present in fc=1 ??
+* and update the content
+
+*Caveats
+- if there is already a circle, we can actually update the values on the same one if there is the SAME number of circles.
+-else we can update the SAME ones and add the rest
+
+links
+- Color converter - http://chir.ag/projects/ntc/
+***/
diff --git a/static/interceptor-functions.js b/static/interceptor-functions.js
new file mode 100644
index 00000000..16cd2a3b
--- /dev/null
+++ b/static/interceptor-functions.js
@@ -0,0 +1,291 @@
+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 = {
+ currentColor : 'white',
+ bgColor : 'white',
+ canvasDetails : {
+ width : 0,
+ height: 0
+ },
+ setupObject : {
+ objectArray : [],
+ objectCount : 0,
+ objectTypeCount : {}
+ },
+ drawObject : {
+ objectArray : [],
+ objectCount : 0,
+ objectTypeCount : {}
+ },
+ isCleared : false,
+ createShadowDOMElement : function() {
+
+ // var c = document.getElementsByTagName('canvas')[0];
+ var c = document.getElementById('canvas-sub');
+ c.setAttribute("tabIndex","0");
+ c.setAttribute("role","region");
+
+ var section = document.createElement('section');
+ section.id = "shadowDOM-content";
+ section.className = "shadowDOM-content";
+ c.appendChild(section);
+
+ var summary = document.createElement('div');
+ summary.setAttribute("tabIndex","0");
+ summary.setAttribute("role","region");
+ summary.id = "shadowDOM-content-summary";
+ summary.className = "shadowDOM-content-summary";
+ section.appendChild(summary);
+
+ var details = document.createElement('div');
+ details.setAttribute("tabIndex","0");
+ details.setAttribute("role","region");
+ details.id = "shadowDOM-content-details";
+ details.className = "shadowDOM-content-details";
+ section.appendChild(details);
+
+ var contentTable = document.createElement('table');
+ contentTable.id="shadowDOM-content-table";
+ contentTable.className ="shadowDOM-content-table";
+ contentTable.setAttribute('summary','details of object in the canvas');
+
+ details.appendChild(contentTable);
+ shadowDOMElement = document.getElementById('shadowDOM-content');
+ },
+ getColorName : function(arguments) {
+ if(arguments.length==3) {
+ //assuming that we are doing RGB - convert RGB values to a name
+ var color = '#' + arguments[0].toString(16).paddingLeft("00") + arguments[1].toString(16).paddingLeft("00") + arguments[2].toString(16).paddingLeft("00");
+ var n_match = ntc.name(color);
+ return n_match[1];
+ }
+ else if(arguments.length==1) {
+ if(!(typeof(arguments[0])).localeCompare("number")) {
+ //assuming that we are doing RGB - this would be a grayscale number
+ if(arguments[0]<10) {
+ return 'black';
+ }
+ else if(arguments[0]>240) {
+ return 'white';
+ }
+ else {
+ return 'grey';
+ }
+ }
+ else if(!(typeof(arguments[0])).localeCompare("string")) {
+ if(!arguments[0].charAt(0).localeCompare('#')) {
+ //if user has entered a hex color
+ var n_match = ntc.name(arguments[0]);
+ return n_match[1];
+ }
+ else {
+ return arguments[0];
+ }
+ }
+ }
+ },
+
+ canvasLocator : function(arguments,canvasX,canvasY){
+ var x,y;
+ var isNum1 = false;
+ var isNum2 = false;
+ for(var i=0;i0.6*canvasY) {
+ return 'bottom left';
+ }
+ else {
+ return 'mid left';
+ }
+ }
+ else if(x>0.6*canvasX) {
+ if(y<0.4*canvasY) {
+ return 'top right';
+ }
+ else if(y>0.6*canvasY) {
+ return 'bottom right';
+ }
+ else {
+ return 'mid right';
+ }
+ }
+ else {
+ if(y<0.4*canvasY) {
+ return 'top middle';
+ }
+ else if(y>0.6*canvasY) {
+ return 'bottom middle';
+ }
+ else {
+ return 'middle';
+ }
+ }
+ },
+ clearVariables : function(object) {
+ object.objectTypeCount = {};
+ object.objectCount = 0;
+ this.isCleared = true;
+ return object;
+ },
+
+ populateObject : function(x,arguments, object ,table, isDraw) {
+ objectCount = object.objectCount;
+ objectArray = object.objectArray;
+ objectTypeCount = object.objectTypeCount;
+ if(!isDraw) {
+ //check for special function in setup -> createCanvas
+ if(!x.name.localeCompare('createCanvas')) {
+ this.canvasDetails.width = arguments[0];
+ this.canvasDetails.height = arguments[1];
+ }
+ }
+ //check for speacial functions in general -> background/fill
+ if(!x.name.localeCompare('fill')) {
+ this.currentColor = this.getColorName(arguments);
+ }
+ else if(!x.name.localeCompare('background')) {
+ this.bgColor = this.getColorName(arguments);
+ }
+ else if(!x.module.localeCompare('Shape') || !x.module.localeCompare('Typography') &&((!x.submodule)||(x.submodule.localeCompare('Attributes')!=0)) ){
+
+ var canvasLocation = this.canvasLocator(arguments ,width,height);
+
+ objectArray[objectCount] = {
+ 'type' : x.name,
+ 'location': canvasLocation,
+ 'colour': this.currentColor
+ };
+ //add the object(shape/text) parameters in objectArray
+ for(var i=0;i 1 ) {
+ element.innerHTML += ' objects. The objects are ';
+ }
+ else {
+ element.innerHTML += ' object. The object is ';
+ }
+
+ if(object2.objectCount>0 || object1.objectCount>0 ) {
+
+ totObjectTypeCount = MergeObjRecursive(object1.objectTypeCount, object2.objectTypeCount);
+ var keys = Object.keys(totObjectTypeCount);
+ for(var i=0;i";
+ for(var i=0; i