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
Contributor
AleksDef
Posts: 42
Registered: ‎05-30-2012
My Device: Simulator
Accepted Solution

ImageView and panning / zooming

Hello all,

 

I am in a situation where I need to use a control to display an image and pan it on drag. Also this control will have to be able to zoom into the image on pinch, but I've been told that there is no pinch event in Cascades so far, so let's focus on the pan element. When the user touches the ImageView (on touch) it should be able to move as the finger moves. I know that ImageView doesn't support this functionality, but what approach should I take to incorporate this?

 

Let's say I've loaded the image from some path and I have a QImage stored somewhere. I've used it's data to display an Image in ImageView. How do I implement panning in ImageView? Or if it can't be done, how should I create an image control that can pan (for now) and zoom (in the future)? Basically, I am looking for a Cascades equivalent of this Native functionality example called Gestures: https://developer.blackberry.com/native/sampleapps/.

 

I don't need all the functionality of that example. I need information how to pan an image in a Cascades control.

 

Thanks in advance.

BlackBerry Development Advisor (Retired)
smacmartin
Posts: 499
Registered: ‎05-07-2012
My Device: developer

Re: ImageView and panning / zooming

Take a look at https://bdsc.webapps.blackberry.com/cascades/documentation/ui/integrating_cpp_qml/custom_control_tut...

This shows moving, responding to touch events.

 

Stuart

Contributor
AleksDef
Posts: 42
Registered: ‎05-30-2012
My Device: Simulator

Re: ImageView and panning / zooming

Thanks, but it doesn't help much. I need to implement an image control similar to the example given (Gestures in the native SDK), not a slider-like control. Perhaps such a control should use the native functionality, but how do I link native functionality. For example, can (and if yes, how) I use a ForeignWindow to display the Gestures example functionality to cascades? Or if I shouldn't use ForeignWindow, how can I recreate the Gestures functionality? Now, that is the question.

Retired
gbeukeboom
Posts: 2,559
Registered: ‎10-16-2009
My Device: BlackBerry Z10

Re: ImageView and panning / zooming

Gesture support is not available through Cascades yet, but it should be coming. Once there you can extend the functionality of ImageView and add support for zoom.

 

Currently you are able implement the logic to pan the image by responding to touch events (Down then Move) as noted by Stuart. This could then be expanded to handle gestures once APIs are available.

Garett
@garettBeuk
--
Goodbye everybody!
Contributor
AleksDef
Posts: 42
Registered: ‎05-30-2012
My Device: Simulator

Re: ImageView and panning / zooming

And that is exactly what I am asking. How do I implement panning with ImageView? Do I move (translate) the ImageView control in a container smaller than the ImageView itself? (Since you can't control the underlying image.)

Is it even possible the container to be smaller than the item it contains?

 

I know of the touch events, I don't need zooming for now. I need advice on how to implement the pan. All that's been given so far is generalization and nothing specific.

 

Retired
gbeukeboom
Posts: 2,559
Registered: ‎10-16-2009
My Device: BlackBerry Z10

Re: ImageView and panning / zooming

Yes, you can place an element in a Container smaller than the size of the element but the Container will need to be made scrollable (scrollMode: ScrollMode.Both) so it knows to allow the larger child element to extend past its bounds.

 

For the Pan, just take a look at the PullMyBeard sample, it shows how to listen for touch events and move an ImageView with the touch movement:

https://developer.blackberry.com/cascades/sampleapps/

 

If you have any issues implementing please let us know.

Garett
@garettBeuk
--
Goodbye everybody!
BlackBerry Development Advisor (Retired)
smacmartin
Posts: 499
Registered: ‎05-07-2012
My Device: developer

Re: ImageView and panning / zooming

Was Garett's answer sufficient? If so, please accept his solution.

 

Stuart

Contributor
AleksDef
Posts: 42
Registered: ‎05-30-2012
My Device: Simulator

Re: ImageView and panning / zooming

Thanks for the answer. I was able to test it just now, so that's why I delayed selecting the answer.

 

For anyone wondering, if you want to control the pan, you'll need to set the layout of the Container to AbsoluteLayout and then set the translation and/or scale of the component you are moving in onTouch. That's what PullMyBeard does.

 

Scroll mode::Both works as well, but it automates the scrolling, so you won't get much control over the pan it I you need it.

Contributor
jlbenc
Posts: 30
Registered: ‎05-02-2010
My Device: Torch 9800

Re: ImageView and panning / zooming

Thanks Garret and Aleks! Just what i needed.