AutoHotkey Community

It is currently May 27th, 2012, 8:45 am

All times are UTC [ DST ]




Post new topic Reply to topic  [ 21 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: May 23rd, 2006, 10:45 am 
Offline
User avatar

Joined: December 26th, 2005, 4:40 pm
Posts: 8776
Quote:
How to Simulate a Linear Gradient ? - Part 1 & 2
http://www.autohotkey.com/forum/viewtopic.php?p=61081#61081

What is a Linear Gradient?

Image

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 Gradient
How was the Gradient fill effected?

    Copy - Paste - Try example:
Code:
IfNotExist, bg.bmp
URLDownloadToFile
, http://autohotkey.net/~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.

http://autohotkey.net/~goyyah/Tips-N-Tricks/Gradients/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.

    Image

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:

  • Create a 2 pixel bitmap (1 pixel wide and 2 pixel tall) for a Vertical Linear Gradient.
  • Create a 2 pixel bitmap (2 pixel wide and 1 pixel tall) for a Horizontal Linear Gradient.
  • Select the Top/Bottom (or) Left/Right colors. A bit of creativity is required.
  • Now add it with "Gui, Add, Picture" command and use w & h options to stretch it to the required size.
  • This stretching creates the Gradient effect!
  • Unique Gradients: (256*256*256) * (256*256*256) = ??? Never mind! I am poor in Mathematics. :(
  • You may also use the same technique to create colorful vertical / horizontal lines.
  • If you do not have Active Desktop enabled, you may use these bitmaps as stretched Wallpapers.
  • 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.
  • Important Styles that can be used with "Gui, Add, Picture"
    • E0x200 for Sunken Button effect.
    • 0x400000 for Raised Button effect.
    • Border to wear a thin black line around the Picture.

    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.

    Image----------Image


    Image----------Image


    Image----------Image


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

Image
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.

An example for Horizontal Linear Gradient:

Quote:
OSD Volume Control (Added 24-May-2006)
Image

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



* End of Part 1 * :D :D


Quote:
PART 2: ( Added: 25 May 2006 )

Dynamic Creation of a BITMAP Gradient with CreateBMPGradient()

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



CreateBMPGradient(FileName, ColorCode1, ColorCode2, Vertical)

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

    • Note: A BITMAP File stores the Picture upside down.
      Hence, Bottom/Left Color Code gets priority in Parameter Rank.
    Example: Gui, Add, Picture, x0 y0 w640 h480, % CreateBMP("Bg.bmp","000000","0000FF",1)
Copy / Paste / Try Example :

Code:
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!


Last edited by SKAN on June 16th, 2008, 7:30 am, edited 7 times in total.

Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: May 23rd, 2006, 11:38 am 
Offline
User avatar

Joined: August 11th, 2004, 1:47 am
Posts: 5347
Location: UK
Very interesting! I never knew that bitmaps can be used in such a way.

Goyyah wrote:
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.

_________________
GitHubScriptsIronAHK Contact by email not private message.


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: May 23rd, 2006, 11:43 am 
Offline

Joined: December 27th, 2005, 1:46 pm
Posts: 6837
Location: France (near Paris)
[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.

_________________
Image vPhiLho := RegExReplace("Philippe Lhoste", "^(\w{3})\w*\s+\b(\w{3})\w*$", "$1$2")


Last edited by PhiLho on May 23rd, 2006, 1:55 pm, edited 1 time in total.

Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: May 23rd, 2006, 12:41 pm 
Offline
User avatar

Joined: December 26th, 2005, 4:40 pm
Posts: 8776
Dear Titan, :)

Titan wrote:
Goyyah wrote:
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, :)

_________________
URLGet - Internet Explorer based Downloader
StartEx - Portable Shortcut Link


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: May 23rd, 2006, 2:17 pm 
Offline

Joined: December 27th, 2005, 1:46 pm
Posts: 6837
Location: France (near Paris)
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.

_________________
Image vPhiLho := RegExReplace("Philippe Lhoste", "^(\w{3})\w*\s+\b(\w{3})\w*$", "$1$2")


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: May 23rd, 2006, 5:02 pm 
Offline

Joined: July 12th, 2005, 1:21 pm
Posts: 633
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

_________________
AHK-Icon-Changer
AHK-IRC
deutsches Forum


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: May 23rd, 2006, 7:59 pm 
Offline
User avatar

Joined: December 26th, 2005, 4:40 pm
Posts: 8776
Thalon wrote:
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! :D

Dear PhiLho, :)

You wrote:


I saw it. Very nice effect!

You wrote:
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, :)

_________________
URLGet - Internet Explorer based Downloader
StartEx - Portable Shortcut Link


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: May 23rd, 2006, 8:13 pm 
Offline
User avatar

Joined: December 26th, 2005, 4:40 pm
Posts: 8776
Title post has been updated:

--> An example for Horizontal Linear Gradient
  • OSD Volume Control (Added 24-May-2006)


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: May 24th, 2006, 9:56 am 
Offline
User avatar

Joined: December 26th, 2005, 4:40 pm
Posts: 8776
Dear PhiLho, :)

In your Post

You wrote:
[EDIT] I wrote non-sense!
Note that if you use AltSubmit, you won't have gradient, so this trick works mostly with [b]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 BMP is very simple and we could easily create one dynamically.

Regards, :)

_________________
URLGet - Internet Explorer based Downloader
StartEx - Portable Shortcut Link


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: May 24th, 2006, 8:37 pm 
Offline
User avatar

Joined: December 26th, 2005, 4:40 pm
Posts: 8776
Title post has been updated:

Dynamic Creation of a BITMAP Gradient with CreateBMPGradient()


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: January 16th, 2007, 8:23 am 
Offline
User avatar

Joined: December 26th, 2005, 4:40 pm
Posts: 8776
In a PM, AngieX wrote:
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:

Code:
 

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

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

Sincerely, Angie.

RE: How to Simulate a Linear Gradient ? - Part 1 & 2
http://www.autohotkey.com/forum/viewtop ... 1081#61081


Dear Angie, :)

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

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


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: January 16th, 2007, 8:54 am 
Offline

Joined: November 26th, 2006, 8:10 pm
Posts: 77
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%


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: January 16th, 2007, 11:22 am 
Offline
User avatar

Joined: December 26th, 2005, 4:40 pm
Posts: 8776
AngieX wrote:
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.

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

Code:
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% vMyPic, %GradientFile%
Gui, Show, , AngieX
Return

; Changing the background
+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)


GuiClose:
GuiEscape:
 ExitApp
Return

#Include BitmapGradient.ahk


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

:)


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: January 24th, 2007, 12:12 am 
Offline

Joined: November 26th, 2006, 8:10 pm
Posts: 77
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.


Report this post
Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: January 28th, 2007, 10:33 pm 
Offline
User avatar

Joined: December 26th, 2005, 4:40 pm
Posts: 8776
AngieX wrote:
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.

AngieX wrote:
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.


Report this post
Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 21 posts ]  Go to page 1, 2  Next

All times are UTC [ DST ]


Who is online

Users browsing this forum: No registered users and 0 guests


You can post new topics in this forum
You can reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Powered by phpBB® Forum Software © phpBB Group