Any actually working example code for newSwitch ON/OFF with imagesheet ?

Solar2D Widgets
#1

Hi,

I’ve just been trying to work with newSwitch for an ON/OFF switch that will use a skin with imagesheet.

Unfortunately, even using exactly the code example from docs, and also the image that is in there, the result if not working correctly.

Using the examples from

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

And the example images, although I had to rename them to fit the example code:

(on-off-sheet.png)

widget-on-off-sheet.png

(switch-mask.png)

widget-on-off-mask.png

and the code I’ve put in my lua file :

 -- Image sheet options and declaration 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( "on-off-sheet.png", options ) -- Create the widget local onOffSwitch = widget.newSwitch { left = 250, top = 200, style = "onOff", id = "OnOffSwitch", onPress = onSwitchPress, sheet = onOffSwitchSheet, onOffBackgroundFrame = 1, onOffBackgroundWidth = 160, onOffBackgroundHeight = 44, onOffMask = "switch-mask.png", onOffHandleDefaultFrame = 2, onOffHandleOverFrame = 3, onOffOverlayFrame = 4, onOffOverlayWidth = 96, onOffOverlayHeight = 44 }

So everything exactly as in the attached screenshot.

However, the result looks like this - basically the blue box from lower left corner of the imagesheet… and over it is the same blue box just in a different size.

Clicking this makes it move and work the switch ok, but the look remains with the same error.

Any ideas, or perhaps a fixed code so that it actually looks like it should according to the documentation?

(btw. that means it should look like this: widget-on-off-final.png )

Thanks to anyone who can help.

Joe

#2

Are you getting any errors in your terminal/command window?  I took the code above and the images above and it works and as expected.

I did have to make the following changes:

  1. require the widget library at the top:   local widget = require(“widget”)

  2. make sure the image sheet name actually matches the image name I downloaded.

  3. make sure the mask name exactly matches the name of the mask image that I downloaded from this post.

The code in the docs are examples.  When we upload example images in there, we have to alter the names to keep them unique.  It’s not really designed for you to download those images and expect the example code to work.  You’re supposed to read the sample code and figure out what’s going on.  If there are image file names (which I suspect there are in your case), those messages will show in your terminal window (on a Mac) or your cmd window on a PC.  If you are unsure of how to read those log messages please refer to:

http://coronalabs.com/blog/2013/07/09/tutorial-basic-debugging/

Our intent is for you to make your own images, name them accordingly and adjust the sample code to fit your needs.

Rob

#3

Hi Rob,

what you did is exactly what I did… I do have requiring widget, and I am 100% sure the images are correctly named.

I will zip it all together and put it here in just a little while, as a small sample project.

Obviously my intent is to use my own image file, but before I do that I want to make sure I can make it work with your examples before I move further.

For me however it doesn’t seem to work.

Let me get back to you in a few minutes.

#4

OK, I wasn’t looking into the terminal for errors yesterday, that I admit. Now that I am looking, it states four warnings about using bad indices for the image sheet frames.

However it uses values that are not specified anywhere in the code ???

I really don’t understand where it’s getting these numbers (60, 58, 59, 63)  instead of (1, 2, 3, 4) that is in the code.

My test project is an empty app with grey background and the Switch widget is copy-pasted from the Docs.

All I did was rename the files and add require widget.

It behaves in error just as I stated.

To make sure you’re using the same code, I’ve put the whole project into one ZIP file, which you can download here :

http://www.mcxondev.com/widget/SliderWidgetTest.zip

To see how it behaves incl. the terminal output, I’ve made a short video here:

http://www.mcxondev.com/widget/widgetVideo.zip

(edit: sorry, had to put the videofile inside a zip file because the web server doesn’t have mime types configured correctly to download MP4)

here is the output from the terminal when I start up the project (as can be seen on the video):

Windows simulator build date: Mar 6 2014 @ 01:57:29 Platform: Droid / x64 / 6.1 / Intel(R) HD Graphics 3000 / 3.1.0 - Build 9.17.10.3347 Copyright (C) 2009-2014 C o r o n a L a b s I n c . Version: 3.0.0 Build: 2014.2189 Platform: Nexus One / x64 / 6.1 / Intel(R) HD Graphics 3000 / 3.1.0 - Build 9.17.10.3347 WARNING: Supplied frameIndex(60) exceeds image sheet's maximum frameIndex (4). Value will be clamped. WARNING: Supplied frameIndex(58) exceeds image sheet's maximum frameIndex (4). Value will be clamped. WARNING: Supplied frameIndex(59) exceeds image sheet's maximum frameIndex (4). Value will be clamped. WARNING: Supplied frameIndex(63) exceeds image sheet's maximum frameIndex (4). Value will be clamped. Switch with ID 'OnOffSwitch' is on: true Switch with ID 'OnOffSwitch' is on: false Switch with ID 'OnOffSwitch' is on: true

any ideas what’s going wrong?

#5

Further info :

I just tried building it for android, and surprise surprise - on device it works correctly!

Looks like a corona simulator issue ? Definitely in windows version of the simulator, I’ll have to try on mac simulator later, but don’t have my mac here atm.

i guess a terrible debugging and trial-error is ahead of me, if i have to debug my graphics by always making builds and running on a device…

