Bug in widget.newSlider?

Solar2D General Questions/Discussion
#1

Hi Corona Community,

It appears I have stumbled upon bug in widget.newSlider.

In short, the slider “shifts” to the right when its value is set to a number close to 0, which is visually very displeasing (oddly enough, this bug is not symmetric, and the same thing doesn’t happen when the value is near 100).

To help illustrate what I am saying, I have attached screenshots of this bug in action. Please find the files below.

Here’s how to recreate the bug:

  1. Set the value of the slider to 0 (slide it to the left)

  2. Navigate away from the current scene (in this case, by pressing the red circle button)

  3. Reenter the scene which contained the slider. As you can see, the slider has mysteriously (and annoyingly) shifted to the right. As a side note, if you adjust the value to something sufficiently large (like > 20), navigate away and reenter the scene, the slider moves back to its original, correct location.

Here is what I ask you: what is causing this? And, more importantly, how to I fix/prevent this?

Thanks in advance!

________________________________________________________________________________________________

main.lua

local composer = require("composer") composer.gotoScene("home")

home.lua

local composer = require("composer") local scene = composer.newScene() local \_view function scene:create(event) \_view = self.view local button = display.newCircle(340,650,60) button:setFillColor(0,0,1) button:addEventListener("tap", function () composer.gotoScene("slider") end) \_view:insert(button) end scene:addEventListener("create", scene) return scene

slider.lua

local widget = require("widget") local composer = require("composer") local scene = composer.newScene() local \_view local slider1, slider2 local slider1Value, slider2Value function scene:create(event) \_view = self.view local button = display.newCircle(340,650,60) button:setFillColor(1,0,0) button:addEventListener("tap", function () composer.gotoScene("home") end) \_view:insert(button) end function scene:show(event) initSliders() end function initSliders() if (slider1) then slider1:removeSelf() slider1 = nil end slider1 = widget.newSlider { left = 240, top = 475, width = 200, orientation = "horizontal", value = slider1Value or 50, listener = adjustSlider1Value } if (slider2) then slider2:removeSelf() slider2 = nil end slider2 = widget.newSlider { left = 240, top = 525, width = 200, orientation = "horizontal", value = slider2Value or 50, listener = adjustSlider2Value } \_view:insert(slider1) \_view:insert(slider2) end function adjustSlider1Value(event) slider1Value = event.value end function adjustSlider2Value(event) slider2Value = event.value end scene:addEventListener("create", scene) scene:addEventListener("show", scene) return scene
#2

Have you submitted a bug report for this?

https://developer.coronalabs.com/content/bug-submission

#3

Where do you ever save the values for slider1value? If the scene gets destroyed it’s going to get recreated at 50.

Also, while it’s not related, scene:show() gets called twice. Once before the scene transitions on screen and again afterwards. You are in effect creating, deleteing and re-createing your sliders. Those should be created in scene:create() anyway.

You can use scene:show() during the “will” phase (event.phase == “will”) to read your saved settings for the slider and set the slider to the right value.

Rob

#4

The error is much simpler to reproduce:

local widget = require (“widget”)

local slider1 = widget.newSlider{top = 100,    left = 50,    
    value = 50
}

local slider2 = widget.newSlider{top = 150,    left = 50,    
    value = 2
}

You will see that slider2 does not align correctly (it is specially obvious if you move both sliders all the way to one of the sides). The same happens if slider2:setValue(2) is used after setting value to 50 (default). The same error does not happen with numbers near 100. It appears to happen with numbers below 10, but the error is bigger with the smallest numbers (0, 1, 2…)

What could be the cause of this error? Is there any quick fix or alternative method?

#5

You have found a bug. The cause is that when the circle extends past the bar on the left, it makes the bounding box of the entire object bigger than if the circle has been further into the bar. You would probably also run into this also if you decided to use the .x and .y properties and position based on the center of the object and the circle was at 100.

I don’t know of an easy fix to correct this in the widget, but there is an easy work around that you can implement. Create the object with the circle handle not at an edge then immediately move the handle:

local slider2 = widget.newSlider{top = 150,    left = 50,         value = 12 } slider2:setValue(2)

This will all draw in the same frame so there shouldn’t be any animation of the handle moving.

Rob

#6

Thanks for the quick answer, Rob.

However, the code you give is not a solution. With this code the error still happens (in the same way… there is no difference).

