Author Topic: Scroll down to refresh  (Read 5358 times)

0 Members and 1 Guest are viewing this topic.

FellippeHeitor

  • Guest
Scroll down to refresh
« on: April 03, 2018, 03:43:39 pm »
Scroll the picture up and down with the mouse (wheel or dragging), arrow keys, home/end keys.

If you drag down from the top you'll be offered to refresh the page. Upon release the effect aims to mimick Android's list view bounce effect.

Code: QB64: [Select]
  1. CONST true = -1, false = 0
  2.  
  3. canvas& = _NEWIMAGE(800, 600, 32)
  4. SCREEN canvas&
  5. contents& = _NEWIMAGE(800, 1200, 32)
  6. refresh:
  7. _DEST contents&
  8. CLS , _RGB32(RND * 150, RND * 150, RND * 150)
  9. IF shape THEN
  10.     FOR i = 1 TO 50
  11.         c~& = _RGB32(RND * 255, RND * 255, RND * 255)
  12.         xx = RND * _WIDTH
  13.         yy = RND * _HEIGHT
  14.         CIRCLE (xx, yy), RND * 100, c~&
  15.         PAINT (xx, yy), c~&, c~&
  16.     NEXT
  17.     FOR i = 1 TO 50
  18.         LINE (RND * _WIDTH, RND * _HEIGHT)-STEP(RND * 200, RND * 200), _RGB32(RND * 255, RND * 255, RND * 255), BF
  19.     NEXT
  20. shape = NOT shape
  21. COLOR _RGB32(255, 255, 255), 0
  22.  
  23.     LINE (0, 0)-(_WIDTH - 1, _HEIGHT - 1), _RGB32(w, w, s), BF
  24.     _PUTIMAGE (0, y), contents&
  25.     IF willRefresh THEN
  26.         m$ = "Release to refresh"
  27.         _PRINTSTRING (_WIDTH / 2 - _PRINTWIDTH(m$) / 2, (_HEIGHT / 3) / 2 - _FONTHEIGHT / 2), m$
  28.     END IF
  29.  
  30.         y = y + _MOUSEWHEEL * _FONTHEIGHT
  31.     LOOP
  32.  
  33.         IF NOT mousedown THEN
  34.             mousedown = true
  35.             mouseGrabY = _MOUSEY
  36.         ELSE
  37.             y = y - (mouseGrabY - _MOUSEY)
  38.             mouseGrabY = _MOUSEY
  39.         END IF
  40.     ELSE
  41.         IF mousedown THEN
  42.             mousedown = false
  43.             IF willRefresh THEN willRefresh = false: GOTO refresh
  44.             y = y - (y MOD _FONTHEIGHT)
  45.         END IF
  46.     END IF
  47.  
  48.     k& = _KEYHIT
  49.     IF NOT mousedown THEN
  50.         IF k& = 18432 THEN y = y - _FONTHEIGHT
  51.         IF k& = 20480 THEN y = y + _FONTHEIGHT
  52.         IF k& = 18176 THEN y = 0
  53.         IF k& = 20224 THEN y = -(_HEIGHT(contents&) - _HEIGHT)
  54.     END IF
  55.  
  56.     IF y > 0 THEN
  57.         s = map(y, 0, _HEIGHT / 3, 0, 255)
  58.         IF y < _HEIGHT / 3 AND willRefresh THEN
  59.             willRefresh = false
  60.         END IF
  61.     END IF
  62.     IF y > _HEIGHT / 3 THEN
  63.         IF mousedown THEN willRefresh = true
  64.         y = _HEIGHT / 3: w = w + 10
  65.     ELSE
  66.         w = w - 10
  67.     END IF
  68.     IF w < 0 THEN w = 0
  69.     IF w > 255 THEN w = 255
  70.  
  71.     IF y > 0 AND NOT mousedown THEN y = y - y / 2
  72.     IF y < -(_HEIGHT(contents&) - _HEIGHT) AND NOT mousedown THEN
  73.         s = 0
  74.         y = y - ((ABS(y) - _HEIGHT(contents&)) / 2)
  75.         IF y > -(_HEIGHT(contents&) - _HEIGHT) THEN
  76.             y = -(_HEIGHT(contents&) - _HEIGHT)
  77.         END IF
  78.     END IF
  79.  
  80.     _DISPLAY
  81.     _LIMIT 30
  82.  
  83. FUNCTION map! (value!, minRange!, maxRange!, newMinRange!, newMaxRange!)
  84.     map! = ((value! - minRange!) / (maxRange! - minRange!)) * (newMaxRange! - newMinRange!) + newMinRange!
  85.  