#6

This does appear to be a Window’s issue.  Let me get another set of eye balls on it.

Rob

#7

Actually I noticed that my Windows machine was running an older build of Corona SDK 2189.  I updated it to the latest daily build and other than x=250 being mostly off the screen, it’s working just like my Mac.  With 2189 it was behaving like you are seeing.

I see you are also running 2189.  Please update to the latest pubilc build (available from the downloads page) 2393 and see if that solves your problem.

Rob

#8

Thanks Rob, I have been out of corona for about a month now so haven’t really needed to update.

anyway, even when it was working, skinning the switch the way my graphics guy wanted and scaling it to be about 1/5 of screen height was a pain, in the end I rather wrote the switch from scratch :slight_smile: could have saved me a couple of hours if i did this earlier :slight_smile:

#9

Are you getting any errors in your terminal/command window?  I took the code above and the images above and it works and as expected.

I did have to make the following changes:

  1. require the widget library at the top:   local widget = require(“widget”)

  2. make sure the image sheet name actually matches the image name I downloaded.

  3. make sure the mask name exactly matches the name of the mask image that I downloaded from this post.

The code in the docs are examples.  When we upload example images in there, we have to alter the names to keep them unique.  It’s not really designed for you to download those images and expect the example code to work.  You’re supposed to read the sample code and figure out what’s going on.  If there are image file names (which I suspect there are in your case), those messages will show in your terminal window (on a Mac) or your cmd window on a PC.  If you are unsure of how to read those log messages please refer to:

http://coronalabs.com/blog/2013/07/09/tutorial-basic-debugging/

Our intent is for you to make your own images, name them accordingly and adjust the sample code to fit your needs.

Rob

#10

Hi Rob,

what you did is exactly what I did… I do have requiring widget, and I am 100% sure the images are correctly named.

I will zip it all together and put it here in just a little while, as a small sample project.

Obviously my intent is to use my own image file, but before I do that I want to make sure I can make it work with your examples before I move further.

For me however it doesn’t seem to work.

Let me get back to you in a few minutes.

#11

OK, I wasn’t looking into the terminal for errors yesterday, that I admit. Now that I am looking, it states four warnings about using bad indices for the image sheet frames.

However it uses values that are not specified anywhere in the code ???

I really don’t understand where it’s getting these numbers (60, 58, 59, 63)  instead of (1, 2, 3, 4) that is in the code.

My test project is an empty app with grey background and the Switch widget is copy-pasted from the Docs.

All I did was rename the files and add require widget.

It behaves in error just as I stated.

To make sure you’re using the same code, I’ve put the whole project into one ZIP file, which you can download here :

http://www.mcxondev.com/widget/SliderWidgetTest.zip

To see how it behaves incl. the terminal output, I’ve made a short video here:

http://www.mcxondev.com/widget/widgetVideo.zip

(edit: sorry, had to put the videofile inside a zip file because the web server doesn’t have mime types configured correctly to download MP4)

here is the output from the terminal when I start up the project (as can be seen on the video):

Windows simulator build date: Mar 6 2014 @ 01:57:29 Platform: Droid / x64 / 6.1 / Intel(R) HD Graphics 3000 / 3.1.0 - Build 9.17.10.3347 Copyright (C) 2009-2014 C o r o n a L a b s I n c . Version: 3.0.0 Build: 2014.2189 Platform: Nexus One / x64 / 6.1 / Intel(R) HD Graphics 3000 / 3.1.0 - Build 9.17.10.3347 WARNING: Supplied frameIndex(60) exceeds image sheet's maximum frameIndex (4). Value will be clamped. WARNING: Supplied frameIndex(58) exceeds image sheet's maximum frameIndex (4). Value will be clamped. WARNING: Supplied frameIndex(59) exceeds image sheet's maximum frameIndex (4). Value will be clamped. WARNING: Supplied frameIndex(63) exceeds image sheet's maximum frameIndex (4). Value will be clamped. Switch with ID 'OnOffSwitch' is on: true Switch with ID 'OnOffSwitch' is on: false Switch with ID 'OnOffSwitch' is on: true

any ideas what’s going wrong?

#12

Further info :

I just tried building it for android, and surprise surprise - on device it works correctly!

Looks like a corona simulator issue ? Definitely in windows version of the simulator, I’ll have to try on mac simulator later, but don’t have my mac here atm.

i guess a terrible debugging and trial-error is ahead of me, if i have to debug my graphics by always making builds and running on a device…

#13

This does appear to be a Window’s issue.  Let me get another set of eye balls on it.

Rob

#14

Actually I noticed that my Windows machine was running an older build of Corona SDK 2189.  I updated it to the latest daily build and other than x=250 being mostly off the screen, it’s working just like my Mac.  With 2189 it was behaving like you are seeing.

I see you are also running 2189.  Please update to the latest pubilc build (available from the downloads page) 2393 and see if that solves your problem.

Rob

#15

Thanks Rob, I have been out of corona for about a month now so haven’t really needed to update.

anyway, even when it was working, skinning the switch the way my graphics guy wanted and scaling it to be about 1/5 of screen height was a pain, in the end I rather wrote the switch from scratch :slight_smile: could have saved me a couple of hours if i did this earlier :slight_smile: