speeding up the display of several images

[alix]

I'm trying to make a photo slider and I wonder if there is a way of speeding it up a bit.

In the program below, I start by displaying small icon-like versions of each image. While I do this, I also do a loadimage of each full sized image. I did this thinking that if I loaded all the image beforehand with the loadimage command, then, when it was time to give the drawimage command, things would happened faster...
This is not the case, images are not displayed any faster.
What does the loadimage command really do ? Are the images from server loaded into the client's memory ?

I know this is usually a problem, i.e. not specific to RB, with photo sliders, they tend to be slow...But then, wouldn't it be nice if one could find a way with RB ?

Anyway, you can see the photo-slider in action here :
cliftonsnooze.runbasicnet.com/

And here is the program, using Brent's code :

'
'
' PHOTO-SLIDER
'
'
'   Initialize variables
'
QuotomaticDir$ = "public\quotomatic\"
QuoteImgUrl$ = "../public/quotomatic/images2"
QuoteImgDir$="public\quotomatic\images2"

'
' Wait while loading images by displaying their icons
'
dividerimg$=QuotomaticDir$+"divider.jpg"
loadimage "divider", dividerimg$
graphic #whileuwait, 5,20
filepath$=QuoteImgDir$+"\*.gif"
files #g, filepath$
if #g HASANSWER() then
  count = #g rowcount()
  #whileuwait drawimage("divider",0,0)
  render #whileuwait
  for i = 1 to count
     if #g hasanswer() then
     if i=1 then
            print "please wait while photos are loading ...."
            print
     end if
        '
        'retrieve info for next file
        '
        dummy$ = #g nextfile$()
        img$=QuoteImgUrl$;"/";#g NAME$()
