Excanvas with Silverlight for Freeciv Web Client

[AndreasRosdal]

Hello!

I have created a web client for Freeciv which uses the Canvas element:
http://freeciv.wikia.com/wiki/FreecivWebClient

For implementing IE support, I'm using excanvas with Silverlight
support,
and so far I'm very satisified with excanas. However, I have two
questions:

- Is there anything I can do to improve performance with excanvas?
Rendering the whole map with Firefox takes about 150 ms,
while using excanvas it usually takes about 4 seconds. Most of the
rendering consists of drawing many small graphics tiles in several
layers.

- How do I add a Javascript callback for mouse-click events on the
Silverlight excanvas?

Mvh,
Andreas R.

[Erik Arvidsson]

On Tue, May 27, 2008 at 15:49, AndreasRosdal
<andreas...@adresseavisen.no> wrote:
>
> Hello!
>
> I have created a web client for Freeciv which uses the Canvas element:
> http://freeciv.wikia.com/wiki/FreecivWebClient

Cool

> For implementing IE support, I'm using excanvas with Silverlight
> support,
> and so far I'm very satisified with excanas. However, I have two
> questions:
>
> - Is there anything I can do to improve performance with excanvas?
> Rendering the whole map with Firefox takes about 150 ms,
> while using excanvas it usually takes about 4 seconds. Most of the
> rendering consists of drawing many small graphics tiles in several
> layers.

Do you mind profiling the ExCanvas code for your usecase to see where
we spend most of the time?

> - How do I add a Javascript callback for mouse-click events on the
> Silverlight excanvas?

Doh, I never added code for this. Since the Silverlight version uses
a plugin we will have to add code to handle mouse and keyboard events
manually and retarget them to the correct element.

I don't have the time to work on this at the moment and I would really
appreciate any help we can get. We would need to add event listeners
for the events on the silverlight root element (see the silverlight
sdk) and then use fireEvent on the HTML canvas element (see MSDN dhtml
reference).
>
> Mvh,
> Andreas R.
>
>
>
>
> >
>

--
erik

[AndreasRosdal]

On 28 Mai, 08:29, "Erik Arvidsson" <erik.arvids...@gmail.com> wrote:
> > - Is there anything I can do to improve performance with excanvas?
> > Rendering the whole map with Firefox takes about 150 ms,
> > while using excanvas it usually takes about 4 seconds. Most of the
> > rendering consists of drawing many small graphics tiles in several
> > layers.
>
> Do you mind profiling the ExCanvas code for your usecase to see where
> we spend most of the time?

Here are the profiling results from Tito Web Studio using excanvas
with Silverlight:
http://www.pvv.ntnu.no/~andrearo/excanvas-silverlight-profiling.png

Here are the results using the default (vml) excanvas:
http://www.pvv.ntnu.no/~andrearo/excanvas-vml-profiling.png

The profiling shows that the excanvas function drawImage() is used
heavily in my application,
using 37% cumulative time using excanvas-silverlight, and 58%
cumulative time using the default excanvas.

So the silverlight version is much faster than the default excanvas,
here is the average time of one drawImage() call:
- excanvas-silverlight: 0,7ms
- default excanvas: 2,1 ms

Thanks to doing this profiling, I also found that the function taking
the most time when using excanvas-silverlight
was not rendering to the canvas, but parsing XML in the SOAP libary.

However, I'm not totally sure that this performance profiling measures
CPU time spent in the Silverlight plug-in,
so that may make the results somewhat incorrect.

If there is _anything_ I can do to speed up drawImage() in excanvas-
silverlight, that would probably
improve the performance quite a lot. I'll also have to look at the XML
parser in the SOAP library.

> > - How do I add a Javascript callback for mouse-click events on the
> > Silverlight excanvas?
>
> Doh, I never added code for this. Since the Silverlight version uses
> a plugin we will have to add code to handle mouse and keyboard events
> manually and retarget them to the correct element.
>
> I don't have the time to work on this at the moment and I would really
> appreciate any help we can get. We would need to add event listeners
> for the events on the silverlight root element (see the silverlight
> sdk) and then use fireEvent on the HTML canvas element (see MSDN dhtml
> reference).

I'll try to look into it, but please add it to some feature-request
list. :-)


Mvh,
Andreas

[Erik Arvidsson]

Thanks,

It is a known issue that images in the VML version are very slow. I
was a bit surprised that the Silverlight version was slow as well. We
delegate most of the work to SL to do the actual work in draw image so
I don't think we can improve performance there.

Regarding SOAP: I used SOAP at a previous company from web apps and
you should really consider to switching to JSON (or JSON RPC etc). It
will be a lot easier to work with on and it has way better
performance. To sum it up, SOAP in web applications is pretty much a
dead end.

--
erik

[AndreasRosdal]

On 28 Mai, 08:29, "Erik Arvidsson" <erik.arvids...@gmail.com> wrote:

> On Tue, May 27, 2008 at 15:49, AndreasRosdal

> >http://freeciv.wikia.com/wiki/FreecivWebClient

> > - How do I add a Javascript callback for mouse-click events on the
> > Silverlight excanvas?
>
> Doh, I never added code for this. Since the Silverlight version uses
> a plugin we will have to add code to handle mouse and keyboard events
> manually and retarget them to the correct element.
>
> I don't have the time to work on this at the moment and I would really
> appreciate any help we can get. We would need to add event listeners
> for the events on the silverlight root element (see the silverlight
> sdk) and then use fireEvent on the HTML canvas element (see MSDN dhtml
> reference).

Could you elaborate a little about how to add the event listener for
mouse clicks
on the silverlight canvas? What is the silverlight root element in
excanvas?
The only relevant resource on the net I've found so far is this one:
http://mnmnmn.typepad.com/mnmnmn/2007/09/javascript-even.html

>Regarding SOAP: I used SOAP at a previous company from web apps and
>you should really consider to switching to JSON (or JSON RPC etc). It
>will be a lot easier to work with on and it has way better
>performance. To sum it up, SOAP in web applications is pretty much a
>dead end.

Switching to JSON improved the performance drastically.
Thanks for the advice!

- Andreas R.

[AndreasRosdal]

Here is a demo of the Freeciv web client:
http://freeciv-web.game-host.org:8080/freeciv-web/login.jsp

Let me know what you think!

[Jonathan Ellis]

On Jun 13, 4:16 pm, AndreasRosdal <andreas.ros...@adresseavisen.no>
wrote:

> On 28 Mai, 08:29, "Erik Arvidsson" <erik.arvids...@gmail.com> wrote:
>
> > On Tue, May 27, 2008 at 15:49, AndreasRosdal
> > >http://freeciv.wikia.com/wiki/FreecivWebClient
> > > - How do I add a Javascript callback for mouse-click events on the
> > > Silverlight excanvas?
>
> > Doh,  I never added code for this.  Since the Silverlight version uses
> > a plugin we will have to add code to handle mouse and keyboard events
> > manually and retarget them to the correct element.
>
> > I don't have the time to work on this at the moment and I would really
> > appreciate any help we can get.  We would need to add event listeners
> > for the events on the silverlight root element (see the silverlight
> > sdk) and then use fireEvent on the HTML canvas element (see MSDN dhtml
> > reference).
>
> Could you elaborate a little about how to add the event listener for
> mouse clicks
> on the silverlight canvas? What is the silverlight root element in
> excanvas?
> The only relevant resource on the net I've found so far is this one:http://mnmnmn.typepad.com/mnmnmn/2007/09/javascript-even.html

Hi Andreas,

Did you ever make any progress here? I'm also working on a project
that needs mouse event listeners in canvas.

-Jonathan

[AndreasRosdal]

On 2 Jul, 21:47, Jonathan Ellis <jbel...@gmail.com> wrote:
> On Jun 13, 4:16 pm, AndreasRosdal <andreas.ros...@adresseavisen.no>

> > On 28 Mai, 08:29, "Erik Arvidsson" <erik.arvids...@gmail.com> wrote:
>
> > > On Tue, May 27, 2008 at 15:49, AndreasRosdal
> > > >http://freeciv.wikia.com/wiki/FreecivWebClient
> > > > - How do I add a Javascript callback for mouse-click events on the
> > > > Silverlight excanvas?
>
> > > Doh,  I never added code for this.  Since the Silverlight version uses
> > > a plugin we will have to add code to handle mouse and keyboard events
> > > manually and retarget them to the correct element.
>
> > > I don't have the time to work on this at the moment and I would really
> > > appreciate any help we can get.  We would need to add event listeners
> > > for the events on the silverlight root element (see the silverlight
> > > sdk) and then use fireEvent on the HTML canvas element (see MSDN dhtml
> > > reference).
>

> Hi Andreas,
>
> Did you ever make any progress here?  I'm also working on a project
> that needs mouse event listeners in canvas.
>
> -Jonathan

Yes, I managed to add a mouse event listener to excanvas.
The code can be found here:
http://freeciv-web.game-host.org:8080/freeciv-web/javascript/excanvas-silverlight.js


This is basically what I added to excanvas-silverlight.js:

contextPrototype.addExcanvasListener = function(eventType, callback)
{
var root = getRoot(this);
root.addEventListener(eventType, callback);
};


This is the code where I add the mouse callback:
if (navigator.appName == "Microsoft Internet Explorer") {

mapview_canvas.getContext("2d").addExcanvasListener("mouseLeftButtonUp",
mapview_clicked);
}


It can all be tested here:
http://freeciv-web.game-host.org:8080/freeciv-web/login.jsp

[Erik Arvidsson]

Cool. It would be nice to add a more generic mechanism for these but
I'm not sure it is worth it. One simple compromise would be to at
least override attachEvent and detachEvent to do the semi right thing.

--
erik