PanelClass

Code Sharing
1

PanelClass.
A configurable panel, work in progress. Great for monitoring variables, easy to implement.
See it on action: http://www.udec.cl/~mmendozaf/image12.jpg
This example took 3 lines to implement:

    iPane=cPanel(100,100,200,200,20,true,true,color(0,0,0,100),true,color(0,0,0,200),1)
    iPane:createImageLabel("Scenario:",color(200,200,255),"Platformer Art:Icon","varScen")
    iPane:createImageLabel("Parallax X:",color(200,200,255),"Platformer Art:Bush","parallaxX")

…and the respective “draw()” line.

Ver 1.2
Last change: now it can displays a variable, see screenshot below.
Changelog: http://pastebin.com/QVZyRzw2

Current Screenshot: http://www.udec.cl/~mmendozaf/image11.jpg

The main routine:

-- PanelClass

-- Use this function to perform your initial setup
function setup()
    textMode(CORNER)
    leftPane=cPanel(100,100,WIDTH/3,HEIGHT,20)
    parameter.action("Touch the screen to take a gem...")
    parameter.watch("lastYdrawn")
    parameter.watch("HEIGHT")
    --those testing parameters resizes the previous programmed ones
    parameter.integer("cpHeight",0,HEIGHT,600,function()    leftPane:changeHeight(cpHeight) end)
    parameter.integer("cpWidth",0,HEIGHT,300,function() leftPane:changeWidth(cpWidth) end)
    parameter.integer("cpX",0,WIDTH,100,function() leftPane:changeX(cpX) end)
    parameter.integer("cpY",0,HEIGHT,100,function() leftPane:changeY(cpY) end)
    parameter.number("cpMargin",1,200,1,function() leftPane:changeMargin(cpMargin) end)
    varHeroName="The Hero"
    leftPane:createImageLabel("Hero Name",color(150),"Planet Cute:Character Boy","varHeroName")
    varTreasures=3
    leftPane:createImageLabel("Treasures",color(150), "Planet Cute:Chest Closed","varTreasures")
    varMapName="Dusty Lands"
    leftPane:createLabel("Current Map",color(150),"varMapName")
    leftPane:createLabel("Line 4")
    leftPane:createLabel("ElapsedTime:",color(190,0,0),"ElapsedTime")
    varTime=os.time()
    leftPane:createLabel("Current Time:",color(150,255,150),"varTime")
    leftPane:createLabel("Line 6 By now, the scrolling is buggy")
    leftPane:createLabel("Line 7 Drag the slider to shrink the box")
    varBlueGems=24
    varGreenGems=12
    varOrangeGems=2
    leftPane:createImageLabel("Blue Gem",color(150,150,200),"Planet Cute:Gem Blue","varBlueGems")
    leftPane:createImageLabel("Green Gem",color(150,200,150),"Planet Cute:Gem Green","varGreenGems")
    leftPane:createImageLabel("Orange Gem",color(200,170,150),"Planet Cute:Gem Orange","varOrangeGems")
end
-- This function gets called once every frame
function draw()
    background(35, 35, 35, 255)
    leftPane:draw()
    time=os.time()
end
function touched(touch)
    if touch.state==BEGAN then 
        varBlueGems = varBlueGems + 1 
        sound(SOUND_PICKUP, 41)
    end
end

The panel class:

cPanel = class()

lastYdrawn = 0
function cPanel:init(x,y,w,h,separation,separator,bg,bgColor,border,strokeColor,margin)
    -- you can accept and set parameters here
    self.x = x
    self.y = y
    self.ScrollY=0
    self.ScrollDelta=0
    self.height = h
    self.width = w
    self.objectTable = {}
    self.objectType = {}
    self.objectFontColor = {}
    self.objectData = {}
    self.objectVariables = {}
    if separation then
        self.separation=separation
        else
        self.separation=0
    end
    if bg then
        self.bg=bg
        else
        self.bg=true
    end
    if separator then
        self.separator=separator
        else
        self.separator=true
    end
    if bgColor then
        self.bgColor=bgColor
        else
        self.bgColor=color(22, 22, 22, 50)
    end
    if border then
        self.border=border
        else
        self.border=true
    end
    if strokeColor then
        self.strokeColor=strokeColor
        else
        self.strokeColor=color(255, 255, 255, 92)
    end
    if margin then
        self.margin = margin
        else
        self.margin=0
    end
end

function cPanel:createLabel(argText,argColor,argVariable)
    table.insert(self.objectTable,argText)
    table.insert(self.objectType,"label")
    if argColor == nil then argColor = color(150) end 
    table.insert(self.objectFontColor,argColor)
    table.insert(self.objectData,"nil")
    if argVariable then table.insert(self.objectVariables,argVariable) else table.insert(self.objectVariables,"nil") end
end
function cPanel:createImageLabel(argText,argColor, argImage,argVariable)
    table.insert(self.objectTable,argText)
    table.insert(self.objectType,"imageLabel")
    if argColor == nil then argColor = color(150) end 
    table.insert(self.objectFontColor,argColor)
    table.insert(self.objectData,argImage)
    if argVariable then table.insert(self.objectVariables,argVariable) else table.insert(self.objectVariables,"nil") end
end

