B4A Class JustImgSlider - simple horizontal image slider class

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

 

[Andrew (Digitwell)]

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.

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)]

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

 

[peacemaker]

Thanks for updates !
For the status label - i used such code:

Public Sub DesignerCreateView (Base As Panel, lbl As Label, Props As Map)
....
lblStatus.Color = Colors.ARGB(100, 150, 150, 150)
...
End Sub

 

[peacemaker]

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)]

Can you upload an example?

 

[peacemaker]

Here attached.

 

[Andrew (Digitwell)]

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

 

[peacemaker]

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.

 

[peacemaker]

v.0.5 uploaded.

 

[yaniv hanya]

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]

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.

 

[PACHODURAN1974]

Hello friends, this is my first post.
I need your help to solve an issue that I have not been able to with the JustImgSlider library.
I need to be able to create JustImgSlider by code, depending on a variable I have to create different JustImageSlider panels.

Thanks, I need your help.
??

 

[Andrew (Digitwell)]

Hi, @PACHODURAN1974
Your are probably better off using the B4X XUI imageslider.

[B4X][XUI] ImageSlider

ImageSlider custom view is compatible with B4A, B4i and B4J. Features: Three transition types: horizontal, vertical and fade. Configured in the visual designer. Images are centered and not distorted. Next and previous images are cached. Sliding gestures. Flexible data source. Cross...

www.b4x.com

when you say different panels what do you mean, different sized panels or different panel contents?

 

[PACHODURAN1974]

Hi Andrew, thanks for your response.

I need create JustImgSlider arrays. Need initialize JustImgSlider arrays of diferente size, need create JustImgSlider by code.

Thanks

 

[peacemaker]

to create JustImgSlider by code

Yes, my class can be initialized only via loading the layout.
Adding to Panel is impossible.

Spoiler: non-working code

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("1")    'without layout
    Activity.Title = Application.LabelName
    
    Panel1.Initialize("")
    Panel2.Initialize("")
    Activity.AddView(Panel1, 0, 0, 100dip, 100dip)
    Activity.AddView(Panel2, 100dip, 100dip, 200dip, 200dip)
    
    Panel1.AddView(sl,0, 0, Panel1.Width, Panel1.Height)    'java.lang.IllegalArgumentException: method anywheresoftware.b4a.objects.PanelWrapper.AddView argument 1 has type android.view.View, got peacemaker.justimgslider.justimgslider
    Panel2.AddView(sl2,0, 0, Panel2.Width, Panel2.Height)
    
    sl.Initialize(Me, "")
    sl2.Initialize(Me, "")
    
    sl.AddImageFile("First image", File.DirAssets, "01.jpg", False)
    sl.AddImageFile("Second image", File.DirAssets, "02.jpg", False)
    sl.AddImageFile("3rd image", File.DirAssets, "03.jpg", False)
    
    sl2.AddSlide("Internet 1", "https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Lichtenstein_img_processing_test.png/256px-Lichtenstein_img_processing_test.png", False)
    sl2.AddSlide("Internet 2", "https://upload.wikimedia.org/wikipedia/en/thumb/7/72/Segamarinefishing.jpg/256px-Segamarinefishing.jpg", False)
    sl2.AddSlide("Internet 3", "https://upload.wikimedia.org/wikipedia/en/0/0f/Memoriesoff-cover.jpg", False)
End Sub

You can try make the layouts for each slider and load to needed Panel...., but better to use another class, as it was said above

 

[Andrew (Digitwell)]

As with all custom views, it is not possible to create one directly in code.

The way to do it is to add a create a panel in code and use load layout to load a layout which contains the view(s) required.

What are you trying to achieve,?

 

[Andrew (Digitwell)]

I think you misunderstood and our messages overlapped.

I have modified the example to show how you can create the JustImageSliders at runtime.

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("1panel")
    Activity.Title = Application.LabelName
    
    Panel1.LoadLayout("jisSingle")
    sl = jisOnly
    
    Panel2.LoadLayout("jisSingle")
    sl2 = jisOnly
    
    sl.AddImageFile("First image", File.DirAssets, "01.jpg",True)
    sl.AddImageFile("Second image", File.DirAssets, "02.jpg",False)
    sl.AddImageFile("3rd image", File.DirAssets, "03.jpg",True)
    
    sl2.AddSlide("Internet 1", "https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Lichtenstein_img_processing_test.png/256px-Lichtenstein_img_processing_test.png",True)
    sl2.AddSlide("Internet 2", "https://upload.wikimedia.org/wikipedia/en/thumb/7/72/Segamarinefishing.jpg/256px-Segamarinefishing.jpg",False)
    sl2.AddSlide("Internet 3", "https://upload.wikimedia.org/wikipedia/en/0/0f/Memoriesoff-cover.jpg",True)
End Sub

if you tap the background (not the images) the app will create a panel in code and then load the slider into it.

Sub Activity_Click
    If Not(panel3.IsInitialized) Then
        panel3 = xui.CreatePanel("panel3")
        Activity.AddView(panel3,0,0,Activity.width,Activity.height)
        panel3.loadlayout("jisSingle")
        jisOnly.AddSlide("Internet 1", "https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Lichtenstein_img_processing_test.png/256px-Lichtenstein_img_processing_test.png",True)
        jisOnly.AddSlide("Internet 2", "https://upload.wikimedia.org/wikipedia/en/thumb/7/72/Segamarinefishing.jpg/256px-Segamarinefishing.jpg",False)
        jisOnly.AddSlide("Internet 3", "https://upload.wikimedia.org/wikipedia/en/0/0f/Memoriesoff-cover.jpg",True)
    End If
    
End Sub

 

[PACHODURAN1974]

Hi, It worked perfect, thank you very much