RR: Vector API

14 views
Skip to first unread message

Mark Bakker

unread,
Dec 29, 2006, 10:00:11 AM12/29/06
to Google-Web-Tool...@googlegroups.com
The last few weeks I have been doing some research on the 'Vector API' This API will make use of VML and SVG to draw vector graphics to the browser
VML and SVG are functional more or less the same. One major differences between VML and SVG is that VML does not support clipping and well defined
borders on vector objects. For now I expect all graphics will be drawn within the defined panel.

To support vector graphics in browsers without additional plug ins VML will be used for IE and hosted mode, for all other browsers SVG will be used.

The vector API fill support the following objects;
  • VectorPanel: A panel what holds basic shapes
basic shapes:
  • Rectangle:  rectangle shape
  • Circle: circle shape
  • Eclipse: eclipse shape
  • Line: line shape
  • Polyline: polyline shape
  • Text: text shape
The basic shapes will support fill-color, fill-opacity, stroke-color, stroke-width, stroke-opacity. On the basic shapes it is possible to add MouseListerners
LoadListerners, and ClickListerners.

I think this will be a good start for Vector API of cource functionality can always be added.

example:

        VectorPanel vectorPanel = new VectorPanel(300, 300);

        Rectangle rectangle = new Rectangle(100, 100, 100, 100);

        rectangle.setFillColor(Color. GREEN);
        rectangle.setFillOpacity(0.2);

        rectangle.setStrokeColor(Color.BLACK);
        rectangle.setStrokeOpacity(0.5);
        rectangle.setStrokeWidth(5);

        vectorPanel.add(rectangle);

        RootPanel.get().add(vectorPanel);

This example will draw a rectangle.

What do you guys think about this proposal?

Henry Crutcher

unread,
Dec 29, 2006, 11:11:55 AM12/29/06
to Google-Web-Tool...@googlegroups.com
A couple of thoughts:

       The first one is that cross-browser compatibility is a problem.  Safari has neither SVG nor VML, and their Canvas widget does not support text.  Flash may be an option, but exploring the data into/out of Flash is a problem that would have to be addressed. 
       The second issue is that rendering speed/size of the SVG DOM can an issue.  You might want to think about adding support for an arbitrary path object (which both SVG and VML have) would be very important for handling such things as financial charts, for instance, which might have hundreds of line segments.  Firefox, for instance, cannot render fast with thousands of elements. 

            Henry

Kelly Norton

unread,
Dec 29, 2006, 11:19:31 AM12/29/06
to Google-Web-Tool...@googlegroups.com
Hi Mark,

Just a couple of quick questions and some pointers.

First thought is that your proposal has a hole in browser support. If you rely on only SVG and VML, Safari is excluded. SVG was landed in WebKit in Nov. of last year, but it hasn't made it's way into an apple production build. I haven't heard any speculation about when that will happen. Also, you should consider Opera. SVG is pretty well supported in Opera 9 but you should consult this page to ensure everything is there that you need: http://www.opera.com/docs/specs/opera9/svg/

As a second suggestion, be sure to consider the api beyond just the specification of shapes. There are other elements, like affine transforms, that you will have to work into the api and you don't want to paint yourself into a corner by being shape centric at the beginning.

Finally, a couple of things that are missing in your Shape list that you probably want to consider: there is currently no way to create an arc and there is no curving construct (Admitted: I do assume that the polyline you list is much like the svg polyline element).

I think it's great you want to tackle this. You should definitely buckle your seat belt and prepare to slalom through a lot of edge cases, but I'm eager to see what you come up with.

/kel



On 12/29/06, Mark Bakker <bakke...@gmail.com> wrote:

Miroslav Pokorny

unread,
Dec 30, 2006, 1:07:04 AM12/30/06
to Google-Web-Tool...@googlegroups.com
What do ppl think of the Google ExplorerCanvas ? Would it help or perhaps be a good start if one wanted a canvas to paint pixels etc instead of drawing shapes with someother abstraction ?
--
mP

Mark Bakker

unread,
Dec 30, 2006, 8:17:42 AM12/30/06
to Google-Web-Tool...@googlegroups.com
Hi Guys,

