Add a Color Picker To Your Corona App With One Line of Code!

Last week I posted a tutorial showing how to enable finger painting in your Corona apps, and while I was putting together a sample app for that post I decided I wanted to enable users to change the color of their virtual paint from right within the app. So I did some searching on the web for a “color picker” I could plug into my sample app, and I did find a number of options (here’s one example), but none of them gave me exactly what I was looking for.

The closest fit for my needs was a terrific bit of code that somebody with the user name “StarCrunch” contributed to the Code Exchange last year. StarCrunch’s code was pretty darn close to what I envisioned – and most importantly, he or she had already worked out the math used to power a visual color picker, something I had no interest in doing from scratch. However, there were a few issues I needed to fix in order to fully meet my needs:

• I needed Graphics 2.0-compatible code (this is especially important for anything dealing with color, since RGB values are no longer on a 0-255 scale)
• I needed the picker to “return” the RGBA values for a picked color so that something could be done with them.
• StarCrunch’s code calculated the hex code for a picked color and displayed it on-screen. This is useful information, but just not something I needed.
• I needed a way for the user to adjust the alpha value of the picked color using their finger.
• I wanted to remove or hide the picker after the user had picked their color.
• I wanted my picker set up as an external module that could simply be included into any existing project (for easy “one line of code” integration).

So I set to work creating my own color picker, with StarCrunch’s excellent code to lead the way. The result is colorPicker.lua, my own color picker module that can be added to any Corona project with just one line of code!

Get Pickin’

Here’s how you can add my color picker to any existing Corona SDK app:

1. Download colorPicker.lua (right-click and download linked file) and drop it into your project folder (where your main.lua file is).
2. Somewhere in your code (this could be inside of a Composer/Storyboard scene, or simply in your main.lua), require the module as follows:

   local colorPicker = require("colorPicker")

3. When you’re ready to bring up the color picker (this is likely something that should happen in response to a button press), simply call colorPicker.show():

   colorPicker.show(listener)
   -- "listener" should be the the name of a function that will do something the returned RGBA values of the picked color

4. That’s it! As soon as colorPicker.show() is called, the screen will dim and get blurry, and then the color picker will transition in to the center of the screen. The color picker will automatically adjust its height and width based on the target device’s screen size and orientation, so it will look the same on a 320×480 iPhone 3GS as it does on a 2048×1536 iPad Air. Once you’ve selected your color, just tap on the dimmed background to remove the picker and return to your app.

Syntax

When you call colorPicker.show(), you have the option of passing up to 5 variables into the function that will determine what to do with the picked color values as well as the color that the picker should default to when it first comes into view. It’s worth noting that if you call colorPicker.show() without passing any variables into the function, the picker will still show up, but it will default to a fully opaque red and picking a color will not change anything in your app. Here’s a closer look at the syntax:

colorPicker.show(listener, R, G, B, A)
	-- "listener" must be the name of a function that will handle the returned RGBA values of the picked color
	-- R, G, and B must be numbers between 0 and 1 that represent the RGB values of the default color when the picker loads
	-- A must be a number between 0 and 1 that represents the alpha value of the default color when the picker loads

-- EXAMPLE #1:
colorPicker.show(myFunction)
	-- the example above would bring up a picker that defaults to a fully opaque red, and would call the function "myFunction" after the picker is closed.
	
-- EXAMPLE #2:
colorPicker.show(myOtherFunction, 0, 0, 1, .5)
	-- the example above would bring up a picker that defaults to a 50% opaque blue, and would call the function "myOtherFunction" after the picker is closed.

The listener function that handles the RGBA values returned by the picker can do whatever you want it to. Below is a fully-functional main.lua where a display object called “myRect” will be colored according to the picked color, and the picker will always default to myRect’s current color when it is shown. We’ll add a Runtime listener so that if the user taps anywhere on the screen, the color picker will show up.

-- require the colorPicker module
local colorPicker = require("colorPicker")

-- draw a rectangle on the screen
local myRect = display.newRect(0, 0, display.contentWidth * .5, display.contentWidth * .5)
	myRect.x, myRect.y = display.contentCenterX, display.contentCenterY
	myRect.r, myRect.g, myRect.b, myRect.a = 1, 1, 1, 1
	
-- here is our listener function to change the rectangle's color
local function pickerListener(r, g, b, a)
	myRect:setFillColor(r, g, b, a)
	myRect.r, myRect.g, myRect.b, myRect.a = r, g, b, a
end

-- add a Runtime listener to bring in the color picker
Runtime:addEventListener("tap", function() colorPicker.show(pickerListener, myRect.r, myRect.g, myRect.b, myRect.a) end)

Have You Used It?

This module is free to download, free to use, and you are free to modify it to your heart’s content. I hope that you find it useful! But if you do use it in one of your apps, please share a link to your app in the comments, or contact me so I can see how you integrated it into your app. I’d love nothing more than to see to see my code getting used out in the wild. Enjoy!