Kompakter Color Picker [B+]

Übersicht BlitzBasic Codearchiv

Neue Antwort erstellen

x-pressive

Betreff: Kompakter Color Picker [B+]

 BeitragDo, Okt 07, 2004 19:21
Antworten mit Zitat
Benutzer-Profile anzeigen
Hier ein handlicher, kleiner Color-Picker (Blitz+), der RGB-Werte dezimal oder hex zurückgibt. Kann für Web-Anwendungen (web-safe colors), aber auch als 'schönerer' und kompakter Ersatz für den hässlichen Windows-Standard-Picker verwendet werden.

user posted image


Beispielprogramm:
BlitzBasic: [AUSKLAPPEN] 

Include "colorpicker.bb"

If Colorpicker_RequestColor() = 1 Then

	; GET DECIMAL R, G, B:
	Notify "R:" + ColorPicker_RequestedRed  ()
	Notify "G:" + ColorPicker_RequestedGreen()
	Notify "B:" + ColorPicker_RequestedBlue ()

	; GET HEX R, G, B:
	Notify "R: #" + ColorPicker_RequestedRedHex  ()
	Notify "G: #" + ColorPicker_RequestedGreenHex()
	Notify "B: #" + ColorPicker_RequestedBlueHex ()

	; GET CLICKED COLUMN AND ROW:
	Notify "Column: " + ColorPicker_PickedCol()
	Notify " Row: "   + ColorPicker_PickedRow()
End If

End



Speichern als Datei "colorpicker.bb":
BlitzBasic: [AUSKLAPPEN] 

; -------------------------------------------------------------------------
; COMPACT (WEB-SAFE) COLOR PICKER
; -------------------------------------------------------------------------
; AUTHOR: MIKE DOGAN
; WEB:    WWW.X-PRESSIVE.COM
; DATE:   OCTOBER 7TH, 2004
;
; -------------------------------------------------------------------------
; HOW TO USE:
; -------------------------------------------------------------------------
; INLCUDE THIS SOURCE TO YOUR PROGRAM (INCLUDE "colorpicker.bb")
;
; ColorPicker_RequestColor   (col,row) 	- OPEN COLORPICKER AND PRE-SELECT A COL/ROW ( RETURNS 1 OR 0 WHEN CANCELED )
; ColorPicker_RequestedRed   ()		- RETURNS SELECTED R VALUE ( DECIMAL )		
; ColorPicker_RequestedGreen ()		- RETURNS SELECTED G VALUE ( DECIMAL )
; ColorPicker_RequestedBlue  ()		- RETURNS SELECTED B VALUE ( DECIMAL )
; ColorPicker_RequestedRedHex   ()	- RETURNS SELECTED R VALUE ( HEX )
; ColorPicker_RequestedGreenHex ()	- RETURNS SELECTED G VALUE ( HEX )
; ColorPicker_RequestedBlueHex  ()	- RETURNS SELECTED B VALUE ( HEX )
; ColorPicker_PickedCol ()		- RETURNS SELECTED COLUMN
; ColorPicker_PickedRow ()		- RETURNS SELECTED ROW
; -------------------------------------------------------------------------



; -------------------------------------------------------------------------
; GLOBALS
; -------------------------------------------------------------------------
Global CP_cols% 	= 18
Global CP_rows% 	= 11
Global CP_boxsize% 	= 10
Global CP_boxspacing%	= 1
Global CP_canvasX%	= 2
Global CP_canvasY%	= 2
Global CP_canvasWidth%	= CP_cols * (CP_boxsize + CP_boxspacing) + CP_boxspacing
Global CP_canvasHeight%	= CP_rows * (CP_boxsize + CP_boxspacing) + CP_boxspacing 
Global CP_previewWidth% = 24	;WIDTH  OF COLOR PREVIEW BOX
Global CP_previewHeight%= 17	;HEIGHT OF COLOR PREVIEW BOX
Global CP_gradientWidth%= 10
Global CP_winWidth	= CP_canvasWidth  + CP_gradientWidth + 18
Global CP_winHeight	= CP_canvasHeight + 48
Global CP_lastCol%
Global CP_lastRow%
Global CP_pickedR%,  CP_pickedG%,  CP_pickedB%
Global CP_pickedRH$, CP_pickedGH$, CP_pickedBH$
Global CP_pickedCol%,CP_pickedRow%
Global CP_now%

; TYPE COLORBOX
Type TColorBox
    Field col%
    Field row%
    Field r%,g%,b%
End Type
Global CP_ColorBox.TColorBox

