Need help with creating file on server with processing.js and php

robar

Hi! I'm creating a drawing application that can be embedded in a webpage via processing.js. My problem is that it needs to save the drawing to the webserver. I already have a javascript-php snippet that can create an image from a data uri, but I can't integrate it into my sketch. I used the colorFinder example, but when I copy the uploadFile() function into that, the whole external javascript part stops working. My second problem is that I don't know how to create data uri from pgraphics, like save() does. Thanks in advance! Here is the thing: upload.php

<?php
    if (!empty($_POST["content"]) && !empty($_POST["name"]))
    {
        file_put_contents($_POST["name"], file_get_contents('data://' . substr($_POST["content"], 5)));
    }
    else
        echo "empty";
?>

javascript

     window.onload = function () {
         makeTheLink();
     }

 // make the connection with the sketch
 function makeTheLink() {

     var mySketchInstance = Processing.getInstanceById( getProcessingSketchId() );

     if ( mySketchInstance == undefined ) { // means it has not started
         setTimeout( makeTheLink, 200 );    // try again later

     } else {
         mySketchInstance.setInterfaceLink(this); // make the connection
     }
 }

 }
  function uploadFile(var img,var img_name)
      {
        var fd = new FormData();
        fd.append("content", img);
        fd.append("name", img_name);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "upload.php");
        xhr.send(fd);  
      }

processing corresponding parts

void keyPressed(){
 if(key == ' '){
  js.uploadFile("data:image/jpeg;base64,/looongdatacode","kep.jpg"); 
 }
}
interface JavaScriptInterface
{
    void uploadFile(String d,String n);
}
JavaScriptInterface js;

void setInterfaceLink ( JavaScriptInterface jsin )
{
    js = jsin;
}

GoToLoop

Rather than mix up Java & JS syntax, you'd fare better w/ http://p5js.org ! :)

mbraendle

@GoToLoop: Not always is recommending to p5js the best option, since it is still very beta (v 0.3.9).

@robar: I don't think you need all this Interface thingy. You can simply call a JavaScript function out of Processingjs directly:

void keyPressed() { if (key == ' ') { uploadFile("data:image/jpeg;base64,/looongdatacode","kep.jpg"); } }

See http://processingjs.org/articles/jsQuickStart.html#combineprocessingandjavascript

GoToLoop

Not always is recommending to p5js the best option, since it is still very beta.

@mbraendle, although I very much love Processing.JS w/ its fabulous JavaScript mode transpiler, his particular code here is essentially for the web. And Java language got nothing to offer to it! :-?

I don't think you need all this interface thingy.

That's exactly what PomaxGuide recommends: http://processingjs.org/articles/PomaxGuide.html
It's an ugly boilerplate patch in order to keep Java syntax in ".pde" tabs.
And at the same time, being able to invoke functions from ".js" tabs! 8-X

You can simply call a JavaScript function out of Processing.js directly.

That'll break JavaScript mode and turn his sketch into a Java-Js chimera mix! :O)

Coming back to p5js framework being in beta, that's completely irrelevant.
Processing.js framework is still stuck on Processing version 1 era and its development is halted!

Basic Processing API is working flawlessly in p5js right now.
I was able to successfully convert some Java2D sketches to p5js so far!

I don't know how its 3D API state is right now. But I doubt @robar would need such features for his app!

mbraendle

I agree with you, if one wants to do everything in the PDE.

But, if you have a complex project involving a database, PHP, XML, SVG, large JavaScript libraries, a web page that goes beyond what is exported by the PDE, and a ProcessingsJS sketch, you have to work in mixed environment anyway. I can say so from my own experience on such projects.

And my I ask you something? Although I really appreciate your contributions, in my opinion you could reduce your usage of exclamation marks and animated smileys in your posts - it's seems like you are shouting at us.

GoToLoop

In relation to previous forum, this 1 is very bland!
In order to mend that a little, I skip lines to make text easier to read and spread emoticons. That's my style. ;)
And since I started using the Internet almost 18 years ago,
I always thought this capital shouting thing some kinda urban legend that became true!

mbraendle

To come back to @robar's question: canvas.toDataURL() may be your friend.

robar

I managed to solve the javascript crash problem: I simply removed "var" from uploadFile function parameters. By document.getElementById('sketchname').toDataURL() I can save the main canvas to an image file, but unfortunately I have to use an inner PGraphics for drawing, and I don't know how to convert that to a data uri. Can you help me in that?

robar

Finally it works! If I pass a myPGraphics.get() as the img parameter in uploadFile(), I can get the data uri with javascript by img.toDataURL(); So now with this code I can upload any PGraphics to a web server from my sketch. I tested it with Xampp, but I hope it works in real world situations too :)

mbraendle

Wow. Can you post the complete code fragment here?