Canvas component

Flow
1

Hi,

I just committed a simple canvas component to
contrib
. It doesn’t do much except wrap some of the API of the
GWTCanvas
 widget.

You use it (server side) like this:

Canvas canvas = new Canvas();
canvas.setSizeFull();

canvas.setBackgroundColor("#002200");
canvas.setStrokeColor("#aaaaff");

canvas.saveContext();
canvas.arc(100, 90, 50, 0, Math.PI, true);
canvas.stroke();
canvas.beginPath();

canvas.restoreContext();
canvas.arc(75, 30, 20, 0, Math.PI, false);
canvas.arc(125, 30, 20, 0, Math.PI, false);
canvas.stroke();

This creates a new canvas instance and uses almost the entirety of the supported API to draw an extremely ugly smiley face :stuck_out_tongue:

Still missing, perhaps to come later:

  • Javadocs
  • Support for other operations besides arc()

Maybe someone will find a use for it. Please reply to the thread if you use it somewhere, and patches are always welcome :slight_smile:

2

Had some time on the weekend, and now the Canvas component supports the GWTCanvas API fully. Also added mouse listener support, and adapted a part of the
GWTCanvas demo
 for a demo application. The Vaadin demo can be found
here
.

3

Way to go Henri - nice job. :slight_smile:

4

Hi, I’m a J2EE architect, I develop web applications for search and distributing Earth Images (web catalogues) .
I’m interested in Vaadin, I would like to invest in it to write little prototypes (actually we use Spring MVC, Flash and Java Applets…).
Is it possible to use your library to implement a sort of “Map Viewer” with the basic functionalities of: pan, zoom, draw rectangles over a map (png image) ?

In Vaadin I found the Embedded component for images that could help me to draw dynamic images (maps), thus if I could use your library I could try to put the two components together.

Where can I found your software?
Bye.

5

…Moreover I noticed that there is another GWT extensions at Google Code:
Abstract Canvas

(I’m new in Vaadin) Is it easy to “port” a GWT component to Vaadin?
I would like to implement a sort of “google maps” in Vaadin, do you think it could be possible using these plugins?
thanks.

6

Take a look of GWTGraphics add-on in the
Directory
. One example (demo) of a widget created with GWTCanvas is Vaadin Timeline (also in the Directory).

7

One option is to use the
Google maps addon
 which supports custom tilesets. I believe there are tools to convert your images to tiles.

8

Hi, guys!

Henri, thank you for the great component!
I have a problem with image drawing. When I try to do it through the following code:

Canvas canvas = new Canvas();
canvas.setWidth("400px");
canvas.setHeight("400px");
canvas.clear();
canvas.drawImage("http://www.google.ru/intl/en_com/images/srpr/logo1w.png",50,50);

I have an error:

com.google.gwt.core.client.JavaScriptException: 
(NS_ERROR_NOT_AVAILABLE): Component returned failure code: 0x80040111 
(NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]
 
QueryInterface: function QueryInterface() { [native code]
 } 
result: 2147746065 
filename: http://localhost:8080/vd_test/VAADIN/widgetsets/com.example.vd_test.widgetset.Vd_testWidgetset/8703314560A1D44CAC50B6ED13EB5364.cache.html 
lineNumber: 2924 
columnNumber: 0 
inner: null 
data: null 
initialize: function initialize() { [native code]
 }

What am I doing wrong?

Vaadin 6.4.1
CanvasWidget 1.0.1

9

Hi Gregory,

Yes, that was a bug with the drawImage methods. I just deployed a new version 1.0.2 into Directory and SVN which should fix the problem.

10

Great job, Henri, it works perfectly now! Thank you alot!

11

Hi Henri,

Tried this component today. Great job. Just wanted to let you know that it works well on FF, but not on IE 8. However, if I switch to compatibility mode, it seems to work on IE 8 as well.

Would you happen to know why it would
not
work in standard IE 8 mode? Is there any known fix?

Environment

  • Liferay 6.05
  • vaadin 6.4.3
  • canvas 1.0.2
  • gwt-incubator-20100204-r1747.jar [came bundled with the canvas component]
12

IE8 does not support the HTML5 canvas tag natively, so the underlying GWTCanvas implementation works around this by implementing most of the features using VML when running on IE. This is the root cause, but I’m not sure why it wouldn’t work without compatibility mode. As for the fix, it would probably entail changes in the GWTCanvas implementation, which lives in the gwt-incubator JAR. The addon is using the latest version of that, which has been released in February.

Let’s hope that the HTML5 support in IE9 won’t be crippled to require VML kludges and whatnot.

13

Released
1.0.3
 that fixes a bug that prevented the drawImage methods from displaying the image unless it was already cached by the browser.

14

Hi
Have copied the 2 jar files (gwt-incubator-20100204-r1747.jar , canvaswidget-1.0.3.jar) in WEB-INF - lib folder

and in my code have given import statemnet like this
import org.vaadin.hezamu.canvas.Canvas;

and my code looks like this

Canvas canvas = new Canvas();
canvas.setWidth(“200px”);
canvas.setHeight(“100px”);

    canvas.setBackgroundColor("#FF0000");
    canvas.setStrokeColor("#aaaaff");
    
    canvas.saveContext();
    canvas.arc(100, 90, 50, 0, Math.PI, true);
    canvas.stroke();
   canvas.beginPath();
   
   canvas.restoreContext();
   canvas.arc(75, 30, 20, 0, Math.PI, false);
   canvas.arc(125, 30, 20, 0, Math.PI, false);
   canvas.stroke();
   addComponent(canvas);

