widget button off screen

Hello…

I contact you because i have a problem with widget button.

In the simulator appears correctly, while in the device that is moved off screen. There’is no error during debug.

Here i post the code:

local composer = require( “composer” )
local scene = composer.newScene()
local widget = require (“widget”)

W = display.contentWidth
H = display.contentHeight

– “scene:create()”
function scene:create( event )

   local sceneGroup = self.view

   –
   local background= display.newImage(“background.png”)
    background.x = W/2
    background.y = H/2

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

      if “ended” == phase then

      local options =
      {
          effect = “slideLeft”,
          time = 4000,
          
      }

      composer.gotoScene( “scene02”, options )
      end

    end

local button= widget.newButton
{
    left = W/2 140 ,
    top = H/2 -20,
    width = 280,
    height = 280,
    defaultFile = “play.png”,
    overFile = “play1.png”,
 

    onEvent = handleButtonEvent,
}

   sceneGroup:insert(background)
   sceneGroup:insert(button)

end

– “scene:destroy()”
function scene:destroy( event )

   local sceneGroup = self.view

end

– Listener setup
scene:addEventListener( “create”, scene )
scene:addEventListener( “destroy”, scene )


return scene

Thanks for your help

This:

left = W/2 140 ,

is syntactically incorrect.  You are probably getting a syntax error in your console log causing this button to never get created.  Are you wanting to add 140 to the Width / 2 (i.e. center) or are you wanting to subtract 140 or do you just want to center the button?  If you want to add 140 to it, you would do:
 

left = W/2  + 140 ,

Just as good programming practice, and what may have lead you to this issue, this line:

top = H/2 -20,

Is saying to subtract 20 from H/2 (i.e. center height wise).  However, someone who is new to code would read that as:

negative 20, not “subtract 20”.  If you include good spacing in your code, it becomes clearer.  Consider this:

top = H/2 -20,

top = H/2 - 20,

Do you see how that changes it from two separate values (H/2 and -20) in the first one to (H2 and subtract 20) in the second one?  It’s much clearer to understand.  Now look at it for the problem number:

left = W/2  140 ,  – the way you have it written which is incorrect would work if you wrote it:

left = W/2  +140 ,  – but this still reads like it’s two values, not a math equation

left = W/2  + 140 , – Adding the space makes it read like it’s a math equation and now you know those values have to be math equations and not just two numbers.

Rob

Sorry W/2 140 is my error when i posted.
However…I tried to correct with your tip, but the problem remain.

I tried to use native code and the button is in correctly position on device.

Can you post the problem code using copy and paste? Make sure to use and tags around it. Leave out the space after the ['s please Rob

i solved problem. I changed W/2 + 140 in only numerical value. So :

left = W/2 + 140

left = 250

However i see an error font in my debug :

“Warning : could not load font HelveticaNeue-light. Using default font”

I don’t use font now…Why i see this error?

Are you on Windows or a Mac?  Do you plan to build for iOS or Android?

Rob

I’m working on windows, and i’m bulding for android.

Widgets default to an iOS 7/iOS 8 theme. The default font is Helvetica Neue Light.  This is not a font that is normally installed on Windows, nor is it a font common to Android devices.  Since you are building for Android you probably want to choose one of the Android looking themes for your widgets.  See:  http://docs.coronalabs.com/api/library/widget/setTheme.html

I would recommend going with one of the two new Android themes:

  • “widget_theme_android_holo_dark”
  • “widget_theme_android_holo_light”

Rob

This:

left = W/2 140 ,

is syntactically incorrect.  You are probably getting a syntax error in your console log causing this button to never get created.  Are you wanting to add 140 to the Width / 2 (i.e. center) or are you wanting to subtract 140 or do you just want to center the button?  If you want to add 140 to it, you would do:
 

left = W/2  + 140 ,

Just as good programming practice, and what may have lead you to this issue, this line:

top = H/2 -20,

Is saying to subtract 20 from H/2 (i.e. center height wise).  However, someone who is new to code would read that as:

negative 20, not “subtract 20”.  If you include good spacing in your code, it becomes clearer.  Consider this:

top = H/2 -20,

top = H/2 - 20,

Do you see how that changes it from two separate values (H/2 and -20) in the first one to (H2 and subtract 20) in the second one?  It’s much clearer to understand.  Now look at it for the problem number:

left = W/2  140 ,  – the way you have it written which is incorrect would work if you wrote it:

left = W/2  +140 ,  – but this still reads like it’s two values, not a math equation

left = W/2  + 140 , – Adding the space makes it read like it’s a math equation and now you know those values have to be math equations and not just two numbers.

Rob

Sorry W/2 140 is my error when i posted.
However…I tried to correct with your tip, but the problem remain.

I tried to use native code and the button is in correctly position on device.

Can you post the problem code using copy and paste? Make sure to use and tags around it. Leave out the space after the ['s please Rob

i solved problem. I changed W/2 + 140 in only numerical value. So :

left = W/2 + 140

left = 250

However i see an error font in my debug :

“Warning : could not load font HelveticaNeue-light. Using default font”

I don’t use font now…Why i see this error?

Are you on Windows or a Mac?  Do you plan to build for iOS or Android?

Rob

I’m working on windows, and i’m bulding for android.

Widgets default to an iOS 7/iOS 8 theme. The default font is Helvetica Neue Light.  This is not a font that is normally installed on Windows, nor is it a font common to Android devices.  Since you are building for Android you probably want to choose one of the Android looking themes for your widgets.  See:  http://docs.coronalabs.com/api/library/widget/setTheme.html

I would recommend going with one of the two new Android themes:

  • “widget_theme_android_holo_dark”
  • “widget_theme_android_holo_light”

Rob