I finally publish my Community Friday project: GWT Graphics. GWT Graphics is a vector graphics library for GWT. The idea of this project is to provide an easy to use vector graphics library, which handles cross-browser issues for you. Under the hood, two XML-based techniques are used: SVG and VML. VML is for IE, and SVG for other browsers.
I have created a
wiki page for GWT Graphics. This page contains all necessary information: documentation, examples and demos. If you wanna know how to use the library in your project, see
GWT Graphics manual .
Please note that GWT Graphics is a GWT library. This means that you cannot use it on the server-side with Vaadin. However, you can create your own Vaadin widget and use the library on the client-side. To test if I can use the library with Vaadin, I have created two chart components for Vaadin. Check out the
components (
source codes )
Tried it out - and love it already. Excellent library! Even I was able to build nice charts with it in a couple of hours. Some screen shots below (context of these charts are pretty much irrelevant).
Kimi Räikkönen’s F1 results for this season:
This one took from zero-to-done (the chart itself wrapped inside Vaadin component) somewhat around 4 hours.
A sample chart for showing hour progress for a project:
This one took from zero-to-done (the chart itself wrapped inside Vaadin component) somewhat around 6 hours.
Thanks for a great library Henri, I felt extremely productive with it all the time.
public class Test implements EntryPoint {
public void onModuleLoad() {
DrawingArea canvas = new DrawingArea(400, 400);
panel.add(canvas);
}
}
[ERROR]
Unable to load module entry point class edu.iastate.its.thinkspace.test.client.test.Test (see associated exception for details)
com.google.gwt.core.client.JavaScriptException: (TypeError): Object doesn’t support this property or method
number: -2146827850
description: Object doesn’t support this property or method
at com.vaadin.contrib.gwtgraphics.client.impl.util.SVGUtil.createElementNS(Native Method)
This library looks great, and the example Vaadin components are exactly the kind of thing that would help me out with what I’m trying to accomplish - specifically the pie chart one.
I’ve got the files from the subversion repository, but I don’t know where to start to build the project and haveing a look around the source code. Should there be a file under ‘WebContent\VAADIN\widgetsets’ or is that somthing I need to compile?
If you are using Vaadin 6.2 and Eclipse with Vaadin plug-in, you can use these example charts in your application by copying this
jar to your project’s WebContent/WEB-INF/lib dir. After the jar is copied and the widgetset is compiled, you can use use these charts in your application. For example the following code creates a piechart:
This is great, very easy to use. I am trying to figure out a way to move a composite shape. For example I have created an arrow which is made up of two paths, one for the connector line and the for the arrow head. How do I move it as a single unit as the mouse moves?
//Paths that make arrow.
Path path = new Path(50, 50);
path.lineRelativelyTo(100, 0);
Path arrowHead = new Path(145, 45);
arrowHead.lineRelativelyTo(5, 5);
arrowHead.lineRelativelyTo(-5, 5);
arrowHead.close();
arrowHead.setFillColor(“back”);
I am doing a school project, and I need your library to draw some shapes on the screen. i am using GWT 1.7, and everything works great in the Hosted Browser, but when I compile and browse in Firefox, the shapes are all misaligned. I know the Hosted Browser uses the IE engine to render the pages, and when I press compile and browse i view the pages in IE. But still, as you said in the GWT Graphics Manual this kind of behavior is expected and corrected.
I think I downloaded the last available version, I don’t know what the problem is.
This is the code I am using:
Text textTag = new Text(x1, y1, strInfo);
textTag.setFillColor(“black”);
Ellipse ellipse = new Ellipse(x1, y1, (textTag.getFontSize() / 3) * strInfo.length(), textTag.getFontSize());
pCanvas.add(elipse);
pCanvas.add(textTag);
The problem is that in IE it thinks the x and y are the center of the text and ellipse, but in firefox it thinks the x and y of the text are the bottom left corner.
Didn’t manage to get gwt-graphics two work together with the chart component, some error about missing widgets. Could be user error but tried with jar 0.9 & 0.9.3 of gwt-graphics.
Found http://dev.vaadin.com/browser/contrib/VaadinVisualizations & managed to get it to work, cool components like annotated timelines It’s developed using gwt-visualisation, anyone recommendations against it compared to gwt-graphics ?
Thats fine. But any ideas when shall we expect that to come? It would be better if we get to know what are the hindrances that prevent us from getting the gradient functionality in?
I am just curious - have you managed to make GWTGraphics working with
Vaadin 6.6 / GWT 2.3.0 in IE-VML mode at all?
In my environment this seems to be broken as there is blank area rendered in slot where graphics is expected to be. Tested on IE9 native mode and IE9 compatibility mode with IE8. IE9 set to IE7 compatible mode works somewhat with sample application, but not with my demo app. Other browsers using SVG-path works as expected.
Saying that, I don’t remember experiencing this issue a while ago on pre-6.6 Vaadin with GWT 2.1.0 (IIRC) and IE8. Just trying to figure out whether it’s a global problem or something wrong with my environment.
Furthermore widget compilation drops warning like this:
Scanning for additional dependencies: jar:file:/C:/test/.external/Vaddin%20test%20widgets/gwt-graphics-0.9.7.jar!/org/vaadin/gwtgraphics/client/DrawingArea.java
Computing all possible rebind results for 'org.vaadin.gwtgraphics.client.impl.SVGImpl'
Rebinding org.vaadin.gwtgraphics.client.impl.SVGImpl
Could not find an exact match rule. Using 'closest' rule <replace-with class='org.vaadin.gwtgraphics.client.impl.VMLImpl'/> based on fall back values. You may need to implement a specific binding in case the fall back behavior does not replace the missing binding
thanks for prompt reply and hint. Now with modified .gwt.xml a SVG-rendering path seems to be working well in
IE9 native mode . I did not do extensive testing in any mean, but my demo applications worked.
Still the other issue remains open. By chance, have you got any idea on why VML-rendering path fails to draw anything in
IE8 ,
IE9 forced to IE8 compatibility? To be clear, I am not using gwt-graphics directly, instead I am experimenting with a ProcessingSVG add-on in a rather trivial use-case where rendering works in all major browsers except IE which is worrying.
Perhaps this question would be better raised to author of SVGProcessing.
