Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
New Contributor
smdesai
Posts: 6
Registered: ‎06-03-2012
My Device: None

Rotating an element around the x-axis

Is rotation around the x-axis supported by QML in Cascades?

Please use plain text.
BlackBerry Development Advisor
IsaacGordezky
Posts: 57
Registered: ‎10-04-2012
My Device: developer

Re: Rotating an element around the x-axis

No, Cascades does not support rotation around the x or y-axes. Cascades is a 2D-only framework, and rotation around the x or y-axes is a 3D rotation. Cascades VisualNode class supports translation, scale and rotation in the 2D plane only.

 

The rotationZ property allows rotation in the 2D plane, and the pivotX and pivotY can be used to change the center-point of that rotation. More information on 2D transforms can be fount at https://developer.blackberry.com/cascades/reference/bb__cascades__visualnode.html

Please use plain text.
Developer
Dredvard
Posts: 160
Registered: ‎01-27-2012
My Device: Playbook

Re: Rotating an element around the x-axis

In a Cascades app, how should we then rotate an image about the x or y axis?

---
If you find my post helpful please "like" it and "accept as a solution"
Please use plain text.
BlackBerry Development Advisor
IsaacGordezky
Posts: 57
Registered: ‎10-04-2012
My Device: developer

Re: Rotating an element around the x-axis

Unfortunately, since you cannot do it with Cascades, your best bet would be to do it in OpenGL. In cascades you can use a ForiegnWindowControl to display OpenGL, which you would need to have render your image in 3D space. There is a sample app on github called HelloForeignWindow which should give you an idea of how to use the ForeignWindowControl in a Cascades app.

There are some ForeignWindowControl limitations to note however. A ForeignWindowControl makes a hole in Cascades, through which you can display non-Cascades content - in this case OpenGL. This means that nothing behind the ForeignWindowControl will be visible, and transparency will not allow you to "see through" a ForeignWindowControl. Howver, it is possible to overlay Cascades UI controls on top of a ForeignWindowControl.

Please use plain text.
Developer
Dredvard
Posts: 160
Registered: ‎01-27-2012
My Device: Playbook

Re: Rotating an element around the x-axis

So this wouldn't be doable in cascades then:

 

http://blackberry.github.com/Cascades-Community-Samples/stumpthedevs/edkambulow-large.jpg

 

Tthe side images would be doable - but just not their reflection (which would require transparency).

---
If you find my post helpful please "like" it and "accept as a solution"
Please use plain text.
BlackBerry Development Advisor
IsaacGordezky
Posts: 57
Registered: ‎10-04-2012
My Device: developer

Re: Rotating an element around the x-axis

The Cascades framework cannot do the side images, or their reflections. The side images are actually perspective transformed, something cascades cannot do. Although Cascades allows scaling, it scales the entire control and cannot scale the top and bottom (or left and right) dimensions of a control independantly, which would be needed to create the 3D perspective shown in the screenshot.

You can do all of this with OpenGL, and that is exactly what XBMC has done. Their UI uses OpenGL specifically for that purpose. You can look at the XBMC source code, and even port it to do it for you on BB10 using OpenGL. You can integrate that into a Cascades app with the ForeignWindowControl but, as I wrote above, you cannot do it with Cascades UI controls.

Please use plain text.
Developer
igosoft
Posts: 71
Registered: ‎09-19-2012
My Device: Z10 very soon

Re: Rotating an element around the x-axis

[ Edited ]
Please use plain text.
Developer
Dredvard
Posts: 160
Registered: ‎01-27-2012
My Device: Playbook

Re: Rotating an element around the x-axis

Actually I do like it!

 

But this does the carousel but it doesn't do the perspective (rotating about the Y axis).   I've discussed the solution with  Johan and its implementation to the other stumper.    He also confirmed that the only way to do it is to do an entirely OpenGL solution.  They chose not to implement the perspective because they felt an OpenGL solution would be cheating. The intent is that Cascades will eventually have 3D implementations - however it just doesn't have the ability to do it in real time yet. 

 

I've modified his solution slightly to get it closer to the other stumper here:

 

https://github.com/dredvard/Carousel_gallery

 

Its a little buggy, (a directional mismatch between the angle and screen x-locations) so its not very smooth.    I do implement a y-axis rotation, but not dynamically (only on load).    i have a more update version, but because I haven't troubleshooted the above bug I haven't committed it yet.

 

 

---
If you find my post helpful please "like" it and "accept as a solution"
Please use plain text.