; TYPE COLORGRADIENT
Type TColorGradient
    Field y%
    Field r%,g%,b%
End Type
Global CP_ColorGradient.TColorGradient

; -------------------------------------------------------------------------
; CREATE COLOR VALUE FIELDS
; -------------------------------------------------------------------------

; LEFT COLUMN
For CP_i = 0 To CP_rows
	CP_ColorBox.TColorBox = New TColorBox
	CP_ColorBox\col = 0

	CP_ColorBox\row = CP_i
	If CP_i <= 7 Then
		CP_ColorBox\r   = CP_i * 34	; GREY TONES
		CP_ColorBox\g   = CP_i * 34
		CP_ColorBox\b   = CP_i * 34
	Else If CP_i = 8 Then
		CP_ColorBox\r   = 255 		; PURE YELLOW
		CP_ColorBox\g   = 255
		CP_ColorBox\b   = 0
	Else If CP_i = 9 Then
		CP_ColorBox\r   = 255 		; PURE RED
		CP_ColorBox\g   = 0
		CP_ColorBox\b   = 0
	Else If CP_i = 10 Then
		CP_ColorBox\r   = 0   		; PURE GREEN
		CP_ColorBox\g   = 255 
		CP_ColorBox\b   = 0
	Else If CP_i = 11 Then
		CP_ColorBox\r   = 0   		; PURE BLUE
		CP_ColorBox\g   = 0
		CP_ColorBox\b   = 255
	End If
Next

; MIX COLORS FOR ALL THE OTHER BOXES
CP_red% = CP_grn% = CP_blu% = 0

For CP_col = 1 To CP_cols
	For CP_row = 0 To CP_rows
		; RED
		If CP_col < 7 Then
			If CP_row < 6 Then CP_red = 0 Else CP_red = 9
		Else If CP_col < 13 Then
			If CP_row < 6 Then CP_red = 3 Else CP_red = 12
		Else 
			If CP_row < 6 Then CP_red = 6 Else CP_red = 15
		End If
		
		CP_ColorBox.TColorBox = New TColorBox
		CP_ColorBox\col = CP_col
		CP_ColorBox\row = CP_row
		CP_ColorBox\r   = CP_red * 17
		CP_ColorBox\g   = CP_grn * 17
		CP_ColorBox\b   = CP_blu * 17
		; BLUE
		If CP_blu > 12 Then CP_blu = 0 Else CP_blu = CP_blu + 3
	Next
	; GREEN
	If CP_grn > 12 Then CP_grn = 0 Else CP_grn = CP_grn + 3
Next


; -------------------------------------------------------------------------
; GADGETS
; -------------------------------------------------------------------------
Global CP_Window%         = CreateWindow ("PICK A COLOR:",(ClientWidth(Desktop())-CP_winWidth)/2,(ClientHeight(Desktop())- CP_winHeight )/2,CP_winWidth, CP_winHeight,Win,1+16)
Global CP_Canvas_Boxes    = CreateCanvas (CP_canvasX,CP_canvasY,CP_canvasWidth,CP_canvasHeight,CP_Window,65536)
Global CP_Canvas_Preview  = CreateCanvas (CP_canvasX,CP_canvasY+CP_canvasHeight+2,CP_previewWidth,CP_previewHeight,CP_Window,65536)
Global CP_Canvas_Gradient = CreateCanvas (CP_canvasX+CP_canvasWidth+2,CP_canvasY,CP_gradientWidth,CP_canvasHeight,CP_Window,65536)
Global CP_Canvas_Marker   = CreateCanvas (CP_canvasX+CP_canvasWidth+CP_gradientWidth+4,CP_canvasY+CP_canvasHeight/2,4,2,CP_Window,65536)
Global CP_Label_Status%	  = CreateLabel  ("",CP_canvasX+CP_previewWidth+2,CP_canvasY+CP_canvasHeight+4,50,16,CP_Window,0)
Global CP_Button_Select%  = CreateButton ("Apply",CP_winWidth-145,CP_canvasY+CP_canvasHeight+3,64,16,CP_Window)
Global CP_Button_Cancel%  = CreateButton ("Cancel",CP_winWidth-78,CP_canvasY+CP_canvasHeight+3,64,16,CP_Window)


; -------------------------------------------------------------------------
; DRAW COLOR BOXES
; -------------------------------------------------------------------------
SetBuffer  CanvasBuffer (CP_Canvas_Boxes)

For CP_ColorBox.TColorBox = Each TColorBox
	CP_x% = CP_ColorBox\col * (CP_boxsize + CP_boxspacing) + CP_boxspacing
	CP_y% = CP_ColorBox\row * (CP_boxsize + CP_boxspacing) + CP_boxspacing

	Color CP_ColorBox\r, CP_ColorBox\g, CP_ColorBox\b
	Rect  CP_x, CP_y, CP_boxsize, CP_boxsize, 1  
Next


; -------------------------------------------------------------------------
; FUNCTION: REQUEST COLOR - SHOW COLOR PICKER
; -------------------------------------------------------------------------
Function Colorpicker_RequestColor% (c%=0,r%=0)

	Local Event%, Item%
	
	; PRE-SELECT A COLOR BOX
	CP_SelectColorBox(c,r)

	Repeat
		CP_now = MilliSecs  ()
		Event  = WaitEvent  ()
		Item   = EventSource()

		; WINDOW CLOSED
		If Event = $803 Or KeyDown(1) Then HideGadget CP_Window : Return 0

		; MOUSE DOWN
		If Event = $201 Then

			; COLOR BOX CLICKED - SELECT COLOR
			If Item = CP_Canvas_Boxes Then CP_updateHighlight = 1
			
			; GRADIENT BOX CLICKED - SELECT COLOR
			If Item = CP_Canvas_Gradient Then CP_updateGradient = 1

		End If
		
		; MOUSE UP
		If Event = $202 Then CP_updateGradient = 0 : CP_updateHighlight = 0

		; GADGET CLICKED
		If Event = $401 Then

			; SELECT BUTTON
			If Item = CP_Button_Select Then HideGadget CP_Window : Return 1

			; CANCELED
			If Item = CP_Button_Cancel Then HideGadget CP_Window : Return 0

		End If
		
		; MOUSE DOWN OVER GRADIENT PICKER? 
		If CP_updateGradient  = 1 Then CP_PickGradientColor()
		If CP_updateHighlight = 1 Then CP_SelectColorBox()
		
	Forever

End Function


; -------------------------------------------------------------------------
; FUNCTION: HIGHLIGHT CURRENT MOUSE-OVER BOX, SHOW COLOR PREVIEW
; -------------------------------------------------------------------------
Function CP_SelectColorBox(col% = -1, row% = -1)

	Local mx%,my%,x%,y%

	; SHOW MOUSE-OVER COLOR
	mx  = MouseX(CP_Canvas_Boxes)
	my  = MouseY(CP_Canvas_Boxes)
	
	If col = -1 Then col = mx /  (CP_boxsize + CP_boxspacing)
	If row = -1 Then row = my /  (CP_boxsize + CP_boxspacing)
	
	; CLICKED INSIDE CANVAS?
	If col >= 0 And col < CP_cols And row >= 0 And row < CP_rows Then 
	
		; FIND SELECTED COLOR VALUES
		For CP_ColorBox.TColorBox = Each TColorBox
			If CP_ColorBox\col = col And CP_ColorBox\row = row Then
				CP_pickedR%   = CP_ColorBox\r
				CP_pickedG%   = CP_ColorBox\g
				CP_pickedB%   = CP_ColorBox\b
				CP_pickedRH$  = Right(Hex(CP_ColorBox\r),2)
				CP_pickedGH$  = Right(Hex(CP_ColorBox\g),2)
				CP_pickedBH$  = Right(Hex(CP_ColorBox\b),2)
				CP_pickedCol% = CP_ColorBox\col
				CP_pickedRow% = CP_ColorBox\row
				Exit
			End If
		Next

		; CLEAR PREVIOUS HIGHLIGHT
		SetBuffer CanvasBuffer (CP_Canvas_Boxes)
		x = (CP_lastCol * (CP_boxsize + CP_boxspacing) + CP_boxspacing)-1
		y = (CP_lastRow * (CP_boxsize + CP_boxspacing) + CP_boxspacing)-1
		Color 0,0,0
		Rect  x, y, CP_boxsize+2, CP_boxsize+2, 0  

		; HIGHLIGHT CURRENT BOX
		x = (col * (CP_boxsize + CP_boxspacing) + CP_boxspacing)-1
		y = (row * (CP_boxsize + CP_boxspacing) + CP_boxspacing)-1
		Color 255,255,255
		Rect  x, y, CP_boxsize+2, CP_boxsize+2, 0  

		; DRAW COLOR PREVIEW
		SetGadgetText CP_Label_Status,"#" + CP_pickedRH$ + CP_pickedGH$ + CP_pickedBH$
		SetBuffer CanvasBuffer (CP_Canvas_Preview)
		Color         CP_pickedR, CP_pickedG, CP_pickedB
		Rect          CP_boxspacing, CP_boxspacing, CP_previewWidth-CP_boxspacing*2, CP_previewHeight-CP_boxspacing*2, 1  

		; UPDATE
		FlipCanvas CP_Canvas_Boxes
		FlipCanvas CP_Canvas_Preview
		CP_lastCol = col
		CP_lastRow = row
		
		CP_DrawGradient()
	End If
	
