Swipe & Slide through pages, like a book reader (iPad)

[Dav]

This is an update to the finger swipe program I posted back in 2015. I wanted to add a slider to quickly go through the pages. Now you can flip through the pages by swiping left/right or by dragging the slider at the bottom.

This demo makes/uses 15 sprite pages, and that's about the limit on my device. Much higher and the app crashes. I'll have to redo this program to make use of something other than all open sprites at the same time. I have a few ideas. Just wanted to post something for the new year.

Only for iPad right now.

- Dav

Code: Select all

'Swipe.txt v1.3
'Finger swiping though pages example.
'Coded by Dav, JAN/2015

'Shows how to make a small book of sprite pages
'that can be flipped through using left/right finger
'swipes, and also by using a slider to scroll through 
'the pages - like a book.  Can be used to make a
'small story/picture book.

'NOTE: This program has a limitation of displaying
'15 or so sprite pages. More than that results in
'a crash. You can overcome this limitation by
'converting this program to load/display image files
'in a folder instead of sprites. Wouldn't be hard.


graphics
option base 1

get screen size sw,sh

maxpg=15  'maximum number of sprite pages

'make slider location data based on num of pages
dim sld(maxpg) ! sv=sw/maxpg
for t = 1 to maxpg
  sld(t)=sv*t
next t

gosub makepages 'make sprite pages to test with

pg=1 'start at sprite page one
if pg=1 then leftpg=maxpg else leftpg = pg-1
if pg=maxpg then rightpg=1 else rightpg=pg+1

sprite str$(pg) at 0,0 'show page
sprite str$(pg) show

SwipeDistance= sw/6  'how far to swipe

slider 0 value 0 at 1,sh-50 size sw

b$="Swipe finger left/right or use slider"
button "m" text b$ at 10,10

do

  'if first touch..
  get touch 0 as tx,ty

  'if screen touched
  if tx>-1 then
     'while finger down,move
      while touch_x(0)>-1
        movx=touch_x(0)
        newx= movx-tx

        sprite str$(pg) at newx,0
        
        if pg<>1 then
          sprite str$(leftpg) at newx-sw,0
        end if
        if pg<>maxpg then
          sprite str$(rightpg) at newx+sw,0
        end if

        if newx >SwipeDistance then
          if pg > 1 then
            'move sprites right, get current x,y
            get sprite str$(pg) pos sx,sy
            for x = sx to sw step 10
              sprite str$(pg) at x, 0
              sprite str$(leftpg) at x-sw,0
              pause .003
            next x
            pg =pg-1!if pg=0 then pg=maxpg
            goto loadpage
          end if
        end if
   
        if newx <-SwipeDistance then
          if pg < maxpg then
            'move sprites left, get current x,y
            get sprite str$(pg) pos sx,sy
            for x = sx to -sw step -10
              sprite str$(pg) at x, 0
              sprite str$(rightpg) at x+sw,0
              pause .003
            next x
            pg =pg+1!if pg=maxpg+1 then pg=1
            goto loadpage
          end if
        end if

      end while

      'if finger released before swiping enough,
      'we must reset the pages smoothly...
      get sprite str$(pg) pos sx,sy
      'go back right....
      if newx < 0 then
         for x = newx to 0 step 5
           sprite str$(pg) at x,0
           if pg<>maxpg then
             sprite str$(rightpg) at x+sw,0
           end if
           pause .002
         next x
      else
        'go back left
        for x = newx to 0 step -5
          sprite str$(pg) at x,0
          if pg<>1 then
            sprite str$(leftpg) at x-sw,0
          end if
          pause .002
        next x
      end if

      loadpage:

      leftpg=pg-1
      rightpg=pg+1
      if pg=1 then leftpg=maxpg
      if pg=maxpg then rightpg=1

      sprite str$(pg) at 0,0
      sprite str$(leftpg) at -sw,0
      sprite str$(rightpg) at sw,0

      slider 0 value sw/maxpg*(pg-1)/sw

  end if

   'if moved slider instead
   if slider_changed("0")then 
     'get slider value
     slv=slider_value("0")*sw
     'look for nearest page
     dispg=1
     for t = 1 to maxpg
       if slv> sld(t) then dispg=dispg+1
     next t
     pg=dispg  'page to load
     goto loadpage
   end if

