Contact Form & server file names in P5

CharlesDesign

Hi All,

I'm trying to create a small website in P5.js and I have two questions:

• I want to allow the user to browse the content of "myWebsite/assets", the interaction isn't a problem but how can I retrieve the names of all the files within "assets", so I can use it as a String for access? Just the clarify "myWebsite/assets" is located on the server.

• What's the easiest way to implement a contact form? If something like jotform is an option then where can I paste the Html code?

Thanks in advance, Charles

KevinWorkman

What happens when you navigate to myWebsite/assets in a web browser?

Depending on your server settings, you might see a list of files. If so, then you could just parse that text and create the listing from there. If not, then you might be better off creating a json file and parsing that.

I'm not sure what you mean by easiest. What you think is easy is really up to you. But nothing is stopping you from just using html to create whatever you want.

GoToLoop

https://forum.Processing.org/two/discussion/18473/how-to-list-the-files-in-a-directory-in-p5

CharlesDesign

@KevinWorkman My website isn't live so, unfortunately, I can't check, but providing I get a list (which I assume I just a matter of server permission) then how can it be stored for parsing in JS?

Excuse my ignorance but considering the whole website consists of a JS sketch then surely if I add it as HTML then it'll always be overlaying my sketch? As opposed to when prompted by the user upon a button press.

@GoToLoop No luck there, unfortunately, someone suggested NodeJS which I'm looking into.

GoToLoop

... someone suggested NodeJS which I'm looking into.

You mean from here, right?: https://GitHub.com/processing/p5.js/issues/1632

Unfortunately I got no experience w/ servers at all, so I can't help you there! :-S
Regardless, I can give you some advises I think... :-\"

• As you've realized by now, scripts run by a browser can't directly request a list of file paths.
• For that, you're gonna need to write a program in any language, which allows it to act as a server and access files from the OS it is running under.
• For instance, any other language can do that: Java, Python, PHP, Ruby, NodeJS and even C & D!
• Actually, Processing got a library for that: https://Processing.org/reference/libraries/net/index.html
• For local access, you may try out to write a simple Processing sketch, which upon request, would send a list of file paths to your p5.js sketch.
• For remote access, you're gonna need to send the files themselves.
• Problem is, I've got no idea how! :-&

GoToLoop

On 2nd thought, I think the Processing's Net library only works w/ itself. b-(
If you choose Processing for writing your server, I guess HTTP-Requests would be the right library for it:
https://GitHub.com/runemadsen/HTTP-Requests-for-Processing

CharlesDesign

Indeed :)

I followed this tutorial on node.js but it seems like an overkill for my purpose. https://github.com/processing/p5.js/wiki/p5.js,-node.js,-socket.io

The server will be hosted with an online service so unfortunately processing isn't an option.

I'm thinking of having a text file on the server which contains all the paths and file names. It can be updated every time the website changes.

KevinWorkman

You might not need to write anything too special for this. Depending on how your server works, you might not need to write any server-side code.

My website isn't live so, unfortunately, I can't check, but providing I get a list (which I assume I just a matter of server permission) then how can it be stored for parsing in JS?

You wouldn't need to really store it. If you get a list, then that's an html file. You can read the html file just like you'd read any other file. You could use the loadStrings() function to read the directory listing, then do whatever you want with the contents.

Excuse my ignorance but considering the whole website consists of a JS sketch then surely if I add it as HTML then it'll always be overlaying my sketch? As opposed to when prompted by the user upon a button press.

You'd split it up into multiple steps. You aren't directly showing the directory listing to the user. You're parsing the file returned by the server, and then doing whatever you want with it. You could store it as an ArrayList of filenames, and then show them to the user when they press a button. It's completely up to you.

GoToLoop

I'm thinking of having a text file on the server which contains all the paths and file names.

That's an excellent "lazy" idea! *-:)
Just keep re-uploading that ".txt" file to your online host server every time you change your files. :>
Then use loadStrings() within preload() in your p5.js sketch in order to collect those paths! \m/
This way, there's no need to write any server-side code. ;)