Buttons on Multiple Screens

I haven’t been able to find an example of using buttons on multiple screens. I’ve set up a button class and have everything working but the areas that I’ve set up as buttons on one screen are “live” on other screens even though I haven’t drawn the buttons on that screen. I initialize all buttons at startup. If I try to initialize the buttons for a screen when that screen comes up, Touched() complains. I could probably check to see if buttons exist in Touched() but I’m hoping there is an easier way. I think I’m just missing something simple and thought I’d ask the general question before uploading my code. Thanks.

@DaveW - it’s impossible to tell without seeing your code

@DaveW The easiest way to have buttons on one screen not to be live on another screen is to set a variable that’s different for each screen. When you check the button area, check the variable for the screen you’re on and the buttons for that screen.

@Dave1707, I believe you mean to check the variable in touched(). That would be much simpler than what I’ve been tinkering with. Thanks again for all your help.

@DaveW Just happened to have an example handy. When you go into the different screens, press the “Done” button in the upper left of the screen to return.


displayMode(FULLSCREEN)

function setup() 
    func=menu    -- start screen
    
    buttonTab={}    -- buttons table
    
    -- button(x,y,width,height,button name,button screen,button function)
    
    -- buttons that show on the menu screen
    table.insert(buttonTab,button(350,600,100,50,"Screen 1",menu,screen1))
    table.insert(buttonTab,button(350,500,100,50,"Screen 2",menu,screen2))
    table.insert(buttonTab,button(350,400,100,50,"Screen 3",menu,screen3))
    table.insert(buttonTab,button(700,50,100,50,"EXIT",menu,close))
    
    -- buttons that show on screen1
    table.insert(buttonTab,button(350,600,150,50,"Google",screen1,url1))
    table.insert(buttonTab,button(350,500,150,50,"twolivesleft",screen1,url2))
    table.insert(buttonTab,button(350,100,150,50,"Menu",screen1,menu))
    
    -- buttons that show on screen2
    table.insert(buttonTab,button(350,600,150,50,"map quest",screen2,url3))
    table.insert(buttonTab,button(350,100,150,50,"Menu",screen2,menu))
    
    -- buttons that show on screen3
    table.insert(buttonTab,button(350,600,150,50,"amazon",screen3,url4))    
    table.insert(buttonTab,button(350,100,150,50,"Menu",screen3,menu))
end

function draw()
    background(40, 40, 50)
    fill(255)
    func()    -- call the function set by the button
end

function touched(t)    -- check if a button was pressed
    if t.state==BEGAN then
        for a,b in ipairs(buttonTab) do
            if b:touched(t) then
                break
            end                
        end
    end
end

function menu()
    background(58, 97, 136, 255)
    fontSize(30)
    text("Menu Screen",350,700)
    drawButtonTab()
end

function screen1()
    background(101, 43, 43, 255)
    fontSize(30)
    text("Screen 1",350,700)
    drawButtonTab()
end

function screen2()
    background(110, 165, 74, 255)
    fontSize(30)
    text("Screen 2",350,700)
    drawButtonTab()
end

function screen3()
    background(150, 144, 44, 255)
    fontSize(30)
    text("Screen 3",350,700)
    drawButtonTab()
end

function url1()
    openURL('http://www.google.com',true)
    func=screen1    -- return to screen1
end

function url2()
    openURL('http://twolivesleft.com',true)
    func=screen1    -- return to screen2
end

function url3()
    openURL('http://www.mapquest.com',true)
    func=screen2    -- return to screen3
end

function url4()
    openURL('http://www.amazon.com',true)
    func=screen3    -- return to screen4
end

function drawButtonTab()    -- draw selected buttons from button table
    fontSize(20)
    for a,b in ipairs(buttonTab) do
        b:draw()
    end
end    

button=class()

function button:init(x,y,w,h,name,screen,func)
    self.x=x    -- x position
    self.y=y    -- y position
    self.w=w    -- width
    self.h=h    -- height
    self.name=name    -- name to put on the button 
    self.screen=screen -- screen to draw the button on
    self.func=func    -- function to call when the button is pressed
end

function button:draw()
    if func==self.screen then    -- draw the button
        fill(31, 178, 212, 255)
        ellipse(self.x,self.y,self.w,self.h)
        fill(255, 0, 0, 255)
        text(self.name,self.x,self.y)
    end
end

function button:touched(t)
    if func==self.screen then    -- only check current screen button 
        if t.x>self.x-self.w/2 and t.x<self.x+self.w/2 and
            t.y>self.y-self.h/2 and t.y<self.y+self.h/2 then
                func=self.func
                return true
        end
        return false
    end
end

@Dave1707, I went back to my code and added the variable checks and everything seems to be working wonderfully! This added only 6 lines of code as I was already using variables for each screen. I’ll work through the additional code you posted for more pointers. Many thanks.

@dave1707, you have an example for everything :))

@CodeaNoob I try, it gives me something to do. I’ll think of things and write some code to try it out. I save the code just in case someone might ask about something similar. If I don’t have it, then sometimes I can write something up real quick.

@dave1707, The code you posted was helpful on a second level–my next task was an About screen with a link to the school Web site. I quickly roughed it out after looking at your code. I’ll need to list you as coauthor. thanks.