[Released] NGUI Infinite Pickers - A complete picker framework

Greetings. How to implement the final scroll?

 

Hi Ins116,

I guess you mean stopping the picker when it reaches the last element?

For the moment, Infinite Pickers only support looping pickers. Non-looping pickers are at the top of my list for the next update, which should be ready early in December.

Cheers,

Gregzo

 

Have you thought about doing an almost slot machine type effect? User can click the select or a button adjacent and it will randomly flick through a set of strings and land on one? These are pretty popular in games now for rewards and the like - just a thought!

 

Hi no-tec,

Have a look at this page : http://forum.unity3d.com/threads/189766-Released-NGUI-Infinite-Pickers-A-complete-picker-framework/page4

I've posted there some example code to achieve slot machine effect. Let me know if I can help further!

Gregzo

 

Ah very nice, sorry I missed that. Thanks for the quick reply!

 

No trouble, threads tend to be a pain to navigate once they grow a little. Let me know how you are faring!

Happy picking,

Gregzo

 

i use databinding for my GUI (basically NDATA) follows the principal ob the observer pattern - do you have a idea where to bind a collection to e.g.:

i have a huge list of entities (the entity includes 3 strings and 2 sprites references) in my business logic and i want to load /bind it to the the Picker - On Demand - so if there is a interval of 5 elements - visible in the Picker i want to dynamically load new elements when i reach the borders of the intervall (e.g. due a drag gesture) - what are your ideas on that? how/where can i dynamically load elements at runtime to the picker in general (where is the collection i should add / remove elements)?

iam on the version for 2.7 NGUI

 

Hi concave,

I need a bit more details to help you out:

1) How big is the collection you want to display - how many elements, how many individual ( different ) sprites?

2) Where are you loading it from?

3) What do you want to display? All the data in your "entity" - 3 labels and 2 sprites per element?

A few remarks:

A) If your picker has 5 visible items, you should load at least 4-5 times as much at once to avoid having to load when scrolling.
B) If your collection is very large ( 100s of elements ), then you probably don't want to display it all in one picker - scrolling for hours isn't much fun. You could break it up in smaller collections.

I've used my pickers to dynamically load images from a web server, it's certainly doable but takes a bit of work depending on the complexity of your use case.

Let me know,

Gregzo

P.S.: The collection you should add/remove elements to depends on the picker type: spriteNames for sprite pickers, labelsText for text pickers. You can also use InsertElementAtIndex and RemoveElementAtIndex, but these methods will reset the picker ( snap it ). Once I know more about your use case, I'll provide more detailed info.

 

Important message to all NGUI Infinite Pickers users

Hi to all,

I've begun work on v1.5, and as promised, finite ( non-looping ) pickers support is the top priority.

I've found a very straightforward solution that maintains compatibility and alters very little code, but requires an additional step for users:
You will need to add empty elements at the beginning and end of your collection - NbOfCycledTransforms/2 elements precisely.

Example: cycler is cycling 5 transforms, spritePicker displaying 20 sprites:
-Add 2 sprites named " " at indexes 0 and 1 of spriteNames
-Add 2 sprites named " " at indexed 20 and 21 of spriteNames
-Add a new component, CyclerClamper, to the same GO as the IPCycler script and reference the observedPicker field in the inspector

The adding of empty sprites is a bit hacky, but has the advantage of not bloating the code base any more than it already is whilst remaining fully WYSIWIG and compatible with previous versions.

If you plan on using this feature, please let me know if this is an acceptable solution for you.

Happy picking,

Gregzo

 

hi gregzo!

First of all - Thanks for your Picker and your Support!

General Information: You have another List with Packages (e.g. 8 packages) (Generalisations of PackageItems (e.g.100items)) you can select/deselect them - and you also can select all of them that would be the worst case 8 x 100 - 800 elements at the same time. (800 is the current limit but of course it should be designed scalable)

i just want to display a part of the collection - depending on the "UIPanelBounds" or something similar. so if there are 10 items visible + 5 above + 5 below there should be only 20 instanciated GO's - wich will get "Recyled/Reused" - there "Fields" / "Variables" will get reused - without destroy or instanciate.

A Item consist of some 5 different sprites - thats just the design, the "Sceleton" the Template.
Each Item has placeholders that can be filled on Demand (Dynamically) there are 2 different dynamically bounds sprites, 2 stringbindings and a bool binding (i use NData for it)

i load the "content" sprites from a dynamically created atlas - the images are coming from the filesystem - this atlas has a very simple texture packer implementation to speed things up - but i still save draw calls and memory - so for the 10 Visible items there are 20 "Rects" in the Atlas witch will be overwritten/reused on Demand. The simple typed data like string or bool will be directly loaded from a VirtualList witch contains all in worst case (800) elements.

yes i want to display all the entity data.

load when scrolling in this case is not to prevent i guess - in this case(loading from filesystem/through dynamic atlas) at least the string binding should be changed to say "Elements is loading"

yeah as described in the beginning - it should be possible to add/remove packageItems by package selection/deselection.
So in worst case there would be 100s. (It might make sense to have an additional search function but thats not part of the task where just show elements by a string query) hmm breaking it up hmmm i dont think that works with the use case - rather a search function...

They will be sorted alphabetically. They should be displayed like this...

- ###A### (this would be another "section" template)
-@Ape@ (this would be the basic packageitem template)
-@Apple@
- ###B###
-@Band@
-@Baobap@
-###C###
...

so there is no generic collection in the backgournd? or is it based on GO's.

Yeah please - thank you!

concave

 

hi gregzo!

it would be acceptable for me!!! does it work with a scrollbar?

 

Hi concave,

What you are describing sounds more like a UITabeView - it might be interesting to develop such an asset based on UIKit patterns some day.

It is possible to do with my pickers asset, but will need quite a bit of work and wrapping.

A few points:

-GameObjects are already recycled, meaning if your collection has 800 sprites to display, it will simply adjust the spriteName of a limited number of widgets. You can decide how many GOs are cycled by adjusting the Number of transforms to cycle field of IPCycler in the inpector. It is good to have 2 more than displayed ( to display 3 elements fully, cycle 5 transforms ).

-One cycler cycles parent transforms which hold widgets. It is the picker script which actually updates widgets and keeps track of indexes. You may have more than one picker script updating content on 1 cycler - in your case, you'll need 1 IPSpritePicker component per sprite you wish to display, and one IPTextPicker per label. Take a look at the MainPickers example scene: one of them has 2 sprites and 1 label per element.

-It was not practical to use generic widgets as labels have very different properties from sprites, hence the split quite early in the inheritance hierarchy between text pickers ( labelsText List ) and sprite pickers ( spriteNames List )

-If you know the size of your collection before loading it, you can configure the picker components with the right collection size and place holder text/images, and then update them as they load. v1.5 will have a UpdateWidget method that will do visibility checks for you - it should help!

Do start building your picker, it'll give you a feel for the workflow! And I can send you v1.5 beta early if you need it.

Cheers,

Gregzo

 

Hi concave,

No scrollbar at the moment, I'm afraid. NGUI's scrollbar cannot be used in this case ( because of the recycling of objects ), but it should be quite straightforward to implement. I'll give it a go when I have time!

Cheers,

Gregzo

 

***Important message to all picker users***

Dear all,

NGUI 3.06 has just hit the asset store, and breaks compatibility with NGUI Infinite Pickers.
I will have an update ready in the next few hours, but it'll take more time before it is approved on the asset store.

Do get in touch with your Invoice Nb if you need a NGUI 3.06 compatible version of my pickers sooner, I'll send it by e-mail.

Many thanks, and happy picking,

Gregzo

 

NGUI 3.06 compatible beta ready, get in touch if you need it early!

 

v1.5 just submitted to the asset store, should be live in a week at most.

-Compatible with NGUI 3.06+
-NGUI 3.06 changes increase performance ( UIDraggablePanel has been replaced by UIScrollView and now has a rigidbody )
-CyclerClamper script for non looping pickers ( for sprite, texture and text pickers )

Happy picking,

Gregzo

 

v1.5 is now live on the asset store.

Happy picking,

Gregzo

 

Hi @gregzo,

After I upgraded to 1.5 and NGUI to 3.0.6, I have noticed a strange behaviour: the drag works only the first time you do it.

Just to make sure it was not related to my scene, I created a new project, with no NGUI and no NGUIPickers folders, then I downloaded both and tried all the example scenes. In all pickers the same error occurs. There is no error message on console, the drag just don't work after first try.

Thank you in advacence.

Regards,

Sam

 

Hi Sam,

I'm sorry for your troubles. Everything works fine on my setup - but there've been so many changes both in Unity and NGUI lately that issues might arise.

I am at work for the next 9 hours, but will be free tonight and tomorrow to debug this. In the meantime, can you let me know which version of Unity you are using?

