New UI Widgets

I had a small problem with the ToolTips.
I have a panel containing a few things, some of them displaying a tooltip, when a tooltip is displayed and I close the panel (using a key so that the tooltip is still open when the panel is closed), then the tooltip is still displayed after the panel is closed.

It may come from the way I handle my panels, but I found a way to avoid that automatically so I share it here.
in the UIWidgets 'Tooltip' class I add that:

Code (CSharp):

1.  
2. /// <summary>
3. /// Place the tooltip in its correct hierarchy and position
4. /// </summary>
5. protected virtual void OnEnable()
6. {
7.    if (IsAtFront)
8.    {
9.        IsAtFront = false;
10.        TooltipObject.transform.SetParent(tooltipObjectParent);
11.        if (null != anchoredPosition)
12.            (TooltipObject.transform as RectTransform).anchoredPosition = anchoredPosition.Value;
13.     }
14. }
15.  
16. /// <summary>
17. /// Disable the tooltip automatically
18. /// </summary>
19. protected virtual void OnDisable()
20. {
21.    if (IsAtFront && (null != TooltipObject))
22.    {
23.        TooltipObject.SetActive(false);
24.        OnHide.Invoke();
25.    }
26. }
27.  

Maybe that can help other people with the same problem.

 

Thanks, I'll add this fix in the next update.

 

@ilih,
I generated a vertical list control with new Widgets Generation, what i want is show a toggle (as radio) in each item and when a toggle is changed i get an event to call my custom function.
How should i approach it?

Secondly, how do i make it variable height?

I'm using Left List View from the generated scene.

Thanks


Update 2:
Ok i made it variable height by removing horizontal layout with vertical layout and changing EasyLayout child height to prefered (Is this right approach)?

Problem is, List view creates WAAAAY more recycled items than needed, please check screenshot. Just so you know im using it with a canvas scale with screen size.

 

You need to edit generated ListViewСomponent<data class name> class.
Here is documentation of how you can do it: it describes the replacement Text with Spinner widget to display Number field, but you need only add Toggle without removing Text.

Yes.

You also need to change List Type to "List View With Variable Size"
And DefaultItem itself should have any Layout Group to control positions and sizes of the children gameobjects and provide preferred size for the List.EasyLayout component.
You can check if it has done correctly with the bottom block in the Inspector window:

Preferred Height should be specified (and change along with content) and Source should be any Layout Group (in your case it can be Vertical Layout Group with enabled Control Children Size or Easy Layout)

 

Thanks, i managed to make it work with your advise and now no more extra default items.

BTW, this widget generation is really great, and how you show different controls with one data type. If you can add variable item height and others that'd be great.

And please, do add Pull to Refresh and Pull Up to Load More support so we can achieve something like that
https://possiblemobile.com/2014/05/ios-custom-pull-to-refresh/
https://dribbble.com/shots/1956070-Pull-to-refresh

 

This can be done with ScrollRectEvents component.
Please check Examples/ScrollRectUtilites/Pull scene and TestScrollRectEventsPull script.

 

AMAZING , Thanks

 

@ilih, i'm changing Listview's default, highlight colors on runtime, so how do i tell list view to update its item to use new color values (list items remain where they are, they only update their colourschemes) by recalling setData on all visible items

 

Here is the code.
You should copy region "RefreshHighlightedColors" to your class and use RefreshHighlightedColors function.

Code (CSharp):

