chiunhau / p5-manager Goto Github PK

View Code? Open in Web Editor NEW

341.0 14.0 53.0 3.36 MB

A p5js template builder & sketches manager. Built for p5js enthusiasts.

JavaScript 99.85% HTML 0.04% Dockerfile 0.01% Svelte 0.09%

p5js template management es6 gui sketches-manager livereload nodejs

p5-manager's People

Contributors

Stargazers

Watchers

Forkers

jonnydubowsky gitter-badger thedanheller mexitalian digitalight nsina kravenoff42 tbrams infernalmaster ayeshakhan7 jiku peterkappus zerox-dg emersonmellado manveru thinhphan theliquidcharcoal advancedor96 jromeem hobg0blin stephensmitchell-forks wisehackermonkey nopivnick philipbest abelrasheed clementoriol zoeyshen2333 danielw75 michaelpaulukonis raetrakt caglasen sspboyd titanroyal cervelleless rahsai94 andreteixeira1998 ankycheng jenkai pencaster jobajuba renwoox micrub mr-oss d-t-666 informaticacba tlm9376 psychas jordan-w-99 captake brokebrah xrx0xmx oshimaryo julanu

p5-manager's Issues

Error: SSL Error: CERT_UNTRUSTED

Experiencing difficulty installing this package from npm.

λ ~/ npm i p5-manager
npm WARN package.json [email protected] No README.md file found!
npm WARN package.json [email protected] No README.md file found!
npm WARN package.json [email protected] No README.md file found!
npm WARN package.json [email protected] No README.md file found!
npm WARN package.json [email protected] No README.md file found!
npm http GET https://registry.npmjs.org/p5-manager
npm ERR! Error: SSL Error: CERT_UNTRUSTED
npm ERR!     at ClientRequest.<anonymous> (/home/dlo/.nvm/v0.8.16/lib/node_modules/npm/node_modules/request/main.js:525:26)
npm ERR!     at ClientRequest.g (events.js:192:14)
npm ERR!     at ClientRequest.EventEmitter.emit (events.js:96:17)
npm ERR!     at HTTPParser.parserOnIncomingClient [as onIncoming] (http.js:1462:7)
npm ERR!     at HTTPParser.parserOnHeadersComplete [as onHeadersComplete] (http.js:111:23)
npm ERR!     at CleartextStream.socketOnData [as ondata] (http.js:1367:20)
npm ERR!     at CleartextStream.CryptoStream._push (tls.js:526:27)
npm ERR!     at SecurePair.cycle (tls.js:880:20)
npm ERR!     at EncryptedStream.CryptoStream.write (tls.js:267:13)
npm ERR!     at Socket.ondata (stream.js:38:26)
npm ERR! If you need help, you may report this log at:
npm ERR!     <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR!     <[email protected]>

npm ERR! System Linux 4.17.19-200.fc28.x86_64
npm ERR! command "/home/dlo/.nvm/v0.8.16/bin/node" "/home/dlo/.nvm/v0.8.16/bin/npm" "i" "p5-manager"
npm ERR! cwd /home/dlo
npm ERR! node -v v0.8.16
npm ERR! npm -v 1.1.69
npm ERR! code ESSL
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /home/dlo/npm-debug.log
npm ERR! not ok code 0

Install Error

i got this error

` $ npm install -g p5-manager

npm WARN deprecated [email protected]: We're super 😸 excited that you're trying to use ES2015 syntax, but instead of continuing yearly presets 😭 , we recommend using babel-preset-env: npm install babel-preset-env. preset-env without options will compile ES2015+ down to ES5. And by targeting specific browsers, Babel can do less work and you can ship native ES2015+ to users 😎 ! Also, we are in the process of releasing v7, so give http://babeljs.io/blog/2017/09/12/planning-for-7.0 a read and test it! Thanks so much for using Babel 🙏 , please give us a follow @babeljs for updates, join slack.babeljs.io for discussion and help support at opencollective.com/babel

npm ERR! Unexpected end of input at 1:25655

npm ERR! x","karma-firefox-launcher":"0.1.x","karma-opera-launcher":"0.1.x","p

npm ERR! `

Live Reload

Hi There,

Thanks for making this.

Was wondering if there would be a way to add live reload, I believe this is the same as opening a node express server with options --open --hot.

