Cider Controls 1.6

gistfile1.txt

--# Frame
Frame = class()

-- Frame 
-- ver. 1.5
-- a simple rectangle for holding controls.
-- ====================


function Frame:init(left, bottom, right, top)
    self.left = left
    self.right = right
    self.bottom = bottom
    self.top = top
end

function Frame:inset(dx, dy)
    self.left = self.left + dx
    self.right = self.right - dx
    self.bottom = self.bottom + dy
    self.top = self.top - dy
end

function Frame:offset(dx, dy)
    self.left = self.left + dx
    self.right = self.right + dx
    self.bottom = self.bottom + dy
    self.top = self.top + dy
end
    
function Frame:draw()
    pushStyle()
    rectMode(CORNERS)
    rect(self.left, self.bottom, self.right, self.top)
    popStyle()
end

function Frame:roundRect(r)
    pushStyle()
    insetPos = vec2(self.left + r,self.bottom + r)
    insetSize = vec2(self:width() - 2 * r,self:height() - 2 * r)

    rectMode(CORNER)
    rect(insetPos.x, insetPos.y, insetSize.x, insetSize.y)

    if r > 0 then
        smooth()
        lineCapMode(ROUND)
        strokeWidth(r * 2)

        line(insetPos.x, insetPos.y, 
             insetPos.x + insetSize.x, insetPos.y)
        line(insetPos.x, insetPos.y,
             insetPos.x, insetPos.y + insetSize.y)
        line(insetPos.x, insetPos.y + insetSize.y,
             insetPos.x + insetSize.x, insetPos.y + insetSize.y)
        line(insetPos.x + insetSize.x, insetPos.y,
             insetPos.x + insetSize.x, insetPos.y + insetSize.y)            
    end
    popStyle()
end

function Frame:gloss(baseclr)
    local i, t, r, g, b, y
    pushStyle()
    if baseclr == nil then baseclr = color(194, 194, 194, 255) end
    fill(baseclr)
    rectMode(CORNERS)
    rect(self.left, self.bottom, self.right, self.top)
    r = baseclr.r
    g = baseclr.g
    b = baseclr.b
    for i = 1 , self:height() / 2 do
        r = r - 1
        g = g - 1
        b = b - 1
        stroke(r, g, b, 255)
        y = (self.bottom + self.top) / 2
        line(self.left, y + i, self.right, y + i)
        line(self.left, y - i, self.right, y - i)
    end
    popStyle()
end

function Frame:shade(base, step)
    pushStyle()
    strokeWidth(1)
    for y = self.bottom, self.top do
        i = self.top - y
        stroke(base - i * step, base - i * step, base - i * step, 255)
        line(self.left, y, self.right, y)
    end
    popStyle()
end

function Frame:touched(touch)
    if touch.x >= self.left and touch.x <= self.right then
        if touch.y >= self.bottom and touch.y <= self.top then
            return true
        end
    end
    return false
end

function Frame:ptIn(x, y)
    if x >= self.left and x <= self.right then
        if y >= self.bottom and y <= self.top then
            return true
        end
    end
    return false
end

function Frame:overlaps(f)
    if self.left > f.right or self.right < f.left or
    self.bottom > f.top or self.top < f.bottom then
        return false
    else
        return true
    end
end

function Frame:width()
    return self.right - self.left
end

function Frame:height()
    return self.top - self.bottom
end

function Frame:midX()
    return (self.left + self.right) / 2
end
    
function Frame:midY()
    return (self.bottom + self.top) / 2
end


--# Control
Control = class(Frame)

-- Control 1.2
-- =====================
-- Designed for use with Cider controls
-- Used alone, and as a base class for other controls
-- =====================

-- appearance changes, default setting changes
-- version 1.1 bug fixes

TOP = 1
MIDDLE = 2
BOTTOM = 3

function Control:init(s, left, bottom, right, top, callback)
    Frame.init(self, left, bottom, right, top, callback)
    self.font = "HelveticaNeue-Bold"
    self.fontSize = 16
    self.textAlign = LEFT
    self.vertAlign = TOP
    self.text = s
    self.background = color(219, 219, 219, 255)
    self.foreground = color(14, 14, 14, 255)
    self.highlight = color(101, 114, 153, 255)
    self.selected = 1
    self.value = 1
    self.active = true
    self.controlName = "Control"
    self.callback = callback or nil
end

function Control:splitText()
    local i, k
    i = 0
    for k in string.gmatch(self.text,"([^;]+)") do
        i = i + 1
        self.itemText[i] = k
    end
end

function Control:draw()
    local i, h, w, x
    pushStyle()
    noStroke()
    fill(self.background)
    Frame.draw(self)
    fill(0, 0, 0, 3)
    for i = 1,10 do
        rect(self.left, self.bottom, self:width(), self:height()/(i))
    end
    fill(self.foreground)
    textAlign(LEFT)
    textMode(CORNER)
    font(self.font)
    fontSize(self.fontSize)
    w, h = textSize(self.text)
    
    if self.textAlign == LEFT then
        x = self.left + 4
    elseif self.textAlign == CENTER then
        x = self:midX() - w / 2
    elseif self.textAlign == RIGHT then
        x = self.right - w - 8
    end
    
    if self.vertAlign == TOP then
        text(self.text, x, self.top - h)
    elseif self.vertAlign == MIDDLE then
        text(self.text, x, self:midY()- h/2)
    elseif self.vertAlign == BOTTOM then
        text(self.text, x, self.bottom + 4)
    end
    
    popStyle()
end

--ac this needs an if()
function Control:initString(ctlName)
    return self.controlName.."('"..self.text.."', " .. 
        self.left..", "..self.bottom..", "..
        self.right..", "..self.top..", "..
        ctlName.."_Clicked" ..
        ")"
end



--# Dial
Dial = class(Control)

-- Dial 1.2
-- =====================
-- Designed for use with Cider controls
-- =====================

-- 1.2 appearance changes, simplified draw
-- 1.1 bug fixes

function Dial:init(s, left, bottom, right, top, min, max, val, callback)
    Control.init(self, s, left, bottom, right, top, callback)
    self.controlName = "Dial"
    self.min = min
    self.max = max
    self.val = val
    self.fontSize = 10
    self.highlight = color(211, 211, 211, 255)
    self.hotColor = color(0, 23, 255, 255)
end

function Dial:draw()
    local x, w, h
    pushStyle()
    pushMatrix()
    fontSize(self.fontSize)
    strokeWidth(1)
    stroke(self.foreground)
    fill(self.background)
    translate(self:midX(), self:midY())
    ellipse(0, 0, self:width())
    fill(self.hotColor)
    w, h = textSize(self.text)
    text(self.text, 0, -h-5)
    strokeWidth(2)
    rotate(180)
    strokeWidth(2)
    stroke(self.foreground)
    fill(self.foreground)
    for i=0,10 do
        rotate(-30)
        line(0, self:width() / 2 - 20, 0, self:width() / 2 - 10)
        x = (self.max-self.min) / 10 * i
        text(x, 0, self:width() / 2 - 30)
    end
    fill(self.background)
    rotate(-30)
    ellipse(0, self:width() / 2 - 15, 10)
    strokeWidth(4)
    x = (self.val / (self.max-self.min))  * 300 + 30
    rotate(-x)
    line(0, 0, 0, self:width() / 2 - 20)
    strokeWidth(1)
    fill(self.hotColor)
    ellipse(0, self:width() / 2 - 20, 10)
    fill(self.background)
    ellipse(0, 0, 20)
    popMatrix()
    
    popStyle()
end

function Dial:initString(ctlName)
    return "Dial('"..self.text.."', " .. 
        self.left..", "..self.bottom..", "..
        self.right..", "..self.top..", "..
        self.min..", "..self.max..", "..self.val..", "..
        ctlName.."_Clicked" ..
        ")"
end


--# Doughnut
Doughnut = class(Control)

-- Doughnut 1.2
-- =====================
-- Designed for use with Cider controls
-- =====================

-- 1.2 apprarance changes, simplified drawing model
-- 1.1 bug fixes

function Doughnut:init(s, left, bottom, right, top, 
    min, max, val, callback)
    Control.init(self, s, left, bottom, right, top, callback)
    self.controlName = "Doughnut"
    self.min = min
    self.max = max
    self.val = val
    self.fontSize = 14
    self.intervals = 15
    self.coolColor = color(0, 255, 107, 255)
    self.warmColor = color(255, 251, 0, 255)
    self.hotColor = color(255, 7, 0, 255)
    self.warm = 9
    self.hot = 14
end

function Doughnut:draw()
    local i, x, w, h
    pushStyle()
    pushMatrix()
    smooth()
    stroke(self.foreground)
    fill(self.background)
    strokeWidth(1)
    translate(self:midX(), self:midY())
    fontSize(self.fontSize)
    ellipse(0, 0, self:width())
    
    
    strokeWidth(2)
    stroke(self.foreground)
    fill(255, 255, 255, 74)
    ellipse(0, 0, self:width() / 2 + 10)
    noStroke()
    fill(self.foreground)
    w, h = textSize(self.val)
    text(self.val, 0, h/2)
    fill(self.highlight)
    
    text(self.text, 0, -h/2)
    rotate(180)
    x = (self:width() / (self.intervals / 3.14) ) / 2
    rotate(360 / self.intervals)
    strokeWidth(1)
    for i=1,self.intervals do
        rotate(-360 / self.intervals)
        fill(self.foreground)
        if self.val >= (self.max-self.min) / self.intervals
         * i + self.min then
            fill(self.coolColor)
            if i >= self.warm then
                fill(self.warmColor)
            end
            if i >= self.hot then
                fill(self.hotColor)
            end
        end
        
        ellipse(0, self:width() / 4 + self:width() / 8, x)
        
    end
    popMatrix()
    popStyle()
end

function Doughnut:initString(ctlName)
    return "Doughnut('"..self.text.."', " .. 
        self.left..", "..self.bottom..", "..
        self.right..", "..self.top..", "..
        self.min..", "..self.max..", "..self.val..", "..
        ctlName.."_Clicked" ..
        ")"
end
--# CheckBox
CheckBox = class(Control)

-- CheckBox 1.2
-- =====================
-- Designed for use with the Cider interface designer
-- A two-state inducator that alters state on touch
-- =====================

-- 1.2 appearance changes

function CheckBox:init(t, left, bottom, right, top, callback)
    Control.init(self, t, left, bottom, right, top, callback)
    self.controlName = "CheckBox"
end

function CheckBox:draw()
    pushStyle()
    fill(self.background)
    stroke(self.foreground)
    strokeWidth(1)
    ellipse(self.left + 20, self:midY(), 40)
    if self.selected then
        fill(self.highlight)
        ellipse(self.left + 20, self:midY(), 25)
        fill(255, 255, 255, 37)
        noStroke()
        ellipse(self.left + 20, self:midY() + 5, 20, 10)
        fill(0, 0, 0, 8)
        ellipse(self.left + 20, self:midY() - 6, 20, 10)
    else
        noFill()
        stroke(self.foreground)
        strokeWidth(1)
        ellipse(self.left + 20, self:midY(), 25)
    end
    fill(self.foreground)
    textAlign(LEFT)
    textMode(CORNER)
    font(self.font)
    fontSize(self.fontSize)
    text(self.text, self.left + 45, self:midY()- 8)
    popStyle()
