Text Only | Text with Attachments

QB64.org Forum

Active Forums => Programs => Topic started by: SMcNeill on February 05, 2021, 06:43:52 am

Title: Some buttons
Post by: SMcNeill on February 05, 2021, 06:43:52 am
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

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.
Title: Re: Some buttons
Post by: Dav on February 05, 2021, 11:55:40 am
Well this is handy!  Throwing it in my Steve's toolbox folder.

Thanks for sharing.

- Dav
Title: Re: Some buttons
Post by: SMcNeill on February 05, 2021, 12:02:49 pm
If you take a moment and look in my Virtual Keyboard topic, you can see a picture of these buttons in action.
 
Title: Re: Some buttons
Post by: Pete on February 05, 2021, 04:30:18 pm
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
Title: Re: Some buttons
Post by: SMcNeill on February 05, 2021, 04:40:14 pm
Quote from: Pete on February 05, 2021, 04:30:18 pm
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.  
  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
  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
  44.  
Title: Re: Some buttons
Post by: Pete on February 05, 2021, 06:53:39 pm
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 ">             <"
  7.     _PUTIMAGE (271, 98), Gdown
  8.     _LIMIT 30
  9.     _DISPLAY
  11.  
  12. FUNCTION Button_HW (wide, tall, r, g, b, rc, gc, bc, caption$)
  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
  33.  
Text Only | Text with Attachments