Canvas component

Flow
21

Just to continue with the discussion, I have found this:

http://old.umlcanvas.org/Main_Page

Do you think that this can be easily embedded into a Vaadin widget?

Thank you very much for your time and support.

22

Hi Henry.

I’m creating a vaadin application destined to create mind maps. I’m using your canvas widget add-on.

I need to draw some text (especially along a path) on canvas widget. For example, GWT canvas (com.google.gwt.canvas.client.Canvas) contains at least a method fillText() - but your widget, as previous debaters noticed, doesn’t. I’d like to ask you, Henry, if you’re planning to develop your add-on in this direction?

I’m using Drag And Drop mechanism. My canvas is added to AbsoluteLayout - which contains also some other components (mind map nodes as button wrappers) and is also wrapped. Mind Map nodes are combined by drawn branches and the curved text should be drawn over every curved branch. Maybe something crossed your mind how to avoid this trouble of curved text functionality lack? I don’t want to place labels over mind map branches because they have the straight and not curved text.

Thank you very much.

23

No, sorry, I left the project

24

Hi,

You can look at this http://code.google.com/p/vaadin-canvas/. I am working on this component and it has support for elements like Rectangle, Polygon, Arc (and Circle), Line, Text and Group of elements. It also supports events like MouseOver, MouseOut, MouseDown, MouseUp etc. Drag effect has been implemented on each of the elements (except the Arc). You can checkout the source and change it as per your requirement.

Also, please give your feedback.

Regards,
Kapil

25

Hi Kapil,

Thank you for your response. I see you made a great work with your component.

I decided to resign using HTML5 Canvas in my project and use GWT Graphics (SVG) instead. SVG is much more interactive than Canvas. You don’t have to implement mouse events for the objects (what’s the most important, in SVG you have independent objects while Canvas has no objects but raw pixels). I only implemented a very simple drag and drop mechanism on my own because the library gwt-dnd doesn’t seem to cooperate with GWT Graphics.

I think vector graphics is after all better for my requirements than raster graphics.

Good luck with your vaadin-canvas component. I hope some day your work will appear as a Vaadin Add-on. :slight_smile:

26

Thank you very much!
It looks very promissing!!

I want to try it but I don’t see any jar to be included as normal add-ons do. How I am supposed to proceed?

27

Hello Maciej,

I am trying the Kapin component. I would like to test yours as well. Is your canvas component available?

Thanks in advance

28

Hi Algar,

I am new to the Vaadin and I am not sure of how the canvas can be used in your project. I am still learning to create Vaadin Add-on. As of now the canvas that I created is a Vaadin Composite. You might have to checkout the complete code and change it to adapt to your requirements/project.

In the mean while I added some more features to it - eg: you can now connect two nodes using drag and drop. You can see the demo page (not very professional or user friendly) for the same.

I will be suspending the development on the canvas for few days and will analyse the SVG option as suggested by Maciej.

Thanks,
Kapil

29

Hi Maciej,

Thanks for you suggestion. You are correct in saying that the Canvas is just raw pixels and I am having hard time in handling and managing the events and propagating them to the right Object.

I plan to look at the SVG option as suggested by you and compare SVG and Canvas in terms of usability and integration with the Vaadin framework. Please let me know any pointers or references on SVG.

Thanks,
Kapil

30

add functional to work with text plz(fillText() and other)


fillText
google-web-toolkit have impliment

31
  • why CanvasWidget use google-web-toolkit if google team no longer support it ?
32

The add-on is using the GWT incubator library, because the native GWT support for a Canvas element just came out in release 2.4, and Vaadin 6 series has not yet upgraded to that version. After Vaadin upgrades to GWT 2.4, probably in the 6.8 release, I’ll drop the incubator jar from the add-on.

33

bad news, it will be in 2012q2

Thanks for you answer !

34

There is some information from the Vaadin R&D department in the blog:
https://vaadin.com/blog/-/blogs/vaadin-gwt-and-java-5
.

What do you think, should I remove the incubator JAR from the project? This would work only if users upgrade their GWT to 2.4 manually.

35

I’m happy to report that the brand new 1.1 version of the add-on now supports text drawing operations, including fillText. You can use it like this:

