Applying custom image sheet to newSwitch causes unexpected visual behaviour

Solar2D Widgets
#1

Hello Community!

I am trying to apply a custom image sheet to widget.newSwitch({ style = “onOff” }).

As a starting point i took the @4x image sheet of the Android Holo Light design that is provided via Github.

I just wanted it to look quite alike but with other colors. So i changed some of the colors with paint.net (ya! sick skills) and put the file into the base folder of the project. I also copied the sheet.luafile that is provided by Coronalabs into the base directory.

I also set:

widget.setTheme( "widget\_theme\_android\_holo\_light" ) -- set basic theme

I placed some of the customized switches in the scene (checkboxes & radioButtons), which you can see on the left and the ‘onOff’ switches on the right.

For both states I placed one switch (one “off”, one “on”). The two below are the standard ones, provided by Corona SDK and as you can see, there are no problems with it. My customized switches however do not show as I expected.

I was for errors for a while and did not came up with a solution… After a while I thought that this could also be an error or bug in the SDK and then found the daily build 2016.2980 in which some errors with newSwitch where fixed but the problem is still there for me.

The lines of code that create the switch:

local sheetInfo = require("widget\_theme\_android\_holo\_light\_sheet@4x") local imageSheet = graphics.newImageSheet( "dn\_blue\_widget\_theme\_android\_holo\_light@4x.png", sheetInfo:getSheet() ) local testSwitch = widget.newSwitch( { x = 200, y = 200, style = "onOff", onPress = onSwitchPress, sheet = imageSheet, frameOff = sheetInfo:getFrameIndex("switch\_checkboxSelected"), frameOn = sheetInfo:getFrameIndex("switch\_checkboxDefault"), onOffBackgroundFrame = sheetInfo:getFrameIndex("switch\_background"), onOffMask = "widget\_theme\_onOff\_mask\_android\_holo.png", onOffHandleDefaultFrame = sheetInfo:getFrameIndex("switch\_handle"), onOffHandleOverFrame = sheetInfo:getFrameIndex("switch\_handleOver"), onOffOverlayFrame = sheetInfo:getFrameIndex("switch\_overlay"), }) sceneGroup:insert(testSwitch) --standard design: local testSwitch1 = widget.newSwitch( {x = 200, y = 250, onPress = onSwitchPress,} ) local testSwitch2 = widget.newSwitch( {x = 200, y = 300, onPress = onSwitchPress,} )

Does someone has any hints for me? Thanks

#2

I’m not sure I would recommend using the existing theme files like this. You’re better off building a specific image sheet for just the switch and include it independently of the theme. Either that or completely use the opens source widget library and just recolor the theme you want without trying to create a new theme.

See https://docs.coronalabs.com/api/library/widget/newSwitch.html#onoff-switch

Rob

#3

Tanks for your answer!

Now i tried out the first thing that you mentioned. And I think it worked quite well, though in my opinion the “true” and “false” states should be the other way around. And if I click the button the first time, it prints the defined statement (onPress = onSwitchPress) but does not change its appearance.

However this was a nice test.

The second thing you mentioned is exactly what i actually did! I used the PNG from Githuband recolored it like this:

I did two versions, because later on, one should be able to say layout = “red” or layout = “blue” or something like that, but that’s of no matter right now…

So I took exactly the provided ressources from the widget framework and changed nothing but the PNG in terms of color. And what I get at the end of the day is a switch that does not look like it should. When I click it, the “on”-state-picture moves to the right outside of the overlay frame, while the overlay frame is placed correctly. Both the “on”-sate (onOffHandleOverFrame) and the “off”-state (onOffHandleDefaultFrame) are placed incorrectly.

#4

I know this isn’t a good answer, but just a tip. 

I am using only scrollView from all build in Corona widget objects, everything else that you need to use

Implement your own class.

Possible name for classes:

simpleButton/toggleButton/switch/ etc etc.

This way you have TOTALL control forever, and you can do whatever you like with them.

While at first this might seem like a lot of work, later on you can export it for all your projects. And well this way you also improve your skills as programer.

#5

Thanks for the Tip.

I already did this for some of the other widgets (button and tableView for example), but this is costing a lot of time. And my time is running out. I am trying to develop kind of a toolset with custom design and custom functions. But spending time on all those visual definitions is not what I am able to afford since deadline is about mid of december.

This is why i went this way, adjusting/recoloring the existing ones.

#6

I’m not sure I would recommend using the existing theme files like this. You’re better off building a specific image sheet for just the switch and include it independently of the theme. Either that or completely use the opens source widget library and just recolor the theme you want without trying to create a new theme.

See https://docs.coronalabs.com/api/library/widget/newSwitch.html#onoff-switch

Rob

#7

Tanks for your answer!

Now i tried out the first thing that you mentioned. And I think it worked quite well, though in my opinion the “true” and “false” states should be the other way around. And if I click the button the first time, it prints the defined statement (onPress = onSwitchPress) but does not change its appearance.

However this was a nice test.

The second thing you mentioned is exactly what i actually did! I used the PNG from Githuband recolored it like this:

I did two versions, because later on, one should be able to say layout = “red” or layout = “blue” or something like that, but that’s of no matter right now…

So I took exactly the provided ressources from the widget framework and changed nothing but the PNG in terms of color. And what I get at the end of the day is a switch that does not look like it should. When I click it, the “on”-state-picture moves to the right outside of the overlay frame, while the overlay frame is placed correctly. Both the “on”-sate (onOffHandleOverFrame) and the “off”-state (onOffHandleDefaultFrame) are placed incorrectly.

#8

I know this isn’t a good answer, but just a tip. 

I am using only scrollView from all build in Corona widget objects, everything else that you need to use

Implement your own class.

Possible name for classes:

simpleButton/toggleButton/switch/ etc etc.

This way you have TOTALL control forever, and you can do whatever you like with them.

While at first this might seem like a lot of work, later on you can export it for all your projects. And well this way you also improve your skills as programer.

#9

Thanks for the Tip.

I already did this for some of the other widgets (button and tableView for example), but this is costing a lot of time. And my time is running out. I am trying to develop kind of a toolset with custom design and custom functions. But spending time on all those visual definitions is not what I am able to afford since deadline is about mid of december.

This is why i went this way, adjusting/recoloring the existing ones.