Populating images within ScrollView with online resources

jaminben

Member
Licensed User
Longtime User
Hi,

I have a ScrollView which contains ImageViews based on a mySQL database... the ScrollView can vary in length for different SQL queries.

My ScrollView is setup like this:

B4X:
   fanartPosterAllScrollView.Initialize(100%y)

   Dim parser As JSONParser
   Dim res As String

   res = Response.GetString("UTF8")
   parser.Initialize(res)
   
   HttpUtils.CallbackActivity = "Main"
   HttpUtils.CallbackJobDoneSub = "JobDone"
   HttpUtils.CallbackUrlDoneSub = "UrlDone"
   detailedMediafanartPosterAllJob.Initialize
   
   Log("All Fanart Result: " & res)
   
      posterList = parser.NextArray
         
      Log("Poster List Size: " & posterList.Size)
         
      For i = 0 To posterList.Size - 1

         Dim fanartPosterFullPath As String
         Dim fanartFolder As String
         Dim urlPath As String
         Dim posterAll As Map
            
         posterAll = posterList.Get(i)
            
            fanartFolder = posterAll.Get("fanart_folder_name")
            urlPath = posterAll.Get("url_path")

            fanartPosterFullPath = "http://**.**.**.**/Fanart/" & fanartFolder & "/Poster/small" & urlPath
   
            fanartPosterFullPath=fanartPosterFullPath.Replace(" ","%20")
   
            Log("Fanart Poster Full Path: " & fanartPosterFullPath)
            detailedMediafanartPosterAllJob.AddAll(Array As String(fanartPosterFullPath))
            
            fanartPosterAllScrollView.Panel.LoadLayout("media_Detailed_Panel_Fanart_Layout")
            media_Detailed_Fanart_All_Panel.Top = (media_Detailed_Fanart_All_Panel.Height+1)*i
            media_Detailed_Fanart_All_Panel.Width=100%x
            media_Detailed_Fanart_All_Panel.Tag = i
            
            'The ImageView I need to populate
            image_Fanart_Poster_All.Tag = i
            
      Next
         
         Activity.AddView(fanartPosterAllScrollView, 0, title_Panel.Height + message_Panel.Height, 100%x, 100%y)
         fanartPosterAllScrollView.Panel.Height = (i*media_Detailed_Fanart_All_Panel.Height) + (i*1) + title_Panel.Height + message_Panel.Height

   HttpUtils.DownloadList("detailedMediafanartPosterAllJob", detailedMediafanartPosterAllJob)
   
   Response.Release

Once its populated the ScrollView with blank images it goes online and downloads the images. Then within my JobDone code I think I need to assign the downloaded images via the .tag.

My code for this looks like:

B4X:
   Select Job
         
      Case "detailedMediafanartPosterAllJob"

         For i = 0 To HttpUtils.Tasks.Size - 1
         
            link = HttpUtils.Tasks.Get(i)
            Log(link & ": success=" & HttpUtils.IsSuccess(link))
            
            'This is where I think I need to set each image using the .tag setup in the previous
            'code but I'm not sure how to do it?
            
         Next   
         
   End Select
   
   HttpUtils.Complete = False

It all works as I want except that I can't populate the images with the ones I've just downloaded :(

Anyone able to point me in the right direction.

Thanks

Ben
 

jaminben

Member
Licensed User
Longtime User
Ok, made some very small progress but still can't update the default image with the newly downloaded image.

With this piece of code I can find individual panels within the ScrollView:

B4X:
Sub JobDone(Job As String)

   Select Job

      Case "detailedMediafanartPosterAllJob"

         For i = 0 To HttpUtils.Tasks.Size - 1
         
            link = HttpUtils.Tasks.Get(i)
            Log(link & ": success=" & HttpUtils.IsSuccess(link))
            
               If fanartPosterAllScrollView.Panel.GetView(i).Tag == 2 Then
               
                  Log("We Got The Right Panel")
                                 
               Else
               
                  Log("We Got The Wrong Panel")
               
               End If
               
         Next   
         
   End Select
   
   HttpUtils.Complete = False 
   
End Sub

Anyone able to throw me a bone? Is what I'm trying to do even possible?

Thanks
 
Upvote 0

jaminben

Member
Licensed User
Longtime User
Ok, so I'm really desperate now :(

I've spent all day, reading, trying, reading and don't see how I can do what I was trying to do.

So I've attached a small example of a ScrollView with a click event... what I'm trying to achieve is click on the panel and have it change the text in panel 3 only. I can change the click event to the label and make it work but thats not what I want to happen... hopefully if someone can modify my example I can see how its done and learn :eek:

Many Thanks

Ben
 

Attachments

  • UpdateLabelInScrollView.zip
    8.5 KB · Views: 237
Upvote 0

Kimmowich

Member
Licensed User
Longtime User
hey

Try this... its a bit dirty but it works..

Globals:

Dim vLabel As Map

use it here:

B4X:
         For i = 0 To 10
      Dim scrollViewLabel As Label
      
      scrollViewLayout.Panel.LoadLayout("scrollViewLayout")
      scrollViewPanel.Top = (scrollViewPanel.Height+1)*i
      scrollViewPanel.Width=100%x
      scrollViewPanel.Tag = i

      scrollViewLabel.text = "Panel: " & i
      scrollViewLabel.Tag = i
      vLabel.Put(i, scrollViewLabel) ' **
      
   Next

and use it:

B4X:
Sub scrollViewPanel_Click
   Dim clicked_Panel As Panel
   clicked_Panel = Sender

   Dim Tag As Int
   Tag = clicked_Panel.Tag
   Log("Tag: " & Tag)
   If scrollViewLayout.Panel.GetView(Tag).Tag == 3 Then

      Dim la As Label  ' **
      la = vLabel.Get(3)
      la.Text = "changed"

      ToastMessageShow("Update the label in this panel only", False)
   Else
      ToastMessageShow("Don't update the label in this panel" & CRLF & "Panel 3 label needs changing", False)
   End If
End Sub

sincerly
 
Upvote 0

jaminben

Member
Licensed User
Longtime User
Yup, that worked :D

I had to Initialize the vLabel first as below... I assume this is correct?

B4X:
Sub Activity_Create(FirstTime As Boolean)
   
   scrollViewLayout.Initialize(100%y)
   vLabel.Initialize   '*** Added Initialize  here
   
   For i = 0 To 10
   
   
      Dim scrollViewLabel As Label
      
      scrollViewLayout.Panel.LoadLayout("scrollViewLayout")
      scrollViewPanel.Top = (scrollViewPanel.Height+1)*i
      scrollViewPanel.Width=100%x
      scrollViewPanel.Tag = i

      scrollViewLabel.text = "Panel: " & i
      scrollViewLabel.Tag = i
      
      vLabel.Put(i, scrollViewLabel)
            
   Next
   
   Activity.AddView(scrollViewLayout, 0, 0, 100%x, 100%y)
   scrollViewLayout.Panel.Height = (i*scrollViewPanel.Height) + (i*1)
   
            
End Sub

Thank you Kimmowich :sign0098:

EDIT

Ported the same code over to my original problem and it works for that as well... pretty cool stuff :)
 
Last edited:
Upvote 0

bluedude

Well-Known Member
Licensed User
Longtime User
webview vs downloading images

Hi,

I have done some testing with this too and I use a webview in the scrollview to show the images. Only when I need images to set for example a wallpaper I download them.

Overall I think it is bad practice to completely stuff the device with images.

Of course it can depend on what kind of app you want to accomplish. My experience with the webview is pretty good.

Downloading images has one advantage, you only have to do it once.

Overall I think the webview approach performs better.

Cheers,
 
Upvote 0

jaminben

Member
Licensed User
Longtime User
Overall I think it is bad practice to completely stuff the device with images.

I'm not 100% sure its actually downloading the images and storing them on the device as such but more storing them in the ScrollView while its in use... I'm not specifying any storage location so I assume its not storing the images. Is this correct? If not where would it be storing the images?

Yes I'm a :sign0104:
 
Upvote 0

bluedude

Well-Known Member
Licensed User
Longtime User
Downloading

Image views do not have the capabilities to show an URL so it is downloading these images first to the device. httpUtils downloads images. In memory means getting them local first.

A webview can show an URL.

If i'm wrong let Erel correct me :)
 
Upvote 0

jaminben

Member
Licensed User
Longtime User
Hi,

I'm not really getting this WebView... can you expand on what you mean please (I've searched but don't see how this will work for me).

What I would like to do is display a list of my movies, the main list contains a poster image, title of the movie and tagline. When a movie is clicked a new panel opens showing the movies details (description, runtime etc). I have this all working with a ScrollView but I've run into a new issue where the device will crash once its downloaded around 120+ movie poster images... so I'm looking for an alternative.

Many Thanks

Ben

EDIT

Actually what I may try doing is loading a set amount of images (say 25) to start with then when the scrollview changes position clear the old images with agrahams bitmap memory recovery, get the current position of the scrollview and load another 25 images for the displayed items. My only problem is working out when the scroll view has stopped moving... anyone got any ideas?

An example of what I was trying to replicate would be something like the IMDB app.... but not as complex. They seem to manage 250 images ok.
 
Last edited:
Upvote 0
Top