It looks like you're new here. If you want to get involved, click one of these buttons!
I created a ListScroll class to show a list of items such as Text , color or picture. Here is the demo
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
Comments
Cool. I'll try it when I get a chance :-)
Great use of clip(), @sanit. I like the bounce scrolling too.
Hey, that's nice. I really like it, @sanit.
I hadn't written a line toward solving this issue, and now I don't have to. Thanks!
@sanit, I like your ideas. I'll test your example, quickly. =;
I am commenting just so I can refer back to this thread easily latter. B-)
EDIT:
Wow - I must be slow. I never noticed the Star on the right to bookmark threads.
May I have permission to use this for my Codea Style UI (Yes, I'm still working on it)
Please feel free to modify the code. One idea can create another idea. That is the way that sharing code works. I don't think I can finish the full functionality of the list in the near future.
Here is the list of missing functionality for the ListScroll class as follows
1. Swiping to the left for deleting an item (show a delete button)
2. a Bug when swiping down through the outside of the list Scroll area
3. Double clicking for editing the item (show keyboard)
4. Smooth scrolling
5. Add new item in the List
6. Create a Base class called Item class. All of other item types should subclass from the Item class
The below code is another sample of ImageItem class
hi, I have a project similar to the List Scroll, and I get a chance to try it.
The missing functionality (from item1 to item4) works.(item5 - it can't add a item to the table?
The modified code is below