Scroll bars and resizable programs

[SMcNeill]

I wrote this for a demo in a topic elsewhere, but I thought  I'd share it here so folks could find it in the future, if they ever wanted.

Code: QB64: [Select]

1. DIM SHARED WorkScreen AS LONG, DisplayScreen AS LONG
2. $RESIZE:ON
3.  
4. WorkScreen = _NEWIMAGE(3600, 2400, 32) ' a nice large screen so we can scroll like crazy
5. DisplayScreen = _NEWIMAGE(640, 480, 32) 'a nice small display screen
6.  
7. SCREEN DisplayScreen
8. _DEST WorkScreen
9. PRINT "Let's print all sorts of stuff on our workscreen, and make certain that it's more than long enough so that it'll scroll quite a ways across from the normal screen."
10. PRINT
11. PRINT
12. LINE (400, 400)-(3000, 1200), &HFFFFFF00, BF
13. FOR i = 1 TO 145
14.     COLOR _RGB32(RND * 256, RND * 256, RND * 256), 0 'various colors for each line
15.     PRINT "LINE #"; i; ".  This is just a bunch of junk for testing purposes only.  As you can see, if you want to read all the text from this line, you're going to have to scroll to see it all."
16. NEXT
17.  
18.  
19.  
20.  
21.  
22. StartX = 0: StartY = 0: W = _WIDTH(DisplayScreen): H = _HEIGHT(DisplayScreen)
23. _DEST DisplayScreen
24. DO
25.     IF _RESIZE THEN
26.         temp = _NEWIMAGE(_RESIZEWIDTH, _RESIZEHEIGHT, 32)
27.         SCREEN temp
28.         _FREEIMAGE DisplayScreen
29.         DisplayScreen = temp
30.         W = _WIDTH(DisplayScreen): H = _HEIGHT(DisplayScreen)
31.         _DELAY .25
32.         junk = _RESIZE 'clear the resize flag after manually setting the screen to the size we specified.
33.     END IF
34.     _LIMIT 30
35.     CLS
36.     PRINT StartX, StartY
37.     ScrollBar StartX, 2
38.     ScrollBar StartY, 1
39.  
40.     k = _KEYHIT
41.     SELECT CASE k
42.         CASE ASC("A"), ASC("a"): StartX = StartX - 10: IF StartX < 0 THEN StartX = 0
43.         CASE ASC("S"), ASC("s"): StartY = StartY + 10: IF StartY > _HEIGHT(WorkScreen) - H THEN StartY = _HEIGHT(WorkScreen) - H
44.         CASE ASC("D"), ASC("d"): StartX = StartX + 10: IF StartX > _WIDTH(WorkScreen) - W THEN StartX = _WIDTH(WorkScreen) - W
45.         CASE ASC("W"), ASC("w"): StartY = StartY - 10: IF StartY < 0 THEN StartY = 0
46.     END SELECT
47.     _PUTIMAGE (0, 0)-(W - 20, H - 20), WorkScreen, DisplayScreen, (StartX, StartY)-STEP(W, H)
48.     _DISPLAY
49. LOOP
50.  
51.  
52.  
53.  
54.  
55. SUB ScrollBar (Start, Direction)
56.     D = _DEST: _DEST DisplayScreen 'our scrollbars show on the display
57.     Min = 0
58.     MaxH = _HEIGHT(DisplayScreen)
59.     MaxW = _WIDTH(DisplayScreen)
60.     H = _HEIGHT(WorkScreen)
61.     W = _WIDTH(WorkScreen)
62.     IF Direction = 1 THEN 'up/down bar
63.         Box MaxW - 20, 0, 20, MaxH - 20, &HFF777777, &HFFFFFFFF
64.         Box MaxW - 19, Start / H * MaxH, 18, MaxH / H * MaxH - 20, &HFFFF0000, 0 'Red with transparent
65.     ELSE 'left/right bar
66.         Box Min, MaxH - 20, MaxW - 20, 20, &HFF777777, &HFFFFFFFF 'Gray with white border
67.         Box Start / W * MaxW, MaxH - 19, MaxW / W * MaxW - 20, 18, &HFFFF0000, 0 'Red with transparent
68.     END IF
69.     _DEST D
70. END SUB
71.  
72.  
73. SUB Box (x, y, wide, high, kolor AS _UNSIGNED LONG, border AS _UNSIGNED LONG)
74.     LINE (x, y)-STEP(wide, high), kolor, BF
75.     LINE (x, y)-STEP(wide, high), border, B
76. END SUB

