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

Compare commits

base: r:10ed1de8108d6d84bae251d99e83ad1535f00d1a
Branches Tags
r:dev/prod
r:single_docker
r:develop
r:fix/s3v4
r:v1
..
compare: r:dc5fba2e5ada98516fcb47731a7e83f6de233a5e
Branches Tags
r:single_docker
r:dev/prod
r:develop
r:fix/s3v4
r:v1

No commits in common. "10ed1de8108d6d84bae251d99e83ad1535f00d1a" and "dc5fba2e5ada98516fcb47731a7e83f6de233a5e" have entirely different histories.
10ed1de810 ... dc5fba2e5a

11 changed files with 224 additions and 311 deletions
Show stats Expand all files Collapse all files

5
client/components/Nav.jsx
View file

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

1
client/images/dp-logo-line-drawing.svg
View file

File diff suppressed because one or more lines are too long
Side by side

Before

Width:  |  Height:  |  Size: 7.7 KiB

1
client/modules/IDE/components/Editor.jsx
View file

@ -321,6 +321,7 @@ 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

94
client/modules/IDE/components/PreviewFrame.jsx
View file

@ -23,8 +23,6 @@ import { hijackConsoleErrorsScript, startTag, getAllScriptOffsets }
from '../../../utils/consoleUtils';
// let lastUpdate = null;
const shouldRenderSketch = (props, prevProps = undefined) => {
const { isPlaying, previewIsRefreshing, fullView } = props;
@ -329,77 +327,17 @@ class PreviewFrame extends React.Component {
renderSketch() {
const doc = this.iframeElement;
// 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();
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, ' ');
const localFiles = this.injectLocalFiles();
if (this.props.isPlaying) {
this.props.clearConsole();
srcDoc.set(doc, localFiles);
if (this.props.endSketchRefresh) {
this.props.endSketchRefresh();
}
});
} else {
doc.srcdoc = '';
srcDoc.set(doc, ' ');
}
}
render() {
@ -446,18 +384,7 @@ 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
}),
@ -465,7 +392,6 @@ PreviewFrame.propTypes = {
PreviewFrame.defaultProps = {
fullView: false,
unsavedChanges: false,
cmController: {}
};

29
client/modules/IDE/pages/IDEView.jsx
View file

@ -173,21 +173,6 @@ 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 (
@ -196,7 +181,16 @@ class IDEView extends React.Component {
) {
e.preventDefault();
e.stopPropagation();
this.saveProject();
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');
}
// 13 === enter
} else if (
e.keyCode === 13 &&
@ -393,11 +387,8 @@ 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>

18
client/modules/IDE/reducers/files.js
View file

@ -147,21 +147,8 @@ const files = (state, action) => {
return file;
}
return Object.assign({}, file, { content: action.content, changed: true });
return Object.assign({}, file, { content: action.content });
});
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) {
@ -186,8 +173,7 @@ const files = (state, action) => {
content: action.content,
url: action.url,
children: action.children,
fileType: action.fileType || 'file',
changed: false,
fileType: action.fileType || 'file'
}];
return newState.map((file) => {
if (file.id === action.parentId) {

2
client/styles/abstracts/_variables.scss
View file

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

13
client/styles/components/_nav.scss
View file

@ -166,23 +166,12 @@
.nav__item-logo {
position: relative;
height: #{(42 - 1) / $base-font-size}rem;
height: #{42 / $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() {

2
client/theme.js
View file

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

316
dist/static/assets/webcam.js vendored
View file

@ -1,113 +1,110 @@
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 lastFrame;
var detections = [];
var detections;
var graphics;
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: 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',
Mobilenetv1Model: '/assets/faceapi',
FaceLandmarkModel: '/assets/faceapi',
FaceLandmark68TinyNet: '/assets/faceapi',
FaceRecognitionModel: '/assets/faceapi',
}
function setup() {
// createCanvas(1280,720, WEBGL);
createCanvas(540,420, WEBGL);
createCanvas(1280,720, WEBGL);
smooth();
noFill();
push();
translate(-width/2, -height/2);
let constraints = {
video: {
width: { min: 720 },
@ -116,9 +113,9 @@ function setup() {
audio: false
};
// graphics = createGraphics();
video = createCapture(constraints);
lastFrame = createGraphics(video.width, video.height);
console.log(video.videoWidth);
console.log(video);
// HeadGazeSetup(video);
// video.size(width, height);
@ -136,27 +133,90 @@ var handleResults = function(){
background((millis()/100)%255,0,0);
image(video, -width/2 + 10, -height/2 + 10, width - 20, height -20);
};
gotResults = function(err, result) {
if (err) {
console.log(err)
return
}
// store data for async draw function
// console.log(result)
detections = result;
try{
push();
translate(-width/2, -height/2);
handleResults();
pop();
no_code_error('runtime');
}catch(error){code_error('runtime', error);}
// // 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();
// 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);
}
// lastFrame.background('red');
lastFrame.image(video, 0,0, video.width, video.height);
faceapi.detect(gotResults);
if (running)
faceapi.detect(gotResults);
}
function drawBox(detections) {
@ -176,36 +236,36 @@ function drawBox(detections) {
}
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;
function drawLandmarks(detections) {
// noFill();
// stroke(161, 95, 251)
// strokeWeight(2)
drawPart(mouth, true);
drawPart(nose, true);
drawPart(leftEye, true);
drawPart(leftEyeBrow, false);
drawPart(rightEye, true);
drawPart(rightEyeBrow, false);
drawPart(jawOutline, false);
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;
// }
drawPart(mouth, true);
drawPart(nose, true);
drawPart(leftEye, true);
drawPart(leftEyeBrow, false);
drawPart(rightEye, true);
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 *factor_x;
const y = feature[i]._y * factor_y;
const x = feature[i]._x
const y = feature[i]._y
vertex(x, y)
}
@ -215,36 +275,4 @@ function drawPart(feature, closed) {
endShape();
}
}
/**
* 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:
// }
}

54
docker-compose.yml
View file

@ -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,42 +17,36 @@ services:
# - "$PWD/.env.production"
environment:
- API_URL
- AWS_ACCESS_KEY
- AWS_REGION
- AWS_SECRET_KEY
- CORS_ALLOW_LOCALHOST
- EMAIL_SENDER
- EMAIL_VERIFY_SECRET_TOKEN
- EXAMPLE_USERNAME
- EXAMPLE_USER_EMAIL
- EXAMPLE_USER_PASSWORD
- GG_EXAMPLES_USERNAME
- GG_EXAMPLES_EMAIL
- GG_EXAMPLES_PASS
- ML5_EXAMPLES_USERNAME
- 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
- AWS_ACCESS_KEY
- AWS_SECRET_KEY
- S3_BUCKET
- AWS_REGION
- GITHUB_ID
- GITHUB_SECRET
- MAILGUN_DOMAIN
- MAILGUN_KEY
- EMAIL_SENDER
- EMAIL_VERIFY_SECRET_TOKEN
- S3_BUCKET_URL_BASE
- GG_EXAMPLES_USERNAME
- GG_EXAMPLES_PASS
- GG_EXAMPLES_EMAIL
- GOOGLE_ID
- GOOGLE_SECRET
- EXAMPLE_USER_EMAIL
- EXAMPLE_USER_PASSWORD
- ML5_EXAMPLES_USERNAME
- ML5_EXAMPLES_PASS
- ML5_EXAMPLES_EMAIL
# 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:
- .:/usr/src/app
- /usr/src/app/node_modules
- .:/opt/node/app
- /opt/node/app/node_modules
ports:
- '8000:8000'
depends_on: