How to create checkbox with custom visual image sheet ?

Getting Started Newbie Questions
#1

I’m curious to create a checkbox and style it with my own .png image. I tried

http://docs.coronalabs.com/api/library/widget/newSwitch.html#example

as guide (can’t find other resource), but still can’t get it done.

I use 32x64 px transparent image. Both on and off state is 32x32 and are placed next another.

[lua]

local checkboxButton = widget.newSwitch {

        left = 50,

        top = 50,

        width = 32,

        height = 32,

        style = “checkbox”,

        onPress = onSwitchPress,

        sheet = “img/check.png”,

        frameOff = 1,

        frameOn = 2,

}[/lua]

I put it on plain main.lua. It show nothing on screen.

But when i remove sheet, frameOff, and frameOn, the checkbox is displayed just fine with standard style.

Anyone has experience with checbox? Or other widget?

Thanks before guys…

#2

Hi @wilychristian,

The sheet parameter can’t point directly to an image sheet file; it must point to an image sheet that you’ve already set up. Once you do this, the checkbox should work as expected.

[lua]

local opt = {

    width = 32,

    height = 32,

    numFrames = 2,

    sheetContentWidth = 64,

    sheetContentHeight = 32

}

local mySheet = graphics.newImageSheet( “img/check.png”, opt )

local checkboxButton = widget.newSwitch {

        left = 50,

        top = 50,

        width = 32,

        height = 32,

        style = “checkbox”,

        sheet = mySheet,

        frameOff = 1,

        frameOn = 2,

}

[/lua]

Hope this helps,

Brent

#3

Ow it works like setting up image and animation sprite. I’ll keep this in mind.

Thanks a lot Brent.

#4

Hi @wilychristian,

The sheet parameter can’t point directly to an image sheet file; it must point to an image sheet that you’ve already set up. Once you do this, the checkbox should work as expected.

[lua]

local opt = {

    width = 32,

    height = 32,

    numFrames = 2,

    sheetContentWidth = 64,

    sheetContentHeight = 32

}

local mySheet = graphics.newImageSheet( “img/check.png”, opt )

local checkboxButton = widget.newSwitch {

        left = 50,

        top = 50,

        width = 32,

        height = 32,

        style = “checkbox”,

        sheet = mySheet,

        frameOff = 1,

        frameOn = 2,

}

[/lua]

Hope this helps,

Brent

#5

Ow it works like setting up image and animation sprite. I’ll keep this in mind.

Thanks a lot Brent.