B4A Library TouchImageView

TouchImageView is an updated version of ImageView.
It adds support for touch events - drag and pinch zoom.

On devices with an Android version older than Eclair 2.0 and on devices without multitouch support only drag will be supported.
The same also applies when using the emulator.

Reference

Events:
TouchImageView generates no events.
Note however that the Click and LongClick events generated by the standard ImageView WILL be generated if the TouchImageView TouchEnabled property is False.
If TouchEnabled is set to True then the standard Click and LongClick events will NOT be generated.

Methods and properties:

CreateLog

Creates log entries with details about the current state of the TouchImageView, for debugging purposes:

** TouchImageView.CreateLog **
Original image: width = 962, height = 962
Scaled image: width = 294, height = 294
Translate position: x = 172, y = 346
ScaleX = 0.30614918, ScaleY = 0.30614918

MinScale As Float

Get or set the minimum scale that the image can be reduced by (zoomed out).
Default MinScale is 0.5.

TouchImageView1.MinScale = 0.25

MaxScale As Float

Get or set the maximum scale that the image can be enlarged by (zoomed in).
Default MaxScale is 2.5.

TouchImageView1.MaxScale = 3.75

GetScaleRect As anywheresoftware.b4a.objects.drawable.CanvasWrapper.RectWrapper

Returns a Rect that describes the current scale and position of the image.
You can get use this ScaleRect to restore a TouchImageView state on orientation change.

Dim ScaleRect As Rect
ScaleRect = TouchImageView1.GetScaleRect

SetScaleRect (Rect as android.graphics.Rect, String as ScaleToFit)

Scale and position the image to the area of the TouchImageView defined by ScaleRect.
ScaleToFit controls how the image should be aligned in the Rect:

"CENTER" - Center and maximise the image to fit the Rect maintaining the aspect ratio.
"END" - Maximise the image to fit the Rect maintaining the aspect ratio, align the image with the bottom and right edges of the Rect.
"FILL" - Maximise the image to completely fill the Rect, the aspect ratio may not be maintained.
"START" - Maximise the image to fit the Rect maintaining the aspect ratio, align the image with the top and left edges of the Rect.

Note that if as a result of fitting the image to the Rect, the image has been scaled less than the current MinScale value then MinScale will be set to the current scale.
Likewise if when fitting the image to the Rect, the image has been scaled more than the current MaxScale value then MaxScale will be set to the current scale.

Documentation for the B4A Rect can be found here: Basic4android - Drawing (Core)
Documentation for Android ScaleToFit can be found here: Matrix.ScaleToFit

Example to position and scale the image so that it centers within a rectangle Left 20dip, Top 30dip, Right 100dip, Bottom 120dip, maximised but maintains it's aspect ratio:

Dim ScaleRect As Rect
ScaleRect.Initialize(20dip, 30dip, 100dip, 120dip)
TouchImageView1.SetScaleRect(ScaleRect, "CENTER")

TouchEnabled as Boolean

Get or set whether touch events are currently enabled in the TouchImageView.

If touch events are enabled then the TouchImageView will NOT generate the standard ImageView Click and LongClick events.
These standard ImageView events will however be generated if touch events are NOT enabled.

TranslatePadding As Int

Get or set the minimum number of pixels that the image will always display within the TouchImageView.
Default TranslatePadding is 10 pixels - the image can not be dragged out of visibility, at least 10 pixels of width and/or height will always be visible.

TouchImageView1.TranslatePadding = 50

I couldn't decide whether to implement setter and getter methods for the translate position and zoom scale - methods that would enable you to programmatically pan and zoom the image.
If anyone wants such methods then make a post in this thread and i'll see what i can do.

All other methods and properties of TouchImageView are inherited from the standard ImageView.
Documentation for the standard ImageView can be found here: Basic4android - Views (Core)

The attached demo shows basic usage and how to save and restore the TouchImageView state on orientation change.

TouchImageView updated to version 2.00, version 2.00 is not compatible with previous versions.
Methods and properties have changed.
Click here to read more

Martin.

 

[warwound]

You cannot add a TouchImageView to an Activity using the Designer...
Only the default (built-in) B4A Views can be added using the Designer.

It would be good if a library could be added to the available Views in the Designer but currently that is not supported.

So you have to add your TouchImageView(s) to your Activity using code - programmatically - as in the demo code attached to this thread.

Thinking about your card game - presumably you'll be wanting to use 'a few' TouchImageViews in your game?
It'd be better for me to build a custom 'drag only' View (maybe call it DragImageView) for you.

I could add code to the existing TouchImageView to disable zoom but that to me would not be logical.
A custom drag only version would also be much more efficient which may be important if you are planning to use quite a few such Views.

I shall work more on the next TouchImageView update and hopefully have something to post next week.

Martin.

 

[PharCyDeD]

Yeah there will be many views that can be dragged on the screen as it is going to be a version of solitaire. I am about to release my first app and then begin the uphill battle of creating solitaire. I may take on some smaller projects as well during this one just because I know it will be difficult. I like adding things by designer because I can see it and it helps me plan, but I can attempt to see how things go programmatically. I appreciate your help so much...and a custom function would great. I am sure others would find it useful as well.

 

[splatt]

Hi Martin, any progress to report?

 

[warwound]

Hi Martin, any progress to report?

Hi.

The answer is yes and no...

I updated the library to include a DoubleClick event and that works.
Then i decided to try and add the standard ImageView Click and LongClick events back into it.

(With the current version the standard ImageView Click and LongClick events are only generated if the TouchImageImage TouchEnabled is set to False).

I also added a new method:

ScaleRectToRect (SrcRect As Rect, DestRect As Rect, ScaleToFit As String)

Scale and position the area of the image defined by SrcRect to the area of the TouchImageView defined by DestRect.

But then as my library writing progressed i found that how i've written TouchImageView is not entirely compatible with how B4A works.
Read post #2 onwards of this thread for more detail: http://www.b4x.com/forum/libraries-developers-questions/15839-create-views-libraries.html#post90036.

So i have to take the working new version and completely overhaul it to make it bullet proof before i upload it.

I'll try and get that done over the next week.

Martin.

 

[splatt]

Thanks for the update. Your work is appreciated.:sign0098:

 

[Smee]

Hi Martin,

I have been following this thread with interest. I have not yet used the imageview but i will be shortly. It seems to have all that is needed esp the double-tap event.

Thanks for working on this

:sign0142::sign0142:

 

[warwound]

Here's an update on my progress with the new version.

It has reached a point where i have two options:

• Keep the existing updated code which is compatible with Android versions 2.0 Eclair onwards.
  This code can detect:
  • Click OR DoubleClick events.
    Your application can use either but not both of these two events.
  • LongClick events.
• Use the ScaleGestureDetector that is supported with Android versions 2.2 Froyo onwards.
  This will allow all three events to be listened for at the same time.

So before i decide, i'll leave anyone that's interested to post in this thread and then make up my mind which option to choose.

If you haven't read this related thread and voted on the poll yet it may be useful.

Martin.

 

[Smee]

interesting problem. Would it not be possible to have 2 versions of the library. That is finalise development of the pre 2.2 lib and then release a new version for later devices. Developers can then make up their own minds as to which way to go. support for older devices would then be in their hands.

Personally i beleive in going forward

 

[Jost aus Soest]

interesting problem. Would it not be possible to have 2 versions of the library. That is finalise development of the pre 2.2 lib and then release a new version for later devices. Developers can then make up their own minds as to which way to go. support for older devices would then be in their hands.

Personally i beleive in going forward

I could not say this in better words...

100% ACK!

 

[splatt]

Hi Martin, I like this "election" option!

I would agree that it is better to look forward than back. If it wouldn't be too much of an issue, I would vote for a version as is for legacy purposes with a second ongoing library to go onward and upward.

 

[Smee]

I have finally got to the point where i am using this in a test project. Works terrific. Thanks for your efforts. :sign0188:

I am unable to use the double tap atm. Also were you able to code a rotation solution?

Many thanks for this library

Joe

 

[latcc]

Warwound

Please, please don't forget there are some of us who are writing apps for the widest range of users and although my apps are freeware it is amazing the wide variation of devices people are still using out there and the compatibility issues I have been having using B4A and Android.

Android is full of weird compatibility glitches so I vote for a stable, compatible version. I would hate to lose compatibility and broad-device stability just for a couple of extra features that only the newest devices can use.

This library is excellent so I hope whatever you decide to do, you retain a version that supports legacy devices (at least back to Android 2.0).

Thanks for your hard work.

 

[warwound]

Ok then i shall put the finishing touches to the current update and upload that.

The update is compatible with the same Android versions as the existing version of TouchImageView so no problems there.

Then as time allows i'll look at a better version with better multi touch event detection - a version that is compatible with Froyo onwards.
But for now that new Froyo version will have to wait - i'm too busy with other things to completely rewrite the library.

I'll aim to get the current update completed and uploaded before the end of the weekend.

Martin.

 

[latcc]

Oh excellent! Thank you so much for your efforts. It is much appreciated.

 

[warwound]

Just a short post to keep this thread updated.

I've been trying to add a TouchImageView to a TabHost and have found that if it's added to a not-visible Tab then it's Width and Height properties always return -1.

I guess the code that adds a View to a TabHost uses the Android shorthand -1 for fill_parent - making the added View 100% the size of the Tab.

But as i'm using the TouchImageView Width and Height to work out how to set the Bitmap's initial scaled szie the values of -1 are not working.

I'll experiment until i find a solution...

Martin.

 

[jlam]

More bitmap

Can I add more than one bitmap?
I would like to be able to drad more than one image.
Thanks
:sign0188:

 

[warwound]

No there's no way to add more than one (foreground) image to a TouchImageView.

The TouchImageView is an updated ImageView so has much the same functionality as an ImageView with the added touch detection.

You cannot add more than one foreground image to an ImageView

One solution would be to add a Panel to your Activity for each image.
Set the image as the BackgroundImage of the Panel.

Now you can use the Gestures library to detect touch events and enable each Panel to be dragged.

Have a search of the forum: Android Development Forum - Basic4android - Search Results

This post contains some code that you might be able to modify for you use.

Enabling pinch zooom could be done with the Gestures library too - did you just want to be able to drag multiple images or did you also require some zooming?

Martin.

 

[jlam]

Thanks a lot
Cheers
JLam

 

[psciga]

Hi Martin,

thanks a lot for this great lib. Have you any idea how to connect the image coordinates with a database? What I mean is, to get the touch (or click) position and search objekts near this point in a database.

All further hints would be appreciated

Regards - Peter

Sorry for this silly question, I'm a newbie.

 

[warwound]

Hi sorry for not replying sooner - been busy with lots of programming.

I keep posting in this thread that i'll have an update released at some point but end up sidetracked with other code and haven't got around to the new TouchImageView yet.

I'll make a note on my calendar not to forget about the update and spend some time getting it online this week.

Martin.