end

function CheckBox:touched(touch)
    if self:ptIn(touch.x, touch.y) then
        if touch.state == BEGAN  then
            self.selected = not self.selected
        end
        if self.callback ~= nil then self.callback() end
        return true
    end
    return false
end


--# Dialog
Dialog = class(Control)

-- Dialog 1.0
-- =====================
-- Designed for use with the Cider controls
-- A simple pop up window for other controls
-- =====================

function Dialog:init(t, left, bottom, right, top)
    Control.init(self, t, left, bottom, right, top)
    self.controlName = "Dialog"
    self.text = t
    self.inner = Frame(left + 4, bottom + 4, right - 4, top - 40)
    self.background = color(255, 255, 255, 255)
end

function Dialog:draw()
    pushMatrix()
    pushStyle()
    textMode(CENTER)
    textAlign(CENTER)
    fill(self.foreground)
    stroke(self.foreground)
    strokeWidth(2)
    self:roundRect(8)
    fill(self.background)
    stroke(self.background)
    text(self.text, self:midX(), self.top - 20)
    self.inner:roundRect(10)
    popStyle()
    popMatrix()
end



--# ColorSelector
ColorSelector = class(Control)

function ColorSelector:init(x, y)
    Control.init(self, "", x, y, x + 250, y + 250)
    sldRed = Slider("", 70, 200, 220, 220, 0, 256, 0)
    sldGreen = Slider("", 70, 160, 220, 180, 0, 256, 0)
    sldBlue = Slider("", 70, 120, 220, 140, 0, 256, 0)
    sldAlpha = Slider("", 70, 80, 220,  100, 0, 256, 0)
    ctlSample = Control("", 70,  10,  220,  60)
    self.background = color(203, 203, 203, 255)
end

function ColorSelector:setColor(c)
    sldRed.val = c.r
    sldGreen.val = c.g
    sldBlue.val = c.b
    sldAlpha.val = c.a
end

function ColorSelector:draw()
    pushStyle()
    pushMatrix()
    self:offset(4, -4)
    self.background = color(47, 47, 47, 99)
    Control.draw(self)
    self:offset(-4, 4)
    self.background = color(206, 206, 206, 255)
    Control.draw(self)
    translate(self.left, self.bottom)
    sldRed:draw()
    sldGreen:draw()
    sldBlue:draw()
    sldAlpha:draw()
    ctlSample:draw()
    fill(21, 21, 21, 255)
    textAlign(LEFT)
    textMode(CORNER)
    text("Red", sldRed.left - 60, sldRed.bottom)
    text("Green", sldRed.left - 60, sldGreen.bottom)
    text("Blue", sldRed.left - 60, sldBlue.bottom)
    text("Alpha", sldRed.left - 60, sldAlpha.bottom)
    popMatrix()
    popStyle()
end

function ColorSelector:getColor()
    local c
    c = color(sldRed.val, sldGreen.val, sldBlue.val, sldAlpha.val)
    return c
end

function ColorSelector:touched(touch)
    local tt
    if Control.touched(self, touch) then
        tt = Ttouch(touch)
        tt:translate(self.left, self.bottom)
        sldRed:touched(tt)
        sldGreen:touched(tt)
        sldBlue:touched(tt)
        sldAlpha:touched(tt)
        ctlSample.background = self:getColor()
        return true
    else
        return false
    end
end


--# DropList
DropList = class(Control)

-- DropList 1.2
-- =====================
-- Designed for use with the Cider interface designer
-- drop down menu item list
-- =====================

function DropList:init(s, left, bottom, right, top, callback)
    Control.init(self, s, left, bottom, right, top, callback)
    self.controlName = "DropList"
    self.itemText = {}
    self.open = false
    self:splitText()
end

function DropList:splitText()
    local i, k
    i = 0
    for k in string.gmatch(self.text,"([^;]+)") do
        i = i + 1
        self.itemText[i] = k
    end
end

function DropList:draw()
    local i, t, h
    pushStyle()
    font(self.font)
    fontSize(self.fontSize)
    textMode(CENTER)
    stroke(self.foreground)
    fill(self.background)
    Frame.draw(self)
    
    fill(self.foreground)
    if self.open then
        for i, t in ipairs(self.itemText) do
            text(t, self:midX(), self.top - i * 30 + 15)
        end
        strokeWidth(2)
        stroke(243, 9, 9, 255)
        line(self.left + 4, self.top - self.selected * 30,
        self.right - 4, self.top - self.selected * 30)
        line(self.left + 4, self.top - self.selected * 30 + 30,
        self.right - 4, self.top - self.selected * 30 + 30)
    else
        text(self.itemText[self.selected], self:midX(), self:midY())
    end
    popStyle()
end

function DropList:touched(touch)
    local h
    h = #self.itemText * 30
    if self:ptIn(touch.x, touch.y) then
        if not self.open then 
            if touch.state == BEGAN then
                self.open = true
                self.bottom = self.top - h
            end
        else 
            self.selected = 
            math.floor((self.top - touch.y + 15) / 30)
            if self.selected < 1 then self.selected = 1 
            elseif self.selected > #self.itemText then 
                self.selected = #self.itemText
            end 
        end
    end
    if touch.state == ENDED then
        self.open = false
        self.bottom = self.top - 30
        if self.callback ~= nil then self.callback() end
    end
end
    

--# IconButton
IconButton = class(Control)

-- IconButton 
-- ver. 1.2
-- a simple control that centers an image in a frame
-- ====================

-- 1.3 appearance changes, drawing changes
-- 1.2 bug fixes
-- 1.1 derives from Control class, refactored

