I created a ListScroll class to show a list of items such as Text , color or picture. Here is the demo
http://www.youtube.com/watch?v=UdSu9S3_Kzw
I do not finish it but I want to do how it can work. Thank you @Mark for your inspiration from Lists program.
Here the source code
--List Scroll class
ListScroll = class()
function ListScroll:init(pos,w,h)
-- you can accept and set parameters here
self.pos = pos
self.width= w
self.height= h
self.itemHeight = 0
self.borderColor = color(100,100,100,255)
self.borderWidth = 2
self.backColor = color(255,255,255,255)
self.sepColor = color(100,100,100,255)
self.rowColor1 = color (255,255,255,255)
self.rowColor2 = color(186, 186, 186, 100)
self.allowEdit = false
self.allowDelete = true
self.allowInsert = false
self.multiSelected = false
self.items = {}
self.posY = self.pos.y+self.height
self.prevState = nil
self.selectedItem = nil
end
function ListScroll:add(i)
self.itemHeight = i.height
i.width = self.width
table.insert(self.items,i)
end
function ListScroll:selectedItem()
return self.selectedItem
end
function ListScroll:selectedValue()
if self.selectedItem==nil then
return nil
end
return self.items[self.selectedItem].value
end
function ListScroll:itemCount()
return #self.items
end
function ListScroll:draw()
-- Codea does not automatically call this method
pushStyle()
strokeWidth(self.borderWidth)
fill(self.backColor)
stroke(self.borderColor)
rect(self.pos.x,self.pos.y,self.width,self.height)
clip(self.pos.x,self.pos.y,self.width,self.height)
for i=1,#self.items do
strokeWidth(1)
if i%2==0 then
fill(self.rowColor1)
else
fill(self.rowColor2)
end
self.items[i]:draw(self.pos.x,self.posY-i*self.itemHeight)
end
noClip()
popStyle()
end
function ListScroll:touched(touch)
-- Codea does not automatically call this method
if not (touch.x>=self.pos.x and touch.x<=self.pos.x+self.width and
touch.y>=self.pos.y and touch.y<=self.pos.y+self.height) then
return
end
if touch.state==MOVING then
self.prevState=MOVING
self.posY = self.posY + touch.deltaY
if self.posY>=self.pos.y+self.height+self.itemHeight*(#self.items-1) then
self.posY=self.pos.y+self.height+self.itemHeight*(#self.items-1)
end
elseif touch.state==ENDED then
if self.prevState==MOVING then
if self.posY<self.pos.y+self.height then
self.posY=self.pos.y+self.height
end
self.prevState=nil
else
local i = math.ceil((self.posY-touch.y)/self.itemHeight)
if i<=#self.items then
self.selectedItem = i
self.items[i]:touched(touch)
if not self.multiSelected then
for r=1,#self.items do
if r ~= i then
self.items[r].selected=false
end
end
end
else
self.selectedItem = nil
end
end
end
end
--Color Item
ColorItem = class()
function ColorItem:init(id,c,w,h)
-- you can accept and set parameters here
self.pos = vec2(0,0)
self.id = id
self.selected = false
self.selectedColor = color(0,0,0, 100)
self.width = w
self.height = h
self.value = c
end
function ColorItem:draw(x,y)
-- Codea does not automatically call this method
self.pos = vec2(x,y)
pushStyle()
fill(self.value)
rect(self.pos.x,self.pos.y,self.width,self.height)
if self.selected then
noFill()
strokeWidth(5)
stroke(self.selectedColor)
rect(self.pos.x,self.pos.y,self.width,self.height)
end
popStyle()
end
function ColorItem:touched(touch)
-- Codea does not automatically call this method
if self.selected then
self.selected=false
else
self.selected=true
end
end
--Text Item class
TextItem = class()
function TextItem:init(id,value)
-- you can accept and set parameters here
self.pos = vec2(0,0)
self.id = id
self.value=value
self.selected=false
self.selectedColor = color(223, 218, 150, 255)
self.width = 0
self.height = 0
self.textColor = color(0,0,0,255)
self.textAlign=LEFT
self.fontName = "Courier"
self.fontSize=24
font(self.fontName)
fontSize(self.fontSize)
_,self.height = textSize(self.fontName)
end
function TextItem:draw(x,y)
-- Codea does not automatically call this method
self.pos = vec2(x,y)
pushStyle()
strokeWidth(1)
stroke(stroke())
if self.selected then
fill(self.selectedColor)
end
rect(self.pos.x,self.pos.y,self.width,self.height)
font(self.fontName)
fontSize(self.fontSize)
textMode(CORNER)
textAlign(self.textAlign)
textWrapWidth(self.width)
fill(self.textColor)
text(self.value,self.pos.x+5,self.pos.y)
popStyle()
end
function TextItem:touched(touch)
-- Codea does not automatically call this method
if self.selected then
self.selected=false
else
self.selected=true
end
end
--Main
-- Use this function to perform your initial setup
function setup()
print("Hello World!")
--displayMode(FULLSCREEN)
listtxt = ListScroll(vec2(50,100),300,600)
vocab = {"cat","bird","desk","pen","car","dog","rubber","ruler","book","school","bike"}
for i=1,#vocab do
itm = TextItem(i,vocab[i])
listtxt:add(itm)
end
cols = {color(255,0,0,255),color(0,0,0,255),color(0,255,0,255),color(0,0,255,255),
color(255,255,255,255),color(255,255,0,255),color(255,0,255,255),color(0,255,255,255)}
listcolor = ListScroll(vec2(400,100),300,600)
for i=1,#cols do
col = ColorItem(i,cols[i],300,50)
listcolor:add(col)
end
end
-- This function gets called once every frame
function draw()
-- This sets a dark background color
background(0)
-- This sets the line thickness
--strokeWidth(5)
-- Do your drawing here
listtxt:draw()
listcolor:draw()
end
function touched(touch)
listtxt:touched(touch)
listcolor:touched(touch)
--[[
if touch.state==ENDED then
print(listtxt:itemCount())
print(listtxt:selectedValue())
end
--]]
end