How do I Create a Color Picker Swatch?

This lesson will show you how to make a color picker swatch.

Create a Graphic

Create a Graphic

Select the Graphic tool (1) and draw a square graphic on a stack (2).

Make Graphic Opaque

Make Graphic Opaque

Open the property inspector for the graphic and set the Opaque property to true.

Edit the Script

Edit the Script

Open the script editor for the graphic and enter the script shown below.

The script uses the answer color dialog to display the system color picker (1). The backgroundcolor of the graphic is passed in as the default color to display in the color picker (2). The color the user selects is then assigned to the background color of the graphic (3).

==========

Copy & Paste

==========

on mouseUp pBtnNum
	if pBtnNum is 1 then
		## Prompt user for color using current color as default
		answer color with the effective backgroundcolor of me
		
		## If user didn't cancel then assign background color 
		## to chosen color
		if the result is not "cancel" then
			put it into theChosenColor
			set the backgroundcolor of me to theChosenColor
		end if
	end if
end mouseUp

The Script in Action

The Script in Action

Switch to Run mode. Clicking on the graphic will now display the color picker.

Choose a new color and click OK.

The graphic is now assigned the new color.

4 Comments

rizal

I've tried this tuts, but it cant run because of theChosenColor
is there any clue?
thanks

Hanson Schmidt-Cornelius

Hi Rizal,

you did not provide much information in your comment. I can only assume that you have Variable Checking switched on. This is a tick next to "Edit -> Variable Checking". You can either turn this off, or you could declare the variable "theChosenColor" before it is first used. Update the code as follows:

on mouseUp pBtnNum
local theChosenColor
if pBtnNum is 1 then
## ...

Kind Regards,

Hanson

rizal

could i apply this method to an image which is thresholded ?
i mean, i want to make an application about color design. the steps are opening image > threshold (using slider) > coloring (maybe use this method)
i've done my app just till thresholding. then, i very confuse on coloring step.
could u help me?

Hanson Schmidt-Cornelius

Hi Risal,

you could certainly use a color picker to return a value to which you would want to set regions in an image. Not sure if you can use the exact code from this example, as you are setting the "backgroundcolor". If you threshold an image, you may only be wanting to set certain regions of an image.

Once you have thresholded an image, I would assume that the image contains two colours. You may then want to process the entire image and set one of the colours to a different value than the one you thresholded to. This value could be provided by the colour picker.

Have a look at the following lessons:
http://lessons.runrev.com/s/lessons/m/4071/l/25371
http://lessons.runrev.com/s/lessons/m/4071/l/26580
http://lessons.runrev.com/s/lessons/m/4071/l/26667
http://lessons.runrev.com/s/lessons/m/4071/l/29233

This should give you the fundamental building blocks for some image processing. You may find the command "convolve" in the following lesson useful:
http://lessons.runrev.com/s/lessons/m/4071/l/26580

It allows you to loop through all pixel in an image and do something to them.

Kind Regards,

Hanson

Add your comment

E-Mail me when someone replies to this comment