[webkit-help] Need help regarding layouting and painting part

[85.mukesh]

Hi All,

Many many thanks to Julien Chaffraix for Giving high level technical details

But still I need some clarification on my understanding.

I have seen the box2d js lib which is on path

http://jquery-box2dweb.googlecode.com/svn/trunk/

 http://jquery-box2dweb.googlecode.com/svn/trunk/assets/

http://jquery-box2dweb.googlecode.com/svn/trunk/alpha/

I am trying to understand the high level technical details about box2djs
approach.

Demo application is @ path: running on google chrome

http://jquery-box2dweb.googlecode.com/svn/trunk/testing.html

 As per my understanding, to apply the effect on DOM Element.

We need to map it with Box2d shape; we need to handle it explicitly.

 Which is done using lib
jQbox2D.Alpha.js<http://jquery-box2dweb.googlecode.com/svn/trunk/alpha/jQbox2D.Alpha.js>and
lib
Box2dWeb-2.1.a.3.min.js<http://jquery-box2dweb.googlecode.com/svn/trunk/assets/Box2dWeb-2.1.a.3.min.js>is
for converted js lib of Box2d written in cpp.

As per my understating, high level technical detail is

1. A jQuery Plugin for Implementing Box2Dweb on DOM
Elements<http://code.google.com/p/jquery-box2dweb/>

2. We animate those via dynamically (javascript styly) set CSS3 transforms
/ translate / rotate combos

3. The values for this CSS/javascript mambo-jumbo are calculated via
box2d-web

Please let me know if I am wrong in by understating of Box2d Js Approach to
apply effect on element.

Note: My Problem statement:

I am trying to do apply effect on DOM element using CSS extension with
Box2dLIb written in C++ and I do not handle any JS code during making any
Box2d based application to apply effect on element using Box2dJS.I can use
only CSS (CSS extension) and rest part I need to handle inside webkit code.

Please let me know

1. How can we collect the DOM element size in Webkit Code (1.A jQuery
Plugin for Implementing Box2Dweb on DOM
Elements<http://code.google.com/p/jquery-box2dweb/>
).

2. How can we animate the Box2dobject, I guess we need to do
troubleshooting in directory Source/WebCore/page/Animation because in JS
code it is starting engine using api *window.requestAnimationFrame* (we
animate them via dynamically (javascript styly) set CSS3 transforms /
translate / rotate combos)

3.I am able to map the 3rd section in webkit(values for this CSS/javascript
mambo-jumbo are calculted via box2d-web)



Thanks & Regards,

MK


On Wed, Feb 13, 2013 at 10:15 PM, Julien Chaffraix <
julien.chaffraix at gmail.com> wrote:

> > I want to put any kind of Box2d effect on html element. These things I
> want
> > to do with css extension. Till now I have done how to get value from css
> > wrapper and able to store in own created Box2d module. But this value, I
> > want to apply on any kind of html element or page. Say for example, if I
> > apply the Box2d effect on Html tag or any html page then Box2d effect
> will
> > be applied on that element or page. Now I am facing problem, how to
> animate
> > the object with box2d effect, I mean, Layouting and Painting part. Please
> > let me know how I can proceed.
>
> Looking at the demo, they are using animations to avoid relaying out
> the whole page and keep it snappy. It's probably the right way to go
> but understand that in doing so, your new elements won't impact
> regular elements' layout in your page as they animate (transformations
> are paint time only operations). That's also probably the easiest way
> to get where you want to go. I would look at how to we do animations
> (see Source/WebCore/page/animations/*) and try to do something similar
> by you would need to hook the box2D logic.
>
> The other option would be a custom renderer (RenderObject) which would
> solve the interaction with the rest of the page but would mean a lot
> more complexity. Understand that if you take this route, it will take
> at least several months for someone unfamiliar with WebKit rendering.
>
> > Please let me know if you guys have any
> > change list related to adding any css properties with its full
> > implementation.
>
> That doesn't happen in practice as it would be too big to review. I
> usually ask people to break the CSS side vs the rendering side of a
> change so that they can be reviewed independently.
>
> You can look at the regions, exclusions and grid layout changes for
> some idea of how to implement the CSS + rendering side, just pick a
> property and start looking in the history.
>
> Here is a recent example to add some new CSS properties:
> http://trac.webkit.org/changeset/141787
>
> Hope it helps,
> Julien
>



-- 
Mukesh Kumar gupta
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-help/attachments/20130218/c60608ae/attachment-0001.html>