can you customize the pickerwheel widget?

Hi,

I need to let the user enter their age and thought I could do it with the widget, “new.pickerwheel”, if I can customized it to only one column for the age. Is this possible? Please let me know, if not what would be an easier way to let the user enter their age?

Thanks [import]uid: 95689 topic_id: 18788 reply_id: 318788[/import]

widget.newPickerWheel can definitely be adjusted to use only one column. The number of tables to show is really up to how many tables you feed to it. [import]uid: 41884 topic_id: 18788 reply_id: 72323[/import]

Richard is correct [import]uid: 84637 topic_id: 18788 reply_id: 72483[/import]

Thanks everyone, I tried customizing it and have several problems:

  1. The data is not coming out as I expect. I am putting in numbers from 1 to 59 and am seeing only 1 - 10 and with the numbers spelled out i.e “one”,“two”

  2. The picker is not coming out as expected, I center the data and it comes out left handed justified.

  3. Lastly, I keep getting a run error, please see below the code:

local age = function()  
  
 -- change the app's toolbar label  
 appToolbar.label = "enter age"  
  
 myPanel = display.newGroup()  
  
 local dateText, isPickerShowing, myPicker  
  
 -- create touchable text  
 local dateText = display.newText( "Touch here to enter age", 0, 0, "HelveticaNeue-Bold", 22 )  
 dateText:setTextColor( 0, 0, 0, 255 )  
 dateText:setReferencePoint( display.CenterReferencePoint )  
 dateText.x = display.contentWidth \* 0.5  
 dateText.y = 175  
 myPanel:insert( dateText )  
  
 -- touch listener for label (display.newText)  
 function dateText:touch( event )  
 if event.phase == "began" and not isPickerShowing then  
 isPickerShowing = true  
  
 local doneButton  
  
 local onDone = function( event )  
  
 -- get values from picker wheel  
  
 local age = myPicker.col.value  
 print("age is", age);  
  
-- print("am I getting here");  
 if myPicker.col.listItems then  
 print( myPicker.col.listItems[1].titleText.text )  
 end  
  
 -- Update label text  
 dateText.text = age .. "is "   
  
 -- remove the button  
 display.remove( doneButton )  
 doneButton = nil  
  
 -- remove the picker wheel  
 display.remove( myPicker )  
 myPicker = nil  
  
 -- make date text touchable again  
 isPickerShowing = false  
 end  
-- print("am I getting here1");  
 doneButton = newButton{ label="Done", size=12, onRelease=onDone }  
 doneButton:setReferencePoint( display.CenterRightReferencePoint )  
 doneButton.x = display.contentWidth - 5  
 doneButton.y = listBoxStart - 22  
  
 local col = {}  
   
 -- create first column & data  
 for i=1,59 do  
 col[i] = i  
 end  
  
 col.alignment = "center"  
 col.width = 50  
 col.startIndex = 10  
-- print("am I getting to mypicker");  
 local myPicker = widget.newPickerWheel{  
 id="",  
 font="Helvetica-Bold",  
 columns=col  
 }  
  
 myPicker.y = display.contentHeight - myPicker.height  
 end  
 end  
  
 -- add touch listener to label text  
 dateText:addEventListener( "touch", dateText )  
  
  
 --  
 --  
  
 -- create back button  
 local myButton3 = newButton{ label="Go Back", x=0, y=display.contentHeight - 75, default="customButton.png", over="customButton\_over.png", onRelease=onButtonRelease }  
 myButton3:setReferencePoint( display.CenterReferencePoint )  
 myButton3.x = display.contentWidth \* 0.5  
 myPanel:insert( myButton3.view )  
  
  
  
 --  
 --  
  
 -- position this panel to the right of current view  
 myPanel.x = display.contentWidth  
  
 -- slide the api list to the left  
 apiList.view:slideLeft{ alpha=0 }  
  
 -- slide the content of this new "panel" to the left  
 myPanel:slideLeft{ slideAlpha=0, distance=display.contentWidth }  
  
 end -- end of "age" function  

Here is the error

[code]
Copyright © 2009-2011 A n s c a , I n c .
Version: 2.0.0
Build: 2011.591
The file sandbox for this project is located at the following folder:
(/Users/alexdiaz/Library/Application Support/Corona Simulator/WidgetDemo-E572DCC64EED14454989F54E89BA81C0)
am I getting here1
am I getting to mypicker
Runtime error
…CoronaSDK/SampleCode/Interface/WidgetDemo/iphone.lua:561: attempt to index upvalue ‘myPicker’ (a nil value)
stack traceback:
[C]: ?
…CoronaSDK/SampleCode/Interface/WidgetDemo/iphone.lua:561: in function ‘_onRelease’
?: in function <?:887>
?: in function <?:215>
Runtime error
…CoronaSDK/SampleCode/Interface/WidgetDemo/iphone.lua:561: attempt to index upvalue ‘myPicker’ (a nil value)
stack traceback:
[C]: ?
…CoronaSDK/SampleCode/Interface/WidgetDemo/iphone.lua:561: in function ‘_onRelease’
?: in function <?:887>
?: in function <?:215>