function IconButton:init(s, left, bottom, right, top, img)
    Control.init(self, s, left, bottom, right, top)
    self.controlName = "IconButton"
    self.img = img
    self.textAlign = CENTER
    self.vertAlign = BOTTOM
end

function IconButton:draw()
    local h, w
    w, h = textSize(self.text)
    pushStyle()
    fill(self.background)
    stroke(self.foreground)
    self:roundRect(6)
    noStroke()
    stroke(self.background)
    self:inset(1, 1)
    self:roundRect(6)
    self:inset(-1, -1)
    stroke(self.foreground)
    textMode(CENTER)
    font(self.font)
    fontSize(self.fontSize)
    sprite(self.img, self:midX(), self:midY() + h / 2)
    fill(0, 0, 0, 255)
    text(self.text, self:midX(),self.bottom + h)
    popStyle()
end

function IconButton:initString(ctlName)
    return "IconButton('"..self.text.."', " .. 
        self.left..", "..self.bottom..", "..
        self.right..", "..self.top..", '"..self.img .. "')"
end


--# Label
Label = class(Control)

-- Label 
-- ver. 1.6
-- a control for basic text label
-- ====================

-- 1.6 bug fixes
-- 1.5 derives from Control class, refactored

function Label:init(s, left, bottom, right, top)
    Control.init(self, s, left, bottom, right, top)
    self.controlName = "Label"
    self.textAlign = LEFT
end

function Label:draw()
    pushStyle()
    font(self.font)
    textAlign(self.textAlign)
    textMode(CORNER)
    fontSize(self.fontSize)
    fill(self.foreground)
    text(self.text, self.left, self:midY())
    popStyle()
end

--# Main
-- Cider Controls 1.6
-- =====================
-- Designed for use with the Cider interface designer
-- Use this file to test and demostrate controls in the library
-- =====================

function setup()
    displayMode(FULLSCREEN)
    setInstructionLimit(0)
    ctlText = Control("Text Boxes", 20, HEIGHT - 300, 300, HEIGHT - 50)
    ctlText.background = color(181, 141, 203, 255)
    txtTest = TextBox("Text Box", 40, HEIGHT - 120, 280, HEIGHT - 90)
    txtTestC = TextBox("Text Box", 40, HEIGHT - 160, 280, HEIGHT - 130)
    txtTestR = TextBox("Text Box", 40, HEIGHT - 200, 280, HEIGHT - 170)
    txtLong = TextBox("Now is the winter of our discontent",
    70, HEIGHT - 280, 280, HEIGHT - 210)
    txtTestC.textAlign = CENTER
    txtTestR.textAlign = RIGHT
    
    ctlSwitch = Control("Switches", 320, HEIGHT - 300, WIDTH - 20, 
    HEIGHT - 50)
    ctlSwitch.background = color(255, 182, 0, 255)
    swtTest = Switch("On;Off", 340, 900, 420, 930)
    chkTest = CheckBox("Check box", 340, 850, 440, 880)
    
    ctlSlider = Control("Sliders", 20, HEIGHT - 500, 
    WIDTH - 20, HEIGHT - 330)
    ctlSlider.background = color(223, 200, 168, 255)
    sldTest = Slider("", 70, HEIGHT - 400, 400, HEIGHT - 370,
     0, 100, 20)
    ntsTest = NotchSlider("A;B;C", 90, HEIGHT - 460, 360, HEIGHT - 430)
     
    ctlButton = Control("Buttons", 20, 170, WIDTH - 20, 480)
    mlbTest = MultiButton("Left;Center;Right", 100, 400, 450, 440)
    btnTest = TextButton("Button", 100, 330, 250, 370)
    icbTest = IconButton("IconButton", 100, 200, 200, 300,
    "Small World:Flag")
    
    dlgTest = Dialog("Dialog Test", 100, 300, WIDTH - 100, 600)
    showDialog = false
    
    dial = Dial("Dial", 425, 530, 575, 680, 0, 100, sldTest.val)
    doughnut = Doughnut("Doughnut", 585, 530, 735, 680, 0,
     100, sldTest.val)
    doughnut.intervals = 25
    doughnut.warm=9
    doughnut.hot=13
    
    
    clrPicker = ColorSelector(100, 100)
    showColor = false
    
    tabbar = TabBar("Buttons;Dials;Selectors", 0, HEIGHT - 40, 
    WIDTH, HEIGHT)
    list = SelectList("Buttons;Dials;Selectors", 500, 330, 
    700, 450)
    list.subItem[2] = true
    list.itemSelect[1] = true
    multilist = SelectList("Buttons;Dials;Selectors", 500, 190, 
    700, 310, true)
   
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(181, 181, 181, 255)

    -- This sets the line thickness
    strokeWidth(5)

    -- Do your drawing here
    tabbar:draw()
    ctlText:draw()
    ctlSwitch:draw()
    ctlSlider:draw()
    ctlButton:draw()
    btnTest:draw()
    txtTest:draw()
    txtTestC:draw()
    txtTestR:draw()
    txtLong:draw()
    swtTest:draw()
    sldTest:draw()
    mlbTest:draw()
    icbTest:draw()
    chkTest:draw()
    ntsTest:draw()
    dial:draw()
    doughnut:draw()
    list:draw()
    multilist:draw()
    if showDialog then 
        sound(SOUND_JUMP, 24666)
        dlgTest:draw()
    end
    if showColor then
        clrPicker:draw()
    end
end

