从网页调用java方法生成处理草图并在网页上显示此草图

Question

I have written a Processing program in Eclipse which generates an image and saves it to a specific location on my computer.

Is there any way to run this program from a javascript file such that when a user clicks a button on a web page, the appropriate method in the Processing program is called, the image is generated and finally the image is displayed on the web page.

I don't have a lot of experience in this area but I imagine I could have the Processing method make a POST request once the image has been saved so that it can be sent to the relevant server?

The main issue I'm having trouble with here is how to actually invoke the method from a web page. Using Processing.js or converting my java code to javascript isn't really an option as I need to import ANTLR into my Processing program which as far as I know can only be used with Java.

Just to be clear my program is a .java file which generates an image in the form of a Processing sketch by importing processing.core .

I'm open to learning new technologies etc.

Any help is greatly appreciated.

Answer 1

You'll want to call a HTTP request from within JavaScript that will trigger a function on your backend. This can be achieved with the Fetch API which is an interface to fetch and send resources.

Since you can't run Java on the web you'll need to rely on some form of communication between the JavaScript client and the Java server. You are able to send data back and forth to update both ends.

Below I've created examples of how this could look at your end. You have your button, the function which talks to the server and the event listener that triggers whenever the button is clicked, connecting the button to the function.

<!-- Create a button in html -->
<button class="process">Process me</button>

// Write a function that sends a HTTP request to your server.
// Can be either POST or GET. Change the 'yoururl' part to your own endpoint.
// The rest of the function will check if the request has been successful and 
// returns a string with the received data from the server, if there is any.
function process() {
  return fetch('yoururl/process', {
    method: 'POST',
  }).then(response => {
    if (response.status === 200) {
      return response.text();
    }
  }).catch(error => {
    console.log(error);
  });
}

// Select the button from the HTML.
const button = document.querySelector('.process');

// Fire a function when the button is clicked.
button.addEventListener('click', function(event) {
  process().then(text => {
    console.log(text); // Show the text that has been received from the server.
  });
});

But your question does not have a clear answer as it is quite broad. I hope that at least this will get you in the right direction as to how it could work.