End Function


; -------------------------------------------------------------------------
; FUNCTION: DRAW GRADIENT OF SELECTED COLOR
; -------------------------------------------------------------------------
Function CP_DrawGradient()

	SetBuffer CanvasBuffer (CP_Canvas_Gradient)

	colorPercent# = 255.0 / 100.0
	wayPercent#   = (Float(CP_canvasHeight)/2.0) / 100.0

	For i% = 0 To CP_canvasHeight
		
		; UPPER HALF - BRIGHTEN
		If i < CP_canvasHeight/2 Then
			offset# = 255.0 - (Float(i) / wayPercent) * colorPercent
		; LOWER HALF - DARKEN
		Else
			offset# = - ( (Float(i-CP_canvasHeight/2) / wayPercent) * colorPercent )
		End If
		
		r% = CP_pickedR + offset
		g% = CP_pickedG + offset
		b% = CP_pickedB + offset
		If r < 0 Then r = 0 Else If r > 255 Then r = 255
		If g < 0 Then g = 0 Else If g > 255 Then g = 255
		If b < 0 Then b = 0 Else If b > 255 Then b = 255
		Color r,g,b : Line 1,i,CP_gradientWidth-2,i
	Next

	Color 0,0,0 : Line 0,0,CP_gradientWidth,0

	FlipCanvas CP_Canvas_Gradient

	; SET MARKER TO MIDDLE

	SetGadgetShape CP_Canvas_Marker,CP_canvasX+CP_canvasWidth+CP_gradientWidth+4,CP_canvasY+CP_canvasHeight/2,4,2
	
End Function


; -------------------------------------------------------------------------
; FUNCTION: PICK A GRADIENT COLOR
; -------------------------------------------------------------------------
Function CP_PickGradientColor()

	my%  = MouseY(CP_Canvas_Gradient)
	
	If my < 0 Or my >= CP_canvasHeight-1  Then Return 

	colorPercent# = 255.0 / 100.0
	wayPercent#   = (Float(CP_canvasHeight)/2.0) / 100.0

	; DETERMINE COLOR OFFSET

	If my < CP_canvasHeight/2 Then
		offset# = 255.0 - (Float(my) / wayPercent) * colorPercent
	Else
		offset# = - ( (Float(my-CP_canvasHeight/2) / wayPercent) * colorPercent )
	End If

	; FIND SELECTED COLOR VALUES
	For CP_ColorBox.TColorBox = Each TColorBox
		If CP_ColorBox\col = CP_pickedCol And CP_ColorBox\row = CP_pickedRow Then
			CP_pickedR%   = CP_ColorBox\r + offset
			CP_pickedG%   = CP_ColorBox\g + offset
			CP_pickedB%   = CP_ColorBox\b + offset
			If CP_pickedR < 0 Then CP_pickedR = 0 Else If CP_pickedR > 255 Then CP_pickedR = 255
			If CP_pickedG < 0 Then CP_pickedG = 0 Else If CP_pickedG > 255 Then CP_pickedG = 255
			If CP_pickedB < 0 Then CP_pickedB = 0 Else If CP_pickedB > 255 Then CP_pickedB = 255
			CP_pickedRH$  = Right(Hex(CP_pickedR),2)
			CP_pickedGH$  = Right(Hex(CP_pickedG),2)
			CP_pickedBH$  = Right(Hex(CP_pickedB),2)
			Exit
		End If
	Next

	; DRAW COLOR PREVIEW
	SetGadgetText CP_Label_Status,"#" + CP_pickedRH$ + CP_pickedGH$ + CP_pickedBH$
	SetBuffer CanvasBuffer (CP_Canvas_Preview)
	Color         CP_pickedR, CP_pickedG, CP_pickedB
	Rect          CP_boxspacing, CP_boxspacing, CP_previewWidth-CP_boxspacing*2, CP_previewHeight-CP_boxspacing*2, 1  
	FlipCanvas    CP_Canvas_Preview

	; SET MARKER TO MOUSE POSITION
	SetGadgetShape CP_Canvas_Marker,CP_canvasX+CP_canvasWidth+CP_gradientWidth+4,CP_canvasY+my,4,2
	