function touched(touch)
    if showColor then 
        showColor = clrPicker:touched(touch)
        icbTest.background = clrPicker:getColor()
    end
    if btnTest:touched(touch) then
        showDialog = true
    end
    if icbTest:touched(touch) then
        showColor = true
    end
    if dlgTest:touched(touch) then
        showDialog = false
    end
    txtTest:touched(touch)
    txtTestC:touched(touch)
    txtTestR:touched(touch)
    txtLong:touched(touch)
    if swtTest:touched(touch) then
        CCActiveTextBox = nil
    end
    
    if sldTest:touched(touch) then
        dial.val = sldTest.val
        doughnut.val = sldTest.val
    end
    mlbTest:touched(touch)
    chkTest:touched(touch)
    ntsTest:touched(touch)
    tabbar:touched(touch)
    list:touched(touch)
    multilist:touched(touch)
    --menu2:touched(touch)
end

function keyboard(key) 
    if CCActiveTextBox then
        CCActiveTextBox:acceptKey(key)
    end
end


--# MultiButton
MultiButton = class(Control)

-- MultiButton 1.3
-- =====================
-- Designed for use with the Cider Controls
-- Allows selecting between 2-x choices
-- =====================

-- 1.3 appearance changes

function MultiButton:init(s, left, bottom, right, top, callback)
    Control.init(self, s, left, bottom, right, top, callback)
    self.controlName = "MultiButton"
    self.itemText = {}
    self:splitText()
end

function MultiButton:draw()
    local w, i, b, h
    pushStyle()
    w = (self:width()) / #self.itemText
    h = self:height()
    strokeWidth(2)
    fill(self.background)
    stroke(self.foreground)
    self:roundRect(6)
    noStroke()
    stroke(self.background)
    self:inset(1, 1)
    self:roundRect(6)
    self:inset(-1, -1)
    stroke(self.foreground)
    textMode(CENTER)
    font(self.font)
    fontSize(self.fontSize)
    
    for i, b in ipairs(self.itemText) do
        fill(self.foreground)
        strokeWidth(2)
        if i < #self.itemText then
            line(self.left + i * w, self.top -1, 
            self.left + i * w, self.bottom + 1)
        end
        text(b, (self.left + i * w) - (w / 2), self:midY())
        noStroke()
        fill(0, 0, 0, 22)
        
        if i ~= self.selected then
            h = self:height()
            rect(self.left + i * w - w, self.bottom,
            w, h * 0.6 )
            rect(self.left + i * w - w, self.bottom,
            w, h * 0.4 )
            rect(self.left + i * w - w, self.bottom,
            w, h * 0.2 )
        else
            fill(self.highlight)
            rect(self.left + i * w - w + 1, self.bottom + 1, 
            w - 2, self:height() - 2)
            fill(0, 0, 0, 28)
            rect(self.left + i * w - w, self:midY() - h/4,
            w, self:height() * 0.6)
            rect(self.left + i * w - w, self:midY(),
            w, self:height() * 0.4 )
            rect(self.left + i * w - w, self:midY() + h/4,
            w, self:height() * 0.3 )
            fill(255, 255, 255, 255)
            text(b, (self.left + i * w) - (w / 2), self:midY())
        end
    end
    popStyle()
end

function MultiButton:touched(touch)
    if self:ptIn(touch.x, touch.y) then
        if touch.state == BEGAN then
            w = (self:width()) / #self.itemText
            i = math.floor((touch.x - self.left) / w) + 1
            self.selected = i
        end
        if self.callback ~= nil then self.callback() end
        return true
    end
end


--# NotchSlider
NotchSlider = class(Control)

-- NotchSlider 1.1
-- =====================
-- Designed for use with Cider controls
-- offers option of sliding to preset positions
-- =====================

-- 1.1 appearance changes

function NotchSlider:init(s, left, bottom, right, top, callback)
    Control.init(self, s, left, bottom, right, top, callback)
    self.controlName = "NotchSlider"
    self.itemText = {}
    self:splitText()
end

function NotchSlider:splitText()
    local i, k
    i = 0
    for k in string.gmatch(self.text,"([^;]+)") do
        i = i + 1
        self.itemText[i] = k
    end
end

