B4A Class JustImgSlider - simple horizontal image slider class

peacemaker

Well-Known Member
Licensed User
HI, All

If you need something very much - it's better to make it yourself :) and adjust as you like.
Here is an image slider class, horizontal:
  • slide to left to the next image
  • slide to the right to the prev image
  • position status label
  • images from Internet are possible, thanks to the new resumable subs !
Dependencies:
  • B4A v.7+
  • OkHTTPUtils2
The code class is included into the sample project.
Respect to klaus !

The new updated class versions are welcome in this topic.

UPDATE: v.0.5:
* DotsColor as Int 'color of status dots under the slider
* ShowDots as Boolean 'show dots or not
* CurrentSlide As Int 'open slider at the needed slide, or get the current position
 

Attachments

Last edited:

Andrew (Digitwell)

Active Member
Licensed User
Hi peacemaker,
I have added an extra public function which allows you to specify credentials when requesting a download and also optionally center the image.

B4X:
Public Sub AddSlidewithCredentials (Name As String, URL As String, username As String, password As String,center As Boolean)
   Dim a As Slide
   a.Initialize
   a.Name = Name
   a.URI = URL
   
   Dim p As Panel
   p.Initialize("pnlSlide")
   mBase.AddView(p, 0, 0, mBase.Width, mBase.Height)
   p.SendToBack
   a.pnl = p
   a.pnl.Tag = lstSlides.Size   'record id for reference
   lstSlides.Add(a)
   DownloadImagewithCredentials(URL, p,username,password,center)
   Update_Status
End Sub



Sub DownloadImagewithCredentials(Link As String, pnl As Panel,username As String ,password As String,center As Boolean)
   Dim j As HttpJob
   j.Initialize("", Me)
   j.Username = username
   j.Password = password
   j.Download(Link)
   
   Wait For (j) JobDone(j As HttpJob)
   If j.Success Then
     If center Then
       FitCenterBitmapPanel(pnl,j.GetBitmap,Colors.White)
     Else
       pnl.SetBackgroundImage(j.GetBitmap)
     End If
   End If
   j.Release
End Sub


Sub FitCenterBitmapPanel(p As Panel,bmp As Bitmap,col As Int)
   Private cvs As Canvas
   
   cvs.Initialize(p)

   cvs.DrawColor(col)
   Dim rectDest As Rect
   Dim delta As Int

   If bmp.Width / bmp.Height > p.Width / p.Height Then
     delta = (p.Height - bmp.Height / bmp.Width * p.Width) / 2
     rectDest.Initialize(0, delta,p.Width, p.Height - delta)
   Else
     delta = (p.Width - bmp.Width / bmp.Height * p.Height) / 2
     rectDest.Initialize(delta, 0, p.Width - delta, p.Height)
   End If
   cvs.DrawBitmap(bmp, Null, rectDest)

End Sub
 

Andrew (Digitwell)

Active Member
Licensed User
Hi Peacemaker,
I've updated the class to work for both B4A and B4i.

I also added a couple of extra properties:
DotColor which sets the colour of the dots. White dots don't always work for some images.
PanelBackground - If you center an image then this will set the colour of the rest of the panel.

Cheers
Andrew

Edit: Added screenshot
 

Attachments

Last edited:

peacemaker

Well-Known Member
Licensed User
Thanks for updates !
For the status label - i used such code:
B4X:
Public Sub DesignerCreateView (Base As Panel, lbl As Label, Props As Map)
....
lblStatus.Color = Colors.ARGB(100, 150, 150, 150)
...
End Sub
 

peacemaker

Well-Known Member
Licensed User
Seems, the class works OK - if it's placed static. But if to place it into a ScrollView- it's a trouble: pnlSlide_Touch event is stopped to fire when vertical scroll is additionally occured, and the horizontally slidind picture panel is stopped. How can it be solved ?
 

Andrew (Digitwell)

Active Member
Licensed User
Ok here is what I found,
It looks like the ScrollView Panel is not passing the TOUCH_UP event on.

I have modified the sample program with a bit of logging and a conditional compilation.

Compile as default ( No scrollview) and you will see the TOUCH_UP events being captured by the JustImgSlider code.

Compile as scrollme, where the JustImgSliders are within a scroll view, and the TOUCH_UP events are not fired.

Can anyone else care to comment. Is this a known problem with ScrollViews ?

I'll try it with B4I a little later.

Andrew
 

Attachments

peacemaker

Well-Known Member
Licensed User
It's well known situation: the scrolling container catchs the _touch events of the scrolling child.
Seems, the parent _touch should be blocked within _touch event of the child view. But no idea how.
 
Last edited:

yaniv hanya

Active Member
Licensed User
I have a few questions:
1. I need a tool to display folders of images . the slider looks very good but as far as I understand it keeps all the images in memory all the time. Can't make a memory problem if there are a large number of pictures?
2. I intend to check if it is a movie file and if so add an exoPlayer to the panel instead of a bitmap. And if I have a lot of movies in the library it's not a problem to create a lot of instances for the player.

If you have an idea for a more suitable tool. I would love to get one.
Thanks
 

peacemaker

Well-Known Member
Licensed User
1. Yes, now each adding image is loaded to memory at once. But each slide has URI field: try to change the class and load the added image only, removing the current image. I guess, it may need to make it smooth.

2.Seems, here the same - it needs to make dynamic control of the player and video file: just a player instead of a panel for image.

Anyway, class remaking is needed, try.
 
Top