Unwanted shadow in topright corner of pickerwheel widget

bramvbilsen · August 8, 2016, 4:58pm

Hi guys;

I’ve got yet another question. I’m trying to implement the pickerwheel widget for the first time but it’s not really working out. I’d like it to be just white, no separators, no borders, no nothing… But I can’t seem to figure it out. I first tried doing this:

 pickerWheel.dateWidget = widget.newPickerWheel { top = display.contentHeight - 222, columns = pickerWheel.columnData, }

That gave me a clean white result in the emulator but an ugly theme on real devices. After that I tried using an image sheet, which didn’t work out either. The sheet is just a white rectangle with dimensions: 320x222, I will attach it in this post. Here is the code:

 pickerWheel.dateWidget = widget.newPickerWheel { top = display.contentHeight - 222, columns = pickerWheel.columnData, sheet = pickerWheelSheet, overlayFrame = 1, overlayFrameWidth = actualW, overlayFrameHeight = 222, backgroundFrame = 1, backgroundFrameWidth = 320, backgroundFrameHeight = 222, separatorFrame = 1, separatorFrameWidth = 0, separatorFrameHeight = 0, columnColor = { 1,1,1 }, fontColor = { 0.4, 0.4, 0.4, 0.5 }, fontColorSelected = { 0.2, 0.6, 0.4 } }

Because there is only one frame in the sheet, all frames are set to 1. I’ll also attach a snapshot of the shadow issue. Any ideas on how to fix this? Maybe without using a spirtesheet? A white pickerwheel can’t be that hard to achieve, right?

The screenshot will have a white rect with “CANCEL” and “DONE” in it. that is just something that I’ve put over the pickerwheel and has nothing to do with the options of the pickerwheel

bjsorrentino · August 8, 2016, 8:55pm

Hi @bramvbilsen,

Can I see your image sheet definition code?

Thanks,

Brent

bramvbilsen · August 8, 2016, 9:45pm

Hi Brent

This is the imagesheet code:

 local options = { frames = { { x=0, y=0, width=320, height=222 }, { x=320, y=0, width=320, height=222 }, { x=640, y=0, width=8, height=222 } }, sheetContentWidth = 648, sheetContentHeight = 222 } local pickerWheelSheet = graphics.newImageSheet( "sheetPickerWheel4.png", options )

Also, I’ve send the wrong imageSheet. I’ll attach the one that I’m using here

Scott_Harrison · August 9, 2016, 1:16am

can you post columnData

bjsorrentino · August 9, 2016, 4:14am

What is frame #2? Does it have some non-white coloring to it?

Scott_Harrison · August 9, 2016, 4:19am

To make it easy can you make a small working demo to show us problem.

bjsorrentino · August 9, 2016, 5:02am

I’m 99% sure of the issue, just need that last bit of info.

Brent

bramvbilsen · August 9, 2016, 9:27am

Hi frame 2 is a white background with 60% transparency. But I’m actually never using that frame in my code. I use frame 1 for both the background and overlay

