Some buttons

[SMcNeill]

I remembered Ken had some real nice looking buttons for his calculator, back when he posted it here: https://www.qb64.org/forum/index.php?topic=2867.msg121306#msg121306

In the spirit of all great coders, I studied his code a bit, and then used it as a reference to help me come up with this little snippet:

Code: QB64: [Select]

1. SCREEN _NEWIMAGE(640, 480, 32)
2.  
3.  
4. 'Gray buttons
5. Button 50, 100, 50, 50, 50, 50, 50, 10, 10, 10, "FOO" 'up
6. Button 100, 100, 50, 50, 150, 150, 150, -5, -5, -5, "FOO" 'down
7. Button 150, 100, 50, 50, 50, 50, 50, 10, 10, 10, "FOO" 'up
8.  
9.  
10. 'Lavander buttons
11. Button 250, 100, 50, 50, 50, 50, 50, 10, 10, 20, "FOO" 'up
12. Button 300, 100, 50, 50, 150, 150, 250, -5, -5, -10, "FOO" 'down
13. Button 350, 100, 50, 50, 50, 50, 50, 10, 10, 20, "FOO" 'up
14.  
15.  
16. SUB Button (x, y, wide, tall, r, g, b, rc, gc, bc, caption$)
17.     DIM AS _UNSIGNED LONG k, d, bg
18.     d = _DEFAULTCOLOR
19.     bg = _BACKGROUNDCOLOR
20.     FOR i = 0 TO 10
21.         rm = rm + rc
22.         gm = gm + gc
23.         bm = bm + bc
24.         k = _RGB32(r + rm, g + gm, b + bm)
25.         LINE (x + i, y + i)-(x + wide - i, y + tall - i), k, B
26.     NEXT
27.     PAINT (x + i, y + i), k
28.     COLOR _RGB32(r, g, b), 0
29.     _PRINTSTRING (x + (wide - _PRINTWIDTH(caption$)) / 2, y + (tall - _FONTHEIGHT) / 2), caption$
30.  
31.     COLOR d, bg
32. END SUB

From my experience playing with the numbers here, you want to pick the base color shade that you want to end up with as a central color for start, and then modify the values from to get to that point.

For example, let's say I want to end up with a Red 100 Green 200 Blue 100 button...

For the up button, you start with small values (say 50, 100, 50), and then increase them so they reach your goal after 10 iterations, which would be 5, 10, 5.  In the end, you end up with the last 6 parameters being (50, 100, 50, 5, 10, 5).

For the down button, you basically just work in reverse, with half the values as your up buttons.  Your decrease would be -2.5, -5, -2.5, so after 10 passes, you'd go 25, 50, 25 from your base, so you'd end up with (125, 250, 125, -2.5, -5, -2.5).

Not the perfect shade you were dreaming of?  Just tweak the values some until you can make it closer to what you're looking for.

[Dav]

Well this is handy!  Throwing it in my Steve's toolbox folder.

Thanks for sharing.

- Dav

[SMcNeill]

If you take a moment and look in my Virtual Keyboard topic, you can see a picture of these buttons in action.
 

[Pete]

Those are nice for a retro calculator look. It would be nicer to find a few SCREEN 0 examples with the newer QB64 keywords, or new QB64 keywords to draw a border around button like the post and preview buttons, here. Using the row above, below and the column before and after makes the buttons look to chunky, because the border cannot be set to anything but the middle of those columns and rows, and it also causes a spacing problem. I use a mouseover highlighting button technique I came up with, but the plane buttons are nothing more than a series of blank spaces. At best, a shadow effect could be added to the right and bottom with characters like CHR$(221), which would produce half blocks to create the shadow effect.

Pete

[SMcNeill]

Those are nice for a retro calculator look. It would be nicer to find a few SCREEN 0 examples with the newer QB64 keywords, or new QB64 keywords to draw a border around button like the post and preview buttons, here. Using the row above, below and the column before and after makes the buttons look to chunky, because the border cannot be set to anything but the middle of those columns and rows, and it also causes a spacing problem. I use a mouseover highlighting button technique I came up with, but the plane buttons are nothing more than a series of blank spaces. At best, a shadow effect could be added to the right and bottom with characters like CHR$(221), which would produce half blocks to create the shadow effect.

Pete

You can even use them in SCREEN 0, if you just make them hardware  images, like so:

Code: QB64: [Select]

1. 'Gray buttons
2. Gup = Button_HW(50, 50, 50, 50, 50, 10, 10, 10, "FOO") 'up
3. Gdown = Button_HW(50, 50, 150, 150, 150, -5, -5, -5, "FOO") 'down
4.  
5. 'Lavander buttons
6. Lup = Button_HW(50, 50, 50, 50, 50, 10, 10, 20, "FOO") 'up
7. Ldown = Button_HW(50, 50, 150, 150, 250, -5, -5, -10, "FOO") 'down
8.  
9. DO
10.     COLOR 15 + 16 'bright white and blink
11.     PRINT "HELLO WORLD, I'M STILL IN SCREEN 0!"
12.     _PUTIMAGE (100, 100), Gup
13.     _PUTIMAGE (150, 100), Gdown
14.     _PUTIMAGE (100, 200), Lup
15.     _PUTIMAGE (150, 200), Ldown
16.     _LIMIT 30
17.     _DISPLAY
18. LOOP UNTIL _KEYHIT
19.  
20.  
21.  
22.  
23. FUNCTION Button_HW (wide, tall, r, g, b, rc, gc, bc, caption$)
24.     DIM AS _UNSIGNED LONG k, d, bg, t
25.     Dest = _DEST
26.  
27.     t = _NEWIMAGE(wide, tall, 32)
28.     _DEST t
29.     FOR i = 0 TO 10
30.         rm = rm + rc
31.         gm = gm + gc
32.         bm = bm + bc
33.         k = _RGB32(r + rm, g + gm, b + bm)
34.         LINE (x + i, y + i)-(x + wide - i, y + tall - i), k, B
35.     NEXT
36.     PAINT (x + i, y + i), k
37.     COLOR _RGB32(r, g, b), 0
38.     _PRINTSTRING (x + (wide - _PRINTWIDTH(caption$)) / 2, y + (tall - _FONTHEIGHT) / 2), caption$
39.     Button_HW = _COPYIMAGE(t, 33)
40.     _FREEIMAGE t
41.  
42.     _DEST Dest
43. END SUB
44.  

[Pete]

Hmm... Something like this I might consider. I'd have to play around with line and color statements a bit, to get everything I want. I would have to look into mouse detection, too. As you can see by the flashing > < brackets in the demo. There should be some determinable ratio between the putimage and locate values.

Code: QB64: [Select]

1. 'Gray buttons
2. Gdown = Button_HW(106, 26, 150, 150, 150, -7, -7, -7, "Whole Word") 'down
3. COLOR 14 + 16, 0
4. LOCATE 7, 34: PRINT ">             <"
5. LOCATE 8, 34: PRINT ">             <"
6. DO
7.     _PUTIMAGE (271, 98), Gdown
8.     _LIMIT 30
9.     _DISPLAY
10. LOOP UNTIL _KEYHIT
11.  
12. FUNCTION Button_HW (wide, tall, r, g, b, rc, gc, bc, caption$)
13.     DIM k AS _UNSIGNED LONG, d AS _UNSIGNED LONG, bg AS _UNSIGNED LONG, t AS _UNSIGNED LONG
14.     Dest = _DEST
15.  
16.     t = _NEWIMAGE(wide, tall, 32)
17.     _DEST t
18.     FOR i = 0 TO 10
19.         rm = rm + rc
20.         gm = gm + gc
21.         bm = bm + bc
22.         k = _RGB32(r + rm, g + gm, b + bm)
23.         LINE (x + i, y + i)-(x + wide - i, y + tall - i), k, B
24.     NEXT
25.     PAINT (x + i, y + i), k
26.     COLOR _RGB32(r, g, b), 0
27.     _PRINTSTRING (x + (wide - _PRINTWIDTH(caption$)) / 2, y + (tall - _FONTHEIGHT) / 2), caption$
28.     Button_HW = _COPYIMAGE(t, 33)
29.     _FREEIMAGE t
30.  
31.     _DEST Dest
32. END SUB
33.