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.

B4X:
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.

B4X:
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.

B4X:
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:

B4X:
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.

B4X:
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.
 

Attachments

  • TouchImageView_v1_1.zip
    177.8 KB · Views: 2,246
  • TouchImageView_v_2_00.zip
    200.9 KB · Views: 4,633
Last edited:

vecino

Well-Known Member
Licensed User
Longtime User
Hi, I have tried the demo.
It's great, but... It has a strange behavior. Usually occurs when the image is up/left.
I recorded a video. Sorry about the sound.
Link to video.
Thanks and regards.
 
Last edited:

vecino

Well-Known Member
Licensed User
Longtime User
Hi, I have tried the demo.
It's great, but... It has a strange behavior. Usually occurs when the image is up/left.
I recorded a video. Sorry about the sound.
Link to video.
Thanks and regards.

Hello.
I've tried it on 3 different tablets. The problem is the same.
Does anyone have this problem?
 

Bill Kantz

Member
Licensed User
Longtime User
Warwound,

Thanks for a great LIB.

Would it be possible to make ScaleX and ScaleY writable? That way I could use CENTER and then stretch the image a little but not as much as FILL.

Thank you,
Bill
 

Devan

Member
Licensed User
Longtime User
Thanks Mate,
This wonderful Library works Perfect.
Great Piece of work.
Happy Fathers Day...
 

vecino

Well-Known Member
Licensed User
Longtime User
Thanks Mate,
This wonderful Library works Perfect.
Great Piece of work.
Happy Fathers Day...


Do not you have the problem that I have?
Hi, I have tried the demo.
It's great, but... It has a strange behavior. Usually occurs when the image is up/left.
I recorded a video. Sorry about the sound.
Link to video.
Thanks and regards.
 

phukol

Active Member
Licensed User
Longtime User
Good day Sir!

1.) Just want to ask how can i disable the drag event so i can fix the image on a certain position

2.) increase the default image size when it is first shown

Also when i open, close , open and close my activity after 4 to 6 tries i always encounter
B4X:
java.lang.RuntimeException: Object should first be initialized (Bitmap).

Here is my code:
B4X:
Dim TouchImageView1 As TouchImageView
                
                    TouchImageView1.Initialize("TouchImageView1")
                
                
                    Dim Bitmap1 As Bitmap
                    Bitmap1.InitializeMutable(Activity.Width,Activity.Height)
                    Bitmap1  =  il.loadimgSync(menuMain(intA))
                

                    If Activity.Width > 480 Then
                        p.AddView(TouchImageView1, 50%x - (Bitmap1.Width/2), 20dip, 140%x, 140%y)
                    Else
                        p.AddView(TouchImageView1,10dip, 20dip, 140%x, 140%y)
                    End If
                
                    TouchImageView1.MinScale=0.25            '    default is 0.5
                    TouchImageView1.MaxScale=2                '    default is 1.5
                    TouchImageView1.TranslatePadding=128dip    '    default is 64dip
                 
                    'TouchImageView1.Gravity=Gravity.FILL
                    'TouchImageView1.SetBackgroundImage(LoadBitmap(File.DirAssets, "b4a_logo.png"))
                
                
                    TouchImageView1.SetBitmap(Bitmap1)
                
                    If FirstTime Or (TouchImageViewRect.IsInitialized = False) Or (SourceImageRect.IsInitialized = False) Then
                        '    Rect parameters are: left, top, right, bottom
                        SourceImageRect.Initialize(0, 0, Bitmap1.Width, Bitmap1.Height)
                        If Activity.Width > 480 Then
                            TouchImageViewRect.Initialize(50%x - (Bitmap1.Width/2)  , 20dip, TouchImageView1.Width, TouchImageView1.Height)
                        Else
                            TouchImageViewRect.Initialize(10dip, 20dip, TouchImageView1.Width, TouchImageView1.Height)
                        End If
                    End If
                
                    '    if the scaling process scales the image to less than the current MinScale or more than the current MaxScale then MinScale or MaxScale will be adjusted
                    TouchImageView1.ScaleSrcRectToDestRect(SourceImageRect, TouchImageViewRect, "CENTER")

i always encounter it at this line
B4X:
p.AddView(TouchImageView1, 50%x - (Bitmap1.Width/2), 20dip, 140%x, 140%y)
telling me that Bitmap1 was not initiazed
 
Last edited:

JohnC

Expert
Licensed User
Longtime User
Great lib!

Thank you spending the time to develop it and especially for sharing it :)
 

Alberto Iglesias

Well-Known Member
Licensed User
Longtime User
Hello everyone,

I have an activity with 3 TouchImageView, when I load in this 3 objects I have this:

touchimageview1.png



But I need to FILL this objects to complete the black space, like this:

touchimageview2.png


I try to use
B4X:
objTouchImageView.ScaleSrcRectToDestRect(SourceImageRect, TouchImageViewRect, "FILL")

But not working or expand too much, I need only to limit of black space, I can do this with this method or need to use another one?

Thanks

Alberto Iglesias
 

Juzer Hussain

Active Member
Licensed User
Longtime User
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
Works cool,
Great Feature , Thank you

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:



MinScale As Float

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

B4X:
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.

B4X:
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.

B4X:
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:

B4X:
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.

B4X:
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.
 

Juzer Hussain

Active Member
Licensed User
Longtime User
Hi Johndb,
I tried it, The pinch in out works cool.
I wanted to know if there is any way of
1. Disabling the dragging feature only.
2. Maximizing and restoring size on double clicks.

Thanks
Juzer
 

leitor79

Active Member
Licensed User
Longtime User
Hi!

Thanks for sharing this library!

I'm having an issue and I don't know if I'm doing something wrong. I have a panel, where I draw a graph, and I want that graph being shown into a touchimageview. But I can't manage to show the TIV larger than a rectangle top-left:

charttouch.jpeg

the "big" chart is the original draw over the panel, and the top-left small chart is the TIV (I can move and resize it)

I paste the code with the actual values and log of the TIV.

The values I assign seem to be correct, I think?

pnlChart is the mail panel (where the chart is drawn)
pnlTouc is the TIV

I don't know why the Createlog shows width and height 360x504; those values aren't anywhere.



2017-07-31 09_15_59.png




The code:

The initialization:

B4X:
    pnlTouch.Initialize("pnlTouch")
    pnlChrt.AddView(pnlTouch, 0, 0, 100%x, 100%y)
   
    pnlTouch.MinScale=2        '    default is 0.5
    pnlTouch.MaxScale=10            '    default is 1.5
    pnlTouch.TranslatePadding=128dip    '    default is 64dip
   
    pnlTouch.Gravity=Gravity.FILL

The usage:

B4X:
    Charts.DrawBarsChart(G, BD, Colors.white)
    pnlTouch.setbitmap(BD.Canvas.Bitmap)
   
    SourceImageRect.Initialize(0, 0, BD.Canvas.Bitmap.Width, BD.Canvas.Bitmap.Height)
    TouchImageViewRect.Initialize (0, 0, pnlChrt.Width, pnlChrt.Height)
    pnlTouch.ScaleSrcRectToDestRect(SourceImageRect, TouchImageViewRect, "START")
    pnlTouch.CreateLog

Thank you very much!
 
Top