GradientButton, set 2 colours and the background blends

Post your Gambas Components here.
Post Reply
BruceSteers
Posts: 766
Joined: Thursday 23rd July 2020 5:20pm

GradientButton, set 2 colours and the background blends

Post by BruceSteers » Friday 03rd September 2021 8:44am

I've been making this pretty little thing called a GradientButton

Set ColorHi and ColorLo and button bg will be a blend from Hi to Lo

On hover the color pulses
On MousePress the colors invert

Supports tabpress

Todo..
Support using & to make underscored shortcut keys
Activate properties of normal buttons like Default/Cancel/etc
Last edited by BruceSteers on Sunday 05th September 2021 7:19pm, edited 3 times in total.

User avatar
PJBlack
Posts: 165
Joined: Tuesday 09th June 2020 10:26pm
Location: Florstadt, Hessen, Germany

Re: GradientButton, set 2 colours and the background blends

Post by PJBlack » Friday 03rd September 2021 10:45am

if have a ugly black line on top of the button ...

get rid of it with:
  
[41 ]$hView.Border = Border.None
[42] $hView.Background = &Hffffffff&
and
[120] Style.PaintButton(2, 2, Paint.Width - 4, Paint.Height - 4, $Value, 0, False, If(Me.HasFocus, Color.SelectedBackground, Color.Default))


BruceSteers
Posts: 766
Joined: Thursday 23rd July 2020 5:20pm

Re: GradientButton, set 2 colours and the background blends

Post by BruceSteers » Friday 03rd September 2021 1:44pm

PJBlack wrote:
Friday 03rd September 2021 10:45am
if have a ugly black line on top of the button ...

get rid of it with:
  
[41 ]$hView.Border = Border.None
[42] $hView.Background = &Hffffffff&
and
[120] Style.PaintButton(2, 2, Paint.Width - 4, Paint.Height - 4, $Value, 0, False, If(Me.HasFocus, Color.SelectedBackground, Color.Default))


What's your system config?
I just loaded my Manjaro and it looked fine.

Border should not = True so should not need setting.
Paint.Button should be painted the maximum size of the view not a few pixels smaller to workaround issues of one desktop config.

that code might fix things on your system but will break thinks on all the others that it looks fine on.

Let me know your config so i can figure out what's causing the black line on your system because like i say i cannot see it on ANY of my other systems so i don't want to add code that adjusts the size of things, it won't look right on other systems.

Cheers for letting me know though :)

User avatar
PJBlack
Posts: 165
Joined: Tuesday 09th June 2020 10:26pm
Location: Florstadt, Hessen, Germany

Re: GradientButton, set 2 colours and the background blends

Post by PJBlack » Friday 03rd September 2021 3:36pm

fyi

Code: Select all

[System]
Gambas=3.16.90 6ae9c8f5c (master)
OperatingSystem=Linux
Kernel=5.10.60-1-MANJARO
Architecture=x86_64
Distribution=Manjaro Linux
Desktop=Cinnamon
Font="",72,9 (which is wrong ... should read Font="72",9
Scale=7
Theme=proxy
Language=de_DE.UTF-8
Memory=7836M
and i have bigger problems than a one pixel black line on top ... so i'm fine with that :-)

BruceSteers
Posts: 766
Joined: Thursday 23rd July 2020 5:20pm

Re: GradientButton, set 2 colours and the background blends

Post by BruceSteers » Sunday 05th September 2021 1:02am

Found the line on Manjaro cinnamon (Cheers)
Have updated the above archive.
decided to draw the border/box manually and not deal with theme at all :)

made some other mods like text shadowing
Last edited by BruceSteers on Sunday 05th September 2021 7:28pm, edited 2 times in total.

User avatar
cogier
Site Admin
Posts: 875
Joined: Wednesday 21st September 2016 2:22pm
Location: Guernsey, Channel Islands

Re: GradientButton, set 2 colours and the background blends

Post by cogier » Sunday 05th September 2021 10:29am

Excellent stuff Bruce. Do you ever sleep, he asks, looking at your posting times?

You can improve the IDE look by adding an image: -

1/. Create an image with all lower case name of your project, in this case 'gradientbutton.png'.
2/. Create a folder '.hidden/control' in the application folder.
3/. Put the image in the new folder.
4/. Restart Gambas.
5/. Et voila!

Image

Here is the image I used.
gradientbutton.png
gradientbutton.png (14.3 KiB) Viewed 2300 times

Post Reply