22 replies to this topic

[SKAN]

How to Simulate a Linear Gradient ? - Part 1 & 2
http://www.autohotke...p?p=61081#61081

What is a Linear Gradient?



There is something familiar about the snapshot above!
Does it look similar to an Installer's background?

The top color starts from the Brightest blue and gradually ends with a Black color at the bottom...
...and this transition between the two colors gives it a technical name:

Vertical Linear Gradient.. and if the Color transition was from left to right, we can call it

Horizontal Linear GradientHow was the Gradient fill effected?

Copy - Paste - Try example:

IfNotExist, bg.bmp
URLDownloadToFile
, https://ahknet.autohotkey.com/~goyyah/Tips-N-Tricks/Gradients/bg.bmp
, bg.bmp

Gui, Margin, 0,0
Gui, Add, Picture, x0 y0 w640 h480, bg.bmp
Gui, Show, AutoSize,  Simulating Vertical Linear Gradient [2 Pixel Bitmap]
Return

GuiClose:
GuiEscape:
 ExitApp
Return

The bg.bmp is the picture file that creates the effect.
bg.bmp is a small image file (mere 62 bytes!!)...

It is so small that it can be used as a period at the end of this line.

https://ahknet.autoh...radients/bg.bmp

Can you see that it is a two coloured picture? Maybe with a magnifier!

Instead,

Take a look at the animation below simulating a 32:1 magnification of bg.bmp.

A small 1x2, 2 pixel Bitmap file is stretched to an enormous size of 640x480 pixels to create the Gradient fill effect

That is it!

Notes:

[*:2m52mtfa]Create a 2 pixel bitmap (1 pixel wide and 2 pixel tall) for a Vertical Linear Gradient.
[*:2m52mtfa]Create a 2 pixel bitmap (2 pixel wide and 1 pixel tall) for a Horizontal Linear Gradient.
[*:2m52mtfa]Select the Top/Bottom (or) Left/Right colors. A bit of creativity is required.
[*:2m52mtfa]Now add it with "Gui, Add, Picture" command and use w & h options to stretch it to the required size.
[*:2m52mtfa]This stretching creates the Gradient effect!

[*:2m52mtfa]Unique Gradients: (256*256*256) * (256*256*256) = ??? Never mind! I am poor in Mathematics.
[*:2m52mtfa]You may also use the same technique to create colorful vertical / horizontal lines.

[*:2m52mtfa]If you do not have Active Desktop enabled, you may use these bitmaps as stretched Wallpapers.

[*:2m52mtfa]You will not be able to create these images with Paint.exe. An advanced Image editor will be required.
I was using PaintShop Pro to create these Bitmaps. Now, I have my own BITMAP Gradient Maker.

[*:2m52mtfa]Important Styles that can be used with "Gui, Add, Picture"
[*:2m52mtfa] E0x200 for Sunken Button effect.
[*:2m52mtfa] 0x400000 for Raised Button effect.
[*:2m52mtfa] Border to wear a thin black line around the Picture.[/list]
Vertical Linear Gradients - Snapshots

Following are snapshots of 2 Pixel bitmaps stretched at 280x210 on a "Gui, -Caption" canvas.
The Text seen on them are the pair of Hex Color Codes used to create them.
----------


----------


----------

gb1.ahk is an example that simulates both Vertical and Horizontal Gradients.


Note: See the Pillars on the left/right side on the GUI. I have simulated a Horizontal Gradient effect

The following posts contains information on the visual effects seen in the snapshot.

[*:2m52mtfa]How to Simulate a Graphical Button in a GUI ?
[*:2m52mtfa]How to Display Shadowed Text in a GUI ?An example for Horizontal Linear Gradient:

OSD Volume Control (Added 24-May-2006)


Here is the Code: OSD_VOL_Gradient.ahk
You may view it: OSD_VOL_Gradient.ahk.txt

* End of Part 1 *

PART 2: ( Added: 25 May 2006 )

Dynamic Creation of a BITMAP Gradient with CreateBMPGradient()

Foreword:

I owe my deepest gratitude to Laszlo & PhiLho for the contribution to the
AHK Community with their Binary Read/Write Routines.

Visit the topics:
[*:2m52mtfa]Binary file I/O with binary buffers - posted by Laszlo
[*:2m52mtfa]Binary file reading and writing - posted by PhiLho

CreateBMPGradient(FileName, ColorCode1, ColorCode2, Vertical)

[*:2m52mtfa]Param1: File name to be created
[*:2m52mtfa]Param2: A Valid Hex Color code for the Bottom (or) Left pixel. ( in RGB )
[*:2m52mtfa]Param3: A Valid Hex Color code for the Top (or) Right pixel. ( in RGB )
[*:2m52mtfa]Param4: 0 (or) 1 . Vertical=1 / Horizontal=0

[*:2m52mtfa] Note: A BITMAP File stores the Picture upside down.
Hence, Bottom/Left Color Code gets priority in Parameter Rank.[/list]Example: Gui, Add, Picture, x0 y0 w640 h480, % CreateBMP("Bg.bmp","000000","0000FF",1)[*:2m52mtfa]Download the Include File : BitmapGradient.ahk
[*:2m52mtfa]View the code: BitmapGradient.ahk.txt[/list]Copy / Paste / Try Example :

GradientFile=Bg.bmp
IfNotExist, %GradientFile%
   GradientFile:=CreateBMPGradient(GradientFile,"000000","FF0000",1)

Gui, Margin, 0,0 
Gui, Add, Picture, x0 y0 w640 h480, %GradientFile%
Gui, Show, AutoSize,  Simulating Vertical Linear Gradient [2 Pixel Bitmap] 
Return 

GuiClose: 
GuiEscape: 
 ExitApp 
Return

#Include BitmapGradient.ahk

Part 2 Incomplete! More examples to be posted!

[polyethene]

Very interesting! I never knew that bitmaps can be used in such a way.

Gradient effect is not simulated in HTML

Internet Explorer can render gradients. SVG (partially supported in Bon Echo/FF2, IE7 and most newest browsers) can also display scalable gradient images (maybe PNG as well). Don't forget that some 98%-99% of Windows users have Macromedia Flash 5+ installed (shipped with Win XP I think) and Flash uses vector graphics.

[PhiLho]

[EDIT] I wrote non-sense!
Note that if you use AltSubmit, you won't have gradient, so this trick works mostly with BMP images (not a problem as these images are very small)!

Goyyah: I like this topic, but changing the subject makes hard to search the old sub-topics (where did I saw this text-with-shadow effect?). You don't have to change the way you manage it, but I wanted to draw attention to the problem.

[SKAN]

Dear Titan,

Gradient effect is not simulated in HTML

Internet Explorer can render gradients. SVG (partially supported in Bon Echo/FF2, IE7 and most newest browsers) can also display scalable gradient images (maybe PNG as well). Don't forget that some 98%-99% of Windows users have Macromedia Flash 5+ installed (shipped with Win XP I think) and Flash uses vector graphics.

Thanks for the information!

I have been using outdated software .
I tried stretching a 1x2 JPEG in a (table) cell (Dreamweaver 3) and it did not result in a gradient fill!.
Even as a Stretched Wallpaper, it did not display a gradient fill with Active Desktop enabled.

My OS is W2K - SP4

Regards,

[PhiLho]

You inspired me for an improvement of background color for texts.

@Goyyah: I wasn't clear in my remark on the topic: when I wrote "Where did I saw this text-with-shadow effect?", it is the kind of question I ask myself when I take a quick look at the list of topics in the Scripts & Functions section or even in a Search result! Hence the remark.

@Titan: It seems that Goyyah tried to put something like <img src="Images/2pixelsH.bmp" width="100" height="100" /> in an HTML file and got two distinct colors.
Note that SVG is already supported (perhaps only partially) by Firefox 1.5.

[Thalon]

Looks nice!
I used a 2x2 Pixel-Bitmap already to draw a flexibel surrounding border (like the highlight-option in Winspector). But this scaling ability is new for me

