We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Processing.js doesn't support PrintWriter function and Table class(CMIIW), so I load file data using loadStrings function. I running 2 different sketch in same time.
-1st sketch is an example "Java/Topics/File IO/SaveFile1" w/ mod file path to "LoadFile1/data" running in Java Mode.
-2nd sketch is an example "Java/Topics/File IO/LoadFile1" w/ mod plot line and running in JS Mode.
I run 1st sketch, plot some line then run 2nd sketch. After running, browser show the line. Then I plot some line again in 1st sketch but in browser doesn't draw line. If I rerun 2nd sketch, it's working and if reload browser it doesn't work.
I know the problem is lines.length() is static (doesn't increase). I want solution, how to make my 2nd sketch (js) reading data continually. Another problem is I'm still new with javascript.
My project is log data from xbee usb adapter and share it via browser.. since Processing.js doesn't work with serialEvent, I run sketch with Java Mode then save data log into file. Then I want draw data from file using Processing.js.
I love processing, it's friendly.. I hope my solution is processing code..
Sorry if my English is bad.
1st sketch
int[] x = new int[0];
int[] y = new int[0];
void setup()
{
size(200, 200);
}
void draw()
{
background(204);
stroke(0);
noFill();
beginShape();
for (int i = 0; i < x.length; i++) {
vertex(x[i], y[i]);
}
endShape();
// Show the next segment to be added
if (x.length >= 1) {
stroke(255);
line(mouseX, mouseY, x[x.length-1], y[x.length-1]);
}
}
void mousePressed() { // Click to add a line segment
x = append(x, mouseX);
y = append(y, mouseY);
String[] lines = new String[x.length];
for (int i = 0; i < x.length; i++) {
lines[i] = x[i] + "\t" + y[i];
}
saveStrings("C:/Users/Bayu/Documents/Processing/LoadFile1/data/lines.txt", lines);
}
void keyPressed() {
exit();
}
2nd sketch
String[] lines;
int index = 0;
int x;
int y;
int x0=0;
int y0=0;
void setup() {
size(200, 200);
background(0);
stroke(255);
frameRate(12);
lines = loadStrings("lines.txt");
}
void draw() {
println(index+" ");
println(lines.length+" length");
if (index < lines.length) {
String[] pieces = split(lines[index], '\t');
if (pieces.length == 2) {
int x = int(pieces[0]);
int y = int(pieces[1]);
if (x0!=0 && y0!=0) {
line(x, y, x0, y0);
}
x0=x;
y0=y;
index = index + 1;
}
}
}
Answers
Better take a look @ Processing.JS's loadStrings() own reference too:
http://processingjs.org/reference/loadStrings_/
When dealing w/ something new, like JavaScript Mode, we should start slowly and simple.
Check whether code below works for ya. it did for me:
It Doesn't work.. I still need to rerun my processing.js to make sketch working..
Re-run to work? Perhaps it's related to JS's asynchronous loading:
http://processingjs.org/articles/p5QuickStart.html#synchronousIO
Hmm.. It still not working.. I need something working like this.
"If my data (in txt) at last row (length) available then draw it and if it doesn't available then wait 1 second, if still not available wait again 1s until new data exist" "This process continue until I close sketch"
When I use my sketch, lines.length() value is static (lines.length() scan sketch only once while it running)..
If my simple sample code above didn't work, it's pretty much hopeless trying something more complicated!
Perhaps you should try a more specific JS framework like P5.JS: http://p5js.org
P.S.: Don't forget that all resource files should be inside sketch's subfolder: "/data/"! L-)
Haha.. Maybe It was so hard to make live streaming text data from text file on browser.. I have another solution, using software called LiveGraph. Poorly, it can't go to localhost (browser)
My project similar to like this highcharts.com/demo/dynamic-update and fastly.github.io/epoch/real-time/#line
Both code above are random data. I need data from textfile and I don't understand javascript especially extension javasript like D3, HighChart, Epoch, etc.
Hi GoToLoop.. I finally success make sketch (realtime streaming data) working in java mode but not for javascript.. What happen with javascrpit?? Can you help me??
I move loadString() function from setup() to draw(). then you can play your data with notepad, edit>>save>>edit>>save
That's a very bad move! Resources should be read in setup(), so they're ready to use in draw().
Functions like loadStrings(), and specially saveStrings(), aren't fast! (~~)
Why don't you place the loaded data in some arrays or a class. Then read them inside draw()! /:)
Well, you can call loadStrings() in draw, but with conditionals around it, to load it only every n seconds or every n frames. Not on each frame!
Thank you for your help and suggest.. Now I can make chart (area/dot/line) with processing..
I use core temp in my tray.. When I loadStrings() in draw.. My CPU load is low (about 7%-15%) and CPU temperature is normal (about 45 C-50 C).
I have another question.. How to make sketch large than your computer resolution, running like browser (with vertical and horizontal scroll)?
In general, it can be simpler / easier to compute your drawing and draw only the visible part. I have shown in the past some sketches doing such scrolling.