Scroll down to refresh

[FellippeHeitor]

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. DIM i AS LONG, y AS LONG
7. refresh:
8. _DEST contents&
9. CLS , _RGB32(RND * 150, RND * 150, RND * 150)
10. IF shape THEN
11.     FOR i = 1 TO 50
12.         c~& = _RGB32(RND * 255, RND * 255, RND * 255)
13.         xx = RND * _WIDTH
14.         yy = RND * _HEIGHT
15.         CIRCLE (xx, yy), RND * 100, c~&
16.         PAINT (xx, yy), c~&, c~&
17.     NEXT
18. ELSE
19.     FOR i = 1 TO 50
20.         LINE (RND * _WIDTH, RND * _HEIGHT)-STEP(RND * 200, RND * 200), _RGB32(RND * 255, RND * 255, RND * 255), BF
21.     NEXT
22. END IF
23. shape = NOT shape
24. _DEST 0
25. COLOR _RGB32(255, 255, 255), 0
26.  
27. DO
28.     LINE (0, 0)-(_WIDTH - 1, _HEIGHT - 1), _RGB32(w, w, s), BF
29.     _PUTIMAGE (0, y), contents&
30.     IF willRefresh THEN
31.         m$ = "Release to refresh"
32.         _PRINTSTRING (_WIDTH / 2 - _PRINTWIDTH(m$) / 2, (_HEIGHT / 3) / 2 - _FONTHEIGHT / 2), m$
33.     END IF
34.  
35.     DO WHILE _MOUSEINPUT
36.         y = y + _MOUSEWHEEL * _FONTHEIGHT
37.     LOOP
38.  
39.     IF _MOUSEBUTTON(1) THEN
40.         IF NOT mousedown THEN
41.             mousedown = true
42.             mouseGrabY = _MOUSEY
43.         ELSE
44.             y = y - (mouseGrabY - _MOUSEY)
45.             mouseGrabY = _MOUSEY
46.         END IF
47.     ELSE
48.         IF mousedown THEN
49.             mousedown = false
50.             IF willRefresh THEN willRefresh = false: GOTO refresh
51.             y = y - (y MOD _FONTHEIGHT)
52.         END IF
53.     END IF
54.  
55.     k& = _KEYHIT
56.     IF NOT mousedown THEN
57.         IF k& = 18432 THEN y = y - _FONTHEIGHT
58.         IF k& = 20480 THEN y = y + _FONTHEIGHT
59.         IF k& = 18176 THEN y = 0
60.         IF k& = 20224 THEN y = -(_HEIGHT(contents&) - _HEIGHT)
61.     END IF
62.  
63.     IF y > 0 THEN
64.         s = map(y, 0, _HEIGHT / 3, 0, 255)
65.         IF y < _HEIGHT / 3 AND willRefresh THEN
66.             willRefresh = false
67.         END IF
68.     END IF
69.     IF y > _HEIGHT / 3 THEN
70.         IF mousedown THEN willRefresh = true
71.         y = _HEIGHT / 3: w = w + 10
72.     ELSE
73.         w = w - 10
74.     END IF
75.     IF w < 0 THEN w = 0
76.     IF w > 255 THEN w = 255
77.  
78.     IF y > 0 AND NOT mousedown THEN y = y - y / 2
79.     IF y < -(_HEIGHT(contents&) - _HEIGHT) AND NOT mousedown THEN
80.         s = 0
81.         y = y - ((ABS(y) - _HEIGHT(contents&)) / 2)
82.         IF y > -(_HEIGHT(contents&) - _HEIGHT) THEN
83.             y = -(_HEIGHT(contents&) - _HEIGHT)
84.         END IF
85.     END IF
86.  
87.     _DISPLAY
88.     _LIMIT 30
89. LOOP
90.  
91. FUNCTION map! (value!, minRange!, maxRange!, newMinRange!, newMaxRange!)
92.     map! = ((value! - minRange!) / (maxRange! - minRange!)) * (newMaxRange! - newMinRange!) + newMinRange!
93. END FUNCTION
94.  

[Ashish]

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

[FellippeHeitor]

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.

[bplus]

Hey that's what happens when I pull down the window shade!

That might come in handy. Thanks

[STxAxTIC]

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...

[FellippeHeitor]

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