Also, if you have time, try adjusting the Background game object's collider's z position ( all drags go through IPUserInteraction.cs, so this component's go's collider is the first place I'll look ).

Many thanks,

Gregzo

 

Hello,

After I commented the line 67 of UIDragScrollView of NGUI, like the code below, everything worked fine.
It looks like there is a bug in UIDragScrollView because it tries to find an object in its parents that has the UIScrollView component and when it is not commented, the scrollView variable is updated with null.

void OnPress (bool pressed)
{
if (scrollView enabled NGUITools.GetActive(gameObject))
{
scrollView.Press(pressed);
//if (!pressed mAutoFind) scrollView = NGUITools.FindInParents<UIScrollView>(mTrans);
}
}

Thank you. I don't know it is the best solution to modify NGUI scripts, but, at least for me, it is sufficient.

 

Hi samuraibh,

Many thanks for your message, it has helped narrowing down on the issue very quickly.

For now, your fix is the simplest. I've spotted the root of the problem, and will ask the NGUI dev if he can do something about it - it should be solved quickly.

Worst case scenario: I'll subclass UIDragScrollView to override the behaviour.

I'm sure it won't come to that, as NGUI's dev is fast and very open to suggestions.

Cheers,

Gregzo

 

*** Important message to all NGUI Infinite Pickers users ***

v1.5 of Infinite Pickers was compatible with NGUI 3.06f3. Since then, fixes in NGUI broke compatibility again ( see the 3 posts above ).
This latest issue I hope will be solved on NGUI's side very soon: I'm in contact with NGUI's dev and will let you know ASAP.

For now, the fix suggested by @samuraibh is the safest :

simply comment out line 67 of UIDragScrollView.cs. It attempts to find a target scrollView to drag in parent objects, and fails because the scrollView is on a sibling object. Whilst modifying third party code is never advisable, I'm confident that in this case, NGUI will very soon fix this.

It is a time of fast changes for NGUI, gradually edging it closer and closer to the upcoming new Unity GUI, so inconveniences such as tis one are to be expected.

Many thanks for your understanding,

Gregzo

 

*** Important message to all NGUI Infinite Pickers users ***

Good news: the next version of NGUI fixes this, available tomorrow night.

Happy picking,

Gregzo

 

Hi Gregzo,

I'm having a problem with one of the pickers on Android. In the Unity3D editor it works fine but when using the picker on an Android device this happends:

 

Hi Tripwire,

Looks like clipping is not working at all, hmmm...

If you send me a small example scene, I can try to build on iOS to see if NGUI's clipping is having trouble with Android platforms.

A few questions:
1)which version of NGUI are you using? There have been so many changes lately, issues are bound to arise. I'll take a look on the NGUI forums for you.
2)Does a standalone build work?

Sorry I can't help you directly, as this seems very much like an NGUI issue. I'll write to the NGUI dev once you answer my questions.

Your pickers look great btw!

Cheers,

Gregzo

 

Hi Gregzo,

I found out that none of my clippings are working at the moment. I'm heading over to the NGUI Forum for more help. I'm using NGUI 2.7.0 btw.

Thx for your help!

 

The plugin in question ! in unity4.3.0 and ngui 3.0.6 !! When you keep Drag it !! Word will disappear!
Please hurry repairs! thx!!!

 

Hi Gregzo,

I upgraded to ngui 3.0.6f7.I just can Drag it then can not move anymore! Very strange!

 

Hi hannairis,

working on it, PM me with your e-mail and invoice number and i'll send the new version as soon as it is ready.

NGUI is changing a lot these days, I'm keeping up no worries!

Cheers,

Gregzo

 

*** Important message ***

A NGUI 3.07 compatible version has just been submitted to the asset store.

Hopefully, NGUI will now stabilize and so will the pickers...

As always, PM me for early access, with your invoice number if you haven't gotten in touch yet!

Cheers,

Gregzo

 

NGUI Infinite Pickers 1.52 is live on the Asset Store and should fix compatibility issues with the latest version of NGUI( 3.07 ).

Happy picking,

Gregzo

 

Hi Gregzo,

Can i use this version with NGUI 2.7.0 also? I'm still using NGUI 2.7.0 because of a long project i'm developing and i can't switch now.

EDIT:
Seems the latest version is incompatible is there a way to download an older version which is compatible with NGUI 2.7.0?

 

Hi Tripwire,

I can e-mail you v 1.31 which is compatible with NGUI 2.7. Please PM me with your e-mail!

Cheers,

Gregzo

 

Hi Gregzo,

Thanks again for the great support. I installed the v 1.3.1 works perfect