The Path shape should be added I missed that one;) Probably even more shapes need to be added to the Vector specs

As addressed Safari does not support SVG and VML at the moment only Canvas, this is a huge problem for one Canvas doesn't support Text. A alternative is using flash for Safari but will this not be replaced again as soon as SVG is in the production build? Is it not better to support SVG and VML, and add Canvas untill Safari supports SVG? The only downside for canvas is that it doesn't support Text.

if someone is interested in seeing some code you can find it at;

http://code.google.com/p/gwt-svg/

The code is at POC state... but it functional. just add "<inherits name=' com.google.gwt.vector.Vector'/>"


@Miroslav

Google ExplorerCanvas is functional nice but I think we should not use it for the same reason we should not use dojo. Functional it is nice but by using a external javascript we loose one of the major advantages of GWT and that is the javascript optimisation. Thanks for the input .

Joel Webber

unread,
Jan 3, 2007, 10:15:53 AM1/3/07
to Google-Web-Tool...@googlegroups.com
Mark,

I'm also glad you want to tackle this problem, and am looking forward to seeing the results (just opened the project page in another tab...)

I do want to add a couple of comments on the Safari issue:
- The problem extends to Firefox v<1.5.
- Old versions of Safari and Firefox won't go away overnight.
- These two sets of browsers together account for 3-5% of clients, which is more than I'd like to drop support for.

And a couple of more on the rendering engine issue:
- SVG is very complete (overcomplete?), but has widely varying performance characteristics.
  (This is based more on observation than measurement, but Firefox's SVG support can be pretty slow at times)
- VML is pretty fast, though a bit buggy.
- Flash is less complete (e.g., no cubic curves), but very fast.
- We should be able to switch out the rendering layer based on what will work best for a particular browser.

This last point is really important -- it's the entire reason Deferred Binding was created in the first place.  You get the opportunity to run a little code on the client to determine the best possible implementation.  The correct pre-compiled permutation is then selected, with no runtime overhead.  This allows us to, for example, have two different implementations of the rendering engine for two different ranges of Safari versions, always giving the user the best possible experience.

The Flash engine might be a real pain to implement, but it looks like it might be a really good way to get a very fast engine on several platforms.  But it will require a bit of research to get right.

One more quick point on the ExplorerCanvas thing -- it's cool that they got that thing to work, but in my mind it suffers from a very fundamental flaw:  it tries to implement an imperative interface (canvas) on top of a declarative one (vml).  The effect of this is that the very things that should be fast in an imperative model ( e.g. drawing lots of small primitives) become horribly slow, violating the implied contract of the imperative model.  Personally, I'm a really big fan of imperative interfaces like Canvas, because you can always implement a declarative/retained model on top of them, and they give the developer much more opportunity to optimize.  But unfortunately, that's not the way most things on the web work... sigh.

joel.

Mark Bakker

unread,
Jan 3, 2007, 11:03:14 AM1/3/07
to Google-Web-Tool...@googlegroups.com
Thanks for the response Joel. I think you adressed some real pointers... I will give the flash API a serious look and get a proof of concept running based on flash.

Mark Bakker

unread,
Jan 4, 2007, 12:00:24 AM1/4/07
to Petko Chobantonov, Google-Web-Tool...@googlegroups.com
Hi Petko,

I have changed the MyApllication.html in the following

<html>
    <head>
        <meta name='gwt:module' content='com.test.MyApplication'>
        <title>Rectangle - gwt-svg org.gwtsvg.client.basicshapes.Rectangle</title>
       
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
v\:* { behavior: url(#default#VML); }
</style>
    </head>
    <body bgcolor="white">

        <!--                                            -->
        <!-- This script is required bootstrap stuff.   -->
        <!-- You can put it in the HEAD, but startup    -->
        <!-- is slightly faster if you include it here. -->
        <!--                                            -->
        <script language="javascript" src=" gwt.js"></script>

        <!-- OPTIONAL: include this if you want history support -->
        <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

        <h1>MyApplication</h1>

        <p>
            This is an example of a host page for the MyApplication application.
            You can attach a Web Toolkit module to any HTML page you like,
            making it easy to add bits of AJAX functionality to existing pages
            without starting from scratch.
        </p>

        <table align=center>
            <tr>
                <td id="slot1"></td><td id="slot2"></td>
            </tr>
        </table>
       </body>
</html>

This should work... please be aware that this library is only for proof of concept uses. VML SVG should initiated correctly in the HTML I didn't document this

cheers,

Mark

On 1/4/07, Petko Chobantonov <choba...@gmail.com> wrote:
I'm attaching the example. Just run MyApplication-shell.cmd and you should see the problem. If I use MyApplication-compile.cmd then the code is generated and I can use Firefox and I can see the rectangle. However if I use IE then I'm getting the same problem "Unexpected call to method or property access". I'm using IE 6.0

Also I'm using the latest code of gwt-svg (I just did a clean checkout)

Let me know if you need more information
Thanks

PS: I had to rename MyApplication-shell.cmd to MyApplication-shell.cmd1 and MyApplication-compile.cmd to MyApplication-compile.cmd1 as gmail complained that the zip file contained executable files.


On 1/3/07, Mark Bakker <bakke...@gmail.com > wrote:
When do you get this error? do you have a code sample?

On 1/4/07, chobantonov < choba...@gmail.com> wrote:
I have followed the instructions to create a basic test for this API.
I'm getting the following exception when using IE:

com.google.gwt.core.client.JavaScriptException: JavaScript Error
exception: Unexpected call to method or property access.
        at
com.google.gwt.dev.shell.ie.ModuleSpaceIE6.invokeNative(ModuleSpaceIE6.java :396)
        at
com.google.gwt.dev.shell.ie.ModuleSpaceIE6.invokeNativeVoid(ModuleSpaceIE6.java:283)
        at
com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:127)
        at
com.google.gwt.user.client.impl.DOMImpl.appendChild(DOMImpl.java:28)
        at com.google.gwt.user.client.DOM.appendChild(DOM.java:64)
        at com.google.gwt.user.client.ui.Panel.adopt(Panel.java:57)
        at
com.google.gwt.user.client.ui.ComplexPanel.insert(ComplexPanel.java:56)
        at
com.google.gwt.user.client.ui.ComplexPanel.add(ComplexPanel.java:67)
        at
com.google.gwt.vector.client.ui.VectorWidget.add (VectorWidget.java:40)
        at
com.google.gwt.vector.client.ui.BasicShape.<init>(BasicShape.java:37)

Do I have to change something in order to get it running in IE?

Thanks
> > > > > >    - http://www.w3.org/TR/NOTE-VML
> > > > > >    - http://www.w3.org/TR/SVG11/

> > > > > >
> > > > > > VML and SVG are functional more or less the same. One major
> > > > > > differences between VML and SVG is that VML does not support clipping and
> > > > > > well defined
> > > > > > borders on vector objects. For now I expect all graphics will be
> > > > > > drawn within the defined panel.
> > > > > >
> > > > > > To support vector graphics in browsers without additional plug ins
> > > > > > VML will be used for IE and hosted mode, for all other browsers SVG will be
> > > > > > used.
> > > > > >
> > > > > > The vector API fill support the following objects;
> > > > > >
> > > > > >    - VectorPanel: A panel what holds basic shapes
> > > > > >
> > > > > > basic shapes:
> > > > > >
> > > > > >    - Rectangle:  rectangle shape
> > > > > >    - Circle: circle shape
> > > > > >    - Eclipse: eclipse shape
> > > > > >    - Line: line shape
> > > > > >    - Polyline: polyline shape
> > > > > >    - Text: text shape
> > > > > >
> > > > > > The basic shapes will support fill-color, fill-opacity,
> > > > > > stroke-color, stroke-width, stroke-opacity. On the basic shapes it is
> > > > > > possible to add MouseListerners
> > > > > > LoadListerners, and ClickListerners.
> > > > > >
> > > > > > I think this will be a good start for Vector API of cource
> > > > > > functionality can always be added.
> > > > > >
> > > > > > example:
> > > > > >
> > > > > >         VectorPanel vectorPanel = new VectorPanel(300, 300);
> > > > > >
> > > > > >         Rectangle rectangle = new Rectangle(100, 100, 100, 100);
> > > > > >
> > > > > >         rectangle.setFillColor (Color. GREEN);

Mark Bakker

unread,
Jan 16, 2007, 4:24:50 AM1/16/07
to Google-Web-Tool...@googlegroups.com
I have been on holidays in Austria for some snowboarding. Starting of tomorrow I will be back on the vector API.

For the people who are interested;I had a great holiday!

On 1/4/07, Petko <choba...@gmail.com> wrote:
It is working now.
Thanks for your help!
> On 1/4/07, *Petko Chobantonov* <choba...@gmail.com

> <mailto: choba...@gmail.com>> wrote:
>
>     I'm attaching the example. Just run MyApplication-shell.cmd and
>     you should see the problem. If I use MyApplication-compile.cmd
>     then the code is generated and I can use Firefox and I can see the
>     rectangle. However if I use IE then I'm getting the same problem
>     "Unexpected call to method or property access". I'm using IE 6.0
>
>     Also I'm using the latest code of gwt-svg (I just did a clean
>     checkout)
>
>     Let me know if you need more information
>     Thanks
>
>     PS: I had to rename MyApplication-shell.cmd to
>     MyApplication-shell.cmd1 and MyApplication-compile.cmd to
>     MyApplication-compile.cmd1 as gmail complained that the zip file
>     contained executable files.
>
>
>     On 1/3/07, *Mark Bakker* <bakke...@gmail.com
>     <mailto:bakke...@gmail.com> > wrote:
>
>         When do you get this error? do you have a code sample?
>
>         On 1/4/07, *chobantonov* < choba...@gmail.com

>         <mailto:choba...@gmail.com>> wrote:
>
>             I have followed the instructions to create a basic test
>             for this API.
>             I'm getting the following exception when using IE:
>
>             com.google.gwt.core.client.JavaScriptException: JavaScript
>             Error
>             exception: Unexpected call to method or property access.
>                     at
>             com.google.gwt.dev.shell.ie.ModuleSpaceIE6.invokeNative(ModuleSpaceIE6.java
>             :396)
>                     at
>             com.google.gwt.dev.shell.ie.ModuleSpaceIE6.invokeNativeVoid(ModuleSpaceIE6.java:283)
>                     at
>             com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid (JavaScriptHost.java:127)
>                     at
>             com.google.gwt.user.client.impl.DOMImpl.appendChild(DOMImpl.java:28)
>                     at
>             com.google.gwt.user.client.DOM.appendChild (DOM.java:64)
>                     at
>             com.google.gwt.user.client.ui.Panel.adopt(Panel.java:57)
>                     at
>             com.google.gwt.user.client.ui.ComplexPanel.insert (ComplexPanel.java:56)

>                     at
>             com.google.gwt.user.client.ui.ComplexPanel.add(ComplexPanel.java:67)
>                     at
>             com.google.gwt.vector.client.ui.VectorWidget.add
>             (VectorWidget.java:40)
>                     at
>             com.google.gwt.vector.client.ui.BasicShape.<init>(BasicShape.java:37)
>
>             Do I have to change something in order to get it running
>             in IE?
>
>             Thanks
>
>             Mark Bakker wrote:
>             > Thanks for the response Joel. I think you adressed some
>             real pointers... I
>             > will give the flash API a serious look and get a proof of
>             concept running
>             > based on flash.
>             >
>             > On 1/3/07, Joel Webber < j...@google.com
>             <mailto:miroslav...@gmail.com>> wrote:
>             > > > >
>             > > > > What do ppl think of the Google ExplorerCanvas ?
>             Would it help or
>             > > > > perhaps be a good start if one wanted a canvas to
>             paint pixels etc instead
>             > > > > of drawing shapes with someother abstraction ?
>             > > > >
>             > > > > On 12/30/06, Kelly Norton < kno...@google.com

rjain15

unread,
Jan 24, 2007, 11:01:40 PM1/24/07
to Google Web Toolkit Contributors
Mark,

I guess I replied to another thread ( on the similar topic), since you
have already started this project, will it be possible to share some
version. I could start testing.

regards
Rajesh

On Jan 16, 4:24 am, "Mark Bakker" <bakker.m...@gmail.com> wrote:
> I have been on holidays in Austria for some snowboarding. Starting of
> tomorrow I will be back on the vector API.
>
> For the people who are interested;I had a great holiday!
>

> > > On 1/4/07, *Petko Chobantonov* <chobanto...@gmail.com


> > > <mailto:chobanto...@gmail.com>> wrote:
>
> > > I'm attaching the example. Just run MyApplication-shell.cmd and
> > > you should see the problem. If I use MyApplication-compile.cmd
> > > then the code is generated and I can use Firefox and I can see the
> > > rectangle. However if I use IE then I'm getting the same problem
> > > "Unexpected call to method or property access". I'm using IE 6.0
>
> > > Also I'm using the latest code of gwt-svg (I just did a clean
> > > checkout)
>
> > > Let me know if you need more information
> > > Thanks
>
> > > PS: I had to rename MyApplication-shell.cmd to
> > > MyApplication-shell.cmd1 and MyApplication-compile.cmd to
> > > MyApplication-compile.cmd1 as gmail complained that the zip file
> > > contained executable files.
>

> > > On 1/3/07, *Mark Bakker* <bakker.m...@gmail.com


> > > <mailto:bakker.m...@gmail.com> > wrote:
>
> > > When do you get this error? do you have a code sample?
>

> > > On 1/4/07, *chobantonov* < chobanto...@gmail.com


> > > <mailto:chobanto...@gmail.com>> wrote:
>
> > > I have followed the instructions to create a basic test
> > > for this API.
> > > I'm getting the following exception when using IE:
>
> > > com.google.gwt.core.client.JavaScriptException: JavaScript
> > > Error
> > > exception: Unexpected call to method or property access.
> > > at
> > > com.google.gwt.dev.shell.ie.ModuleSpaceIE6.invokeNative(
> > ModuleSpaceIE6.java
> > > :396)
> > > at
> > > com.google.gwt.dev.shell.ie.ModuleSpaceIE6.invokeNativeVoid(
> > ModuleSpaceIE6.java:283)
> > > at
> > > com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(
> > JavaScriptHost.java:127)
> > > at
> > > com.google.gwt.user.client.impl.DOMImpl.appendChild(
> > DOMImpl.java:28)
> > > at

> > > com.google.gwt.user.client.DOM.appendChild(DOM.java:64)

> > > > > On 12/30/06, Mark Bakker < bakker.m...@gmail.com