I see that the GUI you built for this is in Vue, so basically what I'm asking for is the same thing that vue-cli + vue-loader gives you, the ability to reload the page on file save w/ es6, without the need to manually reload the browser page.

Any idea if that would be possible?

Toggle menu covers the sketch

If you have a small canvas or if your sketch happens in the top left corner, the toggle menu covers a significant part of the sketch.

I think it would be good to make it smaller, or maybe having a margin on the body so the canvas doesn't reach that part.

Server for bundle proejct

There will be nice to have server feature for bundle project. Now it's only work for collections.

p5 update

hello_?_iI try p5 update,but some bad thing happened:
Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
so i have to use npm download the latest p5 ?Or someone know another way?

Error

When I try to create a project, I get this error

fs.js:663
return binding.open(pathModule.toNamespacedPath(path),
^

Error: ENOENT: no such file or directory, open 'D:\all items\Crazy mapping video project.p5rc'
at Object.fs.openSync (fs.js:663:18)
at Object.fs.readFileSync (fs.js:568:33)
at C:\Users\hrovn\AppData\Roaming\npm\node_modules\p5-manager\generator\generator.js:42:30
at C:\Users\hrovn\AppData\Roaming\npm\node_modules\p5-manager\generator\generator.js:113:11
at FSReqWrap.oncomplete (fs.js:149:15)

Command for updating p5.js libraries

Currently the p5 libraries are built-in and not able to update itself.
Should provide something like p5 update to download the latest version of p5 libraries (including p5.js, p5.dom.js and p5.sound.js) and replace the old ones.

But a major problem is that, since p5-manager uses global libraries, which means every projects in a collections depends on the same libraries files, updating libraries with such command might cause some side effects.

The line-height is too small in sidebar

If folder already exists ask to create in it.

Can also check if its empty and ask based on that.

Friendly Error Message

gui should have better error messages
server should not crash for simple user errors

Is it possible to generate sketch without a collection

If I want my sketches to have there own lib files with different versions of p5. Is it possible to just generate a sketch with the libs included in the same folder, instead of create a collection that shares the same libs?

Package Vulnerabilities

Version: [email protected]

npm audit finds 16 vulnerabilities (9 low, 3 moderate, 4 high). See npm audit output below:

                       === npm audit security report ===

┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ fresh                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 0.5.2                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > express > fresh                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/526                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ fresh                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 0.5.2                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > express > send > fresh                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/526                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ fresh                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 0.5.2                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > express > serve-static > send > fresh           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/526                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 2.6.9 < 3.0.0 || >= 3.1.0                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > body-parser > debug                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/534                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 2.6.9 < 3.0.0 || >= 3.1.0                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > debug                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/534                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 2.6.9 < 3.0.0 || >= 3.1.0                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > express > debug                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/534                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 2.6.9 < 3.0.0 || >= 3.1.0                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > express > finalhandler > debug                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/534                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 2.6.9 < 3.0.0 || >= 3.1.0                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > express > send > debug                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/534                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 2.6.9 < 3.0.0 || >= 3.1.0                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > express > serve-static > send > debug           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/534                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 2.6.9 < 3.0.0 || >= 3.1.0                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > morgan > debug                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/534                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ negotiator                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 0.6.1                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > express > accepts > negotiator                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/106                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ mime                                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 1.4.1 < 2.0.0 || >= 2.0.3                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > express > send > mime                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/535                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ mime                                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 1.4.1 < 2.0.0 || >= 2.0.3                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > express > serve-static > send > mime            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/535                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > chokidar > anymatch > micromatch > braces       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/786                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > livereload > chokidar > anymatch > micromatch > │
│               │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/786                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Code Injection                                               │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ morgan                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=1.9.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ p5-manager                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ p5-manager > morgan                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/736                             │
└───────────────┴─────────────────────────────────────

45px of iframe is hidden due to parent styles

Due to the 45px margin left of iframe 45px of the canvas will not be visible if setting canvas full size.

In the following example you would expect to see a 50 x 50 px red square in the top right corner.
Instead you see a 5 x 50 px red rectangle.

function setup() {
  createCanvas(windowWidth, windowHeight);
}
function draw() {
  var squareSize = 50;
  fill('red');
  rect(width - squareSize, 0, squareSize, squareSize);
}

This could be fixed by the following setup:

createCanvas(windowWidth - 45, windowHeight);

But that is obviously not a good idea for many reasons.
The styles for this is hidden in the p5-manager server, I couldn't figure out where it was installed on my local machine.

Problem with managing many collections at the same time.

Hello,
I am under Linux Mint 20.1 as environment.
I succeed install p5-manager with npm, no problem.
I succeed to create many 'collections' with projects inside...
However, each time, i am forced to enter a particular collection directory and then launch p5 server...I can't launch p5 server in the folder containing all the collections to manage them at once.
Is there a way to create a .p5rc file at the top root folder of all the collections to manage them at once ?
I tried without success.
Thx,
CaptnFurax.

Enhancements for larger p5js project

By now p5-manager can only compile ES6 syntax into ES5, file by file, which is convenient for small sketch.
However when developing larger project, we need more advantage of ES6 and modular javascript features. e.g. import or require some third party libraries, or separate you whole big sketch into components/modules for better management and reuse.

Following features are what I imagine / take into consideration for next release :

p5 generate -w to generate instance mode template, and webpack configs with Babel loader, in ES6 syntax of course. So that import and exports are available for browser!!!
Independent webpack.config.js for each project?
Can webpack watch all files at the same time while run with different config file?
Keep p5 generate --es6 for those only need the ES6 syntax features in global mode.

Updating library versions isn't consistent

When the program is run with the update command it will create a "libraries" folder with the most recent p5 files in the current folder, no matter where it is run it from. It seems to me that it was intended to be run from inside a project's folder or a collection.

I believe the program should be made more context aware when running updates so that it isn't writing blindly to the current folder and also have a flag to globally update the files new projects are drawn from.

?

Keyboard events appear to not be firing in GUI mode

Thank you so much for doing this project! I'm just getting into using p5.js and this project has been an absolute godsend.

It appears that keyboard events aren't firing in GUI mode only. It looks like mouse events like mouseMoved fire correctly. I wonder if the keyboard events are just failing to be passed along into the iframe.

No such file or directory

When running p5 serve I get an error saying it cannot open the file .p5rc
This is with an untouched project generated by p5 manager. Not sure what I'm meant to do?

Windows 10
Here's the full error info:

GET /api/p5rc 500 11.255 ms - 1237
Error: ENOENT: no such file or directory, open 'C:\Users\chris\Documents\Web Study\p5\p5-bezier\.p5rc'
at Error (native)
at Object.fs.openSync (fs.js:641:18)
at Object.fs.readFileSync (fs.js:509:33)
at C:\Users\chris\AppData\Roaming\npm\node_modules\p5-manager\server\server.js:28:27
at Layer.handle [as handle_request] (C:\Users\chris\AppData\Roaming\npm\node_modules\p5-manager\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\chris\AppData\Roaming\npm\node_modules\p5-manager\node_modules\express\lib\router\route.js:131:13)
at Route.dispatch (C:\Users\chris\AppData\Roaming\npm\node_modules\p5-manager\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\chris\AppData\Roaming\npm\node_modules\p5-manager\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\chris\AppData\Roaming\npm\node_modules\p5-manager\node_modules\express\lib\router\index.js:277:22
at Function.process_params (C:\Users\chris\AppData\Roaming\npm\node_modules\p5-manager\node_modules\express\lib\router\index.js:330:12)

Deleted projects still show on GUI's project list

.p5rc won't update itself when someone delete projects. So it still tracks those already not exist. There are some possible ways to solve this:

Show hints on error, asking users to update their .p5rc manually.
Provide a command like p5 delete PROJECT_NAME to remove specific project folder and update .p5rc as a callback.
Get rid of the reliance on .p5rc, and create a new way to track active projects.

fix Sidebar styles

Creating static overview page

Hi.

I love the way p5 manager works. But now I want to use it on GitHub Pages. But as GitHub Pages only supports static HTML it would be very nice if I could let p5 manager create the standard overview page as static HTML page without the need to run the server.
Would that be possible to implement?

Greetings
Saij

Delete Project

Hi,
it would be nice, to delete one of the current projects in the collection. I tried to delete the files and the folder, which didn't help since the reference stayed, only content was gone.

Sorry if there is a way, but i am missing it.
Btw. Thanks for such great tool!!
Filip

Error message when installing

When installing this package i get the following error message

npm WARN saveError ENOENT: no such file or directory, open '/Users/yannpatrickmartins/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/Users/yannpatrickmartins/package.json'
npm WARN yannpatrickmartins No description
npm WARN yannpatrickmartins No repository field.
npm WARN yannpatrickmartins No README data
npm WARN yannpatrickmartins No license field.

.p5rc not created

While trying out the GUI i noticed none of my projects were loaded in the side menu.
The console log showed: Error: ENOENT: no such file or directory, open '$PATH_TO_MYCOLLECTION.p5rc'
On inspection no file .p5rc was found in the directory.
I solved the problem by manually creating the file and adding the projects:

.p5rc example:

{
    "collectionName": "myp5js",
    "projects": [
        "project_1", 
        "project_2"
    ]
}

Error: EACCES: permission denied, open

Hi
I installed p5-manager with sudo pnpm install -g p5-manager but I got the below error:

$ p5
fs.js:646
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: EACCES: permission denied, open '/usr/pnpm-global/1/node_modules/.registry.npmjs.org/array-unique/0.2.1/node_modules/array-unique/index.js'
    at Object.fs.openSync (fs.js:646:18)
    at Object.fs.readFileSync (fs.js:551:33)
    at Object.Module._extensions..js (module.js:662:20)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/usr/pnpm-global/1/node_modules/.registry.npmjs.org/micromatch/2.3.11/node_modules/micromatch/lib/utils.js:13:16)
    at Module._compile (module.js:652:30)

What did I miss ?

Thank you in advance,

Michal

Add split view support

p5-manager is built for demo and quick development. And horizontal split view would be very helpful for demo or teaching. This would be introduced in next big update!

Small GUI Update

Hi Chiun,

I've just started using this tool and it's really convenient — one thing I noticed is that the canvas is actually knocked out of the browser window by 45px (not ideal when you're drawing to corners etc.).

I did a small update to the styling in vue so that when the menu is closed the background of the sidebar is transparent and the margin is removed (for both sides in split view):

remove margin-left: 45px; in generator.

<style lang="scss">
  a {
    color: #999;
    text-decoration: none;

    &:hover, &:active {
      color: #555;
    }

    &:active {
      color: #f07;
    }
  }

  .sidebar {
    position: absolute;
    z-index: 10;
    top: 0;
    background-color: rgba(0,0,0,0);
    width: 308px;
    height: 100%;
    text-align: left;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;

    h2 {
      margin-top: 10px;
      padding-left: 20px;
      color: #333;
    }

    ul {
      list-style: none;
      padding-left: 20px;
    }

    &.sidebar--active {
      transition: all 0.5s;
    }

    .project-link--active {
      color: #f07;
    }

    .staticBtn {
      color: #ccc;
      font-size: 15px;

      .active {
        color: #aaa;
      }
    }
  }

  .toggle {
    position: absolute;
    top: 10px;
    background-color: transparent;
    border: none;
    transition: all 1s;
    -webkit-transition: all 1s;
    z-index: 11;

    &:hover {
      cursor: pointer;
    }

    &:focus {
      outline: none;
    }

    img {
      width: 24px;
    }

    &.toggle--left {
      left: 180px;

    }

    &.toggle--right {
      right: 180px;

    }

    &.toggle--active {
      -ms-transform: rotate(144deg); /* IE 9 */
      -webkit-transform: rotate(144deg); /* Chrome, Safari, Opera */
      transform: rotate(144deg);
    }
  }

  .about {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    font-size: 14px;
    padding-left: 20px;

    p {
      margin-top: 0;
      color: #999;
    }

    .twitter {
      color: #f07;
    }
  }

  .link-split {
    display: block;
    color: #f07;
  }

  .split-view--left .sidebar {
    left: -255px;
    text-align: left;
  }

  .split-view--right .sidebar {
    right: -255px;
    text-align: right;
  }

  .split-view--left .sidebar.sidebar--active {
    background-color: #f5f5f5;
    left: 0;
  }

  .split-view--right .sidebar.sidebar--active {
    background-color: #f5f5f5;
    right: 0;
  }

  .split-view--left .sidebar h2 {
    margin-top: 10px;
    padding-left: 20px;
  }

  .split-view--right .sidebar h2 {
    margin-top: 10px;
    padding-right: 20px;
  }

  .sidebar h2 a {
    color: #333;
  }

  .split-view--left .sidebar ul {
    list-style: none;
    padding-left: 20px;
  }

  .split-view--right .sidebar ul {
    list-style: none;
    padding-right: 20px;
  }

  .split-view.split-view--left .toggle{
    left: 260px;
  }

  .split-view.split-view--right .toggle{
    right: 260px;
  }

  .split-view.split-view--right .about {
    display: none;
  }

  .single-view {
    .sidebar {
      left: -255px;
      text-align: left;

      &.sidebar--active {
        background-color: #f5f5f5;
        left: 0;
      }

      h2 {
        margin-top: 10px;
        padding-left: 20px;
      }

      ul {
        list-style: none;
        padding-left: 20px;
      }
      .toggle{
        left: 260px;
      }
    }
  }
</style>

Can't scroll 🥴

more generator options

I am thinking of 2 common workflow options that would be great to include.

CDN option

Generating just a sketch.js and index.html (and maybe style.css?) in a new directory.
The index could point to the P5 CDN files instead. I tend to work this way when just quickly creating little sketches.
Maybe a -c flag could stand for CDN. Example syntax p5 g -c SKETCHNAME

How to include additional libraries

I have been using the P5Play library a lot recently, and P5Geolocation
Would be nice to be able to include the P5play library or P5Geolocation files in a bundle for example
Example syntax: p5 g -b -i="P5Play" SKETCHNAME

Easily deploy to github pages

First of all, I wanted to thank you for the great work done with this project !

Now, I wanted to easily deploy my local p5 server to github pages but I can't get it to work. Is there an easy way to do it?
Anyway, I think it would make a great feature !

Can p5-manager be configured to start with other servers (e.g. lite-server, http-server)?

For example, I just set up my local development environment yesterday with p5 and lite-server, because I found it was really handy to edit files, and the browser automatically refresh when you save the file (e.g. the sketch).

I'm new to web development - thanks for your patience with me!

Link to static mode is missing

There should be an icon at the end of project name which opens a new tab to /project_name/index.html

Typescript Support?

Hi all,

Would anyone find value in typescript support?

Can't generate p5 basic files.

This is the console result:

p5-manager version 0.4.2
   create : my_project
fs.js:660
  return binding.open(pathModule.toNamespacedPath(path),
                 ^

Error: ENOENT: no such file or directory, open '.p5rc'
    at Object.fs.openSync (fs.js:660:18)
    at Object.fs.readFileSync (fs.js:565:33)
    at /usr/local/lib/node_modules/p5-manager/generator/generator.js:43:30
    at /usr/local/lib/node_modules/p5-manager/generator/generator.js:170:9
    at FSReqWrap.oncomplete (fs.js:153:20)

Customize port

should have option for other port

Custom Templates

Hey this is a great tool, thanks for making it!

I was taking a look at the coding for the generator and I thought it might be cool if you could create custom template files, ( ie 'my_custom.html', my_sketch.js', etc.) put in the templates directory with some command like 'p5 template [filename.js]', and then a way to set it as the default like 'p5 template set [filename.js]'

I'm only just learning node.js so I'm not really sure how to implement this as it is.

But a someone who likes to tweak his environment to save time I would love a feature like this.

if it seems like a feature too far I understand, especially since I could just edit the template files manually to have the same effect.

Thanks!

p5 generate not finding .p5rc after last update

System: Debian 9

Node Version: V8.8.1

NPM Version: V5.4.2

P5-Manager Version: V0.3.2

After issuing p5 update for the last time, the command p5 g test will return the following message if no previous project was created before:

p5-manager version 0.3.2
   create : test
fs.js:648
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '.p5rc'
    at Object.fs.openSync (fs.js:648:18)
    at Object.fs.readFileSync (fs.js:553:33)
    at /usr/local/lib/node_modules/p5-manager/generator/generator.js:42:30
    at /usr/local/lib/node_modules/p5-manager/generator/generator.js:113:11
    at FSReqWrap.oncomplete (fs.js:137:15)

Library Update

Hey @chiunhau , just a heads up:
the p5.js file in the libraries folder generates a libraries folder with v0.6.0 (Jan 19, 2018) after generating a new bundle, rather than v0.6.1 (Apr 27, 2018).

I tried updating using p5 u and it seems to download a folder with the latest libraries, but doesn't update the libraries folder when I generate a bundle using p5 generate -b.

Excuse the multiple edits.
Best,
Mike

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.