Sorry, I did not copy the complete program just the portion for the wheelpicker, therefore the line numbers do not match. Line 561 where I get the error is line 29 here in this post.
[import]uid: 95689 topic_id: 18788 reply_id: 72546[/import]

Thanks everyone, I tried customizing it and have several problems:

  1. The data is not coming out as I expect. I am putting in numbers from 1 to 59 and am seeing only 1 - 10 and with the numbers spelled out i.e “one”,“two”

  2. The picker is not coming out as expected, I center the data and it comes out left handed justified.

  3. Lastly, I keep getting a run error, please see below the code:

local age = function()  
  
 -- change the app's toolbar label  
 appToolbar.label = "enter age"  
  
 myPanel = display.newGroup()  
  
 local dateText, isPickerShowing, myPicker  
  
 -- create touchable text  
 local dateText = display.newText( "Touch here to enter age", 0, 0, "HelveticaNeue-Bold", 22 )  
 dateText:setTextColor( 0, 0, 0, 255 )  
 dateText:setReferencePoint( display.CenterReferencePoint )  
 dateText.x = display.contentWidth \* 0.5  
 dateText.y = 175  
 myPanel:insert( dateText )  
  
 -- touch listener for label (display.newText)  
 function dateText:touch( event )  
 if event.phase == "began" and not isPickerShowing then  
 isPickerShowing = true  
  
 local doneButton  
  
 local onDone = function( event )  
  
 -- get values from picker wheel  
  
 local age = myPicker.col.value  
 print("age is", age);  
  
-- print("am I getting here");  
 if myPicker.col.listItems then  
 print( myPicker.col.listItems[1].titleText.text )  
 end  
  
 -- Update label text  
 dateText.text = age .. "is "   
  
 -- remove the button  
 display.remove( doneButton )  
 doneButton = nil  
  
 -- remove the picker wheel  
 display.remove( myPicker )  
 myPicker = nil  
  
 -- make date text touchable again  
 isPickerShowing = false  
 end  
-- print("am I getting here1");  
 doneButton = newButton{ label="Done", size=12, onRelease=onDone }  
 doneButton:setReferencePoint( display.CenterRightReferencePoint )  
 doneButton.x = display.contentWidth - 5  
 doneButton.y = listBoxStart - 22  
  
 local col = {}  
   
 -- create first column & data  
 for i=1,59 do  
 col[i] = i  
 end  
  
 col.alignment = "center"  
 col.width = 50  
 col.startIndex = 10  
-- print("am I getting to mypicker");  
 local myPicker = widget.newPickerWheel{  
 id="",  
 font="Helvetica-Bold",  
 columns=col  
 }  
  
 myPicker.y = display.contentHeight - myPicker.height  
 end  
 end  
  
 -- add touch listener to label text  
 dateText:addEventListener( "touch", dateText )  
  
  
 --  
 --  
  
 -- create back button  
 local myButton3 = newButton{ label="Go Back", x=0, y=display.contentHeight - 75, default="customButton.png", over="customButton\_over.png", onRelease=onButtonRelease }  
 myButton3:setReferencePoint( display.CenterReferencePoint )  
 myButton3.x = display.contentWidth \* 0.5  
 myPanel:insert( myButton3.view )  
  
  
  
 --  
 --  
  
 -- position this panel to the right of current view  
 myPanel.x = display.contentWidth  
  
 -- slide the api list to the left  
 apiList.view:slideLeft{ alpha=0 }  
  
 -- slide the content of this new "panel" to the left  
 myPanel:slideLeft{ slideAlpha=0, distance=display.contentWidth }  
  
 end -- end of "age" function  

Here is the error

Copyright (C) 2009-2011 A n s c a , I n c .  
 Version: 2.0.0  
 Build: 2011.591  
The file sandbox for this project is located at the following folder:  
 (/Users/alexdiaz/Library/Application Support/Corona Simulator/WidgetDemo-E572DCC64EED14454989F54E89BA81C0)  
am I getting here1  
am I getting to mypicker  
Runtime error  
 ...CoronaSDK/SampleCode/Interface/WidgetDemo/iphone.lua:561: attempt to index upvalue 'myPicker' (a nil value)  