« Last Edit: April 03, 2018, 03:49:00 pm by FellippeHeitor »

Offline Ashish

  • Forum Resident
  • Posts: 630
  • Never Give Up!
    • View Profile
Re: Scroll down to refresh
« Reply #1 on: April 04, 2018, 10:50:30 am »
  • Best Answer
  • Nice! BTW, you program does opposite scrolling. That is, scrolling down make content to move up.
    Works correct when I replace y= y + _MOUSEWHEEL * _FONTHEIGHT with y = y - _MOUSEWHEEL * _FONTHEIGHT
    if (Me.success) {Me.improve()} else {Me.tryAgain()}


    My Projects - https://github.com/AshishKingdom?tab=repositories
    OpenGL tutorials - https://ashishkingdom.github.io/OpenGL-Tutorials

    FellippeHeitor

    • Guest
    Re: Scroll down to refresh
    « Reply #2 on: April 04, 2018, 11:23:26 am »
  • Best Answer
  • Good catch. I wrote that in a computer that has AutoHotKey running in the background for the exact purpose of inverting mouse wheel scrolls and that got in the way of my coding. Thanks for the fix.

    Offline bplus

    • Global Moderator
    • Forum Resident
    • Posts: 8053
    • b = b + ...
      • View Profile
    Re: Scroll down to refresh
    « Reply #3 on: April 04, 2018, 05:41:33 pm »
  • Best Answer
  • Hey that's what happens when I pull down the window shade!

    That might come in handy. Thanks

    Offline STxAxTIC

    • Library Staff
    • Forum Resident
    • Posts: 1091
    • he lives
      • View Profile
    Re: Scroll down to refresh
    « Reply #4 on: April 04, 2018, 11:25:52 pm »
  • Best Answer
  • I'm so used to refreshing stuff that way, I at first was like "yeah, what gives, this isn't even refreshing"... and then I remembered what language we're using. Nicely done m'man, as per usual. Nicely done...
    You're not done when it works, you're done when it's right.

    FellippeHeitor

    • Guest
    Re: Scroll down to refresh
    « Reply #5 on: April 05, 2018, 12:34:01 pm »
  • Best Answer
  • Updated code to support scrolling with the middle mouse button.

    Click with the middle mouse button to place a "scroll pointer" in the page (see screenshot) and then just move the mouse up/down to scroll. New click to disable.

    Code: QB64: [Select]
    1. CONST true = -1, false = 0
    2. canvas& = _NEWIMAGE(800, 600, 32)
    3. SCREEN canvas&
    4. contents& = _NEWIMAGE(800, 2000, 32)
    5. refresh:
    6. _DEST contents&
    7. CLS , _RGB32(RND * 150, RND * 150, RND * 150)
    8. IF shape THEN
    9.     FOR i = 1 TO 50
    10.         c~& = _RGB32(RND * 255, RND * 255, RND * 255)
    11.         xx = RND * _WIDTH
    12.         yy = RND * _HEIGHT
    13.         CIRCLE (xx, yy), RND * 100, c~&
    14.         PAINT (xx, yy), c~&, c~&
    15.     NEXT
    16.     FOR i = 1 TO 50
    17.         LINE (RND * _WIDTH, RND * _HEIGHT)-STEP(RND * 200, RND * 200), _RGB32(RND * 255, RND * 255, RND * 255), BF
    18.     NEXT
    19. shape = NOT shape
    20. COLOR _RGB32(255, 255, 255), 0
    21.  
    22.     LINE (0, 0)-(_WIDTH - 1, _HEIGHT - 1), _RGB32(w, w, s), BF
    23.     _PUTIMAGE (0, y), contents&
    24.     IF willRefresh THEN
    25.         m$ = "Release to refresh"
    26.         _PRINTSTRING (_WIDTH / 2 - _PRINTWIDTH(m$) / 2, (_HEIGHT / 3) / 2 - _FONTHEIGHT / 2), m$
    27.     END IF
    28.  
    29.         y = y - _MOUSEWHEEL * _FONTHEIGHT
    30.         IF _MOUSEBUTTON(1) THEN
    31.             isScrolling = false: scrollLock = true
    32.             IF NOT mousedown THEN
    33.                 mousedown = true
    34.                 mouseGrabY = _MOUSEY
    35.             ELSE
    36.                 y = y - (mouseGrabY - _MOUSEY)
    37.                 mouseGrabY = _MOUSEY
    38.             END IF
    39.         ELSE
    40.             IF mousedown THEN
    41.                 mousedown = false
    42.                 IF willRefresh THEN willRefresh = false: GOTO refresh
    43.                 'y = y - (y MOD _FONTHEIGHT)
    44.             END IF
    45.         END IF
    46.  
    47.         IF _MOUSEBUTTON(2) THEN isScrolling = false: scrollLock = false
    48.  
    49.         IF _MOUSEBUTTON(3) THEN
    50.             IF NOT isScrolling THEN
    51.                 scrollGrabY = _MOUSEY
    52.                 scrollGrabX = _MOUSEX
    53.                 isScrolling = true
    54.                 scrollLock = false
    55.             ELSE
    56.                 IF scrollLock THEN
    57.                     scrollLock = false
    58.                 END IF
    59.             END IF
    60.         ELSE
    61.             IF scrollGrabY = _MOUSEY AND scrollGrabX = _MOUSEX THEN
    62.                 scrollLock = true
    63.             END IF
    64.  
    65.             IF scrollLock = false THEN
    66.                 isScrolling = false
    67.             ELSE
    68.                 scrollLock = true
    69.             END IF
    70.         END IF
    71.     LOOP
    72.  
    73.     IF isScrolling THEN
    74.         FOR i = 1 TO 10
    75.             IF i MOD 2 = 0 THEN c~& = _RGBA32(0, 0, 0, 100) ELSE c~& = _RGBA32(255, 255, 255, 100)
    76.             CIRCLE (scrollGrabX, scrollGrabY), i * 2, c~&
    77.         NEXT
    78.  
    79.         IF scrollGrabY > _MOUSEY THEN
    80.             y = y + (scrollGrabY - _MOUSEY) / 2
    81.             FOR i = 10 TO 1 STEP -2
    82.                 LINE (scrollGrabX - i / 2, scrollGrabY - 20 - (10 - i))-STEP(i, 0), _RGB32(255, 255, 255)
    83.             NEXT
    84.         ELSEIF scrollGrabY < _MOUSEY THEN
    85.             y = y - (_MOUSEY - scrollGrabY) / 2
    86.             FOR i = 10 TO 1 STEP -2
    87.                 LINE (scrollGrabX - i / 2, scrollGrabY + 20 + (10 - i))-STEP(i, 0), _RGB32(255, 255, 255)
    88.             NEXT
    89.         ELSE
    90.             FOR i = 10 TO 1 STEP -2
    91.                 LINE (scrollGrabX - i / 2, scrollGrabY - 20 - (10 - i))-STEP(i, 0), _RGB32(255, 255, 255)
    92.             NEXT
    93.             FOR i = 10 TO 1 STEP -2
    94.                 LINE (scrollGrabX - i / 2, scrollGrabY + 20 + (10 - i))-STEP(i, 0), _RGB32(255, 255, 255)
    95.             NEXT
    96.         END IF
    97.     END IF
    98.  
    99.     k& = _KEYHIT
    100.     IF NOT mousedown THEN
    101.         IF k& = 18432 THEN y = y - _FONTHEIGHT
    102.         IF k& = 20480 THEN y = y + _FONTHEIGHT
    103.         IF k& = 18176 THEN y = 0
    104.         IF k& = 20224 THEN y = -(_HEIGHT(contents&) - _HEIGHT)
    105.     END IF
    106.  
    107.     IF y > 0 THEN
    108.         s = map(y, 0, _HEIGHT / 3, 0, 255)
    109.         IF y < _HEIGHT / 3 AND willRefresh THEN
    110.             willRefresh = false
    111.         END IF
    112.     END IF
    113.     IF y > _HEIGHT / 3 THEN
    114.         IF mousedown THEN willRefresh = true
    115.         y = _HEIGHT / 3: w = w + 10
    116.     ELSE
    117.         w = w - 10
    118.     END IF
    119.     IF w < 0 THEN w = 0
    120.     IF w > 255 THEN w = 255
    121.  
    122.     IF y > 0 AND NOT mousedown THEN y = y - y / 2
    123.     IF y < -(_HEIGHT(contents&) - _HEIGHT) AND NOT mousedown THEN
    124.         s = 0
    125.         y = y - ((ABS(y) - _HEIGHT(contents&)) / 2)
    126.         IF y > -(_HEIGHT(contents&) - _HEIGHT) THEN
    127.             y = -(_HEIGHT(contents&) - _HEIGHT)
    128.         END IF
    129.     END IF
    130.  
    131.     _DISPLAY
    132.     _LIMIT 30
    133.  
    134. FUNCTION map! (value!, minRange!, maxRange!, newMinRange!, newMaxRange!)
    135.     map! = ((value! - minRange!) / (maxRange! - minRange!)) * (newMaxRange! - newMinRange!) + newMinRange!
    136.  
    screenshot.png
    * screenshot.png (Filesize: 44.11 KB, Dimensions: 806x628, Views: 389)