I even gave yes for recompilation , compile widgetset now

But in liferay portlet in place of canvas am getting error message like this

Widgetset does not contain implementation for org.vaadin.hezamu.canvas.Canvas. Check its @ClientWidget mapping, widgetsets GWT module descrioption file and re-compile your widgetset. Unrendered UIDL:

org.vaadin.hezamu.canvas.Canvas(NO CLIENT IMPLEMENTATION FOUND) id=PID66 height=100px width=200px

setBackgroundColor rgb=#FF0000

setStrokeColor rgb=#aaaaff

saveContext

arc radius=50 endAngle=3.141592653589793 y=90 x=100 startAngle=0

stroke
LOADING

beginPath
LOADING

restoreContext
LOADING

arc
LOADING

arc
LOADING

stroke
LOADING

Can anyone please helpme where am going wrong

Thanks a lot

15

On Liferay, the widgetset is normally loaded from a shared location on the portal, not from your WAR. See e.g.
this wiki page
 for instructions on how to set up Liferay for use with Vaadin.

In Liferay 6, a Vaadin JAR, standard widgetset, themes and configuration are already set up out of the box, but you need to follow some of the instructions on the wiki page if updating the widgetset by hand.

I would, however, recommend that use take a look at the wiki page for the background but then use the Vaadin Control Panel for Liferay portlet instead of Eclipse to recompile and install your widgetset.

The VCPL portlet allows recompiling the widgetset easily directly on a portal. It will be included in a future version of Liferay, but in the meanwhile, you can download it from
the directory
. Using the portlet compiles the widgetset to the correct location with one or a few clicks, using the correct versions of Vaadin and any add-ons. After it is set up, it will make developing Vaadin portlets using custom widgets much easier.

Note the installation instructions, including copying the correct versions of GWT JARs to the correct location on the portal. Note also that in future versions, the location of the GWT JARs on the portal will change.

16

Thanks Henri for your quick response
Few changes in portal-ext.properties file made my issue get fixed.

Now am able to see my canvas component . But am not getting how to use this as an canvas container so that i can place button inside this canvas container

Thanks a lot in Advance

17

The Canvas component is for drawing, and as far as I know cannot contain Vaadin components directly (I don’t really know this add-on, so maybe I’m wrong).

Maybe what you are looking for is
AbsoluteLayout
 instead of Canvas?

EDIT: If you really need to combine drawing and active components, you could also put a Canvas in an AbsoluteLayout to be able to place Vaadin components “on top of” a Canvas - but you would need to be careful with absolute coordinates, possible browser specific differences etc.

Or maybe the Canvas API offers you some other ways to catch events and lets you draw something that looks like a button and reacts to clicks.

18

Hi!

I’m trying to draw a kind of UML class diagram in a web application. There is a project that lets you do this (
gwt-connectors
), but there are no addons in vaadin, so I thought of using canvas.

My question is: can I draw text on the canvas or my only alternative is to merge canvas and labels in a absolute layout?

19

Thank you so much Henri for very useful addon. I am planning to use this in my diagram based app. I am working on a small POC to draw lines and run into a problem. When I draw couple of lines and do canvas.clear(), canvas is cleared as it is supposed to. But when I draw the next line, all previous lines become visible which is unwanted.

public class Poc_canvaswidgetApplication extends Application {
	int x = 10;
	int y = 10;
	
	@Override
	public void init() {
		Window mainWindow = new Window("Poc_canvaswidget Application");
		setMainWindow(mainWindow);
		
		final Canvas canvas = new Canvas();
		canvas.setWidth("300px");
		canvas.setHeight("300px");
		canvas.setBackgroundColor("#D2D2D2");
		canvas.setStrokeColor("#F72000");
		mainWindow.addComponent(canvas);
		
		final Button draw = new Button("Draw line");
		draw.addListener(new ClickListener() {
			
			@Override
			public void buttonClick(ClickEvent event) {
				canvas.moveTo(x, y);
				x += 20;
				y += 20;
				canvas.lineTo(x, y);
				canvas.stroke();
			}
		});
		mainWindow.addComponent(draw);
		
		final Button remove = new Button("Clear canvas");
		remove.addListener(new ClickListener() {
			
			@Override
			public void buttonClick(ClickEvent event) {
				canvas.clear();
			}
		});
		mainWindow.addComponent(remove);
	}
}

What am I doing wrong?

EDIT: I solved it by adding .beginPath() at the start and .closPath() at the end of method. What is the use of saveContext()? It would be great if you could add Javadoc or point to some good GWTCanvas tutorial/documentation. Thanks.

20

Hello Gonzalo,

Did you find anything about it?

I want to do exactly the same, an UML online editor based on Vaadin.

Have you already done it?
Did you find the solution to your question?
Did you finally use Vaadin for this purpose?

Thank you for your answers

If this is not feasible using Vaadin, all that I really need is a Node Based UI such us this one:
http://www.aviary.com/tools/filter-editor

How can I do this with Vaadin?

Thank you all.