I have a question though, I keep getting problems with the NGUI layers. I'm not using Depth Sorting, but when using the text picker for instance the background is in front of the text. I've fixed this by using setting hte UIAnchor as the parent of the TextPicker. But now the problem is that the picker isn't going in front of the other GUI items i have. The idea is that when a user taps a button the TextPicker pops up and you can choose a text in the picker. So the picker has to be in front of the other GUI items!

 

Hi Tripwire,

You have to adjust the depth properties of the sprites:

The background and the selector sprites are found on yourPicker/Background/Background and Selector gameobjects.
The depth of the labels or sprites that you cycle through can be adjusted from their respective inspectors ( IPSpritePicker and IPTextPicker, for example ).

These depths have to be sorted to be on top of the rest of your UI.

Let me know if you're still haveing trouble!

Gregzo

 

Hi Gregzo,

I've got it almost working now. The problem now is, that the labels of my buttons come through the picker and the picker itself is in front of the button i'm using. Here's a screenshot:



I can't set the depth higher of my picker because then the fonts disappear, and I can't lower the depth of my fonts because then the fonts will also disappear

Another question, can Infinite Pickers call JS functions or only C# functions?

 

Hi Tripwire,

Depth sorting can be a real pain when you start mixing atlases and UIPanels. This is part of what makes NGUI 3 so much better: depth sorting is... sorted out.

In certain cirumstances ( mixed atlases in the same panel for example ), you will need to adjust the widgets' z position.

One thing you should try first:
Have all the stuff that is not the picker parented to one UIPanel, and the picker to another, then adjust the z's of the UIPanels.

Also make sure that the background sprite of the picker is not transparent, or of course you'll see through.

About JS: yes, it should work.

I won't be in front of the computer again during the day, but will check in tonight.

Cheers,

Gregzo

 

I just bought and imported it and got the following:

Assets/NGUIPickers/Scripts/b_OtherComponents/DragPickerSprite.cs(72,28): error CS0122: `UITweener.Reset()' is inaccessible due to its protection level

Assets/NGUIPickers/Scripts/b_OtherComponents/DragPickerSprite.cs(103,28): error CS0122: `UITweener.Reset()' is inaccessible due to its protection level

What is the quickest fix?

 

Hi bjornrun,

I just checked and indeed, the latest version of NGUI has changed the way to Reset tweens. Simply change both method calls from Reset() to ResetToBeginning() and you're good.

Don't hesitate to ask if you have more questions!

Cheers,

Gregzo

 

for vertical picker the deltaindex should be negtive,this is bug to using for get widget index,am i right?

add follow to fix
int deltaIndex = (int)distanceFromCenter / (int)spacing;
if (direction == Direction.Vertical)
{
deltaIndex = -deltaIndex;
}

 

Hi loverainstm,

Not sure I quite understand what you mean… which script?
Vertical pickers work fine, I use them all the time. Indexes are from top to bottom, so maybe that is what is troubling you…

Let me know,

Gregzo

 

it's just because the order is from top to bottom,so code in get deltaindexfrom screen pos function ,distancefrom center upper get delta index geater than zero.i tried get index is wrong with opposite result

 

Ah, ok, I see what you're doing.

Thanks for spotting, you're right, I forgot to invert delta index when the picker is vertical. Well spotted!

Will correct in the next version.

Many thanks,

Gregzo

 

Hi Gregzo,

I fixed the depth settings now it was a pain to get it right but now it's working perfectly.

I have one last question, how would you make a date picker (for birthdays) like the iOS picker? Like this one :

I'm thinking of using 3 empty pickers but how do you set up the dates and everything right in the pickers? Any ideas?

 

Hi Tripwire,

Glad you've sorted out your depths!

Date Pickers as the one you mention are very tricky: they need to be aware of how many days are in the current month, and to modify their content as the user scrolls years/months/dates. For example, what if the user has selected the 31st of January, and scrolls January to February? Do you auto-scroll the 31 to 28 or 29, depending on the year? Then what do you do with the 29 and 30 still displayed, fade them out? Morph them to a 1 and 2?

If you do not mind the possibility of irrational dates being picked, simply use 3 pickers, one text picker with the months and 2 number pickers, one from 1 to 31 and one from 1900 to 2999 for example.

The approach I took in the provided DateTime Picker is different: one picker for the date, 2 for the time( hours:minutes ). The date picker uses System.DateTime, which allows easy localisation and formatting of the date.