function cPanel:draw()
    if CurrentTouch.state==ENDED then
        self.ScrollDelta = self.ScrollDelta *0.9
        else
        self.ScrollDelta= CurrentTouch.deltaY
    end
    
    self.ScrollY=self.ScrollY + self.ScrollDelta
    self:getBounds()
    font("SourceSansPro-Regular")
    fontSize(20)
    textWrapWidth(self.width-20)
    CurrentY=self.y
    local skip=false
    if self.bg==true then
        pushStyle()
        fill(self.bgColor)
        noStroke()
        rectMode(CORNERS)
        rect(pointA.x,pointA.y,pointC.x,pointC.y)
        popStyle()
    end
    --to do: this scrolling section is not properly working
    if self.ScrollY<=0 then
        self.ScrollY=0
        elseif self.ScrollY>lastYdrawn and lastYdrawn > 0 then
        self.ScrollY=lastYdrawn
        elseif self.ScrollY>lastYdrawn and lastYdrawn <= 0 then
        self.ScrollY=0
    end
    
    for k,v in pairs(self.objectTable) do
        
        dummy, yOffset=textSize(v)
        CurrentY = CurrentY + yOffset + self.separation
        itemX=self.x+10
        itemY=HEIGHT - CurrentY
        if CurrentY>(self.height +self.y)then
            --skip=true
        end
        if skip==false then
            pushMatrix()
            translate(0,self.ScrollY)
            self:drawItem(k,v,itemX,itemY)
            if self.separator==true and not (k==table.maxn(self.objectTable)) then
                pushStyle()
                lineCapMode(ROUND)
                stroke(self.strokeColor)
                strokeWidth(1)
                line(itemX-5,itemY-(self.separation/2),itemX+self.width-20,itemY-(self.separation/2))
                popStyle()
            end
            popMatrix()
        end
    end
    lastYdrawn = itemY-self.height+self.y+266
    --to do
    if self.border == true then
        self:drawBorder()
    end
    
end
function cPanel:getBounds()
    pointA=vec2(self.x-self.margin,HEIGHT-self.y+self.margin)
    pointB=vec2(self.x-self.margin,HEIGHT-self.y-self.height-self.margin)
    pointD=vec2(self.x+self.width+self.margin,HEIGHT-self.y+self.margin)
    pointC=vec2(self.x+self.width+self.margin,HEIGHT-self.y-self.height-self.margin)
end
function cPanel:drawBorder()
    pushStyle()
    lineCapMode(ROUND)
    stroke(self.strokeColor)
    strokeWidth(1)
    line(pointA.x,pointA.y,pointB.x,pointB.y)
    line(pointB.x,pointB.y,pointC.x,pointC.y)
    line(pointC.x,pointC.y,pointD.x,pointD.y)
    line(pointD.x,pointD.y,pointA.x,pointA.y)
    popStyle()
end

function cPanel:drawItem(k,v,itemX,itemY)
    selector=self.objectType[k]
    pushStyle()
    fill(self.objectFontColor[k])
    if selector=="label" then
        text(v,itemX,itemY)
        if self.objectVariables[k] == "nil" then else
            pushStyle()
            fill(varyColor(self.objectFontColor[k],1.4))
            local txtSize=textSize(_G[self.objectVariables[k]])
            text(_G[self.objectVariables[k]],pointC.x -txtSize-10 ,itemY)
            popStyle()
        end
    elseif selector=="imageLabel" then
        spriteMode(CORNER)
        
        sprite(self.objectData[k],itemX,itemY,40,40)
        text(v,itemX + 50,itemY)
        if self.objectVariables[k] == "nil" then else
            pushStyle()
            fill(varyColor(self.objectFontColor[k],1.4))
            local txtSize=textSize(_G[self.objectVariables[k]])
            text(_G[self.objectVariables[k]],pointC.x -txtSize-10 ,itemY)
            popStyle()
        end
    else
        fill(255, 0, 24, 255)
        text("Unrecognised item: " .. selector,itemX,itemY)
        
    end
    popStyle()
end

function cPanel:changeHeight(h)
    self.height=h
end
function cPanel:changeWidth(w)
    self.width=w
end
function cPanel:changeX(x)
    self.x=x
end
function cPanel:changeY(y)
    self.y=y
end
function cPanel:changeMargin(m)
    self.margin=m
end

function varyColor(c,val)
    --intensifies or lightens the color "c" to "val" (0 to 2)
    local r,g,b,a
    r=c.r
    g=c.g
    b=c.b
    a=c.a
    r=r*val
    g=g*val
    b=b*val
    if r>255 then r=255 end
    if g>255 then g=255 end
    if b>255 then b=255 end
    return color(r,g,b,a)
end
2

Nice, and useful. Will look at your wip with curiosity. It would be nice if text swiping would make it to disappear when outside box boundaries. Thanks

Ps. I had to reload the project once to see the text displayed

3

Thanks, i already realised about that, sometimes happened that Codea detects some ghosting touch… I will debug that. To hide the text adequately i tried to use SetContext() but it al messed up…

4

Edited: The scrolling is buggy, im working on it, maybe choosing another method.
Now, there is another item: the imageLabel. Next, i will add info objects, capable of showing some information and numbers. I accept suggestions! In the future, it will proccesses touches, to serve as a toolbar!
Screenshot:
http://www.udec.cl/~mmendozaf/image11.jpg

5

Updated: now it support colouring and variable showing.