> > > miroslav.poko...@gmail.com


> > > <mailto:miroslav.poko...@gmail.com>> wrote:
>
> > > > > > > What do ppl think of the Google ExplorerCanvas ?
> > > Would it help or
> > > > > > > perhaps be a good start if one wanted a canvas to
> > > paint pixels etc instead
> > > > > > > of drawing shapes with someother abstraction ?
>

> > > > > > > On 12/30/06, Kelly Norton < knor...@google.com

> > > > > > > > On 12/29/06, Mark Bakker < bakker.m...@gmail.com


> > > <mailto:bakker.m...@gmail.com>> wrote:
>
> > > > > > > > > The last few weeks I have been doing some
> > > research on the 'Vector
> > > > > > > > > API' This API will make use of VML and SVG to
> > > draw vector graphics to the
> > > > > > > > > browser
>
> > > > > > > > > -http://www.w3.org/TR/NOTE-VML

> > > > > > > > > -http://www.w3.org/TR/SVG11/

Mark Bakker

unread,
Jan 25, 2007, 4:16:13 AM1/25/07
to Google-Web-Tool...@googlegroups.com
Rajesh,

The proof of concept state code can be found at:

http://code.google.com/p/gwt-svg/

How to use it is discussed in:

http://groups.google.com/group/Google-Web-Toolkit-Contributors/browse_thread/thread/bd598e1121d1668c/dbf0b9943816be6b?lnk=gst&q=Vector+API&rnum=1#dbf0b9943816be6b

WARNING: this API can and will change alot!! I use it to put my current source code

cheers,

Mark Bakker
> > >             > > - Flash is less complete ( e.g., no cubic curves), but
> > >             > > > > > >    - http://www.w3.org/TR/SVG11/
Reply all
Reply to author
Forward
0 new messages