'display iconized image
       
        html "<img src="""; img$; """ width=""20"" height=""20"">"
'display black divider in between each icon
#whileuwait drawimage("divider",0,0)
        render #whileuwait
        '
'load the image in memory
        '
filename$=#g NAME$()
loadimg$= QuoteImgDir$+"\"+filename$
        pic$="pic"+str$(i)
        loadimage pic$, loadimg$
      end if
  next
else
  emptymsg$="there are no files in "
  Print emptymsg$
end if
print" "
print" "
'
'  Start slider
'
' put background into place
graphic #bg, 300,225
#bg place(0,0)
'#bg box(300,300)

'
' slide images
' Code by brent D. Thorn
'
   
   totalpages = count
   page = 1
   playing = 0
   firstime=0
   

[show]
   '
   ' don't clear page the first time
   '
   if firstime=0 then
         firstime=1
   else
         firstime=2
   end if
   if firstime=2 then cls
   pic$="pic"+str$(page)
   #bg drawimage(pic$,0,0)
    render #bg
   print
    if page > 1 then link #prev, "Previous", [prev]
   print " ";
   if not(playing) then
       link #play, "Play", [play]
   else
       link #pause, "Pause", [pause]
   end if
   print " ";
   if page < totalpages then link #next, "Next", [next]
   if playing then
       html "
       <script type=""text/javascript"">
       <!--
       var a = null;
       var as = document.getElementsByTagName('A');
       for (var i = 0; i < as.length; i++)
       {
           if (as[i].firstChild.data == 'Next')
           {
               a = as[i];
               break;
           }
       }
       if (a) window.setTimeout('window.location = a.href', 5000);
       //-->
       </script>"
   end if
   
   

   wait

[prev]
   page = page - 1
   goto [show]

[next]
   page = page + 1
   goto [show]

[pause]
   playing = 0
   goto [show]

[play]
   
   playing = 1
   goto [show]


wait


[StefanPendl]

Apr 23, 2008 11:27:39 GMT -5 alix said:

This is not the case, images are not displayed any faster.
What does the loadimage command really do ? Are the images from server loaded into the client's memory ?

Displaying speed of images from a server on a client will always depend on the resolution of the image.
The higher the resolution the longer it takes to load into memory of the client.
Usually images are reduced in size and DPI for display purpose, you only get a link for the fully blown image to download.

To speed up the display, reduce the size to 640 pixels for the long side and the quality to 75 to 100 DPI, you can use IrfanView to do this.
Provide only a download link for the fully blown image.

[kokenge]

I have a system doing something similar to what you are doing.
Basically I let the browser do the work and use the <IMG SRC= tag.

I have it running at www.dkokenge.com/rbp
Click on Photos
And like Stefan says, it all depends on how big the photos are.

Some other RB stuff is running on the site, and I have 3 other projects that will be moved over shortly.

HTH..

[alix]

Very nice site, Kokenge.

Stefan, sorry, but I still don't understand, when you say :

The higher the resolution the longer it takes to load into memory of the client.

Is there no way to load all the images first into the client's memory (and tell the user to be patient and wait). and then once all the images are loaded, to display them ? after all, each of my images are only 45k and 75 DPI.

and then...
I also noticed while testing the program on my local machine, that the ..\public\images directory gets filled with .png versions of my images each time I run photo-slider...

@+

[Jerry Muelver]

Good catch, Alix. The /public/images folder in your runbasicnet site is also filling up with .png files. Either those things need a shorter lifespan, or we need a periodic cleanup utility run.

[Carl Gundel - admin]

Loading an image into memory is useful if you want to draw on that image. Then you can render it to the page if you want. It is going to be saved first as a PNG. This may not be the best format for quick serving up, especially for large photos.

If you have JPEG images that are already small and want them served up quickly, the best thing to do is generate HTML in your page to render them directly.

-Carl

[kokenge]

I altered your code a little.
See if this works for you?

'
' PHOTO-SLIDER
'
QuotomaticDir$ = "public\quotomatic\"
QuoteImgUrl$ = "../public/quotomatic/images2"
QuoteImgDir$ = "public\quotomatic\images2"


CSSClass "a.sBtn", "{
    background:tan;  
  Border-Width:1px;
  Border-Color:black;
  Border-Style:solid;
     Font-Size:7pt;
   Font-Weight:Bold;
   Font-Family:Arial;
Text-Decoration:  None;
}"

'
' Wait while loading images by displaying their icons
' Show 5 across
filepath$ =QuoteImgDir$+"\*.gif"
print filepath$
files #g, filepath$
if #g HASANSWER() then
count = #g rowcount()
print count
'
'retrieve info for next file
' talbe takes 30% of the window width
' at 5 up each cell is 20% of the width
' each image fills 100% of the cell
html "<TABLE border=1 width=30%><TR>"
i = 0
while #g hasanswer()
dummy$ = #g nextfile$()
img$ = QuoteImgUrl$;"/";#g NAME$()
' display iconized image
html "<TD width=20% align=center valign=bottom>"
html "<img src='"; img$; "' width=100%><BR>"
link #p, "Play", [play]
#p cssclass("sBtn")
#p setkey(img$)
html "</TD>"
i = i + 1
if i / 5 = int(i / 5) then html "</TR><TR>"
WEND
html "</TR><TABLE>"

' a place to show expanded photo
' table takes 20% of the window and image takes 100% of the cell
html "<table width = 20%><tr><TD id=shoImg></TD></TR></TABLE>"
end if
wait
[play]
shoImg$ = EventKey$
html "<script> document.getElementById('shoImg').innerHTML = '"
html "<img src="""; shoImg$; """ width=100%><BR>"
html "';</script>"
wait

Have a great day..

[alix]

Hooo! very nice.
I have added your displayer to the site : cliftonsnooze.runbasicnet.com/

Thank you very much, kokenge, I'll keep this one for an other project I have in mind.

As for the slide show effect, well, I will just have to find an other way somehow ...


@+

[kokenge]

Hmmm! A slider! I guess I misunderstood.
Why not simply alter the code a little and place an arrow to go froward or back?
I altered your code a little. Maybe this may help??

'
' PHOTO-SLIDER
'
QuotomaticDir$ = "public\quotomatic\"
QuoteImgUrl$ = "../public/quotomatic/images2"
QuoteImgDir$ = "public\quotomatic\images2"

across = 5 ' specify number across
celSize = int(100 / across) ' cell percent of table
tblSize = 30 ' supply percent of the total window you want for slider

CSSClass "a.sBtn", "{
  Border-Width:1px;
  Border-Color:black;
  Border-Style:solid;
     Font-Size:10pt;
   Font-Weight:Bold;
   Font-Family:Arial;
Text-Decoration:  None;
}"

filepath$ =QuoteImgDir$+"\*.gif"

files #g, filepath$
x = #g HASANSWER()
if x = 0 then
  print "Nothing to display"
  wait
end if
count = #g rowcount()
'
' display area
'
html "<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=";tblSize;"%>"
html "<TR BGCOLOR=tan><TD COLSPAN=3 ALIGN=CENTER><B><FONT SIZE=4>Slide show</TD></TR>"
html "<TR><TD WIDTH=2%>"
link #b, "<-", [slideBak]
#b cssclass("sBtn")
html "</TD><TD>"
html "<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=3 WIDTH=100%>"
html "<TR bgcolor=white>"
for i = 1 to across
html "<TD WIDTH=";celSize;"% align=center valign=bottom id=";i;"></TD>"
next i

html "</TR></TABLE></TD><TD WIDTH=2%>"
link #f, "->", [slideFwd]
#f cssclass("sBtn")
html "</TD></TR></TABLE>"

imgBeg = 0
dim imgs$(count)
' array the image names
i = 0
while #g hasanswer()
i = i + 1
dummy$ = #g nextfile$()
imgs$(i) = QuoteImgUrl$;"/";#g NAME$()
WEND

[slideFwd]
sho  = imgBeg
for i = 1 to across
sho = sho + 1
if sho > count then sho = 1
html "<script> document.getElementById('";i;"').innerHTML = '"
img$ = imgs$(sho)
html "<img src=""";img$;""" width=100%><BR>"
html "';</script>"
next i
imgBeg = imgBeg + 1
if imgBeg > count then imgBeg = 1
wait

[slideBak]
sho  = imgBeg - 1
if sho < 1 then sho = count
imgBeg   = sho
for i = 1 to across
html "<script> document.getElementById('";i;"').innerHTML = '"
img$ = imgs$(sho)
html "<img src=""";img$;""" width=100%><BR>"
html "';</script>"
sho = sho + 1
if sho > count then sho = 1
next i
wait


Have a great day..

[alix]

ok ! your code is on : cliftonsnooze.runbasicnet.com/

Unfortunately, not what I have in mind. I'm thinking of a slide presentation, like you get with powerpoint : one image displayed after the other.
See Brent's code : runbasic.wikispaces.com/Timer+Replacement

But this is fun anyway ! ;D

[kokenge]

OK! I took a look at the code. Maybe I still don't get it.
I guess my question is- what is wrong with his code.
I simply took his code and changed a couple lines and it seems to work??


QuotomaticDir$ = "public\quotomatic\"
QuoteImgUrl$ = "../public/quotomatic/images2"
QuoteImgDir$ = "public\quotomatic\images2"


filepath$ =QuoteImgDir$+"\*.gif"
iles #g, filepath$
x = #g HASANSWER()
if x = 0 then
  print "Nothing to display"
  wait
end if
count = #g rowcount()
'
'retrieve info for next file
'
dim imgs$(count)
' array the image names
i = 0
while #g hasanswer()
i = i + 1
dummy$ = #g nextfile$()
imgs$(i) = QuoteImgUrl$;"/";#g NAME$()
WEND

   totalpages = count
   page = 1
   playing = 0

[show]
cls
img$ = imgs$(page)
html "<TABLE BORDER=0 CELLPADDING=0 WIDTH=30%><TR><TD>
<img src=""";img$;""" width=100%></TD></TR><TD align=center bgcolor=tan>"

   if page > 1 then link #prev, "Previous", [prev]
   html " "
   if not(playing) then
       link #play, "Play", [play]
   else
       link #pause, "Pause", [pause]
   end if
   html " "
   if page < totalpages then link #next, "Next", [next]
html "</TD></TR></TABLE>"

   if playing then
       html "
       <script type=""text/javascript"">
       <!--
       var a = null;
       var as = document.getElementsByTagName('A');
       for (var i = 0; i < as.length; i++)
       {
           if (as[i].firstChild.data == 'Next')
           {
               a = as[i];
               break;
           }
       }
       if (a) window.setTimeout('window.location = a.href', 5000);
       //-->
       </script>"
   end if
   wait

[prev]
   page = page - 1
   goto [show]

[next]
   page = page + 1
   goto [show]

[pause]
   playing = 0
   goto [show]

[play]
   playing = 1
   goto [show]


Have a great day.

[alix]

Nothing wrong with the code !

But, as the title of this post shows, I was trying to display my images faster. I turns out that the best way to do this is to generate images (that are reasonably sized) with HTML code. The RB loadimage and drawimage commands are more meant for changing the image before displaying it.

So to try and display and change the images and not slow down the whole process needs more thinking and finding other ways... My initial plan was to make a fancy kind of photo-slider once I got a basic one working.

Just experimenting ...

@+

[mikeukmid]

Alix, Google 'HTML slide show', plenty of ideas/demos/code to be found from there.

[Jerry Muelver]

I would suggest looking for Dave Raggett's Slidy. It's an open-source CSS solution that's been around for years, and is rock-solid. It should port nicely into RB, I would think.

[Janet]

There is also S5 (Simple Standards-Based Slide Show) by Eric Meyer. The license is Public Domain and there's quite a bit of documentation.