1.     using System.Collections.Generic;
2.     using UIWidgets;
3.     using UnityEngine;
4.     using UnityEngine.UI;
5.     using UnityEngine.EventSystems;
6.  
7.     public class TestHoverColor : MonoBehaviour
8.     {
9.         [SerializeField]
10.         public ListViewIcons ListView;
11.  
12.         [SerializeField]
13.         public Text Label;
14.  
15.         public void Test()
16.         {
17.             ListView.HighlightedBackgroundColor = Color.black;
18.  
19.             RefreshHighlightedColors(ListView);
20.         }
21.  
22.         #region RefreshHighlightedColors
23.         List<RaycastResult> raycastResults = new List<RaycastResult>();
24.  
25.         void RefreshHighlightedColors(ListViewIcons listView)
26.         {
27.             var item_under_navigation = FindItem(EventSystem.current.currentSelectedGameObject, listView.Container);
28.             if (item_under_navigation != null)
29.             {
30.                 item_under_navigation.onPointerEnterItem.Invoke(item_under_navigation);
31.             }
32.  
33.             var item_under_pointer = FindItem(listView);
34.             if (item_under_pointer != null)
35.             {
36.                 item_under_pointer.onPointerEnterItem.Invoke(item_under_pointer);
37.             }
38.         }
39.  
40.         ListViewItem FindItem(ListViewBase listView)
41.         {
42.             raycastResults.Clear();
43.  
44.             Vector2 position;
45.             var root = Utilites.FindTopmostCanvas(listView.transform).transform as RectTransform;
46.             RectTransformUtility.ScreenPointToLocalPointInRectangle(root, Input.mousePosition, null, out position);
47.             position.x += root.rect.width * root.pivot.x;
48.             position.y += root.rect.height * root.pivot.y;
49.  
50.             var event_data = new PointerEventData(EventSystem.current)
51.             {
52.                 position = position,
53.             };
54.  
55.             EventSystem.current.RaycastAll(event_data, raycastResults);
56.  
57.             foreach (var raycastResult in raycastResults)
58.             {
59.                 if (!raycastResult.isValid)
60.                 {
61.                     continue;
62.                 }
63.  
64.                 var item = raycastResult.gameObject.GetComponent<ListViewItem>();
65.                 if ((item != null) && (item.Owner.GetInstanceID() == listView.GetInstanceID()))
66.                 {
67.                     return item;
68.                 }
69.             }
70.  
71.             return null;
72.         }
73.  
74.         ListViewItem FindItem(GameObject go, Transform parent)
75.         {
76.             if (go == null)
77.             {
78.                 return null;
79.             }
80.  
81.             var t = go.transform;
82.             if (!go.transform.IsChildOf(parent))
83.             {
84.                 return null;
85.             }
86.  
87.             while ((t.parent != null) && (t.parent.GetInstanceID() != parent.GetInstanceID()))
88.             {
89.                 t = t.parent;
90.             }
91.  
92.             return (t.parent == null) ? null : t.GetComponent<ListViewItem>();
93.         }
94.         #endregion
95.     }
96.  

Probably I'll integrate this code with next update.

Upd:
This code needed only for the highlighted colors because of the state of item (is it highlighted or not) cannot be saved, other colors applied automatically.

 

We have been using UIWidgets for our current project and I have been impressed with the ability to override nearly anything in your system. We started implementing drag and drop with our custom tree view and I noticed the protected FindTarget function in "UIWidgets\Standart Assets\Drag-and-Drop\DragSupport.cs" was not declared virtual, I updated the code locally but, believe others would find this as a useful change too, especially with custom tree nodes.

It is a small change but, not sure if you have a github repo or something to submit code changes.
Or just something to change on your next version update.

Great asset thank you very much.
Matt

ICS

 

Ok, I'll mark this function as virtual in the next update.

 

@ilih,
How can we make a Group Tile View List (virtualized) like that?



Why i say Grouped Tile View List i mean

[Heading]
[Image][Image][Image]
[Image][Image][Image]
[Image]
[Heading2]
[Image][Image][Image]
[Image][Image][Image]
[Image][Image]

just like grouped list but with tile view items

 

I made some changes to make it possible and added demo in v1.10.3b2.
Demo in the Examples / TileView / GroupedTileView folder.

Classes:

