Processing and Vaadin

Hi,

I made a Vaadin component that implements Processing.js functionality on the client side widget.
Its aimed to make client-server interaction and drawing images and animation on the canvas straightforward and easy.

More technical details, demos and source code are found here:
Vaadin component using Processing.js

Feel free to use the sources for your own purposes.

I’m currently also coding other version of this component that uses
GWT Graphics
instead of Processing.js. Results will be published here when its done.

-Tomi

Very interesting!

Wow… The demos look really interesting - have to look deeper to understand what I could really do with it (other than 2d physics simulation)

Finally I’ve been able to manage enought time to make the Processing component’s GWT Graphics version ready for public.

Read more at
Wiki page

The biggest difference to the previous version is that GWT Graphics uses SVG and VML to create graphics. Secondly the Processing language in itself is not supported anymore. You must always extend the VProcessingSVG class that implements Processing language functionality.

-Tomi

This seems to have gone out of sync with Vaadin 6.5.0 and GWT. I get an error in VProcessingSVG.java regarding method pop(org.vaadin.gwtgraphics.client.VectorObject)?

Hi Terry, thanks for pointing that out.

Actually it seems that Vaadin 6.5.0 is not causing that error. With ProcessingSVG version 1.0.4 you must use older GWT Graphics version 0.9.6 instead of the latest 0.9.7. VectorObjectContainer.pop() has been renamed to VectorObjectContainer.bringToFront(), which is causing this problem.

I’ll publish a new version supporting latest GWTGraphics as soon as possible.

Thanks!

I have also discovered that text() is not respecting the fillStyle and always paints as outline only. I added a couple of lines to set the fillStyle and opacity to my copy and it works fine here.

New version 1.0.5 with GWT Graphics 0.9.7 support is now available and it also fixes fillStyle problem.

Downdload from here

Thanks!

Hi

i have checked the addon. Thank you its really great. My question is only how do i interact from the server with the processing widget ?

Could you please provide an example. Let say i want to change the background color of Demo 1 with a button. When a button is clicked background color is changing ? Some how i don´t get it to work.

best regards

Hello and welcome on board!

You need to override paintContent method in your server side class and updateFromUIDL method in the client side class. With Demo 1 example, these two classes are ProcessingTest and VProcessingSVGTest.

To change background color with a button, add the following code to the ProcessingTest class. It will just add a backgroundcolor variable that will be included to the
UIDL
that will be sent to the client.

setBackgroundcolor will change the background immediately and should be called when button is pressed.

ProcessingTest.java


	private String backgroundcolor = "rgb(100,100,100)";

	@Override
	public void paintContent(PaintTarget target) throws PaintException {
		super.paintContent(target);
		target.addAttribute("backgroundcolor", backgroundcolor);
	}

	public void setBackgroundcolor(String backgroundcolor) {
		this.backgroundcolor = backgroundcolor;
                requestRepaint();
	}

And at the client side we need to store the received background color somewhere. This can be done by overriding updateFromUIDL method.

VProcessingSVGTest.java


	private String backgroundcolor;

	@Override
	public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
		backgroundcolor = uidl.getStringAttribute("backgroundcolor");
		super.updateFromUIDL(uidl, client);
	}

And now you can set new background color with the following call in your client side code:

background(backgroundcolor);

Basically this should be all that you need to do to pass variables from the server to the client. Learn more from the
Book of Vaadin

chapter 10
.

Thanks for sharing such a nice widget.

I’ve played with it lately and discovered that
IE
(VML-branch)
fails to render DrawingArea content
. More specifically IE8 & IE9 fails reliably, IE7 works with vertex demo but fails in other application. Other browsers (SVG-branch) in comparison performed quite well.


Anyone else having the same observation?


live demo
For reference: I have built and tested ProcessingSVG’s Vertex demo using component versions below. Not that it would matter a lot since IE-VML problems are reproducible with add-on’s (built using Vaadin 6.5.2) as well.

Vaadin 6.6.4 with GWT 2.3.0
gwt-graphics 0.9.7
ProcessingSVG 1.0.5

