UI

--# Main
-- 0 UI

-- Use this function to perform your initial setup
function setup()
    displayMode(FULLSCREEN)
    scene = Item({0,0},
        Button{100,300,180,60,text="Hello"},
        Button{400,300,100,40,text="Ping"},
        Slider{100,500,300,40,value=10,min=0,max=10},
        Slider{100,550,300,40,value=10,min=0,max=20}
    )
end

-- This function gets called once every frame
function draw()
    background(40, 40, 50)
    scene:draw()
end

function touched(touch)
    scene:touched(touch)
end
--# UI
Item = class()
Item.focusColor = color(0, 144, 255, 255)
function Item:init(ps, ...)
    self.x, self.y = ps[1] or ps.x, ps[2] or ps.y
    self.w, self.h = ps[3] or ps.w, ps[4] or ps.h
    self.visible = ps.visible
    self.children = arg
    self.touches = {}
    self.ps = ps
    if not ps.color then ps.color = color(255, 255, 255, 255) end
end
function Item:draw()
    if self.visible == false then return end
    for i,c in ipairs(self.children) do
        pushMatrix()
        translate(c.x,c.y)
        c:draw()
        popMatrix()
    end
end
function Item:touched(touch, m)
    if self.visible == false then return end
    m = (m or matrix()):translate(self.x,self.y)
    if self.pressed then self:handleTouch(touch,m) end
    for i,c in ipairs(self.children) do c:touched(touch, m) end
end
function Item:handleTouch(touch,m)
    local down = touch.state == BEGAN or touch.state == MOVING 
    local inside, pos = self:inside(touch, m)
    if touch.state == BEGAN and inside then
        self.touches[touch.id] = true
    end
    if self.touches[touch.id] and self.pressed then
        self:pressed(pos, down, inside)
    end
    if not down then
        self.touches[touch.id] = nil
    end
end
function Item:inside(touch, m)
    local p = vec2(m[13], m[14])
    local lt = vec2(touch.x,touch.y) - p
    local inside = lt.x >= 0 and lt.x <= self.w and
                   lt.y >= 0 and lt.y <= self.h    
    return inside, lt
end
function Item:onChanged() end

Rect = class(Item)
function Rect:init(ps, ...)
    Item.init(self, ps, ...)
    self.m = mesh()
    self.m:addRect(self.w/2, self.h/2, self.w, self.h)
    self.m:setColors(self.ps.color)
end
function Rect:draw()
    self.m:draw()
    Item.draw(self)
end

Text = class(Item)
function Text:draw()
    textMode(CENTER)
    fontSize(self.ps.size)
    fill(198, 198, 198, 255)
    text(self.ps.text)
end
function Text:setText(text)
    self.ps.text = text
end

Image = class(Rect)
function Image:init(ps, ...)
    Rect.init(self,ps,...)
    self.m.texture = ps.image
end

BorderImage = class(Rect)
function BorderImage:init(ps, ...)
    Item.init(self, ps, ...)
    self.m = mesh()
    self.m.texture = ps.image
    self.iw, self.ih = spriteSize(ps.image)
    local b = ps.border
    local bl,br,bt,bb = b,b,b,b
    local mw,mh = self.iw-bl-br, self.ih-bt-bb    
    self.ri = 0
    self:slice(0,0,bl,bt, 0,0,bl,bt)
    self:slice(bl,0,self.w-bl-br,bt, bl,0,mw,bt)
    self:slice(self.w-br,0,br,bt, bl+mw,0,br,bt)
    self:slice(0,bt,bl,self.h-bt-bb, 0,bt,bl,mh)
    self:slice(bl,bt,self.w-bl-br,self.h-bt-bb, bl,bt,mw,mh)
    self:slice(self.w-br,bt,br,self.h-bt-bb, bl+mw,bt,br,mh)
    self:slice(0,self.h-bb,bl,bb, 0,bt+mh,bl,bb)
    self:slice(bl,self.h-bb,self.w-bl-br,bb, bl,bt+mh,mw,bb)
    self:slice(self.w-br,self.h-bb,br,bb, bl+mw,bt+mh,br,bb)      
    self.m:setColors(self.ps.color or color(255,255,255,255))
end
function BorderImage:slice(x,y,w,h, tx,ty,tw,th)
    self.m:addRect(x+w/2, y+h/2, w, h)
    self.ri = self.ri + 1        
    self.m:setRectTex(self.ri,
        tx/self.iw,ty/self.ih,tw/self.iw,th/self.ih)
end

Button = class(BorderImage)
function Button:init(ps,...)
    ps.image = readImage("Documents:GreyButton")
    ps.border = 10
    ps.color = color(127, 127, 127, 255)
    BorderImage.init(self,ps,...)
    self.textItem = Text{self.w/2,self.h/2,text=ps.text,size=self.h-10}
    self.children = {self.textItem}
end
function Button:pressed(pos, down, inside)
    if down then
        self.m:setColors(Item.focusColor)
    else
        self.m:setColors(self.ps.color)
    end
end

Slider = class(Rect)
function Slider:init(ps,...)
    Rect.init(self,ps,...)
    self.slideItem = Rect({0,0,self.h,self.h,color=color(128)})
    self.slideText = Text({self.w+35,self.h/2,text="0",size=self.h})
    self.children = {self.slideItem, self.slideText}
end
function Slider:pressed(pos, down, inside)
    Button.pressed(self.slideItem, pos, down, inside)
    if down then
        local v = math.max(0,math.min(self.w-self.h, pos.x))
        self.slideItem.x = v
        local t = v/(self.w-self.h)
        local tv = self.ps.min + t*(self.ps.max-self.ps.min)
        self.slideText:setText(string.format("%5.1f", tv))
    end
end