Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Change Widget Button Background Color
Started by RedBeach Mar 20 2013 01:37 PM

4 replies to this topic
widget button background color

Best Answer Danny , 21 March 2013 - 03:44 AM

Hi.

 

Is there a way to change the background color of a widget button? 

 

I am using widget v2.0 and I am developing a quiz game so I would like to change the button background color to green if the user answered the question correctly or change it to red if the user clicked in the wrong answer.

 

Thanks,

 

Renato

 

Hi.

 

Something like this should do the trick (to change the color of the buttons image):

 

local widget = require( "widget" )

-- Function to handle button events
local function handleButtonEvent( event )
    local phase = event.phase 
    local target = event.target

    if "began" == phase then
        target:setFillColor( 255, 0, 0 )
    elseif "ended" == phase then
        target:setFillColor( 0, 255, 255 )
        print( "You pressed and released a button!" )
    end
end

-- Create a group
local group = display.newGroup()

-- Create the button
local myButton = widget.newButton
{
    left = 100,
    top = 200,
    width = 150,
    height = 50,
    defaultFile = "default.png",
    overFile = "over.png",
    id = "button_1",
    label = "Button",
    onEvent = handleButtonEvent,
}

-- Insert the button into a group:
group:insert( myButton )

[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

RedBeach

[GLOBAL: userInfoPane.html]
RedBeach
  • Corona Geek

  • 1,132 posts
  • Corona SDK

Hi.

 

Is there a way to change the background color of a widget button? 

 

I am using widget v2.0 and I am developing a quiz game so I would like to change the button background color to green if the user answered the question correctly or change it to red if the user clicked in the wrong answer.

 

Thanks,

 

Renato



[TOPIC: post.html]
#2

Danny

[GLOBAL: userInfoPane.html]
Danny
  • Corona Geek

  • 2,597 posts
  • Corona Staff

  Best Answer

Hi.

 

Is there a way to change the background color of a widget button? 

 

I am using widget v2.0 and I am developing a quiz game so I would like to change the button background color to green if the user answered the question correctly or change it to red if the user clicked in the wrong answer.

 

Thanks,

 

Renato

 

Hi.

 

Something like this should do the trick (to change the color of the buttons image):

 

local widget = require( "widget" )

-- Function to handle button events
local function handleButtonEvent( event )
    local phase = event.phase 
    local target = event.target

    if "began" == phase then
        target:setFillColor( 255, 0, 0 )
    elseif "ended" == phase then
        target:setFillColor( 0, 255, 255 )
        print( "You pressed and released a button!" )
    end
end

-- Create a group
local group = display.newGroup()

-- Create the button
local myButton = widget.newButton
{
    left = 100,
    top = 200,
    width = 150,
    height = 50,
    defaultFile = "default.png",
    overFile = "over.png",
    id = "button_1",
    label = "Button",
    onEvent = handleButtonEvent,
}

-- Insert the button into a group:
group:insert( myButton )


[TOPIC: post.html]
#3

RedBeach

[GLOBAL: userInfoPane.html]
RedBeach
  • Corona Geek

  • 1,132 posts
  • Corona SDK

Yes, that works. Thanks!



[TOPIC: post.html]
#4

juan.csdc

[GLOBAL: userInfoPane.html]
juan.csdc
  • Enthusiast

  • 69 posts
  • Corona SDK

Hey guys, I try to use that function with the latest daily build but it didn't worked out. The color changes when I release the button, but not while I'm still pressing it.

Thanks that the widgets library is open source, I was able to find a work around, it's not pretty but it is working. This is my work around:

 

 
-- Function to handle button events
local function handleButtonEvent( event )
    local phase = event.phase 
    local target = event.target._view._over
 
    if "began" == phase then
        target:setFillColor( 255, 0, 0 )
    elseif "ended" == phase then
        target:setFillColor( 0, 255, 255 )
        print( "You pressed and released a button!" )
    end
end
 
The minor change was to reference the target as "event.target._view._over" instead of "event.target" directly.
 
I hope this might help somebody until the original solution works again.


[TOPIC: post.html]
#5

Danny

[GLOBAL: userInfoPane.html]
Danny
  • Corona Geek

  • 2,597 posts
  • Corona Staff

Hey Juan,
Would you be so kind as to Submit A Bug for this issue? This is the first time i have heard of this issue.

Thanks


[topic_controls]
 
[/topic_controls]