By the way - there is a SVG support in IE9. You can make use of it already by applying minor tweak to gwt-processing add-on. Refer to
this discussion
for details.

Cheers,
Tomas

Yes, I’ve noticed that with IE8 rendering works only in Compatibility mode. Wiki page seems to be lacking this valuable information. Sorry about that.

I haven’t tested with IE9 and SVG rendering mode enabled. Thanks for the reference. Need to check that out at some point.

-Tomi

Very interresting!!!

I just can’t find information on which version of processingjs it’s based on…

hi,

I hope you can help me…
I try to integrate the plugin into my system, as in the demo at “ProcessingSimpleJavaCodeTest”.

but I still get the following error:

SEVERE: Widgetset 'AppWidgetset' does not contain an implementation for de.xxx.web.main.map.processing.server.PCodeExtension.
Check the connector's @Connect mapping, the widgetset's GWT module description file and re-compile your widgetset.
In case you have downloaded a vaadin add-on package, you might want to refer to <a href='http://vaadin.com/using-addons'>add-on instructions</a>.

Enclosed with my AppWidgetset:

<module>
   <inherits name="com.vaadin.DefaultWidgetSet" />
   <inherits name="org.vaadin.tltv.vprocjs.gwt.ProcessingJsWidgetset" />
   <set-configuration-property name="devModeRedirectEnabled" value="true" />
   <set-property name="user.agent" value="gecko1_8,safari,ie10" />
   <source path="client" />
   <source path="shared" />
   <collapse-all-properties />
   <set-property name="compiler.useSymbolMaps" value="true" />
</module>

thx for the help

Seems that the client side GWT connector class with @Connect mapping to PCodeExtension is not found. Check that you have that available under “client” subfolder in folder which contains your AppWidgetset.gwt.xml.

i have:

  • the AppWidgetset is in the ressource Folder
    gwt.client:
  • PCode

public class PCode extends ProcessingCodeBase{ .... - PCodeConnector

@Connect(PCodeExtension.class){ public class PCodeConnector extends ProcessingCodeConnector{ ... gwt.server:

  • PCodeExtension

public class PCodeExtension extends ProcessingCodeExtension{ } - CustomProcessing

public class CustomProcessing extends Processing { public CustomProcessing(){ this.setWidth("300"); this.setHeight("300"); PCodeExtenstion codeExtenstion = new PCodeExtenstion(); codeExtenstion.extend(this); codeExtension.setProcessingJavaCodeClass(PCode.class.getName()); }} the example with String originaleCode works great, but i want the code in his own class…
next to the other error message, I get it when I run the “ProcessingSimpleJavaCodeTest”:
com.vaadin.client.communication.MessageHandler
SEVERE: Hierachy claims ProcessingConnector (90) has component children even though it isn’t a HasComponentsConnector

If I got it right, and AppWidgetset.gwt.xml is in the resources folder then you should either add [code]

[/code]or move your AppWidgetset.gwt.xml to "gwt" folder.

Try: move the AppWidgetset to “gwt” Folder
Error:
Failed to load resource: the server responded with a status com.vaadin.DefaultWidgetSet.nocache.js of 404 (Not Found)

Try: add

[code]

[/code]Error 1: Wed Sep 20 13:45:10 GMT+200 2017 com.vaadin.client.WidgetSet SEVERE: Widgetset 'AppWidgetset' does not contain an implementation for de.kappis.warehouse.web.main.map.processing.server.CustomProcessingCodeExtension. Check the connector's @Connect mapping, the widgetset's GWT module description file and re-compile your widgetset. In case you have downloaded a vaadin add-on package, you might want to refer to add-on instructions.

Error 2:
com.vaadin.client.communication.MessageHandler
SEVERE: Hierachy claims ProcessingConnector (90) has component children even though it isn’t a HasComponentsConnector

Looks like widgetset is not compiled or maybe there were some errors in the log when you build it?
For reference:
https://vaadin.com/docs/-/part/framework/clientside/clientside-compiling.html