Widget onOff switch with @2x graphics?

Solar2D Widgets
#1

Hi!

I’ve setup a Custom image sheet for an on-off switch according to this doc: Custom Image Sheet — On-Off Switch

The bit I cant seem to figure out is how to add higher resolution images for it, such as @2x, @3x etc. Simply adding high res images for the mask didn’t work.

Any ideas?

TIA,

/Marcus

//Code//

– Image sheet options and declaration for musicSwitch

local options = {

    frames = {

        { x=0, y=0, width=160, height=44 },

        { x=0, y=45, width=42, height=42 },

        { x=44, y=45, width=42, height=42 },

        { x=88, y=44, width=96, height=44 }

    },

    sheetContentWidth = 184,

    sheetContentHeight = 88

}

local onOffSwitchSheet = graphics.newImageSheet( “IMG/widgetsheet.png”, options )

– Create the widget

local musicSwitch = widget.newSwitch

{

    left = 180,

    top = 230,

    style = “onOff”,

    id = “musicSwitch”,

    onPress = onSwitchPress,

    sheet = onOffSwitchSheet,

    onOffBackgroundFrame = 1,

    onOffBackgroundWidth = 160,

    onOffBackgroundHeight = 44,

    onOffMask = “IMG/widgetmask.png”,

    onOffHandleDefaultFrame = 2,

    onOffHandleOverFrame = 3,

    onOffOverlayFrame = 4,

    onOffOverlayWidth = 96,

    onOffOverlayHeight = 44

}

#2

Hi Marcus,

Do you have the proper dynamic image setup in your config.lua file? If so, have you included all of the proper image sheet files for these various scales?

Thanks,
Brent

#3

Thanks for the help Brent.

Yes I’ve setup config with the scales and it works everywhere else in my project, it’s just the mask for the onoff widget that doesn’t scale as you can see in this screenshot:

https://dl.dropboxusercontent.com/u/21236797/capture.png

#4

Hi Marcus,

Thanks for the follow-up details. I don’t think the mask for this widget scales, but you could probably accomplish this with a little workaround, by gathering the image suffix as shown here:

http://docs.coronalabs.com/api/library/display/imageSuffix.html

Then, using that, declare the proper mask file for the widget:

[lua]

local suf = display.imageSuffix

local maskPath = “IMG/widgetmask”

if ( suf ~= nil ) then

   maskPath = maskPath…"@"…suf…“x”

end

local musicSwitch = widget.newSwitch

{

   --your existing parameters

   onOffMask = maskPath…".png",

}

[/lua]

Or something along those lines… I didn’t test it, but it should work.

Brent

#5

Thanks a bunch for getting back to me.

This worked almost flawlessly leaving just one piece to be solved.

The line with:

   maskPath = maskPath…"@"…suf…“x”

Resulted in an error:

   Failed to find image(IMG/widgetmask@@2xx.png)

So i used:

   maskPath = maskPath…suf

Which worked brilliantly and now it is showing the correct mask, I’ve double checked in different platforms and checked that it is indeed showing the correct image in @2x, @3x and @4x.

However, the problem left now is that there doesn’t seem to be a way of telling the mask what width and height it should be, now it simply uses the size the dynamic image is and not it’s “native” size at “@1x”. As you can see in this screenshot the correct mask image is showing but it doesn’t retain it’s original size of 104x52 pixels and subsequently gets way too big.

https://dl.dropboxusercontent.com/u/21236797/capture2.png

Is there a way of telling the mask that it should be 104x52 pixels regardless of what the current scale is or do you have any other ideas how it might be solved?

Thanks again!

#6

Hi Marcus,

Good to hear the first part is working (yeah, I forgot that the returned suffix actually includes the ‘@’ and ‘x’, so you don’t need to add that to the string, but obviously you figured that out).

On the next part, I think it can be solved by setting the scale of the mask, but for that we’ll need to step back a bit. Any mask can be scaled, but once you declare it in the switch configuration, the mask element itself becomes inaccessible. So, what I suggest is that you remove it from the switch params and simply mask the object itself… at that point, you’ll be able to scale it.

So first, remove the “onOffMask” parameter from the switch config… we don’t want to double-mask it!

Next, declare the mask as its own object:

[lua]

local switchMask = graphics.newMask( maskPath…".png" )

[/lua]

Later, after you’ve created the switch, apply the mask to the switch object:

[lua]

musicSwitch:setMask( switchMask )

[/lua]

Now, you’ll need a quick conditional check to get the scale factor:

[lua]

local maskScale = 1

if ( suf == “@2x” ) then

   maskScale = 2

elseif ( suf == “@4x” then )

   maskScale = 4

end

[/lua]

With that, scale the mask to 1 divided by the scale factor:

[lua]

musicSwitch.maskScaleX = 1 / maskScale

musicSwitch.maskScaleY = 1 / maskScale

[/lua]

And that should work, but again, you’ll need to test and maybe adjust a few things, and (as always), test, test, and test again.

Best regards,

Brent

#7

Solved!

Thanks a million for the help Brent and for the work you do on this forum!

The only thing i had to tweak was that you actually needed to keep the onOffMask parameter in the widget for it to work, otherwise you’d get a smaller “default” kind of mask inside the switch.

As you can see here it’s working, top example fixed, bottom example as it was at the beginning:

https://dl.dropboxusercontent.com/u/21236797/fixed.png

#8

Hi Marcus,

Good to hear it’s working! Just curious, do you plan to “nest” these switches inside another masked element like a scrollView, container, or another masked display group? The reason I ask is because most devices have a nested mask limit of 3, and since the switches are now double-masked, I want to check that they won’t be nested in yet another masked element, which might push past the limit.

Take care,

Brent

#9

Thanks for the heads up! No, I wont be nesting them further, but that’s great to know for future developments. I do use Storyboard though so I have to add them to “group”, does groups count as nesting an object?

#10

Hi Marcus,

No worries on regular display groups… those are not auto-masked. Auto-masked elements include scrollViews and tableViews (because they mask a large amount of content to a smaller “view port”, containers, and of course display groups that you intentionally apply a mask to.

Brent

#11

Super, good to know! Thanks a bunch!

#12

Hi Marcus,

Do you have the proper dynamic image setup in your config.lua file? If so, have you included all of the proper image sheet files for these various scales?

Thanks,
Brent

#13

Thanks for the help Brent.

Yes I’ve setup config with the scales and it works everywhere else in my project, it’s just the mask for the onoff widget that doesn’t scale as you can see in this screenshot:

https://dl.dropboxusercontent.com/u/21236797/capture.png

#14

Hi Marcus,

Thanks for the follow-up details. I don’t think the mask for this widget scales, but you could probably accomplish this with a little workaround, by gathering the image suffix as shown here:

http://docs.coronalabs.com/api/library/display/imageSuffix.html

Then, using that, declare the proper mask file for the widget:

[lua]

local suf = display.imageSuffix

local maskPath = “IMG/widgetmask”

if ( suf ~= nil ) then

   maskPath = maskPath…"@"…suf…“x”

end

local musicSwitch = widget.newSwitch

{

   --your existing parameters

   onOffMask = maskPath…".png",

}

[/lua]

Or something along those lines… I didn’t test it, but it should work.

Brent

#15

Thanks a bunch for getting back to me.

This worked almost flawlessly leaving just one piece to be solved.

The line with:

   maskPath = maskPath…"@"…suf…“x”

Resulted in an error:

   Failed to find image(IMG/widgetmask@@2xx.png)

So i used:

   maskPath = maskPath…suf

Which worked brilliantly and now it is showing the correct mask, I’ve double checked in different platforms and checked that it is indeed showing the correct image in @2x, @3x and @4x.

However, the problem left now is that there doesn’t seem to be a way of telling the mask what width and height it should be, now it simply uses the size the dynamic image is and not it’s “native” size at “@1x”. As you can see in this screenshot the correct mask image is showing but it doesn’t retain it’s original size of 104x52 pixels and subsequently gets way too big.

https://dl.dropboxusercontent.com/u/21236797/capture2.png

Is there a way of telling the mask that it should be 104x52 pixels regardless of what the current scale is or do you have any other ideas how it might be solved?

Thanks again!

#16

Hi Marcus,

Good to hear the first part is working (yeah, I forgot that the returned suffix actually includes the ‘@’ and ‘x’, so you don’t need to add that to the string, but obviously you figured that out).

On the next part, I think it can be solved by setting the scale of the mask, but for that we’ll need to step back a bit. Any mask can be scaled, but once you declare it in the switch configuration, the mask element itself becomes inaccessible. So, what I suggest is that you remove it from the switch params and simply mask the object itself… at that point, you’ll be able to scale it.

So first, remove the “onOffMask” parameter from the switch config… we don’t want to double-mask it!

Next, declare the mask as its own object:

[lua]

local switchMask = graphics.newMask( maskPath…".png" )

[/lua]

Later, after you’ve created the switch, apply the mask to the switch object:

[lua]

musicSwitch:setMask( switchMask )

[/lua]

Now, you’ll need a quick conditional check to get the scale factor:

[lua]

local maskScale = 1

if ( suf == “@2x” ) then

   maskScale = 2

elseif ( suf == “@4x” then )

   maskScale = 4

end

[/lua]

With that, scale the mask to 1 divided by the scale factor:

[lua]

musicSwitch.maskScaleX = 1 / maskScale

musicSwitch.maskScaleY = 1 / maskScale

[/lua]

And that should work, but again, you’ll need to test and maybe adjust a few things, and (as always), test, test, and test again.

Best regards,

Brent

#17

Solved!

Thanks a million for the help Brent and for the work you do on this forum!

The only thing i had to tweak was that you actually needed to keep the onOffMask parameter in the widget for it to work, otherwise you’d get a smaller “default” kind of mask inside the switch.

As you can see here it’s working, top example fixed, bottom example as it was at the beginning:

https://dl.dropboxusercontent.com/u/21236797/fixed.png

#18

Hi Marcus,

Good to hear it’s working! Just curious, do you plan to “nest” these switches inside another masked element like a scrollView, container, or another masked display group? The reason I ask is because most devices have a nested mask limit of 3, and since the switches are now double-masked, I want to check that they won’t be nested in yet another masked element, which might push past the limit.

Take care,

Brent

#19

Thanks for the heads up! No, I wont be nesting them further, but that’s great to know for future developments. I do use Storyboard though so I have to add them to “group”, does groups count as nesting an object?

#20

Hi Marcus,

No worries on regular display groups… those are not auto-masked. Auto-masked elements include scrollViews and tableViews (because they mask a large amount of content to a smaller “view port”, containers, and of course display groups that you intentionally apply a mask to.

Brent