until 0

end


makepages:

'=== make random pages to test with

refresh off

for s=1 to maxpg
  graphics clear .2,.2,.4
  draw font size 24
  draw color 1,1,1
  for d= 200 to sh-200 step 25
    draw text left$(unique_str$(),36) at 100,d
  next d
  draw font size "75"
  draw text "Page "&str$(s)&" of "&str$(maxpg) at 50,50
  draw size 4
  draw rect 0,0 to sw,sh
  sprite str$(s) scan 0,0,sw,sh
  sprite str$(s) at -2000,-2000
  sprite str$(s) show
next s
graphics clear

refresh on

return

[rbytes]

Great post, Dav, and I can see many uses for this function.

I can tell I got deconditioned over the holidays, because I had to reduce the swipe distance from sw/6 to SW/20. I just didn't have the energy to drag any farther!

Happy New Year to you and fellow Forum folk.

[Dav]

Lol. Happy New Year!

[GeorgeMcGinn]

Hi Dav - Happy New Year.

Great program. I'd like to borrow some of the code for my section on sliders for the programmers guide I am working on.

Thanks - George.

[Dav]

Hi George. Sure, be my guest to use any code I post here for your programming guide. Happy New Year to you too.

- Dav

[sarossell]

Just curious...are sprites like little graphic windows you can populate with text out of sight and then slide them into view? If so, could you flip-flop between just two sprite pages and change the content each time instead of being limited by 15 sprite pages? Not that I'd have the slightest clue how...

[rbytes]

Yes, you can preload them invisibly with virtually any graphic content - images, text, drawings, etc. and then have them appear, fade in, slide on, etc. Two sprites would be enough. They are big memory hogs at full-screen size.

The only thing you'd need to consider is the drawing time to create the Sprite. If it was more than a split-second, you wouldn't get an instant reaction when you tried to scroll pages fast.

[sarossell]

Ah, that makes sense, sure. So, if it did slow it down, you might have to pre-populate three or four sprite pages at a time? - A sort of buffer?

[rbytes]

Yes, that should work.

[Dav]

George, I worked on the slider code for this program separately. Since the slider code is something you are interested in, here is just the slider control part of the program for you to have.

- Dav

Code: Select all

'slidermarks.txt
'Shows how to make a slider with set marks.
'Used for navigating book pages in a program.
'Coded by Dav, JAN/2017

option base 1

sw=screen_width()

maxpg =4 'number of points to mark slider (pages)

'since the slider will be the screen width, we
'will divide screen width by num of pages.
'you should instead divide slider width by num
'of pages in your program.
sv=sw/maxpg   'slider width / total num of pages

'get point values for each mark placement
dim sg(maxpg)
for t = 1 to maxpg
  sg(t)=sv*t  'pixel value...
next t

'create a slider to use
slider 0 value 0/sw at 0,100 size sw

'button to show info only
button "1" text "0" at 10,10

do
   'if user moved slider...
   if slider_changed("0")then 

     'get current slider value
     slv=slider_value("0")*sw

     'find nearest mark based on slider value
     dispg=1
     for t = 1 to maxpg
       if slv> sg(t) then dispg=dispg+1
     next t

     '===== notes =================================
     'dispg is the current mark (page) slider is at
     'sg(dispg) is the point value for that mark.
     '
     'now you know the current page (dispg) you can
     'do something like if dispg=1 then goto page 1
     '=============================================

     'update button info
     a$="PAGE "&dispg&" ("&str$(sg(dispg))&")"
     a$=a$&", slider value:"&slv
     button "1" text a$ at 10,10

   end if
until 0