Page 1 of 1

GradientButton, set 2 colours and the background blends

Posted: Friday 3rd September 2021 8:44am
by 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

Re: GradientButton, set 2 colours and the background blends

Posted: Friday 3rd September 2021 10:45am
by 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))


Re: GradientButton, set 2 colours and the background blends

Posted: Friday 3rd September 2021 1:44pm
by BruceSteers
PJBlack wrote:
Friday 3rd 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 :)

Re: GradientButton, set 2 colours and the background blends

Posted: Friday 3rd September 2021 3:36pm
by 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 :-)

Re: GradientButton, set 2 colours and the background blends

Posted: Sunday 5th September 2021 1:02am
by 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

Re: GradientButton, set 2 colours and the background blends

Posted: Sunday 5th September 2021 10:29am
by 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!

Image

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

Re: GradientButton, set 2 colours and the background blends

Posted: Tuesday 9th August 2022 7:31pm
by 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...

Re: GradientButton, set 2 colours and the background blends

Posted: Friday 12th August 2022 12:22pm
by 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.

Re: BrushButton, Images or gradients for button background

Posted: Wednesday 24th August 2022 10:50am
by 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. :D

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
BrushButton.png (80.34 KiB) Viewed 537 times