End Function


; -------------------------------------------------------------------------
; FUNCTIONS: RETURN PICKED COLOR VALUES
; -------------------------------------------------------------------------
Function ColorPicker_RequestedRed% ()
	Return CP_pickedR
End Function

Function ColorPicker_RequestedGreen% ()
	Return CP_pickedG
End Function

Function ColorPicker_RequestedBlue% ()
	Return CP_pickedB
End Function

Function ColorPicker_RequestedRedHex$ ()
	Return CP_pickedRH$
End Function

Function ColorPicker_RequestedGreenHex$ ()
	Return CP_pickedGH$
End Function

Function ColorPicker_RequestedBlueHex$ ()
	Return CP_pickedBH$
End Function

Function ColorPicker_PickedCol% ()
	Return CP_pickedCol
End Function

Function ColorPicker_PickedRow% ()
	Return CP_pickedRow
End Function
• BLITZ SHOWCASE:
PARTICLE CANDY • PARTICLE CANDY FOR iPHONE • SPRITE CANDY • DON'T GET ANGRY! 2-3 • CLICK CLACK XL
  • Zuletzt bearbeitet von x-pressive am Sa, Okt 09, 2004 15:36, insgesamt 6-mal bearbeitet
 

Kekskiller

 BeitragDo, Okt 07, 2004 19:48
Antworten mit Zitat
Benutzer-Profile anzeigen
Schöner Requeser, mag ich ^_^ !
Nur wäre ein funktionierende Cancelbutton noch schöner Very Happy .
Oder vielleicht per Rechtsklick die Möglichkeite, die Farben in
der Palette zu ändern. Jedenfalls klein und fein.

x-pressive

 BeitragDo, Okt 07, 2004 20:28
Antworten mit Zitat
Benutzer-Profile anzeigen
Oops Wink -Danke für den Hinweis, schon korrigiert.

Die Farben zu ändern, hätte nicht allzuviel Sinn, denn sie sollen ja 'Web-Safe' sein. Aber auch für die meisten anderen Anwendungen dürfte die angebotene Palette schon reichen, denke ich.
• BLITZ SHOWCASE:
PARTICLE CANDY • PARTICLE CANDY FOR iPHONE • SPRITE CANDY • DON'T GET ANGRY! 2-3 • CLICK CLACK XL
 

Kekskiller

 BeitragDo, Okt 07, 2004 22:35
Antworten mit Zitat
Benutzer-Profile anzeigen
OH, ähä ^^" .
Das habe ich ganz vergessen...
Aber egal, auf jeden Fall klasse das Ding Very Happy !

x-pressive

 BeitragFr, Okt 08, 2004 12:40
Antworten mit Zitat
Benutzer-Profile anzeigen
UPDATE: Habe noch einen Gradientstreifen zugefügt, mit dem man die gewählte Farbe in allen Hell- und Dunkeltönen wählen kann. So sind quasi alle erdenklichen Farben zu holen. Das dürfte reichen Wink
• BLITZ SHOWCASE:
PARTICLE CANDY • PARTICLE CANDY FOR iPHONE • SPRITE CANDY • DON'T GET ANGRY! 2-3 • CLICK CLACK XL

Jan_

Ehemaliger Admin

BeitragFr, Okt 08, 2004 13:33
Antworten mit Zitat
Benutzer-Profile anzeigen
Naja, der langweilige Windows color picker gefällt mir ganz gut, aber gute arbeit!
between angels and insects
 

Kekskiller

 BeitragFr, Okt 08, 2004 20:15
Antworten mit Zitat
Benutzer-Profile anzeigen
Sehr schön, und jetzt noch eine Mausgedrückthaltenfunktion bei dem
Helligkeitsregler Very Happy .

x-pressive

 BeitragSa, Okt 09, 2004 15:37
Antworten mit Zitat
Benutzer-Profile anzeigen
Bitte sehr -schon passiert Wink Sowohl beim Gradient-Picker, als auch in der Farbauswahl kann man die Maus jetzt auch 'ziehen'.
• BLITZ SHOWCASE:
PARTICLE CANDY • PARTICLE CANDY FOR iPHONE • SPRITE CANDY • DON'T GET ANGRY! 2-3 • CLICK CLACK XL

Neue Antwort erstellen


Übersicht BlitzBasic Codearchiv

Nach Oben

Gehe zu:

Powered by phpBB © 2001 - 2006, phpBB Group