I have been working to create a set of common controls for my codea projects, (i.e. buttons, toggle switches, status bars, etc.) and have a working button prototype. The event handler is started, but needs a little work to implement. It detects clicks, though, and gives visual feedback that it has been clicked (by way of changing colors).
It is made of a pretty simple mesh / gradient but I really like how it turned out. Hope someone finds it useful.
button = class()
function button:init(text,location,width,height)
self.state = "normal"
self.text = text
self.textColor = color(255,255,255,192)
self.location = location
self.width = width
self.height = height
self.visible = true
self.fontSize = 28
self.font = "ArialRoundedMTBold"
self.color1 = color(255, 255, 255, 96)
self.color2 = color(128,128,128,32)
self.presscolor1 = color(192, 224, 224, 128)
self.presscolor2 = color(96, 192, 224, 128)
self.verts = self:createVerts(self.width, self.height)
self.myMesh = mesh()
self.myMesh.vertices = triangulate(self.verts)
self.vertColor = {}
self:recolor()
end
function button:setColors(c1,c2,p1,p2)
self.color1 = c1
self.color2 = c2
self.presscolor1 = p1
self.presscolor2 = p2
end
function button:textOptions(fn, sz, col)
self.font = fn
self.fontSize = sz
self.textColor = col
end
function button:draw()
if self.visible == true then
self:recolor()
pushMatrix()
translate(self.location.x,self.location.y)
self.myMesh:draw()
fill(self.textColor)
fontSize(self.fontSize)
font(self.font)
text(self.text, self.width/2,self.height/2)
self:drawLines(self.verts)
popMatrix()
end
end
function button:touched(touch)
if self.visible then
if touch.x >= self.location.x and touch.x <= self.location.x + self.width and touch.y >= self.location.y and touch.y <= self.location.y + self.height then
if touch.state == BEGAN then
self.state = "pressing"
elseif touch.state == ENDED then
if self.state == "pressing" then
self.state = "normal"
print "pressed."
end
end
else
self.state = "normal"
end
end
end
function button:createVerts(w,h)
local r
local v = {}
if w > 100 or h > 100 then
if w>=h then r = round(h/100) else r = round(w/100) end
else
r = 1
end
v[1] = vec2(w,6*r)
v[2] = vec2(w-r,4*r)
v[3] = vec2(w-2*r,2*r)
v[4] = vec2(w-4*r,r)
v[5] = vec2(w-6*r,0)
v[6] = vec2(6*r,0)
v[7] = vec2(4*r,r)
v[8] = vec2(2*r,2*r)
v[9] = vec2(r,4*r)
v[10] = vec2(0,6*r)
v[11] = vec2(0,h-6*r)
v[12] = vec2(r,h-4*r)
v[13] = vec2(2*r,h-2*r)
v[14] = vec2(4*r,h-r)
v[15] = vec2(6*r,h)
v[16] = vec2(w-6*r,h)
v[17] = vec2(w-4*r,h-r)
v[18] = vec2(w-2*r,h-2*r)
v[19] = vec2(w-r,h-4*r)
v[20] = vec2(w,h-6*r)
return v
end
function button:drawLines(v)
noSmooth()
strokeWidth(1)
stroke(0, 0, 0, 192)
for i=1, #v-1 do
line(v[i].x,v[i].y,v[i+1].x,v[i+1].y)
end
line(v[#v].x,v[#v].y,v[1].x,v[1].y)
end
function button:recolor()
local lt, dk
if self.state == "normal" then
lt = self.color1
dk = self.color2
else
lt = self.presscolor1
dk = self.presscolor2
end
for i=1,3 * #self.verts - 6 do
if self.myMesh.vertices[i].y > self.height/2 then
self.vertColor[i] = lt
else
self.vertColor[i] = dk
end
end
self.myMesh.colors = self.vertColor
end
function round(v)
return math.floor(v + 0.5)
end
And the example program as pictured:
function setup()
b1 = button("Windows style", vec2(100, 100), 250, 60)
b1:setColors(color(192,192,192,255),color(128,128,192,255),
color(0,255,255,255),color(0,128,128,255))
b1:textOptions("Verdana-Bold", 24, color(64,64,64,192))
b2 = button("Apple style", vec2(100,250),180,120)
b3 = button("Custom Buttons", vec2(100, 450), 300, 100)
b3:setColors(color(255,192,192,255),color(255,128,192,255),
color(255, 92, 92, 255),color(255,0,0,255))
b3:textOptions("SnellRoundhand-Bold", 42, color(64,64,64,192))
end
function touched(touch)
b1:touched(touch)
b2:touched(touch)
b3:touched(touch)
end
function draw()
background(46, 39, 64, 255)
b1:draw();
b2:draw();
b3:draw();
end
Anyway, I appreciate the feedback. I’m not sure I have used any other programming tools with so much feedback and community interaction from the tool creators.