As your use case is birth dates, I would go for the simplest solution - i.e. 3 "dumb" pickers allowing irrational input. You can then check against System.DateTime to spot impossible dates if needed. You could also use System.DateTime for free localisation of months names - check the example I've provided to see how it's done!

Let me know if I can help any further.

Cheers,

Gregzo

 

Thx Gregzo, i'm going to try it out!

I'm having a problem now with the pickers. I have 2 screens. On the first screen the player can choose from a picker which sport he plays. On the 2nd screen the player can setup some sport specific items with pickers. All the items are being set in a list. Which is being filled when the player chooses the sport. I've added a function in the IPTextPicker class:

Code (csharp):

1.  
2. public void setLabels(List<string> label)
3. {
4.         labelsText = label;
5. }
6.  

This all works perfectly when going this way. Now the problem starts when the user presses the back button on the 2nd screen and goes back to the first screen. The player then can choose another sport and go to the 2nd screen.
But when on the 2nd screen the list isn't updated with the new sport specific values. Also i get the following exception:

Code (csharp):

1.  
2. ArgumentOutOfRangeException: Argument is out of range.
3. Parameter name: index
4. System.Collections.Generic.List`1[System.String].get_Item (Int32 index) (at /Applications/buildAgent/work/c514da0c8183631c/mcs/class/corlib/System.Collections.Generic/List.cs:633)
5. IPTextPicker.UpdateCurrentValue () (at Assets/Plugins/NGUI Infinite Pickers/a_MainPickerTypes/IPTextPicker.cs:79)
6. IPPickerBase.CyclerIndexChange (Boolean increment, Int32 widgetIndex) (at Assets/Plugins/NGUI Infinite Pickers/c_Internal/IPPickerBase.cs:159)
7. IPCycler.TryDecrement () (at Assets/Plugins/NGUI Infinite Pickers/b_OtherComponents/IPCycler.cs:477)
8. IPCycler.Update () (at Assets/Plugins/NGUI Infinite Pickers/b_OtherComponents/IPCycler.cs:216)
9.  

It seems the List isn't being updatet correctly when changing it's contents

Just make it easier to understand:
First screen -> player chooses sport (for instance soccer) -> 2nd screen is setup with 3 pickers with Soccer specific texts.
Second screen -> Player presses back and goes to first screen -> Player chooses a sport (for instance Hockey) and goes to the 2nd screen -> 3 pickers aren't updated with the new texts in the List.

i'm using a simple for loop to add items to the list and i'm clearing the list when going back from the 2nd screen to the first screen.

 

Hi Tripwire,

First, you shouldn't add a function to the core asset classes : it's simply bad practise as when upgrading everthing will break. You can write your own subclasses, though...

Second, no need for a setLabels function: labelsText is already public and you can simply set it.

Third, looping pickers are a bit complex in many ways. Simply changing the list of elements to display doesn't give the picker enough information as to what to do.. Once you do set the list, you must call ResetPickerAtContentIndex( int theIndexYouWishToBeCentered );

Summing up:

Code (csharp):

1.  
2. public IPTextPicker textPicker; //assign in the inspector
3.  
4. public void LoadAndDisplayNewStrings( List<string> newStrings, int centerIndex )
5. {
6.     textPicker.labelsText = newStrings; // this doesn't tell the picker to update, and will mess things up pretty quick if you don't reset the picker
7.     textPicker.ResetPickerAtContentIndex( centerIndex ); //everything is redrawn and recalculated with new strings
8. }

I hope it helps!

Don't hesitate to ask when you need more help,

Cheers,

Gregzo

 

Thanks Gregzo it works perfectly now ! Love the pickers

Still have one problem (i'm sorry to keep asking questions ). But I have created the date picker I was asking about. But I have one problem, it seems the fonts aren't consistent between different pickers. Here's a pick of the date picker:



As you can see the font of the TextPicker is different than the one for the NumberPickers. It's the same NGUI font though which I use for all the pickers in the picture, so that is a bit weird. Also when I reselect the font it shows correctly without running. But when I press play in the editor it resets itself to the same as in the picture above.

 

Hi Tripwire,

Where do you set the font? On the labels themselves or on the picker component? Never had that one happening...
My own date time picker example does the same thing ( one font on both number pickers and text pickers ), without the glitch. Do send me your scene if you can't find a solution, I'll take a look.

Cheers,

Gregzo

 

Seems like the fonts weren't set correctly. I thought when I set them to the IPTextPicker script it would also set them on the labels. But that wasn't the case. It's fixed now, but my layers are again screwed up don't know why :neutral: well atleast it keeps me busy