GradientButton, set 2 colours and the background blends

Post your must have Gambas Components/Controls/Classes/Modules here.
Post Reply
User avatar
BruceSteers
Posts: 1505
Joined: Thursday 23rd July 2020 5:20pm
Location: Isle of Wight
Contact:

GradientButton, set 2 colours and the background blends

Post 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
Last edited by BruceSteers on Sunday 5th September 2021 7:19pm, edited 3 times in total.
If at first you don't succeed , try doing something differently.
BruceS
User avatar
PJBlack
Posts: 184
Joined: Tuesday 9th June 2020 10:26pm
Location: Florstadt, Hessen, Germany

Re: GradientButton, set 2 colours and the background blends

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

User avatar
BruceSteers
Posts: 1505
Joined: Thursday 23rd July 2020 5:20pm
Location: Isle of Wight
Contact:

Re: GradientButton, set 2 colours and the background blends

Post 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 :)
If at first you don't succeed , try doing something differently.
BruceS
User avatar
PJBlack
Posts: 184
Joined: Tuesday 9th June 2020 10:26pm
Location: Florstadt, Hessen, Germany

Re: GradientButton, set 2 colours and the background blends

Post 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 :-)
User avatar
BruceSteers
Posts: 1505
Joined: Thursday 23rd July 2020 5:20pm
Location: Isle of Wight
Contact:

Re: GradientButton, set 2 colours and the background blends

Post 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
Last edited by BruceSteers on Sunday 5th September 2021 7:28pm, edited 2 times in total.
If at first you don't succeed , try doing something differently.
BruceS
User avatar
cogier
Site Admin
Posts: 1117
Joined: Wednesday 21st September 2016 2:22pm
Location: Guernsey, Channel Islands

Re: GradientButton, set 2 colours and the background blends

Post 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 10310 times
User avatar
BruceSteers
Posts: 1505
Joined: Thursday 23rd July 2020 5:20pm
Location: Isle of Wight
Contact:

Re: GradientButton, set 2 colours and the background blends

Post 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...
Attachments
GradB.png
GradB.png (86.1 KiB) Viewed 7458 times
If at first you don't succeed , try doing something differently.
BruceS
User avatar
BruceSteers
Posts: 1505
Joined: Thursday 23rd July 2020 5:20pm
Location: Isle of Wight
Contact:

Re: GradientButton, set 2 colours and the background blends

Post 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.
Attachments
GradientButton-2.0.tar.gz
(34.9 KiB) Downloaded 283 times
If at first you don't succeed , try doing something differently.
BruceS
User avatar
BruceSteers
Posts: 1505
Joined: Thursday 23rd July 2020 5:20pm
Location: Isle of Wight
Contact:

Re: BrushButton, Images or gradients for button background

Post 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 7296 times
Attachments
BrushButton-1.0.1.tar.gz
(827.14 KiB) Downloaded 258 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 7305 times
If at first you don't succeed , try doing something differently.
BruceS
Post Reply