Changing the picture of a button?

Getting Started Newbie Questions
#1

I have a template i’m using for a class file for a button, but I can seem to figure out how to change the image of the button. Here is the code for the class file

class = require ‘scripts.30log’

PushButton2 = class

{

x = display.contentCenterX,

y = display.contentCenterY,

width = 100,

height = 40,

selFill = { 20, 30, 40 },

unselFill = { 0.5, 0.5, 0.5 },

selStroke = { 1, 1, 1 },

unselStroke = { 0.8, 0.8, 0.8 },

labelColor = { 0, 0, 0 },

labelSize = 14,

labelFont = native.systemFontBold,

__name = ‘PushButton2’

}

function PushButton2:toggle( skipCall )

self.selected = not self.selected

self.unselRect.isVisible = not self.selected

self.selRect.isVisible = self.selected

if(self.selected and self.listener and not skipCall ) then

self:listener( { target = self.unselRect,

            x = self.unselRect.x,

            y = self.unselRect.y,

            timer = system.getTimer(),

            phase = “ended” } )

end

end

function PushButton2:isSelected()

return (self.selected == true)

end

function PushButton2:getText()

return (self.labelText)

end

function PushButton2:setText( newText )

self.labelText = newText

self.label.text = newText

end

function PushButton2:touch( event )

local target = event.target

local id = event.id

local phase  = event.phase

if( phase == “began” ) then

display.currentStage:setFocus( target, id )

self.isFocus = true

self.selected = true

self.unselRect.isVisible = false

self.selRect.isVisible = true

elseif( self.isFocus ) then

local bounds = target.stageBounds

local x,y = event.x, event.y

local isWithinBounds =

bounds.xMin <= x and bounds.xMax >= x and bounds.yMin <= y and bounds.yMax >= y

if( isWithinBounds ) then

self.unselRect.isVisible = false

self.selRect.isVisible = true

else

self.unselRect.isVisible = true

self.selRect.isVisible = false

end

if( phase == “moved” ) then

– Do nothing for push-button

elseif( phase == “ended” or phase == cancelled ) then

display.currentStage:setFocus( target, nil )

self.isFocus = nil

self.selected = false

self.unselRect.isVisible = true

self.selRect.isVisible = false

if( isWithinBounds and self.listener ) then

self:listener( event )

end

end

end

return true

end

function PushButton2:draw( group, x, y, labelText, listener, params)

  – Build the button parts from display object(s)

  –

self.unselRect = display.newRect( group, self.x, self.y, self.width, self.height )

self.unselRect:setFillColor( unpack(self.unselFill) )

self.unselRect:setStrokeColor( unpack(self.unselStroke) )

self.unselRect.strokeWidth = self.strokeWidth

self.selRect = display.newRect( group, self.x, self.y, self.width, self.height )

self.selRect:setFillColor( unpack(self.selFill) )

self.selRect:setStrokeColor( unpack(self.selStroke) )

self.selRect.strokeWidth = self.strokeWidth

self.label = display.newText( group, self.labelText, self.x, self.y, self.labelFont, self.labelSize )

self.label:setFillColor( unpack( self.labelColor) )

self.unselRect.isHitTestable = true

self.selRect.isVisible = false

self.unselRect:addEventListener( “touch”, self )

end

function PushButton2:__init( group, x, y, labelText, listener, params)

group = group or display.currentStage

params   = params or {}

– Save rest of parameters to class instance

self.labelText = labelText or “”

self.listener = listener or function() return false end

self.x = x or self.x

self.y = y or self.y

– Simply copy all params values onto this instance

for k,v in pairs( params ) do

self[k] = v

end

self:draw( group, x, y, labelText, listener, params )

end

Really would like some help with this

Cheers guys

#2

We would need to see 

30log.lua

 Too see if you can even change the image.

Please paste the code into the blue “<>” on the second top row when posting a reply. Thanks!

#3

Sorry about that, here is the code here. If it won’t let me change the image, is there a way that I could change it so I can?

Here is the 30log.lua code

