Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

New UI Widgets

Discussion in 'Assets and Asset Store' started by ilih, Feb 11, 2015.

  1. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    I'll try add it tomorrow,
     
  2. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    Check 1.8.2f1
    Add ResizeListener to ScrollRect and add call ResizeListener.OnResizeInvoke() on SettingsChanged.
     
    jGate99 likes this.
  3. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,935
    how can i get list's number of pages (where 1 page is number of items drawn on screen) and how to programmaticaly navitage to a given page index?
     
  4. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    Code (CSharp):
    1. using UnityEngine;
    2. using UIWidgets;
    3.  
    4. namespace UIWidgetsSamples
    5. {
    6.     public class TestPaginator : MonoBehaviour
    7.     {
    8.         [SerializeField]
    9.         ScrollRectPaginator paginator;
    10.  
    11.         public void Test()
    12.         {
    13.             // pages count
    14.             Debug.Log(paginator.Pages);
    15.  
    16.             // navigate to page
    17.             paginator.CurrentPage = 2;
    18.         }
    19.     }
    20. }
     
    jGate99 likes this.
  5. Meceka

    Meceka

    Joined:
    Dec 23, 2013
    Posts:
    423
    Hello, I just started using this asset, but I need some guidance.

    There will be a mission list in our game. And I am thinking of using tileview for that.
    List will be populated by script. (It won't have custom items that are set previously). But I couldn't find any info in docs about adding items to tileview in runtime instead of start.
    I wish to have about 4 icons (side by side) and 3 text for each item. They will be generated and set in runtime when user opens the mission selection screen, and list will be populated.

    Also, we are targeting mobile and list should be scrolled by touching items and dragging up/down. Listview supports this but in tileview, if touching a list item, it can't be scrolled.

    Thanks.
     
  6. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    It's same as ListView, you should use DataSource propery to manipulate items.
    Code (CSharp):
    1.         var items = SomeTileView.DataSource;
    2.         items.Remove(items[0]);
    3.  
    4.         items.Add(new SomeTileViewItem());
    5.  
    6.         items.RemoveAt(0);
    7.  
    8.         items.Clear();
    You can use this manual to create custom TileView with such items, only difference between ListViewCustom and TileView that is TileView support multiple items per column or row when ListView support only 1 item per column or row.

    Probably you check tileview demo where items have resizable component and this is reason why it cannot be scrolled, you can remove TileViewResizeHelper and Resizable components from DefaultItem and after it you should not have any problems with scroll.
    By default TileView scroll works fine.
     
    Meceka likes this.
  7. Duusty

    Duusty

    Joined:
    May 14, 2013
    Posts:
    56
  8. sebastien-barry

    sebastien-barry

    Joined:
    Dec 18, 2013
    Posts:
    54
    Hi,
    Just to tell you that you forgot to add UNITY_5_3_5 support for SpinnerFloat and SpinnerBase.in your last release.
    I Have just replace SplinnerBase.cs line 230 : #if UNITY_5_3_4 || UNITY_5_4 || UNITY_5_5
    with #if UNITY_5_3_4 || UNITY_5_3_5 || UNITY_5_4 || UNITY_5_5
    and SpinnerFloat.cs line 105 : #if UNITY_5_3_4 || UNITY_5_4 || UNITY_5_5
    with #if UNITY_5_3_4|| UNITY_5_3_5 || UNITY_5_4 || UNITY_5_5

    SpinnerFloat works better that way : But still one problem, I can't type comas for my floats in spinnerInputField.
    Also a problem for typing minus value, I Use SpinnerFloat with OnEnInput validation

    Thanks
     
    Last edited: Jun 20, 2016
  9. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    Thanks, I'll fix it.

    Check 1.8.3beta1
    Added property Culture, specified how number will be displayed and how input will be parsed - specify will be used dot or comma as decimal separator to display value.
    How to specify culture:
    Code (CSharp):
    1. using UIWidgets;
    2. using UnityEngine;
    3.  
    4. namespace UIWidgetsSamples
    5. {
    6.     public class TestSpinnerFloat : MonoBehaviour
    7.     {
    8.         [SerializeField]
    9.         SpinnerFloat spinner;
    10.  
    11.         public void ChangeCulture()
    12.         {
    13.             //Culture names https://msdn.microsoft.com/ru-ru/goglobal/bb896001.aspx
    14.             spinner.Culture = System.Globalization.CultureInfo.GetCultureInfo("ru-RU");
    15.         }
    16.     }
    17. }
    Added field DecimalSeparators, along with decimal separator within Culture determine valid decimal separators for input - by default used dot and comma, this should fix problem with typing comma.
    (Warning: incompatible types with different Unity versions - Unity 4.x use string[] and Unity 5.x use char[])

    I cannot reproduce it, may be Min value is not negative?
     
  10. sebastien-barry

    sebastien-barry

    Joined:
    Dec 18, 2013
    Posts:
    54

    Ok Great that fix it.

    One last question, I don't find the reason why, some of my spinner's carrets are not visible. All my spinners have the same settings,
    Maybe a Unity UI bug ?
     
  11. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
  12. sebastien-barry

    sebastien-barry

    Joined:
    Dec 18, 2013
    Posts:
    54
  13. camel82106

    camel82106

    Joined:
    Jul 2, 2013
    Posts:
    304
    Hi,
    I'm playing with Tables.

    I would like to have something stored in table. But not visible. Is there some nice way how to do it?

    For example I would like to store row id in table. But I don't want to show it to user. Iit's still usable to have it there though for furher processing.

    Thanks
    Peter
     
  14. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    Don't display row id in component.SetData(), or if you need row id in component you can keep value in class field.
    Code can be like this:
    Code (CSharp):
    1. using UnityEngine;
    2. using UnityEngine.UI;
    3. using UIWidgets;
    4.  
    5. namespace UIWidgetsSamples {
    6.     public class SteamSpyComponent : ListViewItem, IResizableItem {
    7.  
    8.         // skipped code...
    9.  
    10.         int id; // here will be stored row id
    11.  
    12.         SteamSpyItem Item; // or row
    13.  
    14.         public void SetData(SteamSpyItem item)
    15.         {
    16.        
    17.             // don't display row id
    18.             //Id.text = item.Id;
    19.             // if you need id you can save it in class field
    20.             id = item.Id
    21.             // or save item
    22.             Item = item;
    23.  
    24.             // skipped code...
    25.         }
    26.     }
    27. }
     
    camel82106 likes this.
  15. camel82106

    camel82106

    Joined:
    Jul 2, 2013
    Posts:
    304
    Now I feel stupid as solution is so clear. :) But you know it's easy to get lost...
    At least I have found time for 5-star review.

    Thanks for your work!
    Peter
     
  16. sebastien-barry

    sebastien-barry

    Joined:
    Dec 18, 2013
    Posts:
    54
    Hi, Just want to tell you that you forgot to Remove abstract modifier from ListViewItem in your last 1.8.3 beta1 version that make ListViewGameObjectFail
     
  17. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    Thanks, fixed.
     
  18. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,935
    @ilih,
    can you please provide a written guide for TileView Paginator?
     
  19. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    Select paginator
    • If you need paginator with fixed items count per page use ListViewPaginator.
      If you need paginator where page size is equal ScrollRect size use ScrollRectPaginator. Add TileViewScrollRectFitter if you also need whole number of items on one page.
    • Use ScrollRectPaginator for any ScrollRect outside ListView, TileView etc.

    Paginator, common settings
    (optional) Default Page - template gameobject to display inactive pages
    (optional) Active Page - template gameobject to display active page
    (optional) Prev Page - gameobject, on click go to previous page
    (optional) Next Page - gameobject, on click go to next page

    Fast Drag Distance and Fast Drag Time - scroll to next/previous page if drag distance more than Fast Drag Distance and drag time less Fast Drag Time.
    To disable set FastDragTime = 0.

    ForceScrollOnPage - scroll to nearest page when drag ended if not meet Fast Drag condition. Should be used only with touch devices.

    Animation - enable animation
    Movement - animation curve
    Unscaled Time - should be used Unscaled Time or Scaled Time. Enabled this if you pause with Time.timeScale=0.

    ListViewPaginator specific settings
    PerPage - items count on one page, for TileView this is rows or columns count per page.

    ScrollRectPaginator specific settings
    Direction - scroll direction
    PageSizeType - if Page Size Type = Auto page size is equal scroll rect size, if Page Size Type = Fixed used Page Size value.
    PageSize - size of page
    PageSpacing - space between pages

    TileViewScrollRectFitter
    Resize ScrollRect to fit whole number of columns and rows.
    Add it to gameobject with TileView script.

    Default Page and Active Page, how to display page number
    Add ScrollRectPageWithNumber component Default Page and Active Page gameobjects and specify Number field.
    For TextMeshPro you can use ScrollRectPageWithNumberTMPro instead ScrollRectPageWithNumber.
    If you need specific behavior you can create own class inherited from ScrollRectPage.
     
  20. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,935
    @ilih, Thanks
    When are you going to update Documentation on your website about all the new features?
     
  21. oldbushie

    oldbushie

    Joined:
    Mar 30, 2012
    Posts:
    24
  22. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    No, it does not have any ready to use pickers.
    But it's possible to have similar functionality with Popup and own ListView for number values.
    It can be used such way:
    Code (CSharp):
    1. using UnityEngine;
    2. using UIWidgets;
    3. using System.Linq;
    4.  
    5. namespace UIWidgetsSamples {
    6.     public class PopupTest : MonoBehaviour
    7.     {
    8.         [SerializeField]
    9.         Popup popup;
    10.  
    11.         Popup currentPopup;
    12.         ListViewInt currentListView;
    13.  
    14.         public void ShowPicker()
    15.         {
    16.             currentPopup = popup.Template();
    17.             currentPopup.Show();
    18.             currentListView = currentPopup.GetComponentInChildren<ListViewInt>();
    19.  
    20.             // fill list with values
    21.             currentListView.DataSource = Enumerable.Range(1, 100).ToObservableList();
    22.  
    23.             // deselect
    24.             currentListView.SelectedIndex = -1;
    25.             currentListView.OnSelectObject.AddListener(Callback);
    26.         }
    27.  
    28.         void Callback(int index)
    29.         {
    30.             // do something with value
    31.             Debug.Log(currentListView.DataSource[index]);
    32.  
    33.             currentListView.OnSelectObject.RemoveListener(Callback);
    34.             currentPopup.Close();
    35.         }
    36.     }
    37. }
     
  23. oldbushie

    oldbushie

    Joined:
    Mar 30, 2012
    Posts:
    24
    Thanks!! I'll give that a try.
     
  24. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    @JohnGate, @oldbushie

    1.8.3beta6 available.
    Changelog
    • SpinnerFloat - added property Culture, specified how number will be displayed and how input will be parsed
    • SpinnerFloat - added field DecimalSeparators, along with decimal separator within Culture determine valid decimal separators for input
      (Warning: incompatible types with different Unity versions - Unity 4.x use string[] and Unity 5.x use char[])
    • Resizable - added corners directions for resize
    • ListView's - added FadeDuration for colors change
    • Added SelectableHelper - allow to control additional Graphic component according selection state of current gameobject. So you can control button background color with Button component and Button text color with SelectableHelper
    • Added ListViewInt
    • Added Picker - base class for creating own pickers
    • Added PickerInt

    Using SelectableHelper
    Add SelectableHelper compoentn to button and specify Text gameobject as Target Graphic


    Using PickerInt
    Code (CSharp):
    1. using UnityEngine;
    2. using System.Linq;
    3. using UIWidgets;
    4.  
    5. namespace UIWidgetsSamples {
    6.    
    7.     public class PickerIntTest : MonoBehaviour {
    8.         [SerializeField]
    9.         PickerInt PickerTemplate;
    10.  
    11.         int currentValue = 0;
    12.  
    13.         public void Test()
    14.         {
    15.             // create picker by template
    16.             var picker = PickerTemplate.Template();
    17.  
    18.             // set values
    19.             picker.ListView.DataSource = Enumerable.Range(1, 100).ToObservableList();
    20.  
    21.             // show picker
    22.             picker.Show(currentValue, ValueSelected, Canceled);
    23.         }
    24.  
    25.         void ValueSelected(int value)
    26.         {
    27.             currentValue = value;
    28.             Debug.Log("value: " + value);
    29.         }
    30.  
    31.         void Canceled()
    32.         {
    33.             Debug.Log("canceled");
    34.         }
    35.     }
    36. }
     
    jGate99 likes this.
  25. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,935
    @ilih
    Thanks for the update, will check it out.


    Now a problem with easy layout.
    I have a scroll view with easy layout in it, set it as grid and fixed column =1
    now there are 10 items in it while 3 items are inactive.

    Now on runtime, when i press a button those 3 items appear but layout is messed up as it doesnt update itself when some of items become active in it.
    when i resize game view, then it stablelizes again (which is ofcourse not a proper fix, but shows the problem)

    Can you please fix it?
     
  26. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    I'll check it.
     
    jGate99 likes this.
  27. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,935
    @ilih Any update on mentioned bug?
     
  28. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    Fix:
    EasyLayout.cs, line 795, uncomment "RepositionUIElements();" in SetLayoutVertical()
    Code (CSharp):
    1.         public override void SetLayoutVertical()
    2.         {
    3.             RepositionUIElements();
    4.         }
     
  29. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,935
    It worked, however now i see followiing error on runtime.
     

    Attached Files:

  30. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    Looks like some Unity bug, try to restart Unity, if this does not help tell me Unity version and how I can reproduce it.
     
  31. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,935
    @ilih
    After restarting problem is no more.

    TMP Pro based Dialog doesnt handle Button Labels, can you please fix that?
    for now i added TMPro based label case after Line# 365 in Dialog.cs
     
  32. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,935
    Another request is to provide reference to instance of dialog on close method.
    Current signature is

    Code (CSharp):
    1.     public bool Close()
    2.         {
    3.             return true;
    4.         }
    But if you pass reference to dialog, then

    Code (CSharp):
    1.    
    2. public bool Close(Dialog currentInstance)
    3.         {
    4.             return true;
    5.         }
    Thanks
     
  33. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    Fixed, please update to 1.8.3beta7 and UIWidgets TMPro beta4.

    You can use any function that return true to close dialog. So you don't need use exactly Dialog.Close.
    Code (CSharp):
    1.         public void ShowDialogInPosition()
    2.         {
    3.             var dialog = dialogSample.Template();
    4.             dialog.Show(
    5.                 title: "Simple Dialog",
    6.                 message: "Simple dialog with only close button.",
    7.                 buttons: new DialogActions(){
    8.                     { "Close", () => Close(dialog) }, //anonymous function instead Dialog.Close
    9.                 },
    10.                 focusButton: "Close",
    11.                 position: dialog.transform.localPosition
    12.             );
    13.         }
    14.  
    15.         public bool Close(Dialog currentInstance)
    16.         {
    17.             return true;
    18.         }
     
  34. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,935
    One question though, how anonymous functions gets removed/disposed?
     
  35. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    Same as class instance. After dialog closed anonymous function became unused and removed be garbage collector.

    If you don't open more than one dialog simultaneously, you can keep current dialog instance in class field and class method to close instead anonymous function.
    Code (CSharp):
    1.         Dialog currentInstance;
    2.         public void ShowDialogInPosition()
    3.         {
    4.             currentInstance = dialogSample.Template();
    5.             currentInstance.Show(
    6.                 title: "Simple Dialog",
    7.                 message: "Simple dialog with only close button.",
    8.                 buttons: new DialogActions(){
    9.                     { "Close", this.Close }, //anonymous function instead Dialog.Close
    10.                 },
    11.                 focusButton: "Close",
    12.                 position: dialog.transform.localPosition
    13.             );
    14.         }
    15.         bool Close()
    16.         {
    17.             // do something with currentInstance
    18.             return true;
    19.         }
     
  36. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,935
    Thanks :)
    Fact is you deserve more than just a simple thank you.
    Thank you once again your prompt responses, help, and listening to your customers requests and providing them instantly. You are amazing.
     
  37. ctc5301

    ctc5301

    Joined:
    Jan 28, 2016
    Posts:
    16
    Does UIWidget support canvas scale for automatic layout? Do you have a solution for mobile displays? Currently, this plugin may seem to be too difficult for me to implement a mockup application.
     
    Last edited: Jul 16, 2016
  38. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    If you ask about CanvasScaler that it is supported. If you need different layouts for different resolutions or aspect ratios than New UI Widgets does not have tools for it, but should work fine with third party tools.

    Please specify what exacty you need.

     
  39. ctc5301

    ctc5301

    Joined:
    Jan 28, 2016
    Posts:
    16
    I use your sample scene to build an Android apk and I found it shows as this attached image. As you can see the UI doesn't look nice on a mobile display, especially for the layout part. I know Unity has auto layout, but I am afraid of not being able to use the skill from the ground to implement a pretty mockup app in short time. That's why I came to your asset. All I wish is a startup project so that I could build a mockup application on my devices without much pain. If other third party tools could help for this, please kindly tell me. I would be appreciated much.
     

    Attached Files:

  40. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    Yes, for now sample scene does not support different aspect ratios.

    Probably you need something like this https://www.assetstore.unity3d.com/en/#!/content/36544 But I never use it, so I cannot say about it's quality.
     
  41. ctc5301

    ctc5301

    Joined:
    Jan 28, 2016
    Posts:
    16
    That looks like the feature I require. But it doesn't provide or even promise to handle 3rd party UI component like yours. This is still a headache to me. Do you have a plan to enhance your UIs with the capability of responsive design in the future?
     
  42. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,935


    Hi @ilih
    i have finally started implementing Paginator. Your above instruction was confusing so what i did is I copied working Paginator Example from SampleAssets/TileViewIcons and started making a duplicate version.

    And everything worked.

    Now 1 problem is user is only able to scroll when mouse/touch is over items. but not on surrouding areas even though TileView is taking full width and height (please see attached image).
    How can i fix that?
    Thanks
     

    Attached Files:

    Last edited: Jul 17, 2016
  43. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,935
    @ilih
    Second question, how can i add toggle buttons below that let me jump to a given page, they also show all the available pages.
     
    Last edited: Jul 17, 2016
  44. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    I added LayoutSwitcher, check 1.8.3beta10
    Objects - specify what position will be changed with different screen.
    Layouts - specify aspect ratio and max display size for supported layouts. After setting objects positions press "Save" for corresponding layout. Repeat this for each layout.
    Use "UIWidgets LayoutSwitcher" scene as example.

    Add DragRedirect to TileView and specify ScrollRect to Redirect To field.
    Code (CSharp):
    1. using UnityEngine;
    2. using UnityEngine.UI;
    3. using UnityEngine.EventSystems;
    4.  
    5. namespace UIWidgets {
    6.     /// <summary>
    7.     /// Drag redirect.
    8.     /// </summary>
    9.     public class DragRedirect : UIBehaviour, IBeginDragHandler, IInitializePotentialDragHandler, IDragHandler, IEndDragHandler, IScrollHandler
    10.     {
    11.         [SerializeField]
    12.         public ScrollRect RedirectTo;
    13.  
    14.         public void OnBeginDrag(PointerEventData eventData)
    15.         {
    16.             RedirectTo.OnBeginDrag(eventData);
    17.         }
    18.  
    19.         public void OnInitializePotentialDrag(PointerEventData eventData)
    20.         {
    21.             RedirectTo.OnInitializePotentialDrag(eventData);
    22.         }
    23.  
    24.         public void OnDrag(PointerEventData eventData)
    25.         {
    26.             RedirectTo.OnDrag(eventData);
    27.         }
    28.  
    29.         public void OnEndDrag(PointerEventData eventData)
    30.         {
    31.             RedirectTo.OnEndDrag(eventData);
    32.         }
    33.  
    34.         public void OnScroll(PointerEventData eventData)
    35.         {
    36.             RedirectTo.OnScroll(eventData);
    37.         }
    38.     }
    39. }
    Check ScrollRectNumericPaginator, you need specify objects for Default Page and Active Page.
     
  45. sebastien-barry

    sebastien-barry

    Joined:
    Dec 18, 2013
    Posts:
    54
    Hi,
    I get the following error when I enter a big int value (like 99999999999999) in a spinner :
    My Spinner Validation Mode is : On End Input
    OverflowException: Value is too large
    System.Int32.Parse (System.String s) (at /Users/builduser/buildslave/mono/build/mcs/class/corlib/System/Int32.cs:629)
    UIWidgets.Spinner.ValueEndEdit (System.String value) (at Assets/UIWidgets/Standart Assets/Spinner/Spinner.cs:112)

    Thanks
     
  46. ctc5301

    ctc5301

    Joined:
    Jan 28, 2016
    Posts:
    16
    I must say you are a wonderful guy. I'll try that when I finish my prototype these days.
     
  47. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    Fixed, please update to 1.8.3f1
    Now if value too big or small it will be limited with int.MaxValue (2,147,483,647) and int.MinValue (-2,147,483,648)
     
  48. sebastien-barry

    sebastien-barry

    Joined:
    Dec 18, 2013
    Posts:
    54
    Great, once again thanks for your support
     
  49. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,935
    @ilih,
    We already have GetVisibleIndecies in ListView which is great, but i also need GetVisibleItems<T> where T is TComponent which return visual items itself so i can directly interact with them. Thanks
     
  50. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,402
    Add following function to ListViewCustom.cs
    Code (CSharp):
    1.         public List<TComponent> GetVisibleComponents()
    2.         {
    3.             return components.ToList();
    4.         }