function NotchSlider:draw()
    local x, i, scale
    pushStyle()
    font(self.font)
    fontSize(self.fontSize)
    textAlign(CENTER)
    textMode(CENTER)
    strokeWidth(20)
    stroke(self.background)
    fill(self.background)
    line(self.left, self:midY(), self.right, self:midY())
    if #self.itemText > 1 then
        x = self:width() / (#self.itemText - 1)
        for i = 1, #self.itemText do
            fill(self.background)
            stroke(self.background)
            ellipse(self.left + (i-1) * x, self:midY(), 35)
            fill(self.foreground)
            text(self.itemText[i], self.left + (i-1) * x, 
            self:midY() + 25)
        end
        x = self.left + (self.selected - 1) * x
    else
        x = self:midX()
    end
    fill(0, 0, 0, 16)
    noStroke()
    ellipse(x, self:midY() - 12, 25, 12)
    ellipse(x, self:midY() - 10, 45, 30)
    strokeWidth(12)
    stroke(self.highlight)
    ellipse(x, self:midY(), 40)
    fill(255, 255, 255, 56)
    noStroke()
    ellipse(x, self:midY() + 12, 25, 12)
    popStyle()
end

function NotchSlider:touched(touch)
    local x, scale
    if touch.state == BEGAN or touch.state == MOVING then
        if self:ptIn(touch.x, touch.y) then
            if #self.itemText > 1 then
                scale = self:width() / (#self.itemText - 1)
                x = touch.x - self.left + 20
                self.selected = math.floor(x / scale) + 1
            end
            if self.callback ~= nil then self.callback() end
            return true
        end
    end
end



--# PopMenu
PopMenu = class()

-- PopMenu 
-- ver. 1.0
-- a control that provides a simple menu
-- warning: not looked at in a LONG time
-- ====================

function PopMenu:init(x, y)
    self.x = x
    self.y = y
    self.items={}
    self.frames = {}
end

function PopMenu:draw()
    local h, w, x, i
    pushStyle()
    h = 10
    w = 100
    for i, item in ipairs(self.items) do
        h = h + 60
        if string.len(item) * 20 > w then
            w = string.len(item) * 20
        end  
    end
    w = w + 20
    fill(0, 0, 0, 255)
    rect(self.x, self.y, w, h)
    textAlign(CENTER)
    for i, item in ipairs(self.items) do
        self.frames[i] = Frame(self.x + 10, self.y + i * 60 - 50, 
            self.x + w - 10, self.y + i * 60 )
        self.frames[i]:gloss(color(255, 255, 255, 255))
        x = self.x + w / 2
        text(item, x, self.y + i * 60 - 24)
    end
    popStyle()
end

function PopMenu:touched(touch)
    local i
    for i, frame in ipairs(self.frames) do
        if frame:touched(touch) then
            fill(255, 14, 0, 255)
            frame:draw()
            return i
        end
    end
    return nil
end


--# SelectList
SelectList = class(Control)

-- SelectList 1.0
-- =====================
-- Designed for use with Cider controls
-- mimics the grouping control of Apple's UI
-- use the multi property to switch between 
-- simgle option and multioption lists
-- =====================

-- 1.1 appearance changes

function SelectList:init(s, left, bottom, right, top, multi)
    Control.init(self, s, left, bottom, right, top, nil) 
    self.font = "HelveticaNeue-Bold"
    self.controlName = "SelectList"
    self.pressed = false
    self.over = false
    self.background = color(238, 238, 238, 255)
    
    self.callback = callback or nil
    self.itemText = {}
    self:splitText()
    self.itemSelect = {}
    self.subItem = {}
    self.multi = multi
    for i = 1, #self.itemText do
        self.itemSelect[i] = false
        self.subItem[i] = false
    end
end

function SelectList:draw()
    local y
    pushStyle()
    font(self.font)
    fontSize(self.fontSize)
    stroke(self.foreground)
    fill(self.foreground)
    self:roundRect(5)
    self:inset(1, 1)
    noStroke()
    Frame.draw(self)
    stroke(self.background)
    fill(self.background)
    self:roundRect(5)
    self:inset(-1, -1)
    
    strokeWidth(2)
    for i, b in ipairs(self.itemText) do
        w, h = textSize(self.itemText[i])
        fill(self.foreground)
        y = self.top - i * h*2 + h
        if self.multi then
            text(self.itemText[i], self.left + 35 +w/2, y)
        else
            text(self.itemText[i], self.left + 10 +w/2, y)
        end
        stroke(self.foreground)
        strokeWidth(3)
        if self.multi then
            if self.itemSelect[i] then
                line(self.left + 12, y, self.left + 15, y - 4)
                line(self.left + 15, y - 4, self.left + 20, y + 7)
            end
        else
            if i == self.selected then
                line(self.right - 23, y, self.right - 20, y - 4)
                line(self.right - 20, y - 4, self.right - 15, y + 7)
            end
            if self.subItem[i] then
                line(self.right - 20, y + 5, self.right - 15, y)
                line(self.right - 20, y - 5, self.right - 15, y)
            end
        end
        stroke(self.highlight)
        strokeWidth(1)
        noSmooth()
        if i < #self.itemText then
            line(self.left, self.top - i * h*2, self.right,
            self.top - i * h*2)
        end
        smooth()
    end
    popStyle()
end

function SelectList:touched(touch)
    local i
    pushStyle()
    font(self.font)
    fontSize(self.fontSize)
    w, h = textSize(self.itemText[1])
    popStyle()
    if self:ptIn(touch.x, touch.y) and touch.state == BEGAN then
        i = 1
        i = math.floor((self.top - touch.y) / (h*2)) + 1
        if i > #self.itemText then
            i = #self.itemText
        end
        if self.multi then
            self.itemSelect[i] = not self.itemSelect[i]
        elseif not self.subItem[i] then
            self.selected = i
        end
        return true
    end
end

--# Slider
Slider = class(Control)

-- Slider 1.4
-- =====================
-- Designed for use with Cider controls
-- offers option of sliding to 1-x values
-- =====================

-- 1.4 appearance changes
-- 1.3 refactored, based on Control class

function Slider:init(s, left, bottom, right, top, min, max, val, callback)
    Control.init(self, s, left, bottom, right, top, callback)
    self.controlName = "Slider"
    self.min = min
    self.max = max
    self.val = val
end

function Slider:draw()
    local x, y, scale
    pushStyle()
    font(self.font)
    fontSize(self.fontSize)
    stroke(self.foreground)
    fill(self.background)
    h, w = textSize(self.max)
    scale = (self:width() - h * 2) / (self.max - self.min)
    x = self.left + h + ((self.val - self.min) * scale)
    y = self:midY()
    strokeWidth(15)
    stroke(self.background)
    line(self.left + h, y, self.right - h, y)
    stroke(self.highlight)
    line(self.left + h, y, x, y)
    stroke(255, 255, 255, 29)
    strokeWidth(7)
    line(self.left + h, y +4, x, y + 4)
    
    strokeWidth(1)
    stroke(self.foreground)
    fill(self.background)
    ellipse(x, y, 25)
    fill(0, 0, 0, 9)
    noStroke()
    ellipse(x, y+4, 22, 11)
    ellipse(x, y, 22, 22)
    fill(self.foreground)
    h, w = textSize("Slider")
    textMode(CENTER)
    textAlign(LEFT)
    text(self.min, self.left, y)
    textAlign(RIGHT)
    text(self.max, self.right, y)
    textAlign(CENTER)
    text(self.text, self:midX(), y + h)
    if self.val > self.min and self.val < self.max then
        text(self.val, x, y + h / 2)
    end
    popStyle()
end

function Slider:touched(touch)
    local x, scale
    if touch.state == BEGAN or touch.state == MOVING then
        if self:ptIn(touch.x, touch.y) then
            x = touch.x - self.left - 10
            scale = ((self.right - self.left) - 20) /
             (self.max - self.min)
            self.val = math.floor(x / scale) + self.min
            if self.val < self.min then
                self.val = self.min
            elseif self.val > self.max then
                self.val = self.max
            end
            if self.callback ~= nil then self.callback() end
            return true
        end
    end
end

function Slider:initString()
    return "Slider('"..self.text.."', " .. 
        self.left..", "..self.bottom..", "..
        self.right..", "..self.top..", "..self.min..", "..
        self.max..", "..self.val..")"
end





--# Switch
Switch = class(Control)

-- Switch 1.5
-- =====================
-- Designed for use with Cider controls
-- two-position selector
-- =====================

-- 1.5 appearance changes, refactored closer to Apple UI
-- 1.4 bug fixes
-- 1.3 cosmetic changes, refactored, based on Control

function Switch:init(s, left, bottom, right, top, callback)
    Control.init(self, s, left, bottom, right, top, callback)
    self.controlName = "Switch"
    self.itemText = {}
    self:splitText()
end

function Switch:splitText()
    local i, k
    i = 0
    for k in string.gmatch(self.text,"([^;]+)") do
        i = i + 1
        self.itemText[i] = k
    end
end

function Switch:draw()
    pushStyle()
    font(self.font)
    fontSize(self.fontSize)
    strokeWidth(1)
    textMode(CENTER)
    if self.selected then
        stroke(self.highlight)
        fill(self.highlight)
        h = self:height()
        self:roundRect(h/2)
        fill(127, 127, 127, 53)
        rect(self.left + h/2, self.top - 12, 
        self:width() - h, 8)
        fill(253, 253, 253, 30)
        rect(self.left + h/2, self.bottom + 4, 
        self:width() - h, 8)
        noStroke()
        stroke(self.foreground)
        fill(self.background)
        strokeWidth(1)
        ellipse(self.right - h/2, self:midY(), self:height())
        noStroke()
        fill(127, 127, 127, 30)
        ellipse(self.right - h/2, self:midY()-4, 
        self:height()-4, self:height() / 1,5)
        ellipse(self.right - h/2, self:midY()+4, 
        self:height()-4, self:height() / 2)

        fill(self.background)
        if #self.itemText > 0 then
            text(self.itemText[1], self:midX()-h/2, self:midY())
        end
    else
        fill(self.background)
        stroke(self.background)
        h = self:height()
        self:roundRect(h/2)
        fill(127, 127, 127, 42)
        rect(self.left+h/2, self.top - 12, 
        self:width() - h, 8)
        fill(255, 255, 255, 60)
        rect(self.left+h/2, self.bottom + 4, 
        self:width() - h, 8)
        stroke(self.foreground)
        fill(self.background)
        strokeWidth(1)
        ellipse(self.left + h/2, self:midY(), self:height())
        noStroke()
        fill(212, 212, 212, 30)
        ellipse(self.left + h/2, self:midY()-4, 
        self:height()-4, self:height() / 1,5)
        ellipse(self.left + h/2, self:midY()+4, 
        self:height()-4, self:height() / 2)
        
        fill(self.foreground)
        if #self.itemText > 1 then
            text(self.itemText[2], self:midX()+h/2, self:midY())
        end
    end
    popStyle()
end

function Switch:touched(touch)
    if self:ptIn(touch.x, touch.y) then
        if touch.state == BEGAN then
            self.selected = not self.selected
            if self.callback ~= nil then self.callback() end
        end
        return true
    else
        return false
    end
end


--# TabBar
TabBar = class(Control)

-- TabBar 1.0
-- =====================
-- Designed for use with Cider controls
-- provides a strip of selectable tabs
-- =====================

function TabBar:init(s, left, bottom, right, top, callback)
    Control.init(self, s, left, bottom, right, top, callback)
    self.controlName = "TabBar"
    self.itemText = {}
    self.tab = {}
    self:splitText()
    self:sizeTabs()
    self.selected = 1
end

function TabBar:sizeTabs()
    local i, x, w
    x = 2
    for i=1, #self.itemText do
        w = textSize(self.itemText[i])
        self.tab[i] = Frame(x, 0, x + w + 8, self:height()-4)
        x = self.tab[i].right 
    end
end

function TabBar:draw()
    local w, i, b, h, x
    pushStyle()
    pushMatrix()
    translate(self.left, self.bottom)
    fill(self.foreground)
    noStroke()
    rect(0, 0, self:width(), self:height())
    strokeWidth(2)
    stroke(127, 127, 127, 255)
    line(0, 0, self:width(), 0)
    fontSize(self.fontSize)
    font(self.font)
    for i = 1, #self.itemText do
        self.tab[i].top = self:height() - 4
        if i == self.selected then
            fill(self.highlight)
        else
            fill(self.background)
        end
        self.tab[i]:draw()
        if i == self.selected then
            fill(255, 255, 255, 255)
        else
            fill(0, 0, 0, 255)
        end
        text(self.itemText[i], self.tab[i]:midX(), self.tab[i]:midY())
    end
    
    popMatrix()
    popStyle()
end

function TabBar:touched(touch)
    if self:ptIn(touch.x, touch.y) then
        if touch.state == BEGAN then
            for i = 1, #self.itemText do
                tt = Ttouch(touch)
                tt.x = tt.x - self.left
                tt.y = tt.y - self.bottom
                if self.tab[i]:touched(tt) then
                    self.selected = i
                end
            end
        end
        return true
    else
        return false
    end
end

--# TextBox
TextBox = class(Control)

-- TextBox (numbers restarted, as this is a rewrite)
-- ver. 1.6
-- a control for basic string editing
-- ====================

-- 1.6 appearance changes, minor behavior changes
-- 1.5 Refactored, based on Control

CCActiveTextBox = nil

function TextBox:init(s, left, bottom, right, top, callback)
    Control.init(self, s, left, bottom, right, top, callback)
    self.controlName = "TextBox"
    self.blink = ElapsedTime
    self.blinkstate = true
    self.insertPoint = string.len(s)
end

function TextBox:draw()
    local x, w, h
    pushStyle()
    pushMatrix()
    font(self.font)
    textMode(CORNER)
    textWrapWidth(self:width() - 8)
    textAlign(LEFT)
    fontSize(self.fontSize)
    w, h = textSize(self.text)
    fontSize(self.fontSize)
    
    stroke(self.foreground)
    fill(self.foreground)
    self:roundRect(3)
    self:inset(1, 1)
    noStroke()
    Frame.draw(self)
    stroke(self.background)
    fill(self.background)
    self:roundRect(3)
    self:inset(-1, -1)
    --text layout
    if self.textAlign == LEFT then
        x = self.left + 4
    elseif self.textAlign == CENTER then
        x = self:midX() - w / 2
    elseif self.textAlign == RIGHT then
        x = self.right - w - 8
    end
    fill(self.foreground)
    if self.vertAlign == TOP then
        text(self.text, x, self.top - h)
    elseif self.vertAlign == MIDDLE then
        text(self.text, x, self:midY()- h/2)
    elseif self.vertAlign == BOTTOM then
        text(self.text, x, self.bottom + 4)
    end
    --insert position
    w, h = textSize(self.text)
    if self.textAlign == LEFT then
        x = self.left + w + 6
    elseif self.textAlign == CENTER then
        x = self:midX() + w / 2  + 2
    elseif self.textAlign == RIGHT then
        x = self.right - 4
    end
    if self == CCActiveTextBox then
        if self.blink < ElapsedTime - 0.3 then
            self.blink = ElapsedTime
            self.blinkstate = not self.blinkstate
        end
        if self.blinkstate then
            strokeWidth(3)
            stroke(self.highlight)
            line(x, self.top - h, x, self.top)
        end
    end
    popMatrix()
    popStyle()
end

function TextBox:acceptKey(k)
    if k ~= nil then
        if string.byte(k) == nil then
            if string.len(self.text) > 0 then
                self.text = string.sub(self.text, 
                 1, string.len(self.text) - 1)
            end
        end
        self.text = self.text..k
    end
end

function TextBox:touched(touch)
    if self:ptIn(touch.x, touch.y) then
        CCActiveTextBox = self
        self.insertPoint = string.len(self.text)
        if not isKeyboardShowing() then showKeyboard() end
        if self.callback ~= nil then self.callback() end
        return true
    else
        return false
    end
end
    


--# TextButton
TextButton = class(Control)

-- TextButton 
-- ver. 1.8
-- a control for displaying a simple button
-- ====================

-- 1.8    appearance changes
-- 1.7    derived from Control class, appearance changes
-- 1.6    cosmetic changes

function TextButton:init(s, left, bottom, right, top, callback)
    Control.init(self, s, left, bottom, right, top, callback) 
    self.controlName = "TextButton"
    self.pressed = false
    self.over = false
    self.callback = callback or nil
end

function TextButton:draw()
    pushStyle()
    font(self.font)
    fontSize(self.fontSize)
    stroke(self.foreground)
    fill(self.foreground)
    self:roundRect(5)
    self:inset(2, 2)
    if self.over then
        stroke(self.highlight)
        fill(self.highlight)
    else
        stroke(self.background)
        fill(self.background)
    end
    self:roundRect(5)
    self:inset(-2, -2)
    fill(127, 127, 127, 33)
    noStroke()
    rect(self.left, self:midY() - 4, self:width(), self:height() / 2)
    rect(self.left, self:midY() + self:height() / 4 - 4, self:width(),
         self:height() / 4)
    fill(255, 255, 255, 37)
    rect(self.left, self.bottom, self:width(), self:height() / 4 - 4)
    if self.over then
        fill(255, 255, 255, 255)
    else
        fill(self.foreground)
    end
    text(self.text, self:midX(), self:midY())
    popStyle()
end

function TextButton:exit()
    
end

function TextButton:touched(touch)
    -- touch in button
    if self:ptIn(touch.x, touch.y) then
        if touch.state == BEGAN then 
            self.pressed = true
            self.over = true
        elseif self.pressed then
            if touch.state == MOVING then 
                self.over = true
            elseif touch.state == ENDED then
                self.over = false
                self.pressed = false
                return true
            end
        end
    -- touch outside button
    elseif self.pressed then
        if touch.state == MOVING then 
            self.over = false
        elseif touch.state == ENDED then
            self.over = false
            self.pressed = false
        end
    end
    
    return false
    
end



--# Ttouch
Ttouch = class()

-- Translatable Touch 
-- ver. 1.0
-- maps fields of a touch but is easily modified.
-- ====================.

function Ttouch:init(touch)
    self.x = touch.x
    self.y = touch.y
    self.state = touch.state
    self.prevX = touch.prevX
    self.prevY = touch.prevY
    self.deltaX = touch.deltaX
    self.deltaY = touch.deltaY
    self.id = touch.id
    self.tapCount = touch.tapCount
    self.timer = 0
end

function Ttouch:translate(x, y)
    self.x = self.x - x
    self.y = self.y - y
end