Loading files (e.g., loadBytes) in p5.js using node.js

p5.js Coding Questions
1

Hello all,

I am working on a basic project where I want to have a webpage available to my group members where they can go to see the current status of some data files that are populated by a separate program and copied to my server. I’ve made a lot of progress and I think it will work, but I’ve run into a snag I haven’t been able to figure out, but I suspect it is probably fundamental enough to web programming/javascript that I just don’t know how to form a proper search for it.

I’ve managed to put together a p5.js sketch using loadBytes() that pulls the data from the files and graphs it. I’m trying to host the page on a NAS that has a compatible node.js package. I was able to mostly figuring out the node.js hosting, starting from the w3schools tutorials and eventually landing on something close to what is shown on the relevant node.js wiki (also here, for reference).

However, here’s my problem. When I use the Chrome web server to test the page (thanks to these forums for pointing me in that direction), I’m able to load the data files from a subfolder in the same location as index.html & sketch.js, but when I host the page with node.js, the console gives me a 404 error. It finds the files if I put them in the same directory as index.html, but I’d prefer to tuck them into their own folder, and I’d like to know how to solve this problem anyway.

I hope this is all clear. It’s my first post here, I definitely tried to find an answer by searching the topics, but I apologize if the answer is something I should have already found there. Thanks in advance.

2

Alright, chalk this one up to the value of creating a minimal reproduction of the problem. Long story short? The data folders have a space in their name and I’m not handling it correctly. I’d assumed it was a more limiting difference between hosting with node.js vs. the Chrome web server, but I was wrong (though I still have to figure out if I can include a space in a directory using node.js and if so, how to do it correctly).

I’m putting the minimal version here for posterity/shame. For reference, all files are in the same directory, but copies of coefficients.txt are also located in “./assets” and “./asset files”.

sketch.js

dataLoaded = false;
doDraw = true;

fileNameFound = 'coefficients.txt';
fileNameAlsoFound = 'assets/coefficients.txt';
fileNameNotFound = 'asset files/coefficients.txt';  //It's the space...

fileName = fileNameNotFound;  // or fileNameFound or fileNameAlsoFound

tempStr = [];


function setup() {
  tempStr = loadStrings(fileName, loadSuccess, loadFailure);
}



function draw() {
    
  if(doDraw) {
    	
	  if(dataLoaded) { // Wait until loadStrings call is complete
	  
		for(np=0; np<6; np++) { console.log(tempStr[np]); }
		
		doDraw = false;  //Values reported, shut off drawing
		
	  }
	  
  }

}

function loadSuccess() { 
	console.log('load success...');
	dataLoaded = true;
}

function loadFailure() { 
	console.log('load failure...');
}

index.html

<!DOCTYPE html>
<html lang="">

<head>
  <script src="p5.min.js"></script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js example</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
  
  
</head>

<body>
  <main>
  <script src="sketch.js"></script>
  </main>
</body>

</html>

nodeLaunch.js (launched from the NAS using node.js, taken from the w3schools tutorial linked above)

var http = require('http');
var url = require('url');
var fs = require('fs');

http.createServer(function (req, res) {
  var q = url.parse(req.url, true);
  var qdata = q.query;
  var filename = "." + q.pathname;
  fs.readFile(filename, function(err, data) {
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'});
      return res.end("404 Not Found");
    } 
    res.writeHead(200, {'Content-Type': 'text/html'});
	res.write(data);
    return res.end();
  });
}).listen(8080);

data file, coefficients.txt

83.3481743529397
-0.025076201796572
-5.61491885503865E-6
1.23001997078E-9
1.22643146514897E-12
-4.4037444322342E-16