What is ProcessingJs-GWT?

ProcessingJs-GWT is a thin Google Web Toolkit (GWT) wrapper that allows to use processingjs sketches in GWT applications.

How do I use it?

Following steps are required:

Either create new interface that extends or create a class that implements the base interface ProcessingInstance and annotate it with @JsType. To interact with methods on the processing sketch define methods on that interface (i.e. testMethod):

@JsType
public interface MyCustomInstance extends ProcessingInstance {
    String testMethod(String msg);
}

Load the Processing sketch either via ExternalTextResource or URL or pass it directly as a String:

Loading via URL:

final Processing<MyCustomInstance> processing = new Processing<>();
processing.load(safeUri,new Runnable() {
    @Override
    public void run() {
        GWT.log("Sample initialized.");
        // Interact with sketch
        processing.getInstance().textMethod("test");
    }
}); 

Loading via ExternalTextResource:

interface ProcessingCodeBundle extends ClientBundle {
    ProcessingCodeBundle INSTANCE = GWT.create(ProcessingCodeBundle.class);
    
    @Source("sample.pde")
    ExternalTextResource sampleCode();
}
final Processing<MyCustomInstance> processing = new Processing<>();
processing.load(ProcessingCodeBundle.INSTANCE.sampleCode(),()-> {
    GWT.log("Sample initialized.");
    // Interact with sketch
    processing.getInstance().textMethod("test");
}; 

For a more sophisticated example that shows how to interact with the Processing sketch (Callbacks, etc) refer to the [LDViewer visualization][6]

How do I install it?

If you're using Maven, you can add the following to your <dependencies> section:

    <dependency>
      <groupId>com.github.timeu.gwt-libs.processingjs-gwt</groupId>
      <artifactId>processingjs-gwt</artifactId>
      <version>1.0.0</version>
    </dependency>

ProcessingJs-GWT uses GWT 2.8's new JSInterop feature and thus it has to be enabled in the GWT compiler args. For maven:

<compilerArgs>
    <compilerArg>-generateJsInteropExports</compilerArg>
</compilerArgs>

or passing it to the compiler via -generateJsInteropExports

You can also download the jar directly or check out the source using git from https://github.com/timeu/processing-js-gwt.git and build it yourself. Once you've installed ProcessingJs-GWT, be sure to inherit the module in your .gwt.xml file like this:

    <inherits name='com.github.timeu.gwtlibs.processingjsgwt.ProcessingJsGWT'/>

Where can I learn more?

• Check out the sample app (Source Code) for a full example of using ProcessingJs-GWT.