Color Gradients

Applications, Games, Tools, User libs and useful stuff coded in PureBasic
Mesa
Enthusiast
Enthusiast
Posts: 345
Joined: Fri Feb 24, 2012 10:19 am

Color Gradients

Post by Mesa »

A small tool to understand how gradients work.

Code: Select all

;- Enum
Enumeration gadget
	
	#track1=1
	#track2
	#track3
	#track4
	#Option1
	#Option2
	#Option3
	#Option4
	#Option5
	
EndEnumeration

Global x1=0
Global y1=0
Global x2=200
Global y2=200
Global color00=$00FFFF
Global color10=$FF0000

;Globals
Global Dim imggdt(10)

Structure grd
	used.i
	colour.i
EndStructure

Global Dim clgrad.grd(10)
clgrad(10)\used=1
clgrad(10)\colour=color10
clgrad(0)\used=1
clgrad(0)\colour=color00

;- Procedures
Procedure drawme()
	Protected  level.f
	SetWindowTitle(0," ("+Str(x1)+","+Str(y1)+")"+" ("+Str(x2)+","+Str(y2)+")")
	
	StartDrawing(ImageOutput(10))
	Box(0, 0, 400, 200, $FFFFFF)
	
	DrawingMode(#PB_2DDrawing_Gradient) 
	ResetGradientColors()
	For i=0 To 10
		level=i/10
		If clgrad(i)\used=1
			GradientColor(level, clgrad(i)\colour)
			
		EndIf
	Next i
	
	BackColor(clgrad(10)\colour)
	FrontColor(clgrad(0)\colour)
	
	If GetGadgetState(9)
		LinearGradient(x1, y1, x2, y2) 
	ElseIf GetGadgetState(5)
		BoxedGradient(x1, y1, x2, y2)
	ElseIf GetGadgetState(6)
		CircularGradient(x1, y1, x2)
	ElseIf GetGadgetState(7)
		ConicalGradient(x1, y1, x2)
	ElseIf GetGadgetState(8)
		EllipticalGradient(x1, y1, x2, y2)
	EndIf
	Circle(100, 100, 100)   
	Box(200, 0, 200,200)
	
	DrawingMode(#PB_2DDrawing_Default )
	Circle(x1,y1,3,#Red)
	Circle(x2,y2,3,#Green)
	StopDrawing() 
	ImageGadget(0, 0, 0, 400, 200, ImageID(10))
	
	
	;
	StartDrawing(ImageOutput(11))
	Box(0, 0, 400, 200, $FFFFFF)
	DrawingMode(#PB_2DDrawing_Gradient)      
	ResetGradientColors()
	For i=0 To 10
		level=i/10
		If clgrad(i)\used=1
			GradientColor(level, clgrad(i)\colour)
			
		EndIf
	Next i
	
	BackColor(clgrad(10)\colour)
	FrontColor(clgrad(0)\colour)
	
	If GetGadgetState(9)
		LinearGradient(x1, y1, x2, y2) 
	ElseIf GetGadgetState(5)
		BoxedGradient(x1, y1, x2, y2)
	ElseIf GetGadgetState(6)
		CircularGradient(x1, y1, x2)
	ElseIf GetGadgetState(7)
		ConicalGradient(x1, y1, x2)
	ElseIf GetGadgetState(8)
		EllipticalGradient(x1, y1, x2, y2)
	EndIf   
	Box(0, 0, 200,200)   
	
	Box(200, 0, 200,200)
	DrawingMode(#PB_2DDrawing_Default )
	Circle(x1,y1,3,#Red)
	Circle(x2,y2,3,#Green)      
	StopDrawing() 
	ImageGadget(11, 0, 210, 400, 200, ImageID(11))
	
EndProcedure

Procedure makegradient(gadget)
	level.f=gadget/10
	Colour = ColorRequester()
	If Colour > -1
		z=CreateImage(#PB_Any,32,32)
		clgrad(gadget)\used=1
		clgrad(gadget)\colour=colour
		StartDrawing(ImageOutput(z))
		DrawingMode(0)
		Select gadget
			Case 0
				clbkg=Colour
				txt$="0.0"
				Box(0,0,32,32,Colour)
			Case 10
				clbkg=Colour
				Box(0,0,32,32,Colour)
				txt$="1.0"
				
			Default
				clbkg=Colour
				Box(0,0,32,32,clbkg)
				txt$="0."+Str(gadget)
				
		EndSelect
		Box(0,0,32,32,Colour)
		DrawText(16-TextWidth("0.0")/2,16-TextHeight("0")/2,txt$,#Black,clbkg)
		StopDrawing()
		
		SetGadgetState(imggdt(gadget), ImageID(z))
		
		
	EndIf
EndProcedure

Procedure reset(gadget)
	
	z=CreateImage(#PB_Any,32,32)
	
	
	StartDrawing(ImageOutput(z))
	DrawingMode(0)
	Select gadget
		Case 0
			clbkg=color00
			clgrad(gadget)\used=1
			clgrad(gadget)\colour=color00
			txt$="0.0"
			Box(0,0,32,32,clbkg)
		Case 10
			clbkg=color10
			clgrad(gadget)\used=1
			clgrad(gadget)\colour=color10
			Box(0,0,32,32,clbkg)
			txt$="1.0"
			
		Default
			clgrad(gadget)\used=0
			clgrad(gadget)\colour=#Gray
			clbkg=#Gray
			Box(0,0,32,32,clbkg)
			txt$="0."+Str(gadget)
			
	EndSelect
	
	DrawText(16-TextWidth("0.0")/2,16-TextHeight("0")/2,txt$,#Black,clbkg)
	StopDrawing()
	
	SetGadgetState(imggdt(gadget), ImageID(z))
EndProcedure


Macro  InitImages
	If CreateImage(10, 400, 200) And StartDrawing(ImageOutput(10))
		Box(0, 0, 400, 200, $FFFFFF)
		
		DrawingMode(#PB_2DDrawing_Gradient)      
		BackColor(color00)
		FrontColor(color10)
		
		LinearGradient(0, 0, 200, 200)    
		Circle(100, 100, 100)   
		LinearGradient(350, 100, 250, 100)
		; 		Circle(300, 100, 100)
		Box(200, 0, 200,200)
		
		StopDrawing() 
		ImageGadget(10, 0, 0, 400, 200, ImageID(10))
	EndIf
	
	If CreateImage(11, 400, 200) And StartDrawing(ImageOutput(11))
		Box(0, 0, 400, 200, $FFFFFF)
		
		DrawingMode(#PB_2DDrawing_Gradient)      
		BackColor(color00)
		FrontColor(color10)
		
		LinearGradient(0, 0, 200, 200)    
		Box(0, 0, 200,200)   
		LinearGradient(x1, y1, x2, y2)
		Box(200, 0, 200,200)
		;       
		StopDrawing() 
		ImageGadget(11, 0, 210, 400, 200, ImageID(11))
	EndIf
EndMacro


;- main
If OpenWindow(0, 0, 0, 800, 600, "Gradients", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
	
	InitImages
	
	TrackBarGadget(#track1,420,10,300,30,0,800,#PB_TrackBar_Ticks   )
	TrackBarGadget(#track2,420,50,300,30,0,800,#PB_TrackBar_Ticks   )
	TrackBarGadget(#track3,420,90,300,30,0,800,#PB_TrackBar_Ticks   )
	TrackBarGadget(#track4,420,120,300,30,0,800,#PB_TrackBar_Ticks  )
	GadgetToolTip(#track1,"X1")
	GadgetToolTip(#track2,"X2")
	GadgetToolTip(#track3,"Y1")
	GadgetToolTip(#track4,"Y2")
	SetGadgetState(#track3,200)
	SetGadgetState(#track4,200)
	
	FrameGadget(12,410,160,310,180,"Gradients")
	OptionGadget(#Option1,420,180,290,30,"BoxedGradient (x1, y1, x2, y2)")
	OptionGadget(#Option2,420,210,290,30,"CircularGradient (x1, y1, x2=Radius, y2=null)")
	OptionGadget(#Option3,420,240,290,30,"ConicalGradient (x1, y1, x2=Angle, y2=null)")
	OptionGadget(#Option4,420,270,290,30,"EllipticalGradient (x1, y1, x2=Rx, y2=RY")
	OptionGadget(#Option5,420,300,290,30,"LinearGradient (x1, y1, x2, y2)")
	SetGadgetState(#Option5,1)
	
	
	;imagegadgets
	For i= 0 To 10
		img=CreateImage(#PB_Any,32,32)
		StartDrawing(ImageOutput(img))
		Select i
			Case 0
				clbkg=color00
				txt$="0.0"
				Box(0,0,32,32,color00)
			Case 10
				Box(0,0,32,32,color10)
				txt$="1.0"
				clbkg=color10
			Default
				clbkg=#Gray 
				Box(0,0,32,32,clbkg)
				txt$="0."+Str(i)
		EndSelect
		DrawText(16-TextWidth("0.0")/2,16-TextHeight("0")/2,txt$,#Black,clbkg)
		StopDrawing()
		
		imggdt(i)=ImageGadget(#PB_Any,410+35*i,370,32,32,ImageID(img),#PB_Image_Border)
	Next i
	
	
	;- loop
	Repeat
		
		Event = WaitWindowEvent()
		
		Select Event
				
			Case #PB_Event_Gadget
				Select EventGadget()
						;trackbars
					Case #track1 
						x1= GetGadgetState(#track1)
						drawme()
						
					Case #track2
						y1= GetGadgetState(#track2)
						drawme()
					Case #track3
						x2= GetGadgetState(#track3)
						drawme()
					Case #track4
						y2= GetGadgetState(#track4)
						drawme()
						
						;Options
					Case #Option1,	#Option2,	#Option3,	#Option4,	#Option5
						drawme()
						
						;gradient images 0->1
					Case imggdt(0)
						Select EventType()
							Case #PB_EventType_LeftClick       
								makegradient(0)
								drawme()
							Case #PB_EventType_RightClick 
								reset(0)
								drawme()
						EndSelect
						
					Case imggdt(1)
						Select EventType()
							Case #PB_EventType_LeftClick 
								makegradient(1)
								drawme()
							Case #PB_EventType_RightClick 
								reset(1)
								drawme()
						EndSelect	
						
					Case imggdt(2)
						Select EventType()
							Case #PB_EventType_LeftClick 
								makegradient(2)
								drawme()
							Case #PB_EventType_RightClick 
								reset(2)
								drawme()
						EndSelect
						
					Case imggdt(3)
						Select EventType()
							Case #PB_EventType_LeftClick 
								makegradient(3)
								drawme()
							Case #PB_EventType_RightClick 
								reset(3)
								drawme()
						EndSelect
						
					Case imggdt(4)
						Select EventType()
							Case #PB_EventType_LeftClick 
								makegradient(4)
								drawme()
							Case #PB_EventType_RightClick 
								reset(4)
								drawme()
						EndSelect
						
					Case imggdt(5)
						Select EventType()
							Case #PB_EventType_LeftClick 
								makegradient(5)
								drawme()
							Case #PB_EventType_RightClick 
								reset(5)
								drawme()
						EndSelect	
						
					Case imggdt(6)
						Select EventType()
							Case #PB_EventType_LeftClick 
								makegradient(6)
								drawme()
							Case #PB_EventType_RightClick 
								reset(6)
								drawme()
						EndSelect	
						
					Case imggdt(7)
						Select EventType()
							Case #PB_EventType_LeftClick 
								makegradient(7)
								drawme()
							Case #PB_EventType_RightClick 
								reset(7)
								drawme()
						EndSelect
						
					Case imggdt(8)
						Select EventType()
							Case #PB_EventType_LeftClick 
								makegradient(8)
								drawme()
							Case #PB_EventType_RightClick 
								reset(8)
								drawme()
						EndSelect
						
					Case imggdt(9)
						Select EventType()
							Case #PB_EventType_LeftClick 
								makegradient(9)
								drawme()
							Case #PB_EventType_RightClick 
								reset(9)
								drawme()
						EndSelect
						
					Case imggdt(10)
						Select EventType()
							Case #PB_EventType_LeftClick       
								makegradient(10)
								drawme()
							Case #PB_EventType_RightClick 
								reset(10)
								drawme()
						EndSelect
						
				EndSelect
				
		EndSelect
		
	Until Event = #PB_Event_CloseWindow
EndIf

New version which manages transparency and the window is a Dialog.
Image

Code: Select all

;- TOP

;.-------------------------------------------------------------------------------------------------
;|
;|  Title            : Gradient color tool for PureBasic
;|  Version          : v1.0
;|  Author					 : Mesa
;|  Copyright        : 
;|                     
;|  PureBasic        : 5.70+ 6.00+
;|  
;|  Operating System : Windows (XP to W11+), Linux?, MacOS?
;|  Processor        : x86, x64
;|
;|  API							 : No api used
;|
;|-------------------------------------------------------------------------------------------------
;|
;|  Description      : A small tool to make and understand how color gradients work in PureBasic.
;|
;|  Forum Topic      : https://www.purebasic.fr/french/viewtopic.php?t=
;|                     https://www.purebasic.fr/english/viewtopic.php?t=
;|  Website          : 
;|
;|  Documentation    : 
;|
;|	Date 						 : 03/2023
;|
;|  Misc.						 : Custom gradients are not implemented 
;|										  
;|										 Dialog Template by Design0R
;|
;.-------------------------------------------------------------------------------------------------


;.-------------------------------------------------------------------------------------------------
;|
;|  How to  use 		 : 1) Choose the background color, which can change the result depending on the opacity of the gradient colors		 
;|									 : 2) Define gradient boundaries using trackbars
;|  			           : 3) Choose the type of gradients using the options 
;|  				         : 4)	Add gradient colors using left click on colored boxes
;| 									 :  	Right click removes a color 
;|									 : 5)	Adjust the opacity with the trackbar under the alpha boxes
;|                   :    Left click selects the good alpha box
;|                   :    Right click resets the alpha canal  
;|                   : 6) You can copy to clipboard, save the snippet on disk and quit with buttons
;|
;.-------------------------------------------------------------------------------------------------

;.-------------------------------------------------------------------------------------------------
;|
;|  License Mesa.
;|  The license Mesa is, do what you like but make the World better, easier and enjoyable.
;|
;|
;|
;| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
;| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
;| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
;| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
;| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
;| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
;| SOFTWARE.
;| 
;.-------------------------------------------------------------------------------------------------



EnableExplicit

;Dialog
#DD_WindowCount = 1

Dim DD_WindowNames.s(#DD_WindowCount)

DD_WindowNames(1) = "gradient"


;- Constants
#Dialog = 1

#DD_GADGET_image_0             = "image_0"
#DD_GADGET_image_1             = "image_1"
#DD_GADGET_cimage_0            = "cimage_0"
#DD_GADGET_cimage_1            = "cimage_1"
#DD_GADGET_cimage_2            = "cimage_2"
#DD_GADGET_cimage_3            = "cimage_3"
#DD_GADGET_cimage_4            = "cimage_4"
#DD_GADGET_cimage_5            = "cimage_5"
#DD_GADGET_cimage_6            = "cimage_6"
#DD_GADGET_cimage_7            = "cimage_7"
#DD_GADGET_cimage_8            = "cimage_8"
#DD_GADGET_cimage_9            = "cimage_9"
#DD_GADGET_cimage_10           = "cimage_10"
#DD_GADGET_aimage_0            = "aimage_0"
#DD_GADGET_aimage_1            = "aimage_1"
#DD_GADGET_aimage_2            = "aimage_2"
#DD_GADGET_aimage_3            = "aimage_3"
#DD_GADGET_aimage_4            = "aimage_4"
#DD_GADGET_aimage_5            = "aimage_5"
#DD_GADGET_aimage_6            = "aimage_6"
#DD_GADGET_aimage_7            = "aimage_7"
#DD_GADGET_aimage_8            = "aimage_8"
#DD_GADGET_aimage_9            = "aimage_9"
#DD_GADGET_aimage_10           = "aimage_10"
#DD_GADGET_trackbar_a          = "trackbar_a"
#DD_GADGET_button_Copy         = "button_Copy"
#DD_GADGET_button_Save         = "button_Save"
#DD_GADGET_button_Quit         = "button_Quit"
#DD_GADGET_frame_1             = "frame_1"
#DD_GADGET_Txt_backgrd         = "Txt_backgrd"
#DD_GADGET_buttonimage_backgrd = "buttonimage_backgrd"
#DD_GADGET_frame_2             = "frame_2"
#DD_GADGET_trackbar_1          = "trackbar_1"
#DD_GADGET_trackbar_2          = "trackbar_2"
#DD_GADGET_trackbar_3          = "trackbar_3"
#DD_GADGET_trackbar_4          = "trackbar_4"
#DD_GADGET_frame_4             = "frame_4"
#DD_GADGET_option_1            = "option_1"
#DD_GADGET_option_2            = "option_2"
#DD_GADGET_option_3            = "option_3"
#DD_GADGET_option_4            = "option_4"
#DD_GADGET_option_5            = "option_5"
#DD_GADGET_frame_3             = "frame_3"
#DD_GADGET_editor_snippet      = "editor_snippet"

;- Globals
Global w, h,w2, w4, h2, x1, y1, x2, y2
Global color00
Global color10

Global Dim imggdt(10)
Global Dim btngdt(10)

Structure grd
	used.i
	colour.i
	alpha.i
EndStructure

Global Dim clgrad.grd(10)
Global current_alpha_gdt
Global colorBckgrd 
Global imgbt_size
Global CountSnippets
Global CurrentSnippetgdt


;- Macro: Get the id of a gadget in a Dialog
Macro id(gadget)
	DialogGadget(#Dialog, gadget)
EndMacro


;- Procedures

;Make the snippet
Procedure GetSnippet()
	
	Protected i
	Protected level.f
	Protected GradientColor$, cl$, type$
	
	ClearGadgetItems(id(#DD_GADGET_editor_snippet))
	
	AddGadgetItem(CurrentSnippetgdt, -1,"StartDrawing(...)")
	AddGadgetItem(CurrentSnippetgdt, -1,"DrawingMode(#PB_2DDrawing_AllChannels)")
	AddGadgetItem(CurrentSnippetgdt, -1,"Box(0, 0, ..., ..., "+"$"+Hex(colorBckgrd,#PB_Long)+")" )
	AddGadgetItem(CurrentSnippetgdt, -1,"DrawingMode(#PB_2DDrawing_AlphaBlend|#PB_2DDrawing_Gradient)")
	AddGadgetItem(CurrentSnippetgdt, -1,"ResetGradientColors()")
	
	For i=0 To 10
		level=i/10
		If clgrad(i)\used=1
			GradientColor$="GradientColor("+StrF(level,1)+", "
			cl$="$"+Hex(clgrad(i)\colour,#PB_Long)
			AddGadgetItem(CurrentSnippetgdt, -1,GradientColor$+cl$+")")
		EndIf
	Next i
	If GetGadgetState(id(#DD_GADGET_option_5))
		type$="LinearGradient("+Str(x1)+","+Str(y1)+","+Str(x2)+","+Str(y2)+")" 
	ElseIf GetGadgetState(id(#DD_GADGET_option_1))
		type$="BoxedGradient("+Str(x1)+","+Str(y1)+","+Str(x2)+","+Str(y2)+")"
	ElseIf GetGadgetState(id(#DD_GADGET_option_2))
		type$="CircularGradient("+Str(x1)+","+Str(y1)+","+Str(x2)+")"
	ElseIf GetGadgetState(id(#DD_GADGET_option_3))
		type$="ConicalGradient("+Str(x1)+","+Str(y1)+","+Str(x2)+")"
	ElseIf GetGadgetState(id(#DD_GADGET_option_4))
		type$="EllipticalGradient("+Str(x1)+","+Str(y1)+","+Str(x2)+","+Str(y2)+")"
	EndIf
	AddGadgetItem(CurrentSnippetgdt, -1,type$)
	AddGadgetItem(CurrentSnippetgdt, -1,"Box(...)")
	AddGadgetItem(CurrentSnippetgdt, -1,"StopDrawing()")
	
EndProcedure

;Draw the gradient and display the snippet
Procedure DrawMe()
	
	Protected i
	Protected  level.f
	
	SetWindowTitle(DialogWindow(#Dialog)," ("+Str(x1)+","+Str(y1)+")"+" ("+Str(x2)+","+Str(y2)+")")
	
	StartDrawing(ImageOutput(10))
	DrawingMode(#PB_2DDrawing_AllChannels)
	Box(0, 0, w, h,  colorBckgrd)
	
	DrawingMode(#PB_2DDrawing_AlphaBlend|#PB_2DDrawing_Gradient) 
	ResetGradientColors()
	For i=0 To 10
		level=i/10
		If clgrad(i)\used=1
			GradientColor(level, clgrad(i)\colour)
		EndIf
	Next i
	
	BackColor(clgrad(10)\colour)
	FrontColor(clgrad(0)\colour)
	
	If GetGadgetState(id(#DD_GADGET_option_5))
		LinearGradient(x1, y1, x2, y2) 
	ElseIf GetGadgetState(id(#DD_GADGET_option_1))
		BoxedGradient(x1, y1, x2, y2)
	ElseIf GetGadgetState(id(#DD_GADGET_option_2))
		CircularGradient(x1, y1, x2)
	ElseIf GetGadgetState(id(#DD_GADGET_option_3))
		ConicalGradient(x1, y1, x2)
	ElseIf GetGadgetState(id(#DD_GADGET_option_4))
		EllipticalGradient(x1, y1, x2, y2)
	EndIf
	Circle(w4, h2, w4)   
	Box(w2, 0, w2,h)
	
	DrawingMode(#PB_2DDrawing_Default)
	Circle(x1,y1,3,#Red)
	Circle(x2,y2,3,#Green)
	StopDrawing() 
	SetGadgetState(id(#DD_GADGET_image_0), ImageID(10))
	
	
	;Second
	StartDrawing(ImageOutput(11))
	DrawingMode(#PB_2DDrawing_AllChannels)
	Box(0, 0, w, h,  colorBckgrd)
	DrawingMode(#PB_2DDrawing_AlphaBlend|#PB_2DDrawing_Gradient)     
	ResetGradientColors()
	For i=0 To 10
		level=i/10
		If clgrad(i)\used=1
			GradientColor(level, clgrad(i)\colour)
		EndIf
	Next i
	
	BackColor(clgrad(10)\colour)
	FrontColor(clgrad(0)\colour)
	
	If GetGadgetState(id(#DD_GADGET_option_5))
		LinearGradient(x1, y1, x2, y2) 
	ElseIf GetGadgetState(id(#DD_GADGET_option_1))
		BoxedGradient(x1, y1, x2, y2)
	ElseIf GetGadgetState(id(#DD_GADGET_option_2))
		CircularGradient(x1, y1, x2)
	ElseIf GetGadgetState(id(#DD_GADGET_option_3))
		ConicalGradient(x1, y1, x2)
	ElseIf GetGadgetState(id(#DD_GADGET_option_4))
		EllipticalGradient(x1, y1, x2, y2)
	EndIf
	Box(0, 0, w2,h)   
	Box(w2, 0, w2,h)
	DrawingMode(#PB_2DDrawing_Default)
	Circle(x1,y1,3,#Red)
	Circle(x2,y2,3,#Green)      
	StopDrawing() 
	SetGadgetState(id(#DD_GADGET_image_1), ImageID(11))
	
	GetSnippet()
	
EndProcedure

;Draw color and alpha boxes
Procedure DrawButton(gadget,alpha=0)
	
	Protected  colour, z, img, clbkg
	Protected txt$
	
	Select alpha
			
		Case 0
			colour=clgrad(gadget)\colour
			z=CreateImage(#PB_Any,imgbt_size,imgbt_size)
			StartDrawing(ImageOutput(z))
			DrawingMode(#PB_2DDrawing_Default)
			Select gadget
				Case 0
					txt$="0.0"
				Case 10
					txt$="1.0"	
				Default
					txt$="0."+Str(gadget)	
			EndSelect
			Box(0,0,imgbt_size,imgbt_size,Colour)
			DrawText(16-TextWidth("0.0")/2,16-TextHeight("0")/2,txt$,#Black,Colour)
			StopDrawing()
			
			SetGadgetState(imggdt(gadget), ImageID(z))
			SetGadgetState(id(#DD_GADGET_trackbar_a),clgrad(gadget)\alpha)
			
		Case 1
			img=CreateImage(#PB_Any,imgbt_size,imgbt_size)
			StartDrawing(ImageOutput(img))
			
			txt$=Str(clgrad(gadget)\alpha)
			If clgrad(gadget)\used=1
				clbkg=#White
			Else
				clbkg=#Gray
			EndIf
			Box(0,0,imgbt_size,imgbt_size,clbkg)
			DrawText(16-TextWidth("255")/2,16-TextHeight("255")/2,txt$,#Black,clbkg)
			StopDrawing()
			SetGadgetState(btngdt(gadget),ImageID(img))
			SetGadgetState(id(#DD_GADGET_trackbar_a),clgrad(gadget)\alpha)
	EndSelect
	
EndProcedure

;Make gradient with alpha
Procedure MakeGradient(gadget, alpha=0)
	
	Protected Colour.q
	Protected level.f
	
	
	level=gadget/10
	
	If alpha =1
		Colour = clgrad(gadget)\colour
	Else
		Colour = ColorRequester()
		If Colour > -1
			clgrad(gadget)\used=1
		Else
			Colour=clgrad(gadget)\colour	
		EndIf
	EndIf
	
	Colour=RGBA(Red(colour),Green(colour),Blue(colour),clgrad(gadget)\alpha)
	
	
	clgrad(gadget)\colour=colour
	
	DrawButton(gadget)
	DrawButton(gadget,1)
	
EndProcedure

;Reset gradient and alpha
Procedure Reset(gadget)
	
	Protected z, clbkg
	Protected txt$
	
	z=CreateImage(#PB_Any,imgbt_size,imgbt_size)
	StartDrawing(ImageOutput(z))
	DrawingMode(#PB_2DDrawing_Default)
	Select gadget
		Case 0
			clbkg=color00
			clgrad(gadget)\used=1
			clgrad(gadget)\colour=color00
			txt$="0.0"
			Box(0,0,imgbt_size,imgbt_size,clbkg)
		Case 10
			clbkg=color10
			clgrad(gadget)\used=1
			clgrad(gadget)\colour=color10
			Box(0,0,imgbt_size,imgbt_size,clbkg)
			txt$="1.0"
			
		Default
			clgrad(gadget)\used=0
			clgrad(gadget)\colour=#Gray
			clbkg=#Gray
			Box(0,0,imgbt_size,imgbt_size,clbkg)
			txt$="0."+Str(gadget)
			
	EndSelect
	
	DrawText(16-TextWidth("0.0")/2,16-TextHeight("0")/2,txt$,#Black,clbkg)
	StopDrawing()
	
	clgrad(gadget)\alpha=255
	SetGadgetState(imggdt(gadget), ImageID(z))
	DrawButton(gadget,1)
	current_alpha_gdt=0
	SetGadgetState(id(#DD_GADGET_trackbar_a),clgrad(0)\alpha)
	
EndProcedure

;Dialog XML
Procedure.s GetXMLString()
	
	Protected XML$
	
	XML$ + "<?xml version='1.0' encoding='UTF-16'?>"
	XML$ + ""
	XML$ + "<dialogs><!--Created by Dialog Design0R V1.83 => get it from: https://hex0rs.coderbu.de/en/sdm_downloads/dialogdesign0r/-->"
	XML$ + "  <window flags='#PB_Window_SystemMenu | #PB_Window_ScreenCentered' text='Gradient maker' width='800' height='600' name='gradient' xpos='0' ypos='0'>"
	XML$ + "    <hbox expand='item:2'>"
	XML$ + "      <vbox text='left' width='400' expand='item:4'>"
	XML$ + "        <vbox expand='no' align='' width='400'>"
	XML$ + "          <image width='400' height='200' name='image_0'/>"
	XML$ + "          <image width='400' height='200' name='image_1'/>"
	XML$ + "        </vbox>"
	XML$ + "        <frame text='Colors'>"
	XML$ + "          <hbox align='' expand='no'>"
	XML$ + "            <image width='32' height='32' flags='#PB_Image_Border' name='cimage_0'/>"
	XML$ + "            <image flags='#PB_Image_Border' width='32' height='32' name='cimage_1'/>"
	XML$ + "            <image flags='#PB_Image_Border' width='32' height='32' name='cimage_2'/>"
	XML$ + "            <image flags='#PB_Image_Border' width='32' height='32' name='cimage_3'/>"
	XML$ + "            <image flags='#PB_Image_Border' width='32' height='32' name='cimage_4'/>"
	XML$ + "            <image flags='#PB_Image_Border' width='32' height='32' name='cimage_5'/>"
	XML$ + "            <image flags='#PB_Image_Border' width='32' height='32' name='cimage_6'/>"
	XML$ + "            <image flags='#PB_Image_Border' width='32' height='32' name='cimage_7'/>"
	XML$ + "            <image flags='#PB_Image_Border' width='32' height='32' name='cimage_8'/>"
	XML$ + "            <image flags='#PB_Image_Border' width='32' height='32' name='cimage_9'/>"
	XML$ + "            <image flags='#PB_Image_Border' width='32' height='32' name='cimage_10'/> "
	XML$ + "          </hbox> "
	XML$ + "        </frame>"
	XML$ + "        <frame text='Alpha'>"
	XML$ + "          <vbox>"
	XML$ + "            <hbox>"
	XML$ + "              <image width='32' height='32' flags='#PB_Image_Border' name='aimage_0'/>"
	XML$ + "              <image flags='#PB_Image_Border' width='32' height='32' name='aimage_1'/>"
	XML$ + "              <image flags='#PB_Image_Border' width='32' height='32' name='aimage_2'/>"
	XML$ + "              <image flags='#PB_Image_Border' width='32' height='32' name='aimage_3'/>"
	XML$ + "              <image flags='#PB_Image_Border' width='32' height='32' name='aimage_4'/>"
	XML$ + "              <image flags='#PB_Image_Border' width='32' height='32' name='aimage_5'/>"
	XML$ + "              <image flags='#PB_Image_Border' width='32' height='32' name='aimage_6'/>"
	XML$ + "              <image flags='#PB_Image_Border' width='32' height='32' name='aimage_7'/>"
	XML$ + "              <image flags='#PB_Image_Border' width='32' height='32' name='aimage_8'/>"
	XML$ + "              <image flags='#PB_Image_Border' width='32' height='32' name='aimage_9'/>"
	XML$ + "              <image flags='#PB_Image_Border' width='32' height='32' name='aimage_10'/>"
	XML$ + "            </hbox>"
	XML$ + "            <trackbar height='30' flags='#PB_TrackBar_Ticks' min='0' max='255' value='255' name='trackbar_a'/> "
	XML$ + "          </vbox> "
	XML$ + "        </frame>"
	XML$ + "        <hbox>"
	XML$ + "          <button text='Copy' name='button_Copy'/>"
	XML$ + "          <button text='Save' name='button_Save'/>"
	XML$ + "          <button text='Quit' name='button_Quit'/>"
	XML$ + "        </hbox> "
	XML$ + "      </vbox>"
	XML$ + "      <vbox text='right' expand='item:3'>"
	XML$ + "        <frame text='Background color' name='frame_1'>"
	XML$ + "          <hbox expand='item:1'>"
	XML$ + "            <text text='Change the background color:' name='Txt_backgrd'/>"
	XML$ + "            <buttonimage flags='#PB_Button_Toggle' name='buttonimage_backgrd'/>"
	XML$ + "          </hbox> "
	XML$ + "        </frame>"
	XML$ + "        <frame text='Gradient bounderies' name='frame_2'>"
	XML$ + "          <vbox align='' expand='no'>"
	XML$ + "            <trackbar flags='#PB_TrackBar_Ticks' height='30' min='0' max='800' value='0' name='trackbar_1'/>"
	XML$ + "            <trackbar height='30' flags='#PB_TrackBar_Ticks' min='0' max='800' value='0' name='trackbar_2'/>"
	XML$ + "            <trackbar height='30' flags='#PB_TrackBar_Ticks' min='0' max='800' value='200' name='trackbar_3'/>"
	XML$ + "            <trackbar height='30' flags='#PB_TrackBar_Ticks' min='0' max='800' value='200' name='trackbar_4'/>"
	XML$ + "          </vbox> "
	XML$ + "        </frame>"
	XML$ + "        <frame text='Types' name='frame_4'>"
	XML$ + "          <vbox>"
	XML$ + "            <option text='BoxedGradient (x1, y1, x2, y2)' name='option_1'/>"
	XML$ + "            <option text='CircularGradient (x1, y1, x2=Radius, y2=null)' name='option_2'/>"
	XML$ + "            <option text='ConicalGradient (x1, y1, x2=Angle, y2=null)' name='option_3'/>"
	XML$ + "            <option text='EllipticalGradient (x1, y1, x2=Rx, y2=Ry)' name='option_4'/>"
	XML$ + "            <option text='LinearGradient (x1, y1, x2, y2)' name='option_5'/> "
	XML$ + "          </vbox> "
	XML$ + "        </frame>"
	XML$ + "        <frame text='Snippets' name='frame_3'>"
	XML$ + "          <vbox expand='item:2'>"
	XML$ + "            <editor height='200' name='editor_snippet'/> "
	XML$ + "          </vbox> "
	XML$ + "        </frame> "
	XML$ + "      </vbox> "
	XML$ + "    </hbox> "
	XML$ + "  </window>"
	XML$ + "</dialogs><!--DDesign0R Definition: PureBasic|1|1|1|____|example_with_declares|0-->"
	
	ProcedureReturn XML$
EndProcedure

;Initialize gadgets and stuffs
Procedure Init()
	
	Protected i, img, clbkg
	Protected txt$
	
	;Image 1 and 2
	w=400
	h=200
	w2=w/2
	w4=w/4
	h2=h/2
	x1=0
	y1=0
	x2=200
	y2=200
	color00=$FF00FFFF
	color10=$FFFF0000
	
	clgrad(10)\used=1
	clgrad(10)\colour=color10
	clgrad(0)\used=1
	clgrad(0)\colour=color00
	
	colorBckgrd = $FFFFFFFF
	imgbt_size = 32
	
	If CreateImage(10, 400, 200) And StartDrawing(ImageOutput(10))
		Box(0, 0, 400, 200, $FFFFFF)
		
		DrawingMode(#PB_2DDrawing_Gradient)      
		BackColor(color00)
		FrontColor(color10)
		
		LinearGradient(0, 0, 200, 200)    
		Circle(100, 100, 100)   
		LinearGradient(350, 100, 250, 100)
		; 		Circle(300, 100, 100)
		Box(200, 0, 200,200)
		
		StopDrawing() 
		SetGadgetState(id(#DD_GADGET_image_0), ImageID(10))
		
	EndIf
	
	If CreateImage(11, 400, 200) And StartDrawing(ImageOutput(11))
		Box(0, 0, 400, 200, $FFFFFF)
		
		DrawingMode(#PB_2DDrawing_Gradient)      
		BackColor(color00)
		FrontColor(color10)
		
		LinearGradient(0, 0, 200, 200)    
		Box(0, 0, 200,200)   
		LinearGradient(x1, y1, x2, y2)
		Box(200, 0, 200,200)
		
		StopDrawing() 
		SetGadgetState(id(#DD_GADGET_image_1),ImageID(11))
		
	EndIf
	
	;Button bckgrd color
	If CreateImage(0, 32, 32) And StartDrawing(ImageOutput(0))
		DrawingMode(#PB_2DDrawing_Default)
		Box(0, 0, 32, 32,  colorBckgrd)    
		StopDrawing() 
		SetGadgetAttribute(id(#DD_GADGET_buttonimage_backgrd), #PB_Button_Image, ImageID(0))
	EndIf
	
	;Options
	SetGadgetState(id(#DD_GADGET_option_5), 1)
	
	;Colors and alpha
	imggdt(0) = id(#DD_GADGET_cimage_0)
	imggdt(1) = id(#DD_GADGET_cimage_1)
	imggdt(2) = id(#DD_GADGET_cimage_2)
	imggdt(3) = id(#DD_GADGET_cimage_3)
	imggdt(4) = id(#DD_GADGET_cimage_4)
	imggdt(5) = id(#DD_GADGET_cimage_5)
	imggdt(6) = id(#DD_GADGET_cimage_6)
	imggdt(7) = id(#DD_GADGET_cimage_7)
	imggdt(8) = id(#DD_GADGET_cimage_8)
	imggdt(9) = id(#DD_GADGET_cimage_9)
	imggdt(10) = id(#DD_GADGET_cimage_10)
	
	For i= 0 To 10
		
		img=CreateImage(#PB_Any,imgbt_size,imgbt_size)
		StartDrawing(ImageOutput(img))
		Select i
			Case 0
				clbkg=color00
				clgrad(00)\colour=color00
				clgrad(00)\alpha=255
				txt$="0.0"
				Box(0,0,imgbt_size,imgbt_size,clbkg)
			Case 10
				clbkg=color10
				clgrad(10)\colour=color10
				clgrad(10)\alpha=255
				txt$="1.0"
				Box(0,0,imgbt_size,imgbt_size,clbkg)
			Default
				clbkg=#Gray
				clgrad(i)\colour=#Gray
				clgrad(i)\alpha=255
				txt$="0."+Str(i)
				Box(0,0,imgbt_size,imgbt_size,clbkg)
				
		EndSelect
		
		DrawText(16-TextWidth("0.0")/2,16-TextHeight("0")/2,txt$,#Black,clbkg)
		StopDrawing()
		
		SetGadgetState(imggdt(i),ImageID(img))
		SetGadgetData(imggdt(i),i)
		
	Next i
	
	
	btngdt(0) = id(#DD_GADGET_aimage_0)
	btngdt(1) = id(#DD_GADGET_aimage_1)
	btngdt(2) = id(#DD_GADGET_aimage_2)
	btngdt(3) = id(#DD_GADGET_aimage_3)
	btngdt(4) = id(#DD_GADGET_aimage_4)
	btngdt(5) = id(#DD_GADGET_aimage_5)
	btngdt(6) = id(#DD_GADGET_aimage_6)
	btngdt(7) = id(#DD_GADGET_aimage_7)
	btngdt(8) = id(#DD_GADGET_aimage_8)
	btngdt(9) = id(#DD_GADGET_aimage_9)
	btngdt(10) = id(#DD_GADGET_aimage_10)
	
	For i= 0 To 10
		img=CreateImage(#PB_Any,imgbt_size,imgbt_size)
		StartDrawing(ImageOutput(img))
		Select i
			Case 0
				clbkg=#White
				txt$="255"
				Box(0,0,imgbt_size,imgbt_size,clbkg)
			Case 10
				clbkg=#White
				txt$="255"
				Box(0,0,imgbt_size,imgbt_size,clbkg)
			Default
				clbkg=#Gray 
				Box(0,0,imgbt_size,imgbt_size,clbkg)
				txt$="255"
				
		EndSelect
		DrawText(16-TextWidth("255")/2,16-TextHeight("255")/2,txt$,#Black,clbkg)
		StopDrawing()
		SetGadgetState(btngdt(i),ImageID(img))
		SetGadgetData(btngdt(i),i)
		
	Next i
	
	;snippets
	CurrentSnippetgdt=id(#DD_GADGET_editor_snippet)
	GetSnippet()
	
EndProcedure


;- Main
CompilerIf #PB_Compiler_IsMainFile
	
	Define i, R, ok, Event, Gadget, z, a1, img, clbkg, number, copy, Result 
	Define txt$, File$
	
	Define a$ = GetXMLString()
	
	If ParseXML(0, a$) And XMLStatus(0) = #PB_XML_Success
		For i = 1 To #DD_WindowCount
			CreateDialog(i)
			
			R = OpenXMLDialog(i, 0, DD_WindowNames(i))
			
			If R
				ok = #True
			Else
				Debug DialogError(i)
			EndIf
		Next i
		
		If ok
			
			;Initialize gadgets and stuffs
			Init()
			
			;- Loop
			Repeat
				
				Event = WaitWindowEvent()
				Gadget = EventGadget()
				
				Select Event
						
					Case #PB_Event_Gadget
						Select Gadget
								
								;Backgrd button
							Case id(#DD_GADGET_buttonimage_backgrd)
								colorBckgrd = ColorRequester()
								If colorBckgrd > -1
									z=CreateImage(#PB_Any,imgbt_size,imgbt_size)
									StartDrawing(ImageOutput(z))
									DrawingMode(#PB_2DDrawing_Default)
									Box(0,0,imgbt_size,imgbt_size,colorBckgrd)
									StopDrawing()
									SetGadgetAttribute(id(#DD_GADGET_buttonimage_backgrd), #PB_Button_Image, ImageID(z))
									colorBckgrd=RGBA(Red(colorBckgrd),Green(colorBckgrd),Blue(colorBckgrd),$FF)
									DrawMe()
								EndIf
								
								;Trackbars
							Case id(#DD_GADGET_trackbar_1) 
								x1= GetGadgetState(id(#DD_GADGET_trackbar_1) )
								DrawMe()
							Case id(#DD_GADGET_trackbar_2)
								y1= GetGadgetState(id(#DD_GADGET_trackbar_2))
								DrawMe()
							Case id(#DD_GADGET_trackbar_3)
								x2= GetGadgetState(id(#DD_GADGET_trackbar_3))
								DrawMe()
							Case id(#DD_GADGET_trackbar_4)
								y2= GetGadgetState(id(#DD_GADGET_trackbar_4))
								DrawMe()
								
								;Trackbars alpha
							Case id(#DD_GADGET_trackbar_a)
								a1= GetGadgetState(id(#DD_GADGET_trackbar_a))
								img=CreateImage(#PB_Any,imgbt_size,imgbt_size)
								StartDrawing(ImageOutput(img))
								clbkg=#White
								txt$=Str(a1)	
								Box(0,0,imgbt_size,imgbt_size,clbkg)
								DrawText(16-TextWidth("255")/2,16-TextHeight("255")/2,txt$,#Black,clbkg)
								StopDrawing()
								SetGadgetState(btngdt(current_alpha_gdt),ImageID(img))
								clgrad(current_alpha_gdt)\alpha=a1
								MakeGradient(current_alpha_gdt,1)
								DrawMe()					
								
								;Options
							Case id(#DD_GADGET_option_1),	id(#DD_GADGET_option_2),	id(#DD_GADGET_option_3),	id(#DD_GADGET_option_4),	id(#DD_GADGET_option_5)
								DrawMe()
								
								;Gradient images 0.0->1.0
							Case imggdt(0),imggdt(1),imggdt(2),imggdt(3),imggdt(4),imggdt(5),
							     imggdt(6),imggdt(7),imggdt(8),imggdt(9),imggdt(10)
								number=GetGadgetData(Gadget)
								Select EventType()
									Case #PB_EventType_LeftClick 
										current_alpha_gdt=number
										MakeGradient(number)
										DrawMe()
									Case #PB_EventType_RightClick 
										Reset(number)
										DrawMe()
								EndSelect
								
								
								;Alpha 0->255
							Case btngdt(0), btngdt(1), btngdt(2), btngdt(3), btngdt(4), btngdt(5),
							     btngdt(6), btngdt(7), btngdt(8), btngdt(9), btngdt(10)
								number=GetGadgetData(Gadget)
								current_alpha_gdt=number
								Select EventType()
									Case #PB_EventType_LeftClick  
										DrawButton(number,1)
									Case #PB_EventType_RightClick 
										Reset(number)
								EndSelect
								
								;Snippet copy to clipboard
							Case id(#DD_GADGET_button_Copy)
								ClearClipboard()
								SetClipboardText(GetGadgetText(id(#DD_GADGET_editor_snippet)))
								
								;Snippet save to disk
							Case id(#DD_GADGET_button_Save)
								copy=#False
								File$ = SaveFileRequester("Save", "gradient.txt", "*.*", 0)
								Debug File$
								If File$
									If FileSize(File$)>0 
										Debug File$ 
										Debug FileSize(File$)
										Result = MessageRequester("Attention","Overwrite ?",#PB_MessageRequester_YesNo |#PB_MessageRequester_Warning)
										If Result = #PB_MessageRequester_Yes 
											copy=#True           				
										Else 
											copy=#False
										EndIf
									Else
										copy=#True
									EndIf
								Else
									copy=#False
								EndIf
								
								If copy=#True
									If CreateFile(0, File$)       
										WriteStringFormat(0, #PB_Unicode)
										WriteStringN(0, GetGadgetText(id(#DD_GADGET_editor_snippet)),#PB_Unicode) 
										CloseFile(0)                       
									EndIf
								EndIf
								
								;Quit
							Case id(#DD_GADGET_button_Quit)
								End
								
						EndSelect	
				EndSelect
				
			Until Event = #PB_Event_CloseWindow
		EndIf
		
	Else
		Debug XMLStatus(0)
		Debug XMLError(0)
	EndIf
	
	
CompilerEndIf
M.
Last edited by Mesa on Fri Mar 31, 2023 4:32 pm, edited 2 times in total.
User avatar
jacdelad
Addict
Addict
Posts: 1432
Joined: Wed Feb 03, 2021 12:46 pm
Location: Planet Riesa
Contact:

Re: Color Gradients

Post by jacdelad »

Very nice and great for trying to find a beautiful one. Thanks for sharing!
PureBasic 6.04/XProfan X4a/Embarcadero RAD Studio 11/Perl 5.2/Python 3.10
Windows 11/Ryzen 5800X/32GB RAM/Radeon 7770 OC/3TB SSD/11TB HDD
Synology DS1821+/36GB RAM/130TB
Synology DS920+/20GB RAM/54TB
Synology DS916+ii/8GB RAM/12TB
Mindphazer
Enthusiast
Enthusiast
Posts: 340
Joined: Mon Sep 10, 2012 10:41 am
Location: Savoie

Re: Color Gradients

Post by Mindphazer »

Nice !
Click on the yellow box (0.0) doesn't have any effect (no colour selector appears) - Is it on purpose ?
MacBook Pro 14" M1 Pro - 16 Gb - MacOS 14 - Iphone 15 Pro Max - iPad at home
...and unfortunately... Windows at work...
BarryG
Addict
Addict
Posts: 3292
Joined: Thu Apr 18, 2019 8:17 am

Re: Color Gradients

Post by BarryG »

Thanks for the nice example!
Mesa
Enthusiast
Enthusiast
Posts: 345
Joined: Fri Feb 24, 2012 10:19 am

Re: Color Gradients

Post by Mesa »

@Mindphazer: oops, i forgot something, the code is updated.

M.
Mindphazer
Enthusiast
Enthusiast
Posts: 340
Joined: Mon Sep 10, 2012 10:41 am
Location: Savoie

Re: Color Gradients

Post by Mindphazer »

Thanks !
By the way, it works fine on MacOS too
MacBook Pro 14" M1 Pro - 16 Gb - MacOS 14 - Iphone 15 Pro Max - iPad at home
...and unfortunately... Windows at work...
Mesa
Enthusiast
Enthusiast
Posts: 345
Joined: Fri Feb 24, 2012 10:19 am

Re: Color Gradients

Post by Mesa »

New version which manages transparency and the window is a Dialog, see the first post.

M.
Post Reply