Thalon

[SKAN]

Looks nice!
I used a 2x2 Pixel-Bitmap already to draw a flexibel surrounding border (like the highlight-option in Winspector). But this scaling ability is new for me

Thanks Thalon!

Dear PhiLho,

an improvement of background color for texts.

I saw it. Very nice effect!

I wasn't clear in my remark on the topic: when I wrote "Where did I saw this text-with-shadow effect?", it is the kind of question I ask myself when I take a quick look at the list of topics in the Scripts & Functions section or even in a Search result! Hence the remark.

I get it now! .

Please wait for the Part 2. I will be requiring your valuable opinion.

Regards,

[SKAN]

Title post has been updated:

--> An example for Horizontal Linear Gradient[*:2g0iu2a4]OSD Volume Control (Added 24-May-2006)

[SKAN]

Dear PhiLho,

In your Post

[EDIT] I wrote non-sense!
Note that if you use AltSubmit, you won't have gradient, so this trick works mostly with BMP images (not a problem as these images are very small)!

Yes! I just noticed :shock:. I was not interested in JPG - because for this particular resolution (1x2) , BMP was sized @ 62 byes whereas JPG was 512 bytes. Also the file format of [b]BMP is very simple and we could easily create one dynamically.

Regards,

[SKAN]

Title post has been updated:

Dynamic Creation of a BITMAP Gradient with CreateBMPGradient()

[SKAN]

HI - I really liked your Linear Gradient work. It is very very nice and professional. Can you please describe or even show me if you feel happy to oblige - to how I can start with a basic AHK script using this concept. The idea I have is a gradiant square like yours between any two color values. It should be a square I can define the (w)idth and (h)eight to. I would like to basically start with a play values like:

var amount = 50% 
var width = 250px
var height = 250px
var start_color = 0208FF
var end_color = FFFFFF

{then draw 250x250 with 50% split gradient between start & end_color } 

Can you please help me please with this? You would be the greatest. I have some ideas how to build this into some charting demographics and just getting my feet wet writing this cool script

Have wonderful day and thank you for being out there :-)

Sincerely, Angie.

RE: How to Simulate a Linear Gradient ? - Part 1 & 2
<!-- m -->http://www.autohotke... ... 1081#61081<!-- m -->

Dear Angie,

I am not much clear about your requirement, but try the following code and then post further queries:

var_width = 250
var_height = 250
var_start_color = 0208FF   
var_end_color   = FFFFFF   

;{then draw 250x250 with 50% split gradient between start & end_color } 

GradientFile=Bg.bmp 
IfNotExist, %GradientFile% 
   GradientFile:=CreateBMPGradient(GradientFile,var_start_color,var_end_color,1) 

Gui, Margin, 0,0 
Gui, Add, Picture, x0 y0 w%var_width% h%var_height%, %GradientFile% 
Gui, Show, , AngieX
Return 

GuiClose: 
GuiEscape: 
 ExitApp 
Return 

#Include BitmapGradient.ahk

The above code requires: BitmapGradient.ahk

My guess is that you are interested in creating some bar chart.. and that will be very interesting . Do not hesitate to post further queries.

Regards,

[AngieX]

I like how I am incorporated into the GUI :-) I feel famous :oops:

Great looking code. May I ask, how this could be tweaked to do two things:

1) Have a var_input = %, so the 50% is flexible

2) To turn this into a callable function, so the display is updated when the function is called. I envision something like UpdateGraph(var_width, var_height, var_start_color, var_end_color, var_input). I don't know how piped in variables/functions perciely work under AHK (I can think JavaScript :-). This is really giving me quick-ramp up to its protocols so I apprecaite your descriptions so much. So I would envision this to be called like UpdateGraph(250,250,0208FF,FFFFFF,50%) <- I know that is wrong all-together, but u get the idea I hope

That will make it real flexible, simple and modular. Hopefully you think that is right software protocol.

Thanks for advancing my original idea!

-AngieX%

[SKAN]

1) Have a var_input = %, so the 50% is flexible