Here is the columndata:

 -- Implement column data pickerWheel.columnData = { -- Days { align = "center", width = 60, startIndex = 2, labels = pickerWheel.days }, -- Months { align = "center", width = 150, startIndex = 2, labels = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" } }, -- Years { align = "center", width = 80, startIndex = 4, labels = pickerWheel.years } }

bramvbilsen · August 9, 2016, 9:28am

I’ll make a small demo tomorrow if the problem isn’t resolved by then. I don’t have a lot of time atm

And I’d also like to add that this problem does not occur on the corona simulator. It does though, on my galaxy s7 edge and the bluestacks emulator.

bramvbilsen · August 9, 2016, 10:50am

Hi guys,

So I found the first error in my code. I didn’t reference to the correct path, it should have been “img/sheetPickerWheel4.png”… But that didn’t solve my headache. I’m now presented with a complete white pickerWheel. Here is the code:

 ---// CREATING PICKERWHEER \\--- -- Loop through amount of days in a month for d=1, 31 do pickerWheel.days[d] = d end -- Loop through set number of years for y=1, 100 do pickerWheel.years[y] = 2012 + y end -- Implement column data pickerWheel.columnData = { -- Days { align = "center", width = 60, startIndex = 2, labels = pickerWheel.days }, -- Months { align = "center", width = 150, startIndex = 2, labels = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" } }, -- Years { align = "center", width = 80, startIndex = 4, labels = pickerWheel.years } } local options = { frames = { { x=0, y=0, width=320, height=222 }, { x=320, y=0, width=320, height=222 }, { x=640, y=0, width=8, height=222 } }, sheetContentWidth = 648, sheetContentHeight = 222 } local pickerWheelSheet = graphics.newImageSheet( "img/sheetPickerWheel4.png", options ) pickerWheel.dateWidget = widget.newPickerWheel { top = display.contentHeight - 222, columns = pickerWheel.columnData, --overlayFrameWidth = actualW, sheet = pickerWheelSheet, overlayFrame = 1, overlayFrameWidth = 320, overlayFrameHeight = 222, backgroundFrame = 2, backgroundFrameWidth = 320, backgroundFrameHeight = 222, separatorFrame = 3, separatorFrameWidth = 8, separatorFrameHeight = 222, columnColor = { 1,1,1 }, fontColor = { 0.4, 0.4, 0.4, 0.5 }, fontColorSelected = { 0.2, 0.6, 0.4 } } pickerWheel.input = pickerWheel.dateWidget:getValues() pickerWheel.input.day = pickerWheel.input[1].value pickerWheel.yValueWidget = pickerWheel.dateWidget.y pickerWheel.heightValueWidget = pickerWheel.dateWidget.height

Here is a link to the demo: https://1drv.ms/f/s!Aj56XELpTvMNhLE1BNeXrLyzh1wMSA

Isn’t there a way to just make a transparent pickerwheel so I can place a white rect behind it? Or to just make a full width and white pickerwheel?

bramvbilsen · August 9, 2016, 11:51am

Okay, yet another update. I managed to get the look I wanted (completely white, except the text). I feel like I’m finally getting somewhere

I did this by using a spreadsheet with the same width and height, but this time the three frames are completely transparent!

But now I got one last problem. The pickerwheel is not in the center of my x-axis and not full width. Any way to resolve this issue?

bjsorrentino · August 9, 2016, 7:19pm

Hi @bramvbilsen,

To clarify what was going on previously: basically, internally for some visual pieces, the pickerwheel takes certain image sheet frames and “stretches” them to fit the defined width. In this case, OpenGL is liable to borrow pixels from frames outside of that frame (neighboring frames) and actually apply them in a fade-in manner to the edges of the frame you’re using.

There are some slightly more advanced ways to prevent this, but the most simple solution in your case – assuming you want a purely white picker – is to just take a smaller “sample” of the first frame that doesn’t use the edge-to-edge dimensions. So, you could keep your actual image sheet exactly as it was before, but in your image sheet setup, you could do this:

[lua]

frames =

{

{ x=50, y=50, width=220, height=122 },

[/lua]

You’ll see how that basically takes a “piece” of the entire first frame, inset by 50 pixels on all sides, so that OpenGL won’t borrow any pixels from any outlying frames when it applies the stretched pieces during the internal construction of the widget.

Hope this makes sense,

Brent

P.S. - As for making the picker the entire width of the screen, that’s currently not possible, but we’re hoping to implement it soon (it has been a request in the queue for awhile and we know that it would be useful to developers).

bramvbilsen · August 9, 2016, 9:11pm

Thanks Brent,
That totally worked out! I’ve made the pickerwheel “full width” by adding a white background to the widget so it looks like the widget and background are one piece. So… It’s not really full width but it gets the job done.
Once again, thanks for all your replies. You’ve been an enormous help for my project!

bjsorrentino · August 8, 2016, 8:55pm

Hi @bramvbilsen,

Can I see your image sheet definition code?

Thanks,

Brent

bramvbilsen · August 8, 2016, 9:45pm

Hi Brent

This is the imagesheet code:

 local options = { frames = { { x=0, y=0, width=320, height=222 }, { x=320, y=0, width=320, height=222 }, { x=640, y=0, width=8, height=222 } }, sheetContentWidth = 648, sheetContentHeight = 222 } local pickerWheelSheet = graphics.newImageSheet( "sheetPickerWheel4.png", options )

Also, I’ve send the wrong imageSheet. I’ll attach the one that I’m using here

Scott_Harrison · August 9, 2016, 1:16am

can you post columnData

bjsorrentino · August 9, 2016, 4:14am

What is frame #2? Does it have some non-white coloring to it?

Scott_Harrison · August 9, 2016, 4:19am

To make it easy can you make a small working demo to show us problem.

bjsorrentino · August 9, 2016, 5:02am

I’m 99% sure of the issue, just need that last bit of info.

Brent

bramvbilsen · August 9, 2016, 9:27am

Hi frame 2 is a white background with 60% transparency. But I’m actually never using that frame in my code. I use frame 1 for both the background and overlay

Here is the columndata:

 -- Implement column data pickerWheel.columnData = { -- Days { align = "center", width = 60, startIndex = 2, labels = pickerWheel.days }, -- Months { align = "center", width = 150, startIndex = 2, labels = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" } }, -- Years { align = "center", width = 80, startIndex = 4, labels = pickerWheel.years } }