fixes to draw the face canvas

client/components/Nav.jsx

@@ -17,7 +17,8 @@ import { metaKeyName, } from '../utils/metaKey';
 
 import CaretLeftIcon from '../images/left-arrow.svg';
 import TriangleIcon from '../images/down-filled-triangle.svg';
-import LogoIcon from '../images/p5js-logo-small.svg';
+// import LogoIcon from '../images/p5js-logo-small.svg';
+import LogoIcon from '../images/dp-logo-line-drawing.svg';
 
 class Nav extends React.PureComponent {
   constructor(props) {
@@ -351,7 +352,7 @@ class Nav extends React.PureComponent {
             { getConfig('EXAMPLES_ENABLED') &&
             <li className="nav__dropdown-item">
               <Link
-                to="/p5/sketches"
+                to={`/${getConfig('EXAMPLE_USERNAME')}/sketches`}
                 onFocus={this.handleFocusForFile}
                 onBlur={this.handleBlur}
                 onClick={this.setDropdownForNone}

client/modules/IDE/components/Editor.jsx

@@ -321,7 +321,6 @@ class Editor extends React.Component {
       'editor--options': this.props.editorOptionsVisible
     });
 
-    console.log(this.props.file);
     const editorHolderClass = classNames({
       'editor-holder': true,
       'editor-holder--hidden': this.props.file.fileType === 'folder' || this.props.file.url

client/modules/IDE/components/PreviewFrame.jsx

@@ -23,6 +23,8 @@ import { hijackConsoleErrorsScript, startTag, getAllScriptOffsets }
   from '../../../utils/consoleUtils';
 
 
+// let lastUpdate = null;
+
 const shouldRenderSketch = (props, prevProps = undefined) => {
   const { isPlaying, previewIsRefreshing, fullView } = props;
 
@@ -327,17 +329,77 @@ class PreviewFrame extends React.Component {
 
   renderSketch() {
     const doc = this.iframeElement;
-    const localFiles = this.injectLocalFiles();
+    // const localFiles = this.injectLocalFiles();
+    console.log('renderSketch()', this.props);
+
+    const changedFiles = this.props.files.filter(file => file.changed);
+    const filesRequiringReload = changedFiles.filter(file => !file.content.startsWith('// liveUpdate'));
+    const filesToHotSwap = changedFiles.filter(file => filesRequiringReload.indexOf(file) === -1);
+    console.log('changed and requiring reload:', changedFiles, filesRequiringReload, filesToHotSwap);
+
+    let saving;
+    if (changedFiles.length > 0) {
+      saving = this.props.saveProject();
+    } else {
+      // can be done pretier: a promise that always resolves
+      saving = new Promise((resolve, err) => resolve());
+    }
+
+    saving.catch(() => {
+      console.log('Error saving... not authenticated?');
+      window.location.href = '/login';
+    });
+
+    saving.then(() => {
       if (this.props.isPlaying) {
         this.props.clearConsole();
-      srcDoc.set(doc, localFiles);
+        doc.removeAttribute('srcdoc');
+        const source = `${window.location.origin}/${this.props.project.owner.username}/sketches/${this.props.project.id}/index.html`;
+        // console.log('FILES', this.props.files, doc.src, source, lastUpdate);
+        if (doc.src === source) {
+          // const newFiles = this.props.files.filter(file => new Date(file.updatedAt) > lastUpdate);
+          if (this.props.unsavedChanges) {
+            // console.log('unsaved changes');
+          }
+
+
+          console.log('doc', doc);
+          //  we need a hard reload
+          if (filesRequiringReload.length > 0) {
+            doc.src = source; // for now...
+          } else {
+            // if (doc.contentWindow.document.querySelector('script[src="/assets/hotswap.js"]') == null) {
+            //   const headEl = doc.contentWindow.document.querySelector('head');
+            //   const srcEl = doc.contentWindow.document.createElement('script');
+            //   srcEl.src = '/assets/hotswap.js';
+            //   headEl.appendChild(srcEl);
+            // }
+
+            console.log('Hot swap (..append):', filesToHotSwap);
+            const headEl = doc.contentWindow.document.querySelector('head');
+            const updatevar = Date.now();
+            filesToHotSwap.forEach((file) => {
+              // doc.contentWindow.postMessage({ 'action': 'code', 'contents': file.content }, '*');
+              const srcEl = doc.contentWindow.document.createElement('script');
+              srcEl.src = `${file.name}?changed=${updatevar}`;
+              headEl.appendChild(srcEl);
+            });
+          }
+          // if ( this.props.htmlFile.content === doc.contentWindow)
+          // TODO: don't set, but update only (will be hard... :-P)
+        } else {
+          doc.src = source;
+        }
+        // lastUpdate = new Date();
         if (this.props.endSketchRefresh) {
           this.props.endSketchRefresh();
         }
       } else {
+        doc.removeAttribute('src');
         doc.srcdoc = '';
         srcDoc.set(doc, '  ');
       }
+    });
   }
 
   render() {
@@ -384,7 +446,18 @@ PreviewFrame.propTypes = {
   setBlobUrl: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
   expandConsole: PropTypes.func.isRequired,
+  saveProject: PropTypes.func.isRequired,
+  project: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    owner: PropTypes.shape({
+      username: PropTypes.string,
+      id: PropTypes.string,
+    }),
+    updatedAt: PropTypes.string,
+  }).isRequired,
   clearConsole: PropTypes.func.isRequired,
+  unsavedChanges: PropTypes.bool,
   cmController: PropTypes.shape({
     getContent: PropTypes.func
   }),
@@ -392,6 +465,7 @@ PreviewFrame.propTypes = {
 
 PreviewFrame.defaultProps = {
   fullView: false,
+  unsavedChanges: false,
   cmController: {}
 };
 

client/modules/IDE/pages/IDEView.jsx

@@ -173,6 +173,21 @@ class IDEView extends React.Component {
     clearTimeout(this.autosaveInterval);
     this.autosaveInterval = null;
   }
+  saveProject() {
+    // return a Promise to save or null
+    if (
+      isUserOwner(this.props) ||
+      (this.props.user.authenticated && !this.props.project.owner)
+    ) {
+      console.log('project to save:', this.props.project);
+      return this.props.saveProject(this.cmController.getContent());
+    } else if (this.props.user.authenticated) {
+      return this.props.cloneProject();
+    }
+
+    this.props.showErrorModal('forceAuthentication');
+    return null;
+  }
   handleGlobalKeydown(e) {
     // 83 === s
     if (
@@ -181,16 +196,7 @@ class IDEView extends React.Component {
     ) {
       e.preventDefault();
       e.stopPropagation();
-      if (
-        isUserOwner(this.props) ||
-        (this.props.user.authenticated && !this.props.project.owner)
-      ) {
-        this.props.saveProject(this.cmController.getContent());
-      } else if (this.props.user.authenticated) {
-        this.props.cloneProject();
-      } else {
-        this.props.showErrorModal('forceAuthentication');
-      }
+      this.saveProject();
       // 13 === enter
     } else if (
       e.keyCode === 13 &&
@@ -387,8 +393,11 @@ class IDEView extends React.Component {
                     setBlobUrl={this.props.setBlobUrl}
                     expandConsole={this.props.expandConsole}
                     clearConsole={this.props.clearConsole}
+                    saveProject={this.saveProject.bind(this)}
+                    project={this.props.project}
                     cmController={this.cmController}
                     language={this.props.preferences.language}
+                    unsavedChanges={this.props.ide.unsavedChanges}
                   />
                 </div>
               </section>

client/modules/IDE/reducers/files.js

@@ -147,8 +147,21 @@ const files = (state, action) => {
           return file;
         }
 
-        return Object.assign({}, file, { content: action.content });
+        return Object.assign({}, file, { content: action.content, changed: true });
       });
+    case ActionTypes.SET_UNSAVED_CHANGES:
+      if (action.value) {
+        // ignore.
+        return state;
+      }
+
+      return state.map((file) => {
+        if (file.changed) {
+          return Object.assign({}, file, { changed: false });
+        }
+        return file;
+      });
+      // return Object.assign({}, state, { unsavedChanges: action.value });
     case ActionTypes.SET_BLOB_URL:
       return state.map((file) => {
         if (file.id !== action.id) {
@@ -173,7 +186,8 @@ const files = (state, action) => {
           content: action.content,
           url: action.url,
           children: action.children,
-          fileType: action.fileType || 'file'
+          fileType: action.fileType || 'file',
+          changed: false,
         }];
       return newState.map((file) => {
         if (file.id === action.parentId) {

client/styles/abstracts/_variables.scss

@@ -1,7 +1,7 @@
 $base-font-size: 12;
 
 //colors
-$p5js-pink: #ed225d;
+$p5js-pink: #FFE117; /*DP Colours*/
 $processing-blue: #007BBB;
 $p5js-active-pink: #f10046;
 $white: #fff;

client/styles/components/_nav.scss

@@ -166,12 +166,23 @@
 
 .nav__item-logo {
   position: relative;
-  height: #{42 / $base-font-size}rem;
+  height: #{(42 - 1) / $base-font-size}rem;
   width: #{56 / $base-font-size}rem;
+  background:$p5js-pink;
 
   & span {
     position: absolute;
   }
+
+  svg{
+    width: 100%;
+    height: 90%;
+    padding-top: 5%;
+
+    path{
+      stroke: $dark;
+    }
+  }
 }
 .svg__logo g > path {
   @include themify() {

client/theme.js

@@ -7,7 +7,7 @@ export const Theme = {
 };
 
 export const colors = {
-  p5jsPink: '#ed225d',
+  p5jsPink: '#FFE117', // DP Colours
   processingBlue: '#007BBB',
   p5jsActivePink: '#f10046',
   white: '#fff',

dist/static/assets/webcam.js

@@ -1,110 +1,113 @@
 console.log('p5 version:', p5);
 console.log('ml5 version:', ml5);
+console.log(location.origin);
 
 let assets = {};
 
 var draw = function () {
-    // //test
-    // background(parseInt(Math.random()*255),parseInt(Math.random()*255),parseInt(Math.random()*255));
-    // image(video, -width/2, -height/2, width, height);
-    // console.log(detections)
 };
 
-var gotResults = function(err, result) {
-    if (err) {
-        console.log(err)
-        return
-    }
-};
+// var gotResults = function(err, result) {
+//     if (err) {
+//         console.log(err)
+//         return
+//     }
+// };
 
-function code_error(type, error) {
-    window.parent.postMessage({
-        'type': type,
-        'error': error.message,
-        'name': error.name,
-        'line': error.lineNumber - 2, // seems it giveswrong line numbers
-        'column': error.columnNumber
-    }, '*');
+// function code_error(type, error) {
+//     window.parent.postMessage({
+//         'type': type,
+//         'error': error.message,
+//         'name': error.name,
+//         'line': error.lineNumber - 2, // seems it giveswrong line numbers
+//         'column': error.columnNumber
+//     }, '*');
 
-}
+// }
 
-function no_code_error(type){
-    window.parent.postMessage({
-        'type': type,
-        'error': null
-    }, '*');
-}
+// function no_code_error(type){
+//     window.parent.postMessage({
+//         'type': type,
+//         'error': null
+//     }, '*');
+// }
 
-window.addEventListener("message", function (e) {
-    if (event.origin !== window.location.origin) {
-        console.error("Invalid origin of message. Ignored");
-        return;
-    }
+// window.addEventListener("message", function (e) {
+//     if (event.origin !== window.location.origin) {
+//         console.error("Invalid origin of message. Ignored");
+//         return;
+//     }
 
-    console.debug("receive", e.data);
+//     console.debug("receive", e.data);
     
-    switch (e.data.action) {
-        case 'asset':
-            if(e.data.content === null){
-                delete assets[e.data.id]; 
-            } else {
-                assets[e.data.id] = loadImage(e.data.content);
-            }
+//     switch (e.data.action) {
+//         case 'asset':
+//             if(e.data.content === null){
+//                 delete assets[e.data.id]; 
+//             } else {
+//                 assets[e.data.id] = loadImage(e.data.content);
+//             }
             
-            break;
-        case 'code':
-            let f = new Function("");
-            try {
-                f = new Function(e.data.draw);
-                no_code_error('syntax');
-            } catch (error) {
-                code_error('syntax', error);
-                // window.parent.postMessage({'syntax': error.lineNumber});
-            }
-            handleResults = f;
-            break;
+//             break;
+//         case 'code':
+//             let f = new Function("");
+//             try {
+//                 f = new Function(e.data.draw);
+//                 no_code_error('syntax');
+//             } catch (error) {
+//                 code_error('syntax', error);
+//                 // window.parent.postMessage({'syntax': error.lineNumber});
+//             }
+//             handleResults = f;
+//             break;
     
-        default:
-            console.error("Invalid action", e.data.action);
-            break;
-    }
+//         default:
+//             console.error("Invalid action", e.data.action);
+//             break;
+//     }
 
-});
+// });
 
 
 let faceapi;
 var video;
-var detections;
-var graphics;
+var lastFrame;
+var detections = [];
 
-let running = true;
 
-function pause() {
-    if (running)
-        running = false;
-    else {
-        running = true;
-        faceapi.detect(gotResults);
-    }
-}
+// function pause() {
+//     if (running)
+//         running = false;
+//     else {
+//         running = true;
+//         faceapi.detect(gotResults);
+//     }
+// }
 
 // by default all options are set to true
 const detection_options = {
     withLandmarks: true,
     withDescriptors: false,
       minConfidence: 0.5,
-    Mobilenetv1Model: '/assets/faceapi',
-    FaceLandmarkModel: '/assets/faceapi',
-    FaceLandmark68TinyNet: '/assets/faceapi',
-    FaceRecognitionModel: '/assets/faceapi',
+    Mobilenetv1Model: window.parent.location.origin + '/assets/faceapi',
+    FaceLandmarkModel: window.parent.location.origin + '/assets/faceapi',
+    FaceLandmark68TinyNet: window.parent.location.origin + '/assets/faceapi',
+    FaceRecognitionModel: window.parent.location.origin + '/assets/faceapi',
+  TinyFaceDetectorModel: window.parent.location.origin + '/assets/faceapi',
 }
 
 
+
 function setup() {
-    createCanvas(1280,720, WEBGL);
+    // createCanvas(1280,720, WEBGL);
+    createCanvas(540,420, WEBGL);
     smooth();
     noFill();
 
+
+    push();
+    translate(-width/2, -height/2);
+
     let constraints = {
         video: {
             width: { min: 720 },
@@ -113,9 +116,9 @@ function setup() {
         audio: false
     };
 
-    // graphics = createGraphics();
     video = createCapture(constraints);
-    console.log(video.videoWidth);
+    lastFrame = createGraphics(video.width, video.height);
+  
     console.log(video);
     // HeadGazeSetup(video);
     // video.size(width, height);
@@ -134,88 +137,25 @@ var handleResults = function(){
     image(video, -width/2 + 10, -height/2 + 10, width - 20, height -20);
 };
   
+
 gotResults = function(err, result) {
     if (err) {
         console.log(err)
         return
     }
-    // console.log(result)
+    
+    // store data for async draw function
     detections = result;
     
-    try{
-        push();
-        translate(-width/2, -height/2);
-        handleResults();
-        pop();
+    // size of video becomes known only after camera approval
+    if(lastFrame.width != video.width || lastFrame.height != video.height){
+        console.log('Resizing canvas');
+        lastFrame.resizeCanvas(video.width, video.height);
+    }
 
-        no_code_error('runtime');
-    }catch(error){code_error('runtime', error);}
+    // lastFrame.background('red');
+    lastFrame.image(video, 0,0, video.width, video.height);
 
-    // // background(220);
-    // background(255);
-
-    // push();
-    // // with WEBGL, the coordinate system is 0,0 in the center.
-    // translate(-width / 2, -height / 2, 0);
-    // image(video, 0, 0, width, height);
-
-    // // image(video, 0,0, width, height)
-    // if (detections) {
-    //     if (detections.length > 0) {
-    //         // console.log(detections)
-    //         drawBox(detections)
-    //         drawLandmarks(detections)
-    //         for (let detection of detections) {
-    //             let t = HeadGazeDetect(detection);
-
-    //             let rot = vecToRotation(t.rotation);
-
-    //             document.getElementById('yaw').value = rot[0];
-    //             document.getElementById('roll').value = rot[1];
-    //             document.getElementById('pitch').value = rot[2];
-    //             // let gaze = getMappedVectors()
-    //             // noFill();
-    //             // stroke(161, 255, 0,100);
-    //             // strokeWeight(2);
-    //             // beginShape();
-    //             // vertex(gaze[0].x,gaze[0].y);
-    //             // vertex(gaze[1].x,gaze[1].y);
-    //             // endShape();
-    //             // stroke(255, 255, 0,100);
-    //             // beginShape();
-    //             // vertex(gaze[0].x,gaze[0].y);
-    //             // vertex(gaze[2].x,gaze[2].y);
-    //             // endShape();
-    //             // stroke(0, 0, 255,100);
-    //             // beginShape();
-    //             // vertex(gaze[0].x,gaze[0].y);
-    //             // vertex(gaze[3].x,gaze[3].y);
-    //             // endShape();
-
-
-    //             // normalMaterial();
-    //             push();
-    //             console.log('translate', t.translation.data64F);
-                
-    //             // texture(graphics);
-    //             translate(width/2, height/2, 10);
-    //             // plane(70);
-    //             // translate(t.translation.data64F[0], t.translation.data64F[1], t.translation.data64F[2])
-    //             // rotateX(-rot[2]);
-    //             rotateY(rot[0]);
-    //             // rotateZ(rot[1]);
-
-    //     stroke(255, 0, 0);
-    //             // texture(graphics);
-    //             plane(70);
-    //             pop();
-    //         }
-    //     }
-
-    // }
-    // pop();
-    
-    if (running)
     faceapi.detect(gotResults);
 }
 
@@ -236,19 +176,15 @@ function drawBox(detections) {
 
 }
 
-function drawLandmarks(detections) {
-    // noFill();
-    // stroke(161, 95, 251)
-    // strokeWeight(2)
-
-    for (let i = 0; i < detections.length; i++) {
-        const mouth = detections[i].parts.mouth;
-        const nose = detections[i].parts.nose;
-        const leftEye = detections[i].parts.leftEye;
-        const rightEye = detections[i].parts.rightEye;
-        const rightEyeBrow = detections[i].parts.rightEyeBrow;
-        const leftEyeBrow = detections[i].parts.leftEyeBrow;
-        const jawOutline = detections[i].parts.jawOutline;
+function drawLandmarks(detection) {
+    // for (let i = 0; i < detections.length; i++) {
+    const mouth = detection.parts.mouth;
+    const nose = detection.parts.nose;
+    const leftEye = detection.parts.leftEye;
+    const rightEye = detection.parts.rightEye;
+    const rightEyeBrow = detection.parts.rightEyeBrow;
+    const leftEyeBrow = detection.parts.leftEyeBrow;
+    const jawOutline = detection.parts.jawOutline;
 
     drawPart(mouth, true);
     drawPart(nose, true);
@@ -258,14 +194,18 @@ function drawLandmarks(detections) {
     drawPart(rightEyeBrow, false);
     drawPart(jawOutline, false);
 
-    }
+    // }
 }
 
 function drawPart(feature, closed) {
     beginShape();
+
+    const factor_x = width / video.width;
+    const factor_y = height / video.height;
+
     for (let i = 0; i < feature.length; i++) {
-        const x = feature[i]._x
-        const y = feature[i]._y
+        const x = feature[i]._x *factor_x;
+        const y = feature[i]._y * factor_y;
         vertex(x, y)
     }
 
@@ -276,3 +216,35 @@ function drawPart(feature, closed) {
     }
 
 }
+
+/**
+ * Wrapper around p5.js color class
+ * @param {*} c color, either as array, or string (css name or HEX string)
+ */
+function getColor(c) {
+    if(!Array.isArray(c)) c = [c];
+    return new p5.Color(p5.instance, c);
+}
+
+var colors = {
+    red: getColor('red'),
+    blue: getColor('blue'),
+    green: getColor('green'),
+};
+
+function faceDistance(face1, face2){
+    // distance between faces, in pixels, not meters.. for now
+
+}
+
+function getBoundingBox(){
+    // arguments contains points,  or sets of points. Find bbox
+    console.log(arguments)
+    
+    // return {
+    //     top: 
+    //     left:
+    //     width:
+    //     height:
+    // }
+}

docker-compose.yml

@@ -6,7 +6,7 @@ services:
       - dbdata:/data/db
   app:
     build:
-      context: .
+      context: ./
       dockerfile: Dockerfile
       target: production
     # uncomment the following line to pull the image from docker hub
@@ -17,36 +17,42 @@ services:
     #   - "$PWD/.env.production"
     environment:
       - API_URL
-      - MONGO_URL
-      - PORT
-      - SESSION_SECRET
       - AWS_ACCESS_KEY
-      - AWS_SECRET_KEY
-      - S3_BUCKET
       - AWS_REGION
-      - GITHUB_ID
-      - GITHUB_SECRET
-      - MAILGUN_DOMAIN
-      - MAILGUN_KEY
+      - AWS_SECRET_KEY
+      - CORS_ALLOW_LOCALHOST
       - EMAIL_SENDER
       - EMAIL_VERIFY_SECRET_TOKEN
-      - S3_BUCKET_URL_BASE
-      - GG_EXAMPLES_USERNAME
-      - GG_EXAMPLES_PASS
-      - GG_EXAMPLES_EMAIL
-      - GOOGLE_ID
-      - GOOGLE_SECRET
+      - EXAMPLE_USERNAME
       - EXAMPLE_USER_EMAIL
       - EXAMPLE_USER_PASSWORD
+      - GG_EXAMPLES_USERNAME
+      - GG_EXAMPLES_EMAIL
+      - GG_EXAMPLES_PASS
       - ML5_EXAMPLES_USERNAME
-      - ML5_EXAMPLES_PASS
       - ML5_EXAMPLES_EMAIL
+      - ML5_EXAMPLES_PASS
+      - GITHUB_ID
+      - GITHUB_SECRET
+      - GOOGLE_ID
+      - GOOGLE_SECRET
+      - MAILGUN_DOMAIN
+      - MAILGUN_KEY
+      - MONGO_URL
+      - PORT
+      - S3_BUCKET
+      - S3_BUCKET_URL_BASE
+      - SESSION_SECRET
+      - UI_ACCESS_TOKEN_ENABLED
+      - UPLOAD_LIMIT
+      - MOBILE_ENABLED
+
       # you can either set this in your .env or as an environment variables
       # or here YOU CHOOSE
       # - MONGO_URL=mongodb://mongo:27017/p5js-web-editor
     volumes:
-      - .:/opt/node/app
-      - /opt/node/app/node_modules
+      - .:/usr/src/app
+      - /usr/src/app/node_modules
     ports:
       - '8000:8000'
     depends_on: