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
Click to expand...

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,264
  • TouchImageView_v_2_00.zip
    200.9 KB · Views: 4,654
Last edited:
Click to expand...
A

andrewj

Active Member
Licensed User
Longtime User
Hi Martin,
PostTranslate works fine, but I've taken my app in a different direction and I'm relying more on the built-in touch handling of TouchImageView.

I have a further request. Could you please either:
  • Internally support using a double-click to toggle between "maximum zoom out" (i.e. one image pixel per display pixel) and "fit to target", OR
  • Expose a double-click event so I can do the same programmatically?
That would be brilliant.
Thanks
Andrew
 
ddahan

ddahan

Member
Licensed User
Longtime User
Hi Martin,
I'm trying to use TouchImageView object with StandOut floating windows library but I'm getting an error message: "Cannot access activity object ...".
Is there any chance to make TouchImageView object not limited to only being Activity child ?

Thanks,
David.
 
Last edited:
Douglas Farias

Douglas Farias

Expert
Licensed User
Longtime User
thx man exactyli i need *-* thx
i m making a crop this is go help much *-*
 
Douglas Farias

Douglas Farias

Expert
Licensed User
Longtime User
@warwound hi man
how can i make a canvas and get this canvas image?

i make this
1.png


i want to save image from the square user can move the image

im trying this but dont work
B4X: 
Sub btaprova_Click
    Dim out As OutputStream
    Dim fileName As String
    Dim cvs As Canvas
   
    cvs.Initialize(TouchImageView1)   

    Dim Bitmap1 As Bitmap
    Bitmap1.InitializeMutable(TouchImageView1.Width, TouchImageView1.Height)
    'Bitmap1.Initialize3(ImageView1.Bitmap)


    Dim SrcRect As Rect
    SrcRect.Initialize( Left, Top, Right, Bottom)


    Dim DestRect As Rect
    DestRect.Initialize(0%x,0%y,100%x,100%y)
    cvs.DrawBitmap(Bitmap1, SrcRect, DestRect)
    Dim out As OutputStream
    fileName = "batalha.png"
    out = File.OpenOutput (fp, fileName ,  False)
    cvs.Bitmap.WriteToStream(out,  100, "PNG")
    out.Close
   
    If File.Exists(fp, fileName) Then
    ToastMessageShow("Sim existe", False)
    TouchImageView1.BackgroundImage =  LoadBitmap(fp, fileName)
    End If
   
End Sub

thx
 
warwound

warwound

Expert
Licensed User
Longtime User
Douglas Farias said:
im trying this but dont work
B4X: 
Sub btaprova_Click
    Dim out As OutputStream
    Dim fileName As String
    Dim cvs As Canvas
   
    cvs.Initialize(TouchImageView1)   

    Dim Bitmap1 As Bitmap
    Bitmap1.InitializeMutable(TouchImageView1.Width, TouchImageView1.Height)
    'Bitmap1.Initialize3(ImageView1.Bitmap)


    Dim SrcRect As Rect
    SrcRect.Initialize( Left, Top, Right, Bottom)


    Dim DestRect As Rect
    DestRect.Initialize(0%x,0%y,100%x,100%y)
    cvs.DrawBitmap(Bitmap1, SrcRect, DestRect)
    Dim out As OutputStream
    fileName = "batalha.png"
    out = File.OpenOutput (fp, fileName ,  False)
    cvs.Bitmap.WriteToStream(out,  100, "PNG")
    out.Close
   
    If File.Exists(fp, fileName) Then
    ToastMessageShow("Sim existe", False)
    TouchImageView1.BackgroundImage =  LoadBitmap(fp, fileName)
    End If
   
End Sub

thx
Click to expand...

What do you mean by "but don't work"?
Does your code successfully create a .png image file but the image is not the desired image?
Do you get a .png that is the original image and not the transformed image?

Martin.
 
Douglas Farias

Douglas Farias

Expert
Licensed User
Longtime User
i m using this, i think the black is from the background not from bitmap
now is working i m using
Bitmap1.Initialize3(TouchImageView1.TransformedBitmap)

here is the code
B4X: 
    Dim out As OutputStream
    Dim fileName As String
    Dim cvs As Canvas
    salvoprimeira = False
    cvs.Initialize(TouchImageView1)   
    Dim Bitmap1 As Bitmap
    Bitmap1.Initialize3(TouchImageView1.TransformedBitmap)
    Dim SrcRect As Rect
    SrcRect.Initialize( rectImage.Left , rectImage.Top - 8%y, rectImage.Right, rectImage.Bottom -3%y)
    Dim DestRect As Rect
    DestRect.Initialize(0%x,0%y,100%x,100%y)
    cvs.DrawBitmap(Bitmap1, SrcRect, DestRect)
    Dim out As OutputStream
    fileName = "batalha1.png"
    out = File.OpenOutput (fp, fileName ,  False)
    cvs.Bitmap.WriteToStream(out,  100, "PNG") 
    out.Close
    salvoprimeira = True
    TouchImageView1.Color = Colors.Black
 
Douglas Farias

Douglas Farias

Expert
Licensed User
Longtime User
@warwound hi again man
can you help me make a crop for this lib? i m realy dont undestand this
the code on the post #128 works but when i go make another crop this make a crop with zoom *-* i m crazy here
can help me make a crop and use this lib? user can move the image only and have a center crop in the screen.

when user press a button save the image on the crop center only *-*
like the image
1.png


pls man i really need , i m trying but dont understand this =(
 
warwound

warwound

Expert
Licensed User
Longtime User
Re-think how you'll achieve this - i don't think TouchImageView will do the job.

I'd try:
  • Start with a standard ImageView.
  • Add a Panel on top of the ImageView and make the Panel partly transparent.
  • Add another Panel on top of the first Panel.
    This Panel will be fully transparent, sized according to the size of the cropped image you want to obtain and be draggable.
    Look here for an example: http://www.b4x.com/android/forum/threads/classes-are-soon-coming.18395/.

Now your user can drag the fully transparent Panel around the screen and select an area - and when the user clicks the OK Button you can get the left, top, width and height of this Panel and use the Canvas object to copy the selected area to a new Bitmap.

Martin.
 
Douglas Farias

Douglas Farias

Expert
Licensed User
Longtime User
@warwound
hi man, i have another question abtou your lib *-*
its possible make a touchimageview 100%y only Y

for example
i make this crop, here crop is on center and image dont is 100%y
10514572_807459602617591_7148849783199956125_n-jpg.26702



the image is 100%x but not y


but later i need make another crop
like this
crop2.jpg


a big crop and i need the image with zoommin = 100%y

its possible make a touchviewbitmap 100%y witout FILL the image?
 
S

sorex

Expert
Licensed User
Longtime User
Warwound,

I was playing with this library and some questions came to my mind.

1. Why does a touchimageview have it's own viewport? When I set the view size to the size of my image it's moving inside that small area, not the entire screen which would've made more sense (to me).

2. Is there any kind of _stopdrag event so that I know when I should check hotspot collisions?

3. How can I change the z-order of a touchimageview? when it moves behind other touchviews it vanishes behind them and/or loses the drag.

4. How can I reposition the inner image by code? when I place the tvi it in a loop it's actually the outer box/panel's position so you can't move the inner image to the left.
 
Last edited:
fotosettore

fotosettore

Member
Licensed User
Longtime User
hi martin !!!
i'm going to use your library to move a bitmap inside a rectangle.
i see you made only 2 events: click and longclick
so my question is : how can i see if bitmap was moved from a position to another ?
there is no way to see x and y position
may you help me ?
many thanks
 
A

aggelos

Member
Licensed User
Longtime User
Hello, i am trying the library and i wonder if there is a limit on the photo size.
I am trying using 2048 and 2560 images and sometimes they dont appear. when i use 640x480 they appear everytime.
maybe its a limit of my device?
 
You must log in or register to reply here.
Top