Re: Should I use HTML5 canvas just to create my own slideshow reader ?

[ashwin....@gmail.com]

there are multiple options available apart from HTML5 canvas. 

1. RapahelGWT (this is an extension of Raphael JS for GWT), using this images would be rendered as SVG. And raphael works with lower versions of ie as well http://code.google.com/p/raphaelgwt/

2. you can also look at a SlidingPanel (example of this is provided in expense tutorial), and customize it to load your images.

3. vectomatic (gwt project available), an svg & html5 canvas plugin for GWT.  http://code.google.com/p/vectomatic/

svg is supposed to be more suited for static images and interactivity. HTML5 canvas when there is lots of animation/ computations involved. 

the following video link provides a good introduction to html5 and showcases differences between svg and canvas

http://www.youtube.com/watch?v=siOHh0uzcuY&feature=relmfu

~Ashwin

On Fri, Jun 8, 2012 at 9:59 AM, regnoult axel <regn...@gmail.com> wrote:

Hello,

I am trying to develop my own slideshow reader (you just see the albums fotos in the full screen mode and slide them).

I started using HTML5 canvas but just because it was more "modern" but IE8 does not support HTML5 canvas. So my question is :  "Should I use HTML5 canvas to do my slideshow (I will need a caroussel and animation between images) ?" Could you argue your answer (because maybe HTML5 canvas are more interesting to do more complicated things) ?

Thanks you,

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/MYtozTQ1cSgJ.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Olivier TURPIN]

Hello 

Transition can easily be done with CSS3 (but also need modern browser), check this project it could give you some ideas :)

https://github.com/pyricau/rockslide

Olivier.

[Joseph Lust]

Axel,

You can do some really amazing stuff with canvas, but keep in mind the added overhead. Canvas is really just an image buffer. If you want clickable interaction with on canvas elements, you'll quickly find yourself building your own Scene Graph as we did on our own project. Canvas was the cat's meow for some cutting edge stuff we were doing, but took a lot of work too.

If you just want fun transitions, and slides animating as they zip back and forth, then you can do all this and more with CSS3 and some div's much more easily.

Sincerely,

Joseph

[Jens]

+1 for CSS 3 transitions. Should be easy to implement and browsers that do not support transitions simply switch instant between slides. Small downside: You kick out animations in IE9 (it supports canvas but not transitions).

Transition browser support: http://caniuse.com/#search=transition

Transition overview: http://css3.bradshawenterprises.com/

A fallback solution for IE could be GWT's Animation class where you could implement your transition "by hand".

GWT Animation examples:

http://fascynacja.wordpress.com/2010/07/01/gwt-animation-small-review/

http://www.giantflyingsaucer.com/blog/?p=1548

As already mentioned the main advantage of using transitions/GWT animations is that your slides can be HTML and thus can contain clickable links, or even animations inside a slide.

-- J.

[Alfredo Quiroga-Villamil]

We are not 100% ready yet, still adding a few more things and
improving some areas but this is coming soon to theaters and of course
using GWT:

Canvas4j

See a sneak peek at:

http://emitrom-test.appspot.com/

Some of the things you'll be able to do:

a) Drag
b) Events
c) Set all kinds of stuff to the shapes, including animations,
opacity, color, you name it.
d) Shape editing capabilities.
e) We are trying to see if we can get into the first release bounding
boxes and a few other goodies for basic shapes.
f) Out of the box areas and perimeters for shapes.
g) It's obviously all canvas so you won't be limited to the basic set
of shapes we'll give you. You can create your own while still being
able to animate, drag, etc...

A lot of the shapes in the demo are draggable. Do one click on the
orange, yellowish rectangle and you'll see a quick animation in
action.

More to come soon.

Alfredo

> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/google-web-toolkit/-/CY4RZHEbrCAJ.

>
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-tool...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-web-toolkit?hl=en.

--
Alfredo Quiroga-Villamil

AOL/Yahoo/Gmail/MSN IM:  lawwton

[Joseph Lust]

Alfredo,

Awesome! We've written our own version internally, but cannot release it. I'm very happy to see what you have made. It will definitely be a feather in GWT's cap.

Oh, and at first I saw it and though to myself "Duh, just some SVG shapes," didn't even realize it was canvas given the interactions and sharpness. One caveat, even on Chrome 19, FX8 proc, and 12GB memory, there is a slight, but constant delay during drag events. We got around that in our library with frame queues and JSNI interaction with the browser to get/cancel upcoming frame draws as needed.

Keep up the fine work!

Sincerely,

Joseph