UI Color Picker

Here you will find various resources to help you create color pickers in Gideros Studio.

note:You may have to provide your own assets (fonts, gfx, …).

Color Picker

<syntaxhighlight lang="lua"> ColorPicker = Core.class(Sprite)

function ColorPicker:init() self.colors = { 0xFFFFFF, 0x99CCFF, 0xCCFFFF, 0xFFFF99, 0xFFCC99, 0xFF99CC, 0xC0C0C0, 0x993366, 0x00CCFF, 0x00FFFF, 0x00FF00, 0xFFFF00, 0xFFCC00, 0xFF00FF, 0x999999, 0x800080, 0x3366FF, 0x33CCCC, 0x339966, 0x99CC00, 0xFF9900, 0xFF0000, 0x808080, 0x666699, 0x0000FF, 0x008080, 0x008000, 0x808000, 0xFF6600, 0x800000, 0x333333, 0x333399, 0x000080, 0x333300, 0x993300, 0x000000 } self.currColor = self.colors[1] --current color self.colW = 31 --column width self.colH = 22 --column height self.ind = 2 --indent size self.m = 6 -- collumn count local ip, fp = math.modf(#self.colors/self.m) self.n = ip if fp > 0 then self.n = self.n + 1 end self:drawButton(self.currColor) self:drawPallete() self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self) end

function ColorPicker:drawRec(x, y, w, h, bw, bc, ba, fc, fa) local shape = Shape.new() shape:setLineStyle(bw, bc, ba) shape:setFillStyle(Shape.SOLID, fc, fa) shape:beginPath() shape:moveTo(x, y) shape:lineTo(x + w, y) shape:lineTo(x + w, y + h) shape:lineTo(x, y + h) shape:closePath() shape:endPath() return shape end

function ColorPicker:drawButton(color) self.btn = self:drawRec(0, 0, self.colW, self.colH, 1, 0x000000, 1, color, 1) self:addChild(self.btn) end

function ColorPicker:drawPallete() self.pallete = self:drawRec(0, self.colH + self.ind, self.m*self.colW + self.ind*(self.m + 1), self.n*self.colH + self.ind*(self.n + 1), 1, 0x000000, 1, 0xDDDDDD, 1) self.pallete.colors = {} self:addChild(self.pallete) self.pallete:setVisible(false) local x, y = 0, self.colH + self.ind for i = 1, self.n do y = y + self.ind for j = 1, self.m do if (i - 1)*self.m + j > #self.colors then return end x = x + self.ind local ci = (i - 1)*self.m + j self.pallete.colors[ci] = self:drawRec(x, y, self.colW, self.colH, 1, 0x000000, 1, self.colors[ci], 1) self.pallete:addChild(self.pallete.colors[ci]) x = x + self.colW end x = 0 y = y + self.colH end end

function ColorPicker:onMouseDown(e) if self.btn:hitTestPoint(e.x, e.y) then self.pallete:setVisible(not self.pallete:isVisible()) return end if self.pallete:isVisible() then for i = 1, #self.pallete.colors do local color = self.pallete.colors[i] if color:hitTestPoint(e.x, e.y) then self.currColor = self.colors[i] self:drawButton(self.currColor) self.pallete:setVisible(false) self:changeColor() return end end end end

function ColorPicker:changeColor() self.e = Event.new("COLOR_CHANGED") self.e.color = self.currColor self:dispatchEvent(self.e) end

---

USAGE

--local colorPicker = ColorPicker.new() --stage:addChild(colorPicker) --colorPicker:setPosition(10, 10) --function onColorChanged(e) -- application:setBackgroundColor(e.color) --end --colorPicker:addEventListener("COLOR_CHANGED", onColorChanged) </source>