local assert = assert local pairs = pairs local type = type local tostring = tostring local setmetatable = setmetatable local baseMt = {} local \_instances = setmetatable({},{\_\_mode='k'}) local \_classes = setmetatable({},{\_\_mode='k'}) local class local function deep\_copy(t, dest, aType) local t = t or {} local r = dest or {} for k,v in pairs(t) do if aType and type(v)==aType then r[k] = v elseif not aType then if type(v) == 'table' and k ~= "\_\_index" then r[k] = deep\_copy(v) else r[k] = v end end end return r end local function instantiate(self,...) assert(\_classes[self], 'new() should be called from a class.') local instance = deep\_copy(self) \_instances[instance] = tostring(instance) setmetatable(instance,self) if self.\_\_init then if type(self.\_\_init) == 'table' then deep\_copy(self.\_\_init, instance) else self.\_\_init(instance, ...) end end return instance end local function extends(self,extra\_params) local heir = {} \_classes[heir] = tostring(heir) deep\_copy(extra\_params, deep\_copy(self, heir)) heir.\_\_index = heir heir.super = self return setmetatable(heir,self) end baseMt = { \_\_call = function (self,...) return self:new(...) end, \_\_tostring = function(self,...) if \_instances[self] then return ('object(of %s):\<%s\>') :format((rawget(getmetatable(self),'\_\_name') or '?'), \_instances[self]) end return \_classes[self] and ('class(%s):\<%s\>') :format((rawget(self,'\_\_name') or '?'),\_classes[self]) or self end } class = function(attr) local c = deep\_copy(attr) \_classes[c] = tostring(c) c.include = function(self,include) assert(\_classes[self], 'Mixins can only be used on classes.') return deep\_copy(include, self, 'function') end c.new = instantiate c.extends = extends c.\_\_index = c c.\_\_call = baseMt.\_\_call c.\_\_tostring = baseMt.\_\_tostring c.is = function(self, kind) local super while true do super = getmetatable(super or self) if super == kind or super == nil then break end end return kind and (super == kind) end return setmetatable(c, baseMt) end return class
#4

Are you creating buttons? Why not just use the widget library?.

#5

I would gladly use the widget library but i’m having some trouble with buttons on overlays using the widget library.

Could you help?

On my overlay I have created a button which sends you to a new scene, when I click the button it sends me to the desired scene but the button remains on screen and doesn’t disappear with the overlay.

Here is the code I am using, I will include all the code in the overlay.

local composer = require( "composer" ) local scene = composer.newScene() ---------------------------------------------------------------------- -- LOCALS -- ---------------------------------------------------------------------- -- Variables local w = display.contentWidth local h = display.contentHeight local centerX = display.contentCenterX local centerY = display.contentCenterY local back -- Forward Declarations local onBack -- Useful Localizations local mAbs = math.abs local mRand = math.random local mDeg = math.deg local mRad = math.rad local mCos = math.cos local mSin = math.sin local mAcos = math.acos local mAsin = math.asin local mSqrt = math.sqrt local mCeil = math.ceil local mFloor = math.floor local mAtan2 = math.atan2 local mPi = math.pi local getInfo = system.getInfo local getTimer = system.getTimer local strMatch = string.match local strFormat = string.format local pairs = pairs ---------------------------------------------------------------------- -- Scene Methods ---------------------------------------------------------------------- ---------------------------------------------------------------------- ---------------------------------------------------------------------- function scene:create( event ) local sceneGroup = self.view -- Create a simple background back = display.newRect( sceneGroup, centerX, centerY, 10000, 10000 ) back:setFillColor( 0, 0, 0 ) if(w\>h) then back.rotation = 90 end back.alpha = 0.3 -- Create a label showing which scene this is local label = display.newEmbossedText( sceneGroup, "Game Paused", centerX, 40, native.systemFont, 60 ) label:setFillColor( 0xCC/255, 1, 1 ) local color = { highlight = { r=1, g=1, b=1 }, shadow = { r=0, g=1, b=0.3 } } label:setEmbossColor( color ) -- Create a button local push1 = PushButton( sceneGroup, centerX, centerY, "Back", onBack, { labelColor = {0.8,0.2,0.2}, labelSize = 18 } ) local widget = require( "widget" ) -- Function to handle button events local function handleButtonEvent( event ) composer.gotoScene( "ifc.mainMenu", options ) if ( "ended" == event.phase ) then print( "Button was pressed and released" ) end end local button1 = widget.newButton( { width = 240, height = 120, defaultFile = "images/pause.png", overFile = "images/resume.png", label = "button", onEvent = handleButtonEvent } ) -- Center the button button1.x = display.contentCenterX button1.y = display.contentCenterY -- Change the button's label text button1:setLabel( "Push" ) end ---------------------------------------------------------------------- ---------------------------------------------------------------------- function scene:willEnter( event ) local sceneGroup = self.view transition.to( back, { alpha = 0.8, time = 500 } ) end ---------------------------------------------------------------------- ---------------------------------------------------------------------- function scene:didEnter( event ) local sceneGroup = self.view end ---------------------------------------------------------------------- ---------------------------------------------------------------------- function scene:willExit( event ) local sceneGroup = self.view transition.to( back, { alpha = 0, time = 300 } ) end ---------------------------------------------------------------------- ---------------------------------------------------------------------- function scene:didExit( event ) local sceneGroup = self.view end ---------------------------------------------------------------------- ---------------------------------------------------------------------- function scene:destroy( event ) local sceneGroup = self.view back = nil end ---------------------------------------------------------------------- -- FUNCTION/CALLBACK DEFINITIONS -- ---------------------------------------------------------------------- onBack = function ( self, event ) composer.hideOverlay( "slideUp", 0 ) --- Time to change transition speed return true end --------------------------------------------------------------------------------- -- Scene Dispatch Events, Etc. - Generally Do Not Touch Below This Line --------------------------------------------------------------------------------- function scene:show( event ) local sceneGroup = self.view local willDid = event.phase if( willDid == "will" ) then self:willEnter( event ) elseif( willDid == "did" ) then self:didEnter( event ) end end function scene:hide( event ) local sceneGroup = self.view local willDid = event.phase if( willDid == "will" ) then self:willExit( event ) elseif( willDid == "did" ) then self:didExit( event ) end end scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) --------------------------------------------------------------------------------- return scene
#6

Add the button to sceneGroup.

sceneGroup:insert(button1)
#7

Cheers man, big help

#8

We would need to see 

30log.lua

 Too see if you can even change the image.

Please paste the code into the blue “<>” on the second top row when posting a reply. Thanks!

#9

Sorry about that, here is the code here. If it won’t let me change the image, is there a way that I could change it so I can?

Here is the 30log.lua code

local assert = assert local pairs = pairs local type = type local tostring = tostring local setmetatable = setmetatable local baseMt = {} local \_instances = setmetatable({},{\_\_mode='k'}) local \_classes = setmetatable({},{\_\_mode='k'}) local class local function deep\_copy(t, dest, aType) local t = t or {} local r = dest or {} for k,v in pairs(t) do if aType and type(v)==aType then r[k] = v elseif not aType then if type(v) == 'table' and k ~= "\_\_index" then r[k] = deep\_copy(v) else r[k] = v end end end return r end local function instantiate(self,...) assert(\_classes[self], 'new() should be called from a class.') local instance = deep\_copy(self) \_instances[instance] = tostring(instance) setmetatable(instance,self) if self.\_\_init then if type(self.\_\_init) == 'table' then deep\_copy(self.\_\_init, instance) else self.\_\_init(instance, ...) end end return instance end local function extends(self,extra\_params) local heir = {} \_classes[heir] = tostring(heir) deep\_copy(extra\_params, deep\_copy(self, heir)) heir.\_\_index = heir heir.super = self return setmetatable(heir,self) end baseMt = { \_\_call = function (self,...) return self:new(...) end, \_\_tostring = function(self,...) if \_instances[self] then return ('object(of %s):\<%s\>') :format((rawget(getmetatable(self),'\_\_name') or '?'), \_instances[self]) end return \_classes[self] and ('class(%s):\<%s\>') :format((rawget(self,'\_\_name') or '?'),\_classes[self]) or self end } class = function(attr) local c = deep\_copy(attr) \_classes[c] = tostring(c) c.include = function(self,include) assert(\_classes[self], 'Mixins can only be used on classes.') return deep\_copy(include, self, 'function') end c.new = instantiate c.extends = extends c.\_\_index = c c.\_\_call = baseMt.\_\_call c.\_\_tostring = baseMt.\_\_tostring c.is = function(self, kind) local super while true do super = getmetatable(super or self) if super == kind or super == nil then break end end return kind and (super == kind) end return setmetatable(c, baseMt) end return class
#10

Are you creating buttons? Why not just use the widget library?.

#11

I would gladly use the widget library but i’m having some trouble with buttons on overlays using the widget library.

Could you help?

On my overlay I have created a button which sends you to a new scene, when I click the button it sends me to the desired scene but the button remains on screen and doesn’t disappear with the overlay.

Here is the code I am using, I will include all the code in the overlay.

local composer = require( "composer" ) local scene = composer.newScene() ---------------------------------------------------------------------- -- LOCALS -- ---------------------------------------------------------------------- -- Variables local w = display.contentWidth local h = display.contentHeight local centerX = display.contentCenterX local centerY = display.contentCenterY local back -- Forward Declarations local onBack -- Useful Localizations local mAbs = math.abs local mRand = math.random local mDeg = math.deg local mRad = math.rad local mCos = math.cos local mSin = math.sin local mAcos = math.acos local mAsin = math.asin local mSqrt = math.sqrt local mCeil = math.ceil local mFloor = math.floor local mAtan2 = math.atan2 local mPi = math.pi local getInfo = system.getInfo local getTimer = system.getTimer local strMatch = string.match local strFormat = string.format local pairs = pairs ---------------------------------------------------------------------- -- Scene Methods ---------------------------------------------------------------------- ---------------------------------------------------------------------- ---------------------------------------------------------------------- function scene:create( event ) local sceneGroup = self.view -- Create a simple background back = display.newRect( sceneGroup, centerX, centerY, 10000, 10000 ) back:setFillColor( 0, 0, 0 ) if(w\>h) then back.rotation = 90 end back.alpha = 0.3 -- Create a label showing which scene this is local label = display.newEmbossedText( sceneGroup, "Game Paused", centerX, 40, native.systemFont, 60 ) label:setFillColor( 0xCC/255, 1, 1 ) local color = { highlight = { r=1, g=1, b=1 }, shadow = { r=0, g=1, b=0.3 } } label:setEmbossColor( color ) -- Create a button local push1 = PushButton( sceneGroup, centerX, centerY, "Back", onBack, { labelColor = {0.8,0.2,0.2}, labelSize = 18 } ) local widget = require( "widget" ) -- Function to handle button events local function handleButtonEvent( event ) composer.gotoScene( "ifc.mainMenu", options ) if ( "ended" == event.phase ) then print( "Button was pressed and released" ) end end local button1 = widget.newButton( { width = 240, height = 120, defaultFile = "images/pause.png", overFile = "images/resume.png", label = "button", onEvent = handleButtonEvent } ) -- Center the button button1.x = display.contentCenterX button1.y = display.contentCenterY -- Change the button's label text button1:setLabel( "Push" ) end ---------------------------------------------------------------------- ---------------------------------------------------------------------- function scene:willEnter( event ) local sceneGroup = self.view transition.to( back, { alpha = 0.8, time = 500 } ) end ---------------------------------------------------------------------- ---------------------------------------------------------------------- function scene:didEnter( event ) local sceneGroup = self.view end ---------------------------------------------------------------------- ---------------------------------------------------------------------- function scene:willExit( event ) local sceneGroup = self.view transition.to( back, { alpha = 0, time = 300 } ) end ---------------------------------------------------------------------- ---------------------------------------------------------------------- function scene:didExit( event ) local sceneGroup = self.view end ---------------------------------------------------------------------- ---------------------------------------------------------------------- function scene:destroy( event ) local sceneGroup = self.view back = nil end ---------------------------------------------------------------------- -- FUNCTION/CALLBACK DEFINITIONS -- ---------------------------------------------------------------------- onBack = function ( self, event ) composer.hideOverlay( "slideUp", 0 ) --- Time to change transition speed return true end --------------------------------------------------------------------------------- -- Scene Dispatch Events, Etc. - Generally Do Not Touch Below This Line --------------------------------------------------------------------------------- function scene:show( event ) local sceneGroup = self.view local willDid = event.phase if( willDid == "will" ) then self:willEnter( event ) elseif( willDid == "did" ) then self:didEnter( event ) end end function scene:hide( event ) local sceneGroup = self.view local willDid = event.phase if( willDid == "will" ) then self:willExit( event ) elseif( willDid == "did" ) then self:didExit( event ) end end scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) --------------------------------------------------------------------------------- return scene
#12

Add the button to sceneGroup.

sceneGroup:insert(button1)
#13

Cheers man, big help