Author Topic: Some buttons  (Read 2090 times)

0 Members and 1 Guest are viewing this topic.

Offline SMcNeill

  • QB64 Developer
  • Forum Resident
  • Posts: 3972
    • View Profile
    • Steve’s QB64 Archive Forum
Some buttons
« 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.
https://github.com/SteveMcNeill/Steve64 — A github collection of all things Steve!

Offline Dav

  • Forum Resident
  • Posts: 792
    • View Profile
Re: Some buttons
« Reply #1 on: February 05, 2021, 11:55:40 am »
Well this is handy!  Throwing it in my Steve's toolbox folder.

Thanks for sharing.

- Dav

Offline SMcNeill

  • QB64 Developer
  • Forum Resident
  • Posts: 3972
    • View Profile
    • Steve’s QB64 Archive Forum
Re: Some buttons
« Reply #2 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.
 
« Last Edit: February 05, 2021, 12:11:10 pm by SMcNeill »
https://github.com/SteveMcNeill/Steve64 — A github collection of all things Steve!

Offline Pete

  • Forum Resident
  • Posts: 2361
  • Cuz I sez so, varmint!
    • View Profile
Re: Some buttons
« Reply #3 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
Want to learn how to write code on cave walls? https://www.tapatalk.com/groups/qbasic/qbasic-f1/

Offline SMcNeill

  • QB64 Developer
  • Forum Resident
  • Posts: 3972
    • View Profile
    • Steve’s QB64 Archive Forum
Re: Some buttons
« Reply #4 on: February 05, 2021, 04:40:14 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.  
  9.     COLOR 15 + 16 'bright white and blink
  10.     PRINT "HELLO WORLD, I'M STILL IN SCREEN 0!"
  11.     _PUTIMAGE (100, 100), Gup
  12.     _PUTIMAGE (150, 100), Gdown
  13.     _PUTIMAGE (100, 200), Lup
  14.     _PUTIMAGE (150, 200), Ldown
  15.     _LIMIT 30
  16.     _DISPLAY
  17.  
  18.  
  19.  
  20.  
  21. FUNCTION Button_HW (wide, tall, r, g, b, rc, gc, bc, caption$)
  22.     DIM AS _UNSIGNED LONG k, d, bg, t
  23.     Dest = _DEST
  24.  
  25.     t = _NEWIMAGE(wide, tall, 32)
  26.     _DEST t
  27.     FOR i = 0 TO 10
  28.         rm = rm + rc
  29.         gm = gm + gc
  30.         bm = bm + bc
  31.         k = _RGB32(r + rm, g + gm, b + bm)
  32.         LINE (x + i, y + i)-(x + wide - i, y + tall - i), k, B
  33.     NEXT
  34.     PAINT (x + i, y + i), k
  35.     COLOR _RGB32(r, g, b), 0
  36.     _PRINTSTRING (x + (wide - _PRINTWIDTH(caption$)) / 2, y + (tall - _FONTHEIGHT) / 2), caption$
  37.     Button_HW = _COPYIMAGE(t, 33)
  38.     _FREEIMAGE t
  39.  
  40.     _DEST Dest
  41.  
https://github.com/SteveMcNeill/Steve64 — A github collection of all things Steve!

Offline Pete

  • Forum Resident
  • Posts: 2361
  • Cuz I sez so, varmint!
    • View Profile
Re: Some buttons
« Reply #5 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 ">             <"
  6.     _PUTIMAGE (271, 98), Gdown
  7.     _LIMIT 30
  8.     _DISPLAY
  9.  
  10. FUNCTION Button_HW (wide, tall, r, g, b, rc, gc, bc, caption$)
  11.     Dest = _DEST
  12.  
  13.     t = _NEWIMAGE(wide, tall, 32)
  14.     _DEST t
  15.     FOR i = 0 TO 10
  16.         rm = rm + rc
  17.         gm = gm + gc
  18.         bm = bm + bc
  19.         k = _RGB32(r + rm, g + gm, b + bm)
  20.         LINE (x + i, y + i)-(x + wide - i, y + tall - i), k, B
  21.     NEXT
  22.     PAINT (x + i, y + i), k
  23.     COLOR _RGB32(r, g, b), 0
  24.     _PRINTSTRING (x + (wide - _PRINTWIDTH(caption$)) / 2, y + (tall - _FONTHEIGHT) / 2), caption$
  25.     Button_HW = _COPYIMAGE(t, 33)
  26.     _FREEIMAGE t
  27.  
  28.     _DEST Dest
  29.  
Want to learn how to write code on cave walls? https://www.tapatalk.com/groups/qbasic/qbasic-f1/