GradientButton, set 2 colours and the background blends

[BruceSteers]

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

[PJBlack]

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]

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

[PJBlack]

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]

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

[cogier]

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!



Here is the image I used.

gradientbutton.png (14.3 KiB) Viewed 19224 times

[BruceSteers]

Am currently editing this to use the Paint.LinearGradient() method that I have only just discovered and not my own.

Gradient orientation can now be horizontal or vertical and ANY number of gradient colors can be used...

Todo:
Also add option to use Radial (circular) gradients.

Will upload soon...

[BruceSteers]

Okay then the upgraded version..

Additions/Changes...
ColorHi and ColorLo have been replaced with Color1, Color2, Color3, Color4

Color1, Color2, Color3, Color4 are a way to simply set up to 4 colors easily in the IDE designer using the color selection GUI.

GradientButton.ColorNames As String[]
A list of names that match gambas color names without the Color. prefix, so Red, Yellow, etc , using this will override Color1, Color2, etc

GradientButton.ColorValues As Integer[]
A list of color values, using this will override ColorNames and Color1, Color2, etc

With code you can easily hit Ctrl-Shift-C to open the color selector and insert the "&" prefixed return value.
eg. GradientButton1.ColorValues = [&FFFF00, &FF3FFF, &FF7F00, &9FFFCF]

GradientButton.GetColors(Names As Boolean) As Variant[]
this function returns all the preset gambas color values
using the "Names" switch will return the Names not the values
The Test app uses this command and uses ALL the gambas preset colors for GradientButton3 (the 256px image one)

GradientButton.Orientation
Button can be horizontal or vertical gradient, default is vertical top to bottom

GradientButton.ColorPoints As String[]
Set stop points for the gradient colors, A stop point is a value between 0 and 1 that defines the positions the colors, eg 0.5 is center.
if no points are given the points will be equally divided.


Todo:

Radial Gradients.

Enable setting custom gradient coordinates.

[BruceSteers]

Right things changed track a bit.

I was directed towards the ReportBrush.class while trying to find a way to be able to manage the Gradients in the IDE.

There is already a gradient editor in the IDE with the ReportBrush and I only had to import the ReportBrush.class from gb.report2 to use it.

With ReportBrush you can set the Paint.Brush to one of Color, Image, Linear or Radial gradient.

So i have made this new BrushButton use that instead.

The added bonus is you can alternatively use an image as the button background.

Plus radial gradients are also possible now

There's an option to use GUIBorder not the black/white hand drawn one. (2 of the buttons in the image use that)

Can be a Toggle button or not.

Not fully tested/finished yet but it's sure begun

BrushButton.png (80.34 KiB) Viewed 16210 times