App With Columns and Button and IF statements

Hello, I want to make an App with Columns and Button to add things to Column.
Here are some picture that would help
http://imgur.com/HYuTysR
http://imgur.com/FJW72YX
http://imgur.com/p0qughZ
http://imgur.com/X8d6SKe
http://imgur.com/67vbaKf

Hi! What do you want to know?

I’m completely new to Codea so idk where to start

If you have no programming background, it is going to be very very long for you to reach that goal…
I would myself use my library ‘xfc’ and make one window for each column, then you can print what you want in each column.

@Haxton - if you know nothing, then I wouldn’t start on a project straight away. Rather look at the tutorials and sample code in the wiki link above.

You could start by learning about tables and then touches

@Haxton Could you go into a little more detail. Do you want columns of buttons or input boxes or both. Looking at the link you posted doesn’t explain it very we’ll.

Columns of Buttons and the Forth Column is like a menu

If you have any question just ask I will try my best to explain since English isn’t really my first language

I wonder instead of making column can I just put a sprite to do the basic layout?

@Haxton Not sure if this is what you’re after, but here’s columns of buttons. Tap a button and it’s description will show at the top of the screen. Of course, different things could happen depending on the button pressed.

EDIT: code below was updated. See several post below for update info.


displayMode(FULLSCREEN)

function setup()
    b1tab={}
    table.insert(b1tab,button(100,550,100,50,"1"))
    table.insert(b1tab,button(100,500,100,50,"2"))
    table.insert(b1tab,button(100,450,100,50,"3"))
    table.insert(b1tab,button(100,400,100,50,"4"))
    table.insert(b1tab,button(100,350,100,50,"5"))
    table.insert(b1tab,button(100,300,100,50,"6")) 
    table.insert(b1tab,button(100,250,100,50,"7"))
    table.insert(b1tab,button(100,200,100,50,"8"))
    table.insert(b1tab,button(100,150,100,50,"9"))
    table.insert(b1tab,button(100,100,100,50,"10"))

    table.insert(b1tab,button(300,550,100,50,"11"))
    table.insert(b1tab,button(300,500,100,50,"12"))
    table.insert(b1tab,button(300,450,100,50,"13"))
    table.insert(b1tab,button(300,400,100,50,"14"))
    table.insert(b1tab,button(300,350,100,50,"15"))
    table.insert(b1tab,button(300,300,100,50,"16")) 
    table.insert(b1tab,button(300,250,100,50,"17"))
    table.insert(b1tab,button(300,200,100,50,"18"))
    table.insert(b1tab,button(300,150,100,50,"19"))
    table.insert(b1tab,button(300,100,100,50,"20"))

    table.insert(b1tab,button(500,550,100,50,"21"))
    table.insert(b1tab,button(500,500,100,50,"22"))
    table.insert(b1tab,button(500,450,100,50,"23"))
    table.insert(b1tab,button(500,400,100,50,"24"))
    table.insert(b1tab,button(500,350,100,50,"25"))
    table.insert(b1tab,button(500,300,100,50,"26")) 
    table.insert(b1tab,button(500,250,100,50,"27"))
    table.insert(b1tab,button(500,200,100,50,"28"))
    table.insert(b1tab,button(500,150,100,50,"29"))
    table.insert(b1tab,button(500,100,100,50,"30"))
end

function draw() 
    background(40, 40, 50)
    for a,b in pairs(b1tab) do
        b:draw()
    end
end

function touched(t)
    for a,b in pairs(b1tab) do
        b:touched(t,a)
    end
end                

button=class()

function button:init(x,y,w,h,desc)
    self.x=x
    self.y=y
    self.w=w
    self.h=h
    self.desc=desc
    self.show=false
    self.black=false
end

function button:draw()
    rectMode(CENTER)
    fill(255)
    if not self.black then
        rect(self.x,self.y,self.w,self.h)
        fill(255,0,0)
        if self.show then
            text(self.desc,self.x,self.y)
        end
    end
end

function button:touched(t,a)
    if t.state==BEGAN then
        s1=ElapsedTime   
    end
    if t.state==ENDED then
        s2=ElapsedTime
        if t.x>self.x-self.w/2 and t.x<self.x+self.w/2 then
            if t.y>self.y-self.h/2 and t.y<self.y+self.h/2 then
                if s2-s1>.2 then
                    self.show=true
                else
                    col=21
                    if a<21 then
                        col=11
                    end
                    if a<11 then
                        col=1
                    end
                    for z=col,col+9 do
                        b1tab[z].black= not b1tab[z].black
                    end
                end
            end
        end
    end
end


Thank a lot Dave that what I have in mind but is there a way to separate between hold and touch? Because I only want the description to show up on Hold and turn the column black when one of the button on that column is touched

@Haxton So you want each column to disappear (turn black) if you touch a button, but you want the description to show on the button if it’s held. I’m not sure I understand what you’re trying to accomplish.

@Haxton I’m not sure what this would be used for or if I understood what you were after. But I changed the code above to do what I think you said. If you hold a button for more than 2/10 of a second, the text will show on that button. If you tap any button for less than 2/10 of a second, the column will turn black. If you tap the blank column, it will show again. Like I said, I’m not sure what this would be used for.

@dave1707 Thanks Dave for all your hard work
to save the trouble i edit my drawing and make it way simpler
hope this would help
instead of many of different function there are only a few now
http://imgur.com/PKuFEB6

http://imgur.com/2xuxleH

http://imgur.com/VlQtnKG#0

@Haxton, @Dave1707 - in the interests of keeping the code compact, this should replace all the table inserts. It will make it easier to change if you ever want to move things around. I have not checked the code works.

b1tab={}  --as before
for i=1 to 3
   for j=1 to 10
        table.insert(b1tab,button(100,i*200-100,600-j*50,50,tostring(i*10+j-10))
   end
end

@Ignatz Since I didn’t know exactly what all the buttons would do, I didn’t take the shortcut to create the buttons. I figured that each button would call a function when pressed. By doing it the long way, a different function name would be added as a parameter to each line as needed. That’s the hard part about writing some examples, you don’t have all the details to know exactly what to write.

@dave1707 - if you want to attach a function to each button, I would simply list them in a table like so

btnFunctions={btn1Function, anotherFunction, yetAnother, ,,,,}

then they could be referenced by the index of the pressed button

@Ignatz That would work, but added as a parameter to each button, it would be easier to see the function name that was attached to a button instead of having to count buttons and functions to match them. See below with button and function names added.

    table.insert(b1tab,button(100,550,100,50,"Something",showThis))
    table.insert(b1tab,button(100,500,100,50,"Display",displayThat))
    table.insert(b1tab,button(100,450,100,50,"Name",doSomething))

@dave1707 - I thought you would say that. I accept the point, I just don’t like a lot of code repetition! Anyway, I guess we’d better let Haxton have his thread back :wink: