GradientButton, set 2 colours and the background blends

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

GradientButton, set 2 colours and the background blends

Post by BruceSteers » Friday 3rd 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 5th September 2021 7:19pm, edited 3 times in total.

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

Re: GradientButton, set 2 colours and the background blends

Post by PJBlack » 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))


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

Re: GradientButton, set 2 colours and the background blends

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

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 :)

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

Re: GradientButton, set 2 colours and the background blends

Post by PJBlack » Friday 3rd 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: 887
Joined: Thursday 23rd July 2020 5:20pm

Re: GradientButton, set 2 colours and the background blends

Post by BruceSteers » Sunday 5th 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 5th September 2021 7:28pm, edited 2 times in total.

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

Re: GradientButton, set 2 colours and the background blends

Post by cogier » Sunday 5th 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 3559 times

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

Re: GradientButton, set 2 colours and the background blends

Post by BruceSteers » Tuesday 9th August 2022 7:31pm

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...
Attachments
GradB.png
GradB.png (86.1 KiB) Viewed 707 times

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

Re: GradientButton, set 2 colours and the background blends

Post by BruceSteers » Friday 12th August 2022 12:22pm

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.
Attachments
GradientButton-2.0.tar.gz
(34.9 KiB) Downloaded 29 times

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

Re: BrushButton, Images or gradients for button background

Post by BruceSteers » Wednesday 24th August 2022 10:50am

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 545 times
Attachments
BrushButton-1.0.1.tar.gz
(827.14 KiB) Downloaded 16 times
The Brush editor in the IDE
The Brush editor in the IDE
Screenshot at 2022-08-24 11-54-32.png (212.51 KiB) Viewed 554 times

Post Reply