• Photo.cs - item class
• GroupedPhotos.cs - simple collection of the items grouped by date (GetGroup function)
• GroupedTileView.cs - TileView with GroupedData field, GroupedData is used instead of the DataSource
• GroupedTileViewComponent.cs - display item
• TestGroupedTileView.cs - test script, shows how to add and remove items.

For the correct display of the title groups (dates) and to simulate the gap between the photos and the next date are used the insertion of empty items.
This is done with new properties of the GroupedList<T>:

• ItemsPerBlock - a number of items in a row (it's recalculated inside SetNeedResize function when ScrollRect size changed)
• EmptyGroupItem - item to insert after the group item (date)
• EmptyItem - item to insert between the photos and next group item

 

Just amazing support as usual

 

@ilih
I want to use EasyLayout's FitContainer for width in a single row based layout with TMPro text elements where each element will take equal width. so if easylayout width is 100, then these 4 elements take 25, 25 width each, no matter their content.

How can i achieve that? because in Unity 2018.3.6 it simply gives more width to label with more characters in it

 

You need to override layout properties of TMPro text: add layout element to text and set MinWidth = 1, PreferredWidth = 1 (this way base size will be same for all elements) and FlexibleWidth = 1 (how free space will be distributed).

Or it can be done without EasyLayout: you can set RectTransform anchors X with 0.25 step, like:
first element: 0.00 - 0.25
second element: 0.25 - 0.50
third element: 0.50 - 0.75
fourth element: 0.75 - 1.00

 

i want to use easylayout because children will vary, thanks for ur quick response.

 

@ilih,

I have a feature request for EasyLayout.

For example
- Easylayout with 1 Row and Children Width set to Preferred. Easylayout has width of 160
- 3 Children with layout element and prefered width set to 20 to 30 each.

Now like FlexLayout (HTML/CSS), these 3 elements appear like this attached image.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
justify-content section



Now right now, we have to add empty game object to simulate this, but with official method, this will save a lot of time.

Thanks

 

I'll try to add it.

 

Hi, MovedToCache() function somehow doesn't work when I used the TileView. Please see attached sample project:

// Link removed

(UITest.zip is the Unity project; it uses TileView as an image gallery and loads images from the persistent data folder. PersistentDataPathFiles.zip contains the images I used, you can put them into the persistent data folder.)

As you will see, when the tiles are out of sight, MovedToCache() is not triggered (except the last row of tiles, and even so I think it kind of glitches). Could you check what's going on?

 

MovedToCache() function is used to free resources (like sprites so they can be unloaded) when DefaultItem instance moved to the internal pool.
MovedToCache() does not track when items became out of sight.

You want to track such items with such code:

Code (CSharp):

1.         public ListViewIconsItemDescription Item;
2.  
3.         public virtual void SetData(ListViewIconsItemDescription item)
4.         {
5.             var is_item_changed = (Item != null) && (Item != item);
6.             if (is_item_changed)
7.             {
8.                 ProcessItemOutOfSight(Item);
9.             }
10.  
11.             // save current item;
12.             Item = item;
13.  
14.             // ...
15.         }
16.  
17.         public override void MovedToCache()
18.         {
19.             ProcessItemOutOfSight(Item);
20.             Item = null;
21.         }
22.  
23.         void ProcessItemOutOfSight(ListViewIconsItemDescription item)
24.         {
25.  
26.         }

 

Hi, I have problems with the combobox using TMP. When I scroll down the whole list of elements in the combobox, I get this error in console:

StackOverflowException
UnityEngine.RectTransform.get_anchoredPosition ()
UIWidgets.ListView.GetScrollValue () (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1314)
UIWidgets.ListView.GetFirstVisibleIndex (Boolean strict) (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1403)
UIWidgets.ListView.ScrollUpdate () (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1455)
UIWidgets.ListView.SetScrollValue (Single value) (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1304)
UIWidgets.ListView.ValidateScrollValue () (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1643)
UIWidgets.ListView.ScrollUpdate () (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1459)
UIWidgets.ListView.SetScrollValue (Single value) (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1304)
UIWidgets.ListView.ValidateScrollValue () (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1643)
UIWidgets.ListView.ScrollUpdate () (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1459)
UIWidgets.ListView.SetScrollValue (Single value) (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1304)
UIWidgets.ListView.ValidateScrollValue () (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1643)
UIWidgets.ListView.ScrollUpdate () (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1459)
UIWidgets.ListView.SetScrollValue (Single value) (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1304)
UIWidgets.ListView.ValidateScrollValue () (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1643)
UIWidgets.ListView.ScrollUpdate () (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1459)
UIWidgets.ListView.SetScrollValue (Single value) (at Assets/Plugins/UIWidgets/Scripts/ListView/ListView.cs:1304)
[...]
UIWidg<message truncated>

 

Please try to upgrade to v1.10.3b3 and then disable Combobox.ListView.LimitScrollValue (this option not available in the inspector window in the previous versions and can be disabled only from code)

 

I do not know if I'm doing something wrong, but if I import that new version has compatibility problems with TextMesh Pro.

 

This problem because of the assembly definition file: it's was rewritten with the update, so reference to TextMeshPro package is now missing.
You need to either add the reference to the TMPro package in New UI Widgets\Scripts\UIWidgets assembly definition or disable and enable TMPro support back in the Project Settings.

 

Enabling and disabling the TMPro support worked. And I disabled the LimitScrollValue too and seems is work too. Thank you ilih.

I will take this opportunity to tell you that your asset is amaizing and you did a great job.

 

I am still working on it.

 

Hi,
I'm using the UI widgets on the Oculus Go. I was using VRTK to create a pointer, which allowed me to select/click UI elements. For various reasons, I had to remove VRTK and implement a custom pointer but this no longer interacts with the UI canvas. Could someone advise what could be missing from my new setup?

Thanks!

 

• You should have InputModule component for your custom pointer (an equivalent of the

  VRTK_UIPointer

  or

  StandaloneInputModule

  )
• This component should be added to EventSystem in the Inspector window (or any other gameobject if the component does not have

  [RequireComponent(typeof(EventSystem))]

  attribute).

 

I have the EventSystem and OVRInputModule in my scene, which seems to be an extended version of StandaloneInputModule. Do you know if it will still work?

Thanks!

 

I do not have VR devices, so I cannot check it. But I found this post about Oculus VR and Canvas and apparently settings are little more complicated, please try instruction from that post.
Also, you can try "Unity’s UI system in VR" from Oculus blog, but it can be outdated.

 

That first link was perfect - thanks!

 

HI,
I'm using a world-space UI canvas in VR with sliders the user can manipulate using the end of a raycast pointer from the Oculus Go controller.

I'm getting an issue where the raycast seems to hit colliders BEHIND my world-space UI canvas in preference to hitting the UI.

e.g. if I angle the green line so it wouldn't hit the floor, it hits the UI button OK.
but if I angle it so that it WOULD hit the floor, it DOES hit the floor (passing through the button)!

 

Please try to check OVRRaycaster component on Canvas gameobject: Blocking Objects should be All.

 

Tried it but still the same unfortunately :-(. Currently set to:

 

I understand a problem, this is not related to VR, when you process click on gameobjects (not UI gameobjects) then you should check is pointer is over UI with EventSystem.current.IsPointerOverGameObject() function.
Like this:

Code (CSharp):

1. void ProcessFloorClick()
2. {
3.    if (EventSystem.current.IsPointerOverGameObject())
4.    {
5.       return; // return  from function to cancel click processing
6.    }
7.  
8.    // process click
9. }

 

But this would only be to prevent clicks on the wrong object. If I did this it still wouldn't ever hit the UI buttons - it will still pass through. Is that correct? Seems to be something to do with the raycast.

 

Then try to check InputModule.rayTransform, probably its position and rotation do not match with a camera after angle changed.
The tutorial says it should be "CentreEyeAnchor from the OVRCameraRig"

 

Please check v1.10.3b4:

• EasyLayout: added Flex-like layout
• EasyLayout: added Staggered layout
  
• ListView: added list type TileViewStaggered

 

Hi,
I think the camera/ray must be aligned because when it does hit the UI buttons it's perfect. I can make it hit the UI by removing any other colliders out of the way (i.e. the floor collider) so it can ONLY hit the UI.

really weird!

 

Maybe the layer affects the collision detections order. Try to change the Canvas layer from UI to Default.

 

Thank you for a MASSIVE update

 

examples scenes added for the updates? nothing like some good showcase examples or updated ones

 

There is Examples\TileView\TileViewStaggered scene for the staggered TileView and layout.
Example scene for EasyLayout.Flex will be added in the next update, used terms are similar to terms used in CSS flexbox.

 

FYI the solution was to change the "Event Mask" dropdown on the OVRPhysicsRaycaster (attached to the OVRCameraRig) to ignore layers that were causing a problem.

 

What's the status of styling support? I've tried the LayoutSwitcher project, but the tab menu and the progress bar remain with the old style
Thanks

 

It's finished, but styles do not work with some previously created widgets.
If you create a new tab and progress bar, then style will be correctly applied to them.

 

ListViewHeight seems to have some issues. Tested in an empty scene, with "Only unique items" turned off and the default data set (10 items), there will be an ArgumentOutOfRangeException when the list view is scrolled towards the bottom.

ArgumentOutOfRangeException: Argument is out of range.

Parameter name: index

System.Collections.Generic.List`1[System.String].get_Item (Int32 index) (at /Users/builduser/buildslave/mono/build/mcs/class/corlib/System.Collections.Generic/List.cs:633)

UIWidgets.ObservableList`1[System.String].get_Item (Int32 index) (at Assets/New UI Widgets/Scripts/Utilites/ObservableList.cs:385)

UIWidgets.ListViewHeight.CalculateBottomFillerSize () (at Assets/New UI Widgets/Scripts/ListView/ListViewHeight.cs:236)

UIWidgets.ListView.UpdateLayoutBridge () (at Assets/New UI Widgets/Scripts/ListView/ListView.cs:1623)

UIWidgets.ListView.SetDisplayedIndices (Int32 startIndex, Int32 endIndex, Boolean isNewData) (at Assets/New UI Widgets/Scripts/ListView/ListView.cs:1603)

UIWidgets.ListView.ScrollUpdate () (at Assets/New UI Widgets/Scripts/ListView/ListView.cs:1466)

UIWidgets.ListView.OnScrollUpdate (Vector2 position) (at Assets/New UI Widgets/Scripts/ListView/ListView.cs:1424)

UnityEngine.Events.InvokableCall`1[UnityEngine.Vector2].Invoke (Vector2 args0) (at C:/buildslave/unity/build/Runtime/Export/UnityEvent.cs:207)

UnityEngine.Events.UnityEvent`1[UnityEngine.Vector2].Invoke (Vector2 arg0) (at C:/buildslave/unity/build/Runtime/Export/UnityEvent_1.cs:58)

UnityEngine.UI.ScrollRect.LateUpdate () (at C:/buildslave/unity/build/Extensions/guisystem/UnityEngine.UI/UI/Core/ScrollRect.cs:844)

 

Sorry, I forgot to fix one function after changes in the latest version.

Fix:
You need to modify "ScrollUpdate()" method in ListView.cs:
Replace the old line:

topHiddenItems = GetFirstVisibleIndex();

with new:

CalculateVisibilityData();

And remove line:

bottomHiddenItems = Mathf.Max(0, DataSource.Count - VisibleIndex2ItemIndex(topHiddenItems + visibleItems));

Or you can download fixed version 1.10.3b6.