No. That is not possible CreateBMPGradient()! That function has been hardcoded to create a 2 pixel bitmap. Each pixel will occupy half the control 50:50. If you want 33:66, then the function has to re-written to accomodate 3 pixels. Say for blue n black it would be blue+black+black, and effectively blue would occupy 33.33% and black 66.66%

Hope you get that right.

2) To turn this into a callable function, so the display is updated when the function is called. I envision something like UpdateGraph(var_width, var_height, var_start_color, var_end_color, var_input).

Writing such a wrapper function id redundant, IMHO. Just assign a variable (like MyPic ) to the picture control and call the GuiControl command to change the picture ( or its dimension )

Try this:

var_width = 250
var_height = 250
var_start_color = 0208FF   
var_end_color   = FFFFFF   

GradientFile=Bg.bmp 
IfNotExist, %GradientFile% 
   GradientFile:=CreateBMPGradient(GradientFile,var_start_color,var_end_color,1) 

Gui, Margin, 0,0 
Gui, Add, Picture, x0 y0 w%var_width% h%var_height% v[color=red]MyPic[/color], %GradientFile% 
Gui, Show, , AngieX
Return 

; Changing the background
[color=red]+F2::GuiControl,,MyPic, % CreateBMPGradient("bg.bmp","000000","FF0000",1)
+F3::GuiControl,,MyPic, % CreateBMPGradient("bg.bmp","640067","DC6C00",1)
+F4::GuiControl,,MyPic, % CreateBMPGradient("bg.bmp","004080","808040",1)
+F5::GuiControl,,MyPic, % CreateBMPGradient("bg.bmp","804040","EDC47E",1)
+F6::GuiControl,,MyPic, % CreateBMPGradient("bg.bmp","000000","FF8000",1)
+F7::GuiControl,,MyPic, % CreateBMPGradient("bg.bmp","000000","00FF00",1)
+F8::GuiControl,,MyPic, % CreateBMPGradient("bg.bmp","000000","0000FF",1)
+F9::GuiControl,,MyPic, % CreateBMPGradient("bg.bmp","000000","DECADE",1)[/color]

GuiClose: 
GuiEscape: 
 ExitApp 
Return 

#Include BitmapGradient.ahk

Try Shift+functions to test the changing of background gradient.

[AngieX]

I am trying to cram this all in my head, but do follow your logic soundly!

two questions -

What does 1 signify?
% CreateBMPGradient("bg.bmp","000000","FF0000",1) < what is 1?

Can this be further explored, the idea to have a % input - to basically have a BMP assignment, for 1%, 2% to 100%. Just 1-100 to keep it simple. Each one has a mathamatatial computation to some BMP configuration, then its pumped into BMP.

So, 16% would flow like:
% CreateBMPGradient("bg.bmp","16%","000000","FF0000",1)

I am way way over my head actually writing it out, but maybe if I can see some ways you write, I can follow the rythum for improving this object. I have some other ideas to make this more interesting, like a decay? -- so if a 16% was pumped in, then a 42% three seconds later, it will kick back up, but not in a fast skippy way. Kinda like a very nice car stereo equalizer.... so it look real smooth, remain live and programmable. Do you see where I am going with this? I think it will be fun to mess around with.

[SKAN]

What does 1 signify?
% CreateBMPGradient("bg.bmp","000000","FF0000",1) < what is 1?

1 creates a vertical stack of two pixels whereas 0 creates a horizontal one.
The parameters have been explained in the original post.

Can this be further explored, the idea to have a % input - to basically have a BMP assignment, for 1%, 2% to 100%. Just 1-100 to keep it simple. Each one has a mathamatatial computation to some BMP configuration, then its pumped into BMP.

Well.. My function creates only a 2 pixel bitmap, which - when - stretched to abnormal limits - creates a gradient effect. It is a kind of simulation. For your requirements, You might have to create a full sized bitmap to achieve proper results which is beyond the scope of CreateBMPGradient() function.

I will give it a try when I have time and post again.

Regards,

PS: Sorry for the late reply. Offlate, I have not been frequenting the forum.