canvas.setFont("italic bold 25px sans-serif");
canvas.setTextBaseline("top");
canvas.fillText("Text with TOP baseline", 10, 200, 0);
canvas.setTextBaseline("bottom");
canvas.fillText("Text with BOTTOM baseline", 10, 200, 0);

You can download it
from the Directory
.

36

Hi Henri !

I’d like to know if it’s possible to load, diplay and manipulate the content of an SVG file with your CanvasWidget ?
What i want to have as result is a dynamic SVG with content drivent by server-side events.

I tried to use je SVGComponent add-on but i did’t found how to modify the content of the SVG.

Thanks for your help ! (hope i’m not disturbing the topic…).

37

Hi guys,

Please, excuse me if this is not the most appropriate place to ask my question.

I’m using the canvas widget (version 1.1) to build a simple game. I’m handling clicks on the canvas to invoke methods of the game model and it works fine with all desktop browsers. However, I’ve just tried it on an iPhone 4S and some Android tablet and on both devices when I click on the canvas it seems that the whole canvas is selected. I’m using the CanvasMouseDownListener to capture click events and I guess that touch events do not fire a MouseDown event.

Can you suggest if I’m doing something wrong, or a way to work around this?

Thanks!

38

Hi Henri,

My question above is actually for you :slight_smile:

Cheers!

39

Is there a full sample available? The demo looks nice but sourcecode is only shown for the arcs section. Im interested in gradients and others. I cannot find examples elsewhere.
Would u be so kind and give it to us?

I tried the following with no success so far:


		canvas.saveContext();
		canvas.createLinearGradient("mygradient", 0, 0, 500, 500);
		canvas.addColorStop("mygradient", 0, "#000066");
		canvas.addColorStop("mygradient", 1.0, "#ff7755");
		canvas.setGradientFillStyle("mygradient");
		canvas.fillRect(100,100, 200, 150);		
		canvas.restoreContext();

With the code above just a filled rectangle with the second color is painted. Has anyone made gradients working? Would you give me any advice?

40

Hi Henri,

I would first like to say thanks for a great component!

I am having some trouble using drawImage when the images are large and take several seconds to download. I think I found the problem in the handleDrawImage1/2/3 methods. I’ll use handleDrawImage1 to explain:


	private void handleDrawImage1(UIDL uidl) {
		String url = uidl.getStringAttribute(Cmd.URL);
		double offsetX = uidl.getDoubleAttribute(Cmd.OFFSETX);
		double offsetY = uidl.getDoubleAttribute(Cmd.OFFSETY);

		// Canvas.drawImage won't show the image unless it's already loaded
		Image.prefetch(url);

		Image image = new Image(url);

		canvas.drawImage(ImageElement.as(image.getElement()), offsetX, offsetY);
	}

The issue is with Image.prefetch(url) - this method call is not blocking. So if the browser has not managed to download the image by the time it hits canvas.drawImage, then the image does not appear.

So what springs to mind to fix it is this:


private void handleDrawImage1(UIDL uidl) {
	String url = uidl.getStringAttribute(Cmd.URL);
	double offsetX = uidl.getDoubleAttribute(Cmd.OFFSETX);
	double offsetY = uidl.getDoubleAttribute(Cmd.OFFSETY);

	final Image image = new Image(url);

	image.addLoadHandler(new LoadHandler() {

		@Override
		public void onLoad(LoadEvent event) {
		
			// Image has definitely loaded, so draw
			canvas.drawImage(ImageElement.as(image.getElement()), offsetX, offsetY);
		}

	});
	image.addErrorHandler(new ErrorHandler() {

		@Override
		public void onError(
				com.google.gwt.event.dom.client.ErrorEvent event) {
			
			// Do something like draw a missing icon or just ignore??
		}
	});
	
	// Canvas.drawImage won't show the image unless it's already loaded
	Image.prefetch(url);
}

The only thing I don’t know about this approach is whether the LoadEvent is fired event when the image is cached in the browser. If it doesn’t, then the image will only draw the first time it is loaded and won’t on subsequent calls (e.g. drawing the same image many times over). The GWT documentation is a bit sparse here.

Any ideas or comments?

Also, your latest code doesn’t seem to be in http://dev.vaadin.com/browser/svn/contrib/CanvasWidget, there is only version 1.0.3. So I haven’t been able to try out my suggestion. If you point me in the direction of the latest code I can write a test application.

Thanks,
Mark