EDIT:  Might aught to mention:  Use "WASD" keys to scroll the screen around.  :P

[keybone]

Nice job :)

[TempodiBasic]

I find it great!
More if you put away that light yellow as background coming out from the covered part of the text at position >390 for X and >120 for Y.
Thanks to share.

[SMcNeill]

Petr's and TempodiBasic's interest along with mine have been peaked, I think. I confess I was not particularly interested in a horizontal text scroller but having finished a pretty nice one, I am curious about doing text with a double scrollbar vertical and horizontal. Now Steve has sort of started that topic but also speaks of resizeable programs?? here https://www.qb64.org/forum/index.php?topic=1719.msg109557#msg109557
WTH resizeable programs??? I think he just tapped this section of code out of something bigger that makes more sense as a whole.

So I am wondering should we continue discussion here with the horizontal text conquered or should we move to Steve's thread and try and improve on his double scrollbars by connecting up mouse and normal keys arrows, home. end, pgUp, pgDn... mouse Clicks, mouse dragging, mouse wheel to the scrollers?

There is one other underlying issue to consider, the control of mouse and key inputs over the whole screen which might contain several scrollbars, mouse click or drag areas, say for buttons or lists or text boxes... going this far in thinking ahead, I see we have arrived at on InForm like GUI! (I arrived at this central mouse and key controller problem with Tiny Navigator trying to do 2 Lists to select from Files or Directories.) So now I wonder is it worth the time for working out double scrollbars for giant text which will likely mean a central controller for all mouse and key activity in order to actually use it in an app. ???

Now my head hurts ;-))

Well we are in the Discussion board, so let's continue discussion here if it pleases Petr and TempodiBasic and anyone else interested in this coding problem.

Give the demo a try and use your mouse to resize the window.  I cobbled this together just as a very quick little demo -- it wasn't actually part of anything else -- but I was trying to work out several other little things (such as setting up my camera and testing out recording for the new video tutorials), so I just cobbled the concept together really quickly.  (Which is why we use WASD keys to scroll, rather than arrow keys, since I didn't bother to lookup their actual values...)

If you guys want, I can take a few moments and swap over to arrow keys and add mouse support for a better demo.  This was really just a bare bones example to see if it was what might've been needed, and if it was, I would've expanded upon it better in a future post.  ;)

[SMcNeill]

The scroll bar concept fleshed out a little better to highlight what I was trying to showcase:

Code: QB64: [Select]

1. DIM SHARED WorkScreen AS LONG, DisplayScreen AS LONG
2. $RESIZE:ON
3.  
4. WorkScreen = _NEWIMAGE(3600, 2400, 32) ' a nice large screen so we can scroll like crazy
5. DisplayScreen = _NEWIMAGE(640, 480, 32) 'a nice small display screen
6.  
7. SCREEN DisplayScreen
8. _DEST WorkScreen
9. PRINT "Let's print all sorts of stuff on our workscreen, and make certain that it's more than long enough so that it'll scroll quite a ways across from the normal screen."
10. PRINT
11. PRINT
12. LINE (400, 400)-(3000, 1200), &HFFFFFF00, BF
13. FOR i = 1 TO 145
14.     COLOR _RGB32(RND * 256, RND * 256, RND * 256), 0 'various colors for each line
15.     PRINT "LINE #"; i; ".  This is just a bunch of junk for testing purposes only.  As you can see, if you want to read all the text from this line, you're going to have to scroll to see it all."
16. NEXT
17.  
18.  
19.  
20.  
21.  
22. StartX = 0: StartY = 0: W = _WIDTH(DisplayScreen): H = _HEIGHT(DisplayScreen)
23. _DEST DisplayScreen
24. DO
25.     IF _RESIZE THEN
26.         temp = _NEWIMAGE(_RESIZEWIDTH, _RESIZEHEIGHT, 32)
27.         SCREEN temp
28.         _FREEIMAGE DisplayScreen
29.         DisplayScreen = temp
30.         W = _WIDTH(DisplayScreen): H = _HEIGHT(DisplayScreen)
31.         _DELAY .25
32.         junk = _RESIZE 'clear the resize flag after manually setting the screen to the size we specified.
33.     END IF
34.     _LIMIT 30
35.     CLS
36.     ScrollBar StartX, 2
37.     ScrollBar StartY, 1
38.  
39.     k = _KEYHIT
40.     SELECT CASE k
41.         CASE ASC("A"), ASC("a"), 19200: StartX = StartX - 10: IF StartX < 0 THEN StartX = 0
42.         CASE ASC("S"), ASC("s"), 20480: StartY = StartY + 10: IF StartY > _HEIGHT(WorkScreen) - H THEN StartY = _HEIGHT(WorkScreen) - H
43.         CASE ASC("D"), ASC("d"), 19712: StartX = StartX + 10: IF StartX > _WIDTH(WorkScreen) - W THEN StartX = _WIDTH(WorkScreen) - W
44.         CASE ASC("W"), ASC("w"), 18432: StartY = StartY - 10: IF StartY < 0 THEN StartY = 0
45.     END SELECT
46.     WHILE _MOUSEINPUT: WEND
47.     IF _MOUSEBUTTON(1) THEN
48.         IF _MOUSEX > W - 21 AND _MOUSEY < H - 20 THEN 'We're on a up/down scroll bar
49.             StartY = _MOUSEY / _HEIGHT(DisplayScreen) * _HEIGHT(WorkScreen)
50.             IF StartY > _HEIGHT(WorkScreen) - H THEN StartY = _HEIGHT(WorkScreen) - H
51.         END IF
52.         IF _MOUSEY > H - 21 AND _MOUSEX < W - 20 THEN 'we're on the left/right scroll bar
53.             StartX = _MOUSEX / _WIDTH(DisplayScreen) * _WIDTH(WorkScreen)
54.             IF StartX > _WIDTH(WorkScreen) - W THEN StartX = _WIDTH(WorkScreen) - W
55.         END IF
56.     END IF
57.  
58.     _PUTIMAGE (0, 0)-(W - 20, H - 20), WorkScreen, DisplayScreen, (StartX, StartY)-STEP(W, H)
59.     _DISPLAY
60. LOOP
61.  
62.  
63.  
64.  
65.  
66. SUB ScrollBar (Start, Direction)
67.     D = _DEST: _DEST DisplayScreen 'our scrollbars show on the display
68.     Min = 0
69.     MaxH = _HEIGHT(DisplayScreen)
70.     MaxW = _WIDTH(DisplayScreen)
71.     H = _HEIGHT(WorkScreen)
72.     W = _WIDTH(WorkScreen)
73.     IF Direction = 1 THEN 'up/down bar
74.         Box MaxW - 20, 0, 20, MaxH - 20, &HFF777777, &HFFFFFFFF
75.         Box MaxW - 19, Start / H * MaxH, 18, MaxH / H * MaxH - 20, &HFFFF0000, 0 'Red with transparent
76.     ELSE 'left/right bar
77.         Box Min, MaxH - 20, MaxW - 20, 20, &HFF777777, &HFFFFFFFF 'Gray with white border
78.         Box Start / W * MaxW, MaxH - 19, MaxW / W * MaxW - 20, 18, &HFFFF0000, 0 'Red with transparent
79.     END IF
80.     _DEST D
81. END SUB
82.  
83.  
84. SUB Box (x, y, wide, high, kolor AS _UNSIGNED LONG, border AS _UNSIGNED LONG)
85.     LINE (x, y)-STEP(wide, high), kolor, BF
86.     LINE (x, y)-STEP(wide, high), border, B
87. END SUB
88.  

Use arrows (or WASD) to scroll the screen, or press the mousebutton down over the scroll bar and see it in action.  Then grab the corner of the screen and resize it, and watch how the scroll bars automatically resize to fit the new dimensions and continue to work as you'd expect them to.

Resizeable program -- Check!
Scroll bars for it -- Check!

As the title says, "Scroll bars and resizable programs".  We do both things in this little demo.  (And now we also do arrow keys and mouse support!)

[TempodiBasic]

Hi Steve
here my experience with your example
https://www.qb64.org/forum/index.php?topic=1718.msg109612#msg109612
and here added to your last code....
use pageUp, PageDown , arrows left & right & Up & Down, rolling wheel for vertical scrolling, left click to scroll to left of 1 step, right click to scroll to left of 1 step.

Scroll bars working well, resizing black square work less only on the external borders.

Code: QB64: [Select]

1. DIM SHARED WorkScreen AS LONG, DisplayScreen AS LONG
2. $RESIZE:ON
3.  
4. WorkScreen = _NEWIMAGE(3600, 2400, 32) ' a nice large screen so we can scroll like crazy
5. DisplayScreen = _NEWIMAGE(640, 480, 32) 'a nice small display screen
6.  
7. SCREEN DisplayScreen
8. _DEST WorkScreen
9. PRINT "Let's print all sorts of stuff on our workscreen, and make certain that it's more than long enough so that it'll scroll quite a ways across from the normal screen."
10. PRINT
11. PRINT
12. LINE (400, 400)-(3000, 1200), &HFFFFFF00, BF
13. FOR i = 1 TO 145
14.     COLOR _RGB32(RND * 256, RND * 256, RND * 256), 0 'various colors for each line
15.     PRINT "LINE #"; i; ".  This is just a bunch of junk for testing purposes only.  As you can see, if you want to read all the text from this line, you're going to have to scroll to see it all."
16. NEXT
17.  
18.  
19.  
20.  
21.  
22. StartX = 0: StartY = 0: W = _WIDTH(DisplayScreen): H = _HEIGHT(DisplayScreen)
23. _DEST DisplayScreen
24. DO
25.     IF _RESIZE THEN
26.         temp = _NEWIMAGE(_RESIZEWIDTH, _RESIZEHEIGHT, 32)
27.         SCREEN temp
28.         _FREEIMAGE DisplayScreen
29.         DisplayScreen = temp
30.         W = _WIDTH(DisplayScreen): H = _HEIGHT(DisplayScreen)
31.         _DELAY .25
32.         junk = _RESIZE 'clear the resize flag after manually setting the screen to the size we specified.
33.     END IF
34.     _LIMIT 30
35.     CLS
36.     ScrollBar StartX, 2
37.     ScrollBar StartY, 1
38.  
39.     k = _KEYHIT
40.     WHILE _MOUSEINPUT
41.         IF _MOUSEBUTTON(1) THEN k = ASC("A")
42.         IF _MOUSEBUTTON(2) THEN k = ASC("d")
43.         IF _MOUSEWHEEL < 0 THEN k = ASC("w") ELSE IF _MOUSEWHEEL > 0 THEN k = ASC("s")
44.     WEND
45.     SELECT CASE k
46.         CASE ASC("A"), ASC("a"), 19200: StartX = StartX - 10: IF StartX < 0 THEN StartX = 0
47.         CASE ASC("S"), ASC("s"), 20480: StartY = StartY + 10: IF StartY > _HEIGHT(WorkScreen) - H THEN StartY = _HEIGHT(WorkScreen) - H
48.         CASE ASC("D"), ASC("d"), 19712: StartX = StartX + 10: IF StartX > _WIDTH(WorkScreen) - W THEN StartX = _WIDTH(WorkScreen) - W
49.         CASE ASC("W"), ASC("w"), 18432: StartY = StartY - 10: IF StartY < 0 THEN StartY = 0
50.         CASE 18688: StartY = StartY - 20: IF StartY < 0 THEN StartY = 0 'page up
51.         CASE 20736: StartY = StartY + 20: IF StartY > _HEIGHT(WorkScreen) - H THEN StartY = _HEIGHT(WorkScreen) - H ' page down
52.     END SELECT
53.     WHILE _MOUSEINPUT: WEND
54.     IF _MOUSEBUTTON(1) THEN
55.         IF _MOUSEX > W - 21 AND _MOUSEY < H - 20 THEN 'We're on a up/down scroll bar
56.             StartY = _MOUSEY / _HEIGHT(DisplayScreen) * _HEIGHT(WorkScreen)
57.             IF StartY > _HEIGHT(WorkScreen) - H THEN StartY = _HEIGHT(WorkScreen) - H
58.         END IF
59.         IF _MOUSEY > H - 21 AND _MOUSEX < W - 20 THEN 'we're on the left/right scroll bar
60.             StartX = _MOUSEX / _WIDTH(DisplayScreen) * _WIDTH(WorkScreen)
61.             IF StartX > _WIDTH(WorkScreen) - W THEN StartX = _WIDTH(WorkScreen) - W
62.         END IF
63.     END IF
64.  
65.     _PUTIMAGE (0, 0)-(W - 20, H - 20), WorkScreen, DisplayScreen, (StartX, StartY)-STEP(W, H)
66.     _DISPLAY
67. LOOP
68.  
69.  
70.  
71.  
72.  
73. SUB ScrollBar (Start, Direction)
74.     D = _DEST: _DEST DisplayScreen 'our scrollbars show on the display
75.     Min = 0
76.     MaxH = _HEIGHT(DisplayScreen)
77.     MaxW = _WIDTH(DisplayScreen)
78.     H = _HEIGHT(WorkScreen)
79.     W = _WIDTH(WorkScreen)
80.     IF Direction = 1 THEN 'up/down bar
81.         Box MaxW - 20, 0, 20, MaxH - 20, &HFF777777, &HFFFFFFFF
82.         Box MaxW - 19, Start / H * MaxH, 18, MaxH / H * MaxH - 20, &HFFFF0000, 0 'Red with transparent
83.     ELSE 'left/right bar
84.         Box Min, MaxH - 20, MaxW - 20, 20, &HFF777777, &HFFFFFFFF 'Gray with white border
85.         Box Start / W * MaxW, MaxH - 19, MaxW / W * MaxW - 20, 18, &HFFFF0000, 0 'Red with transparent
86.     END IF
87.     _DEST D
88. END SUB
89.  
90.  
91. SUB Box (x, y, wide, high, kolor AS _UNSIGNED LONG, border AS _UNSIGNED LONG)
92.     LINE (x, y)-STEP(wide, high), kolor, BF
93.     LINE (x, y)-STEP(wide, high), border, B
94. END SUB
95.  
96.  

here image
 

[SMcNeill]

Scroll bars working well, resizing black square work less only on the external borders.

The black square in the bottom right does nothing.  Click and hold one of the edges of the screen (any edge), and resize the screen however you want, just like you would any other window.  ;)

[euklides]

Interesting.

Useful in a program where you want to display instructions for use, for example.

My question is: is it possible to have more than 145 lines?

[SMcNeill]

Interesting.

Useful in a program where you want to display instructions for use, for example.

My question is: is it possible to have more than 145 lines?

Sure.  Just change the size of the WorkScreen to whatever will suit your needs.

[euklides]

Number of lines needed:  for instance 2600

2600 *16.55= 43030

Replacing:
WorkScreen = _NEWIMAGE(3600, 2400, 32)
with
WorkScreen = _NEWIMAGE(3600, 43030, 32)
and it works. Fine !