stack traceback:  
 [C]: ?  
 ...CoronaSDK/SampleCode/Interface/WidgetDemo/iphone.lua:561: in function '\_onRelease'  
 ?: in function <?:887>  
 ?: in function <?:215>  
Runtime error  
 ...CoronaSDK/SampleCode/Interface/WidgetDemo/iphone.lua:561: attempt to index upvalue 'myPicker' (a nil value)  
stack traceback:  
 [C]: ?  
 ...CoronaSDK/SampleCode/Interface/WidgetDemo/iphone.lua:561: in function '\_onRelease'  
 ?: in function <?:887>  
 ?: in function <?:215>  
  


can’t seem to paste an image of the output

[import]uid: 95689 topic_id: 18788 reply_id: 72545[/import]

These are all the variations I have tried with no success for that line:

local age = myPicker:getValues();
local age = myPicker.col.value
local age = myPicker.value
local age = myPicker.col[1].value
local age = col.value
[import]uid: 95689 topic_id: 18788 reply_id: 72561[/import]

#1. I think you tried a bit too hard to get that post in. Can you delete (or edit down) the two duplicates?

#2. I’m assuming you’re using the brand new “stable” build. Basically any of the code you see on the API page will not work unless you’ve upgraded to todays build (or are running a recent daily, which I assume you’re not since you don’t have a paid account)

#3. The line you should be using if you want to set “age” to something is myPicker:getValues(). Which doesn’t work yet because of something else (below)

#4. The forum uses HTML so I don’t see why you’d be able to paste an image

#5. Looking at your code…
a. I’m assuming you’re setting

local widget = require("widget") widget.setTheme( "theme\_ios" ) somewhere, right?

b. You’re not setting the table correctly. Each [x] is actually registering with the wheel as a different, independent wheel (sorta like how you can set date, time, am/pm on your iphone all with one pop-up.) So you need to say this:

local col = {} col[1] = {} for i=1,59 do col[1][i] = i end

…and then you need to refer to col[1] whenever you set things like justification or width or whatnot that table.

c. You’re calling “newButton” but with no link to the lua file it’s coming from, so that’s either a bug or you’ve localized the function. You’re also not specifying width or height for the picker; maybe you’re just relying on iPhone defaults? [import]uid: 41884 topic_id: 18788 reply_id: 72609[/import]

Richard, thanks for responding:

  1. I do have
 local widget = require("widget")  
widget.setTheme( "theme\_ios" )   

The first is part of the main.lua in the “widget demo”. The 2nd is not so I tried it and it gives an error so I commented it out.

  1. Any idea why I am only getting numbers “one” thru “ten” in the wheel? And why spelled out and not actual numbers?

  2. I tried all of your suggestions without any success. Maybe its the biuld I am using #591. It does say under Resources that it takes build #646 or higher. I got the same error in the same place. Here:

local age = myPicker:getValues();  

I could cut and paste the code and error if you like but this post has gotten too big with all that code.

[import]uid: 95689 topic_id: 18788 reply_id: 72627[/import]

Oh, and I do have width for the picker, please see below:

col[1].alignment = center;  
col[1].width = 50;  
col[1].startIndex = 21;  

Unless the above is for the column only ? [import]uid: 95689 topic_id: 18788 reply_id: 72629[/import]

Yeah, I can’t really help you until you update your build. Ansca just released a new stable build for free users today that everyone needs to update to (#703).

Since build 646 most of the widgets have completely changed in their structure and format, including pickerwheel. So some of the functions (like getValues) just plain doesn’t exist until at least 646. Grab the latest and you should be fine.

A side effect to grabbing latest is that some of the images for the widget folder may have changed, so keep that in mind and grab the latest zip file from the API page. You’ll need that image folder plus the theme_ios file it has, otherwise none of the picker graphics will show. (widget.setTheme is also required) [import]uid: 41884 topic_id: 18788 reply_id: 72642[/import]

Richard;

The build was all that was wrong. I updated to build 703 and it works !! Thanks for all your help.

The only thing is that I can’t seem to control the size of the wheel picker. It covers the bottom half of the display and would like to center it and make it narrower. Any ideas?

Thanks Again [import]uid: 95689 topic_id: 18788 reply_id: 72744[/import]

You need to set the width in the options. newPickerWheel lets you set the width for both the widget as a whole, and for each individual column.

local picker = widget.newPickerWheel{ width=200 }

I believe you can also set “top” and “left” for positioning. [import]uid: 41884 topic_id: 18788 reply_id: 72746[/import]