Any other suggestion?

local widget = require (“widget”)
local slider1 = widget.newSlider{top = 100,    left = 50,    
    value = 50
}
local slider2 = widget.newSlider{top = 150,    left = 50,    
    value = 12
}
slider2:setValue(2)

#7

Well I didn’t include setting the X, Y after the fact which I have in my sample. This code:
 

local widget = require ("widget") local slider1 = widget.newSlider{top = 100, left = 50, value = 50 } slider1.x = 100 slider1.y = 100 local slider2 = widget.newSlider{top = 150, left = 50, value = 12 } slider2.x = 100 slider2.y = 150 slider2:setValue(2)

produced this:

#8

Thanks, Rob.

Interestingly, the code you give does work on an Android 4.1.2 but does not work on the Windows Corona Simulator.

In any case, that suits for the moment our needs.

Should I submit a bug report or have someone already made that?

#9

Please do. Remember a bug report (using the Report a Bug  link at the top) needs to have a .zip file that contains a minimal app that demonstrates the problem. This at a minimum includes a main.lua, build.settings and config.lua and any other assets needed. Bug reports that are just a .lua file with code will likely be rejected.

Thanks

Rob

#10

Bug submitted as indicated.

#11

CaseID:  5826431

#12

Have you submitted a bug report for this?

https://developer.coronalabs.com/content/bug-submission

#13

Where do you ever save the values for slider1value? If the scene gets destroyed it’s going to get recreated at 50.

Also, while it’s not related, scene:show() gets called twice. Once before the scene transitions on screen and again afterwards. You are in effect creating, deleteing and re-createing your sliders. Those should be created in scene:create() anyway.

You can use scene:show() during the “will” phase (event.phase == “will”) to read your saved settings for the slider and set the slider to the right value.

Rob

#14

The error is much simpler to reproduce:

local widget = require (“widget”)

local slider1 = widget.newSlider{top = 100,    left = 50,    
    value = 50
}

local slider2 = widget.newSlider{top = 150,    left = 50,    
    value = 2
}

You will see that slider2 does not align correctly (it is specially obvious if you move both sliders all the way to one of the sides). The same happens if slider2:setValue(2) is used after setting value to 50 (default). The same error does not happen with numbers near 100. It appears to happen with numbers below 10, but the error is bigger with the smallest numbers (0, 1, 2…)

What could be the cause of this error? Is there any quick fix or alternative method?

#15

You have found a bug. The cause is that when the circle extends past the bar on the left, it makes the bounding box of the entire object bigger than if the circle has been further into the bar. You would probably also run into this also if you decided to use the .x and .y properties and position based on the center of the object and the circle was at 100.

I don’t know of an easy fix to correct this in the widget, but there is an easy work around that you can implement. Create the object with the circle handle not at an edge then immediately move the handle:

local slider2 = widget.newSlider{top = 150,    left = 50,         value = 12 } slider2:setValue(2)

This will all draw in the same frame so there shouldn’t be any animation of the handle moving.

Rob

#16

Thanks for the quick answer, Rob.

However, the code you give is not a solution. With this code the error still happens (in the same way… there is no difference).

Any other suggestion?

local widget = require (“widget”)
local slider1 = widget.newSlider{top = 100,    left = 50,    
    value = 50
}
local slider2 = widget.newSlider{top = 150,    left = 50,    
    value = 12
}
slider2:setValue(2)

#17

Well I didn’t include setting the X, Y after the fact which I have in my sample. This code:
 

local widget = require ("widget") local slider1 = widget.newSlider{top = 100, left = 50, value = 50 } slider1.x = 100 slider1.y = 100 local slider2 = widget.newSlider{top = 150, left = 50, value = 12 } slider2.x = 100 slider2.y = 150 slider2:setValue(2)

produced this:

#18

Thanks, Rob.

Interestingly, the code you give does work on an Android 4.1.2 but does not work on the Windows Corona Simulator.

In any case, that suits for the moment our needs.

Should I submit a bug report or have someone already made that?

#19

Please do. Remember a bug report (using the Report a Bug  link at the top) needs to have a .zip file that contains a minimal app that demonstrates the problem. This at a minimum includes a main.lua, build.settings and config.lua and any other assets needed. Bug reports that are just a .lua file with code will likely be rejected.

Thanks

Rob

#20

Bug submitted as indicated.